HyperOnion/json_as_html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init.

Browse source
This commit is contained in:
trans_soup 2023-07-14 21:47:43 +02:00
commit 8f45f69d09
4 changed files with 74 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/styles/base.css Normal file
View file

@ -0,0 +1,16 @@
html, body {
margin: 0;
min-height: 100vh;
overflow: auto;
}
body {
background-color: #000;
color: #fff;
padding: 0;
}
a {
color: #0f0;
}

BIN
favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 127 B

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="/assets/styles/base.css">
<title>json as html</title>
<script defer type="module" src="js/main.mjs"></script>
</head>
<body></body>

45
js/main.mjs Normal file
View file

@ -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));