@zvndev/darkmown 0.20.0 → 1.1.0

package/site/pages/folio/cart.wd

@@ -0,0 +1,201 @@
+---
+title: Folio — your basket
+description: The Folio checkout. The same :store cart shared with the catalog, a per-row remove, and a form that round-trips to a server — all written in Markdown.
+image: https://darkmown.com/__wd/media/og-folio.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+@include ./-style.wd
+
+<main class="wide app-folio">
+
+::: section #checkout
+
+:store cart = []
+:computed count = cart.length
+:computed subtotal = sum(cart, price)
+:computed tax = subtotal * 0.08
+:computed total = subtotal * 1.08
+
+::: shop-head
+::: shop-mark
+::: shop-eyebrow
+Checkout
+:::
+
+# Your *basket*
+
+::: shop-tagline
+The same basket you filled on the shelf — it carried over on its own. Review it, then place a test order through a live server round-trip.
+:::
+:::
+
+::: cart-peek
+{ count } items
+:::
+:::
+
+::: cart-grid
+
+::: cart-lines
+
+## Items
+
+@loop cart into item
+::: card .line
+::: line-emoji
+{ item.emoji }
+:::
+::: line-body
+::: line-name
+{ item.name }
+:::
+::: line-cat
+{ item.category }
+:::
+:::
+::: line-price
+{ item.price | money }
+:::
+:button "Remove" -> cart remove item
+:::
+@empty
+::: card .cart-blank
+**Your basket is empty.**
+
+Nothing here yet — the shelf is just a click away.
+
+[← Back to the shop](/folio/)
+:::
+@endloop
+
+:if count > 0
+::: card .order-summary
+### Order summary
+
+::: sum-row
+Subtotal ({ count | pluralize:"item" })
+::: sum-val
+{ subtotal | money }
+:::
+:::
+::: sum-row
+Tax (8%)
+::: sum-val
+{ tax | money }
+:::
+:::
+::: sum-row .sum-total
+**Total**
+::: sum-val
+**{ total | money }**
+:::
+:::
+
+:button "Clear basket" -> cart clear
+:::
+:endif
+
+:::
+
+::: checkout-panel
+
+## Place your order
+
+This is a real form. With the runtime it posts over `fetch` and shows the reply inline; with JavaScript off, the identical markup degrades to a native POST. The demo endpoint simply echoes your order back.
+
+:form action="/__wd/echo" into receipt
+:input name placeholder="Full name" required
+:input email type=email placeholder="you@studio.com" required
+:select shipping
+- Standard — 3-5 days
+- Express — overnight
+- Local pickup
+:submit "Place order"
+:endform
+
+:if receipt
+::: card .receipt
+**Order received ✓**
+
+Thank you, **{ receipt.received.name }** — a confirmation is on its way to { receipt.received.email }. Shipping: { receipt.received.shipping }.
+
+::: receipt-stamp
+Logged by the server at { receipt.at }
+:::
+:::
+:else
+::: checkout-hint
+Fill in your details and place the order to see the server's reply appear right here.
+:::
+:endif
+
+:if receipt_error
+::: card .receipt-error
+Something went wrong: { receipt_error }
+:::
+:endif
+
+:::
+
+:::
+
+::: persist-note
+::: dot
+✷
+:::
+This basket is the **same `:store`** declared on the catalog — one name, one shared storage. Remove a line here and it's gone on the shelf too, in every open tab, even after a reload.
+:::
+
+<details class="source-reveal">
+<summary>View source — it's Markdown</summary>
+
+```wd
+:store cart = []
+:computed count = cart.length
+:computed subtotal = sum(cart, price)
+:computed total = subtotal * 1.08
+
+@loop cart into item
+::: card .line
+{ item.emoji } **{ item.name }** — { item.price | money }
+:button "Remove" -> cart remove item
+:::
+@empty
+Your basket is empty.
+@endloop
+
+Subtotal ({ count | pluralize:"item" }) — **{ subtotal | money }**
+Total with tax — **{ total | money }**
+
+:button "Clear basket" -> cart clear
+
+:form action="/__wd/echo" into receipt
+:input name placeholder="Full name" required
+:input email type=email placeholder="you@studio.com" required
+:select shipping
+- Standard — 3-5 days
+- Express — overnight
+- Local pickup
+:submit "Place order"
+:endform
+
+:if receipt
+Thank you, { receipt.received.name }!
+:endif
+```
+
+</details>
+
+::: folio-foot
+Keep browsing —
+[← Back to the shop](/folio/)
+:::
+
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/folio/index.skin

@@ -0,0 +1,24 @@
+/* Folio catalog page — thin layer over style.skin (the shared boutique look)
+   and /base.wd. Only the catalog-specific header chip lives here. */
+
+/* The live basket count, sitting in the storefront header. */
+.app-folio .cart-peek
+  display inline-flex
+  align-items center
+  gap .45rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .82rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .08em
+  color var(--brand-deep)
+  background var(--brand-soft)
+  border 1px solid var(--brand)
+  padding .5rem .9rem
+  radius 999px
+  white-space nowrap
+
+.app-folio .cart-peek::before
+  content "✦"
+  font-size .9rem
+  color var(--brand)

package/site/pages/folio/index.wd

@@ -0,0 +1,167 @@
+---
+title: Folio — a boutique storefront
+description: A multi-page store written in pure Markdown. The cart persists across pages, reloads, and browser tabs; navigation is instant. No framework JavaScript written by hand.
+image: https://darkmown.com/__wd/media/og-folio.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+@include ./-style.wd
+
+<main class="wide app-folio">
+
+::: section #store
+
+:store cart = []
+:computed count = cart.length
+:state q = ""
+
+::: shop-head
+::: shop-mark
+::: shop-eyebrow
+Objects for everyday rituals
+:::
+
+# Fol*i*o
+
+::: shop-tagline
+A small, considered shop — eight things, chosen well. Your basket follows you from page to page, through a reload, even into a second tab.
+:::
+:::
+
+::: cart-peek
+{ count } in your basket
+:::
+:::
+
+::: shop-layout
+
+::: shop-main
+
+::: shop-search
+:bind q placeholder="Search the shop…"
+
+::: shop-hint
+Type to filter the shelf — it narrows as you go, no page reload.
+:::
+:::
+
+::: catalog
+@loop /products.json into p where p.name contains q
+::: card .product
+::: chip
+{ p.emoji }
+:::
+::: body
+::: pname
+{ p.name }
+:::
+
+::: tag
+{ p.category }
+:::
+
+::: blurb
+{ p.blurb }
+:::
+
+::: foot
+::: price
+{ p.price | money }
+:::
+:button "Add" -> cart += p
+:::
+:::
+:::
+@empty
+::: card .catalog-empty
+**Nothing on the shelf matches "{ q }".**
+
+Try a shorter word, or clear the search to see all eight pieces.
+:::
+@endloop
+:::
+
+:::
+
+::: cart-rail
+::: rail-eyebrow
+Your basket
+{ count } items
+:::
+
+::: rail-count
+{ count }
+:::
+
+::: rail-sub
+Saved to this browser. Add a few pieces, then head to checkout when you're ready.
+:::
+
+[View basket →](/folio/cart/){.rail-link}
+
+::: rail-note
+Persisted with a single `:store cart = []`. The very same line on the cart page shares this basket — no backend, no wiring.
+:::
+:::
+
+:::
+
+::: persist-note
+::: dot
+✷
+:::
+**Your basket persists across pages, reloads, and tabs.** Open this page in two tabs, add something in one, and watch the count rise in the other — that's a `:store`, synced over the browser's storage event.
+:::
+
+## Built from Markdown
+
+Every product card, the live search, and the running count are written as plain Markdown with a handful of Darkmown directives. The catalog unrolls from a JSON file; the basket is one shared `:store`. No components, no JSX, no hand-written event handlers.
+
+<details class="source-reveal">
+<summary>View source — it's Markdown</summary>
+
+```wd
+:store cart = []
+:computed count = cart.length
+:state q = ""
+
+:bind q placeholder="Search the shop…"
+
+::: catalog
+@loop /products.json into p where p.name contains q
+::: card .product
+::: chip
+{ p.emoji }
+:::
+::: body
+::: pname
+{ p.name }
+:::
+::: foot
+::: price
+{ p.price | money }
+:::
+:button "Add" -> cart += p
+:::
+:::
+:::
+@empty
+Nothing matches "{ q }".
+@endloop
+:::
+```
+
+</details>
+
+::: folio-foot
+A storefront in two `.wd` files.
+[Open the basket →](/folio/cart/)
+:::
+
+:::
+
+</main>
+
+@include /footer.wd