diff --git a/docs/superpowers/plans/2026-05-08-astro-to-payload-migration.md b/docs/superpowers/plans/2026-05-08-astro-to-payload-migration.md
new file mode 100644
index 0000000..d15f831
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-08-astro-to-payload-migration.md
@@ -0,0 +1,3966 @@
+# Astro → Payload Migration Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Migrate `arter.dev` from a static Astro site to a Payload-CMS-driven Next.js application running on Cloudflare Workers, preserving the current visual design and all public URLs.
+
+**Architecture:** Four Payload collections (`posts`, `projects`, `pages`, `tags`) with Lexical bodies and three custom blocks (`linkPreview`, `callout`, `mediaBlock`). A one-shot Local API import script imports content from `~/Documents/projects/arter-blog`. Frontend rebuilt as Next.js App Router routes under `(frontend)`. Auxiliary endpoints (RSS, sitemap, robots, OG) re-implemented as route handlers.
+
+**Tech Stack:** Payload 3.84, Next.js 15.4 (App Router), React 19, Cloudflare Workers / D1 / R2 via opennextjs-cloudflare, Tailwind 4, Vitest (int), Playwright (e2e), `@payloadcms/richtext-lexical`, `gray-matter`, `remark-mdx`, `satori`, `@resvg/resvg-js`.
+
+**Source spec:** `docs/superpowers/specs/2026-05-08-astro-to-payload-migration-design.md`
+
+**Old project (read-only source of truth for content + design):** `~/Documents/projects/arter-blog`
+
+---
+
+## Phase 0 — Foundation
+
+**Milestone:** project deps, lint, fonts, slugify, and site config in place. `pnpm dev` boots; `pnpm test:int` runs an empty suite.
+
+### Task 0.1: Add runtime dependencies
+
+**Files:**
+- Modify: `package.json`
+
+- [ ] **Step 1: Add deps**
+
+```bash
+pnpm add @fontsource-variable/inter @fontsource-variable/newsreader \
+  @fontsource/dm-serif-text @fontsource/krona-one \
+  gray-matter remark-mdx remark-parse remark-stringify unified \
+  satori @resvg/resvg-js \
+  zod
+```
+
+- [ ] **Step 2: Add dev deps**
+
+```bash
+pnpm add -D @types/node tailwindcss @tailwindcss/postcss @tailwindcss/typography
+```
+
+- [ ] **Step 3: Verify install**
+
+Run: `pnpm install`
+Expected: no errors. `node_modules/satori`, `node_modules/gray-matter`, etc. exist.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add package.json pnpm-lock.yaml
+git commit -m "chore: add migration runtime deps"
+```
+
+### Task 0.2: Configure trailing slash to match old URLs
+
+**Files:**
+- Modify: `next.config.ts`
+
+- [ ] **Step 1: Add `trailingSlash`**
+
+In `next.config.ts`, add `trailingSlash: 'always',` inside the `nextConfig` object alongside `images:` and `serverExternalPackages:`.
+
+- [ ] **Step 2: Verify dev still boots**
+
+Run: `pnpm dev`
+Expected: Next starts on http://localhost:3000 with no error.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add next.config.ts
+git commit -m "chore: enable trailingSlash to match legacy URLs"
+```
+
+### Task 0.3: Configure Tailwind 4
+
+**Files:**
+- Create: `postcss.config.mjs`
+- Modify: `src/app/(frontend)/styles.css`
+
+- [ ] **Step 1: Create PostCSS config**
+
+```js
+// postcss.config.mjs
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+
+- [ ] **Step 2: Add Tailwind import to styles.css**
+
+At the very top of `src/app/(frontend)/styles.css`, prepend:
+
+```css
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+```
+
+- [ ] **Step 3: Verify dev rebuild**
+
+Run: `pnpm dev` and visit http://localhost:3000
+Expected: page loads without 500. CSS bundle includes Tailwind base styles (visible utility classes resolve).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add postcss.config.mjs src/app/(frontend)/styles.css
+git commit -m "feat: enable Tailwind 4 in frontend"
+```
+
+### Task 0.4: Port the global stylesheet
+
+**Files:**
+- Modify: `src/app/(frontend)/styles.css`
+- Reference (read-only): `~/Documents/projects/arter-blog/src/styles/`
+
+- [ ] **Step 1: Find the source stylesheet**
+
+```bash
+ls ~/Documents/projects/arter-blog/src/styles/
+```
+
+- [ ] **Step 2: Append CSS variables and base styles**
+
+Copy the CSS custom properties (`--ink`, `--ink-2`, `--ink-3`, `--ink-4`, `--paper`, `--paper-2`, `--hair`, `--hair-2`, plus any font-related vars) and the `prose-editorial` typography block from the old `src/styles/` files into `src/app/(frontend)/styles.css` after the Tailwind imports. Preserve the original property names exactly.
+
+- [ ] **Step 3: Verify**
+
+Run: `pnpm dev` and visit http://localhost:3000
+Expected: no CSS errors in browser console.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/app/(frontend)/styles.css
+git commit -m "feat: port global styles and CSS variables"
+```
+
+### Task 0.5: Wire up fonts
+
+**Files:**
+- Modify: `src/app/(frontend)/layout.tsx`
+
+- [ ] **Step 1: Import fontsource CSS**
+
+Replace the contents of `src/app/(frontend)/layout.tsx` with:
+
+```tsx
+import React from 'react'
+import './styles.css'
+import '@fontsource-variable/inter'
+import '@fontsource-variable/newsreader'
+import '@fontsource/dm-serif-text'
+import '@fontsource/krona-one'
+
+export const metadata = {
+  description: "Chris Arter's blog — software, life, cars.",
+  title: 'Chris Arter | A Blog of Tech & Cars',
+}
+
+export default async function RootLayout(props: { children: React.ReactNode }) {
+  const { children } = props
+  return (
+    <html lang="en">
+      <body className="bg-paper text-ink font-sans antialiased">{children}</body>
+    </html>
+  )
+}
+```
+
+- [ ] **Step 2: Verify dev**
+
+Run: `pnpm dev` and visit http://localhost:3000
+Expected: page loads; font files are requested in network tab.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/layout.tsx
+git commit -m "feat: wire up site fonts in root layout"
+```
+
+### Task 0.6: Port `slugify` (TDD)
+
+**Files:**
+- Create: `src/lib/slugify.ts`
+- Create: `tests/int/slugify.int.spec.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+// tests/int/slugify.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { slugify } from '@/lib/slugify'
+
+describe('slugify', () => {
+  it('lowercases and replaces spaces with hyphens', () => {
+    expect(slugify('Hello World')).toBe('hello-world')
+  })
+  it('strips accents', () => {
+    expect(slugify('Café Résumé')).toBe('cafe-resume')
+  })
+  it('collapses multiple separators', () => {
+    expect(slugify('a   b---c')).toBe('a-b-c')
+  })
+  it('drops disallowed characters', () => {
+    expect(slugify("It's awesome!")).toBe('it-s-awesome')
+  })
+  it('returns empty string for undefined input', () => {
+    expect(slugify(undefined)).toBe('')
+  })
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm test:int -- slugify`
+Expected: FAIL with "Cannot find module '@/lib/slugify'".
+
+- [ ] **Step 3: Verify path alias**
+
+Open `tsconfig.json` and confirm `compilerOptions.paths` contains `"@/*": ["./src/*"]`. If absent, add it.
+
+- [ ] **Step 4: Implement slugify**
+
+```ts
+// src/lib/slugify.ts
+export function slugify(input?: string): string {
+  if (!input) return ''
+  let slug = input.toLowerCase().trim()
+  slug = slug.normalize('NFD').replace(/[̀-ͯ]/g, '')
+  slug = slug.replace(/[^a-z0-9\s-]/g, ' ').trim()
+  slug = slug.replace(/[\s-]+/g, '-')
+  return slug
+}
+```
+
+- [ ] **Step 5: Run test**
+
+Run: `pnpm test:int -- slugify`
+Expected: PASS, 5 tests.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/slugify.ts tests/int/slugify.int.spec.ts
+git commit -m "feat: port slugify utility with tests"
+```
+
+### Task 0.7: Port `site-config`
+
+**Files:**
+- Create: `src/lib/site-config.ts`
+- Reference: `~/Documents/projects/arter-blog/src/data/site-config.ts`
+
+- [ ] **Step 1: Copy verbatim**
+
+Copy the entire file contents from the reference into `src/lib/site-config.ts`. The exported `siteConfig` and types (`Image`, `Link`, `Hero`, `Subscribe`, `SiteConfig`) come along.
+
+- [ ] **Step 2: Update image paths**
+
+For now, leave `siteConfig.image.src` and `siteConfig.hero.image.src` as `/images/...`. We'll copy `public/images/` over in Task 0.8.
+
+- [ ] **Step 3: Tsc-check**
+
+Run: `pnpm tsc --noEmit`
+Expected: no errors in `site-config.ts`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/site-config.ts
+git commit -m "feat: port site-config"
+```
+
+### Task 0.8: Copy non-post static images and fonts
+
+**Files:**
+- Create: `public/images/*` (multiple)
+- Create: `public/fonts/KronaOne-Regular.ttf`
+
+- [ ] **Step 1: Copy images that are referenced from layout/site-config (not from posts)**
+
+The post-body images (slug-style names like `1737473617680-…png`) move to R2 via the import script later. The hero/about/auth-onion etc. assets stay static.
+
+```bash
+mkdir -p public/images public/fonts
+cp ~/Documents/projects/arter-blog/public/fonts/KronaOne-Regular.ttf public/fonts/
+cp ~/Documents/projects/arter-blog/public/images/chris-arter.jpg public/images/ 2>/dev/null || true
+cp ~/Documents/projects/arter-blog/public/images/chris-arter.jpeg public/images/ 2>/dev/null || true
+cp ~/Documents/projects/arter-blog/public/images/auth-onion.svg public/images/ 2>/dev/null || true
+cp ~/Documents/projects/arter-blog/public/images/auth-onion.png public/images/ 2>/dev/null || true
+cp ~/Documents/projects/arter-blog/public/images/bluesky-logo-dark-theme.svg public/images/ 2>/dev/null || true
+```
+
+- [ ] **Step 2: Verify**
+
+Run: `ls public/images/ public/fonts/`
+Expected: lists the copied files.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add public/images public/fonts
+git commit -m "feat: bring over static images and Krona One font"
+```
+
+---
+
+## Phase 1 — Schema
+
+**Milestone:** four new collections registered in `payload.config.ts`. `pnpm payload generate:types` produces the right `Post`, `Project`, `Page`, `Tag` types. A migration is created and applied locally; the admin UI shows all four collections.
+
+### Task 1.1: Create the `tags` collection
+
+**Files:**
+- Create: `src/collections/Tags.ts`
+
+- [ ] **Step 1: Write the collection**
+
+```ts
+// src/collections/Tags.ts
+import type { CollectionConfig } from 'payload'
+import { slugify } from '@/lib/slugify'
+
+export const Tags: CollectionConfig = {
+  slug: 'tags',
+  admin: { useAsTitle: 'name', defaultColumns: ['name', 'slug'] },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    { name: 'name', type: 'text', required: true, unique: true },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      index: true,
+      hooks: {
+        beforeChange: [
+          ({ value, data }) => value || slugify(data?.name as string | undefined),
+        ],
+      },
+      admin: { description: 'Auto-generated from name if empty.' },
+    },
+    { name: 'description', type: 'textarea' },
+  ],
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/collections/Tags.ts
+git commit -m "feat(schema): add Tags collection"
+```
+
+### Task 1.2: Create the `pages` collection
+
+**Files:**
+- Create: `src/collections/Pages.ts`
+
+- [ ] **Step 1: Write the collection**
+
+```ts
+// src/collections/Pages.ts
+import type { CollectionConfig } from 'payload'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: { useAsTitle: 'title', defaultColumns: ['title', 'slug', 'updatedAt'] },
+  versions: { drafts: true },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    { name: 'title', type: 'text', required: true },
+    { name: 'slug', type: 'text', required: true, unique: true, index: true },
+    { name: 'subtitle', type: 'text' },
+    { name: 'description', type: 'textarea' },
+    {
+      name: 'seo',
+      type: 'group',
+      fields: [
+        { name: 'title', type: 'text' },
+        { name: 'description', type: 'textarea' },
+        {
+          name: 'pageType',
+          type: 'select',
+          options: ['website', 'article'],
+          defaultValue: 'website',
+        },
+        { name: 'image', type: 'upload', relationTo: 'media' },
+      ],
+    },
+    { name: 'body', type: 'richText', editor: lexicalEditor() },
+  ],
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/collections/Pages.ts
+git commit -m "feat(schema): add Pages collection"
+```
+
+### Task 1.3: Create the `projects` collection
+
+**Files:**
+- Create: `src/collections/Projects.ts`
+
+- [ ] **Step 1: Write the collection**
+
+```ts
+// src/collections/Projects.ts
+import type { CollectionConfig } from 'payload'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const Projects: CollectionConfig = {
+  slug: 'projects',
+  admin: { useAsTitle: 'title', defaultColumns: ['title', 'slug', 'publishDate', 'isFeatured'] },
+  versions: { drafts: true },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    { name: 'title', type: 'text', required: true },
+    { name: 'slug', type: 'text', required: true, unique: true, index: true },
+    { name: 'description', type: 'textarea' },
+    { name: 'publishDate', type: 'date', required: true, index: true },
+    { name: 'isFeatured', type: 'checkbox', defaultValue: false },
+    { name: 'coverImage', type: 'upload', relationTo: 'media' },
+    {
+      name: 'seo',
+      type: 'group',
+      fields: [
+        { name: 'title', type: 'text' },
+        { name: 'description', type: 'textarea' },
+        {
+          name: 'pageType',
+          type: 'select',
+          options: ['website', 'article'],
+          defaultValue: 'article',
+        },
+        { name: 'image', type: 'upload', relationTo: 'media' },
+      ],
+    },
+    { name: 'body', type: 'richText', editor: lexicalEditor() },
+  ],
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/collections/Projects.ts
+git commit -m "feat(schema): add Projects collection"
+```
+
+### Task 1.4: Create the `posts` collection
+
+**Files:**
+- Create: `src/collections/Posts.ts`
+
+- [ ] **Step 1: Write the collection**
+
+```ts
+// src/collections/Posts.ts
+import type { CollectionConfig } from 'payload'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const Posts: CollectionConfig = {
+  slug: 'posts',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'slug', 'publishDate', '_status'],
+  },
+  versions: { drafts: true },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    { name: 'title', type: 'text', required: true },
+    { name: 'slug', type: 'text', required: true, unique: true, index: true },
+    { name: 'subtitle', type: 'text' },
+    { name: 'excerpt', type: 'textarea' },
+    { name: 'publishDate', type: 'date', required: true, index: true },
+    { name: 'updatedDate', type: 'date' },
+    { name: 'isFeatured', type: 'checkbox', defaultValue: false },
+    {
+      name: 'tags',
+      type: 'relationship',
+      relationTo: 'tags',
+      hasMany: true,
+      index: true,
+    },
+    { name: 'coverImage', type: 'upload', relationTo: 'media' },
+    {
+      name: 'seo',
+      type: 'group',
+      fields: [
+        { name: 'title', type: 'text' },
+        { name: 'description', type: 'textarea' },
+        {
+          name: 'pageType',
+          type: 'select',
+          options: ['website', 'article'],
+          defaultValue: 'article',
+        },
+        { name: 'image', type: 'upload', relationTo: 'media' },
+      ],
+    },
+    { name: 'body', type: 'richText', editor: lexicalEditor() },
+  ],
+  indexes: [
+    { fields: ['publishDate', '_status'] },
+  ],
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/collections/Posts.ts
+git commit -m "feat(schema): add Posts collection"
+```
+
+### Task 1.5: Register new collections in `payload.config.ts`
+
+**Files:**
+- Modify: `src/payload.config.ts`
+
+- [ ] **Step 1: Update imports and `collections` array**
+
+Replace the imports and `collections: [Users, Media]` line:
+
+```ts
+import { Users } from './collections/Users'
+import { Media } from './collections/Media'
+import { Tags } from './collections/Tags'
+import { Pages } from './collections/Pages'
+import { Projects } from './collections/Projects'
+import { Posts } from './collections/Posts'
+```
+
+```ts
+collections: [Users, Media, Tags, Pages, Projects, Posts],
+```
+
+- [ ] **Step 2: Generate types**
+
+Run: `pnpm generate:types:payload`
+Expected: `src/payload-types.ts` updates to include `Post`, `Project`, `Page`, `Tag` types.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/payload.config.ts src/payload-types.ts
+git commit -m "feat(schema): register new collections in payload.config"
+```
+
+### Task 1.6: Create and apply schema migration locally
+
+**Files:**
+- Create: `src/migrations/<timestamp>_<name>.ts` (auto-generated)
+
+- [ ] **Step 1: Generate migration**
+
+Run: `pnpm payload migrate:create --name add_posts_projects_pages_tags`
+Expected: a new file appears under `src/migrations/`.
+
+- [ ] **Step 2: Apply locally**
+
+Run: `pnpm payload migrate`
+Expected: migration applies without error.
+
+- [ ] **Step 3: Smoke-test the admin**
+
+Run: `pnpm dev`, visit http://localhost:3000/admin (create first user if prompted), confirm Posts, Projects, Pages, Tags appear in the sidebar and you can open each collection's empty list.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/migrations
+git commit -m "feat(schema): add migration for new collections"
+```
+
+---
+
+## Phase 2 — Lexical custom blocks
+
+**Milestone:** when you create a Post in the admin, the rich-text editor offers `Link Preview`, `Callout`, and `Media` blocks alongside paragraphs/headings. Inserted blocks render filled-in fields in admin and serialize cleanly.
+
+### Task 2.1: Define block configs
+
+**Files:**
+- Create: `src/blocks/linkPreview.ts`
+- Create: `src/blocks/callout.ts`
+- Create: `src/blocks/mediaBlock.ts`
+- Create: `src/blocks/index.ts`
+
+- [ ] **Step 1: Create `linkPreview` block**
+
+```ts
+// src/blocks/linkPreview.ts
+import type { Block } from 'payload'
+
+export const LinkPreviewBlock: Block = {
+  slug: 'linkPreview',
+  interfaceName: 'LinkPreviewBlock',
+  fields: [
+    { name: 'url', type: 'text', required: true },
+    { name: 'title', type: 'text' },
+    { name: 'description', type: 'textarea' },
+    { name: 'image', type: 'upload', relationTo: 'media' },
+  ],
+}
+```
+
+- [ ] **Step 2: Create `callout` block**
+
+```ts
+// src/blocks/callout.ts
+import type { Block } from 'payload'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+export const CalloutBlock: Block = {
+  slug: 'callout',
+  interfaceName: 'CalloutBlock',
+  fields: [
+    { name: 'title', type: 'text' },
+    {
+      name: 'variant',
+      type: 'select',
+      options: ['default', 'note', 'warning', 'tip'],
+      defaultValue: 'default',
+    },
+    { name: 'content', type: 'richText', editor: lexicalEditor() },
+  ],
+}
+```
+
+- [ ] **Step 3: Create `mediaBlock` block**
+
+```ts
+// src/blocks/mediaBlock.ts
+import type { Block } from 'payload'
+
+export const MediaBlock: Block = {
+  slug: 'mediaBlock',
+  interfaceName: 'MediaBlock',
+  fields: [
+    { name: 'media', type: 'upload', relationTo: 'media', required: true },
+    { name: 'caption', type: 'text' },
+    {
+      name: 'widthHint',
+      type: 'select',
+      options: ['full', 'wide', 'inline'],
+      defaultValue: 'full',
+    },
+  ],
+}
+```
+
+- [ ] **Step 4: Index file**
+
+```ts
+// src/blocks/index.ts
+export { LinkPreviewBlock } from './linkPreview'
+export { CalloutBlock } from './callout'
+export { MediaBlock } from './mediaBlock'
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/blocks
+git commit -m "feat(blocks): define linkPreview, callout, mediaBlock"
+```
+
+### Task 2.2: Register blocks on body fields
+
+**Files:**
+- Modify: `src/collections/Posts.ts`
+- Modify: `src/collections/Projects.ts`
+- Modify: `src/collections/Pages.ts`
+
+- [ ] **Step 1: Add a shared body editor**
+
+Create `src/lib/lexical-editor.ts`:
+
+```ts
+// src/lib/lexical-editor.ts
+import {
+  BlocksFeature,
+  HeadingFeature,
+  HorizontalRuleFeature,
+  lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+import { LinkPreviewBlock, CalloutBlock, MediaBlock } from '@/blocks'
+
+export const bodyEditor = lexicalEditor({
+  features: ({ defaultFeatures }) => [
+    ...defaultFeatures,
+    HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4', 'h5', 'h6'] }),
+    HorizontalRuleFeature(),
+    BlocksFeature({ blocks: [LinkPreviewBlock, CalloutBlock, MediaBlock] }),
+  ],
+})
+```
+
+- [ ] **Step 2: Use it in each collection**
+
+In `Posts.ts`, `Projects.ts`, `Pages.ts`, replace `editor: lexicalEditor()` on the `body` field with `editor: bodyEditor` and add `import { bodyEditor } from '@/lib/lexical-editor'` at the top of each file.
+
+- [ ] **Step 3: Generate types**
+
+Run: `pnpm generate:types:payload`
+Expected: `LinkPreviewBlock`, `CalloutBlock`, `MediaBlock` types appear in `payload-types.ts`.
+
+- [ ] **Step 4: Smoke-test admin**
+
+Run: `pnpm dev`, open admin, edit a post body, verify the "Insert Block" menu shows the three blocks.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/collections src/lib/lexical-editor.ts src/payload-types.ts
+git commit -m "feat(blocks): register custom blocks on body fields"
+```
+
+---
+
+## Phase 3 — Import script: scaffold, parsing, tags, images
+
+**Milestone:** `pnpm import:astro --dry-run` parses every old markdown file, validates frontmatter, plans tag upserts and image uploads, and prints a summary — without writing to the DB.
+
+### Task 3.1: Add `import:astro` script entry
+
+**Files:**
+- Modify: `package.json`
+
+- [ ] **Step 1: Add script**
+
+In `package.json` `scripts`, add:
+
+```json
+"import:astro": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" tsx scripts/import-from-astro.ts",
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add package.json
+git commit -m "chore: add import:astro script entry"
+```
+
+### Task 3.2: Frontmatter Zod schemas
+
+**Files:**
+- Create: `scripts/import/schemas.ts`
+- Create: `tests/int/import-schemas.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/import-schemas.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { postFrontmatterSchema } from '../../scripts/import/schemas'
+
+describe('postFrontmatterSchema', () => {
+  it('accepts a valid post', () => {
+    const ok = postFrontmatterSchema.parse({
+      title: 'X',
+      publishDate: '2025-01-21',
+      tags: ['Laravel'],
+    })
+    expect(ok.title).toBe('X')
+  })
+  it('rejects a missing title', () => {
+    expect(() =>
+      postFrontmatterSchema.parse({ publishDate: '2025-01-21' }),
+    ).toThrow()
+  })
+  it('coerces publishDate to a Date', () => {
+    const r = postFrontmatterSchema.parse({ title: 'X', publishDate: '2025-01-21' })
+    expect(r.publishDate).toBeInstanceOf(Date)
+  })
+})
+```
+
+- [ ] **Step 2: Run, verify fail**
+
+Run: `pnpm test:int -- import-schemas`
+Expected: FAIL "Cannot find module".
+
+- [ ] **Step 3: Implement**
+
+```ts
+// scripts/import/schemas.ts
+import { z } from 'zod'
+
+const seoSchema = z
+  .object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    image: z
+      .object({ src: z.string(), alt: z.string().optional() })
+      .optional(),
+    pageType: z.enum(['website', 'article']).default('website'),
+  })
+  .partial()
+
+export const postFrontmatterSchema = z.object({
+  title: z.string(),
+  slug: z.string().optional(),
+  subtitle: z.string().optional(),
+  author: z.string().optional(),
+  excerpt: z.string().optional(),
+  publishDate: z.coerce.date(),
+  updatedDate: z.coerce.date().optional(),
+  isFeatured: z.boolean().default(false),
+  tags: z.array(z.string()).default([]),
+  seo: seoSchema.optional(),
+})
+
+export const projectFrontmatterSchema = z.object({
+  title: z.string(),
+  description: z.string().optional(),
+  publishDate: z.coerce.date(),
+  isFeatured: z.boolean().default(false),
+  seo: seoSchema.optional(),
+})
+
+export const pageFrontmatterSchema = z.object({
+  title: z.string(),
+  description: z.string().optional(),
+  subtitle: z.string().optional(),
+  seo: seoSchema.optional(),
+})
+
+export type PostFrontmatter = z.infer<typeof postFrontmatterSchema>
+export type ProjectFrontmatter = z.infer<typeof projectFrontmatterSchema>
+export type PageFrontmatter = z.infer<typeof pageFrontmatterSchema>
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- import-schemas`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add scripts/import/schemas.ts tests/int/import-schemas.int.spec.ts
+git commit -m "feat(import): frontmatter validation schemas"
+```
+
+### Task 3.3: File discovery + parsing
+
+**Files:**
+- Create: `scripts/import/discover.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/import/discover.ts
+import { readFile, readdir } from 'node:fs/promises'
+import { extname, join, basename } from 'node:path'
+import matter from 'gray-matter'
+import {
+  pageFrontmatterSchema,
+  postFrontmatterSchema,
+  projectFrontmatterSchema,
+  type PageFrontmatter,
+  type PostFrontmatter,
+  type ProjectFrontmatter,
+} from './schemas'
+
+export type DiscoveredFile<T> = {
+  type: 'post' | 'project' | 'page'
+  filePath: string
+  slug: string
+  body: string
+  frontmatter: T
+  isMdx: boolean
+}
+
+async function listMarkdown(dir: string): Promise<string[]> {
+  const out: string[] = []
+  const entries = await readdir(dir, { withFileTypes: true })
+  for (const e of entries) {
+    if (e.isFile() && (extname(e.name) === '.md' || extname(e.name) === '.mdx')) {
+      out.push(join(dir, e.name))
+    }
+  }
+  return out
+}
+
+function slugFromFile(filePath: string): string {
+  return basename(filePath).replace(/\.(md|mdx)$/, '')
+}
+
+async function parseOne<T>(filePath: string, schema: { parse: (raw: unknown) => T }) {
+  const raw = await readFile(filePath, 'utf8')
+  const { data, content } = matter(raw)
+  const frontmatter = schema.parse(data)
+  return {
+    filePath,
+    slug: slugFromFile(filePath),
+    body: content,
+    frontmatter,
+    isMdx: extname(filePath) === '.mdx',
+  }
+}
+
+export async function discoverAll(sourceRoot: string) {
+  const blogDir = join(sourceRoot, 'src/content/blog')
+  const projectsDir = join(sourceRoot, 'src/content/projects')
+  const pagesDir = join(sourceRoot, 'src/content/pages')
+
+  const [blogFiles, projectFiles, pageFiles] = await Promise.all([
+    listMarkdown(blogDir),
+    listMarkdown(projectsDir),
+    listMarkdown(pagesDir),
+  ])
+
+  const posts: DiscoveredFile<PostFrontmatter>[] = []
+  for (const f of blogFiles) posts.push({ type: 'post', ...(await parseOne(f, postFrontmatterSchema)) })
+
+  const projects: DiscoveredFile<ProjectFrontmatter>[] = []
+  for (const f of projectFiles)
+    projects.push({ type: 'project', ...(await parseOne(f, projectFrontmatterSchema)) })
+
+  const pages: DiscoveredFile<PageFrontmatter>[] = []
+  for (const f of pageFiles)
+    pages.push({ type: 'page', ...(await parseOne(f, pageFrontmatterSchema)) })
+
+  return { posts, projects, pages }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add scripts/import/discover.ts
+git commit -m "feat(import): file discovery and frontmatter parsing"
+```
+
+### Task 3.4: Tag upsert (idempotent)
+
+**Files:**
+- Create: `scripts/import/tags.ts`
+- Create: `tests/int/import-tags.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/import-tags.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { collectUniqueTags } from '../../scripts/import/tags'
+
+describe('collectUniqueTags', () => {
+  it('flattens and dedupes by slug', () => {
+    const r = collectUniqueTags([
+      { tags: ['Laravel', 'PHP'] },
+      { tags: ['laravel', 'Docker'] },
+    ])
+    expect(r.map((t) => t.slug).sort()).toEqual(['docker', 'laravel', 'php'])
+  })
+  it('preserves first-seen display name', () => {
+    const r = collectUniqueTags([{ tags: ['Laravel'] }, { tags: ['laravel'] }])
+    expect(r[0].name).toBe('Laravel')
+  })
+})
+```
+
+- [ ] **Step 2: Run, verify fail**
+
+Run: `pnpm test:int -- import-tags`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// scripts/import/tags.ts
+import type { Payload } from 'payload'
+import { slugify } from '@/lib/slugify'
+
+export function collectUniqueTags(posts: { tags: string[] }[]) {
+  const map = new Map<string, { name: string; slug: string }>()
+  for (const p of posts) {
+    for (const name of p.tags ?? []) {
+      const slug = slugify(name)
+      if (!slug) continue
+      if (!map.has(slug)) map.set(slug, { name, slug })
+    }
+  }
+  return [...map.values()]
+}
+
+export async function upsertTags(payload: Payload, tags: { name: string; slug: string }[]) {
+  const idBySlug = new Map<string, string | number>()
+  for (const tag of tags) {
+    const existing = await payload.find({
+      collection: 'tags',
+      where: { slug: { equals: tag.slug } },
+      limit: 1,
+    })
+    if (existing.docs[0]) {
+      idBySlug.set(tag.slug, existing.docs[0].id)
+      continue
+    }
+    const created = await payload.create({ collection: 'tags', data: tag })
+    idBySlug.set(tag.slug, created.id)
+  }
+  return idBySlug
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- import-tags`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add scripts/import/tags.ts tests/int/import-tags.int.spec.ts
+git commit -m "feat(import): tag collection + upsert helper"
+```
+
+### Task 3.5: Image upload with disk cache
+
+**Files:**
+- Create: `scripts/import/images.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/import/images.ts
+import { readFile, mkdir, stat, writeFile } from 'node:fs/promises'
+import { basename, dirname, join } from 'node:path'
+import type { Payload } from 'payload'
+
+const CACHE_PATH = '.import-cache/media.json'
+
+type Cache = Record<string, string | number>
+
+async function loadCache(): Promise<Cache> {
+  try {
+    const raw = await readFile(CACHE_PATH, 'utf8')
+    return JSON.parse(raw)
+  } catch {
+    return {}
+  }
+}
+
+async function saveCache(cache: Cache) {
+  await mkdir(dirname(CACHE_PATH), { recursive: true })
+  await writeFile(CACHE_PATH, JSON.stringify(cache, null, 2))
+}
+
+export async function uploadImage(
+  payload: Payload,
+  publicImagePath: string, // e.g. /images/foo.png
+  sourceRoot: string,
+  alt: string,
+  cache: Cache,
+): Promise<string | number | undefined> {
+  if (cache[publicImagePath]) return cache[publicImagePath]
+  const filePath = join(sourceRoot, 'public', publicImagePath)
+  try {
+    await stat(filePath)
+  } catch {
+    console.warn(`[image] missing ${filePath}`)
+    return undefined
+  }
+  const data = await readFile(filePath)
+  const filename = basename(filePath)
+  const created = await payload.create({
+    collection: 'media',
+    data: { alt },
+    file: { data, mimetype: mimeFor(filename), name: filename, size: data.byteLength },
+  })
+  cache[publicImagePath] = created.id
+  return created.id
+}
+
+export async function loadImageCache() {
+  return loadCache()
+}
+export async function persistImageCache(cache: Cache) {
+  await saveCache(cache)
+}
+
+function mimeFor(name: string) {
+  const ext = name.toLowerCase().split('.').pop() || ''
+  return (
+    {
+      png: 'image/png',
+      jpg: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      webp: 'image/webp',
+      gif: 'image/gif',
+      svg: 'image/svg+xml',
+    } as Record<string, string>
+  )[ext] ?? 'application/octet-stream'
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add scripts/import/images.ts
+git commit -m "feat(import): media upload helper with disk cache"
+```
+
+### Task 3.6: Image reference scanner
+
+**Files:**
+- Create: `scripts/import/scan-image-refs.ts`
+- Create: `tests/int/scan-image-refs.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/scan-image-refs.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { scanImageRefs } from '../../scripts/import/scan-image-refs'
+
+describe('scanImageRefs', () => {
+  it('finds markdown image syntax', () => {
+    const r = scanImageRefs('![alt](/images/foo.png)\n![x](/images/bar.jpg)')
+    expect(r.sort()).toEqual(['/images/bar.jpg', '/images/foo.png'])
+  })
+  it('finds raw <img> src', () => {
+    const r = scanImageRefs('<img src="/images/foo.png" class="w-96"/>')
+    expect(r).toEqual(['/images/foo.png'])
+  })
+  it('dedupes', () => {
+    const r = scanImageRefs('![a](/images/x.png) ![b](/images/x.png)')
+    expect(r).toEqual(['/images/x.png'])
+  })
+  it('ignores external URLs', () => {
+    const r = scanImageRefs('![a](https://example.com/x.png)')
+    expect(r).toEqual([])
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail**
+
+Run: `pnpm test:int -- scan-image-refs`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// scripts/import/scan-image-refs.ts
+const MD_IMG = /!\[[^\]]*\]\((\/images\/[^)\s]+)\)/g
+const HTML_IMG = /<img[^>]+src=["'](\/images\/[^"']+)["']/g
+
+export function scanImageRefs(source: string): string[] {
+  const set = new Set<string>()
+  for (const m of source.matchAll(MD_IMG)) set.add(m[1])
+  for (const m of source.matchAll(HTML_IMG)) set.add(m[1])
+  return [...set]
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- scan-image-refs`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add scripts/import/scan-image-refs.ts tests/int/scan-image-refs.int.spec.ts
+git commit -m "feat(import): scan markdown/html for image refs"
+```
+
+### Task 3.7: Orchestrator skeleton with `--dry-run`
+
+**Files:**
+- Create: `scripts/import-from-astro.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/import-from-astro.ts
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { getPayload } from 'payload'
+import config from '@/payload.config'
+import { discoverAll } from './import/discover'
+import { collectUniqueTags, upsertTags } from './import/tags'
+import { scanImageRefs } from './import/scan-image-refs'
+
+const args = new Map<string, string | true>(
+  process.argv.slice(2).map((a) => {
+    const m = a.match(/^--([^=]+)(?:=(.*))?$/)
+    return m ? [m[1], m[2] ?? true] : ['_', a]
+  }),
+)
+const dryRun = args.get('dry-run') === true
+const sourceRoot =
+  (args.get('source') as string | undefined) ??
+  path.resolve(fileURLToPath(import.meta.url), '../../../arter-blog')
+
+async function main() {
+  console.log(`[import] source=${sourceRoot} dryRun=${dryRun}`)
+  const { posts, projects, pages } = await discoverAll(sourceRoot)
+  console.log(`[import] discovered: ${posts.length} posts, ${projects.length} projects, ${pages.length} pages`)
+
+  const tags = collectUniqueTags(posts.map((p) => ({ tags: p.frontmatter.tags ?? [] })))
+  console.log(`[import] unique tags: ${tags.length}`)
+
+  const allRefs = new Set<string>()
+  for (const p of [...posts, ...projects, ...pages]) {
+    for (const ref of scanImageRefs(p.body)) allRefs.add(ref)
+    const seoSrc = (p.frontmatter as { seo?: { image?: { src?: string } } }).seo?.image?.src
+    if (seoSrc?.startsWith('/images/')) allRefs.add(seoSrc)
+  }
+  console.log(`[import] unique image refs: ${allRefs.size}`)
+
+  if (dryRun) {
+    console.log('[import] --dry-run: skipping all writes')
+    return
+  }
+
+  const payload = await getPayload({ config })
+  const tagIdBySlug = await upsertTags(payload, tags)
+  console.log(`[import] tags upserted: ${tagIdBySlug.size}`)
+  // (image upload and content write follow in later tasks)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})
+```
+
+- [ ] **Step 2: Smoke-test dry run**
+
+Run: `pnpm import:astro --dry-run`
+Expected: prints discovery counts (43/8/2 ish) and aborts before writing.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add scripts/import-from-astro.ts
+git commit -m "feat(import): orchestrator with --dry-run and tag pass"
+```
+
+---
+
+## Phase 4 — Markdown → Lexical converter
+
+**Milestone:** every `.md`/`.mdx` file in the old project converts to a Lexical JSON tree without crashing. `<LinkPreview>`, `<ListCallout>`, `<Callout>`, raw `<img>`, and standard markdown all map to the right Lexical nodes/blocks. Conversion is unit-tested for each construct.
+
+### Task 4.1: MDX pre-processor — replace JSX with placeholder fences
+
+**Files:**
+- Create: `scripts/import/preprocess-mdx.ts`
+- Create: `tests/int/preprocess-mdx.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/preprocess-mdx.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { preprocessMdx } from '../../scripts/import/preprocess-mdx'
+
+describe('preprocessMdx', () => {
+  it('replaces self-closing LinkPreview with a placeholder fence', () => {
+    const out = preprocessMdx('<LinkPreview url="https://x.com/" />')
+    expect(out).toMatch(/```block:linkPreview/)
+    expect(out).toMatch(/"url": ?"https:\/\/x\.com\/"/)
+  })
+  it('replaces ListCallout with a callout placeholder containing inner content', () => {
+    const out = preprocessMdx('<ListCallout title="T">\n- a\n- b\n</ListCallout>')
+    expect(out).toMatch(/```block:callout/)
+    expect(out).toMatch(/"title": ?"T"/)
+    expect(out).toMatch(/- a/)
+  })
+  it('leaves plain markdown untouched', () => {
+    expect(preprocessMdx('# Hi\nhello')).toBe('# Hi\nhello')
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail**
+
+Run: `pnpm test:int -- preprocess-mdx`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// scripts/import/preprocess-mdx.ts
+const SELF_CLOSING = /<(LinkPreview)\s+([^/>]*)\/>/g
+const PAIRED = /<(ListCallout|Callout)\s*([^>]*)>([\s\S]*?)<\/\1>/g
+
+function attrsToObject(attrs: string): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const m of attrs.matchAll(/(\w+)=["']([^"']*)["']/g)) {
+    out[m[1]] = m[2]
+  }
+  return out
+}
+
+export function preprocessMdx(source: string): string {
+  let out = source.replace(SELF_CLOSING, (_match, _tag, attrs: string) => {
+    const obj = attrsToObject(attrs)
+    return ['```block:linkPreview', JSON.stringify(obj, null, 2), '```'].join('\n')
+  })
+  out = out.replace(PAIRED, (_match, _tag, attrs: string, inner: string) => {
+    const obj = attrsToObject(attrs)
+    const payload = { ...obj, _children: inner.trim() }
+    return ['```block:callout', JSON.stringify(payload, null, 2), '```'].join('\n')
+  })
+  return out
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- preprocess-mdx`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add scripts/import/preprocess-mdx.ts tests/int/preprocess-mdx.int.spec.ts
+git commit -m "feat(import): MDX-to-fence preprocessor"
+```
+
+### Task 4.2: OG fetch with disk cache
+
+**Files:**
+- Create: `scripts/import/og-fetch.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/import/og-fetch.ts
+import { readFile, mkdir, writeFile } from 'node:fs/promises'
+import { dirname } from 'node:path'
+
+const CACHE_PATH = '.import-cache/og.json'
+type Cache = Record<string, OgMeta>
+export type OgMeta = { title?: string; description?: string; image?: string }
+
+async function load(): Promise<Cache> {
+  try {
+    return JSON.parse(await readFile(CACHE_PATH, 'utf8'))
+  } catch {
+    return {}
+  }
+}
+
+async function save(c: Cache) {
+  await mkdir(dirname(CACHE_PATH), { recursive: true })
+  await writeFile(CACHE_PATH, JSON.stringify(c, null, 2))
+}
+
+function pick(html: string, prop: string): string | undefined {
+  const re = new RegExp(
+    `<meta[^>]+(?:property|name)=["']${prop}["'][^>]+content=["']([^"']+)["']`,
+    'i',
+  )
+  return html.match(re)?.[1]
+}
+
+export async function fetchOg(url: string, cache: Cache): Promise<OgMeta> {
+  if (cache[url]) return cache[url]
+  try {
+    const res = await fetch(url, { headers: { 'user-agent': 'arter-blog-importer/1.0' } })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const html = await res.text()
+    const meta: OgMeta = {
+      title: pick(html, 'og:title') ?? pick(html, 'twitter:title'),
+      description: pick(html, 'og:description') ?? pick(html, 'twitter:description'),
+      image: pick(html, 'og:image') ?? pick(html, 'twitter:image'),
+    }
+    cache[url] = meta
+    return meta
+  } catch (err) {
+    console.warn(`[og] failed for ${url}: ${(err as Error).message}`)
+    cache[url] = {}
+    return {}
+  }
+}
+
+export async function loadOgCache() {
+  return load()
+}
+export async function persistOgCache(c: Cache) {
+  await save(c)
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add scripts/import/og-fetch.ts
+git commit -m "feat(import): OG metadata fetcher with disk cache"
+```
+
+### Task 4.3: Markdown→Lexical conversion
+
+**Files:**
+- Create: `scripts/import/markdown-to-lexical.ts`
+- Create: `tests/int/markdown-to-lexical.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/markdown-to-lexical.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { markdownToLexical } from '../../scripts/import/markdown-to-lexical'
+
+const stubCtx = {
+  imageMap: new Map<string, string | number>([['/images/foo.png', 'media-1']]),
+  fetchOg: async (_url: string) => ({}),
+}
+
+describe('markdownToLexical', () => {
+  it('produces a root with paragraph for plain text', async () => {
+    const r = await markdownToLexical('hello world', stubCtx)
+    expect(r.root.type).toBe('root')
+    expect(r.root.children[0].type).toBe('paragraph')
+  })
+
+  it('preserves headings as heading nodes', async () => {
+    const r = await markdownToLexical('## Section', stubCtx)
+    const h = r.root.children[0]
+    expect(h.type).toBe('heading')
+    expect(h.tag).toBe('h2')
+  })
+
+  it('replaces images that match imageMap with mediaBlock', async () => {
+    const r = await markdownToLexical('![Alt](/images/foo.png)', stubCtx)
+    const node = r.root.children[0]
+    expect(node.type).toBe('block')
+    expect(node.fields.blockType).toBe('mediaBlock')
+    expect(node.fields.media).toBe('media-1')
+  })
+
+  it('handles ```block:linkPreview fences', async () => {
+    const md = '```block:linkPreview\n{"url":"https://x.com/"}\n```'
+    const r = await markdownToLexical(md, stubCtx)
+    expect(r.root.children[0].fields.blockType).toBe('linkPreview')
+    expect(r.root.children[0].fields.url).toBe('https://x.com/')
+  })
+
+  it('handles ```block:callout fences with nested content', async () => {
+    const md = '```block:callout\n{"title":"T","_children":"hi"}\n```'
+    const r = await markdownToLexical(md, stubCtx)
+    expect(r.root.children[0].fields.blockType).toBe('callout')
+    expect(r.root.children[0].fields.title).toBe('T')
+    expect(r.root.children[0].fields.content.root.children[0].type).toBe('paragraph')
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail**
+
+Run: `pnpm test:int -- markdown-to-lexical`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// scripts/import/markdown-to-lexical.ts
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import type { Root, Content, Image, Code, Paragraph, Html } from 'mdast'
+import type { OgMeta } from './og-fetch'
+
+export type Ctx = {
+  imageMap: Map<string, string | number>
+  fetchOg: (url: string) => Promise<OgMeta>
+}
+
+type LexNode = Record<string, unknown>
+
+const HTML_IMG = /<img[^>]+src=["'](\/images\/[^"']+)["'][^>]*?(?:alt=["']([^"']*)["'])?[^>]*?\/?>/g
+
+function textNode(value: string): LexNode {
+  return { type: 'text', text: value, format: 0, version: 1 }
+}
+
+function paragraph(children: LexNode[]): LexNode {
+  return { type: 'paragraph', children, direction: 'ltr', format: '', indent: 0, version: 1 }
+}
+
+function heading(tag: string, text: string): LexNode {
+  return {
+    type: 'heading',
+    tag,
+    children: [textNode(text)],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    version: 1,
+  }
+}
+
+function block(blockType: string, fields: Record<string, unknown>): LexNode {
+  return { type: 'block', fields: { blockType, ...fields }, format: '', version: 2 }
+}
+
+async function convertMdast(node: Content, ctx: Ctx): Promise<LexNode | null> {
+  if (node.type === 'paragraph') {
+    const inline = await Promise.all(node.children.map((c) => convertInline(c, ctx)))
+    const flat = inline.flat().filter(Boolean) as LexNode[]
+    return paragraph(flat)
+  }
+  if (node.type === 'heading') {
+    const text = (node.children as { type: string; value?: string }[])
+      .map((c) => c.value ?? '')
+      .join('')
+    return heading(`h${node.depth}`, text)
+  }
+  if (node.type === 'list') {
+    return {
+      type: 'list',
+      listType: node.ordered ? 'number' : 'bullet',
+      tag: node.ordered ? 'ol' : 'ul',
+      start: node.start ?? 1,
+      children: await Promise.all(
+        node.children.map(async (li) => ({
+          type: 'listitem',
+          value: 1,
+          children: (
+            await Promise.all(li.children.map((c) => convertMdast(c as Content, ctx)))
+          ).filter(Boolean),
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          version: 1,
+        })),
+      ),
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      version: 1,
+    }
+  }
+  if (node.type === 'code') {
+    return await convertCode(node as Code, ctx)
+  }
+  if (node.type === 'blockquote') {
+    return {
+      type: 'quote',
+      children: (
+        await Promise.all(node.children.map((c) => convertMdast(c as Content, ctx)))
+      ).filter(Boolean),
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      version: 1,
+    }
+  }
+  if (node.type === 'thematicBreak') {
+    return { type: 'horizontalrule', version: 1 }
+  }
+  if (node.type === 'html') {
+    return convertHtml(node as Html, ctx)
+  }
+  return null
+}
+
+async function convertInline(node: Content, ctx: Ctx): Promise<LexNode[] | LexNode | null> {
+  if (node.type === 'text') return textNode(node.value)
+  if (node.type === 'strong')
+    return {
+      type: 'text',
+      text: (node.children as { value?: string }[]).map((c) => c.value ?? '').join(''),
+      format: 1,
+      version: 1,
+    }
+  if (node.type === 'emphasis')
+    return {
+      type: 'text',
+      text: (node.children as { value?: string }[]).map((c) => c.value ?? '').join(''),
+      format: 2,
+      version: 1,
+    }
+  if (node.type === 'inlineCode')
+    return { type: 'text', text: node.value, format: 16, version: 1 }
+  if (node.type === 'link') {
+    return {
+      type: 'link',
+      url: node.url,
+      children: [textNode((node.children[0] as { value?: string })?.value ?? node.url)],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      version: 1,
+    }
+  }
+  if (node.type === 'image') {
+    const img = node as Image
+    const id = ctx.imageMap.get(img.url)
+    if (id) {
+      return block('mediaBlock', { media: id, caption: img.alt ?? '', widthHint: 'full' })
+    }
+    return textNode(`[image: ${img.url}]`)
+  }
+  return null
+}
+
+async function convertCode(node: Code, ctx: Ctx): Promise<LexNode | null> {
+  if (node.lang === 'block:linkPreview') {
+    const obj = JSON.parse(node.value) as { url: string; title?: string; description?: string }
+    const og = obj.url ? await ctx.fetchOg(obj.url) : {}
+    return block('linkPreview', {
+      url: obj.url,
+      title: obj.title ?? og.title ?? '',
+      description: obj.description ?? og.description ?? '',
+    })
+  }
+  if (node.lang === 'block:callout') {
+    const obj = JSON.parse(node.value) as {
+      title?: string
+      variant?: string
+      _children?: string
+    }
+    const innerLex = obj._children ? await markdownToLexical(obj._children, ctx) : { root: emptyRoot() }
+    return block('callout', {
+      title: obj.title ?? '',
+      variant: obj.variant ?? 'default',
+      content: innerLex,
+    })
+  }
+  return {
+    type: 'code',
+    language: node.lang ?? '',
+    children: [textNode(node.value)],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    version: 1,
+  }
+}
+
+function emptyRoot(): LexNode {
+  return { type: 'root', children: [], direction: 'ltr', format: '', indent: 0, version: 1 }
+}
+
+async function convertHtml(node: Html, ctx: Ctx): Promise<LexNode | null> {
+  // Handle a paragraph that is just an <img>: turn into mediaBlock
+  const m = [...node.value.matchAll(HTML_IMG)]
+  if (m.length === 1) {
+    const url = m[0][1]
+    const alt = m[0][2] ?? ''
+    const id = ctx.imageMap.get(url)
+    if (id) return block('mediaBlock', { media: id, caption: alt, widthHint: 'full' })
+  }
+  // Otherwise, drop into a paragraph with raw text fallback
+  return paragraph([textNode(node.value)])
+}
+
+export async function markdownToLexical(source: string, ctx: Ctx) {
+  const tree = unified().use(remarkParse).parse(source) as Root
+  const children: LexNode[] = []
+  for (const child of tree.children) {
+    const out = await convertMdast(child as Content, ctx)
+    if (out) children.push(out)
+  }
+  return {
+    root: {
+      type: 'root',
+      children,
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      version: 1,
+    },
+  }
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- markdown-to-lexical`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add scripts/import/markdown-to-lexical.ts tests/int/markdown-to-lexical.int.spec.ts
+git commit -m "feat(import): markdown to lexical converter"
+```
+
+### Task 4.4: Wire converter into orchestrator (still dry-run safe)
+
+**Files:**
+- Modify: `scripts/import-from-astro.ts`
+
+- [ ] **Step 1: Extend the orchestrator to perform a full per-file conversion in dry-run**
+
+Replace the body of `main` with the version that:
+1. Loads `imageCache` and `ogCache`.
+2. After the `dryRun` check, walks each post/project/page; for each, runs `preprocessMdx` (if `.mdx`) then `markdownToLexical` to ensure conversion succeeds.
+3. Logs warnings instead of throwing; tracks an `errors` counter; exits non-zero if any.
+
+```ts
+import { preprocessMdx } from './import/preprocess-mdx'
+import { markdownToLexical } from './import/markdown-to-lexical'
+import { loadImageCache, persistImageCache } from './import/images'
+import { loadOgCache, persistOgCache, fetchOg } from './import/og-fetch'
+
+// inside main(), after discovery + image refs scan:
+const imageCache = await loadImageCache()
+const ogCache = await loadOgCache()
+
+const ctx = {
+  imageMap: new Map<string, string | number>(Object.entries(imageCache)),
+  fetchOg: (url: string) => fetchOg(url, ogCache),
+}
+
+let errors = 0
+for (const file of [...posts, ...projects, ...pages]) {
+  try {
+    const pre = file.isMdx ? preprocessMdx(file.body) : file.body
+    await markdownToLexical(pre, ctx)
+  } catch (err) {
+    errors += 1
+    console.error(`[convert] ${file.filePath}: ${(err as Error).message}`)
+  }
+}
+console.log(`[import] conversion check: ${errors} errors`)
+await persistImageCache(imageCache)
+await persistOgCache(ogCache)
+
+if (errors > 0) process.exit(1)
+if (dryRun) return
+```
+
+- [ ] **Step 2: Run dry-run end-to-end**
+
+Run: `pnpm import:astro --dry-run`
+Expected: counts printed, conversion errors = 0, exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add scripts/import-from-astro.ts
+git commit -m "feat(import): full conversion check in dry-run"
+```
+
+---
+
+## Phase 5 — Import script: writes
+
+**Milestone:** `pnpm import:astro` (no flag) populates the local D1 with all 43 posts, 8 projects, 2 pages, all tags, all post images uploaded to local R2. Re-running is a no-op (slugs match, image cache hits).
+
+### Task 5.1: Image pre-pass (uploads before conversion)
+
+**Files:**
+- Modify: `scripts/import-from-astro.ts`
+
+- [ ] **Step 1: Add image upload loop**
+
+After tag upsert, before the per-file conversion check, add:
+
+```ts
+// upload all unique image refs first
+for (const ref of allRefs) {
+  const id = await uploadImage(payload, ref, sourceRoot, ref.split('/').pop() ?? ref, imageCache)
+  if (id !== undefined) imageCache[ref] = id
+}
+ctx.imageMap = new Map(Object.entries(imageCache))
+console.log(`[import] images uploaded/cached: ${Object.keys(imageCache).length}`)
+```
+
+(Add `import { uploadImage } from './import/images'` at the top.)
+
+- [ ] **Step 2: Verify in admin**
+
+Run: `pnpm import:astro` and visit http://localhost:3000/admin/collections/media
+Expected: ~30+ media entries.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add scripts/import-from-astro.ts
+git commit -m "feat(import): upload images before content conversion"
+```
+
+### Task 5.2: Record upsert helper
+
+**Files:**
+- Create: `scripts/import/upsert-record.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/import/upsert-record.ts
+import type { Payload } from 'payload'
+
+export type Slug = 'posts' | 'projects' | 'pages'
+
+export async function upsertRecord(
+  payload: Payload,
+  collection: Slug,
+  slug: string,
+  data: Record<string, unknown>,
+) {
+  const existing = await payload.find({
+    collection,
+    where: { slug: { equals: slug } },
+    limit: 1,
+  })
+  if (existing.docs[0]) {
+    await payload.update({
+      collection,
+      id: existing.docs[0].id,
+      data: { ...data, slug },
+    })
+    return { action: 'updated' as const }
+  }
+  await payload.create({ collection, data: { ...data, slug } })
+  return { action: 'created' as const }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add scripts/import/upsert-record.ts
+git commit -m "feat(import): record upsert helper"
+```
+
+### Task 5.3: Write posts
+
+**Files:**
+- Modify: `scripts/import-from-astro.ts`
+
+- [ ] **Step 1: Add the posts loop**
+
+Replace the conversion-check loop with one that builds full data and upserts. For posts:
+
+```ts
+import { upsertRecord } from './import/upsert-record'
+
+// ... after image upload + ctx setup (tagIdBySlug already captured from Task 3.7)
+let created = 0, updated = 0
+for (const file of posts) {
+  const pre = file.isMdx ? preprocessMdx(file.body) : file.body
+  const body = await markdownToLexical(pre, ctx)
+  const fm = file.frontmatter
+  const tagIds = (fm.tags ?? [])
+    .map((t) => tagIdBySlug.get(slugify(t)))
+    .filter((id): id is string | number => id !== undefined)
+  const seoSrc = fm.seo?.image?.src
+  const coverImage =
+    seoSrc?.startsWith('/images/') ? imageCache[seoSrc] : undefined
+  const data = {
+    title: fm.title,
+    subtitle: fm.subtitle,
+    excerpt: fm.excerpt,
+    publishDate: fm.publishDate,
+    updatedDate: fm.updatedDate,
+    isFeatured: fm.isFeatured,
+    tags: tagIds,
+    coverImage,
+    seo: {
+      title: fm.seo?.title,
+      description: fm.seo?.description,
+      pageType: fm.seo?.pageType ?? 'article',
+      image: coverImage,
+    },
+    body,
+    _status: 'published',
+  }
+  const r = await upsertRecord(payload, 'posts', file.slug, data)
+  r.action === 'created' ? created++ : updated++
+}
+console.log(`[import] posts: ${created} created, ${updated} updated`)
+```
+
+(Add `import { slugify } from '@/lib/slugify'`.)
+
+- [ ] **Step 2: Run import**
+
+Run: `pnpm import:astro`
+Expected: posts loop reports 43 created (or 0 created / 43 updated on a re-run).
+
+- [ ] **Step 3: Spot-check admin**
+
+Visit http://localhost:3000/admin/collections/posts and open a few posts. Confirm titles, dates, tag chips, and rich-text body render.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add scripts/import-from-astro.ts
+git commit -m "feat(import): write posts into Payload"
+```
+
+### Task 5.4: Write projects and pages
+
+**Files:**
+- Modify: `scripts/import-from-astro.ts`
+
+- [ ] **Step 1: Add project loop (after posts loop)**
+
+```ts
+let pCreated = 0, pUpdated = 0
+for (const file of projects) {
+  const pre = file.isMdx ? preprocessMdx(file.body) : file.body
+  const body = await markdownToLexical(pre, ctx)
+  const fm = file.frontmatter
+  const seoSrc = fm.seo?.image?.src
+  const coverImage = seoSrc?.startsWith('/images/') ? imageCache[seoSrc] : undefined
+  const data = {
+    title: fm.title,
+    description: fm.description,
+    publishDate: fm.publishDate,
+    isFeatured: fm.isFeatured,
+    coverImage,
+    seo: {
+      title: fm.seo?.title,
+      description: fm.seo?.description,
+      pageType: fm.seo?.pageType ?? 'article',
+      image: coverImage,
+    },
+    body,
+    _status: 'published',
+  }
+  const r = await upsertRecord(payload, 'projects', file.slug, data)
+  r.action === 'created' ? pCreated++ : pUpdated++
+}
+console.log(`[import] projects: ${pCreated} created, ${pUpdated} updated`)
+```
+
+- [ ] **Step 2: Add pages loop**
+
+```ts
+let pgCreated = 0, pgUpdated = 0
+for (const file of pages) {
+  const pre = file.isMdx ? preprocessMdx(file.body) : file.body
+  const body = await markdownToLexical(pre, ctx)
+  const fm = file.frontmatter
+  const seoSrc = fm.seo?.image?.src
+  const coverImage = seoSrc?.startsWith('/images/') ? imageCache[seoSrc] : undefined
+  const data = {
+    title: fm.title,
+    subtitle: fm.subtitle,
+    description: fm.description,
+    seo: {
+      title: fm.seo?.title,
+      description: fm.seo?.description,
+      pageType: fm.seo?.pageType ?? 'website',
+      image: coverImage,
+    },
+    body,
+    _status: 'published',
+  }
+  const r = await upsertRecord(payload, 'pages', file.slug, data)
+  r.action === 'created' ? pgCreated++ : pgUpdated++
+}
+console.log(`[import] pages: ${pgCreated} created, ${pgUpdated} updated`)
+```
+
+- [ ] **Step 3: Run end-to-end**
+
+Run: `pnpm import:astro`
+Expected: 43 posts, 8 projects, 2 pages, ~30 tags. Second run: all updated, none created.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add scripts/import-from-astro.ts
+git commit -m "feat(import): write projects and pages into Payload"
+```
+
+---
+
+## Phase 6 — Lexical renderer
+
+**Milestone:** a Lexical JSON tree from Payload renders as accessible HTML in a browser. Headings have stable anchor IDs. Custom blocks render with the right components. `mediaBlock` resolves to an R2 URL via `next/image`.
+
+### Task 6.1: Server-side heading anchor utility (TDD)
+
+**Files:**
+- Create: `src/lib/lexical-headings.ts`
+- Create: `tests/int/lexical-headings.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/lexical-headings.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { extractHeadingsFromLexical, anchorFor } from '@/lib/lexical-headings'
+
+const sample = {
+  root: {
+    children: [
+      { type: 'heading', tag: 'h2', children: [{ type: 'text', text: 'Hello World' }] },
+      { type: 'heading', tag: 'h3', children: [{ type: 'text', text: 'Sub' }] },
+      { type: 'paragraph', children: [{ type: 'text', text: 'p' }] },
+    ],
+  },
+}
+
+describe('extractHeadingsFromLexical', () => {
+  it('returns nested headings with slugified ids', () => {
+    const r = extractHeadingsFromLexical(sample)
+    expect(r).toEqual([
+      {
+        id: 'hello-world',
+        text: 'Hello World',
+        level: 2,
+        children: [{ id: 'sub', text: 'Sub', level: 3, children: [] }],
+      },
+    ])
+  })
+})
+
+describe('anchorFor', () => {
+  it('matches the same slug used in headings list', () => {
+    expect(anchorFor({ children: [{ type: 'text', text: 'Hello World' }] })).toBe('hello-world')
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail**
+
+Run: `pnpm test:int -- lexical-headings`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// src/lib/lexical-headings.ts
+import { slugify } from './slugify'
+
+export type Heading = { id: string; text: string; level: number; children: Heading[] }
+
+type Node = { type: string; tag?: string; children?: Node[]; text?: string }
+
+function textOf(node: { children?: Node[] }): string {
+  return (node.children ?? []).map((c) => c.text ?? '').join('')
+}
+
+export function anchorFor(node: { children?: Node[] }): string {
+  return slugify(textOf(node))
+}
+
+export function extractHeadingsFromLexical(value: { root: { children: Node[] } }): Heading[] {
+  const flat: Heading[] = []
+  for (const node of value.root.children) {
+    if (node.type !== 'heading' || !node.tag) continue
+    const level = Number(node.tag.replace('h', ''))
+    if (level < 2 || level > 6) continue
+    const text = textOf(node)
+    flat.push({ id: slugify(text), text, level, children: [] })
+  }
+  // build nesting
+  const root: Heading[] = []
+  for (const h of flat) {
+    let inserted = false
+    for (let i = root.length - 1; i >= 0; i--) {
+      if (root[i].level < h.level) {
+        let cursor = root[i]
+        while (cursor.children.length && cursor.children[cursor.children.length - 1].level < h.level) {
+          cursor = cursor.children[cursor.children.length - 1]
+        }
+        cursor.children.push(h)
+        inserted = true
+        break
+      }
+    }
+    if (!inserted) root.push(h)
+  }
+  return root
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- lexical-headings`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/lexical-headings.ts tests/int/lexical-headings.int.spec.ts
+git commit -m "feat(lexical): server-side heading extraction"
+```
+
+### Task 6.2: Custom block React components
+
+**Files:**
+- Create: `src/components/lexical/Callout.tsx`
+- Create: `src/components/lexical/LinkPreviewCard.tsx`
+- Create: `src/components/lexical/PostImage.tsx`
+
+- [ ] **Step 1: Implement Callout**
+
+```tsx
+// src/components/lexical/Callout.tsx
+import type { ReactNode } from 'react'
+
+export function Callout({
+  title,
+  variant = 'default',
+  children,
+}: {
+  title?: string
+  variant?: 'default' | 'note' | 'warning' | 'tip'
+  children: ReactNode
+}) {
+  return (
+    <aside
+      className={`border-hair border-l-2 pl-4 my-6 callout callout-${variant}`}
+      role="note"
+    >
+      {title && <div className="font-mono text-[11px] tracking-widest uppercase text-ink-3 mb-2">{title}</div>}
+      <div>{children}</div>
+    </aside>
+  )
+}
+```
+
+- [ ] **Step 2: Implement LinkPreviewCard**
+
+```tsx
+// src/components/lexical/LinkPreviewCard.tsx
+import Image from 'next/image'
+
+export function LinkPreviewCard({
+  url,
+  title,
+  description,
+  imageUrl,
+}: {
+  url: string
+  title?: string
+  description?: string
+  imageUrl?: string
+}) {
+  let host = url
+  try { host = new URL(url).host } catch {}
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="border-hair grid grid-cols-[1fr_auto] items-center gap-4 border p-4 my-6 no-underline hover:border-ink"
+    >
+      <div className="min-w-0">
+        <div className="text-ink-3 font-mono text-[10.5px] tracking-widest uppercase mb-1">{host}</div>
+        {title && <div className="text-ink font-serif text-[18px] leading-tight">{title}</div>}
+        {description && <div className="text-ink-2 text-[14px] mt-1 line-clamp-2">{description}</div>}
+      </div>
+      {imageUrl && (
+        <Image src={imageUrl} alt="" width={64} height={64} className="object-cover" />
+      )}
+    </a>
+  )
+}
+```
+
+- [ ] **Step 3: Implement PostImage**
+
+```tsx
+// src/components/lexical/PostImage.tsx
+import Image from 'next/image'
+
+const widthClass: Record<string, string> = {
+  inline: 'max-w-[24rem]',
+  wide: 'max-w-[56rem]',
+  full: '',
+}
+
+export function PostImage({
+  src,
+  alt,
+  caption,
+  widthHint = 'full',
+}: {
+  src: string
+  alt: string
+  caption?: string
+  widthHint?: 'full' | 'wide' | 'inline'
+}) {
+  return (
+    <figure className={`my-8 ${widthClass[widthHint]}`}>
+      <Image src={src} alt={alt} width={1600} height={900} className="h-auto w-full" />
+      {caption && <figcaption className="text-ink-3 text-[13px] mt-2">{caption}</figcaption>}
+    </figure>
+  )
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/lexical
+git commit -m "feat(lexical): callout, link preview, post image components"
+```
+
+### Task 6.3: Lexical renderer
+
+**Files:**
+- Create: `src/components/lexical/Render.tsx`
+- Create: `src/lib/media-url.ts`
+
+- [ ] **Step 1: Media URL helper**
+
+```ts
+// src/lib/media-url.ts
+import type { Media } from '@/payload-types'
+
+export function mediaUrl(m: Media | string | number | null | undefined): string | undefined {
+  if (!m || typeof m === 'string' || typeof m === 'number') return undefined
+  return m.url ?? undefined
+}
+```
+
+- [ ] **Step 2: Render component**
+
+```tsx
+// src/components/lexical/Render.tsx
+import { Fragment, type ReactNode } from 'react'
+import { Callout } from './Callout'
+import { LinkPreviewCard } from './LinkPreviewCard'
+import { PostImage } from './PostImage'
+import { anchorFor } from '@/lib/lexical-headings'
+import { mediaUrl } from '@/lib/media-url'
+
+type Node = { type: string; [key: string]: any }
+
+function renderChildren(children: Node[] | undefined): ReactNode {
+  return (children ?? []).map((c, i) => <Fragment key={i}>{renderNode(c)}</Fragment>)
+}
+
+function renderText(node: Node): ReactNode {
+  let el: ReactNode = node.text
+  const fmt = (node.format as number | undefined) ?? 0
+  if (fmt & 1) el = <strong>{el}</strong>
+  if (fmt & 2) el = <em>{el}</em>
+  if (fmt & 16) el = <code>{el}</code>
+  return el
+}
+
+function renderNode(node: Node): ReactNode {
+  switch (node.type) {
+    case 'text':
+      return renderText(node)
+    case 'paragraph':
+      return <p>{renderChildren(node.children)}</p>
+    case 'heading': {
+      const Tag = (node.tag as 'h2' | 'h3' | 'h4' | 'h5' | 'h6') ?? 'h2'
+      const id = anchorFor(node)
+      return <Tag id={id}>{renderChildren(node.children)}</Tag>
+    }
+    case 'list': {
+      const Tag = node.tag === 'ol' ? 'ol' : 'ul'
+      return <Tag>{renderChildren(node.children)}</Tag>
+    }
+    case 'listitem':
+      return <li>{renderChildren(node.children)}</li>
+    case 'quote':
+      return <blockquote>{renderChildren(node.children)}</blockquote>
+    case 'code':
+      return (
+        <pre>
+          <code className={node.language ? `language-${node.language}` : undefined}>
+            {(node.children as Node[])?.map((c) => c.text).join('')}
+          </code>
+        </pre>
+      )
+    case 'horizontalrule':
+      return <hr />
+    case 'link':
+      return (
+        <a href={node.url} target={node.target ?? undefined} rel={node.rel ?? undefined}>
+          {renderChildren(node.children)}
+        </a>
+      )
+    case 'block': {
+      const f = node.fields ?? {}
+      if (f.blockType === 'callout') {
+        return (
+          <Callout title={f.title} variant={f.variant}>
+            <Render value={f.content} />
+          </Callout>
+        )
+      }
+      if (f.blockType === 'linkPreview') {
+        return (
+          <LinkPreviewCard
+            url={f.url}
+            title={f.title}
+            description={f.description}
+            imageUrl={mediaUrl(f.image)}
+          />
+        )
+      }
+      if (f.blockType === 'mediaBlock') {
+        const url = mediaUrl(f.media)
+        if (!url) return null
+        const alt = (typeof f.media === 'object' && f.media?.alt) || f.caption || ''
+        return <PostImage src={url} alt={alt} caption={f.caption} widthHint={f.widthHint} />
+      }
+      return null
+    }
+    default:
+      return null
+  }
+}
+
+export function Render({ value }: { value?: { root: { children: Node[] } } | null }) {
+  if (!value?.root?.children) return null
+  return <>{renderChildren(value.root.children as Node[])}</>
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/lexical/Render.tsx src/lib/media-url.ts
+git commit -m "feat(lexical): server-side renderer"
+```
+
+---
+
+## Phase 7 — Layout and shared components
+
+**Milestone:** root layout includes Nav, Header, Footer, BaseHead-equivalent metadata defaults; navigating to `/` shows the Hero (even with no list content yet); navigating to `/<missing>` shows a 404 with the same shell.
+
+For each component port: copy structure verbatim from the Astro source, convert `Astro.props` to React props, swap `class:list` for `clsx`-style conditional joining, use `Link` from `next/link` for internal navigation.
+
+### Task 7.1: Add `clsx` dep and basic helpers
+
+- [ ] **Step 1: Add dep**
+
+```bash
+pnpm add clsx
+git add package.json pnpm-lock.yaml
+git commit -m "chore: add clsx"
+```
+
+### Task 7.2: Port `Header`, `Nav`, `NavLink`, `Footer`
+
+**Files:**
+- Create: `src/components/Header.tsx`
+- Create: `src/components/Nav.tsx`
+- Create: `src/components/NavLink.tsx`
+- Create: `src/components/Footer.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/components/{Header,Nav,NavLink,Footer}.astro`
+
+- [ ] **Step 1: Port**
+
+For each, mirror the Astro component's JSX one-to-one in React. Rules:
+- `<a href="...">` → `<Link href="...">` for internal links, `<a>` for external
+- `Astro.url.pathname` → `usePathname()` in NavLink (so it's a client component) — leave `Header`, `Nav`, `Footer` as server components and pass current path down
+- Class strings copy unchanged
+
+- [ ] **Step 2: Verify visually**
+
+Run: `pnpm dev` and load `/`; expect markup similar to the old site (still without Hero data — that's next).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/{Header,Nav,NavLink,Footer}.tsx
+git commit -m "feat(components): port Header, Nav, NavLink, Footer"
+```
+
+### Task 7.3: Wire layout to use them
+
+**Files:**
+- Modify: `src/app/(frontend)/layout.tsx`
+
+- [ ] **Step 1: Update layout**
+
+```tsx
+import React from 'react'
+import './styles.css'
+import '@fontsource-variable/inter'
+import '@fontsource-variable/newsreader'
+import '@fontsource/dm-serif-text'
+import '@fontsource/krona-one'
+import { Header } from '@/components/Header'
+import { Footer } from '@/components/Footer'
+import siteConfig from '@/lib/site-config'
+
+export const metadata = {
+  title: { default: siteConfig.title, template: `%s — ${siteConfig.title}` },
+  description: siteConfig.description,
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="bg-paper text-ink antialiased">
+        <Header />
+        <main id="main-content">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  )
+}
+```
+
+- [ ] **Step 2: Verify**
+
+Run: `pnpm dev`; `/` shows nav at top + footer at bottom.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/layout.tsx
+git commit -m "feat(frontend): wire shared layout shell"
+```
+
+### Task 7.4: Port `Hero`
+
+**Files:**
+- Create: `src/components/Hero.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/components/Hero.astro`
+
+- [ ] **Step 1: Port**
+
+Server component reading from `siteConfig.hero`. Use `next/image` for the hero image. Copy classes verbatim.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/Hero.tsx
+git commit -m "feat(components): port Hero"
+```
+
+### Task 7.5: Port utility components used everywhere
+
+**Files:**
+- Create: `src/components/FormattedDate.tsx`
+- Create: `src/components/Breadcrumbs.tsx`
+- Create: `src/components/Pagination.tsx`
+- Reference: same-named `.astro` files in old project
+
+- [ ] **Step 1: Port each verbatim**
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/{FormattedDate,Breadcrumbs,Pagination}.tsx
+git commit -m "feat(components): port FormattedDate, Breadcrumbs, Pagination"
+```
+
+### Task 7.6: Port JSON-LD schema components
+
+**Files:**
+- Create: `src/components/schema/Article.tsx`
+- Create: `src/components/schema/Breadcrumb.tsx`
+- Create: `src/components/schema/Website.tsx`
+- Reference: `ArticleSchema.astro`, `BreadcrumbSchema.astro`, `WebsiteSchema.astro`
+
+- [ ] **Step 1: Port**
+
+Each emits `<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />`. Keep field names identical to the old components.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/schema
+git commit -m "feat(components): port JSON-LD schema components"
+```
+
+---
+
+## Phase 8 — List pages
+
+**Milestone:** `/`, `/blog`, `/blog/page/2`, `/projects`, `/tags`, `/tags/<slug>` all render correctly against local Payload data and visually match the old site.
+
+### Task 8.1: Data helpers
+
+**Files:**
+- Create: `src/lib/payload.ts`
+- Create: `src/lib/posts.ts`
+
+- [ ] **Step 1: `getPayloadInstance` helper**
+
+```ts
+// src/lib/payload.ts
+import 'server-only'
+import { getPayload } from 'payload'
+import config from '@/payload.config'
+
+let cached: Awaited<ReturnType<typeof getPayload>> | undefined
+export async function getPayloadInstance() {
+  if (!cached) cached = await getPayload({ config })
+  return cached
+}
+```
+
+- [ ] **Step 2: Posts query helpers**
+
+```ts
+// src/lib/posts.ts
+import { getPayloadInstance } from './payload'
+import type { Post, Tag } from '@/payload-types'
+
+export async function listPosts(opts: { limit?: number; page?: number; tag?: string } = {}) {
+  const payload = await getPayloadInstance()
+  const where: Record<string, unknown> = { _status: { equals: 'published' } }
+  if (opts.tag) where['tags.slug'] = { equals: opts.tag }
+  return payload.find({
+    collection: 'posts',
+    where,
+    sort: '-publishDate',
+    limit: opts.limit ?? 8,
+    page: opts.page ?? 1,
+  })
+}
+
+export async function getPostBySlug(slug: string): Promise<Post | undefined> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({
+    collection: 'posts',
+    where: { slug: { equals: slug } },
+    limit: 1,
+    depth: 2,
+  })
+  return r.docs[0]
+}
+
+export async function listAllPostSlugs(): Promise<string[]> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({
+    collection: 'posts',
+    where: { _status: { equals: 'published' } },
+    limit: 0,
+    pagination: false,
+  })
+  return r.docs.map((d) => d.slug)
+}
+
+export async function listAllTags(): Promise<{ tag: Tag; count: number }[]> {
+  const payload = await getPayloadInstance()
+  const tags = await payload.find({ collection: 'tags', limit: 0, pagination: false })
+  const counts = await Promise.all(
+    tags.docs.map(async (t) => {
+      const r = await payload.count({
+        collection: 'posts',
+        where: { 'tags.slug': { equals: t.slug }, _status: { equals: 'published' } },
+      })
+      return { tag: t, count: r.totalDocs }
+    }),
+  )
+  return counts.filter((c) => c.count > 0)
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/payload.ts src/lib/posts.ts
+git commit -m "feat(data): payload + posts query helpers"
+```
+
+### Task 8.2: Port `PostList` and `PostPreview`
+
+**Files:**
+- Create: `src/components/PostList.tsx`
+- Create: `src/components/PostPreview.tsx`
+- Reference: same-named `.astro` files
+
+- [ ] **Step 1: Port**
+
+`PostPreview` renders one post as the old Astro version did, taking a `Post` from `@/payload-types` plus an optional `number` prop (the small numeric label the old list uses). `PostList` accepts `posts: Post[]` and `numbers: number[]`.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/{PostList,PostPreview}.tsx
+git commit -m "feat(components): port PostList and PostPreview"
+```
+
+### Task 8.3: Home page
+
+**Files:**
+- Modify: `src/app/(frontend)/page.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/pages/index.astro`
+
+- [ ] **Step 1: Replace contents**
+
+Port the old `index.astro` server logic into a server component. Use `listPosts({ limit: 0 })` then split by `LIFE_TAGS`/`GARAGE_TAGS` exactly as the old code does. Render `<Hero />`, the three sections, and the topics grid.
+
+- [ ] **Step 2: Verify visually**
+
+Run: `pnpm dev`, load `/`. Compare side-by-side with `https://arter.dev/`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/page.tsx
+git commit -m "feat(frontend): port home page"
+```
+
+### Task 8.4: Blog list with pagination
+
+**Files:**
+- Create: `src/app/(frontend)/blog/page.tsx`
+- Create: `src/app/(frontend)/blog/page/[page]/page.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/pages/blog/[...page].astro`
+
+- [ ] **Step 1: Implement `/blog` (page 1)**
+
+```tsx
+// src/app/(frontend)/blog/page.tsx
+import { listPosts } from '@/lib/posts'
+import { PostList } from '@/components/PostList'
+import { Pagination } from '@/components/Pagination'
+
+export const revalidate = 60
+
+export default async function BlogIndex() {
+  const r = await listPosts({ limit: 8, page: 1 })
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Writing</h1>
+      <PostList posts={r.docs} numbers={r.docs.map((_, i) => r.totalDocs - i)} />
+      <Pagination current={1} total={r.totalPages} basePath="/blog" />
+    </div>
+  )
+}
+```
+
+- [ ] **Step 2: Implement paginated route**
+
+```tsx
+// src/app/(frontend)/blog/page/[page]/page.tsx
+import { notFound } from 'next/navigation'
+import { listPosts } from '@/lib/posts'
+import { PostList } from '@/components/PostList'
+import { Pagination } from '@/components/Pagination'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  const total = (await listPosts({ limit: 8, page: 1 })).totalPages
+  return Array.from({ length: Math.max(0, total - 1) }, (_, i) => ({ page: String(i + 2) }))
+}
+
+export default async function BlogPage({ params }: { params: Promise<{ page: string }> }) {
+  const { page } = await params
+  const num = Number(page)
+  if (!Number.isInteger(num) || num < 2) notFound()
+  const r = await listPosts({ limit: 8, page: num })
+  if (r.docs.length === 0) notFound()
+  const startNum = r.totalDocs - (num - 1) * 8
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Writing</h1>
+      <PostList posts={r.docs} numbers={r.docs.map((_, i) => startNum - i)} />
+      <Pagination current={num} total={r.totalPages} basePath="/blog" />
+    </div>
+  )
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Visit `/blog/`, `/blog/page/2/`. Confirm post counts and pagination links.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/app/(frontend)/blog
+git commit -m "feat(frontend): port /blog list with pagination"
+```
+
+### Task 8.5: Projects list and project pages
+
+**Files:**
+- Create: `src/components/ProjectPreview.tsx`
+- Create: `src/lib/projects.ts`
+- Create: `src/app/(frontend)/projects/page.tsx`
+- Create: `src/app/(frontend)/projects/[slug]/page.tsx`
+
+- [ ] **Step 1: `lib/projects.ts`**
+
+```ts
+import { getPayloadInstance } from './payload'
+import type { Project } from '@/payload-types'
+
+export async function listProjects() {
+  const payload = await getPayloadInstance()
+  return payload.find({
+    collection: 'projects',
+    where: { _status: { equals: 'published' } },
+    sort: '-publishDate',
+    limit: 0,
+    pagination: false,
+  })
+}
+
+export async function getProjectBySlug(slug: string): Promise<Project | undefined> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({ collection: 'projects', where: { slug: { equals: slug } }, depth: 2, limit: 1 })
+  return r.docs[0]
+}
+
+export async function listAllProjectSlugs(): Promise<string[]> {
+  const r = await listProjects()
+  return r.docs.map((d) => d.slug)
+}
+```
+
+- [ ] **Step 2: `ProjectPreview.tsx`**
+
+Port verbatim from the Astro counterpart, accepting a `Project` from payload-types.
+
+- [ ] **Step 3: List page**
+
+```tsx
+// src/app/(frontend)/projects/page.tsx
+import { listProjects } from '@/lib/projects'
+import { ProjectPreview } from '@/components/ProjectPreview'
+
+export const revalidate = 60
+
+export default async function ProjectsIndex() {
+  const r = await listProjects()
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Projects</h1>
+      <ul className="grid gap-8">
+        {r.docs.map((p) => (
+          <li key={p.id}><ProjectPreview project={p} /></li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+- [ ] **Step 4: Detail page (placeholder, full impl in Phase 9)**
+
+```tsx
+// src/app/(frontend)/projects/[slug]/page.tsx
+import { notFound } from 'next/navigation'
+import { getProjectBySlug, listAllProjectSlugs } from '@/lib/projects'
+import { Render } from '@/components/lexical/Render'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  return (await listAllProjectSlugs()).map((slug) => ({ slug }))
+}
+
+export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const project = await getProjectBySlug(slug)
+  if (!project) notFound()
+  return (
+    <article className="max-w-article mx-auto px-5 py-10 md:px-10">
+      <h1 className="font-serif text-[clamp(40px,6vw,72px)]">{project.title}</h1>
+      <div className="prose-editorial">
+        <Render value={project.body} />
+      </div>
+    </article>
+  )
+}
+```
+
+- [ ] **Step 5: Verify**
+
+Run: `pnpm dev`, hit `/projects/` and one project URL.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/ProjectPreview.tsx src/lib/projects.ts src/app/(frontend)/projects
+git commit -m "feat(frontend): port projects list and detail"
+```
+
+### Task 8.6: Tags pages
+
+**Files:**
+- Create: `src/app/(frontend)/tags/page.tsx`
+- Create: `src/app/(frontend)/tags/[slug]/page.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/pages/tags/index.astro`, `tags/[id]/...`
+
+- [ ] **Step 1: Tag cloud**
+
+```tsx
+// src/app/(frontend)/tags/page.tsx
+import Link from 'next/link'
+import { listAllTags } from '@/lib/posts'
+
+export const revalidate = 60
+
+export default async function TagsPage() {
+  const tags = await listAllTags()
+  tags.sort((a, b) => b.count - a.count)
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Tags</h1>
+      <ul className="border-hair divide-hair grid grid-cols-2 divide-x divide-y border md:grid-cols-4">
+        {tags.map(({ tag, count }) => (
+          <li key={tag.id}>
+            <Link href={`/tags/${tag.slug}/`} className="block px-6 py-5 hover:bg-paper-2">
+              <span className="block font-serif text-[22px]">{tag.name}</span>
+              <span className="text-ink-3 font-mono text-[10.5px] uppercase">
+                {count} post{count === 1 ? '' : 's'}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+- [ ] **Step 2: Tag detail**
+
+```tsx
+// src/app/(frontend)/tags/[slug]/page.tsx
+import { notFound } from 'next/navigation'
+import { listPosts, listAllTags } from '@/lib/posts'
+import { PostList } from '@/components/PostList'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  const tags = await listAllTags()
+  return tags.map(({ tag }) => ({ slug: tag.slug }))
+}
+
+export default async function TagPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const r = await listPosts({ tag: slug, limit: 0 })
+  if (r.docs.length === 0) notFound()
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">#{slug}</h1>
+      <PostList posts={r.docs} numbers={r.docs.map((_, i) => r.totalDocs - i)} />
+    </div>
+  )
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Visit `/tags/`, click a tag, confirm posts list.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/app/(frontend)/tags
+git commit -m "feat(frontend): port /tags index and detail"
+```
+
+---
+
+## Phase 9 — Detail pages: posts, project bodies, catch-all pages
+
+**Milestone:** `/blog/<slug>/` renders a real post with TOC, share links, breadcrumbs, JSON-LD, footnotes, prev/next, and Giscus. `/about/`, `/hire-me/` resolve via the catch-all.
+
+### Task 9.1: Port `TableOfContents` (server) and `MobileTableOfContents` (client)
+
+**Files:**
+- Create: `src/components/TableOfContents.tsx`
+- Create: `src/components/MobileTableOfContents.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/components/TableOfContents.astro` and the `<script>` block at the bottom of `BlogPostLayout.astro`
+
+- [ ] **Step 1: Server desktop TOC**
+
+Accept `headings: Heading[]` (from `lexical-headings`). Render the static markup. No client logic.
+
+- [ ] **Step 2: Client mobile drawer**
+
+`'use client'` component with the open/close + IntersectionObserver-driven "current heading" updates. Port the JS from `BlogPostLayout.astro` to a `useEffect`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/{TableOfContents,MobileTableOfContents}.tsx
+git commit -m "feat(components): port TOC and mobile TOC"
+```
+
+### Task 9.2: Port `ShareLinks`
+
+**Files:**
+- Create: `src/components/ShareLinks.tsx`
+- Reference: `ShareLinks.astro`, `Share.astro`
+
+- [ ] **Step 1: Port**
+
+`'use client'` component (uses `navigator.clipboard`). Accept `title: string`, `url: string`.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/ShareLinks.tsx
+git commit -m "feat(components): port ShareLinks"
+```
+
+### Task 9.3: Port `Footnotes` (server)
+
+**Files:**
+- Create: `src/components/Footnotes.tsx`
+- Reference: `Footnotes.astro`
+
+- [ ] **Step 1: Implement**
+
+The old script collects `.source-citation` anchors and builds a list. Port to: pass the post's body Lexical AST in, walk for `link` nodes that match a citation pattern, render the list server-side. If the import didn't introduce explicit citations, this can simply render an empty `<aside>` and be hidden when empty.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/Footnotes.tsx
+git commit -m "feat(components): port footnotes (server-rendered)"
+```
+
+### Task 9.4: Giscus client component
+
+**Files:**
+- Create: `src/components/Giscus.tsx`
+
+- [ ] **Step 1: Implement**
+
+```tsx
+// src/components/Giscus.tsx
+'use client'
+import { useEffect, useRef } from 'react'
+
+export function Giscus() {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!ref.current || ref.current.dataset.loaded === 'true') return
+    const s = document.createElement('script')
+    s.src = 'https://giscus.app/client.js'
+    s.async = true
+    s.crossOrigin = 'anonymous'
+    Object.entries({
+      'data-repo': 'christopherarter/arter-blog',
+      'data-repo-id': 'R_kgDONtMC0Q',
+      'data-category': 'General',
+      'data-category-id': 'DIC_kwDONtMC0c4Cmpzl',
+      'data-mapping': 'pathname',
+      'data-strict': '0',
+      'data-reactions-enabled': '1',
+      'data-emit-metadata': '0',
+      'data-input-position': 'bottom',
+      'data-theme': 'dark',
+      'data-lang': 'en',
+    }).forEach(([k, v]) => s.setAttribute(k, v))
+    ref.current.appendChild(s)
+    ref.current.dataset.loaded = 'true'
+  }, [])
+  return <div className="giscus" ref={ref} />
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/Giscus.tsx
+git commit -m "feat(components): Giscus comments embed"
+```
+
+### Task 9.5: Blog post page
+
+**Files:**
+- Create: `src/app/(frontend)/blog/[slug]/page.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/pages/blog/[id].astro` and `src/layouts/BlogPostLayout.astro`
+
+- [ ] **Step 1: Implement**
+
+```tsx
+// src/app/(frontend)/blog/[slug]/page.tsx
+import { notFound } from 'next/navigation'
+import Image from 'next/image'
+import Link from 'next/link'
+import { getPostBySlug, listAllPostSlugs, listPosts } from '@/lib/posts'
+import { Render } from '@/components/lexical/Render'
+import { Breadcrumbs } from '@/components/Breadcrumbs'
+import { FormattedDate } from '@/components/FormattedDate'
+import { TableOfContents } from '@/components/TableOfContents'
+import { MobileTableOfContents } from '@/components/MobileTableOfContents'
+import { ShareLinks } from '@/components/ShareLinks'
+import { Footnotes } from '@/components/Footnotes'
+import { Giscus } from '@/components/Giscus'
+import { Article } from '@/components/schema/Article'
+import { extractHeadingsFromLexical } from '@/lib/lexical-headings'
+import { mediaUrl } from '@/lib/media-url'
+import { slugify } from '@/lib/slugify'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  return (await listAllPostSlugs()).map((slug) => ({ slug }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const post = await getPostBySlug(slug)
+  if (!post) return {}
+  return {
+    title: post.seo?.title ?? post.title,
+    description: post.seo?.description ?? post.excerpt ?? '',
+    openGraph: { type: 'article', images: [`/og/blog/${slug}/`] },
+  }
+}
+
+function estimateReadTime(value: unknown): number {
+  if (!value || typeof value !== 'object') return 4
+  const text = JSON.stringify(value).split(/\s+/).filter(Boolean).length
+  return Math.max(3, Math.round(text / 220))
+}
+
+export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const post = await getPostBySlug(slug)
+  if (!post) notFound()
+
+  const all = await listPosts({ limit: 0 })
+  const i = all.docs.findIndex((p) => p.slug === slug)
+  const prev = i + 1 < all.docs.length ? all.docs[i + 1] : null
+  const next = i > 0 ? all.docs[i - 1] : null
+  const headings = extractHeadingsFromLexical(post.body as { root: { children: any[] } })
+  const cover = mediaUrl(post.coverImage) ?? mediaUrl(post.seo?.image)
+  const readMinutes = estimateReadTime(post.body)
+  const tagList = (post.tags ?? []).filter((t): t is { id: number | string; name: string; slug: string } => typeof t === 'object' && t !== null)
+  const href = `/blog/${slug}/`
+
+  return (
+    <article className="pt-16 pb-20 md:pt-20 md:pb-24">
+      <Article post={post} url={href} />
+      <div className={`max-w-article mx-auto grid gap-10 px-5 md:gap-[72px] md:px-10 ${headings.length ? 'md:grid-cols-[1fr_260px]' : 'max-w-[900px]'}`}>
+        <div className="min-w-0">
+          <Breadcrumbs items={[{ name: 'Home', url: '/' }, { name: 'Writing', url: '/blog/' }, { name: post.title, url: href }]} />
+          <header className="border-hair mb-8 border-b pb-6 md:mb-11 md:pb-8">
+            <h1 className="text-ink m-0 mb-5 max-w-[18ch] font-serif text-[clamp(40px,6vw,72px)] leading-none tracking-[-0.028em]">{post.title}</h1>
+            {post.subtitle && <p className="text-ink-2 m-0 mb-6 max-w-[42ch] font-serif text-[22px] leading-[1.32] italic md:mb-8 md:text-[24px]">{post.subtitle}</p>}
+            <div className="text-ink-3 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[11px] tracking-[0.12em] uppercase">
+              <span className="text-ink font-medium">Chris Arter</span>
+              {post.publishDate && (<><span className="text-ink-4">·</span><FormattedDate date={new Date(post.publishDate)} format="responsive" /></>)}
+              <span className="text-ink-4">·</span>
+              <span>{readMinutes} min read</span>
+            </div>
+          </header>
+          {cover && (
+            <figure className="border-hair-2 m-0 mb-[52px] aspect-video overflow-hidden border">
+              <Image src={cover} alt="" width={1600} height={900} className="block h-full w-full object-cover" />
+            </figure>
+          )}
+          <div className="prose-editorial">
+            <Render value={post.body} />
+            <Footnotes value={post.body} />
+          </div>
+          {tagList.length > 0 && (
+            <div className="border-hair mt-12 flex flex-wrap gap-4 border-t pt-5 font-mono text-xs uppercase">
+              {tagList.map((t) => (
+                <Link key={t.id} href={`/tags/${slugify(t.name)}/`} className="text-ink-3 hover:text-ink">#{t.name}</Link>
+              ))}
+            </div>
+          )}
+          {(prev || next) && (
+            <nav className="border-hair mt-16 grid grid-cols-1 gap-6 border-t pt-10 md:grid-cols-2 md:gap-10" aria-label="Post navigation">
+              {prev ? <Link href={`/blog/${prev.slug}/`} className="block"><div className="text-ink-3 mb-2 font-mono text-[10.5px] uppercase">← Previous</div><div className="font-serif text-[22px]">{prev.title}</div></Link> : <span />}
+              {next ? <Link href={`/blog/${next.slug}/`} className="block md:text-right"><div className="text-ink-3 mb-2 font-mono text-[10.5px] uppercase">Next →</div><div className="font-serif text-[22px]">{next.title}</div></Link> : <span />}
+            </nav>
+          )}
+          <div className="mt-[72px]"><Giscus /></div>
+        </div>
+        {headings.length > 0 && (
+          <aside className="hidden md:block">
+            <div className="sticky top-[104px]">
+              <TableOfContents headings={headings} />
+              <ShareLinks title={post.title} url={href} />
+            </div>
+          </aside>
+        )}
+      </div>
+      {headings.length > 0 && <MobileTableOfContents headings={headings} title={post.title} url={href} />}
+    </article>
+  )
+}
+```
+
+- [ ] **Step 2: Verify**
+
+Run: `pnpm dev`, hit `/blog/a-guide-to-laravel-authorization-patterns/`. Compare against the old site.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/blog/[slug]
+git commit -m "feat(frontend): port blog post page"
+```
+
+### Task 9.6: Catch-all `[...slug]` for `pages` collection
+
+**Files:**
+- Create: `src/app/(frontend)/[...slug]/page.tsx`
+- Create: `src/lib/pages.ts`
+
+- [ ] **Step 1: `lib/pages.ts`**
+
+```ts
+import { getPayloadInstance } from './payload'
+import type { Page } from '@/payload-types'
+
+export async function listAllPageSlugs(): Promise<string[]> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({ collection: 'pages', limit: 0, pagination: false })
+  return r.docs.map((p) => p.slug)
+}
+
+export async function getPageBySlug(slug: string): Promise<Page | undefined> {
+  const payload = await getPayloadInstance()
+  const r = await payload.find({ collection: 'pages', where: { slug: { equals: slug } }, limit: 1, depth: 2 })
+  return r.docs[0]
+}
+```
+
+- [ ] **Step 2: Catch-all route**
+
+```tsx
+// src/app/(frontend)/[...slug]/page.tsx
+import { notFound } from 'next/navigation'
+import { getPageBySlug, listAllPageSlugs } from '@/lib/pages'
+import { Render } from '@/components/lexical/Render'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  return (await listAllPageSlugs()).map((slug) => ({ slug: [slug] }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const page = await getPageBySlug(slug.join('/'))
+  if (!page) return {}
+  return { title: page.seo?.title ?? page.title, description: page.seo?.description ?? page.description ?? '' }
+}
+
+export default async function CatchAllPage({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const page = await getPageBySlug(slug.join('/'))
+  if (!page) notFound()
+  return (
+    <article className="max-w-article mx-auto px-5 py-10 md:px-10">
+      <header className="mb-8">
+        <h1 className="font-serif text-[clamp(40px,6vw,72px)]">{page.title}</h1>
+        {page.subtitle && <p className="text-ink-2 italic font-serif text-[22px] mt-3">{page.subtitle}</p>}
+      </header>
+      <div className="prose-editorial">
+        <Render value={page.body} />
+      </div>
+    </article>
+  )
+}
+```
+
+- [ ] **Step 3: Verify**
+
+Visit `/about/` and `/hire-me/`. Confirm both render with their content.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/pages.ts src/app/(frontend)/[...slug]
+git commit -m "feat(frontend): catch-all page renderer for pages collection"
+```
+
+### Task 9.7: Project detail page (full)
+
+**Files:**
+- Modify: `src/app/(frontend)/projects/[slug]/page.tsx`
+
+- [ ] **Step 1: Replace placeholder**
+
+Mirror the structure of the post page but without TOC/footnotes/giscus (matches the old project page). Include `Article` schema, breadcrumbs, cover image, and `Render`.
+
+- [ ] **Step 2: Verify**
+
+Visit a project URL.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/projects/[slug]/page.tsx
+git commit -m "feat(frontend): port project detail page"
+```
+
+---
+
+## Phase 10 — RSS, JSON Feed, sitemap, robots
+
+**Milestone:** `/rss.xml`, `/feed.json`, `/sitemap.xml`, `/robots.txt` all return 200 with correct content. RSS validates against feedvalidator.org. Sitemap contains every post, project, page, and tag URL.
+
+### Task 10.1: RSS builder (TDD)
+
+**Files:**
+- Create: `src/lib/rss.ts`
+- Create: `tests/int/rss.int.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/rss.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { buildRss } from '@/lib/rss'
+
+describe('buildRss', () => {
+  it('produces a valid-looking RSS 2.0 doc', () => {
+    const xml = buildRss({
+      title: 'T',
+      description: 'D',
+      siteUrl: 'https://x.dev',
+      items: [
+        { title: 'A', url: '/a/', description: 'd', publishDate: new Date('2024-01-01') },
+      ],
+    })
+    expect(xml).toContain('<rss version="2.0"')
+    expect(xml).toContain('<title>T</title>')
+    expect(xml).toContain('<link>https://x.dev/a/</link>')
+    expect(xml).toContain('<pubDate>Mon, 01 Jan 2024')
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail**
+
+Run: `pnpm test:int -- rss`
+Expected: FAIL.
+
+- [ ] **Step 3: Implement**
+
+```ts
+// src/lib/rss.ts
+function esc(s: string) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+export type RssItem = {
+  title: string
+  url: string
+  description?: string
+  publishDate: Date
+}
+
+export function buildRss(opts: {
+  title: string
+  description: string
+  siteUrl: string
+  items: RssItem[]
+}) {
+  const items = opts.items
+    .map(
+      (i) => `
+    <item>
+      <title>${esc(i.title)}</title>
+      <link>${esc(opts.siteUrl + i.url)}</link>
+      <guid>${esc(opts.siteUrl + i.url)}</guid>
+      <pubDate>${i.publishDate.toUTCString()}</pubDate>
+      ${i.description ? `<description>${esc(i.description)}</description>` : ''}
+    </item>`,
+    )
+    .join('')
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>${esc(opts.title)}</title>
+    <link>${esc(opts.siteUrl)}</link>
+    <description>${esc(opts.description)}</description>
+    <atom:link href="${esc(opts.siteUrl)}/rss.xml" rel="self" type="application/rss+xml" />${items}
+  </channel>
+</rss>`
+}
+```
+
+- [ ] **Step 4: Run tests**
+
+Run: `pnpm test:int -- rss`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/rss.ts tests/int/rss.int.spec.ts
+git commit -m "feat(rss): RSS 2.0 builder"
+```
+
+### Task 10.2: `/rss.xml` route
+
+**Files:**
+- Create: `src/app/(frontend)/rss.xml/route.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// src/app/(frontend)/rss.xml/route.ts
+import { listPosts } from '@/lib/posts'
+import { buildRss } from '@/lib/rss'
+import siteConfig from '@/lib/site-config'
+
+export const revalidate = 300
+
+export async function GET() {
+  const r = await listPosts({ limit: 50 })
+  const xml = buildRss({
+    title: siteConfig.title,
+    description: siteConfig.description,
+    siteUrl: 'https://arter.dev',
+    items: r.docs.map((p) => ({
+      title: p.title,
+      url: `/blog/${p.slug}/`,
+      description: p.excerpt ?? undefined,
+      publishDate: new Date(p.publishDate),
+    })),
+  })
+  return new Response(xml, { headers: { 'content-type': 'application/rss+xml; charset=utf-8' } })
+}
+```
+
+- [ ] **Step 2: Verify**
+
+`curl http://localhost:3000/rss.xml` returns RSS XML.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/rss.xml
+git commit -m "feat(frontend): /rss.xml endpoint"
+```
+
+### Task 10.3: `/feed.json`
+
+**Files:**
+- Create: `src/app/(frontend)/feed.json/route.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// src/app/(frontend)/feed.json/route.ts
+import { listPosts } from '@/lib/posts'
+import siteConfig from '@/lib/site-config'
+
+export const revalidate = 300
+
+export async function GET() {
+  const r = await listPosts({ limit: 50 })
+  const SITE = 'https://arter.dev'
+  const body = {
+    version: 'https://jsonfeed.org/version/1.1',
+    title: siteConfig.title,
+    home_page_url: SITE,
+    feed_url: `${SITE}/feed.json`,
+    description: siteConfig.description,
+    items: r.docs.map((p) => ({
+      id: `${SITE}/blog/${p.slug}/`,
+      url: `${SITE}/blog/${p.slug}/`,
+      title: p.title,
+      summary: p.excerpt ?? undefined,
+      date_published: new Date(p.publishDate).toISOString(),
+    })),
+  }
+  return Response.json(body, {
+    headers: { 'content-type': 'application/feed+json; charset=utf-8' },
+  })
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/(frontend)/feed.json
+git commit -m "feat(frontend): /feed.json endpoint"
+```
+
+### Task 10.4: Sitemap (TDD on builder)
+
+**Files:**
+- Create: `src/lib/sitemap.ts`
+- Create: `tests/int/sitemap.int.spec.ts`
+- Create: `src/app/(frontend)/sitemap.xml/route.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+// tests/int/sitemap.int.spec.ts
+import { describe, expect, it } from 'vitest'
+import { buildSitemap } from '@/lib/sitemap'
+
+describe('buildSitemap', () => {
+  it('emits urlset with each entry', () => {
+    const xml = buildSitemap({
+      siteUrl: 'https://x.dev',
+      entries: [
+        { path: '/a/', lastmod: new Date('2024-01-01') },
+        { path: '/b/' },
+      ],
+    })
+    expect(xml).toContain('<urlset')
+    expect(xml).toContain('<loc>https://x.dev/a/</loc>')
+    expect(xml).toContain('<lastmod>2024-01-01</lastmod>')
+  })
+})
+```
+
+- [ ] **Step 2: Verify fail, implement**
+
+```ts
+// src/lib/sitemap.ts
+export function buildSitemap(opts: {
+  siteUrl: string
+  entries: { path: string; lastmod?: Date }[]
+}) {
+  const urls = opts.entries
+    .map(
+      (e) =>
+        `<url><loc>${opts.siteUrl}${e.path}</loc>${
+          e.lastmod ? `<lastmod>${e.lastmod.toISOString().slice(0, 10)}</lastmod>` : ''
+        }</url>`,
+    )
+    .join('')
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urls}</urlset>`
+}
+```
+
+- [ ] **Step 3: Implement route**
+
+```ts
+// src/app/(frontend)/sitemap.xml/route.ts
+import { listPosts } from '@/lib/posts'
+import { listProjects } from '@/lib/projects'
+import { listAllPageSlugs, getPageBySlug } from '@/lib/pages'
+import { listAllTags } from '@/lib/posts'
+import { buildSitemap } from '@/lib/sitemap'
+
+const SITE = 'https://arter.dev'
+export const revalidate = 300
+
+export async function GET() {
+  const [posts, projects, pageSlugs, tags] = await Promise.all([
+    listPosts({ limit: 0 }),
+    listProjects(),
+    listAllPageSlugs(),
+    listAllTags(),
+  ])
+  const entries: { path: string; lastmod?: Date }[] = [
+    { path: '/' },
+    { path: '/blog/' },
+    { path: '/projects/' },
+    { path: '/tags/' },
+  ]
+  for (const p of posts.docs)
+    entries.push({
+      path: `/blog/${p.slug}/`,
+      lastmod: new Date(p.updatedDate ?? p.publishDate),
+    })
+  for (const p of projects.docs)
+    entries.push({
+      path: `/projects/${p.slug}/`,
+      lastmod: new Date(p.publishDate),
+    })
+  for (const slug of pageSlugs) {
+    const page = await getPageBySlug(slug)
+    entries.push({
+      path: `/${slug}/`,
+      lastmod: page?.updatedAt ? new Date(page.updatedAt) : undefined,
+    })
+  }
+  for (const { tag } of tags) entries.push({ path: `/tags/${tag.slug}/` })
+
+  const xml = buildSitemap({ siteUrl: SITE, entries })
+  return new Response(xml, { headers: { 'content-type': 'application/xml; charset=utf-8' } })
+}
+```
+
+- [ ] **Step 4: Run tests + smoke**
+
+Run: `pnpm test:int -- sitemap` (PASS)
+Run: `curl localhost:3000/sitemap.xml` and confirm it contains 43+8+2+~30 URLs.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/sitemap.ts tests/int/sitemap.int.spec.ts src/app/(frontend)/sitemap.xml
+git commit -m "feat(frontend): sitemap.xml endpoint"
+```
+
+### Task 10.5: `/robots.txt`
+
+**Files:**
+- Create: `src/app/(frontend)/robots.txt/route.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// src/app/(frontend)/robots.txt/route.ts
+export const revalidate = 86400
+
+export async function GET() {
+  const body = `User-agent: *
+Disallow: /admin
+Allow: /
+
+Sitemap: https://arter.dev/sitemap.xml
+`
+  return new Response(body, { headers: { 'content-type': 'text/plain; charset=utf-8' } })
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/(frontend)/robots.txt
+git commit -m "feat(frontend): robots.txt endpoint"
+```
+
+---
+
+## Phase 11 — OG image generation
+
+**Milestone:** `/og/blog/<slug>/` returns a 1200×630 PNG that mirrors the old satori-rendered design. `/og/projects/<slug>/` and `/og/default/` likewise.
+
+### Task 11.1: Shared OG renderer
+
+**Files:**
+- Create: `src/lib/og-render.ts`
+- Reference: `~/Documents/projects/arter-blog/src/utils/og.ts` and `src/og/`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// src/lib/og-render.ts
+import 'server-only'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+
+let kronaFont: ArrayBuffer | undefined
+async function font() {
+  if (!kronaFont) {
+    const buf = await readFile(path.resolve('public/fonts/KronaOne-Regular.ttf'))
+    kronaFont = buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength)
+  }
+  return kronaFont
+}
+
+export async function renderOgPng(node: import('react').ReactElement) {
+  const { default: satori } = await import('satori')
+  const { Resvg } = await import('@resvg/resvg-js')
+  const svg = await satori(node, {
+    width: 1200,
+    height: 630,
+    fonts: [{ name: 'Krona One', data: await font(), weight: 400, style: 'normal' }],
+  })
+  const png = new Resvg(svg).render().asPng()
+  return new Response(png, {
+    headers: {
+      'content-type': 'image/png',
+      'cache-control': 'public, max-age=31536000, immutable',
+    },
+  })
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/lib/og-render.ts
+git commit -m "feat(og): satori+resvg shared OG renderer"
+```
+
+### Task 11.2: `/og/blog/[slug]/` route
+
+**Files:**
+- Create: `src/app/(frontend)/og/blog/[slug]/route.tsx`
+- Reference: `~/Documents/projects/arter-blog/src/pages/og/blog/[id].png.ts`
+
+- [ ] **Step 1: Implement**
+
+```tsx
+// src/app/(frontend)/og/blog/[slug]/route.tsx
+import { getPostBySlug } from '@/lib/posts'
+import { renderOgPng } from '@/lib/og-render'
+
+export async function GET(_req: Request, { params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const post = await getPostBySlug(slug)
+  const title = post?.title ?? 'Chris Arter'
+  return renderOgPng(
+    <div
+      style={{
+        width: 1200,
+        height: 630,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        background: '#1b1a17',
+        color: '#f5f1ea',
+        padding: 80,
+        fontFamily: 'Krona One',
+      }}
+    >
+      <div style={{ fontSize: 24, opacity: 0.7, marginBottom: 24 }}>arter.dev / writing</div>
+      <div style={{ fontSize: 72, lineHeight: 1.1, maxWidth: 1040 }}>{title}</div>
+    </div>,
+  )
+}
+```
+
+- [ ] **Step 2: Smoke**
+
+Visit `http://localhost:3000/og/blog/a-guide-to-laravel-authorization-patterns/` — should return a PNG.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/app/(frontend)/og/blog
+git commit -m "feat(og): /og/blog/[slug] image route"
+```
+
+### Task 11.3: `/og/projects/[slug]/` and `/og/default/`
+
+**Files:**
+- Create: `src/app/(frontend)/og/projects/[slug]/route.tsx`
+- Create: `src/app/(frontend)/og/default/route.tsx`
+
+- [ ] **Step 1: Mirror the blog OG route**
+
+Same shell, swap title source (project title or `siteConfig.title`).
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/(frontend)/og
+git commit -m "feat(og): project and default OG routes"
+```
+
+---
+
+## Phase 12 — E2E tests and visual diff
+
+**Milestone:** `pnpm test:e2e` exercises the critical routes; a manual visual-diff Playwright script compares 8 representative URLs against the old site.
+
+### Task 12.1: Smoke E2E
+
+**Files:**
+- Create: `tests/e2e/smoke.spec.ts`
+
+- [ ] **Step 1: Write tests**
+
+```ts
+// tests/e2e/smoke.spec.ts
+import { test, expect } from '@playwright/test'
+
+test('home renders', async ({ page }) => {
+  await page.goto('http://localhost:3000/')
+  await expect(page.locator('h2:has-text("Latest in Tech")')).toBeVisible()
+})
+
+test('blog post renders with TOC anchor', async ({ page }) => {
+  await page.goto('http://localhost:3000/blog/a-guide-to-laravel-authorization-patterns/')
+  await expect(page.locator('h1:has-text("Authorization Patterns")')).toBeVisible()
+  const firstAnchor = page.locator('h2[id]').first()
+  await expect(firstAnchor).toBeVisible()
+})
+
+test('rss returns xml', async ({ request }) => {
+  const r = await request.get('http://localhost:3000/rss.xml')
+  expect(r.status()).toBe(200)
+  expect(r.headers()['content-type']).toContain('application/rss+xml')
+  expect(await r.text()).toContain('<rss version="2.0"')
+})
+
+test('sitemap contains posts and tags', async ({ request }) => {
+  const xml = await (await request.get('http://localhost:3000/sitemap.xml')).text()
+  expect(xml).toContain('/blog/')
+  expect(xml).toContain('/tags/')
+})
+
+test('og image returns png', async ({ request }) => {
+  const r = await request.get(
+    'http://localhost:3000/og/blog/a-guide-to-laravel-authorization-patterns/',
+  )
+  expect(r.status()).toBe(200)
+  expect(r.headers()['content-type']).toBe('image/png')
+})
+
+test('about page renders via catch-all', async ({ page }) => {
+  await page.goto('http://localhost:3000/about/')
+  await expect(page.locator('h1')).toBeVisible()
+})
+```
+
+- [ ] **Step 2: Run**
+
+Run: `pnpm test:e2e`
+Expected: 6 PASS.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/e2e/smoke.spec.ts
+git commit -m "test(e2e): smoke tests for core routes"
+```
+
+### Task 12.2: Visual diff script
+
+**Files:**
+- Create: `scripts/visual-diff.ts`
+
+- [ ] **Step 1: Implement**
+
+```ts
+// scripts/visual-diff.ts
+import { chromium } from 'playwright'
+import { mkdir } from 'node:fs/promises'
+
+const URLS = [
+  '/',
+  '/blog/',
+  '/blog/a-guide-to-laravel-authorization-patterns/',
+  '/blog/feedback-loops-in-an-AI-era/',
+  '/blog/im-free/',
+  '/projects/',
+  '/projects/bully/',
+  '/tags/',
+  '/about/',
+  '/hire-me/',
+]
+
+async function main() {
+  await mkdir('.visual-diff/old', { recursive: true })
+  await mkdir('.visual-diff/new', { recursive: true })
+  const browser = await chromium.launch()
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } })
+  const page = await ctx.newPage()
+  for (const url of URLS) {
+    const file = url.replace(/\W+/g, '_').replace(/^_|_$/g, '') || 'home'
+    await page.goto('https://arter.dev' + url, { waitUntil: 'networkidle' })
+    await page.screenshot({ path: `.visual-diff/old/${file}.png`, fullPage: true })
+    await page.goto('http://localhost:3000' + url, { waitUntil: 'networkidle' })
+    await page.screenshot({ path: `.visual-diff/new/${file}.png`, fullPage: true })
+  }
+  await browser.close()
+  console.log('Visual diff screenshots written to .visual-diff/{old,new}')
+}
+main().catch((e) => { console.error(e); process.exit(1) })
+```
+
+- [ ] **Step 2: Add script entry**
+
+In `package.json`:
+```json
+"visual:diff": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" tsx scripts/visual-diff.ts"
+```
+
+- [ ] **Step 3: Run + manually inspect**
+
+Run: `pnpm visual:diff`
+Manually open `.visual-diff/old/*` and `.visual-diff/new/*` side by side. Address any visible regressions before proceeding.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add scripts/visual-diff.ts package.json
+echo '.visual-diff/' >> .gitignore
+git add .gitignore
+git commit -m "chore: visual-diff script for parity check"
+```
+
+---
+
+## Phase 13 — Production deploy and content import
+
+**Milestone:** the worker serves the migrated site at its workers.dev URL; smoke tests pass against prod URL.
+
+### Task 13.1: Configure prod environment in `wrangler.jsonc`
+
+**Files:**
+- Modify: `wrangler.jsonc`
+
+- [ ] **Step 1: Update production names + bindings**
+
+Replace `"name": "my-app"` with `"name": "arter-payload"`. Update `d1_databases[0].database_name` to `"arter-payload"`. Update `r2_buckets[0].bucket_name` to `"arter-payload-media"`.
+
+- [ ] **Step 2: Create prod D1 + R2 (if not already created)**
+
+```bash
+pnpm wrangler d1 create arter-payload
+pnpm wrangler r2 bucket create arter-payload-media
+```
+
+Copy the `database_id` from the output into `wrangler.jsonc`.
+
+- [ ] **Step 3: Set production secret**
+
+```bash
+pnpm wrangler secret put PAYLOAD_SECRET
+# paste the result of: openssl rand -hex 32
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add wrangler.jsonc
+git commit -m "chore: production worker, D1, R2 names"
+```
+
+### Task 13.2: Apply schema to prod D1
+
+- [ ] **Step 1: Run prod migrate**
+
+```bash
+CLOUDFLARE_ENV=production pnpm run deploy:database
+```
+
+Expected: migrations apply against the prod D1.
+
+- [ ] **Step 2: Verify**
+
+```bash
+pnpm wrangler d1 execute arter-payload --command 'SELECT name FROM sqlite_master WHERE type="table"' --remote
+```
+
+Expected: `posts`, `projects`, `pages`, `tags`, `media`, `users` and Payload's bookkeeping tables.
+
+### Task 13.3: Run import against prod
+
+- [ ] **Step 1: Run**
+
+```bash
+CLOUDFLARE_ENV=production pnpm import:astro
+```
+
+Expected: 43 posts, 8 projects, 2 pages created. Image uploads land in the prod R2 bucket.
+
+- [ ] **Step 2: Spot check**
+
+Visit Cloudflare dashboard → R2 → bucket → confirm media files are present.
+
+### Task 13.4: Deploy worker
+
+- [ ] **Step 1: Build and deploy**
+
+```bash
+CLOUDFLARE_ENV=production pnpm run deploy:app
+```
+
+Expected: deploy succeeds; workers.dev URL reported.
+
+- [ ] **Step 2: Smoke against prod URL**
+
+Curl from local:
+```bash
+curl -sS https://arter-payload.<account>.workers.dev/rss.xml | head -20
+curl -sS https://arter-payload.<account>.workers.dev/blog/a-guide-to-laravel-authorization-patterns/ | head -50
+```
+Expected: real content; no errors.
+
+### Task 13.5: Re-run E2E against prod URL
+
+- [ ] **Step 1: Update `playwright.config.ts`** to allow `BASE_URL` env override of `webServer`.
+
+Add at top of `defineConfig`:
+```ts
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000'
+```
+Pass `use: { baseURL }` and conditionally drop `webServer` if `PLAYWRIGHT_BASE_URL` is set.
+
+Update `tests/e2e/smoke.spec.ts` to use relative paths (already mostly do; replace any `http://localhost:3000` with relative).
+
+- [ ] **Step 2: Run against prod URL**
+
+```bash
+PLAYWRIGHT_BASE_URL=https://arter-payload.<account>.workers.dev pnpm test:e2e
+```
+Expected: PASS.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add playwright.config.ts tests/e2e
+git commit -m "test(e2e): allow PLAYWRIGHT_BASE_URL override"
+```
+
+---
+
+## Phase 14 — DNS cutover and post-launch
+
+**Milestone:** `https://arter.dev` resolves to the worker; old hosting is offline (or kept on standby briefly).
+
+### Task 14.1: Add `arter.dev` custom domain to the worker
+
+- [ ] **Step 1: In Cloudflare dashboard**
+
+Workers & Pages → `arter-payload` → Settings → Triggers → Add Custom Domain → `arter.dev` → Save.
+
+- [ ] **Step 2: Wait for DNS to settle (couple minutes)**, then visit `https://arter.dev/` and confirm it serves the new site.
+
+### Task 14.2: Final smoke
+
+- [ ] **Step 1: Curl key endpoints**
+
+```bash
+for url in / /blog/ /rss.xml /sitemap.xml /tags/ /about/ /blog/a-guide-to-laravel-authorization-patterns/; do
+  echo "=== $url ==="
+  curl -s -o /dev/null -w '%{http_code}\n' "https://arter.dev$url"
+done
+```
+Expected: every URL returns 200.
+
+- [ ] **Step 2: Hit OG**
+
+```bash
+curl -I https://arter.dev/og/blog/a-guide-to-laravel-authorization-patterns/
+```
+Expected: `200`, `content-type: image/png`.
+
+### Task 14.3: 24-hour log watch
+
+- [ ] **Step 1: Enable Workers Logs in Cloudflare dashboard** if not on.
+
+- [ ] **Step 2: After ~24h, scan for 5xx and 404s**
+
+In dashboard → Workers → `arter-payload` → Logs. Sort by status `>= 400`. Add redirects in `next.config.ts` for any URLs that show up repeatedly and weren't covered by the migration.
+
+### Task 14.4: Decommission old hosting
+
+- [ ] **Step 1: Take the old Astro deployment offline** (or leave parked at a non-canonical hostname for archival).
+
+- [ ] **Step 2: Final commit**
+
+```bash
+git commit --allow-empty -m "chore: migration complete — arter.dev cutover"
+```
+
+---
+
+## Self-review notes
+
+- All four collections (`posts`, `projects`, `pages`, `tags`) → covered in Phase 1.
+- All three custom blocks (`linkPreview`, `callout`, `mediaBlock`) → Phase 2.
+- One-shot Local API import script → Phases 3–5.
+- Frontend route map (home, blog, projects, tags, catch-all pages, og, rss, feed.json, sitemap, robots) → Phases 7–11.
+- Component port (Nav, Header, Footer, Hero, lists, previews, breadcrumbs, dates, pagination, JSON-LD schemas, TOC, share, footnotes, Giscus) → Phases 7 and 9.
+- Lexical renderer including custom blocks and server-side anchors → Phase 6.
+- Visual diff against old site → Phase 12.
+- Cutover to prod with idempotent re-import → Phase 13.
+- Post-launch monitoring + redirects → Phase 14.
+- Out-of-scope items (newsletter, search, analytics, draft workflow, comment migration) are not represented in any task — correct per spec.