getfilepress 0.1.9 → 0.1.10

package/README.md

@@ -96,6 +96,7 @@ export default defineFilepressConfig({
     { label: 'RSS', href: '/rss.xml' },
     { label: 'GitHub', href: 'https://github.com/acme/site', icon: 'github' }
   ],
+  theme: 'essay', // or 'ink' | 'folio'; site theme.css still wins last
   newsletter: {
     url: 'https://buttondown.email/me',
     blurb: 'Occasional notes.',
@@ -124,8 +125,9 @@ paths: [
 
 ## Theming
 
-The engine ships a default Essay look. To restyle a site, add `theme.css` next to
-`filepress.config.ts`. It loads after the default theme, so you can override CSS
+The engine ships a default Essay look, plus two token presets (`ink`, `folio`)
+via config `theme`. To restyle a site, add `theme.css` next to
+`filepress.config.ts`. It loads last, so you can override CSS
 variables and structural classes without forking the app.
 
 In local `filepress dev` / `pnpm dev`, **Genie Mode** (floating FAB) is a design cockpit:
@@ -147,7 +149,14 @@ Token and class reference: [`docs/THEME.md`](docs/THEME.md).
 
 ## Writing a post
 
-Add a file under the site's `posts/` directory:
+From the site root (or with `--site` / `--root` in this monorepo):
+
+```bash
+filepress new "My Post"
+filepress new "My Post" --draft
+```
+
+That writes `posts/YYYY-MM-DD-my-post.md`. Or add a file by hand:
 
 ```markdown
 ---
@@ -174,7 +183,7 @@ Body content in **Markdown**.
 | `draft` | no | Hidden from production listings/feeds/sitemap; still builds at its URL. Listed with a Draft label under `pnpm dev` (localhost). |
 | `updated` | no | Shown when different from `date`. |
 
-**Images:** put files in `static/images/posts/<slug>/` and reference them as `/images/posts/<slug>/photo.jpg`.
+**Images:** put files in `static/images/posts/<slug>/` and reference them as `/images/posts/<slug>/photo.jpg`. The demo site’s [Images in posts](sites/demo/posts/images-in-posts.md) post is a worked example.
 
 **Captions:** an image alone on a line becomes a `<figure>`; the title attribute is the caption:
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "getfilepress",
-	"version": "0.1.9",
+	"version": "0.1.10",
 	"private": false,
 	"type": "module",
 	"description": "FilePress — file-based Markdown blog engine. Link this package from a content-only site (config + posts), then run `filepress build`.",
@@ -34,6 +34,8 @@
 	},
 	"files": [
 		"scripts/filepress.mjs",
+		"scripts/new-post.ts",
+		"scripts/preview.mjs",
 		"scripts/copy-path-mounts.mjs",
 		"scripts/create-site.mjs",
 		"scripts/ensure-lease.mjs",
@@ -49,7 +51,7 @@
 	"scripts": {
 		"postinstall": "node scripts/postinstall.mjs",
 		"filepress": "node scripts/filepress.mjs",
-		"test": "pnpm --filter @filepress/core test && pnpm --filter @filepress/import test && pnpm --filter @filepress/app test && tsx --test scripts/sync-sibling-sites.test.ts",
+		"test": "pnpm --filter @filepress/core test && pnpm --filter @filepress/import test && pnpm --filter @filepress/app test && tsx --test scripts/sync-sibling-sites.test.ts scripts/new-post.test.ts scripts/preview.test.ts",
 		"check": "pnpm filepress check --site demo",
 		"build": "pnpm filepress build --site demo",
 		"build:demo": "pnpm filepress build --site demo",
@@ -57,6 +59,7 @@
 		"ship": "pnpm build:www && wrangler pages deploy sites/getfilepress/build --project-name getfilepress",
 		"deploy:www": "pnpm ship",
 		"dev": "node scripts/ensure-lease.mjs demo 5179 && pnpm filepress dev --site demo --host 0.0.0.0",
+		"serve": "node scripts/ensure-lease.mjs demo 5179 && pnpm filepress dev --site demo --host 0.0.0.0",
 		"dev:demo": "node scripts/ensure-lease.mjs demo 5179 && pnpm filepress dev --site demo --host 0.0.0.0",
 		"dev:www": "node scripts/ensure-lease.mjs getfilepress 5180 && pnpm filepress dev --site getfilepress --host 0.0.0.0",
 		"create-site": "node scripts/create-site.mjs",
@@ -79,7 +82,7 @@
 		"gray-matter": "^4.0.3",
 		"highlight.js": "^11.11.1",
 		"linkedom": "^0.18.12",
-		"ollanet": "^0.4.0",
+		"ollanet": "^0.6.6",
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-highlight": "^7.0.2",
 		"rehype-raw": "^7.0.0",

package/packages/app/src/lib/genie/GeniePanel.svelte

@@ -66,6 +66,33 @@
 	let cfgLede = $state('');
 	let cfgTagline = $state('');
 	let cfgLogo = $state('');
+	let renamingId = $state<string | null>(null);
+	let renameDraft = $state('');
+	let jobNote = $state('');
+	let jobSecs = $state(0);
+	let jobTimer: ReturnType<typeof setInterval> | null = null;
+
+	function formatWait(secs: number): string {
+		const m = Math.floor(secs / 60);
+		const r = secs % 60;
+		return m ? `${m}m ${String(r).padStart(2, '0')}s` : `${r}s`;
+	}
+
+	function beginJob(note: string) {
+		jobNote = note;
+		jobSecs = 0;
+		if (jobTimer) clearInterval(jobTimer);
+		jobTimer = setInterval(() => {
+			jobSecs += 1;
+		}, 1000);
+	}
+
+	function endJob() {
+		if (jobTimer) clearInterval(jobTimer);
+		jobTimer = null;
+		jobNote = '';
+		jobSecs = 0;
+	}
 
 	async function api(path: string, init?: RequestInit) {
 		const res = await fetch(`/__filepress/genie${path}`, {
@@ -129,6 +156,89 @@
 		}
 	}
 
+	function versionWhen(v: VersionRow) {
+		if (v.id === 'baseline') return 'pre-Genie snapshot';
+		const d = new Date(v.createdAt);
+		if (Number.isNaN(d.getTime())) return v.createdAt;
+		return d.toLocaleString(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function startRename(v: VersionRow) {
+		renamingId = v.id;
+		renameDraft = v.label;
+	}
+
+	async function toggleStar(v: VersionRow) {
+		if (v.id === 'baseline') return;
+		loading = true;
+		error = '';
+		try {
+			await api('/star', {
+				method: 'POST',
+				body: JSON.stringify({ versionId: v.id, starred: !v.starred })
+			});
+			await refresh();
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			loading = false;
+		}
+	}
+
+	async function saveLabel(v: VersionRow) {
+		const label = renameDraft.trim();
+		if (!label || label === v.label) {
+			renamingId = null;
+			return;
+		}
+		loading = true;
+		error = '';
+		try {
+			await api('/label', { method: 'POST', body: JSON.stringify({ versionId: v.id, label }) });
+			renamingId = null;
+			await refresh();
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			loading = false;
+		}
+	}
+
+	async function duplicate(v: VersionRow) {
+		loading = true;
+		error = '';
+		try {
+			await api('/duplicate', { method: 'POST', body: JSON.stringify({ versionId: v.id }) });
+			await refresh();
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			loading = false;
+		}
+	}
+
+	async function removeVersion(v: VersionRow) {
+		if (v.id === 'baseline') return;
+		if (
+			!confirm(
+				`Delete “${v.label}”? This only removes the snapshot under .filepress-genie/. The working tree stays as it is.`
+			)
+		) {
+			return;
+		}
+		loading = true;
+		error = '';
+		try {
+			await api('/delete', { method: 'POST', body: JSON.stringify({ versionId: v.id }) });
+			await refresh();
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			loading = false;
+		}
+	}
+
 	async function applyStock() {
 		loading = true;
 		error = '';
@@ -253,6 +363,11 @@
 	async function runInspire() {
 		loading = true;
 		error = '';
+		beginJob(
+			useLlm
+				? `Inspire + ${selectedModel || 'Ollama'} — first load of a 12B model can take several minutes`
+				: 'Crawling inspiration URLs'
+		);
 		try {
 			await api('/inspire', {
 				method: 'POST',
@@ -270,12 +385,17 @@
 		} catch (e) {
 			error = e instanceof Error ? e.message : String(e);
 			loading = false;
+		} finally {
+			endJob();
 		}
 	}
 
 	async function runRefine() {
 		loading = true;
 		error = '';
+		beginJob(
+			`Asking ${selectedModel || 'Ollama'} — first load of a 12B model can take several minutes`
+		);
 		try {
 			await api('/refine', {
 				method: 'POST',
@@ -289,6 +409,8 @@
 		} catch (e) {
 			error = e instanceof Error ? e.message : String(e);
 			loading = false;
+		} finally {
+			endJob();
 		}
 	}
 
@@ -324,12 +446,18 @@
 				<strong>Genie</strong>
 				<p class="genie-tagline">Try a look → activate → commit baked files</p>
 			</div>
-			<button type="button" class="genie-x" onclick={() => (open = false)}>Close</button>
+			<button type="button" class="genie-x" onclick={() => { open = false; endJob(); }}>Close</button>
 		</header>
 
 		{#if error}
 			<p class="genie-err">{error}</p>
 		{/if}
+		{#if jobNote}
+			<p class="genie-progress" aria-live="polite">
+				{jobNote} · {formatWait(jobSecs)} elapsed. Watch the <code>filepress dev</code> terminal for
+				“still generating…”.
+			</p>
+		{/if}
 
 		{#if health}
 			<div class="genie-shell">
@@ -423,10 +551,13 @@
 								disabled={loading || scanning || !hostIsReady() || !refinePrompt.trim()}
 								onclick={runRefine}
 							>
-								{loading ? 'Working…' : 'Refine & activate'}
+								{loading ? `Asking Ollama… ${formatWait(jobSecs)}` : 'Refine & activate'}
 							</button>
 							<p class="genie-muted">
-								Tip: set <code>FILEPRESS_OLLAMA_MODEL</code> / <code>OLLAMA_HOST</code> for defaults;
+								<code>gemma4:12b</code> often spends the first few minutes loading into VRAM — that is
+								normal. Progress prints in the filepress terminal every 15s. Raise the budget with
+								<code>FILEPRESS_OLLAMA_TIMEOUT_MS</code> (default 10 minutes). Tip: set
+								<code>FILEPRESS_OLLAMA_MODEL</code> / <code>OLLAMA_HOST</code> for defaults;
 								<a href="https://ollanet.dev" target="_blank" rel="noreferrer">ollanet</a> finds other
 								boxes. Finetuna can tune a named variant.
 							</p>
@@ -605,25 +736,82 @@
 							<h3>Versions</h3>
 							<p class="genie-howto">
 								Every Genie action saves a snapshot under <code>.filepress-genie/</code> (gitignored).
-								Activate to bake into the working tree; commit when you like it. <code>baseline</code> is
-								the pre-Genie look.
+								Star keepers, rename, duplicate, then activate to bake into the working tree.
+								<code>baseline</code> is the pre-Genie look and cannot be deleted.
 							</p>
 							<p class="genie-muted">
 								Active: {health.active?.versionId ?? '(none)'}
+								{#if health.versions.length}
+									· {health.versions.length} saved
+								{/if}
 							</p>
 							<ul class="genie-versions">
 								{#each health.versions as v (v.id)}
-									<li class:active={health.active?.versionId === v.id}>
-										<button
-											type="button"
-											disabled={loading || health.active?.versionId === v.id}
-											onclick={() => activate(v.id)}
-										>
-											{v.label}
-										</button>
-										<span class="genie-muted"
-											>{v.id === 'baseline' ? 'baseline' : v.createdAt.slice(11, 19)}</span
-										>
+									{@const isActive = health.active?.versionId === v.id}
+									<li class:active={isActive} class:starred={v.starred}>
+										<div class="genie-ver-head">
+											<button
+												type="button"
+												class="genie-star"
+												class:on={v.starred}
+												disabled={loading || v.id === 'baseline'}
+												aria-pressed={v.starred}
+												aria-label={v.starred ? 'Unstar version' : 'Star version'}
+												onclick={() => toggleStar(v)}
+											>
+												{v.starred ? '★' : '☆'}
+											</button>
+											{#if renamingId === v.id}
+												<input
+													class="genie-rename"
+													type="text"
+													bind:value={renameDraft}
+													disabled={loading}
+													aria-label="Version label"
+													onkeydown={(e) => {
+														if (e.key === 'Enter') void saveLabel(v);
+														if (e.key === 'Escape') renamingId = null;
+													}}
+												/>
+											{:else}
+												<strong>{v.label}</strong>
+											{/if}
+											{#if isActive}
+												<span class="genie-ver-badge">Active</span>
+											{/if}
+										</div>
+										<p class="genie-ver-when">{versionWhen(v)}</p>
+										<div class="genie-ver-actions">
+											{#if renamingId === v.id}
+												<button type="button" disabled={loading} onclick={() => saveLabel(v)}>
+													Save name
+												</button>
+												<button type="button" disabled={loading} onclick={() => (renamingId = null)}>
+													Cancel
+												</button>
+											{:else}
+												<button
+													type="button"
+													disabled={loading || isActive}
+													onclick={() => activate(v.id)}
+												>
+													Activate
+												</button>
+												<button type="button" disabled={loading} onclick={() => startRename(v)}>
+													Rename
+												</button>
+												<button type="button" disabled={loading} onclick={() => duplicate(v)}>
+													Duplicate
+												</button>
+												<button
+													type="button"
+													disabled={loading || v.id === 'baseline' || isActive}
+													onclick={() => removeVersion(v)}
+												>
+													Delete
+												</button>
+											{/if}
+										</div>
 									</li>
 								{/each}
 							</ul>
@@ -816,6 +1004,16 @@
 		flex-shrink: 0;
 	}
 
+	.genie-progress {
+		margin: 0 0.25rem 0.65rem;
+		padding: 0.5rem 0.65rem;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--accent, #f0c040) 40%, var(--rule, #444));
+		font-size: 0.82rem;
+		color: var(--ink-soft, #ccc);
+		flex-shrink: 0;
+	}
+
 	.genie-row {
 		display: grid;
 		gap: 0.35rem;
@@ -898,19 +1096,86 @@
 		margin: 0.5rem 0;
 		padding: 0;
 		display: grid;
-		gap: 0.35rem;
+		gap: 0.55rem;
 	}
 
 	.genie-versions li {
+		display: grid;
+		gap: 0.3rem;
+		padding: 0.5rem 0.55rem;
+		border: 1px solid var(--rule, #444);
+		border-radius: 8px;
+	}
+
+	.genie-versions li.active {
+		border-color: color-mix(in srgb, var(--accent, #f0c040) 55%, var(--rule, #444));
+	}
+
+	.genie-ver-head {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
+		gap: 0.4rem;
+		min-width: 0;
 	}
 
-	.genie-versions li.active button {
-		border-color: var(--accent, #f0c040);
+	.genie-ver-head strong {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.84rem;
+	}
+
+	.genie-star {
+		flex: 0 0 auto;
+		width: 1.7rem;
+		padding: 0.15rem 0;
+		border: 1px solid transparent;
+		background: none;
+		color: var(--ink-soft, #999);
+		font-size: 0.95rem;
+		line-height: 1;
+	}
+
+	.genie-star.on {
+		color: var(--accent, #f0c040);
+	}
+
+	.genie-ver-badge {
+		flex: 0 0 auto;
+		font-size: 0.62rem;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
 		color: var(--accent, #f0c040);
+		border: 1px solid color-mix(in srgb, var(--accent, #f0c040) 45%, var(--rule, #444));
+		border-radius: 999px;
+		padding: 0.08rem 0.4rem;
+	}
+
+	.genie-rename {
+		flex: 1 1 auto;
+		min-width: 0;
+		box-sizing: border-box;
+		font: inherit;
+		font-size: 0.82rem;
+	}
+
+	.genie-ver-when {
+		margin: 0;
+		font-size: 0.72rem;
+		color: var(--ink-soft, #999);
+	}
+
+	.genie-ver-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+	}
+
+	.genie-ver-actions button {
+		padding: 0.28rem 0.5rem;
+		font-size: 0.72rem;
 	}
 
 	.genie-linkish {

package/packages/app/src/lib/genie/ops.ts

@@ -313,6 +313,7 @@ function stubSiteIr(siteRoot: string): SiteIR {
 		nav: [],
 		topics: [],
 		lede: null,
+		homeMarkdown: null,
 		notes: [],
 		assets: []
 	};
@@ -405,13 +406,17 @@ export async function refineWithOllama(
 	}
 
 	const seed = loadWorkingBrief(siteRoot);
+	const logLabel = `filepress genie: refine ${model} @ ${host}`;
+	console.log(`${logLabel}: prompt “${prompt.slice(0, 80)}${prompt.length > 80 ? '…' : ''}”`);
 	const brief = await generateDesignBrief({
 		host,
 		model,
 		ir: stubSiteIr(siteRoot),
 		inspireSummaries: [`Author steer: ${prompt}`],
 		inspireSignals: [],
-		seed
+		seed,
+		strictParse: true,
+		logLabel
 	});
 	const themeCss = themeCssFromBrief(brief);
 	const meta = writeSnapshot(siteRoot, {
@@ -423,6 +428,7 @@ export async function refineWithOllama(
 		llm: { used: true, model, host },
 		steers: [{ type: 'refine', prompt }]
 	});
+	console.log(`${logLabel}: wrote ${meta.id}`);
 	const active =
 		opts.activate !== false ? activateVersion(siteRoot, meta.id) : getActive(siteRoot);
 	return { meta, active, brief, llm: { used: true, model, host } };

package/packages/app/src/lib/genie/store.ts

@@ -1,5 +1,6 @@
 import {
 	copyFileSync,
+	cpSync,
 	existsSync,
 	mkdirSync,
 	readFileSync,
@@ -62,7 +63,10 @@ export function listVersions(siteRoot: string): GenieVersionMeta[] {
 		const meta = readJson<GenieVersionMeta | null>(join(dir, id, 'meta.json'), null);
 		if (meta) out.push(meta);
 	}
-	return out.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+	return out.sort((a, b) => {
+		if (a.starred !== b.starred) return a.starred ? -1 : 1;
+		return b.createdAt.localeCompare(a.createdAt);
+	});
 }
 
 export function readVersionBrief(siteRoot: string, id: string): DesignBrief | null {
@@ -161,6 +165,55 @@ export function activateVersion(siteRoot: string, versionId: string): GenieActiv
 	return active;
 }
 
+export function readVersionMeta(siteRoot: string, versionId: string): GenieVersionMeta {
+	const meta = readJson<GenieVersionMeta | null>(join(versionPath(siteRoot, versionId), 'meta.json'), null);
+	if (!meta) throw new Error(`Unknown Genie version: ${versionId}`);
+	return meta;
+}
+
+export function updateVersionMeta(
+	siteRoot: string,
+	versionId: string,
+	patch: { label?: string; starred?: boolean }
+): GenieVersionMeta {
+	const meta = readVersionMeta(siteRoot, versionId);
+	if (typeof patch.label === 'string') {
+		const label = patch.label.trim();
+		if (!label) throw new Error('label cannot be empty');
+		meta.label = label.slice(0, 80);
+	}
+	if (typeof patch.starred === 'boolean') {
+		if (versionId === 'baseline' && patch.starred === false) {
+			throw new Error('Cannot unstar the baseline version');
+		}
+		meta.starred = patch.starred;
+	}
+	writeJson(join(versionPath(siteRoot, versionId), 'meta.json'), meta);
+	return meta;
+}
+
+/** Copy a snapshot folder to a new id. Does not activate. */
+export function duplicateVersion(siteRoot: string, sourceId: string, label?: string): GenieVersionMeta {
+	const src = versionPath(siteRoot, sourceId);
+	if (!existsSync(join(src, 'theme.css'))) {
+		throw new Error(`Unknown Genie version: ${sourceId}`);
+	}
+	const source = readVersionMeta(siteRoot, sourceId);
+	const id = newVersionId();
+	const dest = versionPath(siteRoot, id);
+	cpSync(src, dest, { recursive: true });
+	const meta: GenieVersionMeta = {
+		...source,
+		id,
+		createdAt: new Date().toISOString(),
+		parentId: sourceId,
+		label: (label?.trim() || `Copy of ${source.label}`).slice(0, 80),
+		starred: false
+	};
+	writeJson(join(dest, 'meta.json'), meta);
+	return meta;
+}
+
 export function deleteVersion(siteRoot: string, versionId: string) {
 	if (versionId === 'baseline') {
 		throw new Error('Cannot delete the baseline version');

package/packages/app/src/lib/theme-entry.ts

@@ -1,7 +1,8 @@
 /**
- * Essay chrome + fonts, then site theme.
+ * Essay chrome + fonts, then a named preset, then the site theme.
  * Site rules use higher-specificity selectors (`:root:root`, `header.site-header …`)
  * so they win even if Vite emits Essay CSS after the site sheet.
  */
 import '@filepress/core/theme';
+import '$site-preset';
 import '$site-theme';

package/packages/app/src/routes/+error.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { postsIndexPath } from '@filepress/core';
+	import config from '$site-config';
+
+	const homeHref = $derived(postsIndexPath(config));
+	const missing = $derived($page.status === 404);
+	const detail = $derived.by(() => {
+		const raw = $page.error?.message?.trim() ?? '';
+		if (!raw || /^not found$/i.test(raw)) return '';
+		return raw;
+	});
+</script>
+
+<svelte:head>
+	<title>{missing ? 'Not found' : 'Error'} — {config.title}</title>
+	<meta name="robots" content="noindex" />
+</svelte:head>
+
+<section class="empty-state error-page">
+	<p class="error-code">{$page.status}</p>
+	<h1>{missing ? 'This page is not here.' : 'Something went wrong.'}</h1>
+	<p>
+		{detail ||
+			(missing
+				? 'The address may have changed, or the file was never published.'
+				: 'The build or request failed. Try the index, or check the terminal if you are in dev.')}
+	</p>
+	<p class="error-actions">
+		{#if config.homePage}
+			<a href="/">Home</a>
+			<span aria-hidden="true"> · </span>
+			<a href={homeHref}>Posts</a>
+		{:else}
+			<a href={homeHref}>Back to the index</a>
+		{/if}
+	</p>
+</section>

package/packages/app/src/routes/posts/[slug]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { Newsletter, absoluteUrl, formatDate, ogImageUrl } from '@filepress/core';
+	import { Newsletter, absoluteUrl, formatDate, formatReadingTime, ogImageUrl } from '@filepress/core';
 	import config from '$site-config';
 
 	let { data }: { data: PageData } = $props();
@@ -51,6 +51,7 @@
 			{#if showUpdated}
 				&middot; updated <time datetime={post.updated}>{formatDate(post.updated!)}</time>
 			{/if}
+			&middot; <span class="reading-time">{formatReadingTime(post.readingMinutes)}</span>
 		</p>
 		{#if data.tags.length}
 			<ul class="tag-list" style="margin-top:0.75rem">

package/packages/app/src/site-theme.d.ts

@@ -1,2 +1,5 @@
+/** Aliased in vite.config.ts to a named token preset (`essay` | `ink` | `folio`). */
+declare module '$site-preset';
+
 /** Aliased in vite.config.ts to the site's theme.css (created empty if missing). */
 declare module '$site-theme';