From d0b20ec24d793f338acd7f0d71d89d618bd35c54 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 14 Mar 2026 16:43:45 +0100
Subject: [PATCH 1/2] refactor(ui): move package external links to component

---
 app/components/Package/ExternalLinks.vue | 106 ++++++++++++++++++++++
 app/pages/package/[[org]]/[name].vue     | 107 +----------------------
 test/nuxt/a11y.spec.ts                   |  57 ++++++++++++
 3 files changed, 165 insertions(+), 105 deletions(-)
 create mode 100644 app/components/Package/ExternalLinks.vue

diff --git a/app/components/Package/ExternalLinks.vue b/app/components/Package/ExternalLinks.vue
new file mode 100644
index 000000000..223eaf7ee
--- /dev/null
+++ b/app/components/Package/ExternalLinks.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { IconClass } from '~/types'
+
+const props = defineProps<{
+  pkg: SlimPackument
+  jsrInfo?: JsrPackageInfo
+}>()
+
+const displayVersion = computed(() => props.pkg?.requestedVersion ?? null)
+const { repositoryUrl } = useRepositoryUrl(displayVersion.value)
+const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
+const compactNumberFormatter = useCompactNumberFormatter()
+
+const homepageUrl = computed(() => {
+  const homepage = displayVersion.value?.homepage
+  if (!homepage) return null
+
+  // Don't show homepage if it's the same as the repository URL
+  if (repositoryUrl.value && areUrlsEquivalent(homepage, repositoryUrl.value)) {
+    return null
+  }
+
+  return homepage
+})
+
+const fundingUrl = computed(() => {
+  let funding = displayVersion.value?.funding
+  if (Array.isArray(funding)) funding = funding[0]
+
+  if (!funding) return null
+
+  return typeof funding === 'string' ? funding : funding.url
+})
+
+const PROVIDER_ICONS: Record<string, IconClass> = {
+  github: 'i-simple-icons:github',
+  gitlab: 'i-simple-icons:gitlab',
+  bitbucket: 'i-simple-icons:bitbucket',
+  codeberg: 'i-simple-icons:codeberg',
+  gitea: 'i-simple-icons:gitea',
+  forgejo: 'i-simple-icons:forgejo',
+  gitee: 'i-simple-icons:gitee',
+  sourcehut: 'i-simple-icons:sourcehut',
+  tangled: 'i-custom:tangled',
+  radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
+}
+
+const repoProviderIcon = computed((): IconClass => {
+  const provider = repoRef.value?.provider
+  if (!provider) return 'i-simple-icons:github'
+  return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
+})
+</script>
+
+<template>
+  <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm">
+    <li v-if="repositoryUrl">
+      <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
+        <span v-if="repoRef">
+          {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
+        </span>
+        <span v-else>{{ $t('package.links.repo') }}</span>
+      </LinkBase>
+    </li>
+    <li v-if="repositoryUrl && repoMeta && starsLink">
+      <LinkBase :to="starsLink" classicon="i-lucide:star">
+        {{ compactNumberFormatter.format(stars) }}
+      </LinkBase>
+    </li>
+    <li v-if="forks && forksLink">
+      <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
+        {{ compactNumberFormatter.format(forks) }}
+      </LinkBase>
+    </li>
+    <li class="basis-full sm:hidden" />
+    <li v-if="homepageUrl">
+      <LinkBase :to="homepageUrl" classicon="i-lucide:link">
+        {{ $t('package.links.homepage') }}
+      </LinkBase>
+    </li>
+    <li v-if="displayVersion?.bugs?.url">
+      <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
+        {{ $t('package.links.issues') }}
+      </LinkBase>
+    </li>
+    <li>
+      <LinkBase
+        :to="`https://www.npmjs.com/package/${pkg.name}`"
+        :title="$t('common.view_on.npm')"
+        classicon="i-simple-icons:npm"
+      >
+        npm
+      </LinkBase>
+    </li>
+    <li v-if="jsrInfo?.exists && jsrInfo.url">
+      <LinkBase :to="jsrInfo.url" :title="$t('badges.jsr.title')" classicon="i-simple-icons:jsr">
+        {{ $t('package.links.jsr') }}
+      </LinkBase>
+    </li>
+    <li v-if="fundingUrl">
+      <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
+        {{ $t('package.links.fund') }}
+      </LinkBase>
+    </li>
+  </ul>
+</template>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3af5415e5..4e337daf5 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import type { JsrPackageInfo } from '#shared/types/jsr'
-import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
-import { areUrlsEquivalent } from '#shared/utils/url'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
-import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
-import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
-import { useViewOnGitProvider } from '~/composables/useViewOnGitProvider'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -390,50 +384,10 @@ const totalDepsCount = computed(() => {
 
 const { repositoryUrl } = useRepositoryUrl(displayVersion)
 
-const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
-
-const PROVIDER_ICONS: Record<string, IconClass> = {
-  github: 'i-simple-icons:github',
-  gitlab: 'i-simple-icons:gitlab',
-  bitbucket: 'i-simple-icons:bitbucket',
-  codeberg: 'i-simple-icons:codeberg',
-  gitea: 'i-simple-icons:gitea',
-  forgejo: 'i-simple-icons:forgejo',
-  gitee: 'i-simple-icons:gitee',
-  sourcehut: 'i-simple-icons:sourcehut',
-  tangled: 'i-custom:tangled',
-  radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
-}
-
-const repoProviderIcon = computed((): IconClass => {
-  const provider = repoRef.value?.provider
-  if (!provider) return 'i-simple-icons:github'
-  return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
-})
+const { repoRef } = useRepoMeta(repositoryUrl)
 
 const viewOnGitProvider = useViewOnGitProvider(() => repoRef.value?.provider)
 
-const homepageUrl = computed(() => {
-  const homepage = displayVersion.value?.homepage
-  if (!homepage) return null
-
-  // Don't show homepage if it's the same as the repository URL
-  if (repositoryUrl.value && areUrlsEquivalent(homepage, repositoryUrl.value)) {
-    return null
-  }
-
-  return homepage
-})
-
-const fundingUrl = computed(() => {
-  let funding = displayVersion.value?.funding
-  if (Array.isArray(funding)) funding = funding[0]
-
-  if (!funding) return null
-
-  return typeof funding === 'string' ? funding : funding.url
-})
-
 // Check if a version has provenance/attestations
 // The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {
@@ -496,7 +450,6 @@ const versionUrlPattern = computed(
 const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
 const numberFormatter = useNumberFormatter()
-const compactNumberFormatter = useCompactNumberFormatter()
 const bytesFormatter = useBytesFormatter()
 
 useHead({
@@ -578,63 +531,7 @@ const showSkeleton = shallowRef(false)
               </p>
             </div>
 
-            <!-- External links -->
-            <ul
-              class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
-            >
-              <li v-if="repositoryUrl">
-                <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
-                  <span v-if="repoRef">
-                    {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
-                  </span>
-                  <span v-else>{{ $t('package.links.repo') }}</span>
-                </LinkBase>
-              </li>
-              <li v-if="repositoryUrl && repoMeta && starsLink">
-                <LinkBase :to="starsLink" classicon="i-lucide:star">
-                  {{ compactNumberFormatter.format(stars) }}
-                </LinkBase>
-              </li>
-              <li v-if="forks && forksLink">
-                <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
-                  {{ compactNumberFormatter.format(forks) }}
-                </LinkBase>
-              </li>
-              <li class="basis-full sm:hidden" />
-              <li v-if="homepageUrl">
-                <LinkBase :to="homepageUrl" classicon="i-lucide:link">
-                  {{ $t('package.links.homepage') }}
-                </LinkBase>
-              </li>
-              <li v-if="displayVersion?.bugs?.url">
-                <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
-                  {{ $t('package.links.issues') }}
-                </LinkBase>
-              </li>
-              <li>
-                <LinkBase
-                  :to="`https://www.npmjs.com/package/${pkg.name}`"
-                  :title="$t('common.view_on.npm')"
-                  classicon="i-simple-icons:npm"
-                >
-                  npm
-                </LinkBase>
-              </li>
-              <li v-if="jsrInfo?.exists && jsrInfo.url">
-                <LinkBase
-                  :to="jsrInfo.url"
-                  :title="$t('badges.jsr.title')"
-                  classicon="i-simple-icons:jsr"
-                >
-                  {{ $t('package.links.jsr') }}
-                </LinkBase>
-              </li>
-              <li v-if="fundingUrl">
-                <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-                  {{ $t('package.links.fund') }}
-                </LinkBase>
-              </li>
-            </ul>
+            <PackageExternalLinks :pkg :jsrInfo />
             <PackageMetricsBadges
               v-if="resolvedVersion"
               :package-name="packageName"
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 28cdabb10..8629dd33c 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -219,6 +219,7 @@ import {
   DiffSkipBlock,
   DiffTable,
   DiffViewerPanel,
+  PackageExternalLinks,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -672,6 +673,62 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageExternalLinks', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageExternalLinks, {
+        props: {
+          pkg: {
+            '_id': 'react',
+            'name': 'react',
+            'dist-tags': { latest: '18.2.0' },
+            'time': {
+              'created': '2013-01-31T01:07:45.050Z',
+              'modified': '2024-03-14T00:00:00.000Z',
+              '18.2.0': '2024-03-14T00:00:00.000Z',
+            },
+            'requestedVersion': {
+              version: '18.2.0',
+              _npmVersion: '18.2.0',
+              homepage: 'https://react.dev',
+              repository: {
+                type: 'git',
+                url: 'https://github.com/facebook/react.git',
+              },
+              bugs: {
+                url: 'https://github.com/facebook/react/issues',
+              },
+              funding: 'https://github.com/sponsors/facebook',
+              dist: {
+                shasum: 'abc123def456',
+                tarball: 'https://registry.npmjs.org/react/-/react-18.2.0.tgz',
+                signatures: [],
+              },
+              deprecated: undefined,
+              keywords: [],
+              license: 'MIT',
+              name: 'react',
+              time: '2024-03-14T00:00:00.000Z',
+              _id: 'react@18.2.0',
+            },
+            'versions': {
+              '18.2.0': {
+                version: '18.2.0',
+                hasProvenance: false,
+                tags: [],
+              },
+            },
+          },
+          jsrInfo: {
+            exists: true,
+            url: 'https://jsr.io/@react/react',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageCard', () => {
     const mockResult = {
       package: {

From 5509b4af1158bef73663f82104cc2fd8735ed8fd Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 14 Mar 2026 17:18:11 +0100
Subject: [PATCH 2/2] fix: displayVersion reactivity lost

---
 app/components/Package/ExternalLinks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/ExternalLinks.vue b/app/components/Package/ExternalLinks.vue
index 223eaf7ee..164f67d69 100644
--- a/app/components/Package/ExternalLinks.vue
+++ b/app/components/Package/ExternalLinks.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 }>()
 
 const displayVersion = computed(() => props.pkg?.requestedVersion ?? null)
-const { repositoryUrl } = useRepositoryUrl(displayVersion.value)
+const { repositoryUrl } = useRepositoryUrl(displayVersion)
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 const compactNumberFormatter = useCompactNumberFormatter()