feat(www2): restore wide OG cards, add square ones for feeds - #31
Merged
Conversation
The cards were rebuilt around a centre square so feed readers could crop them without beheading the title. It worked, but it cost the wide preview: laying everything inside the middle 630px leaves the outer thirds as bare background, and a chat preview reads as an almost empty image with a caption floating in it. Restore the edge-to-edge layout — masthead with icon and domain, large title, description, tags along the foot — and give feeds a second render of the same card on a genuinely square canvas instead. Nothing is cropped in either place, and neither consumer pays for the other. On the square the copy and tags are grouped rather than spread: there is 570px more height, and spacing three bands across it strands the title alone in the middle. Keeps the fixes the square version brought with it — nowrap tags that stay one line, flex columns so the renderer measures text properly, the sentence-aware clamp, and the shared description budget. Feeds now point at the square card, and the CV card gains the full stop every other card already ended on — added where the copy is used as a description, since the same string is the navbar tagline.
The cards were rebuilt around a centre square so feed readers could crop them without beheading the title. It worked, but the wide preview paid for it: laying everything inside the middle 630px leaves the outer thirds as bare background, and a chat preview reads as an almost empty image with a caption floating in it. Restore the edge-to-edge layout — masthead with icon and domain, large title, description, tags along the foot — and give feeds a second render of the same card on a genuinely square canvas instead. Nothing is cropped in either place, and neither consumer pays for the other. Anchor the masthead and tags to the corners and let the copy claim what is left, centring in it. `space-between` alone distributes children, so a card with no tags had only two of them and the copy fell to the floor — which is what every standing page was doing, on both shapes. Keeps what the square version brought with it: nowrap tags that stay one line, flex columns so the renderer measures text properly, the sentence-aware clamp and the shared description budget. Feeds now point at the square card, and the CV card gains the full stop every other card already ended on — added where the copy is used as a description, since the same string is the navbar tagline and the CV page subtitle.
Appending a period unconditionally would double up the moment a translation ended on punctuation of its own; only add one when the copy does not already close itself. Clip the card to its canvas too. Every card clears the edges by 70px today, but a long title over a long description over two rows of tags out-measures the wide frame, and clipping beats spilling.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughAdds square OG image rendering with dedicated dimensions, layout handling, and route helpers. New localized Astro routes generate square PNGs for pages and projects. Feed entries now reference square image URLs, render square image dimensions, and normalize punctuation in CV descriptions. Sequence Diagram(s)sequenceDiagram
participant Feed as Feed utilities
participant Route as Square OG route
participant Card as Localized card data
participant Renderer as renderOgImage
Feed->>Route: reference square image URL
Route->>Card: load page or project card data
Route->>Renderer: render card with square size
Renderer-->>Route: return PNG bytes
Route-->>Feed: serve image/png response
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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.
Why
The cards were rebuilt around a centre square so feed readers could crop them without beheading the title — Reeder keeps the middle 630px and drops the rest, which once turned
countries-listinto "tries-list" and cut the icon and domain entirely.That worked, but the wide preview paid for it. Laying everything inside the middle 630px leaves the outer thirds as bare background, so a chat preview reads as an almost empty image with a caption floating in the middle.
What
Restore the edge-to-edge layout for
og:image— masthead with icon and domain, large title, description, tags along the foot — and give feeds a second render of the same card on a genuinely square 1200×1200 canvas. Nothing is cropped in either place, and neither consumer pays for the other.og:imageon every pageimageCorners are anchored identically at both shapes; the square simply has more air between them.
A bug this surfaced
justify-content: space-betweendistributes children, so a card with no tags had only two of them and the copy fell to the floor. Every standing page — cv, contact, open-source, projects — was rendering that way, on both shapes.Fixed by anchoring the masthead and tags to the corners and letting the copy claim what is left, centring in it. One rule now covers all four cases:
Carried over from the square-safe version
Those changes were not all layout — the useful parts stay:
white-space:nowrap+flex-shrink:0on tags, so hyphenated ones likereact-querystay one line at fixed heightdisplay:flex;flex-direction:columnon title and description — the renderer measures nested columns short without itOG_DESCRIPTION_LIMIT, still asserted byog-cards.test.tsflex-wrapon the tag row, which the original layout lackedAlso
getPageCopyrather than indescriptionShort, since that same string is the navbar tagline and the CV page subtitle — and only when the copy does not already close itself.overflow:hiddenon the card. Every one of the 52 clears its edges by 70px today, but a long title over a long description over two rows of tags out-measures the wide frame.Verified
All 52 generated cards measured programmatically: no ink touches any edge, tightest margin 70px. Lint, types, 37 tests and the build are green. Reviewed locally with CodeRabbit CLI; both findings addressed above.