add the front page and browse: the drifting save-message ticker, the library's count of distinct objects, the file-type and category cloud, latest offered and shared repo cards with one tick per save, all from public repos and real saves only (v3.0.30)

@@ -0,0 +1,96 @@1+import type { Hono } from "hono";2+import { languageLines, objectHashes } from "../mirror/queries.ts";3+import { setting } from "../server/db.ts";4+import { type Html, html } from "./html.ts";5+import { cacheFor, type PageContext, page, plural } from "./layout.ts";6+import { type LibraryRepo, publicLibrary, recentSaves, repoCards } from "./library.ts";7+8+const TICKER_ROWS = 7;9+const TICKER_ITEMS = 10;10+const LATEST_OFFERED = 4;11+12+/** §21.1's front page and §21.3's browse. */13+export function registerFrontPages(app: Hono, ctx: PageContext): void {14+	app.get("/", (c) => {15+		const library = publicLibrary(ctx);16+		const tagline = setting(ctx.kepr, "tagline") ?? "";17+		// §21.1: distinct objects across every public repo's saves, as Kepr 2 counted object refs.18+		const known = new Set(library.flatMap((repo) => objectHashes(repo.mirror))).size;19+		const latest = library20+			.filter((repo) => repo.stats.updated !== null)21+			.sort((a, b) => (b.stats.updated ?? 0) - (a.stats.updated ?? 0))22+			.slice(0, LATEST_OFFERED);23+		cacheFor(c, false);24+		return c.html(25+			page(ctx, {26+				title: "",27+				description: tagline,28+				path: "/",29+				body: html`${ticker(library)}30+<section class="headline">31+<div class="headline-text">32+<h1>The library knows<br>${plural(known, "thing")}.</h1>33+${tagline && html`<p class="headline-tagline">${tagline}</p>`}34+</div>35+${wordCloud(library)}36+</section>37+${latest.length > 0 && html`<section class="featured"><h2 class="featured-label mono">latest offered</h2>${repoCards(latest)}</section>`}38+<p class="landing-self-host mono"><a href="/docs">run your own library →</a></p>`,39+			}),40+		);41+	});42+	app.get("/browse", (c) => {43+		const library = publicLibrary(ctx);44+		cacheFor(c, false);45+		return c.html(46+			page(ctx, {47+				title: "browse",48+				description: `Every public repository, ${plural(library.length, "repo")}.`,49+				path: "/browse",50+				body: html`<h1 class="file-page-title">browse</h1>51+<p class="muted mono">${plural(library.length, "repo")}</p>52+${library.length > 0 ? repoCards(library) : html`<p class="muted mono save-empty">nothing public yet</p>`}`,53+			}),54+		);55+	});56+}57+58+// Rows of recent save messages drifting at different depths; the motion is CSS, and stops under59+// reduced motion. Each row's messages are written twice so sliding by half its width loops.60+function ticker(library: LibraryRepo[]): Html {61+	const messages = recentSaves(library, TICKER_ROWS * TICKER_ITEMS).map(62+		({ save }) => save.message.split("\n")[0] as string,63+	);64+	if (messages.length === 0) return html``;65+	const rows = Array.from({ length: TICKER_ROWS }, (_, row) => {66+		const items = Array.from(67+			{ length: TICKER_ITEMS },68+			(_, i) => messages[(row * 3 + i) % messages.length],69+		);70+		const spans = items.map((message) => html`<span>${message}</span>`);71+		return html`<div class="ticker-row"><div class="ticker-track">${spans}${spans}</div></div>`;72+	});73+	return html`<div class="ticker" aria-hidden="true">${rows}</div>`;74+}75+76+// §21.1: file types (the header's languages) mixed with categories, each weighed by how many77+// public repos have it, as Kepr 2 weighed its cloud.78+function wordCloud(library: LibraryRepo[]): Html {79+	const weights = new Map<string, number>();80+	for (const repo of library) {81+		const labels = languageLines(repo.mirror).map(([language]) => language);82+		if (repo.settings.category) labels.push(repo.settings.category);83+		for (const label of new Set(labels)) weights.set(label, (weights.get(label) ?? 0) + 1);84+	}85+	if (weights.size === 0) return html``;86+	const max = Math.max(...weights.values());87+	// Ordered by a hash of the label, so the big words scatter instead of leading the cloud.88+	const tags = [...weights].sort((a, b) => scatter(a[0]) - scatter(b[0]));89+	return html`<div class="headline-cloud" aria-label="file types and categories">${tags.map(([label, weight]) => html`<span class="tc-tag tc-${Math.ceil((weight / max) * 5)}">${label}</span>`)}</div>`;90+}91+92+function scatter(label: string): number {93+	let hash = 0x9e3779b9;94+	for (const char of label) hash = (Math.imul(31, hash) + (char.codePointAt(0) ?? 0)) | 0;95+	return hash;96+}

@@ -0,0 +1,60 @@1+import { type RepoStats, repoStats, type Save, timeline } from "../mirror/queries.ts";2+import { publicRepoNames } from "../server/db.ts";3+import { type Html, html } from "./html.ts";4+import {5+	openPublicRepo,6+	type PageContext,7+	type PublicRepo,8+	plural,9+	relativeTime,10+} from "./layout.ts";11+import { readmeAtHead, readmeIntro } from "./repo.ts";12+13+/** A public repo as the front page, browse and the profile show it. `saves` are oldest first. */14+export type LibraryRepo = PublicRepo & { stats: RepoStats; description: string; saves: Save[] };15+16+export type RecentSave = { repo: string; save: Save };17+18+/** Every public repo in card order (§20: private ones never reach a page, count or card). */19+export function publicLibrary(ctx: PageContext): LibraryRepo[] {20+	return publicRepoNames(ctx.kepr).flatMap((name) => {21+		const repo = openPublicRepo(ctx, name);22+		if (!repo) return [];23+		const description = readmeIntro(name, readmeAtHead(repo))?.text ?? "";24+		return [{ ...repo, stats: repoStats(repo.mirror), description, saves: timeline(repo.mirror) }];25+	});26+}27+28+/** The newest saves across the library, checkpoints never among them. */29+export function recentSaves(library: LibraryRepo[], limit: number): RecentSave[] {30+	return library31+		.flatMap((repo) => repo.saves.slice(-limit).map((save) => ({ repo: repo.settings.name, save })))32+		.sort((a, b) => b.save.created_at - a.save.created_at)33+		.slice(0, limit);34+}35+36+export function repoCards(library: LibraryRepo[]): Html {37+	return html`<div class="card-grid">${library.map(repoCard)}</div>`;38+}39+40+function repoCard(repo: LibraryRepo): Html {41+	const { name, category } = repo.settings;42+	const { stats } = repo;43+	return html`<a class="repo-card" href="/${name}">44+<div class="repo-card-head"><span class="repo-card-name">${name}</span><span class="repo-card-saves mono">${plural(stats.saves, "save")}</span></div>45+${repo.description && html`<p class="repo-card-desc">${repo.description}</p>`}46+${ticks(repo.saves)}47+<div class="repo-card-foot">${category && html`<span class="cat-chip">${category}</span>`}${stats.language && html`<span class="repo-card-lang">${stats.language}</span>`}${stats.updated !== null && html`<span class="repo-card-when">${relativeTime(stats.updated)}</span>`}</div>48+</a>`;49+}50+51+// §21.2's mini-timeline: one tick per save, placed by time like the repo page's dots.52+function ticks(saves: Save[]): Html {53+	const first = saves[0]?.created_at ?? 0;54+	const span = (saves[saves.length - 1]?.created_at ?? 0) - first;55+	const lines = saves.map((save) => {56+		const x = span === 0 ? 50 : 1 + (98 * (save.created_at - first)) / span;57+		return html`<line x1="${x.toFixed(2)}" x2="${x.toFixed(2)}" y1="9" y2="27"/>`;58+	});59+	return html`<svg class="repo-card-ticks" viewBox="0 0 100 36" preserveAspectRatio="none" aria-hidden="true">${lines}</svg>`;60+}

@@ -0,0 +1,141 @@1+import type { Database } from "bun:sqlite";2+import { beforeAll, describe, expect, test } from "bun:test";3+import { mkdtemp, unlink, writeFile } from "node:fs/promises";4+import { tmpdir } from "node:os";5+import { join } from "node:path";6+import type { Hono } from "hono";7+import { openBucket } from "../src/bucket/reader.ts";8+import { syncAll } from "../src/bucket/sync.ts";9+import { openMirror } from "../src/mirror/store.ts";10+import { createApp } from "../src/server/app.ts";11+import { openKeprDb } from "../src/server/db.ts";12+import { makeRepos } from "./fixture.ts";13+14+let app: Hono;15+let kepr: Database;16+let dataDir: string;17+let alphaSaves: { id: string; message: string; is_checkpoint: boolean }[];18+let vaultSave: string;19+const body = async (path: string) => (await app.request(path)).text();20+21+// alpha (public): a save, a checkpoint holding a draft no real save keeps, then a second save.22+// vault (private): one save whose message, category, language and ID must never show.23+beforeAll(async () => {24+	const repos = await makeRepos(["alpha", "vault"]);25+	const root = join(repos.bucketDir, "..");26+	await writeFile(join(root, "work/alpha/draft.txt"), "a draft only a checkpoint holds\n");27+	repos.koh("alpha", "checkpoint", "checkpoint message never shown");28+	await unlink(join(root, "work/alpha/draft.txt"));29+	await writeFile(join(root, "work/alpha/README.md"), "# alpha\n\nThe alpha project, grown.\n");30+	await writeFile(join(root, "work/alpha/main.ts"), "export const a = 1;\n");31+	repos.koh("alpha", "save", "grow alpha");32+	await writeFile(join(root, "work/vault/main.zig"), "const x = 1;\n");33+	repos.koh("vault", "save", "vault message");34+	alphaSaves = JSON.parse(repos.koh("alpha", "log", "--json")).saves;35+	vaultSave = JSON.parse(repos.koh("vault", "log", "--json")).head_id;36+37+	dataDir = await mkdtemp(join(tmpdir(), "kepr-front-"));38+	kepr = openKeprDb(dataDir);39+	const bucket = openBucket({ kind: "folder", path: repos.bucketDir });40+	await syncAll({41+		bucket,42+		kepr,43+		mirrorDir: join(dataDir, "mirror"),44+		tarballDir: join(dataDir, "tarballs"),45+	});46+	kepr.run("UPDATE repos SET public = 1, category = 'tools' WHERE name = 'alpha'");47+	kepr.run("UPDATE repos SET category = 'secretcat' WHERE name = 'vault'");48+	for (const [key, value] of [49+		["handle", "ada"],50+		["tagline", "A library of small tools."],51+		["bio", "Writes small tools."],52+		["location", "Lisbon"],53+		["link", "https://ada.example"],54+		["building_since", "may 2026"],55+	]) {56+		kepr.query("INSERT INTO settings (key, value) VALUES (?, ?)").run(key, value);57+	}58+	kepr.run(59+		`INSERT INTO issues (repo, number, title, body, type, filed_at, hidden) VALUES60+		('alpha', 1, 'a', 'b', 'bug', 1, 0), ('alpha', 2, 'c', 'd', 'bug', 1, 1),61+		('vault', 1, 'e', 'f', 'bug', 1, 0)`,62+	);63+	kepr.run(64+		`INSERT INTO downloads (repo, version, platform, count) VALUES65+		('alpha', '1.0.0', 'linux-x86_64', 7), ('alpha', '0.9.0', 'linux-x86_64', 100),66+		('vault', '1.0.0', 'linux-x86_64', 1000)`,67+	);68+	kepr.run("INSERT INTO release_settings (repo, version, hidden) VALUES ('alpha', '0.9.0', 1)");69+	app = createApp(70+		{71+			domain: "kepr.example",72+			dataDir,73+			adminPasswordHash: "$argon2id$x",74+			bucket: { kind: "folder", path: repos.bucketDir },75+		},76+		kepr,77+	);78+});79+80+const checkpoint = () => alphaSaves.find((save) => save.is_checkpoint)?.id as string;81+const realSaves = () => alphaSaves.filter((save) => !save.is_checkpoint);82+83+describe("front page", () => {84+	test("counts distinct objects of public repos' real saves only", async () => {85+		// alpha's real saves hold .kohignore, two READMEs and main.ts; its mirror also holds the86+		// draft only the checkpoint kept, and the private repo's objects are elsewhere.87+		const mirror = openMirror(join(dataDir, "mirror"), "alpha");88+		expect(mirror.query("SELECT COUNT(*) AS n FROM objects").get()).toEqual({ n: 5 });89+		expect(await body("/")).toContain("The library knows<br>4 things.");90+	});91+92+	test("the ticker, cloud and cards show public saves, never checkpoints or private repos", async () => {93+		const html = await body("/");94+		expect(html).toContain('<div class="ticker" aria-hidden="true">');95+		expect(html).toContain("<span>grow alpha</span>");96+		expect(html).toContain("<span>release alpha</span>");97+		expect(html).toContain('class="tc-tag tc-5">tools<');98+		expect(html).toContain('class="tc-tag tc-5">TypeScript<');99+		expect(html).toContain('<span class="repo-card-saves mono">2 saves</span>');100+		expect(html).toContain("The alpha project, grown.");101+		expect(html).toContain("A library of small tools.");102+		expect(html).toContain('href="/docs">run your own library →</a>');103+		for (const secret of [104+			"checkpoint message",105+			"vault",106+			"secretcat",107+			"Zig",108+			checkpoint(),109+			vaultSave,110+		]) {111+			expect(html).not.toContain(secret);112+		}113+	});114+115+	test("the nav has browse, docs and support, and no login link", async () => {116+		const html = await body("/");117+		expect(html).toContain(118+			'<a href="/browse">browse</a><a href="/docs">docs</a><a href="/support">support</a>',119+		);120+		expect(html).not.toContain("sign-in");121+	});122+123+	test("browse lists public repos as cards", async () => {124+		const html = await body("/browse");125+		expect(html).toContain('<a class="repo-card" href="/alpha">');126+		expect(html).not.toContain("vault");127+		// One tick per real save.128+		expect(html.match(/<line x1=/g)?.length).toBe(realSaves().length);129+	});130+});131+132+test("motion stops under prefers-reduced-motion", async () => {133+	const css = await Bun.file(join(import.meta.dir, "../public/css/kepr.css")).text();134+	const blocks = [...css.matchAll(/@media \(prefers-reduced-motion: reduce\) \{([\s\S]*?)\n\}/g)]135+		.map((m) => m[1] as string)136+		.join("\n");137+	for (const selector of [".ticker-row", ".ticker-track", ".tri-outer"]) {138+		expect(blocks).toContain(selector);139+	}140+	expect(blocks).toContain("animation: none;");141+});