From 8f45f69d0995bf8976d83b6fa6ef3cdd548d57e5 Mon Sep 17 00:00:00 2001 From: trans_soup <> Date: Fri, 14 Jul 2023 21:47:43 +0200 Subject: [PATCH] init. --- assets/styles/base.css | 16 +++++++++++++++ favicon.ico | Bin 0 -> 127 bytes index.html | 13 ++++++++++++ js/main.mjs | 45 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 74 insertions(+) create mode 100644 assets/styles/base.css create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 js/main.mjs diff --git a/assets/styles/base.css b/assets/styles/base.css new file mode 100644 index 0000000..8178f5c --- /dev/null +++ b/assets/styles/base.css @@ -0,0 +1,16 @@ +html, body { + margin: 0; + min-height: 100vh; + overflow: auto; +} + +body { + background-color: #000; + color: #fff; + + padding: 0; +} + +a { + color: #0f0; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..69c2f643da6375dc7941ee5202c6425b1cbbf767 GIT binary patch literal 127 zcmeAS@N?(olHy`uVBq!ia0vp^4M3d0!3HF+R#kZdDK}3S$B>FSZx1r^0(plPeD}}g fXBPo7NdbSP4bP0l+XkKH4qdf literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..d6d4439 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + + json as html + + + + + diff --git a/js/main.mjs b/js/main.mjs new file mode 100644 index 0000000..20ef980 --- /dev/null +++ b/js/main.mjs @@ -0,0 +1,45 @@ +function use_as_array (val) { + return Array.isArray(val) ? val : [val]; +} + +function json_as_html (json) { + if (json instanceof Node) { + return json; + } + + if (typeof json === "string") { + return document.createTextNode(json); + } + + const [type, attributes, children] = json; + + const elem = document.createElement(type); + + attributes.forEach(([key, value]) => + elem[key] = value); + // elem.setAttribute(key, value)); + + const child_nodes = use_as_array(children).map(json_as_html) + child_nodes.forEach(child => elem.appendChild(child)); + + return elem; +} + + + +const demo = [ + "div", + [ + ["id", "wrapper"] + ], + [ + ["h1", [], "header :)"], + ["p", [], "paragraph! meow"], + ["p", [], "another paragraph!! this is so cool"], + ["button", [ + ["onclick", _ => alert("see? it works!")] + ], "it can even do buttons!"], + ], +]; + +document.body.appendChild(json_as_html(demo));