@zvndev/darkmown 2.0.0 → 2.1.0

package/src/compiler/structure.js

@@ -12,6 +12,7 @@
 // ---------------------------------------------------------------------------
 
 import { at, createScope, LOOP_META, nestedCtx } from "./context.js";
+import { astOf, serializeExpr } from "./expr-ast.js";
 import { resolveInclude, scopedSkinFor, stampScope } from "./includes.js";
 import {
   escapeHtml,
@@ -27,6 +28,14 @@ import { compileWhen, evalPredicate } from "./predicates.js";
  * @typedef {import("./context.js").Ctx} Ctx
  */
 
+// Container names that emit their own semantic landmark element instead of a
+// `<div>`, so scaffolds get real `<nav>`/`<main>` landmarks (accessibility: the
+// skip link targets a genuine main-content region and navigation chrome sits in
+// its own landmark). The name is still added as a class, so existing `.nav`/
+// `.main` skin selectors keep working. Fixed compiler-owned constants — never
+// author-supplied — so no tag-injection surface; classes/ids still escape.
+const SEMANTIC_CONTAINER_TAGS = new Set(["nav", "main"]);
+
 /**
  * @param {string} line
  * @param {Ctx} ctx
@@ -36,9 +45,20 @@ import { compileWhen, evalPredicate } from "./predicates.js";
 export function handleInclude(line, ctx, index) {
   const match = line.match(/^@include\s+(\S+)(?:\s+with\s+(.+))?$/);
   if (!match) throw new Error(`Malformed @include in ${at(ctx, index)}: ${line}`);
-  const target = resolveInclude(match[1], ctx.file, ctx.context);
+  const target = resolveInclude(
+    match[1],
+    ctx.file,
+    ctx.context,
+    false,
+    at(ctx, index),
+    ctx.comp.reader
+  );
   const args = parseIncludeArgs(match[2] || "", ctx);
   const childScope = createScope(ctx.scope, args);
+  // Thread the reactive-nesting depth (and the enclosing loop opener, so a depth
+  // error names the right opener) into the include, exactly as `loopItem` is —
+  // otherwise a reactive @loop inside the include would start counting from zero
+  // and could open a THIRD nested `data-wd-loop` level that silently paints empty.
   const child = ctx.compileFile(
     target,
     ctx.context,
@@ -46,14 +66,16 @@ export function handleInclude(line, ctx, index) {
     childScope,
     ctx.comp,
     ctx.sections,
-    ctx.loopItem
+    ctx.loopItem,
+    ctx.reactiveDepth ?? 0,
+    ctx.loopOpener ?? null
   );
   // An include with its OWN scoped colocated skin stamps just its returned
   // subtree — so a scoped `.card` in the include can't collide with a `.card`
   // anywhere else on the page, and the scope never leaks to the include's
   // siblings (only this child HTML is stamped). The CSS rewrite (builder) uses
   // the same path-derived id, so attribute and stylesheet line up.
-  const scopedSkin = scopedSkinFor(target, ctx.context);
+  const scopedSkin = scopedSkinFor(target, ctx.context, ctx.comp.reader);
   return scopedSkin && scopedSkin.scoped ? stampScope(child.html, scopedSkin.scopeId) : child.html;
 }
 
@@ -96,20 +118,28 @@ export function handleContainer(header, bodyLines, ctx, index) {
   let tag = "section";
   /** @type {string[]} Static classes baked into class="". */
   const extraClass = [];
-  /** @type {[string, string][]} Reactive loop-item class bindings (data-wd-each-class). */
+  /** @type {[string, any[]][]} Reactive loop-item class bindings (data-wd-each-class): [class, exprAST]. */
   const eachClasses = [];
-  /** @type {[string, string][]} Global state-driven class bindings (data-wd-class). */
+  /** @type {[string, any[]][]} Global state-driven class bindings (data-wd-class): [class, exprAST]. */
   const stateClasses = [];
   let id = "";
   // Leading tag/name token (anything not starting with . or #). "section" keeps
-  // the <section> tag; any other name becomes a <div> and also a class.
+  // the <section> tag; a whitelisted semantic landmark (`nav`/`main`) emits that
+  // real element AND keeps the name as a class hook (so `.nav`/`.main` skins
+  // still cascade); any other name becomes a <div> and also a class. The tag is
+  // always one of these fixed constants — never author text — so it can't inject.
   const lead = rest.match(/^([^\s.#]\S*)/);
   let nameToken = "section";
   if (lead) {
     nameToken = lead[1];
     rest = rest.slice(lead[0].length).trim();
   }
-  if (nameToken !== "section") {
+  if (nameToken === "section") {
+    // default tag, no class
+  } else if (SEMANTIC_CONTAINER_TAGS.has(nameToken)) {
+    tag = nameToken;
+    extraClass.push(nameToken);
+  } else {
     tag = "div";
     extraClass.push(nameToken);
   }
@@ -135,8 +165,8 @@ export function handleContainer(header, bodyLines, ctx, index) {
       const compiled = compileWhen(whenMatch[1].trim(), ctx);
       if (compiled.static) {
         if (compiled.value) extraClass.push(cls);
-      } else if (compiled.item) eachClasses.push([cls, compiled.body]);
-      else stateClasses.push([cls, compiled.body]);
+      } else if (compiled.item) eachClasses.push([cls, astOf(compiled.body)]);
+      else stateClasses.push([cls, astOf(compiled.body)]);
     } else {
       extraClass.push(cls);
     }
@@ -306,7 +336,7 @@ export function handleIf(line, truthyLines, falsyLines, ctx, index, falsyStart =
   ctx.comp.assets.runtime = true;
   const truthy = ctx.compileBody(truthyLines, truthyCtx).trim();
   const falsy = ctx.compileBody(falsyLines, falsyCtx).trim();
-  const exprAttr = ` data-wd-if-expr="${escapeHtml(compiled.body)}"`;
+  const exprAttr = ` data-wd-if-expr="${escapeHtml(serializeExpr(compiled.body))}"`;
   if (compiled.item) {
     return `<span data-wd-each-if${exprAttr}><template data-wd-if-true>${truthy}</template><template data-wd-if-false>${falsy}</template><span data-wd-each-if-out></span></span>`;
   }

package/src/compiler.js

@@ -1,7 +1,13 @@
 // Darkmown's compiler, split into cohesive modules under `src/compiler/`. This
-// file is a thin barrel: it re-exports the public API from `src/compiler/index.js`
-// so every existing `import … from "./compiler.js"` (builder, tests) keeps
-// working unchanged. See `src/compiler/index.js` for the module map.
+// file is the Node-facing barrel: it re-exports the public API from
+// `src/compiler/index.js` so every existing `import … from "./compiler.js"`
+// (builder, tests) keeps working unchanged. It is ALSO the single place the
+// default filesystem reader is injected — `compilePage`/`compileDocument`/
+// `enhanceImages` default their reader to `fsReader()` here, so callers keep
+// their old signatures and the compile stays byte-identical. The fs-free entry
+// point (`compileFromMemory`) needs no default and passes through. Because this
+// module imports `fs-reader.js` (and thus `node:fs`), it is Node-only; the
+// browser bundles `compileFromMemory` from `src/compiler/page.js` directly.
 
 // Re-export the public typedefs so existing `import("./compiler.js").Type`
 // references (e.g. `Assets` in src/builder.js) keep resolving after the split.
@@ -16,12 +22,57 @@
  * @typedef {import("./compiler/context.js").CompiledPage} CompiledPage
  */
 
+import { fsReader } from "./compiler/fs-reader.js";
+import {
+  compileDocument as compileDocumentImpl,
+  compilePage as compilePageImpl,
+  enhanceImages as enhanceImagesImpl
+} from "./compiler/index.js";
+
 export {
-  compileDocument,
-  compilePage,
-  enhanceImages,
+  compileFromMemory,
   escapeHtml,
   loopKeyOf,
   parseFrontmatter,
   stampScope
 } from "./compiler/index.js";
+
+/**
+ * Compile a page source file into a full HTML document plus its assets, reading
+ * from the real filesystem by default. Pass `options.reader` to compile against
+ * a different source (see `compileFromMemory`).
+ * @param {string} file Absolute path to the source `.md`/`.wd` file.
+ * @param {import("./config.js").Paths} context Resolved project paths.
+ * @param {{ feed?: { href: string, title: string }, collections?: Map<string, import("./compiler/collections.js").CollectionRow[]>, vars?: Record<string, unknown>, reader?: import("./compiler/reader.js").Reader }} [options]
+ * @returns {CompiledPage}
+ */
+export function compilePage(file, context, options = {}) {
+  return compilePageImpl(file, context, { reader: fsReader(), ...options });
+}
+
+/**
+ * Compile a source file into its body HTML, frontmatter, and assets (no page
+ * shell), reading from the real filesystem by default.
+ * @param {string} file Absolute path to the source file.
+ * @param {import("./config.js").Paths} context Resolved project paths.
+ * @param {string[]} [stack] Include stack for cycle detection.
+ * @param {Record<string, unknown>} [vars] Initial static scope variables.
+ * @param {Map<string, import("./compiler/collections.js").CollectionRow[]>} [collections]
+ * @param {import("./compiler/reader.js").Reader} [reader] Source reader.
+ * @returns {CompiledDocument}
+ */
+export function compileDocument(file, context, stack, vars, collections, reader = fsReader()) {
+  return compileDocumentImpl(file, context, stack, vars, collections, reader);
+}
+
+/**
+ * Harden every `<img>` in an assembled page body, reading intrinsic dimensions
+ * from the real filesystem by default.
+ * @param {string} html Assembled page body HTML.
+ * @param {import("./config.js").Paths} paths Resolved project paths.
+ * @param {import("./compiler/reader.js").Reader} [reader] Source reader for image bytes.
+ * @returns {string}
+ */
+export function enhanceImages(html, paths, reader = fsReader()) {
+  return enhanceImagesImpl(html, paths, reader);
+}

package/src/headers.js

@@ -23,10 +23,9 @@
  *     raw `<script>` an author writes into `html: true` markdown is therefore
  *     blocked by the shipped CSP — use a colocated `.js` file (same-origin,
  *     covered by `'self'`) or widen `script-src` deliberately.
- *   - The reactive runtime compiles validated expressions via `new Function`,
- *     so reactive pages additionally need `script-src 'unsafe-eval'`. That
- *     keyword cannot be hashed away: it gates eval-family APIs, not inline
- *     script elements.
+ *   - The reactive runtime WALKS a compile-time-validated expression AST (see
+ *     src/compiler/expr-ast.js) rather than building a `new Function`, so reactive
+ *     pages need NO `'unsafe-eval'`: their CSP is identical to the static one.
  *   - Inline `<style>` for view transitions — `style-src 'unsafe-inline'`.
  *   - `data:` favicon and remote images — `img-src 'self' data: https:`.
  *   - `:video`/`:audio` allow relative or `http(s)` sources — `media-src 'self' https:`.
@@ -36,8 +35,8 @@
  *     authorizes it (and blocks a form exfiltrating to a third-party origin). Apps
  *     posting to a remote backend widen this alongside `connect-src`.
  *
- * Static pages (zero framework JS) share the same hash-based `script-src` but
- * never call `new Function`, so their CSP drops `'unsafe-eval'`.
+ * Static pages (zero framework JS) and reactive pages now share the same
+ * eval-free `script-src` — no page needs `'unsafe-eval'`.
  */
 
 import { createHash } from "node:crypto";
@@ -102,17 +101,20 @@ const COMMON_CSP_DIRECTIVES = [
 ];
 
 /**
- * Relaxed CSP for reactive pages: `new Function` needs `'unsafe-eval'`; the
- * inline speculationrules block rides on the shared hash source, so no
- * `'unsafe-inline'`.
+ * CSP for reactive pages. Since 2.1 the runtime WALKS a compile-time-validated
+ * expression AST instead of building a `new Function`, so reactive pages no longer
+ * need `'unsafe-eval'` — this policy is byte-identical to the static one. The only
+ * script source is same-origin `/__wd/runtime.js` (plus the hashed speculationrules
+ * block); no `'unsafe-inline'`, no `'unsafe-eval'`.
  * @type {string}
  */
-export const REACTIVE_CSP = [`${SCRIPT_SRC} 'unsafe-eval'`, ...COMMON_CSP_DIRECTIVES].join("; ");
+export const REACTIVE_CSP = [SCRIPT_SRC, ...COMMON_CSP_DIRECTIVES].join("; ");
 
 /**
- * Stricter CSP for static pages: no runtime means no `new Function`, so
- * `'unsafe-eval'` is dropped too. Inline `<style>` (view transitions) keeps
- * `'unsafe-inline'` on style-src only.
+ * CSP for static pages (zero framework JS). Identical to the reactive policy now
+ * that neither variant evals — kept as a distinct export so the per-route emit and
+ * the `securityHeaders()` callers stay explicit about intent. Inline `<style>`
+ * (view transitions) keeps `'unsafe-inline'` on style-src only.
  * @type {string}
  */
 export const STATIC_CSP = [SCRIPT_SRC, ...COMMON_CSP_DIRECTIVES].join("; ");

package/src/index.js

@@ -7,6 +7,7 @@ export { buildSite } from "./builder.js";
 
 export {
   compileDocument,
+  compileFromMemory,
   compilePage,
   escapeHtml,
   loopKeyOf,

package/src/runtime.js

@@ -213,12 +213,12 @@ async function httpJson(url, init) {
 const computedDefs = [...document.querySelectorAll("[data-wd-computed]")].map((node) => ({
   key: node.getAttribute("data-wd-computed-key") || "",
   expr: node.getAttribute("data-wd-computed-expr") || "",
-  evaluate: new Function("S", "A", `return (${node.getAttribute("data-wd-computed-expr")});`)
+  ast: JSON.parse(node.getAttribute("data-wd-computed-expr") || "null")
 }));
 
 /**
  * Log an expression failure when `window.wd.debug` is enabled.
- * @param {string} expr
+ * @param {unknown} expr
  * @param {unknown} error
  * @returns {void}
  */
@@ -232,11 +232,9 @@ function warn(expr, error) {
  * @returns {void}
  */
 function recompute() {
-  /** @param {string} key @param {string | null} [path] */
-  const read = (key, path) => getPath(state[key], path ?? null);
   for (const def of computedDefs) {
     try {
-      state[def.key] = def.evaluate(read, AGG);
+      state[def.key] = evalAst(def.ast, undefined);
     } catch (error) {
       state[def.key] = undefined;
       warn(def.expr, error);
@@ -246,26 +244,80 @@ function recompute() {
 
 /** @param {unknown} a @param {unknown} b @returns {boolean} */
 const containsFn = (a, b) => String(a ?? "").toLowerCase().includes(String(b ?? "").toLowerCase());
-/** @type {Map<string, Function>} */
-const predicateCache = new Map();
+
 /**
- * @param {string} body
- * @returns {Function}
+ * Evaluate a compact expression AST (see src/compiler/expr-ast.js) against the
+ * live state and an optional loop `item`. The compiler emits this serialized AST
+ * into the `data-wd-*` attributes; the runtime WALKS it — no `new Function`, so
+ * reactive pages run under a strict CSP with no `'unsafe-eval'`. The op vocabulary
+ * is closed: every node tag is one of the readers (L/S/I/C/A), a unary (!/u-), or
+ * a binary operator, and an unknown tag is a hard error, never a fallthrough.
+ * Prototype-pollution segments are rejected by getPath, exactly as before.
+ * @param {any[]} node
+ * @param {any} item Loop row for I(); undefined otherwise.
+ * @returns {any}
  */
-function loopPredicate(body) {
-  let fn = predicateCache.get(body);
-  if (!fn) {
-    fn = new Function("I", "S", "C", `return (${body});`);
-    predicateCache.set(body, fn);
-  }
-  return fn;
+function evalAst(node, item) {
+  /** @param {any[]} n @returns {any} */
+  const ev = (n) => {
+    switch (n[0]) {
+      case "L": return n[1];
+      case "S": return getPath(state[n[1]], n[2] ?? null);
+      case "I": return getPath(item, n[1] ?? null);
+      case "C": return containsFn(ev(n[1]), ev(n[2]));
+      case "A": return AGG(n[1], ev(n[2]), n[3]);
+      case "!": return !ev(n[1]);
+      case "u-": return -ev(n[1]);
+      case "&&": return ev(n[1]) && ev(n[2]);
+      case "||": return ev(n[1]) || ev(n[2]);
+      // biome-ignore lint/suspicious/noDoubleEquals: loose equality preserves prior `new Function` semantics exactly.
+      case "==": return ev(n[1]) == ev(n[2]);
+      // biome-ignore lint/suspicious/noDoubleEquals: loose inequality preserves prior `new Function` semantics exactly.
+      case "!=": return ev(n[1]) != ev(n[2]);
+      case ">": return ev(n[1]) > ev(n[2]);
+      case "<": return ev(n[1]) < ev(n[2]);
+      case ">=": return ev(n[1]) >= ev(n[2]);
+      case "<=": return ev(n[1]) <= ev(n[2]);
+      case "+": return ev(n[1]) + ev(n[2]);
+      case "-": return ev(n[1]) - ev(n[2]);
+      case "*": return ev(n[1]) * ev(n[2]);
+      case "/": return ev(n[1]) / ev(n[2]);
+      case "%": return ev(n[1]) % ev(n[2]);
+    }
+    throw new Error(`wd: unknown op ${n[0]}`);
+  };
+  return ev(node);
+}
+
+/** @type {Map<string, any[]>} Parsed-AST cache keyed by the raw attribute JSON. */
+const astCache = new Map();
+/** @param {string} raw @returns {any[]} */
+function parseAst(raw) {
+  const cached = astCache.get(raw);
+  if (cached) return cached;
+  const ast = JSON.parse(raw);
+  astCache.set(raw, ast);
+  return ast;
+}
+
+/**
+ * Evaluate an expression AST to a boolean, swallowing failures (logs under
+ * `wd.debug`). Shared by reactive classes (`.class when`), loop `where`, and
+ * expression conditionals (`:if a > b`).
+ * @param {any[]} ast
+ * @param {any} item Loop row for per-row predicates, else undefined.
+ * @returns {boolean}
+ */
+function evalPredicate(ast, item) {
+  try { return Boolean(evalAst(ast, item)); }
+  catch (error) { warn(ast, error); return false; }
 }
 
 /**
  * Toggle reactive `.class when <predicate>` bindings on an element. `raw` is the
- * JSON `[[name, body], …]` from data-wd-class (global, item undefined) or
- * data-wd-each-class (per loop row); each body is the same I()/S()/C()
- * expression the loop `where` uses.
+ * JSON `[[name, ast], …]` from data-wd-class (global, item undefined) or
+ * data-wd-each-class (per loop row); each ast is the same expression AST the loop
+ * `where` uses.
  * @param {Element} el
  * @param {string | null} raw
  * @param {any} item Loop item for each-class; undefined for a global class.
@@ -273,23 +325,10 @@ function loopPredicate(body) {
  */
 function classToggle(el, raw, item) {
   if (!raw) return;
-  /** @type {[string, string][]} */
+  /** @type {[string, any[]][]} */
   let pairs;
   try { pairs = JSON.parse(raw); } catch { return; }
-  for (const [name, body] of pairs) el.classList.toggle(name, evalPredicate(body, item));
-}
-
-/**
- * Evaluate a compiled whitelist predicate body (over I()/S()/C()) to a boolean.
- * Shared by reactive classes (`.class when`) and expression conditionals
- * (`:if a > b`). `item` is the loop row for per-row predicates, else undefined.
- * @param {string} body
- * @param {any} item
- * @returns {boolean}
- */
-function evalPredicate(body, item) {
-  try { return Boolean(loopPredicate(body)((/** @type {string} */ p) => getPath(item, p), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn)); }
-  catch (error) { warn(body, error); return false; }
+  for (const [name, ast] of pairs) el.classList.toggle(name, evalPredicate(ast, item));
 }
 
 /**
@@ -328,7 +367,7 @@ function fillItem(node, item, meta = {}) {
     if (skip(region)) continue;
     const expr = region.getAttribute("data-wd-if-expr");
     const m = region.getAttribute("data-wd-meta");
-    const value = expr ? evalPredicate(expr, item) : (m ? meta[m] : getPath(item, region.getAttribute("data-wd-path")));
+    const value = expr ? evalPredicate(parseAst(expr), item) : (m ? meta[m] : getPath(item, region.getAttribute("data-wd-path")));
     const output = region.querySelector("[data-wd-each-if-out]");
     if (!output) continue;
     const template = /** @type {HTMLTemplateElement | null} */ (region.querySelector(value ? "template[data-wd-if-true]" : "template[data-wd-if-false]"));
@@ -414,7 +453,7 @@ function pipeline(list, region) {
  */
 function renderIf(node) {
   const expr = node.getAttribute("data-wd-if-expr");
-  const value = expr ? evalPredicate(expr, undefined) : getPath(state[node.getAttribute("data-wd-if") || ""], node.getAttribute("data-wd-path"));
+  const value = expr ? evalPredicate(parseAst(expr), undefined) : 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) return;
   node.setAttribute("data-wd-if-active", active);
@@ -441,15 +480,8 @@ function reconcile(region, rows) {
   let list = Array.isArray(rows) ? rows.slice() : [];
   const where = region.getAttribute("data-wd-loop-where");
   if (where) {
-    const predicate = loopPredicate(where);
-    list = list.filter((/** @type {any} */ item) => {
-      try {
-        return predicate((/** @type {string | null} */ path) => getPath(item, path), (/** @type {string} */ k, /** @type {string} */ r) => getPath(state[k], r || ""), containsFn);
-      } catch (error) {
-        warn(where, error);
-        return false;
-      }
-    });
+    const ast = parseAst(where);
+    list = list.filter((/** @type {any} */ item) => evalPredicate(ast, item));
   }
   list = pipeline(list, region);
 

package/src/statics.js

@@ -5,13 +5,12 @@ import { BASE_SECURITY_HEADERS, REACTIVE_CSP, STATIC_CSP } from "./headers.js";
 
 /**
  * The security headers (including the right CSP variant) for an HTML response.
- * Mirrors what production ships: a route the build marked reactive gets the
- * relaxed CSP (`'unsafe-eval'` for `new Function`); a static route gets the
- * stricter, eval-free CSP — so a local preview matches the per-route `_headers`
- * / `vercel.json` the same build writes instead of blanket-relaxing every page.
- * Anything not found in `routes.json` (an unknown route, a 404, a missing
- * manifest) falls back to the reactive CSP, exactly like the production
- * `_headers` catch-all block.
+ * Mirrors what production ships. Since 2.1 both variants are eval-free (the
+ * reactive runtime walks a validated AST, not `new Function`), so a reactive and a
+ * static route resolve to the same CSP — the per-route selection is kept for parity
+ * with the `_headers` / `vercel.json` structure the same build writes. Anything not
+ * found in `routes.json` (an unknown route, a 404, a missing manifest) falls back
+ * to the reactive CSP, exactly like the production `_headers` catch-all block.
  * @param {string} distRoot Absolute path to the build output directory.
  * @param {string} url Request URL (may include a query string).
  * @returns {Record<string, string>}

package/src/templates/blog/site/_/nav.wd

@@ -1,10 +1,7 @@
----
-html: true
----
+::: nav
+**My Blog**
 
-<nav>
-  <strong>My Blog</strong>
-  <span class="links">
-    <a href="/">Posts</a>
-  </span>
-</nav>
+::: links
+[Posts](/)
+:::
+:::

package/src/templates/blog/site/pages/index.skin

@@ -27,12 +27,12 @@ page
   line-height 1.6
   -webkit-font-smoothing antialiased
 
-main
+.main
   max-width 720px
   margin 0 auto
   padding 2.5rem 1.5rem
 
-nav
+.nav
   display flex
   align-items center
   justify-content space-between
@@ -40,10 +40,13 @@ nav
   margin 0 auto
   padding 1.25rem 1.5rem
 
-nav strong
+.nav p
+  margin 0
+
+.nav strong
   font-size 1.1rem
 
-nav a
+.nav a
   color $accent
   text-decoration none
 

package/src/templates/blog/site/pages/index.wd

@@ -1,5 +1,4 @@
 ---
-html: true
 title: My Blog
 description: A markdown-native blog built with Darkmown.
 site_url: https://example.com
@@ -8,7 +7,7 @@ transitions: true
 
 @include /nav.wd
 
-<main>
+::: main
 
 # My Blog
 
@@ -28,4 +27,4 @@ config, zero JavaScript; each post's frontmatter is the data.
 No posts yet — add a `.md` file to `site/pages/posts/`.
 @endloop
 
-</main>
+:::

package/src/templates/dashboard/site/_/nav.wd

@@ -1,10 +1,7 @@
----
-html: true
----
+::: nav
+**Dashboard**
 
-<nav>
-  <strong>Dashboard</strong>
-  <span class="links">
-    <a href="/">Overview</a>
-  </span>
-</nav>
+::: links
+[Overview](/)
+:::
+:::

package/src/templates/dashboard/site/pages/index.skin

@@ -18,12 +18,12 @@ page
   line-height 1.55
   -webkit-font-smoothing antialiased
 
-main
+.main
   max-width 880px
   margin 0 auto
   padding 2rem 1.5rem
 
-nav
+.nav
   display flex
   align-items center
   justify-content space-between
@@ -31,10 +31,13 @@ nav
   margin 0 auto
   padding 1.25rem 1.5rem
 
-nav strong
+.nav p
+  margin 0
+
+.nav strong
   font-size 1.1rem
 
-nav a
+.nav a
   color $accent
   text-decoration none
 

package/src/templates/dashboard/site/pages/index.wd

@@ -1,5 +1,4 @@
 ---
-html: true
 title: Dashboard — built with Darkmown
 description: A live dashboard — stat cards fetched from a serverless function, on an otherwise static page.
 transitions: true
@@ -7,7 +6,7 @@ transitions: true
 
 @include /nav.wd
 
-<main>
+::: main
 
 ::: section #dash
 
@@ -73,4 +72,4 @@ The numbers come from `api/metrics.js` — a serverless function that runs in
 
 :::
 
-</main>
+:::

package/src/templates/landing/site/_/nav.wd

@@ -1,10 +1,7 @@
----
-html: true
----
+::: nav
+**Acme**
 
-<nav>
-  <strong>Acme</strong>
-  <span class="links">
-    <a href="#start">Get started</a>
-  </span>
-</nav>
+::: links
+[Get started](#start)
+:::
+:::