commit 8f45f69d0995bf8976d83b6fa6ef3cdd548d57e5 Author: trans_soup <> Date: Fri Jul 14 21:47:43 2023 +0200 init. 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 0000000..69c2f64 Binary files /dev/null and b/favicon.ico differ 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));