Repository navigation
feat: add route-specific OpenGraph & Twitter preview cards (issue #124) - #131
Open
reddyharsha11 wants to merge 6 commits into
Open
reddyharsha11 wants to merge 6 commits into
reddyharsha11 wants to merge 6 commits into
Conversation
- Add metadataBase, openGraph, and twitter metadata to root layout.tsx - Add dynamic login metadata with ref=hacktoberfest description - Add app/opengraph-image.tsx serving 01-home.png (1600x900) - Add app/twitter-image.tsx re-exporting the same image - Add page-specific og:image for bots (05-agents.png) and settings (08-customize.png) - Allow /opengraph-image and /twitter-image through auth proxy without session - Add 18 feature mockup PNGs to public/og/ for future per-route assignment - Add metadata.test.ts (3 tests) covering root layout, image specs, and hacktoberfest - Update proxy.test.ts with og-image route coverage - All 14 tests pass, tsc and biome clean
…genthq#124) - Add app/og-helper.ts: shared utility (ogImageResponse, ogSize, ogContentType) to avoid boilerplate duplication across route-level image files - Add per-route opengraph-image.tsx for: /bots -> 05-agents.png /dashboard -> 04-dashboard.png /settings -> 08-customize.png /apps -> 07-apps.png /knowledge -> 11-knowledge.png /memory -> 12-memory.png /playbooks -> 13-playbooks.png /review -> 14-reviews.png /skills -> 15-skills.png /learnings -> 17-learnings.png /wiki -> 18-wiki.png - proxy.ts: change exact /opengraph-image match to endsWith() so all per-route OG image paths pass through the auth middleware without a session cookie (link preview crawlers have no cookie) - proxy.test.ts: add /bots/opengraph-image, /settings/opengraph-image, /bots/twitter-image to the allow list assertions - next.config.ts: add *.loca.lt to allowedDevOrigins for local testing with localtunnel All 14 tests pass. tsc and biome clean.
- layout.tsx: replace static metadata export with generateMetadata() that reads x-forwarded-host/host headers at runtime, so og:image URL resolves correctly on localhost, localtunnel, and production without any hardcoded domain - login/page.tsx: add explicit og:image + twitter:image using the same dynamic host resolution (needed because the [[...login]] catch-all segment prevents co-locating an opengraph-image.tsx sibling) - metadata.test.ts: mock next/headers, switch to calling generateMetadata() instead of reading static metadata export All 14 tests pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves issue #124. Adds dynamic and route-specific OpenGraph and Twitter cards across all major routes of the application using existing static preview images in
public/og/.Key Changes
Dynamic Origin Resolution (
app/layout.tsx):metadataexport withgenerateMetadata()that dynamically resolvesx-forwarded-protoandx-forwarded-hostso image URLs point to the active host (localhost, tunnel, or production domain).Route-Specific Page Metadata:
/dashboard,/bots,/apps,/settings,/wiki,/skills,/tasks,/knowledge,/memory, etc.) to specify their distinctopenGraphandtwittertitles, descriptions, and static PNG assets frompublic/og/.Proxy Crawler Support (
proxy.ts):/login./login.Security & Proxy Whitelisting:
/og/*static assets whitelisted so crawlers and clients can fetch preview images without requiring session cookies.Verification
/dashboard(04-dashboard.png),/bots(05-agents.png), and/login(01-home.png).bun test app/metadata.test.ts proxy.test.ts.Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.