diff --git a/index.html b/index.html index 028a79d..d74cb7a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,7 @@ + +
A JavaScript micro-framework to make front-end easier
@@ -14,15 +16,15 @@
-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 @@
+
+
@@ -18,3 +22,90 @@ transpilation steps and runs directly in the browser.
Here's a few examples of how things are done in Skooma.js and how it compares to 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.
+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.
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.
+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.
+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.
+Adding a shadow-root to the new element can be done witht he shadowRoot
property.