@zvndev/darkmown 1.4.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

@@ -1,8 +1,23 @@
 tokens
   ink #1d2530
   paper #fbfaf7
+  panel #ffffff
+  line #e7e3da
   muted #6b7785
   accent #2f6df0
+  accent-deep #2356cc
+  ring #2f6df0
+  radius 10px
+
+tokens dark
+  ink #e7ecf3
+  paper #0f141b
+  panel #161d27
+  line #28303c
+  muted #93a0b2
+  accent #5b8cff
+  accent-deep #80a6ff
+  ring #5b8cff
 
 page
   margin 0
@@ -10,6 +25,7 @@ page
   color $ink
   bg $paper
   line-height 1.6
+  -webkit-font-smoothing antialiased
 
 main
   max-width 720px
@@ -49,3 +65,74 @@ nav a
   margin 0 0 .5rem
   color $muted
   font-size .9rem
+
+.post-meta p
+  margin 0
+
+/* Buttons & form controls — for newsletter signups, :button actions, etc. */
+button
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .5rem
+  bg $accent
+  color white
+  border 1px solid $accent
+  padding .6rem 1.15rem
+  margin .4rem .5rem .4rem 0
+  radius 999px
+  font-size .94rem
+  font-weight 560
+  line-height 1.15
+  cursor pointer
+  appearance none
+  box-shadow 0 1px 2px rgba(29,37,48,.08)
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, border-color .14s ease
+
+button:hover
+  bg $accent-deep
+  border-color $accent-deep
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(47,109,240,.55)
+
+button:active
+  transform translateY(0)
+  box-shadow 0 1px 2px rgba(29,37,48,.08)
+
+button:focus-visible
+  outline 2px solid $ring
+  outline-offset 2px
+
+button:disabled
+  opacity .5
+  cursor not-allowed
+  box-shadow none
+  transform none
+
+input, textarea, select
+  font inherit
+  font-size .95rem
+  color $ink
+  bg $panel
+  border 1px solid $line
+  radius $radius
+  padding .58rem .8rem
+  margin .35rem 0
+  width 100%
+  max-width 24rem
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input:hover, textarea:hover, select:hover
+  border-color $accent
+
+input:focus-visible, textarea:focus-visible, select:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(47,109,240,.18)
+
+@media (prefers-reduced-motion: reduce)
+  button
+    transition none
+  button:hover
+    transform none

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.skin

@@ -2,9 +2,13 @@ tokens
   ink #0f1722
   paper #0b1018
   panel #131c28
+  field-bg #0e1620
   line #243245
   muted #8aa0b8
   accent #4f9cff
+  accent-deep #6fb0ff
+  ring #4f9cff
+  radius 12px
 
 page
   margin 0
@@ -12,6 +16,7 @@ page
   color #e7eefc
   bg $paper
   line-height 1.55
+  -webkit-font-smoothing antialiased
 
 main
   max-width 880px
@@ -72,3 +77,82 @@ nav a
   color $muted
   font-size .85rem
   margin-top .5rem
+
+/* Buttons & controls — refresh, filters, range pickers, etc. */
+button
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .5rem
+  bg $accent
+  color #07101d
+  border 1px solid $accent
+  padding .55rem 1.05rem
+  margin .4rem .5rem .4rem 0
+  radius 999px
+  font-size .92rem
+  font-weight 600
+  line-height 1.15
+  cursor pointer
+  appearance none
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, border-color .14s ease
+
+button:hover
+  bg $accent-deep
+  border-color $accent-deep
+  transform translateY(-1px)
+  box-shadow 0 8px 20px -8px rgba(79,156,255,.6)
+
+button:active
+  transform translateY(0)
+  box-shadow none
+
+button:focus-visible
+  outline 2px solid $ring
+  outline-offset 2px
+
+button:disabled
+  opacity .5
+  cursor not-allowed
+  transform none
+
+button.ghost
+  bg transparent
+  color #e7eefc
+  border-color $line
+
+button.ghost:hover
+  bg $panel
+  border-color $accent
+  box-shadow none
+
+input, select, textarea
+  font inherit
+  font-size .95rem
+  color #e7eefc
+  bg $field-bg
+  border 1px solid $line
+  radius 10px
+  padding .55rem .8rem
+  margin .35rem 0
+  width 100%
+  max-width 24rem
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input::placeholder, textarea::placeholder
+  color $muted
+
+input:hover, select:hover, textarea:hover
+  border-color #2f4763
+
+input:focus-visible, select:focus-visible, textarea:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(79,156,255,.22)
+
+@media (prefers-reduced-motion: reduce)
+  button
+    transition none
+  button:hover
+    transform none

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">