refactor: move styles out
This commit is contained in:
parent
bc89b3d9a2
commit
d986e6b84f
|
|
@ -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:
|
||||
|
|
|
|||
115
main.ts
115
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 head = el.ownerDocument.head;
|
||||
|
||||
head.createEl("style", {
|
||||
text: SWARNAM_CSS,
|
||||
});
|
||||
const root = el.createDiv({ cls: `${PREFIX}-root` });
|
||||
|
||||
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(
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
83
styles.css
83
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
|
||||
available in the app when your plugin is enabled.
|
||||
display: flex;
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue