✨ 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"
+		})
+	)
+);