feat: contextual OG share-card image generator#6243
Open
rebelchris wants to merge 4 commits into
Open
Conversation
Adds an "Open Graph" Storybook section auditing daily.dev's outbound link previews across every share surface (article, shared post, profile/DevCard, squad, squad invite, source, tag, comment, referral, Plus, homepage) and proposing a unified "Layout A" recommended template. - The current column renders the real images daily.dev serves today; the recommended column renders the Layout A cover for the same real entity so the before/after is apples-to-apples. - Single source of truth in cover.tsx (Layout A atoms + OgCover); RecommendedOg in dailyOgImages.tsx is the adapter every page consumes. - Includes guidelines/research, an X (Twitter) deep dive, a Satori template spec, a benchmark of how the best platforms unfurl, and a link copy/metadata page. Docs/review only — Storybook stories plus one preview.tsx sidebar entry; no app/runtime code paths are touched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Render share previews (post, comment, source, squad, profile, tag, invite, Plus) as real webapp pages that daily-api screenshots — the same pipeline as the DevCard v2 image — instead of the Satori og.daily.dev service. Rendering in a real browser means line-clamp, backdrop-blur, the real fonts and the design-system tokens all work natively. - components/image-generator/ShareCard: the "Layout A" card system (identity eyebrow, headline, engagement/stat/community/CTA meta, art). - pages/image-generator/share/[type]/[id]: one dynamic page with a per-type loader; queries only public fields so the logged-out scraper can render them. - next-seo: getShareImageUrl() helper; repoint og:image for posts (incl. ?userid sharer), sources and tags at /api/og/<type>/<id>.png. Requires the daily-api /og screenshot route (separate PR). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…dirty pages - coalesce possibly-undefined names/ids to satisfy tsconfig.strict (ShareCard identity, sources getShareImageUrl) - revert the og:image repoint on posts/[id]/analytics and posts/[id]/share: those files carry pre-existing strict-typing debt, so touching them tripped typecheck:strict:changed. That wiring moves to a follow-up; the new render pages + post/source/tag repoints remain. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
2 participants
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.
What
Replaces the Satori (
og.daily.dev) Open Graph images with contextual share cards rendered as real webapp pages and screenshotted by daily-api — the same proven pipeline as the DevCard v2 image. Rendering in a real browser (not Satori) meansline-clamp,backdrop-blur, real fonts and the design-system tokens all work natively, with none of the Satori workarounds.Covers every share surface: post (+
?useridsharer), comment, source, squad (+ invite variant), profile, tag, invite, Plus.How
components/image-generator/ShareCard.tsx— the "Layout A" card system (identity eyebrow, headline, and the meta/art slots: engagement bar, stat bar, community face pile, CTA, mascot, tiles).pages/image-generator/share/[type]/[id].tsx— one dynamic page; a per-type loader fetches the entity. Queries only public fields (no@auth/user-scoped fields) so the logged-out scraper can render them.next-seo.ts—getShareImageUrl(type, id, params)helper; repointedog:imagefor posts (main page), sources and tags at${API_URL}/og/<type>/<id>.png.Depends on
The daily-api
/ogscreenshot route: dailydotdev/daily-api#3963.Test plan
Load the pages directly (eyeball) and via the API (screenshot):
/<webapp>/image-generator/share/posts/<id>·?userid=<userId>for the sharer variant…/share/{comments,sources,squads,profile,tags,invite,plus}/<id>Follow-ups
COMMUNITY_FACESin the page is a 3-avatar placeholder — replace with the final 20 AI-generated avatars hosted onmedia.daily.dev(per design).posts/[id]/shareandposts/[id]/analyticsis deferred: those pages carry pre-existingtsconfig.stricterrors, so editing them trippedtypecheck:strict:changed. Wiring them (and squad/comment/invite/Plus surfaces) is a small follow-up once that strict debt is addressed.🤖 Generated with Claude Code