forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
style: revise the badge char width (#908)
+11
-3
+11
-3
server/api/registry/badge/[type]/[...pkg].get.ts
+11
-3
server/api/registry/badge/[type]/[...pkg].get.ts
···
31
31
white: '#ffffff',
32
32
}
33
33
34
-
function measureTextWidth(text: string): number {
35
-
const charWidth = 7
34
+
const DEFAULT_CHAR_WIDTH = 7
35
+
const CHARS_WIDTH = {
36
+
engines: 5.5,
37
+
}
38
+
39
+
function measureTextWidth(text: string, charWidth?: number): number {
40
+
charWidth ??= DEFAULT_CHAR_WIDTH
36
41
const paddingX = 8
37
42
return Math.max(40, Math.round(text.length * charWidth) + paddingX * 2)
38
43
}
···
288
293
const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`
289
294
290
295
const leftWidth = measureTextWidth(finalLabel)
291
-
const rightWidth = measureTextWidth(finalValue)
296
+
const rightWidth = measureTextWidth(
297
+
finalValue,
298
+
CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
299
+
)
292
300
const totalWidth = leftWidth + rightWidth
293
301
const height = 20
294
302