Polish OG images, detail hero, locker first paint, and card crops

[Chinmay-KB]

TL;DR

Second PR (sitemap 500 is #7). These are the eight product UI nits only.

OG/Twitter and share now use the existing .og.jpg (1200×686 JPEG). Detail hero sizes to the image and is taller. Homepage locker is server-rendered. Dead /g/{slug} uniqueness suffixes redirect to the live -1 page. Cards are 7:4 desktop / square mobile, top-weighted. No watermark.

What changed (by nit)

1. OG / Twitter image — generateMetadata used imageUrl (.detail.webp). It now uses .og.jpg with 1200×686. WebP unfurls were dying in iMessage / Slack / older Twitter cards.

2. Detail hero — Dropped aspect-video + max-h 58svh/540px. The frame follows the image (h-auto, object-contain object-top) with max-h-[min(82svh,920px)] so square gens don’t letterbox and 2–3 labels are readable without inspect.

3. OG description — Replaced the locker template with What if {builder} built {target}? The UI is the punchline.

4. Dead slug — Live feed already listed /g/microsoft-teams-tinder-1 (not the unsuffixed path). /g/microsoft-teams-tinder was a soft 404 (HTML “Not found”, HTTP 200). If the exact slug isn’t a public generation, we now permanentRedirect to the lowest numeric alias ({slug}-1). Feed still only selects published + visible + completed + image_ready rows.

5. Homepage evidence locker — Removed the Suspense fallback (“Loading the evidence locker…”). Feed + filters load with the page so the masonry HTML is in the first response.

6. Share button — Detail, card, and result share sheets pass .og.jpg (same as nit 1) for native share / preview. Tweet unfurls follow page OG tags.

7. Card crops — Desktop 560×320 (7:4), mobile/square 560×560, fit: cover + position: top at generation time; CSS aspect-[7/4] / aspect-square + object-cover object-top. Existing .card.webp files improve immediately via CSS; new gens (and a future yarn backfill:variants) get the cropped files.

8. No watermark — None added. Prompt copy already forbids brand watermarks in the generated UI.

How to review

• src/app/g/[slug]/page.tsx — OG jpeg + description + alias redirect
• src/app/g/[slug]/published-generation-hero.tsx — intrinsic hero sizing
• src/app/page.tsx — no locker Suspense
• src/lib/generation/render-display-variants.ts — card crop sizes
• src/components/generation-card.tsx — object-top + og share URL

Verification

• yarn test — 83 passed
• yarn lint — 0 errors
• yarn build — compiled

Post-merge live checks

• View source on /g/youtube-figma: og:image / twitter:image end in .og.jpg, description is the one-liner
• iMessage / Slack / Twitter card for that URL
• /g/airbnb-gmail (or any square) hero is not 16:9 letterboxed; labels readable without zoom
• /g/microsoft-teams-tinder → 308 to /g/microsoft-teams-tinder-1
• Homepage HTML contains masonry cards, not “Loading the evidence locker…”
• Feed cards show the top of the screenshot (cursed tell), 7:4 on desktop / square on mobile gens

Other site-health findings (not in this PR)

• Sitemap 500 / uncached cookies() fetch: PR Fix /sitemap.xml 500s from request-time cookies() #7
• Site-health CI does not probe live URLs
• /images is 404 (page removed)
• Cloudflare prepends managed robots.txt rules; Next Sitemap: line still present
• Soft 404s returning HTTP 200 (this PR fixes the Teams×Tinder alias; other missing /g/ slugs may still 200 with a Not found title)

  

[supabase]

This pull request has been ignored for the connected project bjsepxonrrnwwxaejkrv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
if-x-built-y	Ready	Preview	Aug 13, 2026 1:48pm