feat: add custom npmx.dev badge (#262)

Author: Gugustinette

docs/content/2.guide/1.features.md

@@ -89,3 +89,22 @@ Quick access to online development environments detected from package READMEs:
 | :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net)         | Online editor for web snippets               |
 | :icon{name="i-simple-icons-replit"} [Replit](https://replit.com)               | Collaborative browser-based IDE              |
 | :icon{name="i-simple-icons-gitpod"} [Gitpod](https://gitpod.io)                | Cloud development environments               |
+
+### Custom badges
+
+You can add custom npmx badges to your markdown files using the following syntax: `[![Open on npmx.dev](https://npmx.dev/api/registry/badge/YOUR_PACKAGE)](https://npmx.dev/YOUR_PACKAGE)`
+
+Do not forget to replace `YOUR_PACKAGE` with the actual package name.
+
+Here are some examples:
+
+```
+# Default
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/nuxt)](https://npmx.dev/nuxt)
+
+# Organization packages
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/@nuxt/kit)](https://npmx.dev/@nuxt/kit)
+
+# Version-specific badges
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/nuxt/v/3.12.0)](https://npmx.dev/nuxt/v/3.12.0)
+```

server/api/registry/badge/[...pkg].get.ts

@@ -0,0 +1,74 @@
+import * as v from 'valibot'
+import { createError, getRouterParam, setHeader } from 'h3'
+import { PackageRouteParamsSchema } from '#shared/schemas/package'
+import { CACHE_MAX_AGE_ONE_HOUR } from '#shared/utils/constants'
+import { fetchNpmPackage } from '#server/utils/npm'
+import { assertValidPackageName } from '#shared/utils/npm'
+import { handleApiError } from '#server/utils/error-handler'
+
+function measureTextWidth(text: string, charWidth = 6.2, paddingX = 6): number {
+  return Math.max(40, Math.round(text.length * charWidth) + paddingX * 2)
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+    if (pkgParamSegments.length === 0) {
+      throw createError({ statusCode: 400, message: 'Package name is required.' })
+    }
+
+    const { rawPackageName, rawVersion } = parsePackageParams(pkgParamSegments)
+
+    try {
+      const { packageName, version: requestedVersion } = v.parse(PackageRouteParamsSchema, {
+        packageName: rawPackageName,
+        version: rawVersion,
+      })
+
+      assertValidPackageName(packageName)
+
+      const label = `./ ${packageName}`
+
+      const packument = await fetchNpmPackage(packageName)
+      const value = requestedVersion ?? packument['dist-tags']?.latest ?? 'unknown'
+
+      const leftWidth = measureTextWidth(label)
+      const rightWidth = measureTextWidth(value)
+      const totalWidth = leftWidth + rightWidth
+      const height = 20
+
+      const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="${height}" role="img" aria-label="${label}: ${value}">
+          <clipPath id="r">
+            <rect width="${totalWidth}" height="${height}" rx="3" fill="#fff"/>
+          </clipPath>
+          <g clip-path="url(#r)">
+            <rect width="${leftWidth}" height="${height}" fill="#0a0a0a"/>
+            <rect x="${leftWidth}" width="${rightWidth}" height="${height}" fill="#ffffff"/>
+          </g>
+          <g text-anchor="middle" font-family="'Geist', system-ui, -apple-system, sans-serif" font-size="11">
+            <text x="${leftWidth / 2}" y="14" fill="#ffffff">${label}</text>
+            <text x="${leftWidth + rightWidth / 2}" y="14" fill="#000000">${value}</text>
+          </g>
+        </svg>
+      `.trim()
+
+      setHeader(event, 'Content-Type', 'image/svg+xml')
+
+      return svg
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: 'Failed to generate npm badge.',
+      })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      return `badge:version:${pkg}`
+    },
+  },
+)

tests/badge.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+function toLocalUrl(baseURL: string | undefined, path: string): string {
+  if (!baseURL) return path
+  return baseURL.endsWith('/') ? `${baseURL}${path.slice(1)}` : `${baseURL}${path}`
+}
+
+async function fetchBadge(page: { request: { get: (url: string) => Promise<any> } }, url: string) {
+  const response = await page.request.get(url)
+  const body = await response.text()
+  return { response, body }
+}
+
+test.describe('badge API', () => {
+  test('unscoped package badge renders SVG', async ({ page, baseURL }) => {
+    const url = toLocalUrl(baseURL, '/api/registry/badge/nuxt')
+    const { response, body } = await fetchBadge(page, url)
+
+    expect(response.status()).toBe(200)
+    expect(response.headers()['content-type']).toContain('image/svg+xml')
+    expect(body).toContain('<svg')
+    expect(body).toContain('nuxt')
+  })
+
+  test('scoped package badge renders SVG', async ({ page, baseURL }) => {
+    const url = toLocalUrl(baseURL, '/api/registry/badge/@nuxt/kit')
+    const { response, body } = await fetchBadge(page, url)
+
+    expect(response.status()).toBe(200)
+    expect(response.headers()['content-type']).toContain('image/svg+xml')
+    expect(body).toContain('<svg')
+    expect(body).toContain('@nuxt/kit')
+  })
+
+  test('explicit version badge includes requested version', async ({ page, baseURL }) => {
+    const url = toLocalUrl(baseURL, '/api/registry/badge/nuxt/v/3.12.0')
+    const { response, body } = await fetchBadge(page, url)
+
+    expect(response.status()).toBe(200)
+    expect(response.headers()['content-type']).toContain('image/svg+xml')
+    expect(body).toContain('<svg')
+    expect(body).toContain('nuxt')
+    expect(body).toContain('3.12.0')
+  })
+})