+ {cover ? (
+
+ ) : (
+
+ )}
+ {/* top bar: source (left) + logo (right) */}
+
+ {source ? (
+
+
+
+ {source}
+
+
+ ) : (
+
+ )}
+
+
+ {/* centered cover art — the hero of the square */}
+ {cover && (
+
+
+
+ )}
+
+ {children}
+
+);
+
+export const PageHeader = ({
+ eyebrow,
+ title,
+ children,
+}: {
+ eyebrow: string;
+ title: string;
+ children?: ReactNode;
+}): React.ReactElement => (
+
+
+ {eyebrow}
+
+
+ {title}
+
+ {children && (
+
+ {children}
+
+ )}
+
+);
+
+export const Heading = ({
+ children,
+ badge,
+}: {
+ children: ReactNode;
+ badge?: string;
+}): React.ReactElement => (
+
+
+ {children}
+
+ {badge && (
+
+ {badge}
+
+ )}
+
+);
+
+export const Muted = ({
+ children,
+ style,
+}: {
+ children: ReactNode;
+ style?: CSSProperties;
+}): React.ReactElement => (
+
+ {children}
+
+);
+
+export const Bullets = ({
+ items,
+ tone = 'neutral',
+ title,
+}: {
+ items: string[];
+ tone?: 'neutral' | 'bad' | 'good';
+ title?: string;
+}): React.ReactElement => {
+ const color = { bad: '#d4342c', good: '#1f9d55', neutral: 'inherit' }[tone];
+ const mark = { bad: '✗', good: '✓', neutral: '•' }[tone];
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {items.map((item) => (
+ -
+
+ {mark}
+
+ {item}
+
+ ))}
+
+
+);
+
+export const TwoCol = ({
+ left,
+ right,
+ leftLabel,
+ rightLabel,
+}: {
+ left: ReactNode;
+ right: ReactNode;
+ leftLabel: string;
+ rightLabel: string;
+}): React.ReactElement => (
+
+ {[
+ { label: leftLabel, node: left, tone: '#d4342c' },
+ { label: rightLabel, node: right, tone: '#1f9d55' },
+ ].map((col) => (
+
+
+ {col.label}
+
+ {col.node}
+
+ ))}
+
+
+
+
+ {columns.map((c) => (
+ |
+ {c}
+ |
+ ))}
+
+
+
+ {rows.map((r) => (
+
+ {r.map((c, ci) => (
+ |
+ {c}
+ |
+ ))}
+
+ ))}
+
+
+
+ {children}
+
+);
diff --git a/packages/storybook/stories/open-graph/platformCards.tsx b/packages/storybook/stories/open-graph/platformCards.tsx
new file mode 100644
index 00000000000..52d30578c56
--- /dev/null
+++ b/packages/storybook/stories/open-graph/platformCards.tsx
@@ -0,0 +1,614 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Faithful mock-ups of how a shared link unfurls on each major platform.
+ * These intentionally use raw inline styles (not the daily.dev design tokens)
+ * because the goal is to reproduce the *third-party* chrome of X, LinkedIn,
+ * Facebook, Slack, Discord and the messengers as closely as possible so the
+ * team can review our Open Graph output in a realistic context.
+ */
+
+export type CardType = 'summary' | 'summary_large_image';
+
+export interface OgData {
+ /** Host shown in the preview, e.g. "app.daily.dev". */
+ domain: string;
+ /** og:url path, shown in the meta table only. */
+ path?: string;
+ /** og:title — the headline platforms display. */
+ title: string;
+ /** og:description. */
+ description: string;
+ /** og:image URL. Used when imageNode is not provided. */
+ image?: string;
+ /** Render a faithful mock of a dynamically generated image instead of ![]()
. */
+ imageNode?: ReactNode;
+ /** Square-ratio variant of the generated image, for summary cards. */
+ squareNode?: ReactNode;
+ /** twitter:card. */
+ cardType: CardType;
+ /** og:site_name. */
+ siteName?: string;
+ /** og:image:alt / twitter:image:alt. */
+ imageAlt?: string;
+ /** twitter:site handle, e.g. "@dailydotdev". */
+ twitterSite?: string;
+}
+
+const SANS =
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+
+const clamp = (lines: number): CSSProperties => ({
+ display: '-webkit-box',
+ WebkitLineClamp: lines,
+ WebkitBoxOrient: 'vertical',
+ overflow: 'hidden',
+});
+
+const Favicon = ({ size = 16 }: { size?: number }): React.ReactElement => (
+
+ d.
+
+);
+
+const ImageFrame = ({
+ data,
+ radius = 0,
+ ratio = 1200 / 630,
+}: {
+ data: OgData;
+ radius?: number;
+ ratio?: number;
+}): React.ReactElement => (
+
+ {data.imageNode ? (
+
{data.imageNode}
+ ) : (
+
+ )}
+
+ {data.squareNode ? (
+ // A dedicated square-ratio design (logo + cover art + source, no title).
+
{data.squareNode}
+ ) : (
+ // Fallback: keep the 1.91:1 design intact and letterbox it into the
+ // square so the whole card still reads — rather than squishing it.
+
+ {data.imageNode ? (
+
{data.imageNode}
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
{data.domain}
+
+ {data.title}
+
+
+ {data.description}
+
+
+
+
+
+ {data.domain}
+
+
+ );
+};
+
+// ---------------------------------------------------------------------------
+// LinkedIn
+// ---------------------------------------------------------------------------
+export const LinkedInCard = ({
+ data,
+}: {
+ data: OgData;
+}): React.ReactElement => (
+
+
+
+
+ {data.title}
+
+
+ {data.domain}
+
+
+
+
+
+
+ {data.domain}
+
+
+ {data.title}
+
+
+ {data.description}
+
+
+
+
+
+
+ {data.siteName || 'daily.dev'}
+
+
+
+ {data.title}
+
+
+ {data.description}
+
+
+
+
+
+
+ {data.siteName || 'daily.dev'}
+
+
+ {data.title}
+
+
+ {data.description}
+
+
+
+
+
+
+
+
+ {data.title}
+
+
+ {data.description}
+
+
+ {data.domain}
+
+
+
+
+
+
+ {data.title}
+
+
+ {data.domain}
+
+
+
+ {PLATFORMS.map(({ label, Card }) => (
+
+ ))}
+
+ |
+ {tag}
+ |
+
+ {value || —}
+ |
+
+ {limit ? `${len} / ${limit}` : len || ''}
+ |
+
+ );
+};
+
+export const MetaTagsTable = ({
+ data,
+}: {
+ data: OgData;
+}): React.ReactElement => {
+ const url = `https://${data.domain}${data.path || ''}`;
+ return (
+
+ );
+};
diff --git a/packages/storybook/stories/open-graph/useCases.tsx b/packages/storybook/stories/open-graph/useCases.tsx
new file mode 100644
index 00000000000..ee53ae7914e
--- /dev/null
+++ b/packages/storybook/stories/open-graph/useCases.tsx
@@ -0,0 +1,591 @@
+import React from 'react';
+import {
+ cloudinaryCharmEmptySquads,
+ cloudinaryCharmReadLater,
+ cloudinaryCharmNotEnoughTags,
+} from '@dailydotdev/shared/src/lib/image';
+import type { OgData } from './platformCards';
+import { RecommendedOg } from './dailyOgImages';
+
+export const DEFAULT_OG_IMAGE =
+ 'https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph';
+
+// The CURRENT column uses the REAL images daily.dev serves today (raw, not
+// re-created). Reality check (verified live 2026-06-17): only POSTS get a
+// generated card; profile, source, tag, squad, invite, Plus and the app
+// default all fall back to the SAME generic image. The marketing homepage
+// serves its own og-image.png.
+const LANDING_OG = 'https://daily.dev/og-image.png';
+
+// A real, live daily.dev post (so the current post card is the genuine asset).
+const POST_OG = 'https://og.daily.dev/api/posts/qojM1enSN';
+// The shared variant adds the sharer (real endpoint, ?userid=).
+const SHARED_OG = `${POST_OG}?userid=u_123`;
+const POST_TITLE = 'How to use traces to avoid breaking changes';
+const POST_SOURCE = 'Community Picks';
+const POST_COVER =
+ 'https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2a3c2ca8481678b5c9178cd656700187';
+// The post's real source logo (Community Picks) and the real commenter avatar.
+const POST_SOURCE_LOGO =
+ 'https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community';
+const COMMENT_AVATAR =
+ 'https://media.daily.dev/image/upload/s--IbwvoTYq--/f_auto/v1772778404/avatars/avatar_giQfoBCN9hYxcvRVo3s95';
+
+// Profile share = the real DevCard "wide" image (ProfileLayout sets og:image to
+// /devcards/v2/{userId}.png?type=wide — a generated DevCard, NOT the generic).
+const PROFILE_OG =
+ 'https://api.daily.dev/devcards/v2/28849d86070e4c099c877ab6837c61f0.png?type=wide';
+// Real assets for the recommended profile: the user's avatar, their rank-based
+// DevCard cover (the bg changes with reputation rank), and real source logos.
+const PROFILE_AVATAR =
+ 'https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0';
+const PROFILE_RANK_COVER =
+ 'https://media.daily.dev/image/upload/s--xDkKz00z--/f_auto/v1707920136/covers/cover_28849d86070e4c099c877ab6837c61f0';
+// The user's real "reads the most" sources, straight from their DevCard.
+const PROFILE_SOURCES = [
+ 'https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections',
+ 'https://media.daily.dev/image/upload/s--stRJbTCn--/f_auto/v1752953684/squads/ad08ba59-6646-487f-a8bd-2147d9e572a6',
+ 'https://media.daily.dev/image/upload/s--V91DY4ls--/f_auto,q_auto/v1772617267/logos/agents_digest',
+ 'https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn',
+];
+// Real WebDev squad share image (its own image is what production serves).
+const WEBDEV_OG =
+ 'https://media.daily.dev/image/upload/s--3B1fh4kU--/f_auto,q_auto/v1/squads/94fc7a56-e6d2-403f-acd6-b988b426574f';
+// Real freeCodeCamp source logo.
+const FREECODECAMP_LOGO =
+ 'https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp';
+
+export interface UseCase {
+ id: string;
+ /** Human label for the share type. */
+ name: string;
+ /** What object is being shared and from where. */
+ what: string;
+ /** ReferralCampaignKey / route that produces it. */
+ source: string;
+ /** Problems with the current treatment. */
+ issues: string[];
+ /** What we should change. */
+ recommendations: string[];
+ current: OgData;
+ recommended: OgData;
+}
+
+export const USE_CASES: UseCase[] = [
+ {
+ id: 'article',
+ name: 'Article / Post',
+ what: 'A developer shares an aggregated article from the feed or post page.',
+ source: '/posts/[slug] · ReferralCampaignKey.SharePost',
+ issues: [
+ 'og:title always gets a " | daily.dev" suffix appended, eating ~12 chars of the headline and pushing it over the 60-char sweet spot.',
+ 'og:description falls back to a truncated, often HTML-stripped excerpt with no consistent value framing.',
+ 'The generated image leads with the publisher’s cover; daily.dev branding is small and easy to miss.',
+ 'No og:image:alt / twitter:image:alt is set.',
+ ],
+ recommendations: [
+ 'Drop the title suffix for shareable content — site_name already conveys the brand. Reserve the suffix for navigational pages.',
+ 'Lead the image with the headline + author + reading time over a consistent branded frame; treat the cover as a supporting thumbnail.',
+ 'Always emit og:image:alt mirroring the post title.',
+ 'Add twitter:label/data (Author, Reading time) for richer Slack/X-adjacent unfurls.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/posts/how-to-use-traces-to-avoid-breaking-changes',
+ title: 'How to use traces to avoid breaking changes | daily.dev',
+ description:
+ 'How distributed traces help you catch breaking changes before they ship…',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: POST_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/posts/how-to-use-traces-to-avoid-breaking-changes',
+ title: 'How to use traces to avoid breaking changes',
+ description:
+ 'How distributed traces help you catch breaking changes before they ship — a practical walkthrough.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'How to use traces to avoid breaking changes',
+ imageNode: (
+
+ ),
+ squareNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'shared-post',
+ name: 'Shared post (with attribution)',
+ what: 'A user shares a post via their personal share link, attributing the share to them.',
+ source:
+ '/posts/[id]/share?userid=… · og.daily.dev/api/posts/{id}?userid={uid}',
+ issues: [
+ 'Attribution ("X shared") is small and inconsistent vs. the standard post image.',
+ 'Same title-suffix and description issues as a normal post.',
+ 'The sharer’s avatar/identity is not reliably surfaced, weakening the social proof that drives the click.',
+ ],
+ recommendations: [
+ 'Make the sharer a first-class element: avatar + "shared by {name}" pill at the top of the image.',
+ 'Keep the rest of the article template identical so the share feels like a native daily.dev object.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/posts/.../share?userid=u_123',
+ title: 'How to use traces to avoid breaking changes | daily.dev',
+ description:
+ 'How distributed traces help you catch breaking changes before they ship…',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: SHARED_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/posts/.../share?userid=u_123',
+ title: 'How to use traces to avoid breaking changes',
+ description:
+ 'Ido shared this on daily.dev — how traces catch breaking changes before they ship.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'Ido shared: How to use traces to avoid breaking changes',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'profile',
+ name: 'Developer profile',
+ what: 'Sharing a user profile / DevCard.',
+ source:
+ '/[username] · DevCard v2 wide image · ReferralCampaignKey.ShareProfile',
+ issues: [
+ 'The profile shares the DevCard image (/devcards/v2/{id}.png?type=wide) — a different visual language from post shares, and not 1.91:1, so it gets letterboxed/cropped in unfurls.',
+ 'Bio (og:description) is often empty; falls back to the generic site description.',
+ 'Title carries the " | daily.dev" suffix.',
+ ],
+ recommendations: [
+ 'Use the same template family as posts, in "developer" mode: avatar, name, @handle, headline stat (streak, reputation).',
+ 'Default description to a generated one-liner ("{name} reads about React, Rust & AI on daily.dev") when bio is empty.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/idoshamun',
+ title: 'Ido Shamun (@idoshamun) | daily.dev',
+ description:
+ 'daily.dev is the easiest way to stay updated on the latest programming news…',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: PROFILE_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/idoshamun',
+ title: 'Ido Shamun (@idoshamun)',
+ description:
+ 'Ido reads about AI, LLMs & web dev on daily.dev — 20.5k posts read, 1,087-day longest streak.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'Ido Shamun on daily.dev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'squad',
+ name: 'Squad',
+ what: 'Sharing a Squad’s public page.',
+ source:
+ '/squads/[handle] · getSquadOpenGraph() · ReferralCampaignKey.ShareSource',
+ issues: [
+ 'Uses the squad’s own uploaded banner, whose dimensions/quality vary wildly and may not be 1.91:1.',
+ 'Falls back to the generic brand image when no banner is set — zero context.',
+ 'No member count / activity signal in the preview to drive joins.',
+ ],
+ recommendations: [
+ 'Render a generated, on-brand squad card: squad name + avatar + member count + "active today" signal, with the banner as a backdrop.',
+ 'Never fall back to the bare generic image — always generate a contextual squad card.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/squads/webdev',
+ title: 'WebDev | daily.dev',
+ description:
+ 'The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: WEBDEV_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/squads/webdev',
+ title: 'WebDev — a Squad on daily.dev',
+ description:
+ 'The official daily.dev web development community, led by thought leaders and webdev experts.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'WebDev squad on daily.dev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'squad-invite',
+ name: 'Squad invite link',
+ what: 'A member invites someone to a private/public Squad.',
+ source: '/squads/[handle]/[token]',
+ issues: [
+ 'Title is good ("{inviter} invited you to {squad}") but the image is just the squad banner — the invite framing lives only in text the platform may truncate.',
+ 'No inviter identity in the image; the personal, social hook is lost.',
+ ],
+ recommendations: [
+ 'Bake the invite framing into the image: inviter avatar + "invited you to join {squad}" + member count + CTA chip.',
+ 'Keep the strong title but ensure the image stands on its own when the title is clipped.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/squads/webdev/abc123token',
+ title: 'Ido invited you to WebDev',
+ description:
+ 'The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: WEBDEV_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/squads/webdev/abc123token',
+ title: 'Ido invited you to join WebDev on daily.dev',
+ description:
+ 'Join the official daily.dev web development community. It’s free.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'Ido invited you to join WebDev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'source',
+ name: 'Source / Publication',
+ what: 'Sharing a publication/source page.',
+ source: '/sources/[source]',
+ issues: [
+ 'Uses the bare generic brand image (defaultOpenGraph) — no indication of which source it is.',
+ 'Title + suffix only; description is the source description if present.',
+ ],
+ recommendations: [
+ 'Generate a source card with the source logo, name and "Followed by N developers on daily.dev".',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/sources/freecodecamp',
+ title: 'freeCodeCamp | daily.dev',
+ description: 'The latest from freeCodeCamp on daily.dev.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: DEFAULT_OG_IMAGE,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/sources/freecodecamp',
+ title: 'freeCodeCamp on daily.dev',
+ description:
+ 'Followed by developers across daily.dev. Get every new post in your feed.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'freeCodeCamp on daily.dev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'tag',
+ name: 'Tag / Topic feed',
+ what: 'Sharing a tag feed (e.g. /tags/react).',
+ source: 'ReferralCampaignKey.ShareTag',
+ issues: ['Generic brand image; the topic name appears only in text.'],
+ recommendations: [
+ 'Generate a topic card: "#react" + a one-line topic description + a few sample source logos.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/tags/react',
+ title: 'react | daily.dev',
+ description:
+ 'Explore the React JavaScript library for building user interfaces.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: DEFAULT_OG_IMAGE,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/tags/react',
+ title: '#react on daily.dev',
+ description:
+ 'Explore the React JavaScript library for building user interfaces.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'The #react topic on daily.dev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'comment',
+ name: 'Comment / Discussion',
+ what: 'Sharing a specific comment on a post.',
+ source: 'ReferralCampaignKey.ShareComment',
+ issues: [
+ 'Reuses the post image; the comment that the user actually wanted to highlight is invisible in the preview.',
+ ],
+ recommendations: [
+ 'Generate a discussion card: comment excerpt as the hero, commenter avatar/name, post title as context.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/posts/qojM1enSN#c_456',
+ title: 'How to use traces to avoid breaking changes | daily.dev',
+ description:
+ 'Reuses the post image — the highlighted comment is invisible in the preview.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: POST_OG,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/posts/qojM1enSN#c_456',
+ title: '“Great article! Thanks for sharing 🙌” — sirajju on daily.dev',
+ description:
+ 'sirajju commented on “How to use traces to avoid breaking changes”. Join the discussion.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'Comment by sirajju on a daily.dev discussion',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'invite',
+ name: 'Invite friends / Referral',
+ what: 'Personal referral link (the generic /?cid root link from Invite friends).',
+ source: '/?cid=… · ReferralCampaignKey.Generic',
+ issues: [
+ 'The root referral link (app.daily.dev/?cid=…&userid=…) falls back to the generic brand image — no referrer, no incentive, no personalization.',
+ 'Highest-intent growth surface, weakest preview. (A separate og.daily.dev/api/refs card exists for /join links, but it’s off the unified template and currently returns empty for many users.)',
+ ],
+ recommendations: [
+ 'Generate a referral card with the referrer’s avatar + "{name} invited you to daily.dev" + a clear CTA, on the unified template.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/?cid=generic&userid=u_123',
+ title: 'daily.dev | Where developers grow together',
+ description:
+ 'daily.dev is the easiest way to stay updated on the latest programming news…',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: DEFAULT_OG_IMAGE,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/?cid=generic&userid=u_123',
+ title: 'Ido invited you to daily.dev',
+ description:
+ 'The professional network where developers grow together. Free forever.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'Ido invited you to daily.dev',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'plus',
+ name: 'Plus subscription',
+ what: 'Sharing / gifting daily.dev Plus.',
+ source: '/plus',
+ issues: [
+ 'Generic brand image; nothing communicates the Plus value or the gift.',
+ ],
+ recommendations: [
+ 'Generate a Plus card with the Plus mark, headline benefit and gift framing when applicable.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/plus',
+ title: 'Unlock Premium Developer Features with Plus | daily.dev',
+ description:
+ 'daily.dev is the easiest way to stay updated on the latest programming news…',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: DEFAULT_OG_IMAGE,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/plus',
+ title: 'daily.dev Plus — your feed, supercharged',
+ description:
+ 'AI summaries, advanced filters, and an ad-free feed. Try Plus free for 14 days.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'daily.dev Plus',
+ imageNode: (
+
+ ),
+ },
+ },
+ {
+ id: 'home',
+ name: 'Homepage / default',
+ what: 'The root URL and any page without a specific override.',
+ source: 'next-seo.ts defaultOpenGraph',
+ issues: [
+ 'Single static image; fine as a true fallback but currently does double duty for many specific share types it should not.',
+ ],
+ recommendations: [
+ 'Keep as the genuine last-resort fallback only. Every specific surface above should override it.',
+ ],
+ current: {
+ domain: 'app.daily.dev',
+ path: '/',
+ title: 'daily.dev | Where developers grow together',
+ description:
+ 'daily.dev is the easiest way to stay updated on the latest programming news. Get the best content from the top tech publications on any topic you want.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ image: DEFAULT_OG_IMAGE,
+ },
+ recommended: {
+ domain: 'app.daily.dev',
+ path: '/',
+ title: 'daily.dev | Where developers grow together',
+ description:
+ 'The professional network for developers. One feed for the best engineering content, every day.',
+ cardType: 'summary_large_image',
+ siteName: 'daily.dev',
+ twitterSite: '@dailydotdev',
+ imageAlt: 'daily.dev — where developers grow together',
+ image: LANDING_OG,
+ },
+ },
+];
diff --git a/packages/webapp/components/image-generator/ShareCard.tsx b/packages/webapp/components/image-generator/ShareCard.tsx
new file mode 100644
index 00000000000..0f9173fa5e7
--- /dev/null
+++ b/packages/webapp/components/image-generator/ShareCard.tsx
@@ -0,0 +1,719 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import LogoIcon from '@dailydotdev/shared/src/svg/LogoIcon';
+import LogoText from '@dailydotdev/shared/src/svg/LogoText';
+import { UpvoteIcon } from '@dailydotdev/shared/src/components/icons/Upvote';
+import { DiscussIcon } from '@dailydotdev/shared/src/components/icons/Discuss';
+import { SquadIcon } from '@dailydotdev/shared/src/components/icons/Squad';
+import { DocsIcon } from '@dailydotdev/shared/src/components/icons/Docs';
+import { UserIcon } from '@dailydotdev/shared/src/components/icons/User';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import {
+ cloudinaryCharmEmptySquads,
+ cloudinaryCharmNotEnoughTags,
+} from '@dailydotdev/shared/src/lib/image';
+
+// Compact count: 1234 -> "1.2K", 1200000 -> "1.2M".
+const fmt = (n?: number): string => {
+ if (!n) {
+ return '0';
+ }
+ if (n < 1000) {
+ return `${n}`;
+ }
+ if (n < 1_000_000) {
+ return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0).replace(/\.0$/, '')}K`;
+ }
+ return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+};
+
+/**
+ * "Layout A" share-card design system, rendered as real DOM (screenshotted at
+ * 1200×630 by the daily-api `/og` route via the scraper). Because this renders
+ * in a real browser — not Satori — `line-clamp`, `backdrop-blur`, the real
+ * fonts and the daily.dev design tokens all work natively; no truncation or
+ * font-metric workarounds needed.
+ *
+ * The page wraps the chosen card in `#screenshot_wrapper` sized to exactly
+ * 1200×630; each card fills that frame.
+ */
+
+export interface Identity {
+ name: string;
+ image?: string;
+ meta?: string; // trailing context, e.g. "6m read"
+ label?: string; // verb after the name, e.g. "invited you" / "shared"
+ // Show an avatar slot: an image, or an initial fallback when `fallback` is
+ // set. Label-only eyebrows ("Squad", "daily.dev", "Topic") set neither, so
+ // no avatar/logo renders before the text.
+ fallback?: boolean;
+}
+
+const Wordmark = (): ReactElement => (
+
+
+
+
+);
+
+const Backdrop = ({ cover }: { cover?: string }): ReactElement => (
+
+ {cover ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ );
+ }
+ // Person with no avatar: the initial on the brand gradient. Label-only
+ // eyebrows (Squad / daily.dev / Topic) opt out entirely.
+ if (identity.fallback) {
+ return (
+
+ {identity.name?.charAt(0)?.toUpperCase() || ''}
+
+ );
+ }
+ return null;
+};
+
+const IdentityRow = ({ identity }: { identity: Identity }): ReactElement => {
+ // Compact eyebrow matching the storybook REyebrow (~44px avatar, 28px text).
+ const avatarShape =
+ 'h-11 w-11 shrink-0 rounded-full border border-[rgba(255,255,255,0.2)]';
+ return (
+
+
+
+ {identity.name}
+ {!!identity.label && {identity.label}}
+ {!!identity.meta && · {identity.meta}}
+
+
+ );
+};
+
+const Title = ({
+ children,
+ className = 'text-[60px]',
+ lines = 'line-clamp-3',
+}: {
+ children: ReactNode;
+ className?: string;
+ lines?: string;
+}): ReactElement => (
+
+ {children}
+
+);
+
+const Subtitle = ({ children }: { children: ReactNode }): ReactElement => (
+
+ {children}
+
+);
+
+const GlassBar = ({ children }: { children: ReactNode }): ReactElement => (
+
+ {children}
+
+);
+
+const EngagementBar = ({
+ upvotes,
+ comments,
+}: {
+ upvotes: number;
+ comments: number;
+}): ReactElement => (
+
+
+
+ {upvotes}
+
+
+
+
+ {comments}
+
+
+);
+
+const MetaPill = ({ text }: { text: string }): ReactElement => (
+
+ {text}
+
+);
+
+interface Stat {
+ id: string;
+ icon: ReactNode;
+ value: string;
+}
+
+// Glass bar of icon+number stats (squad members / posts / upvotes).
+const StatBar = ({ stats }: { stats: Stat[] }): ReactElement => (
+
+
+ {stats.map((s, i) => (
+
+ {i > 0 && (
+
+ )}
+
+ {s.icon}
+ {s.value}
+
+
+ ))}
+
+
+);
+
+// Community proof — a pile of member avatars + the count (squads / sources).
+const CommunityBar = ({
+ faces,
+ count,
+}: {
+ faces: string[];
+ count: string;
+}): ReactElement => (
+
+
+
+ {faces.map((src, i) => (
+ 
0 ? '-ml-3' : ''
+ }`}
+ />
+ ))}
+
+
+ {count}
+
+
+
+);
+
+// Prominent member count for invite cards: a user icon + the number in the
+// brand cabbage colour + a word ("developers"), e.g. "26,606 developers".
+const ProminentCount = ({
+ count,
+ word,
+}: {
+ count: string;
+ word?: string;
+}): ReactElement => (
+
+
+
+
+ {count}
+
+ {word ? ` ${word}` : ''}
+
+
+);
+
+const PrimaryButton = ({ children }: { children: ReactNode }): ReactElement => (
+
+ {children}
+
+);
+
+const Tile = ({ children }: { children: ReactNode }): ReactElement => (
+
+ {children}
+
+);
+
+const ImageArt = ({
+ src,
+ circle,
+}: {
+ src: string;
+ circle?: boolean;
+}): ReactElement => (
+
+);
+
+// Charm mascot (the dog) anchored into the bottom-right corner — overflows the
+// art slot a touch; the frame's overflow-hidden clips it at the canvas edge.
+const Mascot = ({ src }: { src: string }): ReactElement => (
+
+);
+
+interface OgFrameProps {
+ backdrop?: string;
+ identity: Identity;
+ children: ReactNode; // content column (title + subtitle, or richer)
+ meta?: ReactNode; // bottom-left slot
+ art?: ReactNode; // bottom-right slot
+}
+
+const OgFrame = ({
+ backdrop,
+ identity,
+ children,
+ meta,
+ art,
+}: OgFrameProps): ReactElement => (
+
+
+
+ {/* top bar */}
+
+
+
+
+
+ {/* content column, vertically centred between top bar and meta/bottom */}
+
+ {children}
+
+
+ {/* meta slot */}
+ {!!meta &&
{meta}
}
+
+ {/* art slot */}
+ {!!art && (
+
+ {art}
+
+ )}
+
+
+ {data.name}
+
+ {!!data.bio &&
{data.bio}}
+ {stats.length > 0 && (
+
+ )}
+ {!!data.sources?.length && (
+
+
+
+ )}
+ {!!data.tags?.length && (
+
+ )}
+
+ {card}
+
+ );
+};
+
+export function getStaticPaths(): GetStaticPathsResult {
+ return { paths: [], fallback: 'blocking' };
+}
+
+export function getStaticProps({
+ params,
+}: GetStaticPropsContext): GetStaticPropsResult {
+ const type = params?.type as string;
+ const id = params?.id as string;
+ if (!type || !id) {
+ return { notFound: true, revalidate: false };
+ }
+ return { props: { type, id }, revalidate: 60 };
+}
+
+export default ShareImagePage;
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index c326b8b2e2f..8cdf371d9b9 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -51,6 +51,7 @@ import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditio
import { isPostRedesignEligible } from '@dailydotdev/shared/src/hooks/post/usePostRedesign';
import { featurePostRedesign } from '@dailydotdev/shared/src/lib/featureManagement';
import { PostFocusCard } from '@dailydotdev/shared/src/components/post/focus/PostFocusCard';
+import { getShareImageUrl } from '../../../next-seo';
import { getPageSeoTitles } from '../../../components/layouts/utils';
import { getLayout } from '../../../components/layouts/MainLayout';
import FooterNavBarLayout from '../../../components/layouts/FooterNavBarLayout';
@@ -362,7 +363,7 @@ export async function getStaticProps({
...pageSeoTitles.openGraph,
images: [
{
- url: `https://og.daily.dev/api/posts/${post?.id}`,
+ url: getShareImageUrl('posts', post?.id ?? ''),
width: 1200,
height: 630,
alt: post?.title || 'Post cover image',
diff --git a/packages/webapp/pages/sources/[source].tsx b/packages/webapp/pages/sources/[source].tsx
index 74a0f3958cb..36917bfea32 100644
--- a/packages/webapp/pages/sources/[source].tsx
+++ b/packages/webapp/pages/sources/[source].tsx
@@ -69,7 +69,7 @@ import { PageHeader } from '@dailydotdev/shared/src/components/layout/PageHeader
import { useLayoutVariant } from '@dailydotdev/shared/src/hooks/layout/useLayoutVariant';
import { ArchiveScopeType } from '@dailydotdev/shared/src/graphql/archive';
import Custom404 from '../404';
-import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+import { defaultOpenGraph, defaultSeo, getShareImageUrl } from '../../next-seo';
import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage';
import { getLayout } from '../../components/layouts/FeedLayout';
import { getPageSeoTitles } from '../../components/layouts/utils';
@@ -463,6 +463,13 @@ export async function getStaticProps({
openGraph: {
...defaultOpenGraph,
...seoTitles.openGraph,
+ images: [
+ {
+ url: getShareImageUrl('sources', source.id ?? ''),
+ width: 1200,
+ height: 630,
+ },
+ ],
},
description: source?.description || defaultSeo.description,
};
diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx
index 3ce293f80f0..df40ddd6c39 100644
--- a/packages/webapp/pages/tags/[tag].tsx
+++ b/packages/webapp/pages/tags/[tag].tsx
@@ -24,7 +24,7 @@ import { getPageSeoTitles } from '../../components/layouts/utils';
import { getLayout } from '../../components/layouts/FeedLayout';
import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage';
import type { DynamicSeoProps } from '../../components/common';
-import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+import { defaultOpenGraph, defaultSeo, getShareImageUrl } from '../../next-seo';
import { getAppOrigin } from '../../lib/seo';
const appOrigin = getAppOrigin();
@@ -144,6 +144,7 @@ interface TagPageParams extends ParsedUrlQuery {
const getSeoData = (
title: string,
description = `Find all the recent posts, videos, updates and discussions about ${title}`,
+ tagSlug = title,
): NextSeoProps => {
const seoTitles = getPageSeoTitles(`${title} posts`);
@@ -153,6 +154,13 @@ const getSeoData = (
openGraph: {
...defaultOpenGraph,
...seoTitles.openGraph,
+ images: [
+ {
+ url: getShareImageUrl('tags', tagSlug),
+ width: 1200,
+ height: 630,
+ },
+ ],
},
description,
};
@@ -227,6 +235,7 @@ export async function getStaticProps({
const seo = getSeoData(
initialData.flags?.title || tag,
initialData.flags?.description,
+ tag,
);
return {
+ : }
+
+
+ {/* Top bar: identity (left) + the real daily.dev logo (right) */}
+