Draw the social card instead of screenshotting the page - #170
Merged
Conversation
`site-preview.png` was a 1941x1180 shot of the whole homepage, so every scraper's 1.91:1 crop took the bottom third off it: a half-cut "Language learning is a rewarding journey!" and a beheaded phone. It also still carried the languageXchange wordmark, two redesigns ago. The replacement is the hero rebuilt for 1200x630 out of the same material — white ground, Nunito 800 heading, the chat replica at the app's own sizes, the one yellow on the send slab — with a hairline round the edge so the card does not dissolve into a white feed. `scripts/og/` keeps the template and a render script, so the next cut is a command rather than another screenshot. `meta.ts` now declares the size and an alt line; with the aspect ratio changed, saying 1200x630 up front is what stops X and Slack guessing at the crop before the download finishes. The README's Versioning section pointed at the same file, which is how it drifted: one image was serving as both the social card and the v0.2 record. The old shot moves to `static/versioning/v0.2.png`, next to v0.1, and the README follows it there. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
static/images/site-preview.pngwas a 1941x1180 shot of the whole homepage, so every scraper's 1.91:1 crop took the bottom third off it — a half-cut "Language learning is a rewarding journey!" and a beheaded phone — and it still carried the languageXchange wordmark, two redesigns ago.The replacement is the hero rebuilt for 1200x630 out of the same material: white ground, Nunito 800 heading, the chat replica at the app's own sizes, the one yellow on the send slab, and a hairline round the edge so the card does not dissolve into a white feed.
What's in here
static/images/site-preview.png— the new card, 1200x630.scripts/og/site-preview.html+render.mjs— the template andnode scripts/og/render.mjsto re-cut it. Headless Chrome is the whole toolchain, no image library to keep installed; it rasterises at 1:1, which reads sharper than rendering at 2x and scaling back down.meta.ts/Seo.svelte—og:image:width/heightandog:image:alt(plustwitter:image:alt). With the aspect ratio changed, declaring 1200x630 up front is what stops X and Slack guessing at the crop before the download finishes.README.md— the Versioning section pointed at the same file, which is how it drifted: one image was serving as both the social card and the v0.2 record. The old shot moves tostatic/versioning/v0.2.png, next to v0.1, and the README follows it there.Checks
npm run lintclean;npm run check0 errors (the 3 warnings are the pre-existingtext-wrapones). Head tags verified on/welcome-backagainst the dev server — the page whose card prompted this.🤖 Generated with Claude Code