forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: badge support `label/labelColor` (#752)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
btea
Daniel Roe
and committed by
GitHub
bf8fa752
d4584fea
+44
-7
+19
-5
docs/content/2.guide/1.features.md
+19
-5
docs/content/2.guide/1.features.md
···
158
158
159
159
You can further customize your badges by appending query parameters to the badge URL.
160
160
161
+
##### `labelColor`
162
+
163
+
Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix).
164
+
165
+
- **Default**: `#0a0a0a`
166
+
- **Usage**: `?labelColor=HEX_CODE`
167
+
168
+
##### `label`
169
+
170
+
Overrides the default label text. You can pass any string to customize the label displayed on the badge.
171
+
172
+
- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
173
+
- **Usage**: `?label=YOUR_LABEL`
174
+
161
175
##### `color`
162
176
163
177
Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix).
···
165
179
- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
166
180
- **Usage**: `?color=HEX_CODE`
167
181
168
-
| Example | URL |
169
-
| :------------- | :------------------------------------ |
170
-
| **Hot Pink** | `.../badge/version/nuxt?color=ff69b4` |
171
-
| **Pure Black** | `.../badge/version/nuxt?color=000000` |
172
-
| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
182
+
| Example | URL |
183
+
| :------------- | :------------------------------------- |
184
+
| **Hot Pink** | `.../badge/version/nuxt?colorB=ff69b4` |
185
+
| **Pure Black** | `.../badge/version/nuxt?colorB=000000` |
186
+
| **Brand Blue** | `.../badge/version/nuxt?colorB=3b82f6` |
173
187
174
188
##### `name`
175
189
+9
-2
server/api/registry/badge/[type]/[...pkg].get.ts
+9
-2
server/api/registry/badge/[type]/[...pkg].get.ts
···
14
14
const QUERY_SCHEMA = v.object({
15
15
color: v.optional(v.string()),
16
16
name: v.optional(v.string()),
17
+
labelColor: v.optional(v.string()),
18
+
label: v.optional(v.string()),
17
19
})
18
20
19
21
const COLORS = {
···
263
265
264
266
const queryParams = v.safeParse(QUERY_SCHEMA, query)
265
267
const userColor = queryParams.success ? queryParams.output.color : undefined
268
+
const labelColor = queryParams.success ? queryParams.output.labelColor : undefined
266
269
const showName = queryParams.success && queryParams.output.name === 'true'
270
+
const userLabel = queryParams.success ? queryParams.output.label : undefined
267
271
268
272
const badgeTypeResult = v.safeParse(BadgeTypeSchema, typeParam)
269
273
const strategyKey = badgeTypeResult.success ? badgeTypeResult.output : 'version'
···
274
278
const pkgData = await fetchNpmPackage(packageName)
275
279
const strategyResult = await strategy(pkgData, requestedVersion)
276
280
277
-
const finalLabel = showName ? packageName : strategyResult.label
281
+
const finalLabel = userLabel ? userLabel : showName ? packageName : strategyResult.label
278
282
const finalValue = strategyResult.value
279
283
280
284
const rawColor = userColor ?? strategyResult.color
281
285
const finalColor = rawColor?.startsWith('#') ? rawColor : `#${rawColor}`
282
286
287
+
const rawLabelColor = labelColor ?? '#0a0a0a'
288
+
const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`
289
+
283
290
const leftWidth = measureTextWidth(finalLabel)
284
291
const rightWidth = measureTextWidth(finalValue)
285
292
const totalWidth = leftWidth + rightWidth
···
291
298
<rect width="${totalWidth}" height="${height}" rx="3" fill="#fff"/>
292
299
</clipPath>
293
300
<g clip-path="url(#r)">
294
-
<rect width="${leftWidth}" height="${height}" fill="#0a0a0a"/>
301
+
<rect width="${leftWidth}" height="${height}" fill="${finalLabelColor}"/>
295
302
<rect x="${leftWidth}" width="${rightWidth}" height="${height}" fill="${finalColor}"/>
296
303
</g>
297
304
<g text-anchor="middle" font-family="'Geist', system-ui, -apple-system, sans-serif" font-size="11">
+16
test/e2e/badge.spec.ts
+16
test/e2e/badge.spec.ts
···
102
102
})
103
103
})
104
104
105
+
test('custom labelColor parameter is applied to SVG', async ({ page, baseURL }) => {
106
+
const customColor = '00ff00'
107
+
const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?labelColor=${customColor}`)
108
+
const { body } = await fetchBadge(page, url)
109
+
110
+
expect(body).toContain(`fill="#${customColor}"`)
111
+
})
112
+
105
113
test('custom color parameter is applied to SVG', async ({ page, baseURL }) => {
106
114
const customColor = 'ff69b4'
107
115
const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?color=${customColor}`)
108
116
const { body } = await fetchBadge(page, url)
109
117
110
118
expect(body).toContain(`fill="#${customColor}"`)
119
+
})
120
+
121
+
test('custom label parameter is applied to SVG', async ({ page, baseURL }) => {
122
+
const customLabel = 'my-label'
123
+
const url = toLocalUrl(baseURL, `/api/registry/badge/version/nuxt?label=${customLabel}`)
124
+
const { body } = await fetchBadge(page, url)
125
+
126
+
expect(body).toContain(customLabel)
111
127
})
112
128
113
129
test('invalid badge type defaults to version strategy', async ({ page, baseURL }) => {