Skip to content

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

Draft
serhalp wants to merge 2 commits intomainfrom
serhalp/feat/likes-leaderboard
Draft

feat: show badge on top liked packages, link to leaderboard#2459
serhalp wants to merge 2 commits intomainfrom
serhalp/feat/likes-leaderboard

Conversation

@serhalp
Copy link
Copy Markdown
Member

@serhalp serhalp commented Apr 10, 2026

🔗 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
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Apr 10, 2026 2:36pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Apr 10, 2026 2:36pm
npmx-lunaria Ignored Ignored Apr 10, 2026 2:36pm

Request Review

@serhalp serhalp changed the title feat: add badge to top-10 most-liked packages, leaderboard page feat: show badge on top liked packages, link to leaderboard Apr 10, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

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
Copy link
Copy Markdown

codecov bot commented Apr 10, 2026

Codecov Report

❌ Patch coverage is 81.66667% with 11 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 65.62% 7 Missing and 4 partials ⚠️

📢 Thoughts on this report? Let us know!

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.

Both are powered by server-side fetching of the likes leaderboard API
(https://tangled.org/baileytownsend.dev/npmx-likes-leaderboard), maintained by Bailey.

Fetches degrade gracefully: 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 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant