feat: add a social card and link preview metadata - #11
Merged
Merged
Conversation
The README banner is 1600x400. Link previews are 2:1 and crop toward the centre, so reusing it would have letterboxed or cut the wordmark in every client that matters. social.html is a separate composition at 1280x640, which is both the Open Graph size and the size GitHub wants for a repository social preview. Larger type, simpler layout, and the install command included, because the card is often the only thing anyone reads. The concept illustration sits right of centre so a centre crop never takes the wordmark with it. index.html now carries Open Graph and Twitter card metadata with an absolute image URL, since scrapers ignore relative paths, plus the dimensions so clients reserve space instead of reflowing, a canonical link, and theme-color for both schemes.
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.
The banner and a social card are different images with different requirements, and the existing banner is wrong for the job.
At 4:1 the banner gets letterboxed or badly cropped in every preview client, and a centre crop cuts the wordmark.
What is here
site/assets/social.html, a separate composition rendered at 1280x640, which satisfies both Open Graph and GitHub. Bigger type, simpler layout, and the install command on the card, because a link preview is often the only thing anyone reads. The illustration sits right of centre so a centre crop never takes the wordmark with it.Link preview metadata in
index.html: Open Graph and Twitter card tags with an absolute image URL, since scrapers ignore relative paths; explicit dimensions so clients reserve space instead of reflowing; a canonical link; andtheme-colorfor both schemes.Verified the URL resolves against what Pages actually serves: the workflow publishes
site/as the root, sosite/assets/social-card.pngbecomes/assets/social-card.png.One thing I could not do
GitHub's repository social preview is UI-only. I checked rather than assumed: the repo object exposes no such field, and a
PATCHwith one is silently ignored. It has to be uploaded by hand atusing
site/assets/social-card.pngfrom this branch.Also
Repo description and homepage updated. The description still said "Claude Code skills ... browsers, downloads, notes", which is wrong twice over now: it works with any agent, and photos exist.