create-spark-html-app 0.8.3 → 0.10.0

package/README.md

@@ -1,6 +1,6 @@
 # create-spark-html-app
 
-Scaffold a [Spark](https://github.com/wilkinnovo/spark) app in seconds — a
+Scaffold a [Spark](https://github.com/wilkinnovo/spark-html) app in seconds — a
 Bun-powered project (dev / build / preview via `spark-html-bun`) wired to
 `spark-html` with live, reactive **Spark** components.
 
@@ -24,6 +24,24 @@ Run it with no name to be prompted:
 bunx create-spark-html-app@latest
 ```
 
+## Project types — SSR & Prerender
+
+```bash
+bunx create-spark-html-app@latest myapp              # client-only (default)
+bunx create-spark-html-app@latest myapp --ssr        # SSR with spark-ssr
+bunx create-spark-html-app@latest myapp --prerender  # static site with spark-prerender
+```
+
+Without a flag (on a TTY) an interactive picker asks which one you want.
+
+`--ssr` scaffolds the three-tier pattern — **pages** declare data with
+`<spark-ssr>`, **components** are pure UI via `<div import>`, **spark.json**
+holds the DB connection — plus a seeded SQLite dev database. No build step:
+`bun run dev` and it serves.
+
+`--prerender` scaffolds a minimal static site whose build writes
+fully-rendered HTML into `dist/` via `spark-prerender`.
+
 ## What you get
 
 The scaffold comes with the **whole Spark ecosystem pre-wired** — you delete

package/bin/index.js

@@ -27,7 +27,8 @@ import { createInterface } from 'node:readline/promises';
 import { stdin, stdout, argv, exit } from 'node:process';
 
 const here = dirname(fileURLToPath(import.meta.url));
-const templateDir = resolve(here, '..', 'template');
+const templateFor = (type) =>
+  resolve(here, '..', type === 'client' ? 'template' : `template-${type}`);
 
 // ── tiny ANSI palette (no chalk; one less thing to install) ───────────
 const supportsColor = stdout.isTTY && process.env.NO_COLOR === undefined;
@@ -99,6 +100,28 @@ async function prompt(question, fallback) {
   }
 }
 
+// ── project type ────────────────────────────────────────────────────────
+// Client-only (the existing default), SSR (spark-ssr), or a prerendered
+// static site (spark-prerender). Flags: --ssr / --prerender; otherwise an
+// interactive picker on a TTY.
+const TYPES = [
+  { key: 'client', label: 'Client-only (default)' },
+  { key: 'ssr', label: 'SSR (spark-ssr)' },
+  { key: 'prerender', label: 'Prerender (spark-prerender)' },
+];
+
+async function pickType() {
+  const flags = argv.slice(2);
+  if (flags.includes('--ssr')) return 'ssr';
+  if (flags.includes('--prerender')) return 'prerender';
+  if (flags.includes('--client')) return 'client';
+  if (!stdin.isTTY) return 'client';
+  stdout.write(`${c.accent('?')} Project type:\n`);
+  TYPES.forEach((t, i) => stdout.write(`  ${c.dim(String(i + 1) + ')')} ${t.label}\n`));
+  const a = (await prompt(`${c.accent('?')} Pick one ${c.dim('(1)')} `, '1')).trim();
+  return (TYPES[Number(a) - 1] || TYPES[0]).key;
+}
+
 // ── optional features ──────────────────────────────────────────────────
 // The template ships with EVERYTHING wired; excluded features are stripped
 // out of the copied files via `@spark:<name>` … `@spark:end` marker blocks
@@ -185,7 +208,7 @@ async function main() {
   stdout.write(`${c.dim('   HTML that reacts. Built for humans — no compiler, no virtual DOM.')}\n\n`);
 
   // 1 ─ figure out the target directory ────────────────────────────────
-  let targetArg = argv[2];
+  let targetArg = argv.slice(2).find((a) => !a.startsWith('-'));
   if (!targetArg) {
     if (!stdin.isTTY) bail('Please pass a project name: create-spark-html-app <name>');
     targetArg = await prompt(
@@ -207,11 +230,12 @@ async function main() {
     if (!/^y(es)?$/i.test(ok)) bail('Aborted — nothing was written.');
   }
 
-  // 3 ─ pick features, copy the template, strip what's excluded ────────
-  const features = await pickFeatures();
+  // 3 ─ pick the project type + features, copy the template ────────────
+  const type = await pickType();
+  const features = type === 'client' ? await pickFeatures() : {};
   mkdirSync(targetDir, { recursive: true });
-  cpSync(templateDir, targetDir, { recursive: true });
-  applyFeatures(targetDir, features);
+  cpSync(templateFor(type), targetDir, { recursive: true });
+  if (type === 'client') applyFeatures(targetDir, features);
 
   // npm renames/strips dotfiles on publish, so the template ships them
   // with safe underscore prefixes. Restore the real names here.
@@ -229,7 +253,7 @@ async function main() {
   const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
   pkg.name = projectName;
   // Drop dependencies that belong to excluded features.
-  for (const f of FEATURES) {
+  for (const f of type === 'client' ? FEATURES : []) {
     if (features[f.key]) continue;
     for (const dep of f.deps) {
       if (pkg.dependencies) delete pkg.dependencies[dep];
@@ -248,7 +272,8 @@ async function main() {
     const deps = pkg[group];
     if (!deps) continue;
     for (const name of Object.keys(deps)) {
-      if (name !== 'spark-html' && !name.startsWith('spark-html-') && name !== 'spark-prerender') continue;
+      if (name !== 'spark-html' && !name.startsWith('spark-html-')
+        && name !== 'spark-prerender' && name !== 'spark-ssr') continue;
       const range = await latestRange(name);
       if (range) {
         deps[name] = range;
@@ -260,13 +285,16 @@ async function main() {
 
   // 5 ─ celebrate + print next steps ───────────────────────────────────
   const rel = relative(process.cwd(), targetDir) || '.';
-  const picked = FEATURES.filter((f) => features[f.key]).map((f) => f.key).join(', ') || 'core only';
-  stdout.write(`\n${c.green('✔')} Scaffolded ${c.bold(projectName)} in ${c.cyan(rel)} ${c.dim(`(head, persist, prerender, devtools + ${picked})`)}\n\n`);
+  const flavor = type === 'ssr' ? 'SSR — spark-ssr, zero config, no build'
+    : type === 'prerender' ? 'prerendered static site — spark-prerender'
+    : `head, persist, prerender, devtools + ${FEATURES.filter((f) => features[f.key]).map((f) => f.key).join(', ') || 'core only'}`;
+  stdout.write(`\n${c.green('✔')} Scaffolded ${c.bold(projectName)} in ${c.cyan(rel)} ${c.dim(`(${flavor})`)}\n\n`);
   stdout.write(`${c.bold('Next steps:')}\n`);
   if (rel !== '.') stdout.write(`  ${c.dim('1.')} cd ${rel}\n`);
   stdout.write(`  ${c.dim(rel !== '.' ? '2.' : '1.')} bun install\n`);
-  stdout.write(`  ${c.dim(rel !== '.' ? '3.' : '2.')} bun dev\n\n`);
-  stdout.write(`${BOLT} Then open the dev server and edit ${c.cyan('public/components/hero.html')}.\n\n`);
+  stdout.write(`  ${c.dim(rel !== '.' ? '3.' : '2.')} bun run dev\n\n`);
+  const editHint = type === 'ssr' ? 'pages/index.html' : 'public/components/hero.html';
+  stdout.write(`${BOLT} Then open the dev server and edit ${c.cyan(editHint)}.\n\n`);
 }
 
 main().catch((err) => bail(err?.message || String(err)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.8.3",
+  "version": "0.10.0",
   "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {
@@ -8,14 +8,16 @@
   },
   "files": [
     "bin",
-    "template"
+    "template",
+    "template-ssr",
+    "template-prerender"
   ],
   "engines": {
     "node": ">=18"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wilkinnovo/spark.git",
+    "url": "git+https://github.com/wilkinnovo/spark-html.git",
     "directory": "packages/create-spark-html-app"
   },
   "keywords": [

package/template/README.md

@@ -1,6 +1,6 @@
 # ⚡ Spark App
 
-A starter built with [spark-html](https://github.com/wilkinnovo/spark) — single-file
+A starter built with [spark-html](https://github.com/wilkinnovo/spark-html) — single-file
 HTML components with built-in reactivity. No compiler, no virtual DOM, no build step.
 
 The scaffold is a **multi-page SPA** with client-side routing, live demos, and a
@@ -72,5 +72,5 @@ Derive values with `$:`, share state across components with `useStore(name)`, us
 `bind:value` for two-way binds, and pass props as attributes on the `import`
 placeholder.
 
-See the [full docs](https://wilkinnovo.github.io/spark/docs) for the complete
+See the [full docs](https://wilkinnovo.github.io/spark-html/docs) for the complete
 template syntax reference.

package/template/public/components/footer.html

@@ -1,7 +1,7 @@
 <footer class="foot">
   Edit any file in <code>public/components/</code> and save — the page updates
   instantly. Built with
-  <a href="https://github.com/wilkinnovo/spark" target="_blank" rel="noopener">Spark</a>.
+  <a href="https://github.com/wilkinnovo/spark-html" target="_blank" rel="noopener">Spark</a>.
 </footer>
 
 <style>

package/template-prerender/README.md

@@ -0,0 +1,13 @@
+# ⚡ Spark Static App
+
+A prerendered static site built with
+[spark-html](https://github.com/wilkinnovo/spark-html) + `spark-prerender`.
+Components stay single-file HTML; the build writes fully-rendered pages into
+`dist/` (plus sitemap/robots hooks) and the browser hydrates over them.
+
+```bash
+bun install
+bun run dev       # dev server with HMR
+bun run build     # prerendered static output → dist/, deploy anywhere
+bun run preview   # preview the production build
+```

package/template-prerender/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/template-prerender/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Spark Static App</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <div import="components/hero"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template-prerender/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "spark-static-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "spark dev",
+    "build": "spark build",
+    "preview": "spark preview"
+  },
+  "dependencies": {
+    "spark-html": "latest"
+  },
+  "devDependencies": {
+    "spark-html-bun": "latest",
+    "spark-prerender": "latest"
+  }
+}

package/template-prerender/public/components/hero.html

@@ -0,0 +1,14 @@
+<main>
+  <h1>⚡ {greeting}</h1>
+  <p>This page is prerendered at build time — view-source on the deployed
+  site and the content is right there. Edit this component and save.</p>
+  <button onclick={cheer}>Clicked {count} times</button>
+</main>
+
+<script>
+  let greeting = 'HTML that reacts';
+  let count = 0;
+  let pageTitle = 'Spark Static App';
+  let pageDescription = 'A prerendered spark-html starter — SEO-ready static HTML that hydrates into a reactive app.';
+  function cheer() { count++; }
+</script>

package/template-prerender/spark.config.js

@@ -0,0 +1,9 @@
+import prerender from 'spark-prerender/bun';
+
+// Static site, the Spark way: `spark dev` serves components raw with HMR;
+// `spark build` copies public/, bundles the entry, then prerender() runs the
+// REAL app at build time and writes fully-rendered HTML into dist/ — crawlers
+// and AI tools read real content, the browser hydrates over it.
+export default {
+  pipeline: [prerender({ pages: ['index.html'] })],
+};

package/template-prerender/src/main.js

@@ -0,0 +1,2 @@
+import { mount } from 'spark-html';
+mount();

package/template-prerender/src/style.css

@@ -0,0 +1,3 @@
+body { font-family: system-ui, sans-serif; max-width: 36rem; margin: 4rem auto; padding: 0 1.5rem; }
+main { text-align: center; }
+button { padding: 0.5rem 1rem; cursor: pointer; }

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

@@ -0,0 +1,61 @@
+# ⚡ Spark Blog — a full app on spark-ssr
+
+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 private todo list. All of it is a handful of `.html` files, one SQLite
+database, and **zero build steps**.
+
+## Run it
+
+```bash
+bun install
+bun run dev     # seeds dev.db, serves on :3000, live-reloads on every edit
+```
+
+Sign in at [/admin](http://localhost:3000/admin) with
+**me@spark-html.com** / **spark**.
+
+## What's demonstrated where
+
+| Feature | Where |
+|---|---|
+| Filesystem routing | `pages/index.html` → `/`, `pages/about.html` → `/about` |
+| Dynamic routes | `pages/blog/[slug].html` → `/blog/:slug` — `:slug` binds into the SQL |
+| Per-page `<title>`/`<meta>` | literal tags at the top of each page, `{expr}`-interpolated (spark-html-head/ssr) |
+| Declarative data | `<spark-ssr>` blocks — the query names feed the template variables |
+| Server → component props | `index.html` passes each whole `post` row into `post-card.html` |
+| Pure-UI components | `nav.html`, `post-card.html` — no `<script>`, props are the scope |
+| Client components | `login-form`, `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}` |
+| Custom error page | `404.html` |
+| 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>` (preload, no-shift fallback) |
+| Images | `bun run build` runs spark-html-image over `dist/` — webp + srcset for every `<img>` |
+
+## The mental model
+
+- 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. A `table="…"` gives you scoped REST CRUD;
+  a `GET /api/x → SELECT …` line is both an endpoint and page data.
+- Everything hot-reloads — pages, components, queries, middleware — no
+  restart, the browser refreshes itself.
+
+## Deploy
+
+```bash
+bun run build   # dist/ + compiled binary; images optimized if sharp installs
+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/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+dev.db
+uploads

package/template-ssr/components/login-form.html

@@ -0,0 +1,38 @@
+<!-- A component <script> runs in the BROWSER (pages' plain <script> runs on
+     the server — that's the split). POST /api/users?auth is the login
+     endpoint spark-ssr derives from the auth config. -->
+<form class="panel login" onsubmit={login}>
+  <h2>Author sign-in</h2>
+  <label>Email
+    <input type="email" bind:value="email" autocomplete="username" required>
+  </label>
+  <label>Password
+    <input type="password" bind:value="password" autocomplete="current-password" required>
+  </label>
+  <button :disabled="pending">{pending ? 'Signing in…' : 'Sign in'}</button>
+  <template if="error"><p class="error">{error}</p></template>
+  <p class="hint">Seeded account: me@spark-html.com / spark</p>
+</form>
+
+<script>
+  let email = '';
+  let password = '';
+  let error = '';
+  let pending = false;
+
+  async function login() {
+    pending = true;
+    error = '';
+    const res = await fetch('/api/users?auth', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+    if (res.ok) {
+      location.reload();
+    } else {
+      error = 'Wrong email or password.';
+      pending = false;
+    }
+  }
+</script>

package/template-ssr/components/logout-button.html

@@ -0,0 +1,8 @@
+<button class="ghost" onclick={logout}>Sign out</button>
+
+<script>
+  async function logout() {
+    await fetch('/api/logout', { method: 'POST' });
+    location.href = '/';
+  }
+</script>

package/template-ssr/components/nav.html

@@ -0,0 +1,11 @@
+<!-- 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,51 @@
+<!-- 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). -->
+<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();
+</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

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

package/template-ssr/pages/about.html

@@ -0,0 +1,22 @@
+<!-- /about — profile straight from the users table, plus an 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}">
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="{author.name}" active="about"></div>
+
+<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>
+  GET /api/author → SELECT id, name, email, bio FROM users LIMIT 1
+  GET /api/stats → SELECT COUNT(*) AS n FROM posts WHERE published = 1
+</spark-ssr>

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

@@ -0,0 +1,30 @@
+<!-- /admin — the author's private side. `session` is always in page scope:
+     signed out you get the login form, signed in the management panels.
+     The two table declarations give the components their scoped REST APIs
+     (posts + todos both carry user_id → session-scoped, 401 for anyone else). -->
+<title>Manage · {author.name}</title>
+<meta name="robots" content="noindex">
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="{author.name}" active="admin"></div>
+
+<template if="session">
+  <main class="admin">
+    <header class="admin-head">
+      <p>Signed in as <strong>{session.email}</strong></p>
+      <div import="/components/logout-button"></div>
+    </header>
+    <div import="/components/post-editor"></div>
+    <div import="/components/todo-list"></div>
+  </main>
+</template>
+<template else>
+  <div import="/components/login-form"></div>
+</template>
+
+<spark-ssr table="posts" />
+<spark-ssr table="todos" />
+<spark-ssr>
+  GET /api/author → SELECT id, name, email, bio FROM users LIMIT 1
+</spark-ssr>

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

@@ -0,0 +1,35 @@
+<!-- /blog/:slug — the filename IS the route; :slug binds into the query.
+     Drafts stay invisible to anonymous readers, but 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.'}">
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="{author.name}"></div>
+
+<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>
+  <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>
+  GET /api/author → SELECT id, name, email, bio FROM users LIMIT 1
+  GET /api/blog/[slug] → 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

@@ -0,0 +1,33 @@
+<!-- The homepage. Everything the page needs is declared at the bottom in
+     <spark-ssr>; the title/meta lift into <head> (spark-html-head/ssr);
+     app.js is a client module (theme toggle). -->
+<title>{author.name} — a spark blog</title>
+<meta name="description" content="{author.bio}">
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="{author.name}" active="home"></div>
+
+<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>
+
+<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>
+  GET /api/author → SELECT id, name, email, bio FROM users LIMIT 1
+  GET /api/published → SELECT * FROM posts WHERE published = 1 ORDER BY created_at DESC
+</spark-ssr>

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/setup.js

@@ -0,0 +1,76 @@
+// 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 users (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  email TEXT NOT NULL UNIQUE,
+  password TEXT NOT NULL,
+  name TEXT NOT NULL,
+  bio TEXT DEFAULT ''
+)`);
+
+db.run(`CREATE TABLE IF NOT EXISTS posts (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL,
+  slug TEXT NOT NULL UNIQUE,
+  title TEXT NOT NULL,
+  excerpt TEXT DEFAULT '',
+  body TEXT DEFAULT '',
+  published INTEGER DEFAULT 0,
+  created_at TEXT DEFAULT (date('now'))
+)`);
+
+db.run(`CREATE TABLE IF NOT EXISTS todos (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL,
+  title TEXT NOT NULL,
+  done INTEGER DEFAULT 0
+)`);
+
+if (db.query('SELECT COUNT(*) AS n FROM users').get().n === 0) {
+  // The author account — sign in at /admin to manage the blog.
+  const hash = await Bun.password.hash('spark');
+  db.run('INSERT INTO users (email, password, name, bio) VALUES (?, ?, ?, ?)', [
+    'me@spark-html.com',
+    hash,
+    'Ada Spark',
+    'I write HTML that reacts. No compiler, no virtual DOM, no build step — just the platform, with a spark.',
+  ]);
+
+  const posts = [
+    ['hello-spark', 'Hello, Spark',
+      'Why this blog runs on HTML that infers its own backend.',
+      '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.\n\nView source on any page — what you see is what I wrote.',
+      1, '2026-06-21'],
+    ['html-that-reacts', 'HTML that reacts',
+      'Templates, loops and conditionals — in plain HTML attributes.',
+      '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.',
+      1, '2026-06-27'],
+    ['zero-config-ssr', 'Zero-config SSR',
+      'Filesystem routing, sessions, uploads and CRUD — from the template.',
+      'pages/blog/[slug].html serves /blog/:slug, and :slug binds straight into the page query.\n\nDeclare <spark-ssr table="todos"> and the REST endpoints exist. Add a user_id column and they are scoped to the signed-in user. Delete the file and it all goes away.',
+      1, '2026-07-02'],
+    ['drafts-are-private', 'Drafts are private',
+      'This post is unpublished — only the signed-in author sees it.',
+      'The page query keeps drafts out of anonymous requests:\n\nWHERE slug = :slug AND (published = 1 OR :session.id IS NOT NULL)\n\nSign in at /admin and this post appears on the homepage preview and here. Publish it from the admin panel when it is ready.',
+      0, '2026-07-04'],
+  ];
+  for (const [slug, title, excerpt, body, published, at] of posts) {
+    db.run(
+      'INSERT INTO posts (user_id, slug, title, excerpt, body, published, created_at) VALUES (1, ?, ?, ?, ?, ?, ?)',
+      [slug, title, excerpt, body, published, at],
+    );
+  }
+
+  db.run(`INSERT INTO todos (user_id, title, done) VALUES
+    (1, 'Finish the drafts post', 1),
+    (1, 'Write about companion packages', 0),
+    (1, 'Reply to reader mail', 0)`);
+
+  console.log('⚡ seeded dev.db — sign in at /admin with me@spark-html.com / spark');
+}
+
+db.close();

package/template-ssr/spark.json

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