feat: dark mode aware Open Graph social preview images (#1047)#1109
feat: dark mode aware Open Graph social preview images (#1047)#1109VIDYANKSHINI wants to merge 4 commits into
Conversation
|
@VIDYANKSHINI is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
gssoc26
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds an Open Graph (OG) image endpoint for user profiles and enriches it with GitHub-derived stats (contributions, streak, and “top language”).
Changes:
- Added
fetchTopLanguage()helper to derive a user’s most common repo language. - Introduced a new
opengraph-image.tsxroute that renders a dynamic profile OG image. - Configured edge runtime and a 24h revalidation window for the OG image.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/lib/public-profile-data.ts | Adds GitHub “top language” fetching/aggregation logic. |
| src/app/u/[username]/opengraph-image.tsx | Implements the OG image endpoint and renders stats into the image. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Cache for 24 hours | ||
| export const revalidate = 86400; |
| export async function fetchTopLanguage( | ||
| username: string, | ||
| token?: string | ||
| ): Promise<string | null> { | ||
| const res = await ghFetch( | ||
| `${GITHUB_API}/users/${username}/repos?sort=updated&per_page=30`, | ||
| token | ||
| ); |
| const repos = (await res.json()) as Array<{ language: string | null }>; | ||
|
|
||
| const counts: Record<string, number> = {}; | ||
| for (const r of repos) { | ||
| if (r.language) { | ||
| counts[r.language] = (counts[r.language] || 0) + 1; | ||
| } | ||
| } | ||
|
|
||
| let topLang: string | null = null; | ||
| let maxCount = 0; | ||
| for (const [lang, count] of Object.entries(counts)) { | ||
| if (count > maxCount) { | ||
| maxCount = count; | ||
| topLang = lang; | ||
| } | ||
| } | ||
|
|
||
| return topLang; | ||
| } |
Summary
This PR generates dynamic OG images for public profiles using Next.js built-in ImageResponse (Edge Runtime) to improve social sharing.
Closes #1047
Type of Change
Changes Made
fetchTopLanguagefunction insrc/lib/public-profile-data.tsto calculate the user's top programming language from their recent GitHub repositories.src/app/u/[username]/opengraph-image.tsxusingnext/ogthat renders a dark-themed image matching the DevTrack aesthetic.revalidate = 86400) and a generic fallback image for when a user profile is not found or is private.How to Test
Steps for the reviewer to verify this works:
npm run dev.http://localhost:3000/u/[your-username]/opengraph-imagein your browser.http://localhost:3000/u/nonexistent-user-123/opengraph-imageto verify that the "Profile Not Found" fallback image is displayed.Checklist
npm run lintpasses locallynpm run type-check)