@zvndev/darkmown 0.9.0 → 0.11.0

package/site/pages/loops.skin

@@ -0,0 +1,80 @@
+tokens
+  ink #171717
+  paper #faf8f3
+  panel #ffffff
+  line #dedbd3
+  accent #16645a
+  warm #a83f2a
+  radius 8px
+
+page
+  margin 0
+  font ui-serif, Georgia, Cambria, serif
+  color $ink
+  bg $paper
+  line-height 1.7
+
+main
+  max-width 820px
+  margin 0 auto
+  padding 3rem 2rem 5rem
+
+h1
+  font-size 3rem
+  line-height 1
+
+h2
+  margin-top 2.4rem
+  border-top 1px solid $line
+  padding-top 1.2rem
+
+a
+  color $accent
+
+button
+  border 1px solid $ink
+  bg $ink
+  color white
+  padding .72rem 1rem
+  margin .3rem .5rem .3rem 0
+  radius $radius
+  font inherit
+  cursor pointer
+
+button:hover
+  bg $accent
+  border-color $accent
+
+input
+  padding .7rem .9rem
+  border 1px solid $line
+  radius $radius
+  font inherit
+  bg $panel
+  width 100%
+  max-width 360px
+  margin 1rem 0
+
+ul
+  border 1px solid $line
+  bg $panel
+  padding 1rem 1rem 1rem 2rem
+  radius $radius
+
+.person-row
+  border 1px solid $line
+  bg $panel
+  padding .65rem 1.1rem
+  margin .5rem 0
+  radius $radius
+  display flex
+  gap .6rem
+  align-items baseline
+  flex-wrap wrap
+
+#paged
+  border 1px dashed $line
+  bg $panel
+  padding .4rem 1.2rem 1.2rem
+  margin 1rem 0
+  radius $radius

package/site/pages/loops.wd

@@ -0,0 +1,86 @@
+---
+title: Loop ergonomics
+---
+
+@include /nav.wd
+
+<main>
+
+# Loop ergonomics
+
+One loop, fully equipped. `@loop` gains `sort by`, `offset`, `limit`, `reverse`,
+an `@empty` branch, and per-row meta variables (`{ $number }`, `{ $first }`,
+`{ $last }`, `{ $count }`) — all in plain Markdown, all reactive when the source
+or a clause argument is `:state`.
+
+:state people = [{"id": 1, "name": "Ada", "age": 36}, {"id": 2, "name": "Cyrus", "age": 71}, {"id": 3, "name": "Bao", "age": 29}, {"id": 4, "name": "Dax", "age": 52}, {"id": 5, "name": "Esme", "age": 44}]
+:state sortOffset = 0
+:state pageSize = 2
+:state query = ""
+:state recent = [{"id": 1, "label": "Item 1"}, {"id": 2, "label": "Item 2"}, {"id": 3, "label": "Item 3"}, {"id": 4, "label": "Item 4"}, {"id": 5, "label": "Item 5"}]
+
+## Sorted, numbered, with first / last markers
+
+`sort by p.age desc` orders the eldest first. Each row reads its position from
+the loop meta vars: `{ $number }` is the 1-based index, and `:if $first` /
+`:if $last` light up only on the boundary rows.
+
+@loop people into p sort by p.age desc offset sortOffset
+::: card .person-row
+**{ $number }. { p.name }** — age { p.age }
+:if $first
+(first)
+:endif
+:if $last
+(last)
+:endif
+:::
+@endloop
+
+The list above is sorted oldest-first. `offset` is wired to a `:state`, so a
+button can slide the window without a reload:
+
+:button "Sort: skip the eldest" -> sortOffset = 1
+:button "Reset order" -> sortOffset = 0
+
+## Reactive paging with `limit`
+
+`limit pageSize` reads a `:state` value, so paging is just a button that bumps
+the number. The runtime re-slices the same loop in place — no extra request, no
+reload.
+
+::: section #paged
+@loop people into p limit pageSize
+::: card .person-row
+{ p.name } — age { p.age }
+:::
+@endloop
+
+:button "Show more" -> pageSize += 2
+:button "Collapse" -> pageSize = 2
+:::
+
+## `where` + `@empty`
+
+`where` filters live as you type, and `@empty` renders the moment the filtered
+set hits zero rows — the one place a loop gets to say "nothing here":
+
+:bind query placeholder="Search people…"
+
+@loop people into p where p.name contains query
+::: card .person-row
+{ p.name }
+:::
+@empty
+No matches.
+@endloop
+
+## `reverse` flips the source order
+
+No sort key needed — `reverse` walks the list back to front:
+
+@loop recent into r reverse
+- { r.label }
+@endloop
+
+</main>

package/site/pages/store.skin

@@ -0,0 +1,70 @@
+tokens
+  ink #171717
+  paper #faf8f3
+  panel #ffffff
+  line #dedbd3
+  accent #16645a
+  warm #a83f2a
+  radius 8px
+
+page
+  margin 0
+  font ui-serif, Georgia, Cambria, serif
+  color $ink
+  bg $paper
+  line-height 1.7
+
+main
+  max-width 820px
+  margin 0 auto
+  padding 3rem 2rem 5rem
+
+h1
+  font-size 3rem
+  line-height 1
+
+h2
+  margin-top 2.4rem
+  border-top 1px solid $line
+  padding-top 1.2rem
+
+a
+  color $accent
+
+button
+  border 1px solid $ink
+  bg $ink
+  color white
+  padding .72rem 1rem
+  margin .3rem .5rem .3rem 0
+  radius $radius
+  font inherit
+  cursor pointer
+
+button:hover
+  bg $accent
+  border-color $accent
+
+input
+  padding .7rem .9rem
+  border 1px solid $line
+  radius $radius
+  font inherit
+  bg $panel
+  width 100%
+  max-width 360px
+  margin 1rem 0
+
+#shop
+  border 1px solid $line
+  bg $panel
+  padding .4rem 1.4rem 1.4rem
+  margin 1.5rem 0
+  radius $radius
+
+.line
+  border 1px solid $line
+  bg $paper
+  padding .55rem 1.1rem
+  margin .45rem 0
+  radius $radius

package/site/pages/store.wd

@@ -0,0 +1,53 @@
+---
+title: Global store
+---
+
+@include /nav.wd
+
+<main>
+
+# Global store
+
+`:store` is durable, page-global state. It persists to `localStorage` under the
+`wd:store:` prefix, rehydrates on load, and syncs across tabs through the
+`storage` event — no backend, no wiring. Add `ephemeral` to opt a store out of
+persistence entirely.
+
+::: section #shop
+:store cart = []
+
+## A durable cart
+
+This cart is a `:store`, so it survives a full reload and mirrors into every open
+tab. Add a couple of items, refresh the page, and the count holds.
+
+Cart: { cart.length }
+
+:button "Add to cart" -> cart append {"id": "sticker", "name": "Sticker", "price": 4}
+:button "Reset cart" -> cart reset
+
+@loop cart into line
+::: card .line
+{ line.name } — ${ line.price }
+:::
+@empty
+The cart is empty. Add something, then reload — it stays.
+@endloop
+
+`Reset cart` runs `-> cart reset`, which restores the **declared** seed (`[]`),
+not the last persisted value — and writes that seed back to storage.
+:::
+
+## An ephemeral draft
+
+`:store draft = "" ephemeral` is in-memory only. It is bound two-way to the
+input and echoed below, but nothing reaches `localStorage`, so a reload wipes it
+clean.
+
+:store draft = "" ephemeral
+
+:bind draft placeholder="Type a draft note…"
+
+Draft says: **{ draft }**
+
+</main>

package/src/builder.js

@@ -66,21 +66,26 @@ export function buildSite(cwd = process.cwd()) {
 }
 
 /**
- * Strip JSDoc `/** ... *\/` blocks from the runtime before it ships.
- * The source keeps full type annotations (for `checkJs` + `.d.ts`), but the
- * browser never needs to download them — this keeps the shipped runtime lean
- * and the gzip budget honest (measured against what users actually receive).
- * Only `/** ... *\/` blocks are removed; code and string literals are untouched.
+ * Strip developer comments from the runtime before it ships. The source keeps
+ * full JSDoc type annotations (for `checkJs` + `.d.ts`) and explanatory comments
+ * so it stays readable; the browser downloads neither. This keeps the shipped
+ * runtime lean and the gzip budget honest (measured against what users receive),
+ * WITHOUT minifying — identifiers, structure, and whitespace are all preserved.
+ *
+ * Two passes, each conservative: `/** ... *\/` JSDoc blocks, then whole-line
+ * `//` comments (a line that is nothing but a comment). Trailing `//` after code
+ * and `//` inside strings/URLs are deliberately left untouched, so no string
+ * literal is ever harmed.
  * @param {string} source
  * @returns {string}
  */
 export function stripRuntimeComments(source) {
   return source
-    // Remove the JSDoc block text only — never the surrounding newlines, so an
-    // inline `/** @type {x} */ code` keeps its line and never glues onto a
-    // preceding `//` comment.
+    // JSDoc blocks — type annotations the browser never needs.
     .replace(/\/\*\*[\s\S]*?\*\//g, "")
-    // Drop the now blank/whitespace-only lines the removed blocks leave behind.
+    // Whole-line `//` comments — developer notes that don't belong in the download.
+    .replace(/^[ \t]*\/\/.*$/gm, "")
+    // Drop the now blank/whitespace-only lines the removals leave behind.
     .replace(/^[ \t]*\n/gm, "");
 }
 

package/src/cli.js

@@ -20,8 +20,9 @@ if (command === "help" || command === "--help" || command === "-h") {
 } else if (command === "init") {
   const target = process.argv[3] || ".";
   const result = initProject(path.resolve(process.cwd(), target));
-  console.log(`Created Darkmown project at ${path.relative(process.cwd(), result.root) || "."}`);
-  console.log(`Next: cd ${path.relative(process.cwd(), result.root) || "."} && npm install && npm run dev`);
+  const relativeRoot = path.relative(process.cwd(), result.root) || ".";
+  console.log(`Created Darkmown project at ${relativeRoot}`);
+  console.log(`Next: ${nextStep(relativeRoot)}`);
 } else if (command === "build") {
   const result = buildSite();
   console.log(`Built ${result.routes.length} routes into ${path.relative(process.cwd(), result.distRoot)}`);
@@ -157,6 +158,7 @@ Usage:
   darkmown dev          Start the live compiler dev server
   darkmown build        Compile site/pages into dist
   darkmown serve        Preview the built dist locally
+  darkmown version      Print the installed Darkmown version
   darkmown help         Show this help
 
 Authoring:
@@ -167,3 +169,13 @@ Authoring:
   *.js                Colocated page behavior
 `);
 }
+
+
+/**
+ * @param {string} relativeRoot
+ * @returns {string}
+ */
+function nextStep(relativeRoot) {
+  if (relativeRoot === ".") return "npm install && npm run dev";
+  return `cd ${relativeRoot} && npm install && npm run dev`;
+}