Skip to content

fix(docs-og-image): match reference cover template typography exactly - #5598

Merged
waleedlatif1 merged 3 commits into
stagingfrom
fix/docs-og-image-typography
Jul 11, 2026
Merged

fix(docs-og-image): match reference cover template typography exactly#5598
waleedlatif1 merged 3 commits into
stagingfrom
fix/docs-og-image-typography

Conversation

@waleedlatif1

@waleedlatif1waleedlatif1 commented Jul 11, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Swap Season Sans for Söhne Kräftig (weight 500) — the reference cover's actual brand font, confirmed by direct letterform comparison; recovered from git history since it was removed as an unused static asset
  • Fix ink/background colors to exact reference hex values (#515151 / #c1c1c1)
  • Square caps + miter join on the corner arrow to match the reference's sharp corners
  • Recalibrate title font size, line height, and wrap width for the new font's metrics

Type of Change

  • Bug fix

Testing

Tested manually — rendered the route locally and pixel-compared against the reference cover template (arrow, colors, wordmark, and title all matching within a few px).

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@waleedlatif1
fix(docs-og-image): match reference cover template typography exactly
bd4c432
- swap Season Sans for Söhne Kräftig (500) — the reference cover's actual
brand font, confirmed by letterform comparison; recovered from git
history since it was removed as an unused static asset
- fix ink/background colors to exact reference hex values
- square caps + miter join on the corner arrow to match the reference's
sharp corners instead of rounded ones
- recalibrate title font size, line height, and wrap width for the new
font's metrics
@vercel

vercelBot commented Jul 11, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
docsReadyReadyPreview, CommentJul 11, 2026 6:16pm

Request Review

@cursor

cursorBot commented Jul 11, 2026•
edited
Loading

Copy link
Copy Markdown

PR Summary

Low Risk
Scoped to docs OG image rendering on the edge route; no auth, data, or API contract changes beyond visual output for social previews.

Overview
Aligns docs Open Graph image generation (apps/docs/app/api/og/route.tsx) with the library/blog cover reference instead of the previous Season Sans styling.

Typography and colors: Title font switches to Söhne Kräftig (500) via Soehne-Kraftig.ttf, with recalibrated title sizes, weight, line height, and a translateY tweak for Satori’s last-line leading. Ink and background use traced hex #515151 / #c1c1c1. The corner arrow uses square caps and miter joins for sharp corners.

Title wrapping: Line packing no longer uses a flat Latin character count; it estimates width with separate Latin vs CJK em widths and can split oversized “words” (common for ja/zh titles without spaces) so long runs still fit TITLE_BOX_WIDTH.

Reviewed by Cursor Bugbot for commit 962b943. Configure here.

@greptile-apps

greptile-appsBot commented Jul 11, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR updates the docs OG image to match the reference cover template. The main changes are:

  • Switches the title font from Season Sans to Söhne Kräftig.
  • Updates the OG image colors, title sizing, line height, and arrow stroke style.
  • Adds CJK-aware title width estimates and splits oversized no-space title runs.
  • Replaces the old static font asset with the new Söhne TTF file.

Confidence Score: 5/5

This looks safe to merge.

  • No blocking issues found in the changed code.

Important Files Changed

FilenameOverview
apps/docs/app/api/og/route.tsxUpdates the OG image rendering constants, font loading, arrow styling, and title wrapping behavior.
apps/docs/public/static/fonts/SeasonSans-600-static.ttfRemoves the old Season Sans static font asset.
apps/docs/public/static/fonts/Soehne-Kraftig.ttfAdds the Söhne Kräftig static TTF asset for the OG title renderer.

Reviews (3): Last reviewed commit: "fix(docs-og-image): fall back to charact..." | Re-trigger Greptile

greptile-apps[bot]
greptile-appsBot reviewed Jul 11, 2026
View reviewed changes
Comment threadapps/docs/app/api/og/route.tsx Outdated
@waleedlatif1
fix(docs-og-image): estimate CJK glyph width separately to avoid unde…
73b53cd
…r-wrap
wrapTitleLines budgeted a flat 0.42em/char, tuned for Latin text. Docs
ships ja/zh locales — CJK glyphs render near-square (~1em), so a CJK
title could overflow the fixed-width title box uncaught. Sum per-char
em-width with a CJK-range check instead of counting characters.
@waleedlatif1

waleedlatif1 commented Jul 11, 2026

Copy link
Copy Markdown
CollaboratorAuthor

@greptile

@waleedlatif1

waleedlatif1 commented Jul 11, 2026

Copy link
Copy Markdown
CollaboratorAuthor

@cursor review

cursor[bot]
cursorBot reviewed Jul 11, 2026
View reviewed changes

@cursorcursorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 73b53cd. Configure here.

greptile-apps[bot]
greptile-appsBot reviewed Jul 11, 2026
View reviewed changes
Comment threadapps/docs/app/api/og/route.tsx
@waleedlatif1
fix(docs-og-image): fall back to character-level wrap for oversized C…
962b943
…JK words
wrapTitleLines only splits at spaces, so a space-free CJK run (common
for Chinese titles) still arrived as a single word wider than the
title box and rendered as one overflowing line. Falls back to
character-level chunking for any word that alone exceeds maxWidthEm.
@waleedlatif1

waleedlatif1 commented Jul 11, 2026

Copy link
Copy Markdown
CollaboratorAuthor

@greptile

@waleedlatif1

waleedlatif1 commented Jul 11, 2026

Copy link
Copy Markdown
CollaboratorAuthor

@cursor review

cursor[bot]
cursorBot reviewed Jul 11, 2026
View reviewed changes

@cursorcursorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 962b943. Configure here.

@waleedlatif1
waleedlatif1 merged commit def2d52 into stagingJul 11, 2026
18 checks passed
@waleedlatif1
waleedlatif1 deleted the fix/docs-og-image-typography branch July 11, 2026 18:17
@waleedlatif1waleedlatif1 mentioned this pull request Jul 12, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greptile-appsgreptile-apps[bot]greptile-apps[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@waleedlatif1