Add stars to OG images for package pages

Author: whitep4nth3r

app/components/OgImage/Package.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-withDefaults(
+import { computed, toRefs } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     name: string
     version: string
+    stars: number
     downloads?: string
     license?: string
     primaryColor?: string
@@ -13,6 +16,15 @@ withDefaults(
     primaryColor: '#60a5fa',
   },
 )
+
+const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
+
+const formattedStars = computed(() =>
+  Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(stars.value),
+)
 </script>
 
 <template>
@@ -88,6 +100,18 @@ withDefaults(
           </span>
         </span>
         <span v-if="license"> • {{ license }}</span>
+        <span class="flex items-center gap-2">
+          <span>•</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px">
+            <path
+              fill="currentColor"
+              d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1zM16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z"
+            />
+          </svg>
+          <span>
+            {{ formattedStars }}
+          </span>
+        </span>
       </div>
     </div>
 

app/pages/[...package].vue

@@ -364,6 +364,7 @@ defineOgImageComponent('Package', {
   version: () => displayVersion.value?.version ?? '',
   downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''),
   license: () => pkg.value?.license ?? '',
+  stars: () => stars.value ?? 0,
   primaryColor: '#60a5fa',
 })