feat: add github stars, issues and created at to comparison page (#2479)

t128n · autofix-ci[bot] · web-flow · commit 9b5a9c0af5ab · 2026-04-14T00:52:22.000Z
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/app/composables/useFacetSelection.ts b/app/composables/useFacetSelection.ts
@@ -122,6 +122,26 @@ export function useFacetSelection(queryParam = 'facets') {
         chartable: false,
         chartable_scatter: false,
       },
+      githubStars: {
+        label: t(`compare.facets.items.githubStars.label`),
+        description: t(`compare.facets.items.githubStars.description`),
+        chartable: true,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
+      },
+      githubIssues: {
+        label: t(`compare.facets.items.githubIssues.label`),
+        description: t(`compare.facets.items.githubIssues.description`),
+        chartable: true,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
+      },
+      createdAt: {
+        label: t(`compare.facets.items.createdAt.label`),
+        description: t(`compare.facets.items.createdAt.description`),
+        chartable: false,
+        chartable_scatter: false,
+      },
     }),
   )
 
diff --git a/app/composables/usePackageComparison.ts b/app/composables/usePackageComparison.ts
@@ -44,8 +44,14 @@ export interface PackageComparisonData {
      * but a maintainer was removed last week, this would show the '3 years ago' time.
      */
     lastUpdated?: string
+    /** Creation date of the package (ISO 8601 date-time string) */
+    createdAt?: string
     engines?: { node?: string; npm?: string }
     deprecated?: string
+    github?: {
+      stars?: number
+      issues?: number
+    }
   }
   /** Whether this is a binary-only package (CLI without library entry points) */
   isBinaryOnly?: boolean
@@ -115,12 +121,13 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
           try {
             // Fetch basic package info first (required)
             const { data: pkgData } = await $npmRegistry<Packument>(`/${encodePackageName(name)}`)
-
             const latestVersion = pkgData['dist-tags']?.latest
             if (!latestVersion) return null
 
             // Fetch fast additional data in parallel (optional - failures are ok)
-            const [downloads, analysis, vulns, likes] = await Promise.all([
+            const repoInfo = parseRepositoryInfo(pkgData.repository)
+            const isGitHub = repoInfo?.provider === 'github'
+            const [downloads, analysis, vulns, likes, ghStars, ghIssues] = await Promise.all([
               $fetch<{ downloads: number }>(
                 `https://api.npmjs.org/downloads/point/last-week/${encodePackageName(name)}`,
               ).catch(() => null),
@@ -133,6 +140,20 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               $fetch<PackageLikes>(`/api/social/likes/${encodePackageName(name)}`).catch(
                 () => null,
               ),
+              isGitHub
+                ? $fetch<{ repo: { stars: number } }>(
+                    `https://ungh.cc/repos/${repoInfo.owner}/${repoInfo.repo}`,
+                  )
+                    .then(res => (typeof res?.repo?.stars === 'number' ? res.repo.stars : null))
+                    .catch(() => null)
+                : Promise.resolve(null),
+              isGitHub
+                ? $fetch<{ issues: number | null }>(
+                    `/api/github/issues/${repoInfo.owner}/${repoInfo.repo}`,
+                  )
+                    .then(res => (typeof res?.issues === 'number' ? res.issues : null))
+                    .catch(() => null)
+                : Promise.resolve(null),
             ])
             const versionData = pkgData.versions[latestVersion]
             const packageSize = versionData?.dist?.unpackedSize
@@ -179,8 +200,13 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
                 // Use version-specific publish time, NOT time.modified (which can be
                 // updated by metadata changes like maintainer additions)
                 lastUpdated: pkgData.time?.[latestVersion],
+                createdAt: pkgData.time?.created,
                 engines: analysis?.engines,
                 deprecated: versionData?.deprecated,
+                github: {
+                  stars: ghStars ?? undefined,
+                  issues: ghIssues ?? undefined,
+                },
               },
               isBinaryOnly: isBinary,
               totalLikes: likes?.totalLikes,
@@ -252,6 +278,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
+
       return computeFacetValue(
         facet,
         pkg,
@@ -538,6 +565,33 @@ function computeFacetValue(
         status: totalDepCount > 50 ? 'warning' : 'neutral',
       }
     }
+    case 'githubStars': {
+      const stars = data.metadata?.github?.stars
+      if (stars == null) return null
+      return {
+        raw: stars,
+        display: formatCompactNumber(stars),
+        status: 'neutral',
+      }
+    }
+    case 'githubIssues': {
+      const issues = data.metadata?.github?.issues
+      if (issues == null) return null
+      return {
+        raw: issues,
+        display: formatCompactNumber(issues),
+        status: 'neutral',
+      }
+    }
+    case 'createdAt': {
+      const createdAt = data.metadata?.createdAt
+      if (!createdAt) return null
+      return {
+        raw: createdAt,
+        display: createdAt,
+        type: 'date',
+      }
+    }
     default: {
       return null
     }
diff --git a/app/utils/compare-scatter-chart.ts b/app/utils/compare-scatter-chart.ts
@@ -72,6 +72,16 @@ function getNumericFacetValue(
     case 'lastUpdated':
       return toFreshnessScore(packageData.metadata?.lastUpdated)
 
+    case 'githubStars':
+      return isFiniteNumber(packageData.metadata?.github?.stars)
+        ? packageData.metadata.github.stars
+        : null
+
+    case 'githubIssues':
+      return isFiniteNumber(packageData.metadata?.github?.issues)
+        ? packageData.metadata.github.issues
+        : null
+
     default:
       return null
   }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -1326,6 +1326,18 @@
         "vulnerabilities": {
           "label": "Vulnerabilities",
           "description": "Known security vulnerabilities"
+        },
+        "githubStars": {
+          "label": "GitHub Stars",
+          "description": "Number of stars on the GitHub repository"
+        },
+        "githubIssues": {
+          "label": "GitHub Issues",
+          "description": "Number of issues on the GitHub repository"
+        },
+        "createdAt": {
+          "label": "Created At",
+          "description": "When the package was created"
         }
       },
       "values": {
diff --git a/i18n/schema.json b/i18n/schema.json
@@ -3984,6 +3984,42 @@
                     }
                   },
                   "additionalProperties": false
+                },
+                "githubStars": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "description": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "githubIssues": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "description": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "createdAt": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "description": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
                 }
               },
               "additionalProperties": false
diff --git a/server/api/github/contributors-evolution/[owner]/[repo].get.ts b/server/api/github/contributors-evolution/[owner]/[repo].get.ts
@@ -1,4 +1,3 @@
-import { setTimeout } from 'node:timers/promises'
 import { CACHE_MAX_AGE_ONE_DAY } from '#shared/utils/constants'
 
 type GitHubContributorWeek = {
@@ -26,38 +25,13 @@ export default defineCachedEventHandler(
     }
 
     const url = `https://api.github.com/repos/${owner}/${repo}/stats/contributors`
-    const headers = {
-      'User-Agent': 'npmx',
-      'Accept': 'application/vnd.github+json',
-    }
-
-    const maxAttempts = 6
-    let delayMs = 1000
 
     try {
-      for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
-        const response = await $fetch.raw<GitHubContributorStats[]>(url, { headers })
-        const status = response.status
-
-        if (status === 200) {
-          return Array.isArray(response._data) ? response._data : []
-        }
-
-        if (status === 204) {
-          return []
-        }
-
-        if (status === 202) {
-          if (attempt === maxAttempts - 1) return []
-          await setTimeout(delayMs)
-          delayMs = Math.min(delayMs * 2, 16_000)
-          continue
-        }
-
-        return []
-      }
+      const data = await fetchGitHubWithRetries<GitHubContributorStats[]>(url, {
+        maxAttempts: 6,
+      })
 
-      return []
+      return Array.isArray(data) ? data : []
     } catch {
       return []
     }
diff --git a/server/api/github/issues/[owner]/[repo].get.ts b/server/api/github/issues/[owner]/[repo].get.ts
@@ -0,0 +1,55 @@
+import { CACHE_MAX_AGE_ONE_HOUR } from '#shared/utils/constants'
+
+interface GitHubSearchResponse {
+  total_count: number
+}
+
+export interface GithubIssueCountResponse {
+  owner: string
+  repo: string
+  issues: number | null
+}
+
+export default defineCachedEventHandler(
+  async (event): Promise<GithubIssueCountResponse> => {
+    const owner = getRouterParam(event, 'owner')
+    const repo = getRouterParam(event, 'repo')
+
+    if (!owner || !repo) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Owner and repo are required parameters.',
+      })
+    }
+
+    const query = `repo:${owner}/${repo} is:issue is:open`
+    const url = `https://api.github.com/search/issues?q=${encodeURIComponent(query)}&per_page=1`
+
+    try {
+      const data = await fetchGitHubWithRetries<GitHubSearchResponse>(url, {
+        timeout: 10000,
+      })
+
+      return {
+        owner,
+        repo,
+        issues: typeof data?.total_count === 'number' ? data.total_count : null,
+      }
+    } catch {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'Failed to fetch issue count from GitHub',
+      })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    name: 'github-issue-count',
+    getKey: event => {
+      const owner = getRouterParam(event, 'owner')
+      const repo = getRouterParam(event, 'repo')
+      return `${owner}/${repo}`
+    },
+  },
+)
diff --git a/server/utils/github.ts b/server/utils/github.ts
@@ -0,0 +1,57 @@
+import { setTimeout } from 'node:timers/promises'
+
+export interface GitHubFetchOptions extends NonNullable<Parameters<typeof $fetch.raw>[1]> {
+  maxAttempts?: number
+}
+
+export async function fetchGitHubWithRetries<T>(
+  url: string,
+  options: GitHubFetchOptions = {},
+): Promise<T | null> {
+  const { maxAttempts = 3, ...fetchOptions } = options
+  let delayMs = 1000
+
+  const defaultHeaders = {
+    'Accept': 'application/vnd.github+json',
+    'User-Agent': 'npmx',
+    'X-GitHub-Api-Version': '2026-03-10',
+  }
+
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    try {
+      const headers = new Headers(defaultHeaders)
+      for (const [key, value] of new Headers(fetchOptions.headers)) {
+        headers.set(key, value)
+      }
+      const response = await $fetch.raw(url, {
+        ...fetchOptions,
+        headers,
+      })
+
+      if (response.status === 200) {
+        return (response._data as T) ?? null
+      }
+
+      if (response.status === 204) {
+        return null
+      }
+
+      if (response.status === 202) {
+        if (attempt === maxAttempts - 1) break
+        await setTimeout(delayMs)
+        delayMs = Math.min(delayMs * 2, 16_000)
+        continue
+      }
+
+      break
+    } catch (error: unknown) {
+      if (attempt === maxAttempts - 1) {
+        throw error
+      }
+      await setTimeout(delayMs)
+      delayMs = Math.min(delayMs * 2, 16_000)
+    }
+  }
+
+  throw new Error(`Failed to fetch from GitHub after ${maxAttempts} attempts`)
+}
diff --git a/shared/types/comparison.ts b/shared/types/comparison.ts
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
diff --git a/test/nuxt/composables/use-package-comparison.spec.ts b/test/nuxt/composables/use-package-comparison.spec.ts
