create-spark-html-app 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {

package/template-ssr/404.html

@@ -0,0 +1,9 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Not found</title>
+<link rel="stylesheet" href="/style.css">
+<article class="post" style="text-align:center; margin-top:4rem">
+  <h1>404</h1>
+  <p class="lede">This page took the day off.</p>
+  <p><a href="/">← Back to the blog</a></p>
+</article>

package/template-ssr/README.md

@@ -1,29 +1,77 @@
-# ⚡ Spark SSR App
+# ⚡ Spark Blog — a full app on spark-ssr
 
-SSR the Spark way — zero config, no build. The HTML template infers
-everything: `<template each="todo in todos">` means you need `todos`,
-`<spark-ssr table="todos" />` backs it with a table and the REST endpoints
-the handlers imply.
+A complete blog: public posts with SEO titles/meta, dynamic routes, an
+about page, and an auth-gated admin panel where the author manages posts —
+and a live-updating private todo list. All of it is a handful of `.html`
+files and one SQLite database. **No build step. No setup script. No fetch
+calls for the basics.**
 
-## Develop
+## Run it
 
 ```bash
 bun install
-bun run dev     # creates + seeds dev.db, then serves on :3000
+bun run dev     # creates + seeds the DB from the templates, serves on :3000
 ```
 
-## The three-tier pattern
+Sign in at [/login](http://localhost:3000/login) with
+**me@spark-html.com** / **spark** — a plain form; it works with JavaScript
+disabled.
 
-- **Page** — `pages/index.html` declares its data with `<spark-ssr>`
-- **Component** — `components/nav.html` is pure UI via `<div import>`
-- **Config** — `spark.json` holds the DB connection (swap sqlite → postgres
-  by changing one line)
+## What's demonstrated where
 
-Add a page by adding a file: `pages/about.html` → `/about`,
-`pages/blog/[slug].html` → `/blog/:slug` (`:slug` binds into your queries).
+| Feature | Where |
+|---|---|
+| Layouts | `pages/_layout.html` — nav, styles, `app.js` and the `author` query, once for every page |
+| Filesystem routing | `pages/index.html` → `/`, `pages/about.html` → `/about` |
+| Dynamic routes | `pages/blog/[slug].html` → `/blog/:slug` — `:slug` binds into the SQL |
+| Named page data | `posts = SELECT …` — the variable is named in the block, no endpoint exposed |
+| Real 404s | `<template else status="404">` on the missing-post branch |
+| Guards | `/admin`: `<spark-ssr guard="session" redirect="/login" />` — one line |
+| No-JS forms | `pages/login.html` and the logout button — plain forms, 303 back |
+| Form validation | the login form's `required`/`type="email"` run server-side too |
+| The template is the schema | `seed/*.json` + `<spark-ssr table="…" seed="…">` — tables created and seeded at startup; `bun run db` shows the diff |
+| Live updates | `<spark-ssr table="todos" … live />` — open /admin in two tabs |
+| Per-page `<title>`/`<meta>` | literal tags at the top of each page, `{expr}`-interpolated |
+| SEO | og:title/og:description derive from the head; `/sitemap.xml` enumerates `/blog/:slug` from its query; `/robots.txt` honors the admin page's `noindex` |
+| Server → component props | `index.html` passes each whole `post` row into `post-card.html` |
+| Client components | `post-editor`, `todo-list` — their `<script>` runs in the browser |
+| Auth | `spark.json` `"auth"` → sessions, `POST /api/users?auth` login, hashed passwords |
+| Auth-scoped CRUD | `posts` and `todos` carry `user_id` → their APIs are session-scoped (401 anonymous) |
+| Draft privacy | the `[slug]` query: `published = 1 OR :session.id IS NOT NULL` — authors preview drafts |
+| Middleware | `middleware.html` disables public signups (single-author blog) |
+| Aggregates | `about.html`'s `COUNT(*)` serves an object → `{stats.n}` |
+| Dark/light theme | spark-html-theme — `app.js` one-liner + `theme-toggle.html`; no-flash init is auto-inlined |
+| Fonts | spark.json `"fonts"` → spark-html-font tags in every `<head>` |
+| Images | `bun run build` runs spark-html-image over `dist/` — webp + srcset |
+
+## The mental model
+
+- `pages/_layout.html` wraps every page in the folder; `<slot>` is the page.
+  Its `<spark-ssr>` vars are in scope everywhere it wraps.
+- A **page**'s plain `<script>` runs on the **server** (it's the escape
+  hatch); `<script type="module">`/`src` scripts ship to the browser.
+- A **component**'s `<script>` runs in the **browser**. Components are
+  otherwise pure UI: they render the props they're given.
+- `<spark-ssr>` declares data. `var = SELECT …` names page data;
+  `table="…"` gives you scoped REST CRUD (+ `seed`, `live`, `limit`,
+  `search`); `guard="…"` protects the page.
+- Plain forms to `/api/*` work without JavaScript — success 303s back,
+  the markup's constraint attributes validate on the server.
+- Everything hot-reloads — pages, layouts, components, queries, middleware
+  — and dev errors land on the page, not in a bare 500. Open
+  [/__spark/plan](http://localhost:3000/__spark/plan) to see the inferred
+  backend.
 
 ## Deploy
 
 ```bash
-bun run build   # dist/ with a compiled single binary
+bun run build            # dist/ + compiled binary; images optimized
+bun spark-ssr build --docker   # …plus a Dockerfile
+PORT=3000 ./dist/app
 ```
+
+Set a fixed session secret in production so logins survive restarts:
+`"auth": { …, "secret": "ENV.SESSION_SECRET" }` in spark.json.
+
+Swap SQLite for Postgres by changing one line in spark.json:
+`"db": "postgres://…"`.

package/template-ssr/components/nav.html

@@ -1,4 +1,11 @@
-<!-- Components are pure UI — they just render what they receive. -->
-<nav>
-  <strong>⚡ {title}</strong>
+<!-- Pure UI — no <script>. Props (blog, active) come from whichever page
+     imports it, rendered on the server and again after client mount. -->
+<nav class="nav">
+  <a class="brand" href="/">⚡ {blog}</a>
+  <span class="links">
+    <a href="/" :class="active === 'home' ? 'on' : ''">Posts</a>
+    <a href="/about" :class="active === 'about' ? 'on' : ''">About</a>
+    <a href="/admin" :class="active === 'admin' ? 'on' : ''">Manage</a>
+    <span import="/components/theme-toggle"></span>
+  </span>
 </nav>

package/template-ssr/components/post-card.html

@@ -0,0 +1,7 @@
+<!-- Pure UI — receives the WHOLE post row as one prop from the page's
+     each-loop: <div import="/components/post-card" post="{post}">. -->
+<article class="card">
+  <h2><a href="/blog/{post.slug}">{post.title}</a></h2>
+  <p>{post.excerpt}</p>
+  <p class="meta">{post.created_at}</p>
+</article>

package/template-ssr/components/post-editor.html

@@ -0,0 +1,68 @@
+<!-- Manage posts through the auto-CRUD API the admin page declares with
+     <spark-ssr table="posts" />. posts has a user_id column, so every call
+     is scoped to the session — anonymous requests get 401. -->
+<section class="panel">
+  <h2>Posts</h2>
+  <template each="p in posts" key="p.id">
+    <div class="row">
+      <span class="grow">
+        <strong>{p.title}</strong>
+        <span :class="p.published ? 'pill live' : 'pill draft'">{p.published ? 'live' : 'draft'}</span>
+      </span>
+      <a href="/blog/{p.slug}">view</a>
+      <button onclick={toggle(p)}>{p.published ? 'Unpublish' : 'Publish'}</button>
+      <button class="danger" onclick={remove(p)}>Delete</button>
+    </div>
+  </template>
+  <template if="loaded && posts.length === 0">
+    <p class="empty">No posts yet — write one below.</p>
+  </template>
+
+  <h3>New post</h3>
+  <input bind:value="title" placeholder="Title">
+  <input bind:value="excerpt" placeholder="One-line excerpt">
+  <textarea bind:value="body" rows="6" placeholder="Write…"></textarea>
+  <button onclick={create} :disabled="!title">Save draft</button>
+</section>
+
+<script>
+  let posts = [];
+  let loaded = false;
+  let title = '';
+  let excerpt = '';
+  let body = '';
+
+  async function api(path, method, data) {
+    return fetch(path, {
+      method,
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  }
+
+  async function refresh() {
+    posts = await (await fetch('/api/posts')).json();
+    loaded = true;
+  }
+
+  async function create() {
+    const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+    await api('/api/posts', 'POST', { slug, title, excerpt, body });
+    title = '';
+    excerpt = '';
+    body = '';
+    refresh();
+  }
+
+  async function toggle(p) {
+    await api(`/api/posts/${p.id}`, 'PATCH', { published: p.published ? 0 : 1 });
+    refresh();
+  }
+
+  async function remove(p) {
+    await api(`/api/posts/${p.id}`, 'DELETE');
+    refresh();
+  }
+
+  refresh();
+</script>

package/template-ssr/components/theme-toggle.html

@@ -0,0 +1,9 @@
+<!-- The spark-html-theme store, as a button. theme() itself boots in
+     /app.js; the server also inlines the no-flash init snippet in <head>. -->
+<button class="ghost toggle" onclick={theme.toggle} aria-label="Toggle theme">
+  {theme.resolved === 'dark' ? '☀️' : '🌙'}
+</button>
+
+<script>
+  const theme = useStore('theme');
+</script>

package/template-ssr/components/todo-list.html

@@ -0,0 +1,56 @@
+<!-- The author's private todos. Same auto-CRUD pattern as posts — the
+     user_id column scopes every row to the session, so nobody else can
+     read or touch them (try /api/todos signed out: 401). The todos block
+     declares `live`, so writes ping /__spark/live: the two lines at the
+     bottom keep every open tab (or the author's phone) in sync. -->
+<section class="panel">
+  <h2>Private todos</h2>
+  <div class="row">
+    <input class="grow" bind:value="draft" placeholder="Something to do">
+    <button onclick={add} :disabled="!draft">Add</button>
+  </div>
+  <template each="t in todos" key="t.id">
+    <label class="row">
+      <input type="checkbox" bind:checked="t.done" onchange={toggle(t)}>
+      <span :class="t.done ? 'grow done' : 'grow'">{t.title}</span>
+      <button class="danger" onclick={remove(t)}>✕</button>
+    </label>
+  </template>
+</section>
+
+<script>
+  let todos = [];
+  let draft = '';
+
+  async function api(path, method, data) {
+    return fetch(path, {
+      method,
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  }
+
+  async function refresh() {
+    todos = await (await fetch('/api/todos')).json();
+  }
+
+  async function add() {
+    await api('/api/todos', 'POST', { title: draft });
+    draft = '';
+    refresh();
+  }
+
+  async function toggle(t) {
+    await api(`/api/todos/${t.id}`, 'PATCH', { done: t.done ? 1 : 0 });
+  }
+
+  async function remove(t) {
+    await api(`/api/todos/${t.id}`, 'DELETE');
+    refresh();
+  }
+
+  refresh();
+
+  const es = new EventSource('/__spark/live');
+  es.onmessage = (e) => { if (e.data === 'todos') refresh(); };
+</script>

package/template-ssr/middleware.html

@@ -0,0 +1,8 @@
+<!-- Runs on EVERY request, before anything else. This blog is single-author:
+     the seeded account is the only one, so public signups are switched off —
+     only the ?auth login may POST to the users API. -->
+<script>
+  if (req.path.startsWith('/api/users') && !(req.method === 'POST' && 'auth' in req.query)) {
+    return { status: 403, body: 'Single-author blog — signups are disabled.' };
+  }
+</script>

package/template-ssr/package.json

@@ -1,15 +1,21 @@
 {
-  "name": "spark-ssr-app",
+  "name": "spark-blog",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "bun setup.js && bun spark-ssr",
-    "start": "bun spark-ssr",
+    "dev": "bun spark-ssr",
+    "db": "bun spark-ssr db",
+    "start": "bun spark-ssr start",
     "build": "bun spark-ssr build"
   },
   "dependencies": {
     "spark-html": "latest",
-    "spark-ssr": "latest"
+    "spark-ssr": "latest",
+    "spark-html-theme": "latest",
+    "spark-html-font": "latest"
+  },
+  "devDependencies": {
+    "spark-html-image": "latest"
   }
 }

package/template-ssr/pages/_layout.html

@@ -0,0 +1,14 @@
+<!-- The layout: every page in pages/ renders inside it — <slot> is the page.
+     Its <spark-ssr> vars (author) are in scope for every page it wraps, and
+     its head tags lift into <head> too (a page's own tags win on conflict).
+     The three lines every page used to repeat live here, once. -->
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="{author.name}"></div>
+
+<slot></slot>
+
+<spark-ssr>
+  author = SELECT id, name, email, bio FROM users LIMIT 1
+</spark-ssr>

package/template-ssr/pages/about.html

@@ -0,0 +1,17 @@
+<!-- /about — {author} comes from the layout; this page adds one aggregate:
+     a COUNT(*) query serves an object, so {stats.n} just works. -->
+<title>About {author.name}</title>
+<meta name="description" content="Who is {author.name} — {author.bio}">
+
+<article class="post">
+  <img class="avatar" src="/img/avatar.png" alt="{author.name}" width="88" height="88">
+  <h1>About me</h1>
+  <p class="lede">{author.bio}</p>
+  <p>I've published <strong>{stats.n}</strong> {stats.n === 1 ? 'post' : 'posts'} on this blog so far,
+     and I manage all of it from the <a href="/admin">admin panel</a> — which is just another page.</p>
+  <p>Say hi: <a href="mailto:{author.email}">{author.email}</a></p>
+</article>
+
+<spark-ssr>
+  stats = SELECT COUNT(*) AS n FROM posts WHERE published = 1
+</spark-ssr>

package/template-ssr/pages/admin/index.html

@@ -0,0 +1,25 @@
+<!-- /admin — one guard line protects the whole page: signed out → 303 to
+     /login. The table blocks give the components their scoped REST APIs
+     (posts + todos carry user_id → session-scoped, 401 for anyone else);
+     the seed="…" files define AND fill the tables on first run — there is
+     no setup.js — and `live` keeps every open todos tab in sync. -->
+<title>Manage · {author.name}</title>
+<meta name="robots" content="noindex">
+
+<spark-ssr guard="session" redirect="/login" />
+
+<main class="admin">
+  <header class="admin-head">
+    <p>Signed in as <strong>{session.email}</strong></p>
+    <!-- Logout is a plain form too — works with JavaScript disabled. -->
+    <form action="/api/logout" method="post" redirect="/">
+      <button class="ghost">Sign out</button>
+    </form>
+  </header>
+  <div import="/components/post-editor"></div>
+  <div import="/components/todo-list"></div>
+</main>
+
+<spark-ssr table="users" seed="./seed/users.json" />
+<spark-ssr table="posts" seed="./seed/posts.json" />
+<spark-ssr table="todos" seed="./seed/todos.json" live />

package/template-ssr/pages/blog/[slug].html

@@ -0,0 +1,31 @@
+<!-- /blog/:slug — the filename IS the route; :slug binds into the query.
+     A missing row is a REAL 404 (the status= on the rendered branch), and
+     drafts stay invisible to anonymous readers while the signed-in author
+     gets a live preview (the OR :session.id clause). -->
+<title>{post ? post.title : 'Not found'} · {author.name}</title>
+<meta name="description" content="{post ? post.excerpt : 'This post does not exist.'}">
+
+<template if="post">
+  <article class="post">
+    <h1>{post.title}</h1>
+    <p class="meta">
+      By {author.name} · {post.created_at}
+      <template if="!post.published"><span class="pill draft">draft preview</span></template>
+    </p>
+    <p class="lede">{post.excerpt}</p>
+    <div class="body">{post.body}</div>
+  </article>
+</template>
+<template else status="404">
+  <article class="post">
+    <h1>Not found</h1>
+    <p>That post doesn't exist — or it's a draft and you're not signed in.</p>
+    <p><a href="/">← Back to all posts</a></p>
+  </article>
+</template>
+
+<spark-ssr>
+  post = SELECT * FROM posts
+    WHERE slug = :slug AND (published = 1 OR :session.id IS NOT NULL)
+    LIMIT 1
+</spark-ssr>

package/template-ssr/pages/index.html

@@ -1,19 +1,28 @@
-<div import="/components/nav" title="Tasks"></div>
+<!-- The homepage. The layout owns the chrome and provides {author}; this
+     page declares only what's unique to it. `posts = SELECT …` is page data
+     with NO public endpoint — name the variable, skip the route. -->
+<title>{author.name} — a spark blog</title>
+<meta name="description" content="{author.bio}">
 
-<h1>Tasks</h1>
+<header class="hero">
+  <img class="avatar" src="/img/avatar.png" alt="{author.name}" width="88" height="88">
+  <div>
+    <h1>{author.name}</h1>
+    <p class="lede">{author.bio}</p>
+  </div>
+</header>
 
-<template await="todos">
-  <input bind:value="draft" placeholder="New task">
-  <button onclick={add}>Add</button>
-  <ul>
-    <template each="todo in todos">
-      <li>
-        <input type="checkbox" bind:checked="todo.done" onchange={patch}>
-        {todo.title}
-        <button onclick={remove}>✕</button>
-      </li>
-    </template>
-  </ul>
-</template>
+<main>
+  <!-- Server → component data passing: each row travels whole into the
+       card as a prop. post-card.html has no <script> — its props ARE it. -->
+  <template each="post in posts">
+    <div import="/components/post-card" post="{post}"></div>
+  </template>
+  <template if="posts.length === 0">
+    <p class="empty">Nothing published yet — sign in at <a href="/admin">/admin</a> and write the first post.</p>
+  </template>
+</main>
 
-<spark-ssr table="todos" />
+<spark-ssr>
+  posts = SELECT * FROM posts WHERE published = 1 ORDER BY created_at DESC
+</spark-ssr>

package/template-ssr/pages/login.html

@@ -0,0 +1,19 @@
+<!-- Sign in with a PLAIN FORM — no JavaScript required. The server answers
+     a browser like a browser: success 303s to redirect="/admin"; a wrong
+     password re-renders this page with {errors} in scope. The `required`
+     attributes are enforced server-side too — the form is the validator. -->
+<title>Sign in · {author.name}</title>
+<meta name="robots" content="noindex">
+
+<form class="panel login" action="/api/users?auth" method="post" redirect="/admin">
+  <h2>Author sign-in</h2>
+  <label>Email
+    <input type="email" name="email" autocomplete="username" required>
+  </label>
+  <label>Password
+    <input type="password" name="password" autocomplete="current-password" required>
+  </label>
+  <button>Sign in</button>
+  <template if="errors"><p class="error">Wrong email or password.</p></template>
+  <p class="hint">Seeded account: me@spark-html.com / spark</p>
+</form>

package/template-ssr/public/app.js

@@ -0,0 +1,8 @@
+// The client side of the blog — plain browser modules, no build step.
+// spark-ssr serves each family package at /@modules/* and puts them in the
+// page importmap, so bare imports just work.
+import { theme } from 'spark-html-theme';
+
+// Dark/light/system with persistence; the server already inlined the
+// no-flash snippet in <head>, this wires the reactive store + toggle.
+theme();

package/template-ssr/public/style.css

@@ -0,0 +1,116 @@
+/* One stylesheet for the whole blog. Fonts come from spark.json ("fonts" →
+   spark-html-font injects @font-face + the --font-inter stack); theming is
+   the data-theme attribute spark-html-theme maintains. */
+
+:root {
+  --bg: #fdfcf9;
+  --panel: #ffffff;
+  --text: #1c1917;
+  --muted: #78716c;
+  --line: #e7e5e4;
+  --accent: #b45309;
+  --spark: #f59e0b;
+}
+
+[data-theme="dark"] {
+  --bg: #131110;
+  --panel: #1c1917;
+  --text: #e7e5e4;
+  --muted: #a8a29e;
+  --line: #292524;
+  --accent: #fbbf24;
+  --spark: #f59e0b;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0 auto;
+  max-width: 680px;
+  padding: 0 1.25rem 4rem;
+  font-family: var(--font-inter, system-ui, sans-serif);
+  line-height: 1.6;
+  background: var(--bg);
+  color: var(--text);
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+h1, h2, h3 { line-height: 1.2; }
+
+/* ── nav ── */
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem 0;
+}
+.nav .brand { font-weight: 700; color: var(--text); }
+.nav .links { display: flex; align-items: center; gap: 1rem; }
+.nav .links a.on { color: var(--text); font-weight: 700; }
+
+/* ── home ── */
+.hero { display: flex; gap: 1.25rem; align-items: center; margin: 2rem 0 2.5rem; }
+.hero h1 { margin: 0 0 0.25rem; }
+.avatar { border-radius: 50%; }
+.lede { color: var(--muted); margin: 0; }
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 1rem 1.25rem;
+  margin: 0 0 1rem;
+}
+.card h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
+.card p { margin: 0 0 0.35rem; color: var(--text); }
+.meta { color: var(--muted); font-size: 0.85rem; }
+.empty { color: var(--muted); }
+
+/* ── post page ── */
+.post { margin-top: 2rem; }
+.post .body { white-space: pre-line; margin-top: 1.5rem; }
+.pill {
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  vertical-align: middle;
+}
+.pill.draft { background: var(--spark); color: #1c1917; }
+.pill.live { background: #16a34a; color: #fff; }
+
+/* ── admin ── */
+.admin-head { display: flex; justify-content: space-between; align-items: center; }
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 1.25rem;
+  margin: 0 0 1.25rem;
+}
+.panel h2 { margin-top: 0; }
+.row { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
+.grow { flex: 1; }
+.done { text-decoration: line-through; color: var(--muted); }
+.hint { color: var(--muted); font-size: 0.85rem; }
+.error { color: #dc2626; }
+
+input, textarea, button {
+  font: inherit;
+  color: inherit;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.45rem 0.7rem;
+}
+.login { max-width: 380px; margin: 3rem auto; display: grid; gap: 0.75rem; }
+.login label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
+.panel input, .panel textarea { width: 100%; margin: 0.25rem 0; }
+.row input, .row button { width: auto; margin: 0; }
+button { cursor: pointer; background: var(--panel); }
+button:hover { border-color: var(--accent); }
+button:disabled { opacity: 0.5; cursor: default; }
+button.danger:hover { border-color: #dc2626; color: #dc2626; }
+button.ghost, button.toggle { border: none; background: none; padding: 0.2rem; }

package/template-ssr/seed/posts.json

@@ -0,0 +1,38 @@
+[
+  {
+    "user_id": 1,
+    "slug": "hello-spark",
+    "title": "Hello, Spark",
+    "excerpt": "Why this blog runs on HTML that infers its own backend.",
+    "body": "This site is a handful of .html files and one SQLite database.\n\nEach page declares the data it needs in a <spark-ssr> block, and the server infers the rest: routes from filenames, APIs from SQL, auth from a user_id column — even these tables and rows came from seed files the templates point at.\n\nView source on any page — what you see is what I wrote.",
+    "published": 1,
+    "created_at": "2026-06-21"
+  },
+  {
+    "user_id": 1,
+    "slug": "html-that-reacts",
+    "title": "HTML that reacts",
+    "excerpt": "Templates, loops and conditionals — in plain HTML attributes.",
+    "body": "A <template each=\"post in posts\"> renders a list. A <template if> branches. {curly} braces interpolate.\n\nOn the server they render to static HTML; in the browser the same syntax comes alive as components. One mental model, both sides of the wire.",
+    "published": 1,
+    "created_at": "2026-06-27"
+  },
+  {
+    "user_id": 1,
+    "slug": "zero-config-ssr",
+    "title": "Zero-config SSR",
+    "excerpt": "Filesystem routing, layouts, sessions, live updates — from the template.",
+    "body": "pages/blog/[slug].html serves /blog/:slug, and :slug binds straight into the page query. pages/_layout.html wraps every page — nav, styles, footer, once.\n\nDeclare <spark-ssr table=\"todos\" live /> and the REST endpoints exist, the table is created from the template, and every open tab stays in sync. Delete the file and it all goes away.",
+    "published": 1,
+    "created_at": "2026-07-02"
+  },
+  {
+    "user_id": 1,
+    "slug": "drafts-are-private",
+    "title": "Drafts are private",
+    "excerpt": "This post is unpublished — only the signed-in author sees it.",
+    "body": "The page query keeps drafts out of anonymous requests:\n\nWHERE slug = :slug AND (published = 1 OR :session.id IS NOT NULL)\n\nAnd a missing row is a REAL 404 now — <template else status=\"404\"> sets the response status, so crawlers never index an empty page. Sign in at /admin and this post appears.",
+    "published": 0,
+    "created_at": "2026-07-04"
+  }
+]

package/template-ssr/seed/todos.json

@@ -0,0 +1,5 @@
+[
+  { "user_id": 1, "title": "Finish the drafts post", "done": 1 },
+  { "user_id": 1, "title": "Write about companion packages", "done": 0 },
+  { "user_id": 1, "title": "Reply to reader mail", "done": 0 }
+]

package/template-ssr/seed/users.json

@@ -0,0 +1,8 @@
+[
+  {
+    "email": "me@spark-html.com",
+    "password": "spark",
+    "name": "Ada Spark",
+    "bio": "I write HTML that reacts. No compiler, no virtual DOM, no build step — just the platform, with a spark."
+  }
+]

package/template-ssr/spark.json

@@ -1,3 +1,5 @@
 {
-  "db": "sqlite://./dev.db"
+  "db": "sqlite://./dev.db",
+  "auth": { "table": "users", "identity": "email" },
+  "fonts": [{ "family": "Inter", "google": true, "weights": [400, 700] }]
 }

package/template-ssr/pages/index.css

@@ -1,6 +0,0 @@
-body { font-family: system-ui, sans-serif; max-width: 32rem; margin: 3rem auto; padding: 0 1.5rem; }
-nav { opacity: 0.7; margin-bottom: 2rem; }
-ul { padding: 0; }
-li { list-style: none; display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0; }
-li button { margin-left: auto; }
-input[type="text"], input:not([type]) { padding: 0.4rem 0.6rem; }

package/template-ssr/setup.js

@@ -1,15 +0,0 @@
-// One-time (idempotent) dev database setup — `bun run dev` runs it for you.
-// Swap spark.json's db to postgres:// any time; no code changes needed.
-import { Database } from 'bun:sqlite';
-
-const db = new Database('./dev.db', { create: true });
-db.run(`CREATE TABLE IF NOT EXISTS todos (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  title TEXT NOT NULL,
-  done INTEGER DEFAULT 0
-)`);
-if (db.query('SELECT COUNT(*) AS n FROM todos').get().n === 0) {
-  db.run("INSERT INTO todos (title) VALUES ('Try spark-ssr'), ('Edit pages/index.html'), ('Ship it')");
-  console.log('⚡ seeded dev.db with a few todos');
-}
-db.close();