feat: add vanity number for user & org (#487)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: jycouet

app/pages/@[org].vue

@@ -97,6 +97,11 @@ watch([() => filters.value.text, sortOption], ([filter, sort]) => {
 
 const filteredCount = computed(() => sortedPackages.value.length)
 
+// Total weekly downloads across displayed packages (updates with filter)
+const totalWeeklyDownloads = computed(() =>
+  sortedPackages.value.reduce((sum, pkg) => sum + (pkg.downloads?.weekly ?? 0), 0),
+)
+
 // Reset state when org changes
 watch(orgName, () => {
   clearAllFilters()
@@ -156,19 +161,30 @@ defineOgImageComponent('Default', {
           </p>
         </div>
 
-        <!-- Link to npmjs.com org page -->
-        <nav aria-label="External links" class="ms-auto">
-          <a
-            :href="`https://www.npmjs.com/org/${orgName}`"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            :title="$t('common.view_on_npm')"
+        <!-- Link to npmjs.com org page + vanity downloads -->
+        <div class="ms-auto text-end">
+          <nav aria-label="External links">
+            <a
+              :href="`https://www.npmjs.com/org/${orgName}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              :title="$t('common.view_on_npm')"
+            >
+              <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+              npm
+            </a>
+          </nav>
+          <p
+            class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
+            :title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
           >
-            <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
-            npm
-          </a>
-        </nav>
+            <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+            <span class="font-mono"
+              >{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
+            >
+          </p>
+        </div>
       </div>
     </header>
 

app/pages/~[username]/index.vue

@@ -129,6 +129,11 @@ const filteredAndSortedPackages = computed(() => {
 
 const filteredCount = computed(() => filteredAndSortedPackages.value.length)
 
+// Total weekly downloads across displayed packages (updates with filter)
+const totalWeeklyDownloads = computed(() =>
+  filteredAndSortedPackages.value.reduce((sum, pkg) => sum + (pkg.downloads?.weekly ?? 0), 0),
+)
+
 // Check if there are potentially more results
 const hasMore = computed(() => {
   if (!results.value) return false
@@ -191,19 +196,30 @@ defineOgImageComponent('Default', {
           </p>
         </div>
 
-        <!-- Link to npmjs.com profile -->
-        <nav aria-label="External links" class="ms-auto">
-          <a
-            :href="`https://www.npmjs.com/~${username}`"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-            :title="$t('common.view_on_npm')"
+        <!-- Link to npmjs.com profile + vanity downloads -->
+        <div class="ms-auto text-end">
+          <nav aria-label="External links">
+            <a
+              :href="`https://www.npmjs.com/~${username}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              :title="$t('common.view_on_npm')"
+            >
+              <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+              npm
+            </a>
+          </nav>
+          <p
+            class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
+            :title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
           >
-            <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
-            npm
-          </a>
-        </nav>
+            <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+            <span class="font-mono"
+              >{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
+            >
+          </p>
+        </div>
       </div>
     </header>
 

i18n/locales/en.json

@@ -98,6 +98,7 @@
     "go_back_home": "Go back home",
     "view_on_npm": "view on npm",
     "per_week": "/ week",
+    "vanity_downloads_hint": "Vanity number: no packages displayed | Vanity number: for the displayed package | Vanity number: Sum of {count} displayed packages",
     "sort": {
       "name": "name",
       "role": "role",

i18n/locales/fr-FR.json

@@ -95,6 +95,7 @@
     "go_back_home": "Retour à l'accueil",
     "view_on_npm": "voir sur npm",
     "per_week": "/ semaine",
+    "vanity_downloads_hint": "Métrique de vanité : aucun paquet affiché | Métrique de vanité : pour le paquet affiché | Métrique de vanité : somme des {count} paquets affichés",
     "sort": {
       "name": "nom",
       "role": "rôle",

lunaria/files/en-US.json

@@ -98,6 +98,7 @@
     "go_back_home": "Go back home",
     "view_on_npm": "view on npm",
     "per_week": "/ week",
+    "vanity_downloads_hint": "Vanity number: no packages displayed | Vanity number: for the displayed package | Vanity number: Sum of {count} displayed packages",
     "sort": {
       "name": "name",
       "role": "role",

lunaria/files/fr-FR.json

@@ -95,6 +95,7 @@
     "go_back_home": "Retour à l'accueil",
     "view_on_npm": "voir sur npm",
     "per_week": "/ semaine",
+    "vanity_downloads_hint": "Métrique de vanité : aucun paquet affiché | Métrique de vanité : pour le paquet affiché | Métrique de vanité : somme des {count} paquets affichés",
     "sort": {
       "name": "nom",
       "role": "rôle",