✨ Add docs page

docs_src/components/example.html.js

@@ -0,0 +1,44 @@
+let loaded= false;
+import { styles } from "../index.css.js";
+export const css= styles().scope(example).css`
+:host{
+	--body-max-width: 80rem;
+	height: 20rem;
+}
+`
+import { el } from "../../jsdom.js";
+export function example({ src, language= "javascript" }){
+	register();
+	const cwd= "components";
+	src= "."+src.slice(src.indexOf(cwd)+cwd.length);
+	const code= s.cat(new URL(src, import.meta.url))
+		.toString()
+		.replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
+	const id= "code-"+Math.random().toString(36).slice(2, 7);
+	return el("<>").append(
+		el("div", { id, className: example.name }).append(
+			el("pre").append(
+				el("code", {
+					className: "language-"+language,
+					textContent: code
+				})
+			)
+		),
+		el("script", `
+			Flems(document.getElementById("${id}"), {
+				files: [{
+					name: ".js",
+					content: ${JSON.stringify(code)}
+				}],
+				toolbar: false,
+			})
+		`)
+	);
+}
+function register(){
+	if(loaded) return;
+	document.head.append(
+		el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
+	);
+	loaded= true;
+}

docs_src/components/examples/helloWorld.js

@@ -0,0 +1,14 @@
+import { el, S } from "../../../index-with-signals.js";
+const clicks= S(0);
+document.body.append(
+	el("<>").append(
+		el("p", S(()=>
+			"Hello World "+"🎉".repeat(clicks())
+		)),
+		el("button", {
+			type: "button",
+			onclick: ()=> clicks(clicks()+1),
+			textContent: "Fire"
+		})
+	)
+);

docs_src/index.css.js

@@ -0,0 +1,44 @@
+const scopes= new WeakSet();
+const s= {
+	scope(s){
+		if(!scopes.has(s)){
+			scopes.add(s);
+			this.host= s.name;
+		}
+		return this;
+	},
+	css(...a){
+		let c= css(...a);
+		if(this.host){
+			c= c.replaceAll(":host", "."+this.host);
+			this.host= "";
+		}
+		if(this.content) this.content+= "\n";
+		this.content+= c;
+		return this;
+	},
+	include(...i){
+		if(this.content) this.content+= "\n";
+		this.content+= i.map(i=> typeof i === "string" ? i : i.content).join("\n");
+		return this;
+	}
+};
+export function css(...a){
+	return String.raw(...a).trim();
+}
+export function styles(){ return Object.assign(Object.create(s), { content: "" }); }
+export const common= css`
+:root {
+	color-scheme: dark light;
+	--body-max-width: 40rem;
+}
+*, ::before, ::after { box-sizing: border-box; }
+body > * {
+	margin-inline: max(.5rem, calc(50% - var(--body-max-width) / 2));
+	font-family: Tahoma, Verdana, Arial, sans-serif;
+}
+h1{
+	text-align: center;
+	text-wrap: balanc;
+}
+`;

docs_src/index.html.js

@@ -0,0 +1,51 @@
+import { el } from "../jsdom.js";
+import { head as headCommon } from "./layout/head.html.js";
+export function head(pkg, path_target){
+	return headCommon({
+		id: "index",
+		title: pageName(pkg),
+		description: "Introducing basic concepts.",
+		pkg, path_target
+	});
+}
+
+import { styles, common } from "./index.css.js";
+import { example, css as example_css } from "./components/example.html.js";
+export const css= styles()
+.include(common)
+.css`
+.note{
+	font-size: .9rem;
+	font-style: italic;
+}
+`
+.include(example_css);
+export function body(pkg){
+	return el("<>").append(
+		el("h1", pageName(pkg)),
+		el("p").append(
+			"The library tries to provide pure JavaScript tool(s) to create reactive interfaces.",
+			"The main goals are:"
+		),
+		el("ul").append(
+			el("li", "provide a small wrapper around the native JavaScript DOM"),
+			el("li", "keep library size under 10kB"),
+			el("li", "zero dependencies (if possible)"),
+			el("li", "prefer a declarative/functional approach"),
+			el("li", "unopinionated (allow alternative methods)"),
+		),
+		el("p", { className: "note" }).append(
+			"It is, in fact, an reimplementation of ",
+			el("a", {
+				href: "https://github.com/jaandrle/dollar_dom_component",
+				title: "GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.",
+				textContent: "jaandrle/dollar_dom_component"
+			}),
+			".",
+		),
+		example({ src: "./components/examples/helloWorld.js" })
+	);
+}
+function pageName(pkg){
+	return `\`${pkg.name}\` — Introduction/Guide`;
+}

docs_src/layout/head.html.js

@@ -0,0 +1,47 @@
+import { el } from "../../jsdom.js";
+/**
+ * @param {object} def
+ * @param {string} def.id Page `id` is used as stylesheet name.
+ * @param {string} def.title Page `title` is also used as `h1`
+ * @param {string} def.description Page 'description'.
+ * @param {object} def.pkg Package information.
+ * @param {string} def.pkg.name
+ * @param {string} def.pkg.description
+ * @param {string} def.pkg.homepage
+ * @param {{ root: string, css: string}} def.path_target Final URL where the page will be rendered.
+ * @param {object} def
+ * */
+export function head({ id, title, description, pkg, path_target }){
+	return el("<>").append(
+		el("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+		el("link", { rel: "stylesheet", href: stylesheetHref(path_target, id) }),
+		
+		el("meta", { name: "description", content: description }),
+		el(metaTwitter, pkg),
+		el(metaFacebook, pkg),
+		el("title", title),
+	);
+}
+function metaTwitter({ name, description, homepage }){
+	return el("<>").append(
+		el("meta", { name: "twitter:card", content: "summary_large_image" }),
+		//el("meta", { name: "twitter:domain", content: "" }),
+		el("meta", { name: "twitter:url", content: homepage }),
+		el("meta", { name: "twitter:title", content: name }),
+		el("meta", { name: "twitter:description", content: description }),
+		//el("meta", { name: "twitter:image", content: "" }),
+		el("meta", { name: "twitter:creator", content: "@jaandrle" }),
+	);
+}
+function metaFacebook({ name, description, homepage }){
+	return el("<>").append(
+		el("meta", { name: "og:url", content: homepage }),
+		el("meta", { name: "og:title", content: name }),
+		el("meta", { name: "og:description", content: description }),
+		//el("meta", { name: "og:image", content: "" }),
+		el("meta", { name: "og:creator", content: "@jaandrle" }),
+	);
+}
+function stylesheetHref(path_target, name){
+	return path_target.css.replace(path_target.root, "")+name+".css";
+}