@zvndev/darkmown 0.4.0

package/src/config.js

@@ -0,0 +1,19 @@
+import path from "node:path";
+
+export const routesDir = "site/pages";
+export const shelfDir = "site/_";
+export const distDir = "dist";
+export const pageExtensions = new Set([".md", ".wd"]);
+
+export function createPaths(cwd = process.cwd()) {
+  return {
+    cwd,
+    routesRoot: path.join(cwd, routesDir),
+    shelfRoot: path.join(cwd, shelfDir),
+    distRoot: path.join(cwd, distDir)
+  };
+}
+
+export function isHiddenName(name) {
+  return name.startsWith(".") || name.startsWith("-") || name.startsWith("_");
+}

package/src/dev.js

@@ -0,0 +1,30 @@
+export const devClientPath = "/__wd/dev-client.js";
+export const devEventsPath = "/__wd/dev-events";
+
+export function injectDevClient(html) {
+  const script = `<script type="module" src="${devClientPath}"></script>`;
+  return html.includes("</body>") ? html.replace("</body>", `${script}\n</body>`) : `${html}\n${script}`;
+}
+
+export function devClientScript() {
+  return `
+const source = new EventSource("${devEventsPath}");
+source.addEventListener("reload", () => location.reload());
+source.addEventListener("builderror", (event) => {
+  const { message } = JSON.parse(event.data);
+  let overlay = document.getElementById("__wd-error-overlay");
+  if (!overlay) {
+    overlay = document.createElement("div");
+    overlay.id = "__wd-error-overlay";
+    overlay.style.cssText = [
+      "position:fixed", "inset:0", "z-index:99999", "background:rgba(24,18,16,.96)",
+      "color:#ffd9cf", "font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace",
+      "padding:3rem 2rem", "white-space:pre-wrap", "overflow:auto"
+    ].join(";");
+    document.body.appendChild(overlay);
+  }
+  overlay.textContent = "Darkmown build failed\\n\\n" + message + "\\n\\nFix the file and this overlay clears on the next successful build.";
+});
+source.addEventListener("error", () => {});
+`;
+}

package/src/router.js

@@ -0,0 +1,51 @@
+import fs from "node:fs";
+import path from "node:path";
+import { isHiddenName, pageExtensions } from "./config.js";
+
+export function discoverRoutes(routesRoot) {
+  if (!fs.existsSync(routesRoot)) return [];
+  const routes = [];
+
+  function walk(dir) {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (isHiddenName(entry.name)) continue;
+      const abs = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(abs);
+        continue;
+      }
+      const ext = path.extname(entry.name);
+      if (!pageExtensions.has(ext)) continue;
+      const base = path.basename(entry.name, ext);
+      if (isHiddenName(base)) continue;
+      routes.push({
+        file: abs,
+        route: routeFromFile(routesRoot, abs)
+      });
+    }
+  }
+
+  walk(routesRoot);
+  const seen = new Map();
+  for (const route of routes) {
+    if (seen.has(route.route)) {
+      throw new Error(`Duplicate route "${route.route}" from ${seen.get(route.route)} and ${route.file}`);
+    }
+    seen.set(route.route, route.file);
+  }
+  return routes.sort((a, b) => a.route.localeCompare(b.route));
+}
+
+export function routeFromFile(routesRoot, file) {
+  const ext = path.extname(file);
+  const rel = path.relative(routesRoot, file).slice(0, -ext.length);
+  const parts = rel.split(path.sep);
+  if (parts.at(-1) === "index") parts.pop();
+  const route = `/${parts.join("/")}`;
+  return route === "/" ? "/" : `${route}/`;
+}
+
+export function outputPathForRoute(distRoot, route) {
+  const clean = route === "/" ? "" : route.replace(/^\/|\/$/g, "");
+  return path.join(distRoot, clean, "index.html");
+}

package/src/runtime.js

@@ -0,0 +1,222 @@
+const state = {};
+const persistKeys = new Set();
+
+for (const script of document.querySelectorAll("script[data-wd-state]")) {
+  Object.assign(state, JSON.parse(script.textContent || "{}"));
+  const persist = script.getAttribute("data-wd-persist");
+  if (persist) persistKeys.add(persist);
+}
+
+for (const key of persistKeys) {
+  const stored = localStorage.getItem(`wd:${key}`);
+  if (stored === null) continue;
+  try {
+    state[key] = JSON.parse(stored);
+  } catch {
+    localStorage.removeItem(`wd:${key}`);
+  }
+}
+
+function savePersisted() {
+  for (const key of persistKeys) {
+    localStorage.setItem(`wd:${key}`, JSON.stringify(state[key] ?? null));
+  }
+}
+
+function getPath(value, path) {
+  if (!path) return value;
+  let current = value;
+  for (const segment of path.split(".")) {
+    if (current == null) return undefined;
+    if (segment === "constructor" || segment === "prototype" || segment === "__proto__") return undefined;
+    current = current[segment];
+  }
+  return current;
+}
+
+const computedDefs = [...document.querySelectorAll("[data-wd-computed]")].map((node) => ({
+  key: node.getAttribute("data-wd-computed-key"),
+  evaluate: new Function("S", `return (${node.getAttribute("data-wd-computed-expr")});`)
+}));
+
+function recompute() {
+  const read = (key, path) => getPath(state[key], path);
+  for (const def of computedDefs) {
+    try {
+      state[def.key] = def.evaluate(read);
+    } catch {
+      state[def.key] = undefined;
+    }
+  }
+}
+
+function loopKeyOf(item, counts) {
+  const base =
+    item && typeof item === "object"
+      ? String(item.id ?? item.key ?? JSON.stringify(item))
+      : String(item);
+  const seen = counts.get(base) || 0;
+  counts.set(base, seen + 1);
+  return seen ? `${base}#${seen}` : base;
+}
+
+function fillItem(node, item) {
+  for (const region of node.querySelectorAll("[data-wd-each-if]")) {
+    const value = getPath(item, region.getAttribute("data-wd-path"));
+    const output = region.querySelector("[data-wd-each-if-out]");
+    const template = region.querySelector(value ? "template[data-wd-if-true]" : "template[data-wd-if-false]");
+    output.innerHTML = template?.innerHTML || "";
+  }
+  const targets = node.matches("[data-wd-each]")
+    ? [node, ...node.querySelectorAll("[data-wd-each]")]
+    : [...node.querySelectorAll("[data-wd-each]")];
+  for (const target of targets) {
+    target.textContent = getPath(item, target.getAttribute("data-wd-path")) ?? "";
+  }
+}
+
+function render() {
+  recompute();
+  for (const node of document.querySelectorAll("[data-wd-if]")) {
+    const value = getPath(state[node.getAttribute("data-wd-if")], node.getAttribute("data-wd-path"));
+    const active = String(Boolean(value));
+    if (node.getAttribute("data-wd-if-active") === active) continue;
+    node.setAttribute("data-wd-if-active", active);
+    const output = node.querySelector("[data-wd-if-out]");
+    const template = node.querySelector(value ? "template[data-wd-true]" : "template[data-wd-false]");
+    output.innerHTML = template?.innerHTML || "";
+  }
+
+  for (const region of document.querySelectorAll("[data-wd-loop]")) {
+    const rows = state[region.getAttribute("data-wd-loop")];
+    const template = region.querySelector("template[data-wd-loop-template]");
+    const out = region.querySelector("[data-wd-loop-out]");
+    if (!template || !out) continue;
+    const list = Array.isArray(rows) ? rows : [];
+
+    const existing = new Map();
+    for (const child of [...out.children]) {
+      existing.set(child.getAttribute("data-wd-loop-key"), child);
+    }
+    const counts = new Map();
+    const used = new Set();
+    for (const item of list) {
+      const key = loopKeyOf(item, counts);
+      let node = existing.get(key);
+      if (!node || used.has(key)) {
+        node = template.content.firstElementChild.cloneNode(true);
+        node.setAttribute("data-wd-loop-key", key);
+      }
+      used.add(key);
+      fillItem(node, item);
+      out.appendChild(node);
+    }
+    for (const [key, node] of existing) {
+      if (!used.has(key)) node.remove();
+    }
+  }
+
+  for (const node of document.querySelectorAll("[data-wd-bind]")) {
+    node.textContent = getPath(state[node.getAttribute("data-wd-bind")], node.getAttribute("data-wd-path")) ?? "";
+  }
+}
+
+document.addEventListener("click", (event) => {
+  const action = event.target.closest("[data-wd-action]");
+  if (!action) return;
+  const op = action.getAttribute("data-wd-action");
+  const target = action.getAttribute("data-wd-target");
+  const rawValue = action.getAttribute("data-wd-value");
+  const value = rawValue === null ? undefined : JSON.parse(rawValue);
+
+  if (op === "inc") state[target] = Number(state[target] ?? 0) + 1;
+  if (op === "dec") state[target] = Number(state[target] ?? 0) - 1;
+  if (op === "add") state[target] = Number(state[target] ?? 0) + Number(value);
+  if (op === "append") state[target] = [...(Array.isArray(state[target]) ? state[target] : []), value];
+  if (op === "set") state[target] = value;
+  savePersisted();
+  render();
+});
+
+document.addEventListener("submit", (event) => {
+  const form = event.target.closest("[data-wd-form]");
+  if (!form) return;
+  event.preventDefault();
+  const key = form.getAttribute("data-wd-form");
+  const action = form.getAttribute("action");
+
+  if (!action) {
+    state[key] = Object.fromEntries(new FormData(form));
+    savePersisted();
+    render();
+    return;
+  }
+
+  fetch(action, {
+    method: form.getAttribute("method") || "post",
+    headers: { "content-type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams(new FormData(form)).toString()
+  })
+    .then(async (response) => {
+      const text = await response.text();
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      let value;
+      try {
+        value = JSON.parse(text);
+      } catch {
+        value = { status: response.status, body: text };
+      }
+      state[key] = value;
+      state[`${key}_error`] = null;
+      savePersisted();
+      render();
+    })
+    .catch((error) => {
+      state[`${key}_error`] = String(error);
+      render();
+    });
+});
+
+function startFetch(node) {
+  const key = node.getAttribute("data-wd-fetch-key");
+  fetch(node.getAttribute("data-wd-fetch-url"))
+    .then((response) => {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return response.json();
+    })
+    .then((value) => {
+      state[key] = value;
+      state[`${key}_error`] = null;
+      render();
+    })
+    .catch((error) => {
+      state[`${key}_error`] = String(error);
+      render();
+    });
+}
+
+for (const node of document.querySelectorAll("[data-wd-fetch]")) {
+  if (node.getAttribute("data-wd-fetch-when") === "visible" && "IntersectionObserver" in window) {
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      observer.disconnect();
+      startFetch(node);
+    });
+    observer.observe(node);
+  } else {
+    startFetch(node);
+  }
+}
+
+window.wd = {
+  state,
+  get: (key) => state[key],
+  set: (key, value) => {
+    state[key] = value;
+    savePersisted();
+    render();
+  },
+  render
+};
+
+render();

package/src/scaffold.js

@@ -0,0 +1,95 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const darkmownVersion = JSON.parse(
+  fs.readFileSync(new URL("../package.json", import.meta.url), "utf8")
+).version;
+
+export function initProject(root) {
+  fs.mkdirSync(root, { recursive: true });
+  writeNew(root, "package.json", JSON.stringify({
+    scripts: {
+      dev: "darkmown dev",
+      build: "darkmown build"
+    },
+    devDependencies: {
+      "@zvndev/darkmown": `^${darkmownVersion}`
+    }
+  }, null, 2));
+  writeNew(root, "site/pages/index.wd", [
+    "---",
+    "title: My Darkmown site",
+    "---",
+    "",
+    "@include /nav.wd",
+    "",
+    "<main>",
+    "",
+    "# My Darkmown site",
+    "",
+    "Plain Markdown works. Rename to `.wd` when you want directives.",
+    "",
+    ":state count = 0",
+    "",
+    "Count: { count }",
+    "",
+    ":button \"Increment\" -> count++",
+    "",
+    ":state todos = [\"Write a page\"]",
+    "",
+    "@loop todos into todo",
+    "- { todo }",
+    "@endloop",
+    "",
+    ":button \"Add\" -> todos += \"Add a loop\"",
+    "",
+    "</main>"
+  ].join("\n"));
+  writeNew(root, "site/pages/index.skin", [
+    "tokens",
+    "  ink #172026",
+    "  paper #f7f2e8",
+    "  accent #0f8b8d",
+    "",
+    "page",
+    "  margin 0",
+    "  font ui-sans-serif, system-ui, sans-serif",
+    "  color $ink",
+    "  bg $paper",
+    "",
+    "main",
+    "  max-width 760px",
+    "  margin 0 auto",
+    "  padding 3rem 1.5rem",
+    "",
+    "button",
+    "  bg $accent",
+    "  color white",
+    "  border 0",
+    "  padding .75rem 1rem",
+    "  radius 8px"
+  ].join("\n"));
+  writeNew(root, "site/_/nav.wd", [
+    "<nav>",
+    "  <a href=\"/\">Home</a>",
+    "</nav>"
+  ].join("\n"));
+  writeNew(root, "README.md", [
+    "# My Darkmown site",
+    "",
+    "Run `npm install` and `npm run dev` to start the live compiler.",
+    "",
+    "- Pages live in `site/pages`.",
+    "- Shared includes live in `site/_`.",
+    "- Hidden route files start with `.` or `-`.",
+    "- Colocated `index.skin` and `index.js` attach automatically."
+  ].join("\n"));
+  return { root };
+}
+
+function writeNew(root, file, content) {
+  const target = path.join(root, file);
+  if (fs.existsSync(target)) return;
+  fs.mkdirSync(path.dirname(target), { recursive: true });
+  fs.writeFileSync(target, `${content}\n`);
+}

package/src/skin.js

@@ -0,0 +1,68 @@
+const aliases = new Map([
+  ["radius", "border-radius"],
+  ["shadow", "box-shadow"],
+  ["font", "font-family"],
+  ["bg", "background"]
+]);
+
+export function compileSkin(source) {
+  const lines = source
+    .replace(/\r\n?/g, "\n")
+    .split("\n")
+    .filter((raw) => raw.trim() && !raw.trim().startsWith("//"))
+    .map((raw) => ({ indent: raw.match(/^\s*/)[0].length, text: raw.trim() }));
+
+  const stack = [];
+  const css = [];
+  let tokenIndent = null;
+  const rootVars = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const { indent, text } = lines[i];
+    // Structure decides meaning: a line opens a block (selector) exactly when
+    // the next line is indented deeper. Everything else is a declaration.
+    const opensBlock = i + 1 < lines.length && lines[i + 1].indent > indent;
+
+    if (text === "tokens" && opensBlock) {
+      tokenIndent = indent;
+      continue;
+    }
+
+    if (tokenIndent !== null && indent > tokenIndent) {
+      const [name, ...rest] = text.split(/\s+/);
+      rootVars.push(`  --${name}: ${rest.join(" ")};`);
+      continue;
+    }
+
+    if (tokenIndent !== null && indent <= tokenIndent) tokenIndent = null;
+    while (stack.length && stack.at(-1).indent >= indent) stack.pop();
+
+    if (opensBlock) {
+      const parent = stack.at(-1)?.selector;
+      const selector = normalizeSelector(text, parent);
+      stack.push({ indent, selector });
+      continue;
+    }
+
+    const current = stack.at(-1)?.selector || ":root";
+    const [prop, ...rest] = text.split(/\s+/);
+    const cssProp = aliases.get(prop) || prop;
+    const value = rest.join(" ").replace(/\$([a-zA-Z0-9_-]+)/g, "var(--$1)");
+    css.push(`${current} { ${cssProp}: ${value}; }`);
+  }
+
+  if (rootVars.length) css.unshift(`:root {\n${rootVars.join("\n")}\n}`);
+  return css.join("\n");
+}
+
+function normalizeSelector(text, parent) {
+  const selector = text === "page" ? "body" : text;
+  if (!parent || parent === ":root") return selector;
+  return selector
+    .split(",")
+    .map((part) => {
+      const clean = part.trim();
+      return clean.startsWith("&") ? clean.replace("&", parent) : `${parent} ${clean}`;
+    })
+    .join(", ");
+}

package/src/statics.js

@@ -0,0 +1,31 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export function serve(distRoot, url, res) {
+  const file = resolvePublicFile(distRoot, url || "/");
+  if (!file || !fs.existsSync(file)) {
+    res.writeHead(404, { "content-type": "text/html" });
+    res.end("<h1>Not found</h1><p>This route is hidden or has not been created.</p>");
+    return;
+  }
+  res.writeHead(200, { "content-type": contentType(file) });
+  fs.createReadStream(file).pipe(res);
+}
+
+export function resolvePublicFile(distRoot, url) {
+  const cleanUrl = decodeURIComponent(url.split("?")[0]);
+  const base = cleanUrl.startsWith("/__wd/")
+    ? cleanUrl
+    : path.join(cleanUrl, path.extname(cleanUrl) ? "" : "index.html");
+  const requested = path.resolve(distRoot, `.${base}`);
+  const root = path.resolve(distRoot);
+  if (requested !== root && !requested.startsWith(`${root}${path.sep}`)) return null;
+  return requested;
+}
+
+export function contentType(file) {
+  if (file.endsWith(".css")) return "text/css";
+  if (file.endsWith(".js")) return "text/javascript";
+  if (file.endsWith(".json")) return "application/json";
+  return "text/html";
+}