Describe basic skooma features in webpage

index.html

@@ -1,5 +1,7 @@
 <link rel="stylesheet" href="page/style.css">
 
+<script type="module" src="page/codeblock.js"></script>
+
 <h1>DarkWiiPlayer/JS</h1>
 <p>A JavaScript <em>micro-framework</em> to make front-end <em>easier</em></p>
 
@@ -14,15 +16,15 @@
 
 	<p>
 		<h3 class="all-unset"><b>Code Sample</b>:</h3>
-		<pre><code>
+		<code-block>
-import {html} from 'skooma.js'
+			import {html} from 'skooma.js'
 
-let div = html.div([
+			let div = html.div([
 				html.h1('Hello, World!'),
 				html.p('Here is some text', {class: ["class_a", "class_b"]})
 				html.button("Click Me!", { click: event => console.log(event) })
-])
+			])
-		</code></pre>
+		</code-block>
 	</p>
 
 	<a class="button" href="page/skooma.html">Read more</a>

page/codeblock.js

@@ -0,0 +1,34 @@
+import {html} from "../skooma.js"
+import {css, variable} from "../css.js"
+import {template} from "../template.js"
+
+document.head.append(html.link({rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css'}))
+import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/highlight.min.js';
+import javascript from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/es/languages/javascript.min.js';
+hljs.registerLanguage('javascript', javascript);
+
+const escapes = { ">": ">" }
+class CodeBlock extends HTMLElement {
+	connectedCallback() {
+		let content = this.innerHTML.replace(/^\s*\n/, "").replace(/\n\s*$/, "")
+		let prefix = new RegExp(`${content.match(/^\t*/)}`, "g")
+		content = content.replace(prefix, "").replace(/&.*;/g, str => escapes[str] ?? str)
+		console.log(template(hljs.highlightAuto(content).value))
+		this.replaceChildren(html.pre(html.code(template(hljs.highlightAuto(content).value))))
+	}
+}
+
+customElements.define("code-block", CodeBlock)
+
+document.head.append(html.style(css({
+	'code-block': {
+		code: {
+			padding: CSS.em(.6),
+			borderRadius: CSS.em(.6),
+			backgroundColor: "#eee",
+			border: "none",
+			tabSize: 3,
+			display: "block",
+		}
+	}
+})))

page/skooma.html

@@ -1,7 +1,11 @@
 <link rel="stylesheet" href="style.css">
 
+<script type="module" src="codeblock.js"></script>
+
 <h1>Skooma.js</h1>
 
+<code-block>import {html} from 'skooma.js'</code-block>
+
 <section>
 	<h2>Introduction & Scope</h2>
 	<p>
@@ -18,3 +22,90 @@
 		transpilation steps and runs directly in the browser.
 	</p>
 </section>
+
+<section>
+	<h2>Showcase</h2>
+
+	<p>Here's a few examples of how things are done in Skooma.js and how it compares to vanilla JavaScript.</p>
+
+	<div class="columns">
+		<h3>Skooma.js</h3>
+		<h3>Vanilla JavaScript</h3>
+
+		<p>Generating a single empty HTML element. The <code>html</code> namespace creates generator functions dynamically.</p>
+		<p>Using the browser API, this is a bit more verbose, but still looks similar.</p>
+		<code-block>
+			return html.h1()
+		</code-block>
+		<code-block>
+			return document.createElement("h1")
+		</code-block>
+
+		<p>String arguments to the generator function will be inserted as <strong>text nodes</strong>.</p>
+		<p>Without Skooma.js this would already require using a variable since <code>createElement</code> cannot insert text content into a new node.</p>
+		<code-block>
+			return html.h1("Hello, World!")
+		</code-block>
+		<code-block>
+			let h1 = document.createElement("h1")
+			h1.innerText = "Hello, World!"
+			return h1
+		</code-block>
+
+		<p>DOM Nodes can also be passed into the generator function to add them as <strong>child-elements.</strong></p>
+		<p>This would normally require two separate variables, one for each element.</p>
+		<code-block>
+			return html.div(html.b("Hello!"))
+		</code-block>
+		<code-block>
+			let div = document.createElement("div")
+			let b = document.createElement("b")
+			b.innerText = "Hello!"
+			div.append(b)
+			return div
+		</code-block>
+
+		<p>When passing an object, its key/value pairs will be added as <strong>attributes</strong> to the new element.</p>
+		<p>Once again, in plain JS this requires a variable.</p>
+		<code-block>
+			return html.div({attribute: "value"})
+		</code-block>
+		<code-block>
+			let div = document.createElement("div")
+			div.setAttribute("attribute", "value")
+			return div
+		</code-block>
+
+		<p>When an object value is a function, it will instead be added as an <strong>event handler</strong>. The corresponding key will be used as the event name.</p>
+		<p>You guessed it: variable.</p>
+		<code-block>
+			return html.button("Click Me!", {
+				click: event =&gt; console.log(event)
+			})
+		</code-block>
+		<code-block>
+			let button document.createElement("button")
+			button.innerText = "Click Me!"
+			button.addEventListener(
+				"click", event =&gt; console.log(event)
+			)
+			return button
+		</code-block>
+
+		<p>Adding a <strong>shadow-root</strong> to the new element can be done witht he <code>shadowRoot</code> property.</p>
+		<p></p>
+		<code-block>
+			return html.div({
+				shadowRoot: html.p("Shadow-DOM text content")
+			}, "Light-DOM text content")
+		</code-block>
+		<code-block>
+			let div = document.createElement("div")
+			let p = document.createElement("p")
+			p.innerText = "Shadow-DOM text content"
+			div.attachShadow({mode: "open"}).append(p)
+			div.innerText = "Light-DOM text content"
+			return div
+		</code-block>
+	</div>
+</section>

page/style.css

@@ -39,6 +39,14 @@ em {
 	font-weight: bold;
 }
 
+hr {
+  all: unset;
+  width: 100%;
+  border-bottom: .2em solid var(--color-ac);
+  grid-column: 1 / -1;
+  margin: 1em 0;
+}
+
 .button {
 	--color-primary: var(--color-hl);
 	--color-secondary: var(--color-bg);
@@ -73,3 +81,25 @@ span[title] {
 .all-unset {
 	all: unset;
 }
+
+.columns {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 1.4em;
+}
+.columns>* {
+	margin: 0;
+}
+
+.columns > * {
+	flex: 100%;
+}
+
+.full-width {
+	grid-column: 1/-1;
+}
+
+code-block:not(:defined) {
+	font-family: monospace;
+	white-space: pre-line;
+}