feat: show live download bars and versions in compare OG image

Fetches real weekly downloads and latest version for each package,
renders a horizontal bar chart with gradient bars sized relative to
the highest-downloaded package.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

app/components/OgImage/Compare.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { encodePackageName } from '#shared/utils/npm'
 
 const props = withDefaults(
   defineProps<{
@@ -25,23 +26,79 @@ const displayPackages = computed(() => {
       : raw
   return list.slice(0, 4)
 })
+
+interface PkgStats {
+  name: string
+  downloads: number
+  version: string
+  color: string
+}
+
+const stats = ref<PkgStats[]>([])
+
+try {
+  const results = await Promise.all(
+    displayPackages.value.map(async (name, index) => {
+      const encoded = encodePackageName(name)
+      const [dlData, pkgData] = await Promise.all([
+        $fetch<{ downloads: number }>(
+          `https://api.npmjs.org/downloads/point/last-week/${encoded}`,
+        ).catch(() => null),
+        $fetch<{ 'dist-tags'?: { latest?: string } }>(
+          `https://registry.npmjs.org/${encoded}`,
+          { headers: { Accept: 'application/vnd.npm.install-v1+json' } },
+        ).catch(() => null),
+      ])
+      return {
+        name,
+        downloads: dlData?.downloads ?? 0,
+        version: pkgData?.['dist-tags']?.latest ?? '',
+        color: ACCENT_COLORS[index % ACCENT_COLORS.length]!,
+      }
+    }),
+  )
+  stats.value = results
+} catch {
+  stats.value = displayPackages.value.map((name, index) => ({
+    name,
+    downloads: 0,
+    version: '',
+    color: ACCENT_COLORS[index % ACCENT_COLORS.length]!,
+  }))
+}
+
+const maxDownloads = computed(() => Math.max(...stats.value.map(s => s.downloads), 1))
+
+function formatDownloads(n: number): string {
+  if (n === 0) return '—'
+  return Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(n)
+}
+
+// Bar width as percentage string (max 100%)
+function barPct(downloads: number): string {
+  const pct = (downloads / maxDownloads.value) * 100
+  return `${Math.max(pct, 5)}%`
+}
 </script>
 
 <template>
   <div
     class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden"
     style="font-family: 'Geist Mono', sans-serif"
   >
-    <div class="relative z-10 flex flex-col gap-6">
-      <!-- Icon + title row (same pattern as Default/Package) -->
+    <div class="relative z-10 flex flex-col gap-5">
+      <!-- Icon + title row -->
       <div class="flex items-start gap-4">
         <div
-          class="flex items-center justify-center w-16 h-16 p-3.5 rounded-xl shadow-lg bg-gradient-to-tr from-[#3b82f6]"
+          class="flex items-center justify-center w-14 h-14 p-3 rounded-xl shadow-lg bg-gradient-to-tr from-[#3b82f6]"
           :style="{ backgroundColor: primaryColor }"
         >
           <svg
-            width="36"
-            height="36"
+            width="32"
+            height="32"
             viewBox="0 0 24 24"
             fill="none"
             stroke="white"
@@ -56,35 +113,58 @@ const displayPackages = computed(() => {
           </svg>
         </div>
 
-        <h1 class="text-8xl font-bold">
+        <h1 class="text-7xl font-bold tracking-tight">
           <span
             class="opacity-80 tracking-[-0.1em]"
             :style="{ color: primaryColor }"
-            style="margin-left: -1rem; margin-right: 0.5rem"
-            >./</span
-          >compare
+            style="margin-right: 0.25rem"
+          >./</span>compare
         </h1>
       </div>
 
-      <!-- Package names as badges (same badge style as Default/Package) -->
-      <div
-        class="flex flex-wrap items-center gap-x-3 gap-y-3 text-4xl text-[#a3a3a3]"
-        style="font-family: 'Geist', sans-serif"
-      >
-        <template v-for="(pkg, index) in displayPackages" :key="pkg">
-          <span
-            class="px-3 py-1 rounded-lg border font-normal"
+      <!-- Bar chart rows -->
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="pkg in stats"
+          :key="pkg.name"
+          class="flex flex-col gap-1"
+        >
+          <!-- Label row: name + downloads + version -->
+          <div
+            class="flex items-center gap-3"
+            style="font-family: 'Geist', sans-serif"
+          >
+            <span
+              class="text-2xl font-semibold tracking-tight"
+              :style="{ color: pkg.color }"
+            >
+              {{ pkg.name }}
+            </span>
+            <span class="text-xl text-[#737373]">
+              {{ formatDownloads(pkg.downloads) }}/wk
+            </span>
+            <span
+              v-if="pkg.version"
+              class="text-lg px-2 py-0.5 rounded-md border"
+              :style="{
+                color: pkg.color,
+                backgroundColor: pkg.color + '10',
+                borderColor: pkg.color + '30',
+              }"
+            >
+              {{ pkg.version }}
+            </span>
+          </div>
+
+          <!-- Bar -->
+          <div
+            class="h-6 rounded-md"
             :style="{
-              color: ACCENT_COLORS[index % ACCENT_COLORS.length],
-              backgroundColor: ACCENT_COLORS[index % ACCENT_COLORS.length] + '10',
-              borderColor: ACCENT_COLORS[index % ACCENT_COLORS.length] + '30',
-              boxShadow: `0 0 20px ${ACCENT_COLORS[index % ACCENT_COLORS.length]}25`,
+              width: barPct(pkg.downloads),
+              background: `linear-gradient(90deg, ${pkg.color}50, ${pkg.color}20)`,
             }"
-          >
-            {{ pkg }}
-          </span>
-          <span v-if="index < displayPackages.length - 1"> vs </span>
-        </template>
+          />
+        </div>
       </div>
     </div>