From a916a98cda0bcf2d444e862dea907232bc57987d Mon Sep 17 00:00:00 2001 From: Torben Haack Date: Sat, 11 Apr 2026 21:46:18 +0200 Subject: [PATCH 1/4] feat: add likes badge type (#2412) --- docs/content/2.guide/6.badges.md | 1 + docs/shared/utils/badges.ts | 1 + server/api/registry/badge/[type]/[...pkg].get.ts | 7 +++++++ 3 files changed, 9 insertions(+) diff --git a/docs/content/2.guide/6.badges.md b/docs/content/2.guide/6.badges.md index ab7cfb4da3..64ad9df4d1 100644 --- a/docs/content/2.guide/6.badges.md +++ b/docs/content/2.guide/6.badges.md @@ -28,6 +28,7 @@ npmx.dev offers many different SVG badges with stats about any package via its A - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} +- **likes**: Shows the total count of package likes on npmx.dev. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} ## Examples diff --git a/docs/shared/utils/badges.ts b/docs/shared/utils/badges.ts index 2b7d425514..338d7923a9 100644 --- a/docs/shared/utils/badges.ts +++ b/docs/shared/utils/badges.ts @@ -16,6 +16,7 @@ export const BADGE_TYPES = Object.freeze([ 'maintainers', 'deprecated', 'name', + 'likes', ] as const) export type BadgeType = (typeof BADGE_TYPES)[number] diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts index aa6b0c4b10..aa6c466cab 100644 --- a/server/api/registry/badge/[type]/[...pkg].get.ts +++ b/server/api/registry/badge/[type]/[...pkg].get.ts @@ -496,6 +496,13 @@ const badgeStrategies = { color: isDeprecated ? COLORS.red : COLORS.green, } }, + + 'likes': async (pkgData: globalThis.Packument) => { + const likesUtil = new PackageLikesUtils() + const { totalLikes } = await likesUtil.getLikes(pkgData.name) + + return { label: 'likes', value: String(totalLikes ?? 10), color: COLORS.blue } + }, } const BadgeTypeSchema = v.picklist(Object.keys(badgeStrategies) as [string, ...string[]]) From 11c42f437cded56dc943f53df934fec7c3b76ab7 Mon Sep 17 00:00:00 2001 From: Torben Haack Date: Sat, 11 Apr 2026 21:53:44 +0200 Subject: [PATCH 2/4] fix: default to zero likes; refine phrasing in docs --- docs/content/2.guide/6.badges.md | 2 +- server/api/registry/badge/[type]/[...pkg].get.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/6.badges.md b/docs/content/2.guide/6.badges.md index 64ad9df4d1..2d0c2e7d36 100644 --- a/docs/content/2.guide/6.badges.md +++ b/docs/content/2.guide/6.badges.md @@ -28,7 +28,7 @@ npmx.dev offers many different SVG badges with stats about any package via its A - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} -- **likes**: Shows the total count of package likes on npmx.dev. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} +- **likes**: Shows the total count of likes of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} ## Examples diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts index aa6c466cab..27d267d2c6 100644 --- a/server/api/registry/badge/[type]/[...pkg].get.ts +++ b/server/api/registry/badge/[type]/[...pkg].get.ts @@ -501,7 +501,7 @@ const badgeStrategies = { const likesUtil = new PackageLikesUtils() const { totalLikes } = await likesUtil.getLikes(pkgData.name) - return { label: 'likes', value: String(totalLikes ?? 10), color: COLORS.blue } + return { label: 'likes', value: String(totalLikes ?? 0), color: COLORS.blue } }, } From 50025b14d0bdd4caadfd6b176ec47a2bbdb1598e Mon Sep 17 00:00:00 2001 From: Torben Haack Date: Sat, 11 Apr 2026 22:00:46 +0200 Subject: [PATCH 3/4] fix: revert phrasing to original for consistency Other entries also use similar phrasing as "Lists the total count of package dependencies.". To maintain consistency, adopt original phrasing. --- docs/content/2.guide/6.badges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/6.badges.md b/docs/content/2.guide/6.badges.md index 2d0c2e7d36..9162314b7d 100644 --- a/docs/content/2.guide/6.badges.md +++ b/docs/content/2.guide/6.badges.md @@ -28,7 +28,7 @@ npmx.dev offers many different SVG badges with stats about any package via its A - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} -- **likes**: Shows the total count of likes of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} +- **likes**: Shows the total count of package likes. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} ## Examples From 617d16711ef66bf4b438a26eaabfa70335457abd Mon Sep 17 00:00:00 2001 From: Torben Haack Date: Sun, 12 Apr 2026 09:16:34 +0200 Subject: [PATCH 4/4] feat: use red as default color --- docs/content/2.guide/6.badges.md | 2 +- server/api/registry/badge/[type]/[...pkg].get.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/6.badges.md b/docs/content/2.guide/6.badges.md index 9162314b7d..a5194a0f4a 100644 --- a/docs/content/2.guide/6.badges.md +++ b/docs/content/2.guide/6.badges.md @@ -28,7 +28,7 @@ npmx.dev offers many different SVG badges with stats about any package via its A - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"} - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"} -- **likes**: Shows the total count of package likes. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} +- **likes**: Shows the total count of package likes. :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"} ## Examples diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts index 27d267d2c6..3ed6d2f079 100644 --- a/server/api/registry/badge/[type]/[...pkg].get.ts +++ b/server/api/registry/badge/[type]/[...pkg].get.ts @@ -501,7 +501,7 @@ const badgeStrategies = { const likesUtil = new PackageLikesUtils() const { totalLikes } = await likesUtil.getLikes(pkgData.name) - return { label: 'likes', value: String(totalLikes ?? 0), color: COLORS.blue } + return { label: 'likes', value: String(totalLikes ?? 0), color: COLORS.red } }, }