Skip to content

style: revise the badge char width #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 2 commits into from
Feb 4, 2026
Merged

style: revise the badge char width #908

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8eed1b0
style: revise the badge char width
btea Feb 4, 2026
2912ab2
chore: reviese
btea Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions server/api/registry/badge/[type]/[...pkg].get.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,13 @@ const COLORS = {
white: '#ffffff',
}

function measureTextWidth(text: string): number {
const charWidth = 7
const DEFAULT_CHAR_WIDTH = 7
const CHARS_WIDTH = {
engines: 5.5,
}

function measureTextWidth(text: string, charWidth?: number): number {
charWidth ??= DEFAULT_CHAR_WIDTH
const paddingX = 8
return Math.max(40, Math.round(text.length * charWidth) + paddingX * 2)
}
Expand Down Expand Up @@ -288,7 +293,10 @@ export default defineCachedEventHandler(
const finalLabelColor = rawLabelColor?.startsWith('#') ? rawLabelColor : `#${rawLabelColor}`

const leftWidth = measureTextWidth(finalLabel)
const rightWidth = measureTextWidth(finalValue)
const rightWidth = measureTextWidth(
finalValue,
CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
)
Comment on lines 295 to +299
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n server/api/registry/badge/\[type\]/\[...\pkg\].get.ts | head -320 | tail -40

Repository: npmx-dev/npmx.dev

Length of output: 2135

🏁 Script executed:

find . -type f -name "*.get.ts" | grep -E "badge.*pkg"

Repository: npmx-dev/npmx.dev

Length of output: 111

🏁 Script executed:

fd -t f "pkg.*get.ts" -o -path "*badge*" -type f -name "*.get.ts"

Repository: npmx-dev/npmx.dev

Length of output: 177

🏁 Script executed:

fd -t f ".get.ts" | grep badge

Repository: npmx-dev/npmx.dev

Length of output: 109

🏁 Script executed:

grep -n "CHARS_WIDTH" server/api/registry/badge/\[type\]/\[...\pkg\].get.ts

Repository: npmx-dev/npmx.dev

Length of output: 151

🏁 Script executed:

grep -n "strategyKey" server/api/registry/badge/\[type\]/\[...\pkg\].get.ts | head -20

Repository: npmx-dev/npmx.dev

Length of output: 305

🏁 Script executed:

sed -n '35,50p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts

Repository: npmx-dev/npmx.dev

Length of output: 559

🏁 Script executed:

sed -n '1,50p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts | grep -E "import|const|type"

Repository: npmx-dev/npmx.dev

Length of output: 1019

🏁 Script executed:

sed -n '270,285p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts

Repository: npmx-dev/npmx.dev

Length of output: 871

🏁 Script executed:

grep -n "BadgeTypeSchema\|badgeStrategies" server/api/registry/badge/\[type\]/\[...\pkg\].get.ts | head -20

Repository: npmx-dev/npmx.dev

Length of output: 346

🏁 Script executed:

sed -n '1,200p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts | grep -A 30 "badgeStrategies"

Repository: npmx-dev/npmx.dev

Length of output: 1409

🏁 Script executed:

sed -n '121,200p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts

Repository: npmx-dev/npmx.dev

Length of output: 3555

🏁 Script executed:

sed -n '35,45p' server/api/registry/badge/\[type\]/\[...\pkg\].get.ts

Repository: npmx-dev/npmx.dev

Length of output: 350

Remove the unsafe type assertion when indexing CHARS_WIDTH.

strategyKey can be any badge strategy type ('version', 'license', 'size', etc.), but CHARS_WIDTH only defines 'engines'. The type assertion hides this mismatch; a type guard ensures safe access.

♻️ Suggested type-safe lookup 
+function hasCharWidth(key: string): key is keyof typeof CHARS_WIDTH {
+  return Object.hasOwn(CHARS_WIDTH, key)
+}
+
-      const rightWidth = measureTextWidth(
-        finalValue,
-        CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
-      )
+      const charWidth = hasCharWidth(strategyKey) ? CHARS_WIDTH[strategyKey] : undefined
+      const rightWidth = measureTextWidth(finalValue, charWidth)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const leftWidth = measureTextWidth(finalLabel)
const rightWidth = measureTextWidth(finalValue)
const rightWidth = measureTextWidth(
finalValue,
CHARS_WIDTH[strategyKey as keyof typeof CHARS_WIDTH],
)
function hasCharWidth(key: string): key is keyof typeof CHARS_WIDTH {
return Object.hasOwn(CHARS_WIDTH, key)
}
const leftWidth = measureTextWidth(finalLabel)
const charWidth = hasCharWidth(strategyKey) ? CHARS_WIDTH[strategyKey] : undefined
const rightWidth = measureTextWidth(finalValue, charWidth)

const totalWidth = leftWidth + rightWidth
const height = 20

Expand Down
Loading