create-spark-html-app 0.11.0 → 0.12.0

package/template-ssr/public/style.css

@@ -1,42 +1,64 @@
-/* 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. */
+/* 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: #fdfcf9;
-  --panel: #ffffff;
-  --text: #1c1917;
-  --muted: #78716c;
-  --line: #e7e5e4;
-  --accent: #b45309;
-  --spark: #f59e0b;
+  --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="dark"] {
-  --bg: #131110;
-  --panel: #1c1917;
-  --text: #e7e5e4;
-  --muted: #a8a29e;
-  --line: #292524;
-  --accent: #fbbf24;
-  --spark: #f59e0b;
+[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;
 }
 
-* { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: border-box; }
 
 body {
   margin: 0 auto;
-  max-width: 680px;
+  max-width: 720px;
   padding: 0 1.25rem 4rem;
-  font-family: var(--font-inter, system-ui, sans-serif);
+  font-family: var(--font);
   line-height: 1.6;
   background: var(--bg);
   color: var(--text);
+  -webkit-font-smoothing: antialiased;
 }
 
-a { color: var(--accent); text-decoration: none; }
+a { color: var(--spark-ink); text-decoration: none; }
 a:hover { text-decoration: underline; }
-h1, h2, h3 { line-height: 1.2; }
+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 {
@@ -44,73 +66,110 @@ h1, h2, h3 { line-height: 1.2; }
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  padding: 1.25rem 0;
+  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 .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; }
+.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; }
-.avatar { border-radius: 50%; }
+.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(--panel);
-  border: 1px solid var(--line);
-  border-radius: 10px;
+  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 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; }
+.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 .body { white-space: pre-line; margin-top: 1.5rem; }
+.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.72rem;
+  font-size: 0.7rem;
   font-weight: 700;
-  padding: 0.1rem 0.5rem;
+  padding: 0.1rem 0.55rem;
   border-radius: 999px;
   vertical-align: middle;
 }
-.pill.draft { background: var(--spark); color: #1c1917; }
+.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(--panel);
-  border: 1px solid var(--line);
-  border-radius: 10px;
+  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; }
+.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); }
+.done { text-decoration: line-through; color: var(--muted-dim); }
 .hint { color: var(--muted); font-size: 0.85rem; }
-.error { color: #dc2626; }
+.error { color: var(--danger); }
 
-input, textarea, button {
+/* ── forms & buttons ── */
+input, textarea {
   font: inherit;
-  color: inherit;
+  color: var(--text);
   background: var(--bg);
-  border: 1px solid var(--line);
+  border: 1px solid var(--border-strong);
   border-radius: 8px;
-  padding: 0.45rem 0.7rem;
+  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; }
+.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 { 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 {
+  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/spark.json

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

package/template/spark.config.js

@@ -1,72 +0,0 @@
-import prerender from 'spark-prerender/bun';
-// @spark:theme
-import theme from 'spark-html-theme/bun';
-// @spark:end
-// @spark:font
-import font from 'spark-html-font/bun';
-// @spark:end
-// @spark:image
-import image from 'spark-html-image/bun';
-// @spark:end
-// @spark:pwa
-import manifest from 'spark-html-manifest/bun';
-// @spark:end
-// @spark:sri
-import sri from 'spark-html-sri/bun';
-// @spark:end
-
-// Spark needs no build step — spark-html-bun is just a fast dev server and a
-// bundler for your app shell. `spark dev` serves component fragments raw and
-// hot-reloads only the edited component; components live in public/ so they
-// ship verbatim to the production build too.
-//
-// The `pipeline` runs in order after `spark build` copies public/ and bundles
-// the entry. Order matters: prerender() first (it writes one HTML file per
-// route), then the steps that rewrite those pages — sri() must be last so it
-// hashes the final bytes.
-//
-// `prerender()` makes `bun run build` SEO-friendly: it runs your app at build
-// time and writes fully-rendered HTML into dist/ (crawlers and AI tools read
-// real content; the browser still hydrates over it), plus sitemap.xml +
-// robots.txt. Remove it if you don't need SEO.
-export default {
-  pipeline: [
-    prerender({ pages: ['index.html'] }),
-    // @spark:theme
-    // Bakes the tiny no-flash script into each page (dev too) so the saved /
-    // OS theme is on <html> before first paint — no wrong-theme flash on load.
-    theme(),
-    // @spark:end
-    // @spark:font
-    // Preconnect + the Google stylesheet + a size-adjusted local fallback
-    // face, baked into each page (dev too) — the font swap never moves or
-    // visibly reflows the page.
-    font({
-      fallback: ['ui-monospace', 'monospace'],
-      fonts: [{ family: 'JetBrains Mono', google: true, weights: [300, 400, 500, 600, 700, 800] }],
-    }),
-    // @spark:end
-    // @spark:image
-    // Every <img> in pages and components: converted to webp/avif at multiple
-    // widths, srcset + width/height added (no layout shift), loading="lazy".
-    // Zero config.
-    image(),
-    // @spark:end
-    // @spark:pwa
-    // One config → manifest.webmanifest + resized icons + <head> tags + an
-    // offline app-shell service worker (registered automatically).
-    manifest({
-      name: 'Spark App',
-      themeColor: '#ffd24a',
-      icon: 'public/icon.png',
-      offline: true,
-    }),
-    // @spark:end
-    // @spark:sri
-    // Hashes every built asset + component, stamps integrity/crossorigin onto
-    // script/link tags, and bakes the verify manifest into each page. Keep it
-    // LAST so it sees the final pages.
-    sri(),
-    // @spark:end
-  ],
-};

package/template-prerender/src/style.css

@@ -1,3 +0,0 @@
-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; }