forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
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
+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
+1
app/pages/[...package].vue