From 4c7fe1bec988b5b42db973abd2713b2ad7774d2a Mon Sep 17 00:00:00 2001 From: DarkWiiPlayer Date: Tue, 4 Jan 2022 13:02:48 +0100 Subject: [PATCH] Describe basic skooma features in webpage --- index.html | 18 +++++----- page/codeblock.js | 34 ++++++++++++++++++ page/skooma.html | 91 +++++++++++++++++++++++++++++++++++++++++++++++ page/style.css | 30 ++++++++++++++++ 4 files changed, 165 insertions(+), 8 deletions(-) create mode 100644 page/codeblock.js diff --git a/index.html b/index.html index 028a79d..d74cb7a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,7 @@ + +

DarkWiiPlayer/JS

A JavaScript micro-framework to make front-end easier

@@ -14,15 +16,15 @@

Code Sample:

- 

-import {html} from 'skooma.js'
+		
+			import {html} from 'skooma.js'
 
-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) })
-])
-
+ 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) }) + ]) +

Read more diff --git a/page/codeblock.js b/page/codeblock.js new file mode 100644 index 0000000..59740a3 --- /dev/null +++ b/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", + } + } +}))) diff --git a/page/skooma.html b/page/skooma.html index 3297b54..09dbade 100644 --- a/page/skooma.html +++ b/page/skooma.html @@ -1,7 +1,11 @@ + +

Skooma.js

+import {html} from 'skooma.js' +

Introduction & Scope

@@ -18,3 +22,90 @@ transpilation steps and runs directly in the browser.

+ +
+

Showcase

+ +

Here's a few examples of how things are done in Skooma.js and how it compares to vanilla JavaScript.

+ +
+

Skooma.js

+

Vanilla JavaScript

+ +

Generating a single empty HTML element. The html namespace creates generator functions dynamically.

+

Using the browser API, this is a bit more verbose, but still looks similar.

+ + return html.h1() + + + return document.createElement("h1") + + +

String arguments to the generator function will be inserted as text nodes.

+

Without Skooma.js this would already require using a variable since createElement cannot insert text content into a new node.

+ + return html.h1("Hello, World!") + + + let h1 = document.createElement("h1") + h1.innerText = "Hello, World!" + return h1 + + +

DOM Nodes can also be passed into the generator function to add them as child-elements.

+

This would normally require two separate variables, one for each element.

+ + return html.div(html.b("Hello!")) + + + let div = document.createElement("div") + let b = document.createElement("b") + b.innerText = "Hello!" + div.append(b) + return div + + +

When passing an object, its key/value pairs will be added as attributes to the new element.

+

Once again, in plain JS this requires a variable.

+ + return html.div({attribute: "value"}) + + + let div = document.createElement("div") + div.setAttribute("attribute", "value") + return div + + +

When an object value is a function, it will instead be added as an event handler. The corresponding key will be used as the event name.

+

You guessed it: variable.

+ + return html.button("Click Me!", { + click: event => console.log(event) + }) + + + let button document.createElement("button") + button.innerText = "Click Me!" + button.addEventListener( + "click", event => console.log(event) + ) + return button + + +

Adding a shadow-root to the new element can be done witht he shadowRoot property.

+

+ + return html.div({ + shadowRoot: html.p("Shadow-DOM text content") + }, "Light-DOM text content") + + + 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 + +
+
diff --git a/page/style.css b/page/style.css index 9b84c6b..2270a45 100644 --- a/page/style.css +++ b/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; +}