feat(sponsors): center the sponsor image, ring + link the logos#485
Conversation
…ogos - Center-align the whole card: the "NAPI-RS Sponsors" header/subtitle/divider are removed and the tiers, labels, and logo rows are all centered. Tier labels are flanked by short rules; roomier vertical rhythm. - Add a faint per-theme `ring` token drawn around every avatar so a logo that matches the background (a black circle on dark, a white mark on light) still reads as present instead of vanishing. - Wrap each avatar in an <a> to the sponsor's page. satori strips <a> (it targets static images), so linkAvatars pairs the Nth rendered <image> with the Nth sponsor (order- and count-safe). Sponsors are clickable when the .svg is opened directly; README `![]()` embeds render as flat images as before. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2c23572c6a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| style: { | ||
| display: 'flex', | ||
| color: t.fg, | ||
| fontSize: 30, | ||
| fontWeight: 700, | ||
| }, | ||
| children: 'NAPI-RS Sponsors', | ||
| }, | ||
| }, | ||
| { | ||
| type: 'div', | ||
| props: { | ||
| style: { | ||
| display: 'flex', | ||
| color: t.accent, | ||
| fontSize: 15, | ||
| fontWeight: 500, | ||
| marginTop: 4, | ||
| flexWrap: 'wrap', | ||
| justifyContent: 'center', |
There was a problem hiding this comment.
When a tier has enough sponsors to wrap, this row is now an auto-width flex item inside a column that centers its children, so it can size to the total avatar width instead of the card width; flexWrap then never gets the card constraint and large tiers such as backers overflow or get clipped horizontally. Add an explicit width: '100%' (or another constraint) to the avatar row so wrapping happens within the 800px card.
Useful? React with 👍 / 👎.
1 participant
Follow-up polish on the sponsor image router (#483). Redesigns the card rendered at
napi.rs/sponsors.svg/.png.Changes
NAPI-RS Sponsorsheader /napi.rssubtitle / divider are removed; the tiers, labels, and logo rows are all centered. Tier labels are flanked by short rules (── SPECIAL THANKS ──) with roomier vertical rhythm.ringtoken is drawn around every avatar so a logo matching the background (a black circle on dark, a white wordmark on light) still reads as present instead of vanishing. Fixes the "no special thanks in dark mode" case.<a href="https://github.com/<sponsor>" target="_blank">. satori strips<a>(it targets static images), solinkAvatarspairs the Nth rendered<image>with the Nth sponsor — order- and count-safe (anchors always == images, even when an avatar drops). Sponsors are clickable when the.svgis opened directly; README![]()embeds render as flat images through Camo as before.Verification
tscclean (only the pre-existing hreflang errors).vp buildOK.🤖 Generated with Claude Code