[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add stars to open graph images for package pages (#545)

authored by

Salma Alam-Naylor and committed by
GitHub
5cc9f20a 7bd3c5db

+26 -1
+25 -1
app/components/OgImage/Package.vue
··· 1 1 <script setup lang="ts"> 2 - withDefaults( 2 + import { computed, toRefs } from 'vue' 3 + 4 + const props = withDefaults( 3 5 defineProps<{ 4 6 name: string 5 7 version: string 8 + stars: number 6 9 downloads?: string 7 10 license?: string 8 11 primaryColor?: string ··· 12 15 license: '', 13 16 primaryColor: '#60a5fa', 14 17 }, 18 + ) 19 + 20 + const { name, version, stars, downloads, license, primaryColor } = toRefs(props) 21 + 22 + const formattedStars = computed(() => 23 + Intl.NumberFormat('en', { 24 + notation: 'compact', 25 + maximumFractionDigits: 1, 26 + }).format(stars.value), 15 27 ) 16 28 </script> 17 29 ··· 88 100 </span> 89 101 </span> 90 102 <span v-if="license"> • {{ license }}</span> 103 + <span class="flex items-center gap-2"> 104 + <span>•</span> 105 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"> 106 + <path 107 + fill="currentColor" 108 + 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" 109 + /> 110 + </svg> 111 + <span> 112 + {{ formattedStars }} 113 + </span> 114 + </span> 91 115 </div> 92 116 </div> 93 117
+1
app/pages/[...package].vue
··· 350 350 version: () => displayVersion.value?.version ?? '', 351 351 downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''), 352 352 license: () => pkg.value?.license ?? '', 353 + stars: () => stars.value ?? 0, 353 354 primaryColor: '#60a5fa', 354 355 }) 355 356