feat: sponsors improvements

[alexdln]

🔗 Linked issue

Resolves #2962

🧭 Context

• Sponsor splitting into Gold/Silver groups
• Adding a list to the footer of all pages
• Adding sponsors to the readme - for now I've just made it as a picture in Figma. We need to think about whether we want to support this as a route on the site or a third-party service

Screenshors

Readme - https://github.com/alexdln/npmx.dev/tree/feat/sposors-improvements

Footer - https://npmxdev-git-fork-alexdln-feat-sposors-improvements-npmx.vercel.app/

About page - https://npmxdev-git-fork-alexdln-feat-sposors-improvements-npmx.vercel.app/about

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 26, 2026 8:11pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 26, 2026 8:11pm
npmx-lunaria	Ignored		Jun 26, 2026 8:11pm

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• assets/media/sponsors.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1758038d-119e-4acb-aa5e-4656e3323918

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Sponsor data is split into gold and silver tiers, and the About page, footer, and README now render or link to those sponsors with updated locale and schema strings.

Changes

Sponsor tiers across site

Layer / File(s)	Summary
Grouped sponsor data app/assets/logos/sponsors/index.ts	SPONSORS becomes a gold/silver object and imports the CodeRabbit logo assets for the new gold entry.
About sponsor tiers i18n/schema.json, i18n/locales/en.json, app/pages/about.vue	The About sponsors section adds gold and silver labels, sets id="sponsors", and renders separate logo lists for each tier.
Footer sponsor line i18n/schema.json, i18n/locales/en.json, app/components/AppFooter.vue	The footer schema and locale strings add sponsored_by, and AppFooter formats sponsor names from the grouped data into the new footer line and disclaimer area.
README sponsors section README.md	The README adds a Sponsors section with an Open Collective link and sponsor image after the Star History block.

Sequence Diagram(s)

sequenceDiagram
  participant AppFooter as AppFooter.vue
  participant SponsorData as SPONSORS.gold/silver
  participant ListFormat as Intl.ListFormat
  participant Locale as locale
  participant FooterLabel as footer.sponsored_by

  AppFooter->>SponsorData: read sponsor names
  AppFooter->>Locale: read current locale
  AppFooter->>ListFormat: format sponsor names
  AppFooter->>FooterLabel: translate "Sponsored by {list}"
  FooterLabel-->>AppFooter: render sponsor line

Loading

Possibly related PRs

• npmx-dev/npmx.dev#1986: Also changes app/assets/logos/sponsors/index.ts and app/pages/about.vue sponsor rendering/layout, which is directly related to the tiered sponsor display work here.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately reflects the sponsor-focused changes in the PR.
Description check	✅ Passed	The description is clearly related to the sponsor tier, footer, and README updates.
Linked Issues check	✅ Passed	The changes cover the issue's main sponsor tiering, About page, footer, and README requirements.
Out of Scope Changes check	✅ Passed	The PR stays focused on sponsor presentation updates and related localisation/schema changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/AppFooter.vue`:
- Around line 172-177: The sponsors link in AppFooter.vue is using a raw anchor
for an internal route, which causes a full page reload. Replace the `<a>` in the
footer sponsor section with `LinkBase` so navigation stays consistent with the
rest of the footer while preserving the existing `/about#sponsors` destination
and translated label.

In `@README.md`:
- Around line 209-213: The README sponsors section uses a static sponsors.png
image, so update the sponsors embed to be theme-aware. Replace the current image
in the Sponsors block with a <picture> or equivalent prefers-color-scheme setup
that references the existing light/dark sponsor assets under
app/assets/logos/sponsors, so the displayed image matches the user’s theme.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ee8259e6-6d71-4b96-b8f7-84a2e56d09b6

📥 Commits

Reviewing files that changed from the base of the PR and between 25f24dc and 8ee7e87.

⛔ Files ignored due to path filters (3)

• app/assets/logos/sponsors/coderabbit-light.svg is excluded by !**/*.svg
• app/assets/logos/sponsors/coderabbit.svg is excluded by !**/*.svg
• assets/media/sponsors.png is excluded by !**/*.png

📒 Files selected for processing (6)

• README.md
• app/assets/logos/sponsors/index.ts
• app/components/AppFooter.vue
• app/pages/about.vue
• i18n/locales/en.json
• i18n/schema.json

[patak-cat]

Thanks a ton for taking care of this one Alex 🙏

[BittuBarnwal7479]

@alexdln i might be mistaken, but i couldn't find the previous sponsor organizations in the preview. Was that intentional?

[BittuBarnwal7479]

Like

[alexdln]

@BittuBarnwal7479 We don't have any of those :)
All our sponsors are still our active and beloved sponsors 🥰

[BittuBarnwal7479]

@BittuBarnwal7479 We don't have any of those :)
All our sponsors are still our active and beloved sponsors 🥰

Ah, got it! Thanks for the clarification. I assumed there were additional previous sponsors. 😄

[patak-cat]

thanks Alex!