From 89eea526b17798f4d7691a4a5b7df44af2d5e6db Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:01:56 +0000
Subject: [PATCH 1/5] Build the redesigned home

Implements #31, part of #35.

- The intro: the shared Intro block with the home's text (HOME_INTRO), the
  "About me" button and the profiles, beside the topic map.
- Projects: a tile per project from src/data/projects.ts, newest first.
- Writing: the articles only, newest first, with their date, project and
  reading time; the section is #writing, where "All writing" goes. The
  activity logs keep their pages but leave the home.
- Picking a dot on the map shows only the articles about its topic. An
  article's topics come from a `topics` frontmatter field, or else from
  src/data/topics.ts, which holds the prototype's reading of the 18
  articles. The script also works when a ClientRouter swaps pages.
- The page has its own title and meta description.
- The temporary /map-preview/ page (#30) is gone, with its sitemap filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 astro.config.mjs                  |   3 +-
 src/components/ArticlesList.astro |  72 ------
 src/components/Footer.astro       |   8 +-
 src/content.config.ts             |   4 +
 src/data/profiles.ts              |   6 +
 src/data/topics.ts                |  43 ++++
 src/pages/index.astro             | 414 ++++++++++++++++++++++++++++--
 src/pages/map-preview.astro       |  34 ---
 8 files changed, 442 insertions(+), 142 deletions(-)
 delete mode 100644 src/components/ArticlesList.astro
 create mode 100644 src/data/profiles.ts
 create mode 100644 src/data/topics.ts
 delete mode 100644 src/pages/map-preview.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 3182e6d..45fb002 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -34,8 +34,7 @@ export default defineConfig({
         shikiConfig: { theme: 'github-light' }, // code blocks sit on the white page, in a light frame (prose.css)
     },
     integrations: [sitemap({
-        // TEMPORARY (#30): /map-preview/ shows the intro and the map until the home uses them; #31 deletes it.
-        filter: (page) => !/^\/(documents|map-preview)\/?$/.test(new URL(page).pathname),
+        filter: (page) => !/^\/documents\/?$/.test(new URL(page).pathname),
         serialize: (item) => ({ ...item, lastmod: lastModified.get(new URL(item.url).pathname) }),
     }), trailingSlashRedirects()],
     site: 'https://meaningfool.net',
diff --git a/src/components/ArticlesList.astro b/src/components/ArticlesList.astro
deleted file mode 100644
index dae2449..0000000
--- a/src/components/ArticlesList.astro
+++ /dev/null
@@ -1,72 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content';
-
-export interface Props {
-	articles: CollectionEntry<'writing'>[];
-}
-
-const { articles } = Astro.props;
----
-
-<ul class="articles-list">
-	{articles.map(article => (
-		<li>
-			<a href={`/articles/${article.id}/`} class="post-title">{article.data.title}</a>
-			<span class="post-meta">{article.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
-		</li>
-	))}
-</ul>
-
-<style>
-	.articles-list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.articles-list li {
-		margin-bottom: 0.15rem;
-		padding-left: 1rem;
-		text-indent: -1rem;
-	}
-
-	.articles-list li::before {
-		content: "* ";
-	}
-
-	.articles-list .post-title {
-		color: var(--accent);
-		text-decoration: none;
-	}
-
-	.articles-list .post-title:hover {
-		text-decoration: underline;
-	}
-
-	.post-meta {
-		color: var(--muted);
-		font-size: 0.9rem;
-		margin-left: 0.5rem;
-	}
-
-	@media (max-width: 768px) {
-		.articles-list li {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: baseline;
-			text-indent: 0;
-			padding-left: 0;
-		}
-
-		.articles-list li::before {
-			flex-shrink: 0;
-			margin-right: 0.5rem;
-		}
-
-		.post-meta {
-			width: 100%;
-			margin-left: 1.5rem;
-			font-size: 0.85rem;
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d98f260..a57720d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,13 +1,9 @@
 ---
 // The site footer: the wordmark, then About and the profiles elsewhere. On phones the links go under the wordmark.
 import Wordmark from './Wordmark.astro';
+import { profiles } from '../data/profiles';
 
-const links = [
-	{ href: '/about/', label: 'About' },
-	{ href: 'https://www.linkedin.com/in/josselinperrus/', label: 'LinkedIn' },
-	{ href: 'https://github.com/meaningfool', label: 'GitHub' },
-	{ href: 'https://x.com/nonils', label: 'X' },
-];
+const links = [{ href: '/about/', label: 'About' }, ...profiles];
 ---
 
 <footer class="foot">
diff --git a/src/content.config.ts b/src/content.config.ts
index 48e6074..1c7cebd 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -2,6 +2,7 @@ import { defineCollection } from 'astro:content';
 import { z } from 'astro/zod';
 import { glob } from 'astro/loaders';
 import { postId } from './lib/posts.mjs';
+import { TOPICS } from './data/topics';
 
 const writing = defineCollection({
   loader: glob({
@@ -23,6 +24,9 @@ const writing = defineCollection({
     updated: z.date().optional(),
     description: z.string().optional(),
     tags: z.array(z.string()).optional(),
+    // The topics an article is about, each one 30% or more of it: customer-success, product, ai-agents. The home's
+    // topic map filters Writing with them. Articles without the field take theirs from src/data/topics.ts.
+    topics: z.array(z.enum(TOPICS)).optional(),
   }),
 });
 
diff --git a/src/data/profiles.ts b/src/data/profiles.ts
new file mode 100644
index 0000000..bcc83f9
--- /dev/null
+++ b/src/data/profiles.ts
@@ -0,0 +1,6 @@
+// Josselin's profiles elsewhere, linked from the footer and the home's intro.
+export const profiles = [
+	{ href: 'https://www.linkedin.com/in/josselinperrus/', label: 'LinkedIn' },
+	{ href: 'https://github.com/meaningfool', label: 'GitHub' },
+	{ href: 'https://x.com/nonils', label: 'X' },
+];
diff --git a/src/data/topics.ts b/src/data/topics.ts
new file mode 100644
index 0000000..c4164ce
--- /dev/null
+++ b/src/data/topics.ts
@@ -0,0 +1,43 @@
+// The site's three topics, the three orange dots of the topic map, and which of them each article is about. Picking a
+// topic on the home's map shows only the articles about it.
+//
+// An article belongs to a topic when that topic makes up 30% or more of it, so it can belong to more than one. An
+// article's topics come from its `topics` frontmatter field in meaningfool-writing when it has one, for example
+// `topics: [product, ai-agents]`. Until every article has that field, the list below gives the topics of the 18
+// articles the prototype read (docs/redesign/prototype/maps.js, the weights in each article's `w`), by article id.
+import type { CollectionEntry } from 'astro:content';
+import map from './topic-map.json';
+
+/** The topics' ids, which the map's dots carry and the frontmatter's `topics` field takes. */
+export const TOPICS = ['customer-success', 'product', 'ai-agents'] as const;
+export type Topic = (typeof TOPICS)[number];
+
+/** The topics' names, as the map shows them: "Customer success", "Product", "AI agents". */
+export const TOPIC_NAMES = Object.fromEntries(map.topics.map(({ id, name }) => [id, name])) as Record<Topic, string>;
+
+// The prototype's weights are [customer success, product, AI agents]; each topic at 0.3 or more is listed.
+const fromPrototype: Record<string, Topic[]> = {
+	'edit-collections-generative-ai': ['ai-agents'], // 0.1, 0.15, 0.75
+	'structured-extraction': ['ai-agents'], // 0.2, 0.1, 0.7
+	'thoughts-on-human-ai-collaboration': ['customer-success', 'product', 'ai-agents'], // 0.3, 0.3, 0.4
+	'detecting-bounding-boxes': ['ai-agents'], // 0.05, 0.1, 0.85
+	'agent-frameworks-for-the-rest-of-us': ['ai-agents'], // 0.05, 0.15, 0.8
+	'how-long-for-that-change': ['product'], // 0.15, 0.7, 0.15
+	'january-in-review': ['ai-agents'], // 0.05, 0.25, 0.7
+	'prolifics-and-frugals': ['product'], // 0.2, 0.7, 0.1
+	'the-slicing-fallacy': ['product'], // 0.25, 0.7, 0.05
+	'we-cant-stop-planning': ['product'], // 0.2, 0.75, 0.05
+	cost_of_change_is_agile_ceiling: ['product'], // 0.15, 0.75, 0.1
+	compounding_dev_process: ['product', 'ai-agents'], // 0.05, 0.5, 0.45
+	antigravity_is_onto_something: ['ai-agents'], // 0.05, 0.25, 0.7
+	'semi-async_valley_of_death': ['product', 'ai-agents'], // 0.1, 0.3, 0.6
+	'spec-driven-development-has-it-backwards': ['product', 'ai-agents'], // 0.1, 0.5, 0.4
+	'ai-engineer-paris-conference-notes': ['ai-agents'], // 0.05, 0.15, 0.8
+	'voice-ai-maven-course-notes': ['ai-agents'], // 0.05, 0.1, 0.85
+	'faster-answers-better-questions': ['customer-success', 'product'], // 0.3, 0.5, 0.2
+};
+
+/** An article's topics: its `topics` frontmatter field, or else the list above. */
+export function topicsOf(article: CollectionEntry<'writing'>): Topic[] {
+	return article.data.topics ?? fromPrototype[article.id] ?? [];
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cc5b3b7..5e1c161 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,44 +1,402 @@
 ---
+// The home: the intro beside the topic map, then Projects and Writing. Writing lists the articles, newest first; the
+// activity logs aren't listed, but their pages keep their URLs. Picking an orange dot on the map shows only the
+// articles about its topic (src/data/topics.ts), and picking it again, or "Show all", shows them all again.
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
 import Layout from '../layouts/Layout.astro';
-import ArticlesList from '../components/ArticlesList.astro';
+import Intro from '../components/Intro.astro';
 import JsonLd from '../components/JsonLd.astro';
-import { getCollection, type CollectionEntry } from 'astro:content';
+import { projects, projectOf } from '../data/projects';
+import { profiles } from '../data/profiles';
+import { TOPIC_NAMES, topicsOf } from '../data/topics';
 import { newestFirst } from '../lib/sort-posts';
+import { HOME_INTRO, articleMeta, articlesOnly } from '../lib/share';
 
-const articles: CollectionEntry<'writing'>[] = await getCollection('writing');
+const title = 'meaningfool | Josselin Perrus, product manager building with AI agents';
+const description =
+	"Josselin Perrus's site: a product manager in Paris building AI products with AI agents. His projects, and writing on customer success, product and AI agents.";
 
-// Sort articles by date (most recent first)
-const sortedArticles = articles.sort(newestFirst);
+const articles = articlesOnly(await getCollection('writing')).sort(newestFirst);
+const rows = articles.map((article) => {
+	const topics = topicsOf(article);
+	if (!topics.length) console.warn(`The home's topic map can't filter "${article.id}": give it a topics field (src/data/topics.ts).`);
+	return {
+		href: `/articles/${article.id}/`,
+		// The day in the content, as UTC keeps it whatever the build machine's time zone
+		date: article.data.date.toISOString().slice(0, 10),
+		title: article.data.title,
+		project: projectOf(article.id)?.shortName,
+		// The reading time the article page and its share image show
+		minutes: articleMeta(article).minutes,
+		topics,
+	};
+});
+const countText = (count: number) => `${count} article${count === 1 ? '' : 's'}`;
+
+// "May 2026", from the project's YYYY-MM
+const month = (date: string) =>
+	new Date(`${date}-01T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', year: 'numeric', timeZone: 'UTC' });
+const tiles = [...projects].sort((a, b) => b.date.localeCompare(a.date));
 
 // JSON-LD structured data for WebSite
 const websiteSchema = {
-  "@context": "https://schema.org",
-  "@type": "WebSite",
-  "name": "meaningfool",
-  "url": "https://meaningfool.net/",
-  "publisher": {
-    "@type": "Person",
-    "name": "Josselin Perrus",
-    "url": "https://meaningfool.net/about/"
-  }
+	'@context': 'https://schema.org',
+	'@type': 'WebSite',
+	name: 'meaningfool',
+	url: 'https://meaningfool.net/',
+	description,
+	publisher: {
+		'@type': 'Person',
+		name: 'Josselin Perrus',
+		url: 'https://meaningfool.net/about/',
+	},
 };
 ---
 
-<Layout>
+<Layout title={title} description={description}>
 	<JsonLd data={websiteSchema} />
-	<main id="main" class="legacy">
-		<section id="about">
-			<p>👋 Hey, I'm Josselin.</p>
-			<p>🥐 I'm a product person based in Paris.</p>
-			<p>✒️ I write about product and my journey towards AI-assisted programming.</p>
-			<p>📖 I'm <a href="https://www.swyx.io/learn-in-public">learning in public</a> and documenting the work on my projects,and my learnings (challenges, readings, thoughts, etc.)</p>
-			<p>🏗️ This very site was built with the help of Claude Code, and my writing / publishing workflow is AI-assisted.</p>
-		</section>
-
-		<section id="articles" aria-labelledby="articles-title">
-			<h1 id="articles-title" class="section-title">Articles</h1>
-			<ArticlesList articles={sortedArticles} />
-		</section>
+	<main id="main">
+		<Intro label="Josselin Perrus · Product manager · Paris">
+			<Fragment slot="title">I build products<br />with AI agents<span>.</span></Fragment>
+			{HOME_INTRO}
+			<div slot="after" class="cta-row">
+				<a class="cta" href="/about/">About me <span aria-hidden="true">→</span></a>
+				<ul class="profiles" role="list">
+					{profiles.map(({ href, label }) => <li><a href={href}>{label}</a></li>)}
+				</ul>
+			</div>
+		</Intro>
+
+		<div class="stack">
+			<section class="sec" aria-labelledby="projects-title">
+				<div class="sec-head">
+					<h2 id="projects-title">Projects</h2>
+					<p class="label">Things I built to learn</p>
+				</div>
+				<ul class="tiles" role="list">
+					{tiles.map((project) => (
+						<li class="tile">
+							<div class="shot">
+								<Image
+									src={project.screenshot}
+									alt=""
+									widths={[362, 720]}
+									sizes="(max-width: 900px) calc(100vw - 68px), min(362px, calc((100vw - 96px) / 3 - 20px))"
+								/>
+							</div>
+							<p class="meta">{project.type} · {month(project.date)}</p>
+							<h3><a href={project.link}>{project.name} <span aria-hidden="true">↗</span></a></h3>
+							<p class="line">{project.description}</p>
+						</li>
+					))}
+				</ul>
+			</section>
+
+			<section class="sec" id="writing" aria-labelledby="writing-title">
+				<div class="sec-head">
+					<h2 id="writing-title">Writing</h2>
+					<p class="label count" data-writing-count data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite" tabindex="-1">
+						{countText(rows.length)}
+					</p>
+				</div>
+				<ul class="index" role="list" data-writing>
+					{rows.map((row) => (
+						<li data-topics={row.topics.join(' ')}>
+							<a class="row" href={row.href}>
+								<time class="d" datetime={row.date}>{row.date}</time>
+								<span class="t">{row.title}</span>
+								<span class="p">{row.project ?? '—'}</span>
+								<span class="r">{row.minutes} min</span>
+							</a>
+						</li>
+					))}
+				</ul>
+			</section>
+		</div>
 	</main>
 </Layout>
 
+<style>
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	/* The intro's button and the profiles */
+	.cta-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px 24px;
+		align-items: center;
+		padding-top: 6px;
+	}
+
+	.cta {
+		padding: 10px 16px;
+		border: 1px solid var(--ink);
+		background: var(--page);
+		color: var(--ink);
+		text-decoration: none;
+	}
+
+	.cta span {
+		color: var(--accent);
+	}
+
+	.cta:hover {
+		background: var(--tint);
+	}
+
+	.profiles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 18px;
+		font-size: 12px;
+	}
+
+	.profiles a {
+		color: inherit;
+		text-decoration: underline;
+		text-decoration-color: #bcbcb5;
+		text-underline-offset: 5px;
+	}
+
+	.profiles a:hover {
+		text-decoration-color: var(--accent);
+	}
+
+	/* Projects and Writing */
+	.stack {
+		display: grid;
+		gap: 88px;
+	}
+
+	.sec {
+		display: grid;
+		gap: 24px;
+	}
+
+	.sec-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 16px;
+		padding-bottom: 14px;
+		border-bottom: 1px solid var(--line);
+	}
+
+	h2 {
+		margin: 0;
+		font-weight: 400;
+		font-size: 22px;
+		letter-spacing: -0.04em;
+	}
+
+	.label {
+		font-size: 12px;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	.count :global(button) {
+		padding: 0;
+		border: 0;
+		background: none;
+		color: var(--accent);
+		font: inherit;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+		cursor: pointer;
+	}
+
+	/* Projects: a tile each, its whole area a link to the project */
+	.tiles {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 24px;
+	}
+
+	.tile {
+		position: relative;
+		display: grid;
+		gap: 6px;
+		align-content: start;
+		min-width: 0;
+	}
+
+	.shot {
+		padding: 10px;
+		background: var(--panel);
+	}
+
+	.shot img {
+		display: block;
+		width: 100%;
+		height: auto;
+		aspect-ratio: 16 / 10;
+		object-fit: cover;
+		border: 1px solid var(--line);
+	}
+
+	.tile .meta {
+		padding-top: 10px;
+		font-size: 11px;
+		letter-spacing: 0.04em;
+		color: var(--muted);
+	}
+
+	h3 {
+		margin: 0;
+		font-weight: 400;
+		font-size: 16px;
+		letter-spacing: -0.03em;
+	}
+
+	h3 a {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	h3 a::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+
+	h3 a:hover {
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
+	/* An inline block, so the title's underline stops before the arrow */
+	h3 span {
+		display: inline-block;
+		color: var(--accent);
+	}
+
+	.tile .line {
+		font-size: 12px;
+		color: var(--muted);
+	}
+
+	/* Writing: the list is pulled up by the section's gap plus 1px, so the first row's top line lies on the heading's
+	   line. */
+	.index {
+		display: grid;
+		margin-top: -25px;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 96px minmax(0, 1fr) 120px 56px;
+		gap: 16px;
+		align-items: baseline;
+		padding: 12px 14px 11px;
+		border-top: 1px solid var(--line);
+		border-bottom: 2px solid transparent;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.row:hover,
+	.row:focus-visible {
+		background: var(--tint);
+		border-bottom-color: var(--accent);
+	}
+
+	.d,
+	.p,
+	.r {
+		font-size: 12px;
+		color: var(--muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.r {
+		text-align: right;
+	}
+
+	.t {
+		font-size: 15px;
+	}
+
+	/* Phones: the tiles stack, and the rows keep only the title and the reading time. */
+	@media (max-width: 900px) {
+		.tiles {
+			grid-template-columns: 1fr;
+		}
+
+		.row {
+			grid-template-columns: minmax(0, 1fr) 48px;
+		}
+
+		.d,
+		.p {
+			display: none;
+		}
+	}
+</style>
+
+<script>
+	// The topic filter. The listeners are on the document and added once, and each arrival on the home resets the list
+	// and clears the map's pick, so this also works when Astro's ClientRouter swaps pages instead of loading them.
+	type Writing = { list: HTMLElement; count: HTMLElement; names: Record<string, string> };
+
+	// The home's Writing list, or null on another page.
+	function writing(): Writing | null {
+		const list = document.querySelector<HTMLElement>('[data-writing]');
+		const count = document.querySelector<HTMLElement>('[data-writing-count]');
+		if (!list || !count) return null;
+		return { list, count, names: JSON.parse(count.dataset.names ?? '{}') };
+	}
+
+	// Shows the articles about `topic`, or all of them, and marks the topic's dot on the map.
+	function show(topic: string | null) {
+		const page = writing();
+		if (!page) return;
+		const items = [...page.list.querySelectorAll<HTMLElement>('li[data-topics]')];
+		let shown = 0;
+		for (const item of items) {
+			item.hidden = !!topic && !(item.dataset.topics ?? '').split(' ').includes(topic);
+			if (!item.hidden) shown++;
+		}
+		const map = document.querySelector<HTMLElement>('topic-map');
+		if (map) {
+			if (topic) map.dataset.picked = topic;
+			else delete map.dataset.picked;
+		}
+		const total = items.length;
+		if (topic) {
+			const all = document.createElement('button');
+			all.type = 'button';
+			all.dataset.showAll = '';
+			all.textContent = 'Show all';
+			page.count.replaceChildren(`${page.names[topic] ?? topic} · ${shown} of ${total} · `, all);
+		} else {
+			page.count.textContent = `${total} article${total === 1 ? '' : 's'}`;
+		}
+	}
+
+	document.addEventListener('topicmap:pick', (event) => {
+		if (!writing()) return;
+		// On the home a dot filters Writing; it never follows a link, should the map have come from another page.
+		event.preventDefault();
+		const map = event.target as HTMLElement;
+		const { topic } = (event as CustomEvent<{ topic: string }>).detail;
+		show(map.dataset.picked === topic ? null : topic);
+	});
+
+	document.addEventListener('click', (event) => {
+		const button = (event.target as Element).closest('[data-show-all]');
+		if (!button) return;
+		const hadFocus = document.activeElement === button;
+		show(null);
+		// The button is gone: keep the keyboard's place on the count that replaced it.
+		if (hadFocus) writing()?.count.focus();
+	});
+
+	document.addEventListener('astro:page-load', () => show(null));
+	show(null);
+</script>
diff --git a/src/pages/map-preview.astro b/src/pages/map-preview.astro
deleted file mode 100644
index 072c360..0000000
--- a/src/pages/map-preview.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-// TEMPORARY (#30): shows the intro block and the topic map on the redesign branch's previews, until the home (#31)
-// uses them. #31 deletes this page, with its line in astro.config.mjs. It isn't linked, indexed or in the sitemap.
-import Layout from '../layouts/Layout.astro';
-import Intro from '../components/Intro.astro';
----
-
-<Layout title="Map preview | meaningfool" noindex>
-	<main id="main">
-		<Intro label="Josselin Perrus · Product manager · Paris">
-			<Fragment slot="title">I build products<br />with AI agents<span>.</span></Fragment>
-			I'm a product manager building AI products with AI. My projects are an opportunity to test ideas and learn in public.
-			<p slot="after" class="note">Temporary preview of the intro and the map (#30). Clicking an orange dot marks it as picked; the home (#31) will filter Writing with it.</p>
-		</Intro>
-	</main>
-</Layout>
-
-<style>
-	.note {
-		padding-top: 6px;
-		font-size: 12px;
-		color: var(--muted);
-	}
-</style>
-
-<script>
-	// TEMPORARY (#30): what the home will do with a picked dot, minus the filtering.
-	document.addEventListener('topicmap:pick', (e) => {
-		const map = e.target as HTMLElement;
-		const topic = (e as CustomEvent<{ topic: string }>).detail.topic;
-		if (map.dataset.picked === topic) delete map.dataset.picked;
-		else map.dataset.picked = topic;
-	});
-</script>

From 468a01ab692cb169e3d1ef45f313def999b11b42 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:08:21 +0000
Subject: [PATCH 2/5] Tidy the home's filter after review

- Clear the map's pick when the ClientRouter leaves the home, so a map kept
  for the next page arrives without it.
- Guard the Show all listener against clicks on non-elements, and pass the
  Writing list to show() instead of looking it up twice.
- Take the unfiltered count text from the page, built with share.ts's
  plural(), rather than repeating it in the script.
- Warn only about articles that have no topics at all, not about an
  explicit `topics: []`, and fail the build if topic-map.json's topics stop
  matching TOPICS.
- Use readingMinutes() and the projects' own order directly.
- Describe the home and its topics in AGENTS.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 AGENTS.md             |  1 +
 src/data/topics.ts    | 13 ++++++---
 src/lib/share.ts      |  3 +-
 src/pages/index.astro | 67 ++++++++++++++++++++++++-------------------
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index f44852e..601086a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,6 +10,7 @@ Josselin Perrus's personal site: an Astro 7 static site served by Cloudflare Wor
 - The page background (`src/components/Background.astro`: the paper texture and the corner pattern) and the topic map (`TopicMap.astro`, inside the `Intro` of Home and About) are drawn on canvases from small images in `src/assets/background/`. `scripts/make-background.py` makes those images, from the map's land in `src/data/topic-map.json`; rerun it after changing either, and commit its output. The site loads no shader library.
 - `src/content/writing/`: git submodule of [meaningfool-writing](https://github.com/meaningfool/meaningfool-writing), which holds every article, activity log and image. Read its `AGENTS.md` before editing content.
 - `src/content.config.ts`: the content collection, built from `articles/*.md` and `daily-logs/*.md` in the submodule.
+- `src/pages/index.astro`: the home. Its Writing list holds the articles, not the activity logs, and picking a topic on the map shows only the articles about it. An article's topics are its `topics` frontmatter field (`customer-success`, `product`, `ai-agents`: each one that makes up 30% or more of it), or else its entry in `src/data/topics.ts`.
 - `src/pages/articles/[slug].astro`: the page of every article and activity log. The Markdown goes through the plugins in `src/lib/` set in `astro.config.mjs`: the `# Title` line is dropped, the headings are renumbered from h2, and `rehype-article.mjs` shapes figures, YouTube embeds (moved to youtube-nocookie.com) and tables for `src/styles/prose.css`. In a table, a row whose cells are all bold is highlighted, and a paragraph starting with `Table:` right after it, past a blank line, is its caption. An image alone in its paragraph is captioned with its title, or with its alt text when that has a space.
 - `src/data/projects.ts`: the projects, with their screenshots in `src/assets/projects/`, and which articles belong to each, by article id.
 - `docs/document-sharing.md`: how the encrypted portfolio links on `/documents/` work and how to create them.
diff --git a/src/data/topics.ts b/src/data/topics.ts
index c4164ce..958a9ea 100644
--- a/src/data/topics.ts
+++ b/src/data/topics.ts
@@ -3,7 +3,7 @@
 //
 // An article belongs to a topic when that topic makes up 30% or more of it, so it can belong to more than one. An
 // article's topics come from its `topics` frontmatter field in meaningfool-writing when it has one, for example
-// `topics: [product, ai-agents]`. Until every article has that field, the list below gives the topics of the 18
+// `topics: ["product", "ai-agents"]`. Until every article has that field, the list below gives the topics of the 18
 // articles the prototype read (docs/redesign/prototype/maps.js, the weights in each article's `w`), by article id.
 import type { CollectionEntry } from 'astro:content';
 import map from './topic-map.json';
@@ -12,6 +12,11 @@ import map from './topic-map.json';
 export const TOPICS = ['customer-success', 'product', 'ai-agents'] as const;
 export type Topic = (typeof TOPICS)[number];
 
+// The map's dots (topic-map.json) are these three topics, in this order.
+if (map.topics.map(({ id }) => id).join() !== TOPICS.join()) {
+	throw new Error(`src/data/topic-map.json's topics should be ${TOPICS.join(', ')}, as in src/data/topics.ts`);
+}
+
 /** The topics' names, as the map shows them: "Customer success", "Product", "AI agents". */
 export const TOPIC_NAMES = Object.fromEntries(map.topics.map(({ id, name }) => [id, name])) as Record<Topic, string>;
 
@@ -37,7 +42,7 @@ const fromPrototype: Record<string, Topic[]> = {
 	'faster-answers-better-questions': ['customer-success', 'product'], // 0.3, 0.5, 0.2
 };
 
-/** An article's topics: its `topics` frontmatter field, or else the list above. */
-export function topicsOf(article: CollectionEntry<'writing'>): Topic[] {
-	return article.data.topics ?? fromPrototype[article.id] ?? [];
+/** An article's topics: its `topics` frontmatter field, or else the list above; undefined when it has neither. */
+export function topicsOf(article: CollectionEntry<'writing'>): Topic[] | undefined {
+	return article.data.topics ?? fromPrototype[article.id];
 }
diff --git a/src/lib/share.ts b/src/lib/share.ts
index fea66b4..02a0368 100644
--- a/src/lib/share.ts
+++ b/src/lib/share.ts
@@ -19,7 +19,8 @@ export const HOME_INTRO =
 /** The share image of Home and About. The activity logs, which have none of their own, use it too. */
 export const SITE_SHARE: Share = { path: '/share.png', alt: `Josselin Perrus. ${HOME_INTRO}` };
 
-const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? '' : 's'}`;
+/** "18 articles", "1 project" */
+export const plural = (count: number, word: string) => `${count} ${word}${count === 1 ? '' : 's'}`;
 
 /** "May 27, 2026": the date in the content is a day, which UTC keeps whatever the build machine's time zone. */
 export function formatDate(date: Date): string {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5e1c161..9ab962b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,8 @@ import { projects, projectOf } from '../data/projects';
 import { profiles } from '../data/profiles';
 import { TOPIC_NAMES, topicsOf } from '../data/topics';
 import { newestFirst } from '../lib/sort-posts';
-import { HOME_INTRO, articleMeta, articlesOnly } from '../lib/share';
+import { readingMinutes } from '../lib/reading-time.mjs';
+import { HOME_INTRO, articlesOnly, plural } from '../lib/share';
 
 const title = 'meaningfool | Josselin Perrus, product manager building with AI agents';
 const description =
@@ -20,7 +21,7 @@ const description =
 const articles = articlesOnly(await getCollection('writing')).sort(newestFirst);
 const rows = articles.map((article) => {
 	const topics = topicsOf(article);
-	if (!topics.length) console.warn(`The home's topic map can't filter "${article.id}": give it a topics field (src/data/topics.ts).`);
+	if (!topics) console.warn(`"${article.id}" has no topics, so picking a topic on the home's map hides it: give it a topics field.`);
 	return {
 		href: `/articles/${article.id}/`,
 		// The day in the content, as UTC keeps it whatever the build machine's time zone
@@ -28,16 +29,15 @@ const rows = articles.map((article) => {
 		title: article.data.title,
 		project: projectOf(article.id)?.shortName,
 		// The reading time the article page and its share image show
-		minutes: articleMeta(article).minutes,
-		topics,
+		minutes: readingMinutes(article.body),
+		topics: topics ?? [],
 	};
 });
-const countText = (count: number) => `${count} article${count === 1 ? '' : 's'}`;
+const allText = plural(rows.length, 'article');
 
 // "May 2026", from the project's YYYY-MM
 const month = (date: string) =>
 	new Date(`${date}-01T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', year: 'numeric', timeZone: 'UTC' });
-const tiles = [...projects].sort((a, b) => b.date.localeCompare(a.date));
 
 // JSON-LD structured data for WebSite
 const websiteSchema = {
@@ -75,7 +75,7 @@ const websiteSchema = {
 					<p class="label">Things I built to learn</p>
 				</div>
 				<ul class="tiles" role="list">
-					{tiles.map((project) => (
+					{projects.map((project) => (
 						<li class="tile">
 							<div class="shot">
 								<Image
@@ -96,8 +96,8 @@ const websiteSchema = {
 			<section class="sec" id="writing" aria-labelledby="writing-title">
 				<div class="sec-head">
 					<h2 id="writing-title">Writing</h2>
-					<p class="label count" data-writing-count data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite" tabindex="-1">
-						{countText(rows.length)}
+					<p class="label count" data-writing-count data-all={allText} data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite" tabindex="-1">
+						{allText}
 					</p>
 				</div>
 				<ul class="index" role="list" data-writing>
@@ -342,61 +342,70 @@ const websiteSchema = {
 <script>
 	// The topic filter. The listeners are on the document and added once, and each arrival on the home resets the list
 	// and clears the map's pick, so this also works when Astro's ClientRouter swaps pages instead of loading them.
-	type Writing = { list: HTMLElement; count: HTMLElement; names: Record<string, string> };
+	type Writing = { list: HTMLElement; count: HTMLElement; map: HTMLElement | null };
 
 	// The home's Writing list, or null on another page.
 	function writing(): Writing | null {
 		const list = document.querySelector<HTMLElement>('[data-writing]');
 		const count = document.querySelector<HTMLElement>('[data-writing-count]');
-		if (!list || !count) return null;
-		return { list, count, names: JSON.parse(count.dataset.names ?? '{}') };
+		return list && count ? { list, count, map: document.querySelector<HTMLElement>('topic-map') } : null;
 	}
 
 	// Shows the articles about `topic`, or all of them, and marks the topic's dot on the map.
-	function show(topic: string | null) {
-		const page = writing();
-		if (!page) return;
-		const items = [...page.list.querySelectorAll<HTMLElement>('li[data-topics]')];
+	function show({ list, count, map }: Writing, topic: string | null) {
+		const items = [...list.querySelectorAll<HTMLElement>('li[data-topics]')];
 		let shown = 0;
 		for (const item of items) {
 			item.hidden = !!topic && !(item.dataset.topics ?? '').split(' ').includes(topic);
 			if (!item.hidden) shown++;
 		}
-		const map = document.querySelector<HTMLElement>('topic-map');
 		if (map) {
 			if (topic) map.dataset.picked = topic;
 			else delete map.dataset.picked;
 		}
-		const total = items.length;
 		if (topic) {
+			const names: Record<string, string> = JSON.parse(count.dataset.names ?? '{}');
 			const all = document.createElement('button');
 			all.type = 'button';
 			all.dataset.showAll = '';
 			all.textContent = 'Show all';
-			page.count.replaceChildren(`${page.names[topic] ?? topic} · ${shown} of ${total} · `, all);
+			count.replaceChildren(`${names[topic] ?? topic} · ${shown} of ${items.length} · `, all);
 		} else {
-			page.count.textContent = `${total} article${total === 1 ? '' : 's'}`;
+			count.textContent = count.dataset.all ?? '';
 		}
 	}
 
 	document.addEventListener('topicmap:pick', (event) => {
-		if (!writing()) return;
+		const page = writing();
+		if (!page) return;
 		// On the home a dot filters Writing; it never follows a link, should the map have come from another page.
 		event.preventDefault();
-		const map = event.target as HTMLElement;
 		const { topic } = (event as CustomEvent<{ topic: string }>).detail;
-		show(map.dataset.picked === topic ? null : topic);
+		show(page, (event.target as HTMLElement).dataset.picked === topic ? null : topic);
 	});
 
 	document.addEventListener('click', (event) => {
-		const button = (event.target as Element).closest('[data-show-all]');
-		if (!button) return;
+		const button = event.target instanceof Element ? event.target.closest('[data-show-all]') : null;
+		const page = button && writing();
+		if (!page) return;
 		const hadFocus = document.activeElement === button;
-		show(null);
+		show(page, null);
 		// The button is gone: keep the keyboard's place on the count that replaced it.
-		if (hadFocus) writing()?.count.focus();
+		if (hadFocus) page.count.focus();
 	});
 
-	document.addEventListener('astro:page-load', () => show(null));
-	show(null);
+	// Arriving on the home, by a page load or a ClientRouter swap: all the articles, and no pick.
+	function arrive() {
+		const page = writing();
+		if (page) show(page, null);
+	}
+	document.addEventListener('astro:page-load', arrive);
+	arrive();
+
+	// Leaving the home with the ClientRouter: the pick belongs to the home, so a map kept for the next page
+	// (transition:persist) arrives without it.
+	document.addEventListener('astro:before-swap', () => {
+		const page = writing();
+		if (page?.map) delete page.map.dataset.picked;
+	});
 </script>

From c79222457aa27f34830ba6729b29c64e7306ab33 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:12:52 +0000
Subject: [PATCH 3/5] Keep the count's announcements and the picked map in step

- Rewrite the Writing count only when it changes: it is a live region, so
  resetting it on arrival made screen readers read it again.
- After "Show all", move the keyboard's place to the Writing heading rather
  than to the live region, which it would read twice.
- Mark the pick on the map that was clicked.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 src/pages/index.astro | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9ab962b..3071e73 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -95,8 +95,8 @@ const websiteSchema = {
 
 			<section class="sec" id="writing" aria-labelledby="writing-title">
 				<div class="sec-head">
-					<h2 id="writing-title">Writing</h2>
-					<p class="label count" data-writing-count data-all={allText} data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite" tabindex="-1">
+					<h2 id="writing-title" tabindex="-1">Writing</h2>
+					<p class="label count" data-writing-count data-all={allText} data-names={JSON.stringify(TOPIC_NAMES)} aria-live="polite">
 						{allText}
 					</p>
 				</div>
@@ -370,7 +370,8 @@ const websiteSchema = {
 			all.dataset.showAll = '';
 			all.textContent = 'Show all';
 			count.replaceChildren(`${names[topic] ?? topic} · ${shown} of ${items.length} · `, all);
-		} else {
+		} else if (count.childElementCount || count.textContent?.trim() !== count.dataset.all) {
+			// Only when it changed: the count is a live region, which screen readers announce when it's rewritten.
 			count.textContent = count.dataset.all ?? '';
 		}
 	}
@@ -380,8 +381,9 @@ const websiteSchema = {
 		if (!page) return;
 		// On the home a dot filters Writing; it never follows a link, should the map have come from another page.
 		event.preventDefault();
+		const map = event.target as HTMLElement;
 		const { topic } = (event as CustomEvent<{ topic: string }>).detail;
-		show(page, (event.target as HTMLElement).dataset.picked === topic ? null : topic);
+		show({ ...page, map }, map.dataset.picked === topic ? null : topic);
 	});
 
 	document.addEventListener('click', (event) => {
@@ -390,8 +392,8 @@ const websiteSchema = {
 		if (!page) return;
 		const hadFocus = document.activeElement === button;
 		show(page, null);
-		// The button is gone: keep the keyboard's place on the count that replaced it.
-		if (hadFocus) page.count.focus();
+		// The button is gone: keep the keyboard's place in Writing, on its heading.
+		if (hadFocus) document.getElementById('writing-title')?.focus();
 	});
 
 	// Arriving on the home, by a page load or a ClientRouter swap: all the articles, and no pick.

From 0d8e67583369891392dfb815510501f705d2b4f8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:21:17 +0000
Subject: [PATCH 4/5] Polish the home's links for screen readers and hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- After "Show all", always move to the Writing heading: Safari doesn't focus
  a clicked button, and the screen reader's place went with the button.
- Hide the "—" of rows without a project from screen readers.
- Underline only a project's name on hover, not the space and arrow.
- Warn when src/data/topics.ts names an article that doesn't exist, as
  projects.ts does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 src/data/topics.ts    |  6 ++++++
 src/pages/index.astro | 24 ++++++++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/data/topics.ts b/src/data/topics.ts
index 958a9ea..cfb81a9 100644
--- a/src/data/topics.ts
+++ b/src/data/topics.ts
@@ -46,3 +46,9 @@ const fromPrototype: Record<string, Topic[]> = {
 export function topicsOf(article: CollectionEntry<'writing'>): Topic[] | undefined {
 	return article.data.topics ?? fromPrototype[article.id];
 }
+
+/** The ids in the list above that match no article, for example after an article's file was renamed. */
+export function unknownTopicIds(articleIds: Iterable<string>): string[] {
+	const ids = new Set(articleIds);
+	return Object.keys(fromPrototype).filter((id) => !ids.has(id));
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3071e73..d7d4a2d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,7 @@ import Intro from '../components/Intro.astro';
 import JsonLd from '../components/JsonLd.astro';
 import { projects, projectOf } from '../data/projects';
 import { profiles } from '../data/profiles';
-import { TOPIC_NAMES, topicsOf } from '../data/topics';
+import { TOPIC_NAMES, topicsOf, unknownTopicIds } from '../data/topics';
 import { newestFirst } from '../lib/sort-posts';
 import { readingMinutes } from '../lib/reading-time.mjs';
 import { HOME_INTRO, articlesOnly, plural } from '../lib/share';
@@ -19,6 +19,9 @@ const description =
 	"Josselin Perrus's site: a product manager in Paris building AI products with AI agents. His projects, and writing on customer success, product and AI agents.";
 
 const articles = articlesOnly(await getCollection('writing')).sort(newestFirst);
+for (const id of unknownTopicIds(articles.map((article) => article.id))) {
+	console.warn(`src/data/topics.ts gives topics to an article that doesn't exist: ${id}`);
+}
 const rows = articles.map((article) => {
 	const topics = topicsOf(article);
 	if (!topics) console.warn(`"${article.id}" has no topics, so picking a topic on the home's map hides it: give it a topics field.`);
@@ -86,7 +89,9 @@ const websiteSchema = {
 								/>
 							</div>
 							<p class="meta">{project.type} · {month(project.date)}</p>
-							<h3><a href={project.link}>{project.name} <span aria-hidden="true">↗</span></a></h3>
+							<h3>
+								<a href={project.link}><span class="name">{project.name}</span> <span class="arrow" aria-hidden="true">↗</span></a>
+							</h3>
 							<p class="line">{project.description}</p>
 						</li>
 					))}
@@ -106,7 +111,7 @@ const websiteSchema = {
 							<a class="row" href={row.href}>
 								<time class="d" datetime={row.date}>{row.date}</time>
 								<span class="t">{row.title}</span>
-								<span class="p">{row.project ?? '—'}</span>
+								<span class="p">{row.project ?? <span aria-hidden="true">—</span>}</span>
 								<span class="r">{row.minutes} min</span>
 							</a>
 						</li>
@@ -265,14 +270,13 @@ const websiteSchema = {
 		inset: 0;
 	}
 
-	h3 a:hover {
+	/* On hover the name is underlined, not the space and the arrow after it. */
+	h3 a:hover .name {
 		text-decoration: underline;
 		text-underline-offset: 4px;
 	}
 
-	/* An inline block, so the title's underline stops before the arrow */
-	h3 span {
-		display: inline-block;
+	h3 .arrow {
 		color: var(--accent);
 	}
 
@@ -390,10 +394,10 @@ const websiteSchema = {
 		const button = event.target instanceof Element ? event.target.closest('[data-show-all]') : null;
 		const page = button && writing();
 		if (!page) return;
-		const hadFocus = document.activeElement === button;
 		show(page, null);
-		// The button is gone: keep the keyboard's place in Writing, on its heading.
-		if (hadFocus) document.getElementById('writing-title')?.focus();
+		// The button is gone: keep the keyboard's or the screen reader's place in Writing, on its heading. (Focused this
+		// way after a mouse click, it shows no focus ring.)
+		document.getElementById('writing-title')?.focus({ preventScroll: true });
 	});
 
 	// Arriving on the home, by a page load or a ClientRouter swap: all the articles, and no pick.

From cd5b9e80d2eeb09bbccf024a16d3cc206ee6c676 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:26:53 +0000
Subject: [PATCH 5/5] Warn about an empty topics list too

At 30% or more, every article has at least one topic, so an empty list is a
mistake like a missing one. Say in the script what a page restored from the
back-forward cache does.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 src/pages/index.astro | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index d7d4a2d..2469548 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,7 +24,8 @@ for (const id of unknownTopicIds(articles.map((article) => article.id))) {
 }
 const rows = articles.map((article) => {
 	const topics = topicsOf(article);
-	if (!topics) console.warn(`"${article.id}" has no topics, so picking a topic on the home's map hides it: give it a topics field.`);
+	// At 30% or more, every article has at least one topic: three shares under 30% can't make a whole.
+	if (!topics?.length) console.warn(`"${article.id}" has no topics, so picking a topic on the home's map hides it: give it a topics field.`);
 	return {
 		href: `/articles/${article.id}/`,
 		// The day in the content, as UTC keeps it whatever the build machine's time zone
@@ -344,8 +345,9 @@ const websiteSchema = {
 </style>
 
 <script>
-	// The topic filter. The listeners are on the document and added once, and each arrival on the home resets the list
-	// and clears the map's pick, so this also works when Astro's ClientRouter swaps pages instead of loading them.
+	// The topic filter. The listeners are on the document and added once, and each arrival on the home, by a page load
+	// or a swap by Astro's ClientRouter, resets the list and clears the map's pick. (A page the browser restores from its
+	// back-forward cache comes back as it was left, its list and its map still in step.)
 	type Writing = { list: HTMLElement; count: HTMLElement; map: HTMLElement | null };
 
 	// The home's Writing list, or null on another page.