Skip to content

feat: redesign OG images with custom fonts and section breadcrumbs#195

Open
achalvs wants to merge 1 commit intomainfrom
feat/og-images
Open

feat: redesign OG images with custom fonts and section breadcrumbs#195
achalvs wants to merge 1 commit intomainfrom
feat/og-images

Conversation

@achalvs
Copy link

@achalvs achalvs commented Mar 20, 2026

Before / After

Dynamic pages

Before (prod)After

Old: dark background, Inter font, Tempo wordmark top-left, left-aligned title + description.
New: light branded template with HB Set Light title, orbital background, section pill breadcrumb, Tempo logo.


What changed

  • Static OG — replaced public/og-docs.png with the new "Documentation" landing design
  • Dynamic OG handler — rewrote api/og.tsx using Takumi (Vocs built-in renderer):
    • HB Set v0.96 Light for titles (105px, -0.04em tracking)
    • Pilat Regular for pill labels (22px, 0.03em tracking)
    • Orbital background pattern + Tempo "T" logo at bottom
    • All assets loaded as arraybuffers at build time (no runtime self-fetch)
  • Pill breadcrumb — left = "DOCS", right = section name (top-level) or section › subsection (nested, section at 60% opacity)
  • Balanced line breaks — titles split at the most balanced word boundary to avoid orphaned words
  • ogImageUrl config — derives section/subsection from the route path; landing pages (/, /learn, /changelog) use the static image

Files

File Change
src/pages/_api/api/og.tsx Rewritten OG handler
src/pages/_api/api/fonts/ HB Set Light + Pilat Regular (OTF)
src/pages/_api/api/og-bg.png Background pattern template
public/og-docs.png New static landing image
vocs.config.ts ogImageUrl with section/subsection routing

@vercel
Copy link

vercel bot commented Mar 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview, Comment Mar 21, 2026 6:37am
tempo-docs Ready Ready Preview, Comment Mar 21, 2026 6:37am

Request Review

@achalvs achalvs changed the title [WIP] feat: redesign OG images with custom fonts and section pills feat: redesign OG images with custom fonts and section breadcrumbs Mar 21, 2026
@achalvs achalvs requested a review from o-az March 21, 2026 06:02
…balanced text

Replace the old dark-background OG template with a new light design
matching the Tempo brand. Uses HB Set Light for titles and Pilat
Regular for pill labels, loaded at build time via Vocs/Takumi.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant