@zvndev/darkmown 1.4.0 → 2.0.0

package/site/pages/blog/drafts-that-never-leak.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/index.skin

@@ -0,0 +1,144 @@
+/* The Darkmown blog index — a collection-driven, paginated listing. Thin layer
+   over /base.wd (tokens, typography, dark mode); only the post-card grid and the
+   pager live here. Namespaced under .app-blog so it can't leak. */
+
+.app-blog
+  max-width 52rem
+
+.app-blog .blog-head
+  margin 2.5rem 0 2rem
+
+.app-blog .blog-head .eyebrow
+  display inline-block
+  font-size .78rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .12em
+  color var(--accent)
+  margin-bottom .6rem
+
+.app-blog .blog-head h1
+  margin .2rem 0 .8rem
+  line-height 1.1
+
+.app-blog .blog-head p
+  color var(--muted)
+  max-width 38rem
+
+/* The list of posts. */
+.app-blog .post-list
+  display flex
+  flex-direction column
+  gap 1.1rem
+  margin 2rem 0
+
+.app-blog .post-card
+  background var(--panel)
+  border 1px solid var(--line)
+  radius var(--radius-lg)
+  padding 1.5rem 1.6rem
+  transition border-color .15s ease, transform .15s ease, box-shadow .15s ease
+
+.app-blog .post-card:hover
+  border-color var(--accent)
+  transform translateY(-2px)
+  box-shadow 0 8px 24px -16px var(--accent-deep)
+
+.app-blog .post-meta
+  display flex
+  align-items center
+  flex-wrap wrap
+  gap .55rem
+  margin-bottom .55rem
+
+/* Each meta item (time / tag) renders as its own paragraph; strip the default
+   block margins so they sit inline in the flex row. */
+.app-blog .post-meta p
+  margin 0
+  display inline-flex
+
+.app-blog .post-meta time
+  font-size .82rem
+  font-weight 600
+  color var(--muted)
+  font-variant-numeric tabular-nums
+
+.app-blog .tag
+  font-size .72rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .06em
+  color var(--accent-deep)
+  background var(--accent-soft)
+  border 1px solid color-mix(in srgb, var(--accent) 30%, transparent)
+  padding .15rem .5rem
+  radius 999px
+
+.app-blog .post-card h3
+  margin .1rem 0 .5rem
+  font-size 1.4rem
+  line-height 1.2
+
+.app-blog .post-card h3 a
+  color var(--ink)
+  text-decoration none
+
+.app-blog .post-card h3 a:hover
+  color var(--accent)
+
+.app-blog .post-excerpt
+  color var(--ink-soft)
+  margin 0 0 .8rem
+  line-height 1.55
+
+.app-blog .post-more a
+  font-size .88rem
+  font-weight 600
+  color var(--accent)
+  text-decoration none
+
+.app-blog .post-more a:hover
+  text-decoration underline
+
+.app-blog .empty-note
+  color var(--muted)
+  font-style italic
+  padding 2rem
+  text-align center
+  border 1px dashed var(--line)
+  radius var(--radius)
+
+/* The pager — plain links to the generated routes, zero JS. */
+.app-blog .pager
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  margin 2.5rem 0 3rem
+  padding-top 1.4rem
+  border-top 1px solid var(--line)
+
+.app-blog .pager-side
+  flex 1
+  min-width 0
+
+.app-blog .pager-side p
+  margin 0
+
+.app-blog .pager-side--end
+  text-align right
+
+.app-blog .pager-now
+  font-size .85rem
+  font-weight 600
+  color var(--muted)
+  white-space nowrap
+  font-variant-numeric tabular-nums
+
+.app-blog .pager-link
+  font-weight 600
+  color var(--accent)
+  text-decoration none
+
+.app-blog .pager-link:hover
+  text-decoration underline

package/site/pages/blog/index.wd

@@ -0,0 +1,74 @@
+---
+html: true
+title: The Darkmown Blog
+description: Notes on shipping Markdown that runs — collections, feeds, drafts, and zero-JS releases. This whole index is one @loop over a folder.
+image: https://darkmown.com/__wd/media/og.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-blog">
+
+<header class="blog-head">
+  <span class="eyebrow">The Darkmown Blog</span>
+
+# Notes from the framework
+
+Every post below is a plain `.md` file in `site/pages/blog/`. This page is **one
+`@loop` over that folder** — sorted newest-first, paginated, and 100% static
+HTML. No hand-maintained list, no config, no JavaScript.
+
+</header>
+
+<section class="post-list">
+
+@loop blog into post sort by post.date desc paginate 3
+::: card .post-card
+::: post-meta
+<time>{ post.date }</time>
+@loop post.tags into tag
+<span class="tag">{ tag }</span>
+@endloop
+:::
+
+### [{ post.title }]({ post.url })
+
+::: post-excerpt
+{ post.excerpt }
+:::
+
+::: post-more
+[Read post → ]({ post.url })
+:::
+:::
+@empty
+::: empty-note
+No posts yet. Add a dated `.md` file to `site/pages/blog/`.
+:::
+@endloop
+
+</section>
+
+::: pager
+::: pager-side
+:if page.prev
+[← Newer posts]({ page.prev }){.pager-link}
+:endif
+:::
+
+::: pager-now
+Page { page.current } of { page.total }
+:::
+
+::: pager-side .pager-side--end
+:if page.next
+[Older posts →]({ page.next }){.pager-link}
+:endif
+:::
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/blog/shipping-feeds.md

@@ -3,6 +3,7 @@ title: Shipping feeds without a config file
 description: Site identity lives in the home page frontmatter — one site_url field turns on sitemap.xml and rss.xml.
 date: 2026-06-26
 excerpt: One reserved frontmatter field on the home page — site_url — turns on the whole feeds story. No config loader, no plugin.
+tags: [feeds, seo]
 ---
 
 # Shipping feeds without a config file

package/site/pages/blog/shipping-feeds.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/typed-frontmatter.md

@@ -0,0 +1,45 @@
+---
+title: Typed frontmatter with a four-line schema
+description: Drop a _schema.wd in a collection and every entry is validated at build time — missing fields, wrong types, and typos all fail the build.
+date: 2026-06-29
+excerpt: A typo'd frontmatter key used to ship silently. With a collection schema, titel instead of title fails the build with a file and line.
+tags: [collections, schema, dx]
+---
+
+# Typed frontmatter with a four-line schema
+
+Frontmatter is convenient until a typo bites. You write `titel:` instead of
+`title:`, the field silently becomes empty, and the bug surfaces as a blank
+heading in production. Darkmown closes that gap with an *optional* schema — one
+file at the collection root, frontmatter-shaped, written exactly like the
+frontmatter it checks:
+
+```wd
+---
+title: string
+date: date
+description: string
+excerpt: string?
+tags: string[]?
+---
+```
+
+The vocabulary is small and closed on purpose: `string`, `number`, `boolean`,
+`date`, and `string[]`, with a trailing `?` to make a field optional. That is
+the whole DSL. An unknown type token is a compile error in the schema file
+itself.
+
+## What it catches
+
+At build time, every entry in the collection is checked against the rules. A
+missing required field, a value of the wrong type, or an extra field the schema
+never declared each fails the build — and the error names the offending entry
+by path and the field by name, so the fix is obvious:
+
+```
+Missing required field "date" (date) in /blog/example/ (collection "blog").
+```
+
+Validation is opt-in. No `_schema.wd`, no validation — the same posture as
+`scoped` styles and the `draft` flag. Add the file when you want the guardrails;
+leave it out while you are still sketching.

package/site/pages/blog/typed-frontmatter.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