feat: add community adoption distribution link in Versions.vue

app/components/Package/Versions.vue

@@ -306,6 +306,18 @@ function getTagVersions(tag: string): VersionDisplay[] {
     :title="$t('package.versions.title')"
     id="versions"
   >
+    <template #actions>
+      <a
+        :href="`https://majors.nullvoxpopuli.com/q?packages=${props.packageName}`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+        :title="$t('package.downloads.community_distribution')"
+      >
+        <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />
+        <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
+      </a>
+    </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">

i18n/locales/en.json

@@ -264,6 +264,7 @@
       "date_range": "{start} to {end}",
       "date_range_multiline": "{start}\nto {end}",
       "analyze": "Analyze downloads",
+      "community_distribution": "View community adoption distribution",
       "modal_title": "Downloads",
       "granularity": "Granularity",
       "granularity_daily": "Daily",

lunaria/files/en-US.json

@@ -264,6 +264,7 @@
       "date_range": "{start} to {end}",
       "date_range_multiline": "{start}\nto {end}",
       "analyze": "Analyze downloads",
+      "community_distribution": "View community adoption distribution",
       "modal_title": "Downloads",
       "granularity": "Granularity",
       "granularity_daily": "Daily",

test/nuxt/components/PackageVersions.spec.ts

@@ -73,10 +73,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with #)
+      // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('2.0.0')
     })
@@ -93,10 +93,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with #)
+      // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('1.0.0')
     })
@@ -187,10 +187,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with #)
+      // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       const versions = versionLinks.map(l => l.text())
       // Should be sorted by version descending
       expect(versions[0]).toBe('2.0.0')
@@ -210,10 +210,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with #)
+      // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.classes()).toContain('text-red-400')
     })
@@ -230,10 +230,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Find version links (exclude anchor links that start with #)
+      // Find version links (exclude anchor links that start with # and external links)
       const versionLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.attributes('title')).toContain('deprecated')
     })
@@ -562,10 +562,10 @@ describe('PackageVersions', () => {
         },
       })
 
-      // Count visible version links (excluding anchor links that start with #)
+      // Count visible version links (excluding anchor links that start with # and external links)
       const visibleLinks = component
         .findAll('a')
-        .filter(a => !a.attributes('href')?.startsWith('#'))
+        .filter(a => !a.attributes('href')?.startsWith('#') && a.attributes('target') !== '_blank')
       // Should have max 10 visible links in the main section
       expect(visibleLinks.length).toBeLessThanOrEqual(10)
     })