x/swarnam-obsidian
1
0
Fork 0
mirror of https://github.com/runofthemillgeek/swarnam-obsidian.git synced 2025-04-19 18:10:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: x:main
Branches Tags
x:main
x:1.0.1
x:1.0.0
..
compare: x:1.0.1
Branches Tags
x:main
x:1.0.1
x:1.0.0

No commits in common. "main" and "1.0.1" have entirely different histories.
main ... 1.0.1

3 changed files with 28 additions and 32 deletions
Show Stats Expand all files Collapse all files

40
README.md
View File

@ -4,17 +4,11 @@
# Swarnam # Swarnam
A no-frills web playground plugin for Obsidian. Inspired by [MDN playgrounds](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). A no-frills web playground plugin for Obsidian.
<sup><i>Swarnam (സ്വർണം)</i> means <i>gold</i> in Malayalam.<br/></sup>
<sup>(icon credit: [3dicons](https://3dicons.co))</sup>
<small>(icon credit: [3dicons](https://3dicons.co))</small>
</div> </div>
## Demo
https://github.com/runofthemillgeek/swarnam-obsidian/assets/2759499/333424b3-2f82-4c1e-9e50-68c837227433
## Usage ## Usage
Install the extension from Obsidian community plugins list (you need to enable this first from Install the extension from Obsidian community plugins list (you need to enable this first from
@ -23,39 +17,39 @@ 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 To create a new Swarnam block, you need to open a block code snippet and give it the `swarnam` tag
like so: like so:
```swarnam ```swarnam
<h1>Hello, world</h1> <h1>Hello, world</h1>
``` ```
When you preview this, it'll show the source and render the HTML side-by-side. You can hover on the When you preview this, it'll show the source and render the HTML side-by-side. You can hover on the
top-right and click the `</>` icon to edit the snippet to make some changes. top-right and click the `</>` icon to edit the snippet to make some changes.
You can also add CSS and JS by separating them with `---*---` like so: You can also add CSS and JS by separating them with `---*---` like so:
```swarnam ```swarnam
<h1 id="h1">Hello world</h1> <h1 id="h1">Hello world</h1>
---*--- ---*---
h1 { h1 {
font-family: "Manjari"; font-family: "Manjari";
color: red; color: red;
animation: rainbow 5s ease infinite forwards; animation: rainbow 5s ease infinite forwards;
} }
@keyframes rainbow { @keyframes rainbow {
0% { filter: hue-rotate(0); } 0% { filter: hue-rotate(0); }
100% { filter: hue-rotate(360deg); } 100% { filter: hue-rotate(360deg); }
} }
---*--- ---*---
let i = 0; let i = 0;
setInterval(() => { setInterval(() => {
h1.textContent = `${["Hello", "Hola", "നമസ്കാരം"][i++ % 3]} Obsidian!`; h1.textContent = `${["Hello", "Hola", "നമസ്കാരം"][i++ % 3]} Obsidian!`;
}, 1500) }, 1500)
``` ```
This'll render the three snippets on the left side and show the preview of a web page that has all This'll render the three snippets on the left side and show the preview of a web page that has all
these 3 blocks injected. these 3 blocks injected.

2
main.ts
View File

@ -16,7 +16,9 @@ function bytesToBase64(bytes: Uint8Array) {
} }
function asBase64(text: string) { function asBase64(text: string) {
console.log({ text });
const b64 = bytesToBase64(new TextEncoder().encode(text)); const b64 = bytesToBase64(new TextEncoder().encode(text));
console.log(console.log(new TextDecoder().decode(base64ToBytes(b64))));
return b64; return b64;
} }

4
manifest.json
View File

@ -2,10 +2,10 @@
"id": "swarnam", "id": "swarnam",
"name": "Swarnam", "name": "Swarnam",
"version": "1.0.1", "version": "1.0.1",
"minAppVersion": "1.5.12", "minAppVersion": "0.15.0",
"description": "A no-frills web playground plugin for Obsidian.", "description": "A no-frills web playground plugin for Obsidian.",
"author": "runofthemillgeek", "author": "runofthemillgeek",
"authorUrl": "https://dg.sangeeth.dev", "authorUrl": "https://dg.sangeeth.dev",
"fundingUrl": "https://www.buymeacoffee.com/runofthemillgeek", "fundingUrl": "https://dg.sangeeth.dev",
"isDesktopOnly": true "isDesktopOnly": true
} }