OgCard

Open Graph image template for next/og ImageResponse: category, title, subtitle, site name and an optional logo on a neutral light or dark card, built only from inline styles.

Post@gaudi/design-system/post/OgCard

View in Storybook Source

Installation

pnpm add github:g-udi/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { OgCard } from '@gaudi/design-system/post/OgCard';

Usage

// app/api/og/route.jsimport { ImageResponse } from 'next/og';import { OgCard, ogImageSize } from '@gaudi/design-system/post/OgCard';
export function GET() {  return new ImageResponse(    <OgCard title='Notes on local-first software' subtitle='What syncing taught me.' category='Engineering' siteName='example.com' />,    ogImageSize  );}

Examples

Playground

Storybook

API

7 props

Accessibility

The card becomes an image, so the page's og:image:alt (or the alt of an img that shows it) must repeat the title. Both palettes keep AA contrast for every text role.

ImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.Post listsBlog-post sections using the same Post summaries and article data as the blog pages. Image cards, featured articles, horizontal rows, and compact archives reuse one component.PostHeaderArticle title, metadata, timestamps and supporting header controls.PostNavigationPrevious and next article links at the end of a post.PostSeriesBoxList the articles in a series and identify the current entry.TableOfContentsResponsive article navigation with active sections, expandable heading branches, and an optional diagram and table index. Reuses Scrollspy, Collapsible, Link and the shared expansion hook.