Landing: show real generated maps as examples

[cggaurav]

The landing page claimed the YouTube feature worked but showed nothing it had produced. This adds a Maps from real talks section after the YouTube section, with four maps generated by the live /yt/transform flow and left exactly as they came out.

Talk	Map
Steve Jobs, Stanford 2005	/s/XrSa97dgHck
Adm. McRaven, UT Austin 2014	/s/h2CfqBUw6P4
Hans Rosling, The best stats you've ever seen	/s/5-v5XwE6o50
Randy Pausch, The Last Lecture	/s/khh1OA8U9xg

Design decisions

Sources are committed, not fetched. apps/editor/src/examples/*.mmd holds the full generated source. Three reasons: the landing page must not depend on the API being up to draw itself, robots.txt disallows /svg so a crawler would never see an API-served thumbnail, and a source in the repo is reviewable before it goes public. The model emits curly quotes, en dashes and non-breaking hyphens; those are normalised to ASCII and a test keeps them that way.

Previews are trimmed to depth 1 (previewSource). A full map renders about 1500x4300, an aspect near 0.35. Fitted into a card wider than it is tall, its labels come out a few pixels high and the card reads as texture rather than as a diagram. Trimming leaves 6 to 9 nodes at aspects 0.96 to 1.73. Same trick, and the same reason, as MOBILE_DEMO_SOURCE. The card links to the full map and a caption says so.

Links come from SHARE_BASE, not a literal domain, matching shortenShareUrl so forks and zone config win. A build without VITE_SHARE_BASE renders the cards unlinked rather than dead. The video credit is a sibling of the card link, not nested inside it, since <a> inside <a> is invalid HTML.

Verification

• All four /s/ links return 200 live, so no dead cards.
• A build with VITE_SHARE_BASE emits the four expected ?view=map hrefs, the four YouTube links, and zero nested anchors.
• At 390px, document.scrollWidth equals the viewport: no horizontal overflow, so this does not repeat the sideways scroll .landing-roadmap-canvas falls back to.
• 14 new tests (74 total pass), tsc --noEmit clean, pnpm build clean.
• Screenshotted desktop and mobile. First pass had unequal card heights where blurbs wrapped to two versus three lines, leaving the "Watch the talk" links on ragged baselines; fixed with flex:1 and re-checked.

Notes for review

• The Rosling preview is the weakest of the four: nine branches and the squarest aspect, so it scales down most (163px wide on a phone). Reducing it to fewer top-level branches would help.
• dangerouslySetInnerHTML is the same pattern the existing demo and roadmap sections use; the input is SVG rendered at build time from sources in this repo.
• Two TED talks (Ken Robinson, Simon Sinek) are deliberately absent. Their transcripts fail or come back in the wrong language upstream in getvideotranscript; details are in the local ../getvideotranscript-bugs.md.

Not included

The prerendered /examples/<slug>/ pages and generated sitemap. That is the part that puts new URLs into Search Console; this manifest is the data source it will read.

🤖 Generated with Claude Code