Skip to content

Add dynamic OG images for all pages#40

Merged
itsyogesh merged 2 commits intomasterfrom
feat/og-images
Mar 22, 2026
Merged

Add dynamic OG images for all pages#40
itsyogesh merged 2 commits intomasterfrom
feat/og-images

Conversation

@itsyogesh
Copy link
Copy Markdown
Owner

Summary

  • Add per-page OG image generation using next/og ImageResponse API (1200x630, edge runtime)
  • Four dedicated routes: /api/og/home, /api/og/studio, /api/og/builder, /api/og/docs
  • Each image includes page-specific visual mockups (code editor, extrinsic form, docs sidebar)
  • Shared Nunito font loader from Google Fonts
  • Light style with brand gradient accent bar, black logo top-left, relaycode.org bottom-right
  • Metadata wired up in all page layouts for Twitter cards, Discord embeds, and Slack previews

Test plan

  • Visit /api/og/home, /api/og/studio, /api/og/builder, /api/og/docs and verify images render
  • Check og:image meta tags on each page via view-source or browser devtools
  • Test link previews on Twitter, Discord, Slack
  • Verify Vercel deployment serves OG images correctly on edge

Generate per-page Open Graph images at 1200x630 via Next.js edge
API routes using ImageResponse. Each page gets a dedicated route
with page-specific visual mockups:

- /api/og/home — toolkit overview with 2x2 tool grid
- /api/og/studio — code editor mockup with Solidity snippet
- /api/og/builder — extrinsic form mockup (balances.transferKeepAlive)
- /api/og/docs — documentation sidebar + content mockup

Shared font loader fetches Nunito from Google Fonts at runtime.
Metadata wired up in all page layouts for Twitter cards, Discord
embeds, and Slack previews.
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 22, 2026

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

Project Deployment Actions Updated (UTC)
relaycode Ready Ready Preview, Comment Mar 22, 2026 1:48am

Request Review

@itsyogesh itsyogesh merged commit 1ea1e53 into master Mar 22, 2026
5 checks passed
@itsyogesh itsyogesh deleted the feat/og-images branch March 22, 2026 01:52
@codecov-commenter
Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 48.90%. Comparing base (d525f21) to head (9e72cee).
⚠️ Report is 6 commits behind head on master.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##           master      #40      +/-   ##
==========================================
- Coverage   50.42%   48.90%   -1.53%     
==========================================
  Files         178      180       +2     
  Lines       22266    22946     +680     
  Branches     1236     1236              
==========================================
- Hits        11227    11221       -6     
- Misses      10991    11677     +686     
  Partials       48       48              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants