fix: use translated description for empty compare OG image

Pass i18n-translated empty description from the page as a prop
since OG image components don't have access to $t.

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

Author: Adebesin-Cell

app/components/OgImage/Compare.vue

@@ -5,10 +5,12 @@ import { encodePackageName } from '#shared/utils/npm'
 const props = withDefaults(
   defineProps<{
     packages?: string | string[]
+    emptyDescription?: string
     primaryColor?: string
   }>(),
   {
     packages: () => [],
+    emptyDescription: 'Compare npm packages side-by-side',
     primaryColor: '#60a5fa',
   },
 )
@@ -125,21 +127,10 @@ function barPct(downloads: number): string {
       <!-- Empty state -->
       <div
         v-if="stats.length === 0"
-        class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]"
+        class="text-4xl text-[#a3a3a3]"
         style="font-family: 'Geist', sans-serif"
       >
-        <span>compare npm packages</span>
-        <span
-          class="px-3 py-1 rounded-lg border font-normal"
-          :style="{
-            color: primaryColor,
-            backgroundColor: primaryColor + '10',
-            borderColor: primaryColor + '30',
-            boxShadow: `0 0 20px ${primaryColor}25`,
-          }"
-        >
-          side-by-side
-        </span>
+        {{ emptyDescription }}
       </div>
 
       <!-- Bar chart rows -->

app/pages/compare.vue

@@ -137,6 +137,7 @@ function exportComparisonDataAsMarkdown() {
 
 defineOgImageComponent('Compare', {
   packages: () => packages.value,
+  emptyDescription: () => $t('compare.packages.meta_description_empty'),
 })
 
 useSeoMeta({