diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index 571d813d46..ee37f2350b 100644
--- a/docs/content/2.guide/1.features.md
+++ b/docs/content/2.guide/1.features.md
@@ -158,6 +158,20 @@ Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKA
You can further customize your badges by appending query parameters to the badge URL.
+##### `labelColor`
+
+Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix).
+
+- **Default**: `#0a0a0a`
+- **Usage**: `?labelColor=HEX_CODE`
+
+##### `label`
+
+Overrides the default label text. You can pass any string to customize the label displayed on the badge.
+
+- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
+- **Usage**: `?label=YOUR_LABEL`
+
##### `color`
Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
@@ -165,11 +179,11 @@ Overrides the default strategy color. You can pass a standard hex code (with or
- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
- **Usage**: `?color=HEX_CODE`
-| Example | URL |
-| :------------- | :------------------------------------ |
-| **Hot Pink** | `.../badge/version/nuxt?color=ff69b4` |
-| **Pure Black** | `.../badge/version/nuxt?color=000000` |
-| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
+| Example | URL |
+| :------------- | :------------------------------------- |
+| **Hot Pink** | `.../badge/version/nuxt?colorB=ff69b4` |
+| **Pure Black** | `.../badge/version/nuxt?colorB=000000` |
+| **Brand Blue** | `.../badge/version/nuxt?colorB=3b82f6` |
##### `name`
diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts
index 8f6a56d45c..f41149f30a 100644
--- a/server/api/registry/badge/[type]/[...pkg].get.ts
+++ b/server/api/registry/badge/[type]/[...pkg].get.ts
@@ -14,6 +14,8 @@ const NPMS_API = 'https://api.npms.io/v2/package'
const QUERY_SCHEMA = v.object({
color: v.optional(v.string()),
name: v.optional(v.string()),
+ labelColor: v.optional(v.string()),
+ label: v.optional(v.string()),
})
const COLORS = {
@@ -263,7 +265,9 @@ export default defineCachedEventHandler(
const queryParams = v.safeParse(QUERY_SCHEMA, query)
const userColor = queryParams.success ? queryParams.output.color : undefined
+ const labelColor = queryParams.success ? queryParams.output.labelColor : undefined
const showName = queryParams.success && queryParams.output.name === 'true'
+ const userLabel = queryParams.success ? queryParams.output.label : undefined
const badgeTypeResult = v.safeParse(BadgeTypeSchema, typeParam)
const strategyKey = badgeTypeResult.success ? badgeTypeResult.output : 'version'
@@ -274,12 +278,15 @@ export default defineCachedEventHandler(
const pkgData = await fetchNpmPackage(packageName)
const strategyResult = await strategy(pkgData, requestedVersion)
- const finalLabel = showName ? packageName : strategyResult.label
+ const finalLabel = userLabel ? userLabel : showName ? packageName : strategyResult.label
const finalValue = strategyResult.value
const rawColor = userColor ?? strategyResult.color
const finalColor = rawColor?.startsWith('#') ? rawColor : `#${rawColor}`
+ const rawLabelColor = labelColor ?? '#0a0a0a'
+ const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`
+
const leftWidth = measureTextWidth(finalLabel)
const rightWidth = measureTextWidth(finalValue)
const totalWidth = leftWidth + rightWidth
@@ -291,7 +298,7 @@ export default defineCachedEventHandler(
-
+
diff --git a/test/e2e/badge.spec.ts b/test/e2e/badge.spec.ts
index fd2186b453..ff6f972d4e 100644
--- a/test/e2e/badge.spec.ts
+++ b/test/e2e/badge.spec.ts
@@ -102,6 +102,14 @@ test.describe('badge API', () => {
})
})
+ test('custom labelColor parameter is applied to SVG', async ({ page, baseURL }) => {
+ const customColor = '00ff00'
+ const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?labelColor=${customColor}`)
+ const { body } = await fetchBadge(page, url)
+
+ expect(body).toContain(`fill="#${customColor}"`)
+ })
+
test('custom color parameter is applied to SVG', async ({ page, baseURL }) => {
const customColor = 'ff69b4'
const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?color=${customColor}`)
@@ -110,6 +118,14 @@ test.describe('badge API', () => {
expect(body).toContain(`fill="#${customColor}"`)
})
+ test('custom label parameter is applied to SVG', async ({ page, baseURL }) => {
+ const customLabel = 'my-label'
+ const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?label=${customLabel}`)
+ const { body } = await fetchBadge(page, url)
+
+ expect(body).toContain(customLabel)
+ })
+
test('invalid badge type defaults to version strategy', async ({ page, baseURL }) => {
const url = toLocalUrl(baseURL, '/api/registry/badge/invalid-type/nuxt')
const { body } = await fetchBadge(page, url)