feat: show badge on top liked packages, link to leaderboard

[serhalp]

🔗 Linked issue

N/A 😶

🧭 Context

Social likes are fun. Having users engage with the community, discover packages, and share socially about like ranks is fun.

📚 Description

Show a small rank badge next to the likes counter/button when a package is in the top 10 most-liked packages, and link that badge to a new in-app likes leaderboard page. For now at least, this is the only way to reach the leaderboard page.

npmx.top.liked.poc.demo.mp4

Both are powered by server-side fetching of the likes leaderboard API (https://tangled.org/baileytownsend.dev/npmx-likes-leaderboard), maintained by Bailey (@fatfingers23), who has agreed to treat this as a production service.

API fetches degrade gracefully: on failure, no badge is shown on the package page, and the leaderboard page shows a message indicating that the data is unavailable.

Successful fetches are cached for 1 hour, and are only revalidated in the background, following a stale-while-revalidate-style pattern (this is existing behaviour from server/plugins/fetch-cache).

The leaderboard page is itself cached with ISR, with a revalidation time of 15 minutes.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 20, 2026 2:01am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 20, 2026 2:01am
npmx-lunaria	Ignored		Apr 20, 2026 2:01am

[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.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete. 🔄️

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

❌ Patch coverage is 92.22222% with 14 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/Likes.vue	57.69%	8 Missing and 3 partials ⚠️
app/pages/leaderboard/likes.vue	98.02%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 744dbfcb-dcf1-4c52-b896-bb038e1ed9b9

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch serhalp/feat/likes-leaderboard

---

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 and usage tips.}