Cookbook covers: classical artwork cards

[NicholasKissel]

Replaces the generative SVG poster covers on the cookbook index with classical artwork cards, and gives the cookbook detail pages a matching artwork-hero treatment. All artwork is public domain or CC0, verified against each museum's open-access designation (sourcing notes in .context/research/cookbook-cover-image-candidates.md in the workspace).

Index page

• Cards are artwork + title only: tuned focal crop, bottom scrim, and a tracked-caps Manrope title lockup at the head of each cover. No numerals, marks, or captions.
• Page chrome stripped to match: no hero header or section divider, just search, filters, and the shelf of covers (sr-only h1 retained for SEO/accessibility).
• Filter and search changes animate: covers fade/scale in and out and surviving covers slide into place (framer-motion AnimatePresence + layout).

Detail pages

• Gallery-style layout: a clean text column (back link, title, description, article) beside a right rail that stacks the guide's cover, "Get started" example links, the agent-skill install command with copy, and the "On this page" TOC; the TOC pins once it reaches the top and scrolls internally when longer than the viewport. Replaces three stacked full-width sections.
• The rail cover is presented as a gallery plate: registration-grid hairlines crossing at the corners, no text over the artwork, and a frosted-glass badge on the corner whose circular "Cookbook · Rivet" text rotates continuously.
• The index page carries a centered "Cookbook" masthead above the search, filters, and shelf.
• On mobile the rail collapses and the example links plus skill command render inline under the description.
• Refined prose styles and anchor scroll margins throughout the article.

Artwork set

Guide	Artwork	Source
AI Agent	The Thinker, Rodin	existing CDN asset
AI Agent Workspaces	The Alchymist Discovering Phosphorus, Pether after Wright of Derby	Cleveland Museum of Art, CC0
Chat Room	Merry Company on a Terrace, Jan Steen	The Met Open Access, CC0
Collaborative Text Editor	Saint Matthew Writing His Gospel, Dolci	Getty Open Content, CC0
Cron Jobs	The November Meteors, Trouvelot	NYPL, public domain
Live Cursors	Curiosity, ter Borch	existing CDN asset
Multiplayer Game	The Card Players, Cezanne	The Met Open Access, CC0
Database per Tenant	Dolls' house of Petronella Oortman	Rijksmuseum, public domain

New images are uploaded to the rivet-assets R2 bucket under website/images/cookbook/. Covers are optimized at build time through getImage (webp), with assets.rivet.dev added to Astro's image.domains (also fixes homepage hero artwork 403s in the dev server).

Verification

• Full pnpm build passes, including the docs code-block typecheck.
• Index and detail pages verified in-browser at desktop and mobile widths: covers render, filter animation plays, search and tag filters work, TOC highlights on scroll, no console errors.
• All CDN image URLs return 200.

Note: the parent PR picked up three unblocking fixes found along the way: the broken pool-configuration.mdx SDK snippet (now typechecked against @rivetkit/engine-api-full), a missing inspector_tabs field in the rivetkit-wasm actor config bridge that broke cargo build for the wasm crate, and @nocheck markers on the protocol-shape pseudo-code blocks in inspector-tabs.mdx.

🤖 Generated with Claude Code

[railway-app]

🚅 Deployed to the rivet-pr-5228 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
kitchen-sink	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 8:33 am
website	😴 Sleeping (View Logs)	Web	Jun 12, 2026 at 8:20 am
mcp-hub	✅ Success (View Logs)	Web	Jun 12, 2026 at 6:25 am
frontend-cloud	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 6:24 am
ladle	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 6:23 am
frontend-inspector	❌ Build Failed (View Logs)	Web	Jun 12, 2026 at 6:23 am

[NicholasKissel]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Website premium polish: positioning, typography, and on-prem surfaces #5230
• Compare pages: premium redesign #5229
• Cookbook covers: classical artwork cards #5228 👈 (View in Graphite)
• SEO content plays: /compare pages, FAQ schema, cookbook infra #5219
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Cookbook covers — classical artwork cards\n\nOverview: Replaces 1231 lines of generative SVG cover art with real classical artwork images. The index page gets animated filter transitions via framer-motion, and detail pages get a new two-column layout with an artwork hero rail. Good overall quality — a few issues worth addressing before merge.\n\n---\n\n### Potential Bugs\n\n1. Font weight regression in fonts.css — All six Perfectly Nineties at-font-face declarations have their font-weight changed from 900/800/600 to normal. When multiple at-font-face blocks share the same family + weight, the browser uses the last one — so Black, Extrabold, and Semibold all collapse to a single variant. Any site code that still requests font-weight: 900 or 600 with this family will silently render the wrong variant. If Perfectly Nineties is still in use elsewhere this is a regression; if it is now fully unused, the correct fix is to remove all six at-font-face blocks entirely rather than collapsing them.\n\n2. Slug mismatch: ai-agent-workspace vs. ai-agent-workspaces — covers.ts keys on ai-agent-workspace (singular) but the PR description says the guide is AI Agent Workspaces (plural). If the content collection slug is ai-agent-workspaces, the lookup fails silently and the card renders without artwork. Worth double-checking against the actual file name in the cookbook content collection.\n\n3. Index image optimization width is too large — index.astro requests width: 1100 for card images. At the xl breakpoint with max-w-7xl + 4-column grid + gaps, cards are roughly 280-300 px wide. Serving 1100 px webp images for 300 px display slots wastes around 4x bandwidth. A width of 400-500 px would be appropriate for these cards (the detail page hero at width: 640 is more reasonable).\n\n---\n\n### Minor Issues\n\n4. transform: scale() on an object-fit: cover image is unusual — Several covers in CookbookCard.tsx apply both objectPosition and transform: scale(1.55) to the img element. object-fit: cover already crops; stacking a CSS transform produces a visual zoom-within-zoom whose interaction with object-position is browser-dependent. A background-image approach (or CSS transform on a wrapping div) would be more predictable for future maintainers adding new artwork.\n\n5. No eager loading on the detail page hero cover — The cover image in the sidebar of [...slug].astro is above the fold and directly affects LCP. It has no loading or fetchpriority attribute, defaulting to lazy. Adding loading=eager fetchpriority=high would improve perceived performance on detail pages with a cover.\n\n6. format detection assumes only .jpg/.png — The endsWith png check would misclassify .jpeg, .webp, .avif. All current images are JPEG so this is low risk now, but a URL parse is more robust if the artwork set grows.\n\n7. live-cursors cover path inconsistency — covers.ts points live-cursors at website/images/thinking/think.jpg (and ai-agent at thinking/thinker.jpg). All other entries use website/images/cookbook/. The header comment says all new images are under website/images/cookbook/, which is misleading as written.\n\n---\n\n### What is Good\n\n- Net -995 lines — deleting the generative SVG system is a real simplification.\n- Copy button upgrade — moving from singleton id=copy-skill-btn to class-based .copy-skill-btn with data-copy correctly supports both the mobile and desktop copy buttons on the same page.\n- Promise.all for async image ops — correctly parallelises the getImage calls across all cookbook entries.\n- AnimatePresence mode=popLayout — correct mode so exiting cards leave layout immediately and surviving cards animate without a hold.\n- Decorative alt attribute — artwork images are correctly marked as decorative.\n- astro.config.mjs domain allowlist — adding assets.rivet.dev fixes both the cookbook images and the pre-existing homepage hero 403s in dev.