Add blog example

Author: bcomnes

examples/blog/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "blog",
+  "version": "0.0.0",
+  "description": "A blog example for domstack demonstrating global.data.ts, nested layouts, and feeds.",
+  "type": "module",
+  "scripts": {
+    "start": "npm run watch",
+    "build": "npm run clean && domstack",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && dom --watch",
+    "test": "tsc"
+  },
+  "keywords": [],
+  "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
+  "license": "MIT",
+  "devDependencies": {
+    "@voxpelli/tsconfig": "^16.0.0",
+    "typescript": "~5.9.2"
+  },
+  "dependencies": {
+    "@domstack/static": "file:../../.",
+    "htm": "^3.1.1",
+    "mine.css": "^10.0.0",
+    "preact": "^10.26.6",
+    "preact-render-to-string": "^6.5.13"
+  }
+}

examples/blog/src/README.md

@@ -0,0 +1,15 @@
+---
+title: Home
+---
+
+# Welcome
+
+This is a blog built with [domstack](https://github.com/bcomnes/domstack).
+Recent posts are listed below — the list is generated automatically by `global.data.ts`
+at build time, with no manual wiring needed in this file.
+
+{{{ vars.recentPostsHtml }}}
+
+See [all posts →](/blog/)
+
+Hello

examples/blog/src/about/README.md

@@ -0,0 +1,26 @@
+---
+title: About
+---
+
+# About
+
+This blog is a demonstration of [domstack](https://github.com/bcomnes/domstack),
+a static site generator built around a simple idea: pages are functions, layouts are
+functions, and data flows through plain JavaScript objects.
+
+## The author
+
+**Ada Lovelace** was a mathematician and writer who worked on Charles Babbage's proposed
+mechanical general-purpose computer, the Analytical Engine. She is widely regarded as the
+first computer programmer.
+
+## This site
+
+Built with:
+
+- [domstack](https://github.com/bcomnes/domstack) — the build system
+- [preact](https://preactjs.com) — JSX rendering for layouts
+- [mine.css](https://mine.css.bret.io) — baseline styles
+- [esbuild](https://esbuild.github.io) — JS/CSS bundling
+
+Source is on [GitHub](https://github.com/bcomnes/domstack/tree/master/examples/blog).

examples/blog/src/blog/2024/README.md

@@ -0,0 +1,4 @@
+---
+title: "2024"
+layout: year-index
+---

examples/blog/src/blog/2024/hello-world/README.md

@@ -0,0 +1,37 @@
+---
+layout: post
+title: "Hello, World"
+publishDate: "2024-03-15T12:00:00.000Z"
+description: "The first post on this blog. An introduction to what this is all about."
+tags:
+  - meta
+  - intro
+---
+
+# Hello, World
+
+Welcome to this blog. It's built with [domstack](https://github.com/bcomnes/domstack),
+a static site generator that lets you write pages in TypeScript, Markdown, or plain HTML
+and compose them with layouts written in JSX (via preact).
+
+## What makes this interesting
+
+The post list you saw on the home page and the `/blog/` index weren't manually maintained.
+They're generated at build time by `global.data.ts`:
+
+```ts
+// src/global.data.ts
+const blogPosts = pages
+  .filter(p => p.vars?.layout === 'post' && p.vars?.publishDate)
+  .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
+```
+
+The returned object is stamped onto every page's `vars`, so any page or layout can read
+`vars.blogPosts` directly — no postVars, no custom wiring.
+
+## This layout
+
+This post uses the `post` layout (`src/layouts/post.layout.ts`), which wraps the root layout
+and adds article chrome: an `h-entry` microformat wrapper, author card, publish date, and tag list.
+
+More posts coming soon.

examples/blog/src/blog/2024/second-post/README.md

@@ -0,0 +1,45 @@
+---
+layout: post
+title: "Layouts All the Way Down"
+publishDate: "2024-07-04T09:00:00.000Z"
+description: "How domstack's nested layout system works and why it keeps things simple."
+tags:
+  - domstack
+  - layouts
+---
+
+# Layouts All the Way Down
+
+Domstack layouts are just functions. The `post` layout is a TypeScript function that
+receives `children` (the rendered page content), wraps it in article markup, and
+delegates to the `root` layout for the full HTML shell:
+
+```ts
+const postLayout: LayoutFunction<PostVars> = (args) => {
+  const { children, ...rest } = args
+  const wrappedChildren = render(html`
+    <article class="h-entry">
+      <header>...</header>
+      <div class="e-content">${children}</div>
+    </article>
+  `)
+  return rootLayout({ ...rest, children: wrappedChildren })
+}
+```
+
+No magic inheritance, no template partials, no special syntax. Just function composition.
+
+## Styles follow the same pattern
+
+`post.layout.css` imports `root.layout.css` with a plain CSS `@import`. esbuild
+bundles them together. Each layout advertises its own stylesheet and client script,
+and domstack injects the right ones automatically based on which layout a page uses.
+
+## The `vars` merge order
+
+```
+{ ...globalVars, ...globalDataVars, ...pageVars, ...builderVars }
+```
+
+`globalDataVars` sits between global and page vars, so `global.data.ts` output is
+available everywhere but can be overridden per-page if needed.

examples/blog/src/blog/2025/README.md

@@ -0,0 +1,4 @@
+---
+title: "2025"
+layout: year-index
+---

examples/blog/src/blog/2025/a-new-year/README.md

@@ -0,0 +1,32 @@
+---
+layout: post
+title: "A New Year, A New Post"
+publishDate: "2025-01-10T08:30:00.000Z"
+description: "Kicking off 2025 with some thoughts on building for the web."
+tags:
+  - web
+  - meta
+---
+
+# A New Year, A New Post
+
+It's 2025. The web is still here. Static sites are still a good idea.
+
+## Why static?
+
+- Fast. No server render time.
+- Cheap. A CDN and an object store is enough.
+- Durable. HTML files outlast frameworks.
+- Understandable. The output is exactly what the browser sees.
+
+The build step is the complexity budget. Spend it wisely, then ship files.
+
+## What global.data.ts gives you
+
+Before `global.data.ts`, aggregating data across pages (blog indexes, RSS feeds) required
+a `postVars` escape hatch that ran after the main build pass. It was implicit and hard
+to reason about.
+
+`global.data.ts` makes it explicit: one function, runs once, receives the fully initialized
+page array, returns an object that every page can read. The blog index on this site is
+just `vars.blogPosts.map(...)`. No special setup.

examples/blog/src/blog/2025/thoughts-on-the-web/README.md

@@ -0,0 +1,35 @@
+---
+layout: post
+title: "Thoughts on the Web Platform"
+publishDate: "2025-02-14T14:00:00.000Z"
+description: "Web components, view transitions, and why the platform keeps getting better."
+tags:
+  - web
+  - platform
+---
+
+# Thoughts on the Web Platform
+
+The web platform has been quietly getting very good.
+
+## View Transitions
+
+The View Transitions API lets you animate between page states with a few lines of CSS.
+Works for both same-document and cross-document navigation. No JavaScript framework required.
+
+## Custom Elements
+
+Web Components via Custom Elements (`customElements.define`) are now well-supported
+everywhere. They're not a replacement for component frameworks, but they're great for
+leaf-node UI that needs to work anywhere.
+
+## CSS
+
+Container queries. `:has()`. Cascade layers. Logical properties. The CSS working group
+has shipped more useful features in the last three years than in the decade before.
+
+## The takeaway
+
+Build with the platform where you can. Reach for frameworks and build tools when the
+platform isn't enough. domstack tries to stay close to the platform — your JS is
+bundled with esbuild, your HTML is just HTML, your CSS is just CSS.

examples/blog/src/blog/2025/thoughts-on-the-web/client.ts

@@ -0,0 +1 @@
+console.log('yo')