fix(ui): register Geist font with canvas to fix badge width measurement

[howwohmm]

Summary

• Register the Geist font with @napi-rs/canvas GlobalFonts so server-side text measurement uses the same font the SVG specifies for browser rendering
• Add serverAssets config in Nitro to expose public/fonts/ to server-side code via useStorage
• Font registration is lazy (once per process) and best-effort — falls back gracefully if the font file is unavailable

Root cause

The badge SVG specifies font-family="Geist, system-ui, ..." but @napi-rs/canvas was never given the Geist font file. In production, canvas measured text with a wider system fallback font, producing oversized width attributes on the SVG. The browser then rendered the text narrower (using Geist or system-ui), leaving visible whitespace gaps — especially noticeable for longer badge values.

Locally, the Geist font may be installed system-wide, which is why pnpm dev produced correct-looking badges.

Closes #2187

Test plan

• Verify /api/registry/badge/engines/vitest no longer has excessive whitespace
• Verify other badge types (version, license, downloads) render with correct widths
• Verify style=shieldsio badges are unaffected
• Verify badges still render correctly when canvas/font registration fails (graceful fallback)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 0:38am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 0:38am
npmx-lunaria	Ignored		Mar 22, 2026 0:38am

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request adds server-side font asset configuration and Geist font registration for badge generation. The nuxt.config.ts file now includes a nitro.serverAssets configuration to serve font files from ./public/fonts under the fonts asset group. The badge handler in server/api/registry/badge/[type]/[...pkg].get.ts introduces a module-level flag and async function to register the Geist font with @napi-rs/canvas on first use, retrieving the font from assets storage and suppressing registration errors silently.

Possibly related PRs

• fix: improve badge text measurement accuracy #1486: Adds canvas-based text measurement logic that requires the Geist font registration implemented in this PR to function correctly.
• style: revise the badge char width #908: Modifies badge text measurement through character-width constants and measureTextWidth function, which complements the Geist font registration for accurate text sizing.
• fix: fix fallback not triggered for 0 measuredWidth #1584: Tightens validation of measured text width in the badge generator, relying on accurate font-based measurement enabled by this PR's font registration.

Suggested reviewers

• ghostdevv
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the font registration implementation and root cause of the badge width issue.
Linked Issues check	✅ Passed	The pull request successfully addresses the core requirement from issue #2187 by registering the Geist font with @napi-rs/canvas and adding Nitro serverAssets configuration to expose fonts to server-side code.
Out of Scope Changes check	✅ Passed	All changes are scoped to the linked issue requirements: Nitro configuration for font assets and canvas font registration in the badge API handler; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

server/api/registry/badge/[type]/[...pkg].get.ts (1)

55-73: Minor race condition on concurrent requests.

Multiple simultaneous requests before registration completes will all enter the try block and attempt registration. Whilst likely benign (redundant work rather than corruption), a Promise-based singleton pattern avoids repeated font loads.

🔧 Suggested fix using Promise singleton

-let fontRegistered = false
+let fontRegistrationPromise: Promise<void> | null = null

-async function registerGeistFont(): Promise<void> {
-  if (fontRegistered) return
+function registerGeistFont(): Promise<void> {
+  if (fontRegistrationPromise) return fontRegistrationPromise

-  try {
-    const fontStorage = useStorage('assets:fonts')
-    const fontData = await fontStorage.getItemRaw('Geist-Regular.ttf')
-
-    if (fontData) {
-      const buffer = fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer)
-      GlobalFonts.register(buffer, 'Geist')
+  fontRegistrationPromise = (async () => {
+    try {
+      const fontStorage = useStorage('assets:fonts')
+      const fontData = await fontStorage.getItemRaw('Geist-Regular.ttf')
+
+      if (fontData) {
+        const buffer = fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer)
+        GlobalFonts.register(buffer, 'Geist')
+      }
+    } catch {
+      // font registration is best-effort; fallback measurement will be used
     }
-  } catch {
-    // font registration is best-effort; fallback measurement will be used
-  }
+  })()

-  fontRegistered = true
+  return fontRegistrationPromise
 }

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9c55b5f7-3bc7-4932-908c-fe4e89a53437

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 7190baf.

📒 Files selected for processing (2)

• nuxt.config.ts
• server/api/registry/badge/[type]/[...pkg].get.ts

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!