@zvndev/darkmown 1.4.0 → 2.0.0

package/site/pages/blog/unfinished-thoughts.skin

@@ -0,0 +1,127 @@
+/* Colocated post styling — a .skin next to a .md attaches automatically, so
+   these prose pages stay static (zero JS) yet still read on-brand. A .md can't
+   @include /base.wd, so this reading skin carries the site's tokens itself.
+   Kept in sync with site/_/base.skin; copy it beside each new post. */
+
+tokens
+  ink #1c1814
+  ink-soft #4b4239
+  muted #756a5d
+  paper #faf8f3
+  panel #ffffff
+  sunk #efe9dc
+  line #e7e1d4
+  accent #0f6b5e
+  accent-deep #0a4f45
+  accent-soft #e3f0ec
+  code-bg #1b2420
+  code-ink #e9efe7
+  code-line #2c3b34
+  radius 12px
+
+tokens dark
+  ink #ece6db
+  ink-soft #c3bbab
+  muted #9a9081
+  paper #14110d
+  panel #1e1913
+  sunk #221d17
+  line #2f281f
+  accent #5ccab4
+  accent-deep #8fe0cf
+  accent-soft #16302a
+  code-bg #100d0a
+  code-ink #e4ebe2
+  code-line #2a231b
+
+html
+  bg $paper
+
+page
+  max-width 720px
+  margin 0 auto
+  padding 3rem 1.5rem 5rem
+  font-family ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif
+  font-size 18px
+  line-height 1.7
+  color $ink
+  bg $paper
+  -webkit-font-smoothing antialiased
+  text-rendering optimizeLegibility
+
+h1
+  font-size clamp(2rem, 5vw, 2.8rem)
+  line-height 1.12
+  letter-spacing -.022em
+  margin 1rem 0 1.25rem
+  color $ink
+
+h2
+  font-size 1.5rem
+  line-height 1.2
+  letter-spacing -.012em
+  margin 2.4rem 0 .6rem
+  color $ink
+
+h3
+  font-size 1.2rem
+  margin 1.8rem 0 .4rem
+  color $ink
+
+p
+  margin 1.1rem 0
+
+a
+  color $accent
+  text-underline-offset 2px
+
+a:hover
+  color $accent-deep
+
+strong
+  font-weight 650
+  color $ink
+
+hr
+  border 0
+  border-top 1px solid $line
+  margin 2.5rem 0
+
+ul, ol
+  margin 1.1rem 0
+  padding-left 1.4rem
+
+li
+  margin .35rem 0
+
+code
+  font-family ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .88em
+  bg $sunk
+  color $accent-deep
+  padding .12rem .36rem
+  radius 6px
+
+pre
+  bg $code-bg
+  color $code-ink
+  padding 1.2rem 1.35rem
+  margin 1.5rem 0
+  radius $radius
+  overflow-x auto
+  line-height 1.62
+  font-size .87rem
+  box-shadow inset 0 0 0 1px $code-line
+
+pre code
+  bg transparent
+  color inherit
+  padding 0
+  font-size 1em
+
+blockquote
+  margin 1.6rem 0
+  padding .6rem 1.3rem
+  border-left 3px solid $accent
+  color $ink-soft
+  font-style italic

package/site/pages/blog/zero-js-by-default.md

@@ -0,0 +1,31 @@
+---
+title: Zero JavaScript, by default
+description: A Darkmown page ships no framework JavaScript unless it declares reactive behavior. The blog you are reading proves it.
+date: 2026-06-25
+excerpt: View source on this page. There is no runtime script tag, because nothing on it is reactive — and the framework knows the difference.
+tags: [performance, philosophy]
+---
+
+# Zero JavaScript, by default
+
+Open your browser's view-source on this post. Look for a `<script>` that loads a
+framework runtime. There isn't one — and there isn't one on the blog index, or
+on any of its paginated pages either. None of them declare reactive behavior, so
+none of them pay for it.
+
+That is the whole bargain. A `.md` file is plain CommonMark. Rename it to `.wd`
+and you unlock directives — state, loops, conditionals — but you only ship the
+~7.4 KB runtime on the pages that actually use them. A listing built from a
+collection loop resolves entirely at build time, so it stays static HTML.
+
+## The extension is the feature gate
+
+There is no flag to toggle, no "static export" mode to remember. The compiler
+tracks whether a page declared anything reactive and emits `runtime: false` into
+`routes.json` when it didn't. A collection listing, a paginated archive, a page
+of prose with a code block — all static, all cacheable on a CDN forever, all
+fast on the first byte because there is nothing to hydrate.
+
+When you do want an island of interactivity — a search box, a cart, a sortable
+table — you declare it, and only that page loads the runtime. The rest of the
+site stays weightless.

package/site/pages/blog/zero-js-by-default.skin

@@ -0,0 +1,127 @@
+/* Colocated post styling — a .skin next to a .md attaches automatically, so
+   these prose pages stay static (zero JS) yet still read on-brand. A .md can't
+   @include /base.wd, so this reading skin carries the site's tokens itself.
+   Kept in sync with site/_/base.skin; copy it beside each new post. */
+
+tokens
+  ink #1c1814
+  ink-soft #4b4239
+  muted #756a5d
+  paper #faf8f3
+  panel #ffffff
+  sunk #efe9dc
+  line #e7e1d4
+  accent #0f6b5e
+  accent-deep #0a4f45
+  accent-soft #e3f0ec
+  code-bg #1b2420
+  code-ink #e9efe7
+  code-line #2c3b34
+  radius 12px
+
+tokens dark
+  ink #ece6db
+  ink-soft #c3bbab
+  muted #9a9081
+  paper #14110d
+  panel #1e1913
+  sunk #221d17
+  line #2f281f
+  accent #5ccab4
+  accent-deep #8fe0cf
+  accent-soft #16302a
+  code-bg #100d0a
+  code-ink #e4ebe2
+  code-line #2a231b
+
+html
+  bg $paper
+
+page
+  max-width 720px
+  margin 0 auto
+  padding 3rem 1.5rem 5rem
+  font-family ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif
+  font-size 18px
+  line-height 1.7
+  color $ink
+  bg $paper
+  -webkit-font-smoothing antialiased
+  text-rendering optimizeLegibility
+
+h1
+  font-size clamp(2rem, 5vw, 2.8rem)
+  line-height 1.12
+  letter-spacing -.022em
+  margin 1rem 0 1.25rem
+  color $ink
+
+h2
+  font-size 1.5rem
+  line-height 1.2
+  letter-spacing -.012em
+  margin 2.4rem 0 .6rem
+  color $ink
+
+h3
+  font-size 1.2rem
+  margin 1.8rem 0 .4rem
+  color $ink
+
+p
+  margin 1.1rem 0
+
+a
+  color $accent
+  text-underline-offset 2px
+
+a:hover
+  color $accent-deep
+
+strong
+  font-weight 650
+  color $ink
+
+hr
+  border 0
+  border-top 1px solid $line
+  margin 2.5rem 0
+
+ul, ol
+  margin 1.1rem 0
+  padding-left 1.4rem
+
+li
+  margin .35rem 0
+
+code
+  font-family ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .88em
+  bg $sunk
+  color $accent-deep
+  padding .12rem .36rem
+  radius 6px
+
+pre
+  bg $code-bg
+  color $code-ink
+  padding 1.2rem 1.35rem
+  margin 1.5rem 0
+  radius $radius
+  overflow-x auto
+  line-height 1.62
+  font-size .87rem
+  box-shadow inset 0 0 0 1px $code-line
+
+pre code
+  bg transparent
+  color inherit
+  padding 0
+  font-size 1em
+
+blockquote
+  margin 1.6rem 0
+  padding .6rem 1.3rem
+  border-left 3px solid $accent
+  color $ink-soft
+  font-style italic

package/site/pages/carousel/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Swiper — a draggable carousel wired to wd.subscribe
 description: An image carousel with arrow-key nav, pointer drag / swipe, and a sliding transition — the things a deliberately tiny framework leaves to you. Darkmown owns the reactive slide state, the dots, and the readout declaratively; a colocated index.js adds the gestures through window.wd.subscribe and window.wd.set.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/compass/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Compass — find your match
 description: A guided product-finder quiz built in one Markdown file. Four questions advance a state machine with :if branching, accumulate scores with :button actions, and a :computed recommendation lands the perfect pick. Zero hand-written JavaScript.
 image: https://darkmown.com/__wd/media/og-compass.png

package/site/pages/data.skin

@@ -29,18 +29,44 @@ h2
   padding-top 1.2rem
 
 button
-  border 1px solid $ink
-  bg $ink
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .5rem
+  border 1px solid $accent
+  bg $accent
   color white
-  padding .72rem 1rem
+  padding .6rem 1.1rem
   margin .3rem .5rem .3rem 0
-  radius $radius
-  font inherit
+  radius 999px
+  font system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .92rem
+  font-weight 560
+  line-height 1.15
   cursor pointer
+  appearance none
+  box-shadow 0 1px 2px rgba(23,23,23,.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
   border-color $accent
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(22,100,90,.5)
+
+button:active
+  transform translateY(0)
+  box-shadow 0 1px 2px rgba(23,23,23,.08)
+
+button:focus-visible
+  outline 2px solid $accent
+  outline-offset 2px
+
+button:disabled
+  opacity .5
+  cursor not-allowed
+  box-shadow none
+  transform none
 
 a
   color $accent
@@ -75,21 +101,36 @@ form
   margin 1rem 0
 
 input
-  padding .7rem .9rem
+  padding .62rem .85rem
   border 1px solid $line
   radius $radius
   font inherit
+  font-size .95rem
   bg $panel
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input:hover
+  border-color $accent
+
+input:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(22,100,90,.18)
 
 .pulse-button
-  border 0
+  border 1px solid $warm
   bg $warm
   color white
-  padding .85rem 1rem
-  radius $radius
+  padding .6rem 1.1rem
+  radius 999px
   font inherit
   cursor pointer
 
+.pulse-button:hover
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(168,63,42,.5)
+
 .tally-card
   border 1px solid $line
   bg $panel

package/site/pages/data.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Data, forms, and persistence
 transitions: true
 ---
@@ -38,6 +39,8 @@ That loop also proves `:if` over loop items: the lead badge is decided per row.
 
 Every `:fetch` tracks the whole lifecycle — `loading`, `error`, `empty`, and data — so a page can answer each one. Here the same primitive shows an **error** (a missing URL 404s) and an **empty** result (a file that is just `[]`):
 
+*(Heads up: the browser console will log a `404` for `intentionally-missing.json` on this page — that failure is deliberate, so the error branch below has something real to show.)*
+
 :fetch broken from "/__wd/data/intentionally-missing.json"
 
 :if broken_error

package/site/pages/docs/-relative-note.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <section class="feature-card">
 
 **Relative include:** this hidden block lives beside the docs page as `-relative-note.wd`, so it can be included without becoming a route.

package/site/pages/docs/index.skin

@@ -17,6 +17,33 @@ main.docs
   color $ink-soft
   max-width 60ch
 
+/* On-page TOC — a compact multi-column block of plain # anchors. */
+.docs-toc
+  border 1px solid $line
+  bg $panel
+  radius $radius
+  padding 1.1rem 1.35rem
+  margin 1.25rem 0 .5rem
+
+.docs-toc ul
+  columns 2
+  column-gap 2.5rem
+  margin .55rem 0 0
+  padding 0
+  list-style none
+
+.docs-toc li
+  margin .18rem 0
+  break-inside avoid
+  font-size .95rem
+
+.docs-toc a
+  font-weight 500
+
+@media (max-width: 600px)
+  .docs-toc ul
+    columns 1
+
 /* Section headings get a quiet rule above them so the long page scans. */
 main.docs h2
   margin-top 3rem