refactor: move styles out

README.md

@@ -1,11 +1,11 @@
 # Swarnam
 
-A no-frills web code blocks plugin for Obsidian.
+A no-frills web playground plugin for Obsidian.
 
 ## Usage
 
 Install the extension from Obsidian community plugins list (you need to enable this first from
-Settings).
+Settings), enable the plugin and then restart Obsidian.
 
 To create a new Swarnam block, you need to open a block code snippet and give it the `swarnam` tag
 like so:

main.ts

@@ -2,90 +2,6 @@ import { Plugin } from "obsidian";
 
 const PREFIX = "swarnam";
 
-const SWARNAM_CSS = `
-.swarnam-root {
-	--${PREFIX}-html-color: #e34c26;
-	--${PREFIX}-css-color: #2965f1;
-	--${PREFIX}-js-color: #f0db4f;
-	--${PREFIX}-box-padding: var(--size-4-3) var(--size-4-4);
-	--${PREFIX}-border-color: var(--divider-color);
-	--${PREFIX}-border-radius: var(--code-radius);
-	--${PREFIX}-source-font: var(--font-monospace);
-	--${PREFIX}-source-font-size: var(--code-size);
-
-	display: flex;
-	align-items: stretch;
-	width: 100%;
-}
-
-.swarnam-root.error {
-	display: block;
-	padding: var(--${PREFIX}-box-padding);
-	background-color: var(--code-background);
-	text-align: center;
-
-	.icon {
-		font-family: "Apple Emoji Color", sans-serif;
-		font-size: 1.5em;
-	}
-}
-
-.swarnam-source-root {
-	flex: 1 1 0;
-	overflow-x: scroll;
-	display: flex;
-	align-items: stretch;
-	flex-direction: column;
-}
-
-.swarnam-preview {
-	flex: 1 1 0;
-	border: 1px solid var(--${PREFIX}-border-color);
-	border-left: 0;
-	border-top-right-radius: var(--${PREFIX}-border-radius);
-	border-bottom-right-radius: var(--${PREFIX}-border-radius);
-	padding: var(--${PREFIX}-box-padding);
-}
-
-.swarnam-source-container {
-	position: relative;
-	flex: 1 1 0;
-
-	& + & {
-		border-top: 1px solid var(--${PREFIX}-border-color);
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-}
-
-.markdown-rendered .swarnam-source {
-	height: 100%;
-	margin: 0;
-	font-family: var(--${PREFIX}-source-font);
-	font-size: var(--${PREFIX}-source-font-size);
-	white-space: pre;
-}
-
-.swarnam-badge {
-	position: absolute;
-	top: calc(var(--size-4-3) / 1.5);
-	right: calc(var(--size-4-3) / 1.5);
-	font-size: 0.65em;
-}
-
-.swarnam-html-badge {
-	color: var(--${PREFIX}-html-color);
-}
-
-.swarnam-css-badge {
-	color: var(--${PREFIX}-css-color);
-}
-
-.swarnam-js-badge {
-	color: var(--${PREFIX}-js-color);
-}
-`;
-
 function base64ToBytes(base64: string) {
 	const binString = atob(base64);
 	// @ts-expect-error
@@ -118,7 +34,7 @@ function getIframeDoc(htmlSource: string, cssSource: string, jsSource: string) {
 		<style>
 		${cssSource}
 		</style>
-		<div class="swarnam-html-container">
+		<div class="${PREFIX}-html-container">
 		${htmlSource}
 		</div>
 		<script>
@@ -138,12 +54,7 @@ export default class SwarnamPlugin extends Plugin {
 		this.registerMarkdownCodeBlockProcessor(
 			"swarnam",
 			(source, el, ctx) => {
-				const root = el.createDiv({ cls: "swarnam-root" });
+				const root = el.createDiv({ cls: `${PREFIX}-root` });
-				const head = el.ownerDocument.head;
-
-				head.createEl("style", {
-					text: SWARNAM_CSS,
-				});
 
 				let [
 					htmlSource = "",
@@ -174,53 +85,53 @@ export default class SwarnamPlugin extends Plugin {
 				}
 
 				const sourceRoot = root.createDiv({
-					cls: "swarnam-source-root",
+					cls: `${PREFIX}-source-root`,
 				});
 
 				const htmlContainer = sourceRoot.createDiv({
-					cls: "swarnam-source-container",
+					cls: `${PREFIX}-source-container`,
 				});
 				const htmlEl = htmlContainer.createEl("pre", {
-					cls: "swarnam-source swarnam-html-source",
+					cls: `${PREFIX}-source ${PREFIX}-html-source`,
 				});
 				htmlContainer.createDiv({
 					text: "HTML",
-					cls: "swarnam-badge swarnam-html-badge",
+					cls: `${PREFIX}-badge ${PREFIX}-html-badge`,
 				});
 				htmlEl.setText(htmlSource);
 
 				if (cssSource) {
 					const cssContainer = sourceRoot.createDiv({
-						cls: "swarnam-source-container",
+						cls: `${PREFIX}-source-container`,
 					});
 					const cssEl = cssContainer.createEl("pre", {
-						cls: "swarnam-source swarnam-css-source",
+						cls: `${PREFIX}-source ${PREFIX}-css-source`,
 					});
 					cssContainer.createDiv({
 						text: "CSS",
-						cls: "swarnam-badge swarnam-css-badge",
+						cls: `${PREFIX}-badge ${PREFIX}-css-badge`,
 					});
 					cssEl.setText(cssSource);
 				}
 
 				if (jsSource) {
 					const jsContainer = sourceRoot.createDiv({
-						cls: "swarnam-source-container",
+						cls: `${PREFIX}-source-container`,
 					});
 
 					const jsEl = jsContainer.createEl("pre", {
-						cls: "swarnam-source swarnam-js-source",
+						cls: `${PREFIX}-source ${PREFIX}-js-source`,
 					});
 
 					jsContainer.createDiv({
 						text: "JS",
-						cls: "swarnam-badge swarnam-js-badge",
+						cls: `${PREFIX}-badge ${PREFIX}-js-badge`,
 					});
 					jsEl.setText(jsSource);
 				}
 
 				const iframeEl = root.createEl("iframe", {
-					cls: "swarnam-preview",
+					cls: `${PREFIX}-preview`,
 				});
 
 				iframeEl.src = `data:text/html;base64;charset=UTF-8,${asBase64(

manifest.json

@@ -3,7 +3,7 @@
 	"name": "Swarnam",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "A no-frills web code blocks plugin for Obsidian.",
+	"description": "A no-frills web playground plugin for Obsidian.",
 	"author": "runofthemillgeek",
 	"authorUrl": "https://dg.sangeeth.dev",
 	"fundingUrl": "https://dg.sangeeth.dev",

styles.css

@@ -1,8 +1,81 @@
-/*
+.swarnam-root {
+	--swarnam-html-color: #e34c26;
+	--swarnam-css-color: #2965f1;
+	--swarnam-js-color: #f0db4f;
+	--swarnam-box-padding: var(--size-4-3) var(--size-4-4);
+	--swarnam-border-color: var(--divider-color);
+	--swarnam-border-radius: var(--code-radius);
+	--swarnam-source-font: var(--font-monospace);
+	--swarnam-source-font-size: var(--code-size);
 
-This CSS file will be included with your plugin, and
+	display: flex;
-available in the app when your plugin is enabled.
+	align-items: stretch;
+	width: 100%;
+}
 
-If your plugin does not need CSS, delete this file.
+.swarnam-root.error {
+	display: block;
+	padding: var(--swarnam-box-padding);
+	background-color: var(--code-background);
+	text-align: center;
 
-*/
+	.icon {
+		font-family: "Apple Emoji Color", sans-serif;
+		font-size: 1.5em;
+	}
+}
+
+.swarnam-source-root {
+	flex: 1 1 0;
+	overflow-x: scroll;
+	display: flex;
+	align-items: stretch;
+	flex-direction: column;
+}
+
+.swarnam-preview {
+	flex: 1 1 0;
+	border: 1px solid var(--swarnam-border-color);
+	border-left: 0;
+	border-top-right-radius: var(--swarnam-border-radius);
+	border-bottom-right-radius: var(--swarnam-border-radius);
+	padding: var(--swarnam-box-padding);
+}
+
+.swarnam-source-container {
+	position: relative;
+	flex: 1 1 0;
+
+	& + & {
+		border-top: 1px solid var(--swarnam-border-color);
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+}
+
+.markdown-rendered .swarnam-source {
+	height: 100%;
+	margin: 0;
+	font-family: var(--swarnam-source-font);
+	font-size: var(--swarnam-source-font-size);
+	white-space: pre;
+}
+
+.swarnam-badge {
+	position: absolute;
+	top: calc(var(--size-4-3) / 1.5);
+	right: calc(var(--size-4-3) / 1.5);
+	font-size: 0.65em;
+}
+
+.swarnam-html-badge {
+	color: var(--swarnam-html-color);
+}
+
+.swarnam-css-badge {
+	color: var(--swarnam-css-color);
+}
+
+.swarnam-js-badge {
+	color: var(--swarnam-js-color);
+}