feat(docs): brand the generated OG cards to match the landing - #779
Merged
Conversation
Blume auto-generates a per-page Open Graph card for every doc and changelog page on Vercel, but they shipped in Blume's light default while the landing card is dark — an inconsistent share-image family. Point `seo.og` at the landing's dark instrument palette and a `currentColor` logo variant so every generated card matches: - public/logo-og.svg is logo-horizontal with attribute-level currentColor strokes (Blume's card renderer paints currentColor in the foreground; the source logo only mapped it inside a <style> block, which the SVG rasteriser doesn't apply — so the mark would have stayed dark on dark). - seo.og.palette sets the dark background, light foreground/muted, and the violet accent. The landing keeps its bespoke card (the ogImage override still wins); the ~110 generated cards now render dark to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
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
1 participant
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 & why
Blume auto-generates a per-page Open Graph card for every doc and changelog page on the Vercel build (~110 cards, at
/og/<route>.png). They were shipping in Blume's light default while the landing page's custom card is dark — an inconsistent share-image family.This aligns them: the generated cards now use the landing's dark instrument palette.
Changes
public/logo-og.svg—logo-horizontalwith attribute-levelcurrentColorstrokes. Blume's card renderer paintscurrentColorin theforeground, but the source logo only mapped it inside a<style>block, which the SVG rasteriser doesn't apply — so the mark would have stayed dark-on-dark. This variant paints correctly light on the dark card.seo.oginblume.config.ts— darkpalette(background #0b0b12,foreground #f5f3ff,muted #a6a3be, violetaccent) + the logo above.The landing keeps its bespoke card — the
ogImage="/og-home.png"override still wins; only the generated cards change.Before / after (generated
/overviewcard)Before: light background, dark title. After: dark background, light title + logo, matching the landing.
Verification
Built with the Vercel site env (
VERCEL_PROJECT_PRODUCTION_URL) to trigger generation:/overviewand/api/core-apiscards render dark with the light logo, page title, and muted description. ✅blume buildsucceeds (112 pages).Note: OG cards only render on the production Vercel build (Blume detects the site from the platform env), so validate against the live URL after merge.
🤖 Generated with Claude Code