feat: add package scores display

app/components/Package/ScoreBars.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const props = defineProps<{
+  packageName: string
+}>()
+
+const { data: score, status } = usePackageScore(() => props.packageName)
+
+const scoreMetrics = computed(() => {
+  if (!score.value) return []
+  return [
+    {
+      key: 'quality',
+      value: score.value.detail.quality * 100,
+      label: $t('package.scores.quality'),
+    },
+    {
+      key: 'popularity',
+      value: score.value.detail.popularity * 100,
+      label: $t('package.scores.popularity'),
+    },
+    {
+      key: 'maintenance',
+      value: score.value.detail.maintenance * 100,
+      label: $t('package.scores.maintenance'),
+    },
+  ]
+})
+
+function getScoreColor(percentage: number): string {
+  const hue = 25 + (percentage / 100) * (145 - 25)
+  return `oklch(0.55 0.12 ${hue})`
+}
+</script>
+
+<template>
+  <CollapsibleSection id="scores" :title="$t('package.scores.title')">
+    <template #actions>
+      <TooltipApp :text="$t('package.scores.source')">
+        <span class="i-carbon:information w-3.5 h-3.5 text-fg-subtle" aria-hidden="true" />
+      </TooltipApp>
+    </template>
+    <div v-if="status === 'pending'" class="flex flex-col gap-2">
+      <div v-for="i in 3" :key="i" class="flex items-center gap-3">
+        <SkeletonInline class="w-24 h-3" />
+        <SkeletonInline class="flex-1 h-3 rounded-full" />
+        <SkeletonInline class="w-8 h-3" />
+      </div>
+    </div>
+    <div v-else-if="score" class="flex flex-col gap-2">
+      <div v-for="metric in scoreMetrics" :key="metric.key" class="flex items-center gap-3">
+        <span class="w-24 text-xs text-fg-subtle">{{ metric.label }}</span>
+        <div class="flex-1 h-1.5 bg-border-subtle rounded-full overflow-hidden">
+          <div
+            class="h-full rounded-full"
+            :style="{ width: `${metric.value}%`, background: getScoreColor(metric.value) }"
+          />
+        </div>
+        <span class="w-8 text-xs font-mono text-fg-muted text-right">
+          {{ Math.round(metric.value) }}%
+        </span>
+      </div>
+    </div>
+    <p v-else class="text-fg-subtle text-sm">{{ $t('package.scores.unavailable') }}</p>
+  </CollapsibleSection>
+</template>

app/composables/npm/usePackageScore.ts

@@ -0,0 +1,5 @@
+import type { NpmsScore } from '#server/api/registry/score/[...pkg].get'
+
+export function usePackageScore(name: MaybeRefOrGetter<string>) {
+  return useLazyFetch<NpmsScore>(() => `/api/registry/score/${toValue(name)}`)
+}

app/pages/package/[...package].vue

@@ -1188,6 +1188,9 @@ defineOgImageComponent('Package', {
           <!-- Download stats -->
           <PackageWeeklyDownloadStats :packageName :createdIso="pkg?.time?.created ?? null" />
 
+          <!-- Package scores -->
+          <PackageScoreBars :packageName />
+
           <!-- Playground links -->
           <PackagePlaygrounds
             v-if="readmeData?.playgroundLinks?.length"

i18n/locales/en.json

@@ -298,6 +298,14 @@
       "download_file": "Download {fileType}",
       "toggle_annotator": "Toggle annotator"
     },
+    "scores": {
+      "title": "Scores",
+      "quality": "Quality",
+      "popularity": "Popularity",
+      "maintenance": "Maintenance",
+      "unavailable": "Score data unavailable",
+      "source": "Scores from npms.io"
+    },
     "install_scripts": {
       "title": "Install Scripts",
       "script_label": "(script)",

lunaria/files/en-GB.json

@@ -298,6 +298,14 @@
       "download_file": "Download {fileType}",
       "toggle_annotator": "Toggle annotator"
     },
+    "scores": {
+      "title": "Scores",
+      "quality": "Quality",
+      "popularity": "Popularity",
+      "maintenance": "Maintenance",
+      "unavailable": "Score data unavailable",
+      "source": "Scores from npms.io"
+    },
     "install_scripts": {
       "title": "Install Scripts",
       "script_label": "(script)",

lunaria/files/en-US.json

@@ -298,6 +298,14 @@
       "download_file": "Download {fileType}",
       "toggle_annotator": "Toggle annotator"
     },
+    "scores": {
+      "title": "Scores",
+      "quality": "Quality",
+      "popularity": "Popularity",
+      "maintenance": "Maintenance",
+      "unavailable": "Score data unavailable",
+      "source": "Scores from npms.io"
+    },
     "install_scripts": {
       "title": "Install Scripts",
       "script_label": "(script)",

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

@@ -1,15 +1,14 @@
 import * as v from 'valibot'
 import { createError, getRouterParam, getQuery, setHeader } from 'h3'
 import { PackageRouteParamsSchema } from '#shared/schemas/package'
-import { CACHE_MAX_AGE_ONE_HOUR, ERROR_NPM_FETCH_FAILED } from '#shared/utils/constants'
+import { CACHE_MAX_AGE_ONE_HOUR, ERROR_NPM_FETCH_FAILED, NPMS_API } from '#shared/utils/constants'
 import { fetchNpmPackage } from '#server/utils/npm'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { handleApiError } from '#server/utils/error-handler'
 
 const NPM_DOWNLOADS_API = 'https://api.npmjs.org/downloads/point'
 const OSV_QUERY_API = 'https://api.osv.dev/v1/query'
 const BUNDLEPHOBIA_API = 'https://bundlephobia.com/api/size'
-const NPMS_API = 'https://api.npms.io/v2/package'
 
 const QUERY_SCHEMA = v.object({
   color: v.optional(v.string()),

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

@@ -0,0 +1,47 @@
+import * as v from 'valibot'
+import { PackageRouteParamsSchema } from '#shared/schemas/package'
+import { CACHE_MAX_AGE_ONE_HOUR, NPMS_API } from '#shared/utils/constants'
+
+export interface NpmsScore {
+  final: number
+  detail: {
+    quality: number
+    popularity: number
+    maintenance: number
+  }
+}
+
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+    const { rawPackageName } = parsePackageParams(pkgParamSegments)
+
+    try {
+      const { packageName } = v.parse(PackageRouteParamsSchema, {
+        packageName: rawPackageName,
+      })
+
+      const response = await fetch(`${NPMS_API}/${encodeURIComponent(packageName)}`)
+
+      if (!response.ok) {
+        throw createError({ statusCode: response.status, message: 'Failed to fetch npms score' })
+      }
+
+      const data = await response.json()
+      return data.score as NpmsScore
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: 'Failed to fetch package score from npms.io',
+      })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      return `npms-score:${pkg}`
+    },
+  },
+)

shared/utils/constants.ts

@@ -12,6 +12,7 @@ export const NPMX_SITE = 'https://npmx.dev'
 export const BLUESKY_API = 'https://public.api.bsky.app/xrpc/'
 export const BLUESKY_COMMENTS_REQUEST = '/api/atproto/bluesky-comments'
 export const NPM_REGISTRY = 'https://registry.npmjs.org'
+export const NPMS_API = 'https://api.npms.io/v2/package'
 export const ERROR_PACKAGE_ANALYSIS_FAILED = 'Failed to analyze package.'
 export const ERROR_PACKAGE_VERSION_AND_FILE_FAILED = 'Version and file path are required.'
 export const ERROR_PACKAGE_REQUIREMENTS_FAILED =

test/nuxt/a11y.spec.ts

@@ -123,6 +123,7 @@ import {
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
+  PackageScoreBars,
   PackageReplacement,
   PackageSkeleton,
   PackageSkillsCard,
@@ -1079,6 +1080,59 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageScoreBars', () => {
+    it('should have no accessibility violations with score data', async () => {
+      const component = await mountSuspended(PackageScoreBars, {
+        props: { packageName: 'vue' },
+        global: {
+          mocks: {
+            usePackageScore: () => ({
+              data: ref({
+                final: 0.85,
+                detail: { quality: 0.82, popularity: 0.91, maintenance: 0.78 },
+              }),
+              status: ref('success'),
+            }),
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in loading state', async () => {
+      const component = await mountSuspended(PackageScoreBars, {
+        props: { packageName: 'vue' },
+        global: {
+          mocks: {
+            usePackageScore: () => ({
+              data: ref(null),
+              status: ref('pending'),
+            }),
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when unavailable', async () => {
+      const component = await mountSuspended(PackageScoreBars, {
+        props: { packageName: 'vue' },
+        global: {
+          mocks: {
+            usePackageScore: () => ({
+              data: ref(null),
+              status: ref('error'),
+            }),
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageAccessControls', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageAccessControls, {