create-spark-html-app 0.12.0 → 0.13.0

package/bin/index.js

@@ -27,8 +27,6 @@ import { createInterface } from 'node:readline/promises';
 import { stdin, stdout, argv, exit } from 'node:process';
 
 const here = dirname(fileURLToPath(import.meta.url));
-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;
@@ -122,6 +120,24 @@ async function pickType() {
   return (TYPES[Number(a) - 1] || TYPES[0]).key;
 }
 
+// SSR only: with a database (SQLite + auto-CRUD + auth + admin) or without one
+// (a markdown blog on file sources). Flags: --db / --no-db.
+async function pickSsrDb() {
+  const flags = argv.slice(2);
+  if (flags.includes('--no-db')) return false;
+  if (flags.includes('--db')) return true;
+  if (!stdin.isTTY) return true;
+  const a = (await prompt(`${c.accent('?')} Include a database? ${c.dim('(Y/n)')} `, 'y')).toLowerCase();
+  return /^y(es)?$/.test(a);
+}
+
+// Resolve the template directory for a chosen project type.
+function templateDir(type, ssrDb) {
+  if (type === 'client') return resolve(here, '..', 'template');
+  if (type === 'prerender') return resolve(here, '..', 'template-prerender');
+  return resolve(here, '..', ssrDb ? 'template-ssr' : 'template-ssr-nodb');
+}
+
 // ── optional features ──────────────────────────────────────────────────
 // The template ships with EVERYTHING wired; excluded features are stripped
 // out of the copied files via `@spark:<name>` … `@spark:end` marker blocks
@@ -232,11 +248,13 @@ async function main() {
 
   // 3 ─ pick the project type + features, copy the template ────────────
   const type = await pickType();
+  // SSR can ship with or without a database; the choice picks the template.
+  const ssrDb = type === 'ssr' ? await pickSsrDb() : true;
   // The prerender template is the full showcase (router, todos, demos) whose
   // optional pieces are toggled via @spark markers; client and ssr ship fixed.
   const features = type === 'prerender' ? await pickFeatures() : {};
   mkdirSync(targetDir, { recursive: true });
-  cpSync(templateFor(type), targetDir, { recursive: true });
+  cpSync(templateDir(type, ssrDb), targetDir, { recursive: true });
   if (type === 'prerender') applyFeatures(targetDir, features);
 
   // npm renames/strips dotfiles on publish, so the template ships them
@@ -287,7 +305,8 @@ async function main() {
 
   // 5 ─ celebrate + print next steps ───────────────────────────────────
   const rel = relative(process.cwd(), targetDir) || '.';
-  const flavor = type === 'ssr' ? 'SSR — spark-ssr, zero config, no build'
+  const flavor = type === 'ssr'
+    ? (ssrDb ? 'SSR — spark-ssr blog, SQLite + auth, zero config' : 'SSR — spark-ssr, markdown blog, no database')
     : type === 'prerender' ? `prerendered showcase — router, todos, demos + ${FEATURES.filter((f) => features[f.key]).map((f) => f.key).join(', ') || 'core only'}`
     : 'client-only — a single reactive counter to build on';
   stdout.write(`\n${c.green('✔')} Scaffolded ${c.bold(projectName)} in ${c.cyan(rel)} ${c.dim(`(${flavor})`)}\n\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Scaffold a spark-html app — dev/build/preview on Bun",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
     "bin",
     "template",
     "template-ssr",
+    "template-ssr-nodb",
     "template-prerender"
   ],
   "engines": {

package/template-ssr-nodb/README.md

@@ -0,0 +1,32 @@
+# ⚡ Spark Notes — a database-free spark-ssr blog
+
+A server-rendered blog with **no database**. Every post is a markdown file in
+`content/`, read through spark-ssr's file **sources**:
+
+- `posts = ./content/*.md` — a **glob source** (front matter → columns,
+  filename → slug) lists posts on the homepage.
+- `post = ./lib/post.js` — a **module source** reads one post by `:slug` for
+  each `/blog/:slug` page.
+
+No table, no query, no ORM, no build step.
+
+```bash
+bun install
+bun run dev       # dev server with live reload
+bun run build     # dist/ (a single binary) for production
+bun run start     # run the production server
+```
+
+## Add a post
+
+Drop a markdown file in `content/` with `title`, `date`, and `excerpt` front
+matter. The filename is its URL (`content/my-post.md` → `/blog/my-post`).
+
+## Need a database?
+
+Users, comments, orders, admin CRUD, auth, `live` updates — scaffold the SSR
+template **with a database** instead:
+
+```bash
+bun create spark-html-app my-app   # choose SSR, then "with database"
+```

package/template-ssr-nodb/_gitignore

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

package/template-ssr-nodb/components/nav.html

@@ -0,0 +1,11 @@
+<!-- Pure UI — no <script>. `blog` is a prop from the layout; `path` is ambient
+     page scope (the current request path), so the highlight is right on the
+     server render and after client mount alike. -->
+<nav class="nav">
+  <a class="brand" href="/">⚡ {blog}</a>
+  <span class="links">
+    <a href="/" :class="path === '/' ? 'on' : ''">Posts</a>
+    <a href="/about" :class="path === '/about' ? 'on' : ''">About</a>
+    <span import="/components/theme-toggle"></span>
+  </span>
+</nav>

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

@@ -0,0 +1,8 @@
+<!-- Pure UI — receives a whole post row (from the glob source) as one prop:
+     <div import="/components/post-card" post="{post}">. A markdown file's
+     front matter became these columns; the filename became {post.slug}. -->
+<article class="card">
+  <h2><a href="/blog/{post.slug}">{post.title}</a></h2>
+  <p>{post.excerpt}</p>
+  <p class="meta">{post.date}</p>
+</article>

package/template-ssr-nodb/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-nodb/content/hello-spark.md

@@ -0,0 +1,12 @@
+---
+title: Hello, Spark
+date: 2026-07-05
+excerpt: A blog that runs on markdown files — no database, no build step.
+---
+This post is a markdown file at content/hello-spark.md. Its front matter became
+the title, date, and excerpt you see; the text below it is the body.
+
+spark-ssr read the file, rendered this page on the server, and hydrated it in
+the browser — all from the template. Edit this file and save to see it change.
+
+To publish a new post, drop another .md file in content/. That's the whole CMS.

package/template-ssr-nodb/content/no-database.md

@@ -0,0 +1,14 @@
+---
+title: Why no database?
+date: 2026-07-03
+excerpt: Content sites don't need a database. Files are simpler, versioned, and fast.
+---
+A blog, docs site, changelog, or portfolio is just content. Putting it in a
+database means migrations, a running server process, and backups — for text you
+already have in files.
+
+spark-ssr's glob source turns a folder of markdown into rows. Your posts live in
+git, review in pull requests, and deploy as static files that render on the edge.
+
+When you do need a database — users, comments, orders — spark-ssr has that too:
+scaffold the SSR template with a database and declare a table in your template.

package/template-ssr-nodb/content/the-template-is-the-site.md

@@ -0,0 +1,14 @@
+---
+title: The template is the site
+date: 2026-06-28
+excerpt: Filesystem routing, layouts, and sources — the HTML says what it needs.
+---
+pages/index.html is the homepage. pages/blog/[slug].html is every post. pages/
+_layout.html wraps them with the nav and footer, once. The filesystem is the
+router; no config maps URLs to files.
+
+The <spark-ssr> block names the data and where it comes from. Here it is a glob
+of markdown files and a small module — but it could be a SQL table, a URL, or a
+JavaScript function. Same block, different worlds.
+
+No <script> tags for the basics, no server file, no ORM. The template is enough.

package/template-ssr-nodb/lib/post.js

@@ -0,0 +1,23 @@
+// A MODULE source: `post = ./lib/post.js` in blog/[slug].html calls this with
+// the request. It reads a single markdown file by slug and returns one row
+// (front matter → fields, the rest → body), or null when there's no such file
+// — which the page turns into a real 404. No database required.
+import { readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+export default function post(req) {
+  const slug = String(req.params.slug || '').replace(/[^a-z0-9-]/gi, '');
+  const file = join(import.meta.dir, '..', 'content', `${slug}.md`);
+  if (!slug || !existsSync(file)) return null;
+
+  const raw = readFileSync(file, 'utf8');
+  const m = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+  const data = {};
+  if (m) {
+    for (const line of m[1].split('\n')) {
+      const kv = line.match(/^([\w-]+)\s*:\s*(.*)$/);
+      if (kv) data[kv[1]] = kv[2].trim().replace(/^["'](.*)["']$/, '$1');
+    }
+  }
+  return { slug, ...data, body: m ? raw.slice(m[0].length).trim() : raw.trim() };
+}

package/template-ssr-nodb/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "spark-notes",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "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"
+  }
+}

package/template-ssr-nodb/pages/_layout.html

@@ -0,0 +1,14 @@
+<!-- The layout wraps every page. No database here — this whole site runs on
+     markdown files (see content/) read through spark-ssr's glob and module
+     sources. The three shared lines live once; <slot> is the page. -->
+<link rel="stylesheet" href="/style.css">
+<script type="module" src="/app.js"></script>
+
+<div import="/components/nav" blog="Spark Notes" path="{path}"></div>
+
+<slot></slot>
+
+<footer class="foot">
+  Built with <a href="https://github.com/wilkinnovo/spark-html">spark-ssr</a> —
+  no database, just markdown.
+</footer>

package/template-ssr-nodb/pages/about.html

@@ -0,0 +1,18 @@
+<!-- A plain static page — no data block at all. spark-ssr still wraps it in the
+     layout and ships fully-rendered HTML. -->
+<title>About · Spark Notes</title>
+<meta name="description" content="What this database-free spark-ssr starter is.">
+
+<article class="post">
+  <h1>About</h1>
+  <p class="lede">This is a database-free blog built with <code>spark-ssr</code>.</p>
+  <p>Every post is a markdown file in <code>content/</code>. The homepage reads
+     them with a <strong>glob source</strong> (<code>posts = ./content/*.md</code>);
+     each post page reads one with a <strong>module source</strong>
+     (<code>post = ./lib/post.js</code>). There is no database, no table, no query,
+     and no build step — just files and HTML.</p>
+  <p>Add a post by dropping a new <code>.md</code> file in <code>content/</code>
+     with <code>title</code>, <code>date</code>, and <code>excerpt</code> front
+     matter. Need a database later? Scaffold the SSR template with a database.</p>
+  <p><a href="/">← All posts</a></p>
+</article>

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

@@ -0,0 +1,27 @@
+<!-- /blog/:slug — the filename IS the route; :slug binds into the source.
+     `post = ./lib/post.js` is a MODULE source: it returns one row for the slug
+     or null. A missing post is a real 404 (status on the else branch), so
+     crawlers and the browser both get the right answer. -->
+<title>{post ? post.title : 'Not found'} · Spark Notes</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">{post.date}</p>
+    <p class="lede">{post.excerpt}</p>
+    <div class="body">{post.body}</div>
+    <p><a href="/">← All posts</a></p>
+  </article>
+</template>
+<template else status="404">
+  <article class="post">
+    <h1>Not found</h1>
+    <p class="lede">That post doesn't exist.</p>
+    <p><a href="/">← All posts</a></p>
+  </article>
+</template>
+
+<spark-ssr>
+  post = ./lib/post.js
+</spark-ssr>

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

@@ -0,0 +1,27 @@
+<!-- The homepage. `posts = ./content/*.md` is a GLOB source: every markdown
+     file under content/ becomes a row — front matter → columns, filename →
+     slug, body → .body. No database, no table, no query. -->
+<title>Spark Notes — a markdown blog</title>
+<meta name="description" content="A database-free blog powered by spark-ssr and markdown files.">
+
+<header class="hero">
+  <img class="avatar" src="/img/avatar.png" alt="Spark Notes" width="88" height="88">
+  <div>
+    <h1>Spark Notes</h1>
+    <p class="lede">A blog with no database — every post is a markdown file in
+      <code>content/</code>. spark-ssr reads them, renders them, and hydrates.</p>
+  </div>
+</header>
+
+<main>
+  <template each="post in posts">
+    <div import="/components/post-card" post="{post}"></div>
+  </template>
+  <template if="posts.length === 0">
+    <p class="empty">No posts yet — drop a <code>.md</code> file in <code>content/</code>.</p>
+  </template>
+</main>
+
+<spark-ssr>
+  posts = ./content/*.md
+</spark-ssr>

package/template-ssr-nodb/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-nodb/public/style.css

@@ -0,0 +1,175 @@
+/* One stylesheet for the whole blog — the same design system as the Spark
+   showcase: monospace JetBrains Mono type, a gold --spark accent, rounded
+   surfaces. Fonts come from spark.json ("fonts" → spark-html-font injects
+   @font-face + the --font-jetbrains-mono stack); theming is the data-theme
+   attribute spark-html-theme maintains (dark is the default). */
+
+:root {
+  --bg: #000;
+  --surface: #0a0a0a;
+  --surface-2: #101014;
+  --border: #1a1a1a;
+  --border-strong: #333;
+  --text: #fff;
+  --muted: #888;
+  --muted-dim: #555;
+  --spark: #ffd24a;
+  --spark-ink: #ffd24a;
+  --danger: #ff6b6b;
+  --radius: 12px;
+  --font: var(--font-jetbrains-mono, "JetBrains Mono", ui-monospace, monospace);
+}
+
+[data-theme="light"] {
+  --bg: #fff;
+  --surface: #fafafa;
+  --surface-2: #f4f4f5;
+  --border: #ededed;
+  --border-strong: #d4d4d4;
+  --text: #1a1a1a;
+  --muted: #666;
+  --muted-dim: #999;
+  --spark: #ffd24a;
+  --spark-ink: #9a6a00;
+  --danger: #d63b3b;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0 auto;
+  max-width: 720px;
+  padding: 0 1.25rem 4rem;
+  font-family: var(--font);
+  line-height: 1.6;
+  background: var(--bg);
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--spark-ink); text-decoration: none; }
+a:hover { text-decoration: underline; }
+h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; }
+::selection { background: var(--spark); color: #000; }
+[data-theme="light"] ::selection { background: #ffe9a8; color: #111; }
+code {
+  background: var(--surface-2);
+  color: var(--spark-ink);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 0.85em;
+}
+
+/* ── nav ── */
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+.nav .brand {
+  font-weight: 700;
+  color: var(--text);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.nav .links { display: flex; align-items: center; gap: 0.35rem; }
+.nav .links a {
+  color: var(--muted);
+  padding: 0.35rem 0.6rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  transition: color 0.12s, background 0.12s;
+}
+.nav .links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
+.nav .links a.on { color: var(--spark-ink); background: var(--surface-2); 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; font-size: clamp(1.6rem, 5vw, 2.2rem); }
+.avatar { border-radius: 50%; border: 1px solid var(--border-strong); }
+.lede { color: var(--muted); margin: 0; }
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.25rem;
+  margin: 0 0 1rem;
+  transition: border-color 0.12s;
+}
+.card:hover { border-color: var(--border-strong); }
+.card h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
+.card h2 a { color: var(--text); }
+.card h2 a:hover { color: var(--spark-ink); text-decoration: none; }
+.card p { margin: 0 0 0.35rem; color: var(--muted); }
+.meta { color: var(--muted-dim); font-size: 0.8rem; }
+.empty { color: var(--muted); }
+
+/* ── post page ── */
+.post { margin-top: 2rem; }
+.post h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; }
+.post .lede { margin: 0.75rem 0; }
+.post .body { white-space: pre-line; margin-top: 1.5rem; color: var(--text); }
+.pill {
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.1rem 0.55rem;
+  border-radius: 999px;
+  vertical-align: middle;
+}
+.pill.draft { background: var(--spark); color: #000; }
+.pill.live { background: #16a34a; color: #fff; }
+
+/* ── admin ── */
+.admin-head { display: flex; justify-content: space-between; align-items: center; }
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin: 0 0 1.25rem;
+}
+.panel h2 { margin-top: 0; font-size: 1.15rem; }
+.panel h3 { margin: 1.25rem 0 0.5rem; font-size: 0.95rem; color: var(--muted); }
+.row { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
+.grow { flex: 1; }
+.done { text-decoration: line-through; color: var(--muted-dim); }
+.hint { color: var(--muted); font-size: 0.85rem; }
+.error { color: var(--danger); }
+
+/* ── forms & buttons ── */
+input, textarea {
+  font: inherit;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  padding: 0.5rem 0.7rem;
+}
+input:focus, textarea:focus { outline: none; border-color: var(--spark); }
+.login { max-width: 380px; margin: 3rem auto; display: grid; gap: 0.75rem; }
+.login label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
+.panel input, .panel textarea { width: 100%; margin: 0.25rem 0; }
+.row input, .row button { width: auto; margin: 0; }
+
+button {
+  font: inherit;
+  cursor: pointer;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  padding: 0.5rem 0.8rem;
+  transition: border-color 0.12s, color 0.12s, transform 0.08s;
+}
+button:hover:not(:disabled) { border-color: var(--spark); color: var(--spark-ink); }
+button:active:not(:disabled) { transform: scale(0.97); }
+button:disabled { opacity: 0.4; cursor: default; }
+button.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
+button.ghost, button.toggle { border: none; background: none; padding: 0.2rem; }
+button.ghost:hover:not(:disabled), button.toggle:hover:not(:disabled) { color: var(--spark-ink); transform: none; }

package/template-ssr-nodb/spark.json

@@ -0,0 +1,3 @@
+{
+  "fonts": [{ "family": "JetBrains Mono", "google": true, "weights": [400, 500, 700, 800] }]
+}

package/template-ssr/404.html

@@ -1,9 +0,0 @@
-<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>