@zvndev/darkmown 1.5.0 → 2.0.0

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,3 +1,7 @@
+---
+html: true
+---
+
 <nav>
   <strong>My Blog</strong>
   <span class="links">

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

@@ -66,6 +66,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

@@ -1,4 +1,5 @@
 ---
+html: true
 title: My Blog
 description: A markdown-native blog built with Darkmown.
 site_url: https://example.com
@@ -11,15 +12,20 @@ transitions: true
 
 # 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,3 +1,7 @@
+---
+html: true
+---
+
 <nav>
   <strong>Dashboard</strong>
   <span class="links">

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

@@ -1,4 +1,5 @@
 ---
+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

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

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <nav>
   <strong>Acme</strong>
   <span class="links">

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

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Acme — ship faster
 description: A marketing one-pager built with Darkmown. Zero framework JS on the static parts, with a testimonials carousel.
 transitions: true

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

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <nav>
   <strong>My site</strong>
   <span class="links">

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

@@ -1,10 +1,27 @@
 ---
 title: About
+html: true
 ---
 
+<nav>
+  <strong>My site</strong>
+  <span class="links">
+    <a href="/">Home</a>
+    <a href="/about/">About</a>
+  </span>
+</nav>
+
+<main>
+
 # 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.
+Rename it to `.wd` when you want directives like state, loops, or forms — a `.wd`
+page can `@include /nav.wd` instead of repeating the markup above.
+
+The colocated `about.skin` styles this page; it attaches automatically by
+basename, `.md` or `.wd` alike.
 
 [Back home](/)
+
+</main>

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

@@ -0,0 +1,69 @@
+/* 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
+
+nav
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  max-width 760px
+  margin 0 auto
+  padding 1.25rem 1.5rem
+
+nav strong
+  font-size 1.1rem
+
+nav .links
+  display flex
+  gap 1.25rem
+
+nav a
+  color $ink
+  text-decoration none
+  opacity .8
+
+nav a:hover
+  opacity 1
+  color $accent
+
+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

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

@@ -1,4 +1,5 @@
 ---
+html: true
 title: My Darkmown site
 ---
 

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

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <nav>
   <strong>Shop</strong>
   <span class="links">

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

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Shop — built with Darkmown
 description: A storefront in Markdown — live search, a shared cart, and a checkout that posts to a serverless function.
 transitions: true

package/src/templates/blog/site/_/posts.json

@@ -1,16 +0,0 @@
-[
-  {
-    "slug": "hello-darkmown",
-    "url": "/posts/hello-darkmown/",
-    "title": "Hello, Darkmown",
-    "date": "2026-06-15",
-    "excerpt": "Why I rewrote my blog as plain Markdown files — and shipped zero framework JavaScript."
-  },
-  {
-    "slug": "markdown-native",
-    "url": "/posts/markdown-native/",
-    "title": "Markdown-native, by default",
-    "date": "2026-06-01",
-    "excerpt": "Every post is a .md file. The index is one .wd loop over this manifest. That's the whole site."
-  }
-]