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)