@zvndev/darkmown 1.5.0 → 2.0.1

package/src/statics.js

@@ -1,19 +1,67 @@
 import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
-import { BASE_SECURITY_HEADERS, REACTIVE_CSP } from "./headers.js";
+import { BASE_SECURITY_HEADERS, REACTIVE_CSP, STATIC_CSP } from "./headers.js";
 
 /**
- * Security headers for an HTML response from the local server. The relaxed
- * (reactive) CSP is a superset that satisfies both static and reactive pages,
- * so the runtime server uses it for every HTML response; the build-time
- * outputs (`vercel.json`, `dist/_headers`) tighten static routes per-path.
- * @type {Record<string, string>}
+ * 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.
+ * @param {string} distRoot Absolute path to the build output directory.
+ * @param {string} url Request URL (may include a query string).
+ * @returns {Record<string, string>}
  */
-const HTML_SECURITY_HEADERS = {
-  ...BASE_SECURITY_HEADERS,
-  "Content-Security-Policy": REACTIVE_CSP
-};
+function htmlSecurityHeaders(distRoot, url) {
+  return {
+    ...BASE_SECURITY_HEADERS,
+    "Content-Security-Policy": routeIsReactive(distRoot, routeOf(url)) ? REACTIVE_CSP : STATIC_CSP
+  };
+}
+
+/**
+ * Normalize a request URL to its clean, trailing-slashed route path so it can be
+ * matched against `routes.json` (`/docs` / `/docs/` / `/docs/index.html` all →
+ * `/docs/`). Returns null for an unparseable URL.
+ * @param {string} url
+ * @returns {string | null}
+ */
+function routeOf(url) {
+  let pathname;
+  try {
+    pathname = decodeURIComponent((url || "/").split("?")[0]);
+  } catch {
+    return null;
+  }
+  if (pathname.endsWith("/index.html")) pathname = pathname.slice(0, -"index.html".length);
+  if (!pathname.endsWith("/")) pathname += "/";
+  return pathname;
+}
+
+/**
+ * Whether the route ships the reactive runtime, per the build's `routes.json`.
+ * Defaults to `true` (reactive) when the route is absent or the manifest can't be
+ * read — matching the production `_headers` catch-all, so an unknown route is
+ * never accidentally served the stricter policy.
+ * @param {string} distRoot
+ * @param {string | null} route
+ * @returns {boolean}
+ */
+function routeIsReactive(distRoot, route) {
+  if (!route) return true;
+  try {
+    const manifest = JSON.parse(fs.readFileSync(path.join(distRoot, "routes.json"), "utf8"));
+    const entry = manifest.find((/** @type {{ route: string }} */ e) => e.route === route);
+    if (entry) return Boolean(entry.assets?.runtime);
+  } catch {
+    /* no/unreadable manifest → reactive default (the catch-all policy) */
+  }
+  return true;
+}
 
 /**
  * Serve a built file for a request URL out of `distRoot`, or a 404 page.
@@ -25,7 +73,10 @@ const HTML_SECURITY_HEADERS = {
 export function serve(distRoot, url, res) {
   const file = resolvePublicFile(distRoot, url || "/");
   if (!file || !fs.existsSync(file)) {
-    res.writeHead(404, { "content-type": "text/html; charset=utf-8", ...HTML_SECURITY_HEADERS });
+    res.writeHead(404, {
+      "content-type": "text/html; charset=utf-8",
+      ...htmlSecurityHeaders(distRoot, url)
+    });
     const notFound = path.join(distRoot, "404.html");
     if (fs.existsSync(notFound)) {
       res.end(fs.readFileSync(notFound));
@@ -36,7 +87,7 @@ export function serve(distRoot, url, res) {
   }
   const type = contentType(file);
   const headers = type.startsWith("text/html")
-    ? { "content-type": type, ...HTML_SECURITY_HEADERS }
+    ? { "content-type": type, ...htmlSecurityHeaders(distRoot, url) }
     : { "content-type": type };
   res.writeHead(200, headers);
   fs.createReadStream(file).pipe(res);

package/src/templates/blog/README.md

@@ -1,12 +1,21 @@
 # Blog — a Darkmown template
 
-A markdown-native blog. Posts are plain `.md` files in `site/pages/posts/`; the
-home page loops `site/_/posts.json` to list them. Static pages, zero JavaScript.
+A markdown-native blog. Posts are plain `.md` files in `site/pages/posts/` —
+that folder is a typed content collection, and the home page is one `@loop`
+over it. No manifest, no config. Static pages, zero JavaScript.
 
 ## Add a post
 
-1. Create `site/pages/posts/<slug>.md` with a `title` in frontmatter.
-2. Add an entry to `site/_/posts.json` (`slug`, `url`, `title`, `date`, `excerpt`).
+1. Create `site/pages/posts/<slug>.md` with `title`, `date`, and `description`
+   in frontmatter (`excerpt` is optional). That's it — the home page lists it
+   automatically, newest first, and dated posts land in `rss.xml`.
+2. Optional: copy an existing post's `.skin` beside the new file — a colocated
+   `.skin` attaches automatically, keeping the reading design.
+
+`site/pages/posts/_schema.wd` type-checks every post's frontmatter at build
+time, so a typo'd or missing field fails the build with a file and line. When
+the list grows, add `paginate 10` to the loop in `site/pages/index.wd` to split
+it into `/page/2/`, `/page/3/`, … automatically.
 
 ## Commands
 

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

@@ -1,6 +1,7 @@
-<nav>
-  <strong>My Blog</strong>
-  <span class="links">
-    <a href="/">Posts</a>
-  </span>
-</nav>
+::: nav
+**My Blog**
+
+::: 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
 
@@ -66,6 +69,9 @@ nav a
   color $muted
   font-size .9rem
 
+.post-meta p
+  margin 0
+
 /* Buttons & form controls — for newsletter signups, :button actions, etc. */
 button
   display inline-flex

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

@@ -7,19 +7,24 @@ transitions: true
 
 @include /nav.wd
 
-<main>
+::: main
 
 # My Blog
 
-Posts are plain Markdown files in `site/pages/posts/`. This index is one `.wd`
-loop over a small JSON manifest — sorted newest-first, shipping zero JavaScript.
+Posts are plain Markdown files in `site/pages/posts/` — that folder is a typed
+content collection, and this index is one `.wd` loop over it. No manifest, no
+config, zero JavaScript; each post's frontmatter is the data.
 
-@loop /posts.json into post sort by post.date desc
+@loop posts into post sort by post.date desc
 ::: post-card
 ### [{ post.title }]({ post.url })
-<p class="post-meta">{ post.date }</p>
+::: post-meta
+{ post.date }
+:::
 { post.excerpt }
 :::
+@empty
+No posts yet — add a `.md` file to `site/pages/posts/`.
 @endloop
 
-</main>
+:::

package/src/templates/blog/site/pages/posts/_schema.wd

@@ -0,0 +1,16 @@
+---
+# Typed schema for the posts collection. Every .md file next to this file is
+# validated against these rules at build time — a missing required field, a
+# wrong type, or an unknown extra field fails the build with a file:line.
+# Append "?" to a type to make a field optional. Page-shell flags a post sets
+# (like transitions) are declared here too. Remove this file to turn
+# validation off (it is opt-in).
+title: string
+date: date
+description: string
+excerpt: string?
+transitions: boolean?
+---
+
+The posts collection schema. Posts are plain `.md` files next to this file;
+their frontmatter must match the rules above.

package/src/templates/blog/site/pages/posts/hello-darkmown.md

@@ -6,6 +6,8 @@ excerpt: I rewrote my blog as plain Markdown files — no React, no build ceremo
 transitions: true
 ---
 
+[← All posts](/)
+
 # Hello, Darkmown
 
 This post is a plain `.md` file — strict CommonMark, **zero** framework

package/src/templates/blog/site/pages/posts/hello-darkmown.skin

@@ -0,0 +1,59 @@
+/* Colocated post styling — a .skin next to a .md attaches automatically.
+   Copy this file beside each new post to keep the reading design. */
+
+tokens
+  ink #1d2530
+  paper #fbfaf7
+  panel #ffffff
+  line #e7e3da
+  muted #6b7785
+  accent #2f6df0
+
+tokens dark
+  ink #e7ecf3
+  paper #0f141b
+  panel #161d27
+  line #28303c
+  muted #93a0b2
+  accent #5b8cff
+
+html
+  bg $paper
+
+page
+  max-width 680px
+  margin 0 auto
+  padding 2.5rem 1.5rem 4rem
+  font ui-serif, Georgia, Cambria, serif
+  color $ink
+  bg $paper
+  line-height 1.7
+  -webkit-font-smoothing antialiased
+
+h1
+  font-size 2.1rem
+  line-height 1.2
+  margin 1rem 0 1.25rem
+
+a
+  color $accent
+
+code
+  font ui-monospace, SFMono-Regular, Menlo, monospace
+  font-size .88em
+  bg $panel
+  border 1px solid $line
+  padding .08rem .28rem
+  radius 5px
+
+pre code
+  display block
+  padding .9rem 1.1rem
+  overflow-x auto
+
+blockquote
+  margin 1rem 0
+  padding .5rem 1.2rem
+  border-left 3px solid $accent
+  bg $panel
+  color $muted

package/src/templates/blog/site/pages/posts/markdown-native.md

@@ -6,17 +6,22 @@ excerpt: Every post is a plain .md file; the index is one .wd loop. The date in
 transitions: true
 ---
 
+[← All posts](/)
+
 # Markdown-native, by default
 
-To add a post, drop a Markdown file in `site/pages/posts/` and add a line to
-`site/_/posts.json`. The home page loops that manifest:
+To add a post, drop a Markdown file in `site/pages/posts/`. That folder is a
+typed content collection, and the home page loops it directly:
 
 ```wd
-@loop /posts.json into post sort by post.date desc
+@loop posts into post sort by post.date desc
 ### [{ post.title }]({ post.url })
 @endloop
 ```
 
-No build config, no plugins, no content layer. The file *is* the page.
+No manifest, no build config, no content layer. The file *is* the page, and its
+frontmatter is the data — `site/pages/posts/_schema.wd` type-checks every
+post's `title`, `date`, and `description` at build time, so a typo fails the
+build with a file and line instead of shipping a broken list.
 
 [← Back to all posts](/)

package/src/templates/blog/site/pages/posts/markdown-native.skin

@@ -0,0 +1,59 @@
+/* Colocated post styling — a .skin next to a .md attaches automatically.
+   Copy this file beside each new post to keep the reading design. */
+
+tokens
+  ink #1d2530
+  paper #fbfaf7
+  panel #ffffff
+  line #e7e3da
+  muted #6b7785
+  accent #2f6df0
+
+tokens dark
+  ink #e7ecf3
+  paper #0f141b
+  panel #161d27
+  line #28303c
+  muted #93a0b2
+  accent #5b8cff
+
+html
+  bg $paper
+
+page
+  max-width 680px
+  margin 0 auto
+  padding 2.5rem 1.5rem 4rem
+  font ui-serif, Georgia, Cambria, serif
+  color $ink
+  bg $paper
+  line-height 1.7
+  -webkit-font-smoothing antialiased
+
+h1
+  font-size 2.1rem
+  line-height 1.2
+  margin 1rem 0 1.25rem
+
+a
+  color $accent
+
+code
+  font ui-monospace, SFMono-Regular, Menlo, monospace
+  font-size .88em
+  bg $panel
+  border 1px solid $line
+  padding .08rem .28rem
+  radius 5px
+
+pre code
+  display block
+  padding .9rem 1.1rem
+  overflow-x auto
+
+blockquote
+  margin 1rem 0
+  padding .5rem 1.2rem
+  border-left 3px solid $accent
+  bg $panel
+  color $muted

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

@@ -1,6 +1,7 @@
-<nav>
-  <strong>Dashboard</strong>
-  <span class="links">
-    <a href="/">Overview</a>
-  </span>
-</nav>
+::: nav
+**Dashboard**
+
+::: 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

@@ -6,7 +6,7 @@ transitions: true
 
 @include /nav.wd
 
-<main>
+::: main
 
 ::: section #dash
 
@@ -72,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,6 +1,7 @@
-<nav>
-  <strong>Acme</strong>
-  <span class="links">
-    <a href="#start">Get started</a>
-  </span>
-</nav>
+::: nav
+**Acme**
+
+::: links
+[Get started](#start)
+:::
+:::

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

@@ -27,12 +27,12 @@ page
   line-height 1.6
   -webkit-font-smoothing antialiased
 
-main
+.main
   max-width 900px
   margin 0 auto
   padding 1rem 1.5rem 4rem
 
-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.15rem
 
-nav a
+.nav a
   color $accent
   text-decoration none
 
@@ -60,6 +63,9 @@ nav a
   color $muted
   margin 0 0 1.5rem
 
+.lede p
+  margin 0
+
 .cta
   display inline-flex
   align-items center
@@ -186,6 +192,9 @@ input:focus-visible, textarea:focus-visible, select:focus-visible
   color $muted
   font-size .95rem
 
+.quote .who p
+  margin 0
+
 .wd-carousel-prev
   position absolute
   left -.5rem

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

@@ -6,12 +6,16 @@ transitions: true
 
 @include /nav.wd
 
-<main>
+::: main
 
 ::: hero
 # Ship faster with *Acme*
-<p class="lede">The all-in-one toolkit your team actually enjoys using.</p>
-<a class="cta" href="#start">Get started</a>
+
+::: lede
+The all-in-one toolkit your team actually enjoys using.
+:::
+
+[Get started](#start){.cta}
 :::
 
 ::: features
@@ -34,21 +38,31 @@ One command to Vercel or Cloudflare — your API comes along for free.
 :carousel
 ::: quote
 > "Acme cut our launch time in half."
-<p class="who">— Riley, Head of Product</p>
+
+::: who
+— Riley, Head of Product
+:::
 :::
 ::: quote
 > "The simplest stack we've ever shipped on."
-<p class="who">— Sam, CTO</p>
+
+::: who
+— Sam, CTO
+:::
 :::
 ::: quote
 > "Our marketing pages load instantly now."
-<p class="who">— Jordan, Growth</p>
+
+::: who
+— Jordan, Growth
+:::
 :::
 :endcarousel
 
 ::: cta-band #start
 ## Ready to build?
-<a class="cta" href="/">Start now</a>
+
+[Start now](/){.cta}
 :::
 
-</main>
+:::

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

@@ -1,7 +1,8 @@
-<nav>
-  <strong>My site</strong>
-  <span class="links">
-    <a href="/">Home</a>
-    <a href="/about/">About</a>
-  </span>
-</nav>
+::: nav
+**My site**
+
+::: links
+[Home](/)
+[About](/about/)
+:::
+:::

package/src/templates/starter/site/pages/about.md

@@ -4,7 +4,13 @@ title: About
 
 # About
 
-This page is plain Markdown (`.md`) — strict CommonMark, zero framework JavaScript.
-Rename it to `.wd` when you want directives like state, loops, or forms.
+This page is plain Markdown (`.md`) — strict CommonMark, zero framework
+JavaScript, and no raw HTML (Darkmown escapes it by default, so untrusted
+content can't inject markup). That's why there's no shared nav bar here: a
+`.md` page can't `@include` or use directives.
+
+Rename it to `.wd` when you want that — state, loops, forms, and an
+`@include /nav.wd` for the shared nav. The colocated `about.skin` styles this
+page either way; it attaches automatically by basename, `.md` or `.wd` alike.
 
 [Back home](/)

package/src/templates/starter/site/pages/about.skin

@@ -0,0 +1,44 @@
+/* Colocated page styling — a .skin next to a .md attaches automatically. */
+
+tokens
+  ink #172026
+  muted #5b6b72
+  paper #f7f2e8
+  panel #ffffff
+  line #e4ddcd
+  accent #0f8b8d
+
+tokens dark
+  ink #e8eef0
+  muted #93a3a8
+  paper #11181b
+  panel #182226
+  line #2a363a
+  accent #3fc6c8
+
+html
+  bg $paper
+
+page
+  margin 0
+  font ui-sans-serif, system-ui, sans-serif
+  color $ink
+  bg $paper
+  line-height 1.6
+  -webkit-font-smoothing antialiased
+
+main
+  max-width 760px
+  margin 0 auto
+  padding 3rem 1.5rem
+
+a
+  color $accent
+
+code
+  font ui-monospace, SFMono-Regular, Menlo, monospace
+  font-size .88em
+  bg $panel
+  border 1px solid $line
+  padding .08rem .28rem
+  radius 5px