fix(marketing): replace OG image with product screenshot

[saddlepaddle]

Summary

• Replace the Satori-generated text-only opengraph-image.tsx with an actual product screenshot (public/og-image.png)
• Both openGraph.images and twitter.images in layout metadata already reference /og-image.png — the file now exists
• Add /og-preview utility route for regenerating the screenshot at 1200x630 when the hero design changes

Test plan

• Visit /og-preview locally at 1200x630 viewport to verify the preview route renders correctly
• Verify <meta property="og:image"> and <meta name="twitter:image"> tags point to /og-image.png in page source
• Test with a social card validator (e.g. https://www.opengraph.xyz/) after deploy

Summary by CodeRabbit

• New Features

  • Added a new Open Graph preview interface for social media sharing.

• Refactor

  • Updated Open Graph image generation approach.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR replaces the existing Open Graph image generator with a new static preview page. The old generator is removed, and a new React/Next.js page component is added that renders a mock editor interface UI sized at 1200x630 pixels.

Changes

Cohort / File(s)	Summary
OG Image Removal apps/marketing/src/app/opengraph-image.tsx	Deleted the entire Open Graph image generator, including exported runtime, alt, size, and contentType constants, plus the default Image component that rendered an ImageResponse with title, subtitle, and chip elements.
OG Preview Page Addition apps/marketing/src/app/og-preview/page.tsx	New 1200x630 preview page with self-contained UI components (SupersetLogo, StatusDot, WorkspaceItem, FileChangeItem) arranged in a three-column layout: left workspace sidebar, center editor area with terminal content, right changelist showing recent file changes. Data rendered from constant arrays.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Add blog post: roadmap to 100 parallel coding agents #1173: Modifies the same opengraph-image.tsx file and adds blog/[slug]/opengraph-image.tsx, indicating ongoing work on Open Graph image handling in the marketing app.

Poem

🐰 A preview page hops into view,
With workspaces and changes anew,
Mock terminals dance in 1200×630,
Where OG images come alive so vivid—
The old generator takes a bow, adieu! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is missing several required template sections: Type of Change, Testing, and Additional Notes. While Summary and Test plan are present, the template structure is not followed.	Add missing template sections including Type of Change (checkbox selection), Testing procedures, and Additional Notes to complete the required description format.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: replacing a generated OG image with a product screenshot, which matches the core objective of the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-twitter-image-mismatch-in-marketing-site-metad

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🚀 Preview Deployment

🔗 Preview Links

Service	Status	Link
Database (Neon)	✅	View Branch
Electric (Fly.io)	✅	View App
API (Vercel)	✅	Open Preview
Web (Vercel)	✅	Open Preview
Marketing (Vercel)	✅	Open Preview
Admin (Vercel)	✅	Open Preview
Docs (Vercel)	✅	Open Preview

---

Preview updates automatically with new commits