forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: finish getting star metadata when rendering og images (#933)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Alex Savelyev
Daniel Roe
and committed by
GitHub
c7ba252c
58da157b
+61
-23
+3
app/components/OgImage/Package.d.vue.ts
+3
app/components/OgImage/Package.d.vue.ts
+50
-11
app/components/OgImage/Package.vue
+50
-11
app/components/OgImage/Package.vue
···
1
1
<script setup lang="ts">
2
-
import { computed, toRefs } from 'vue'
2
+
import { joinURL } from 'ufo'
3
3
4
4
const props = withDefaults(
5
5
defineProps<{
6
6
name: string
7
7
version: string
8
-
stars: number
9
-
downloads?: string
10
-
license?: string
11
8
primaryColor?: string
12
9
}>(),
13
10
{
14
-
downloads: '',
15
-
license: '',
16
11
primaryColor: '#60a5fa',
17
12
},
18
13
)
19
14
20
-
const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
15
+
const { name, version, primaryColor } = toRefs(props)
16
+
17
+
const {
18
+
data: resolvedVersion,
19
+
status: versionStatus,
20
+
error: versionError,
21
+
} = await useResolvedVersion(name, version)
22
+
23
+
if (
24
+
versionStatus.value === 'error' &&
25
+
versionError.value?.statusCode &&
26
+
versionError.value.statusCode >= 400 &&
27
+
versionError.value.statusCode < 500
28
+
) {
29
+
throw createError({
30
+
statusCode: 404,
31
+
})
32
+
}
33
+
34
+
const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(name, 'last-week')
35
+
const { data: pkg, refresh: refreshPkg } = usePackage(name, resolvedVersion.value ?? version.value)
36
+
const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
37
+
38
+
const repositoryUrl = computed(() => {
39
+
const repo = displayVersion.value?.repository
40
+
if (!repo?.url) return null
41
+
let url = normalizeGitUrl(repo.url)
42
+
// append `repository.directory` for monorepo packages
43
+
if (repo.directory) {
44
+
url = joinURL(`${url}/tree/HEAD`, repo.directory)
45
+
}
46
+
return url
47
+
})
48
+
49
+
const { stars, refresh: refreshRepoMeta } = useRepoMeta(repositoryUrl)
21
50
22
51
const formattedStars = computed(() =>
23
52
Intl.NumberFormat('en', {
···
25
54
maximumFractionDigits: 1,
26
55
}).format(stars.value),
27
56
)
57
+
58
+
try {
59
+
await refreshPkg()
60
+
await Promise.all([refreshRepoMeta(), refreshDownloads()])
61
+
} catch (err) {
62
+
console.warn('[og-image-package] Failed to load data server-side:', err)
63
+
throw createError({
64
+
statusCode: 404,
65
+
})
66
+
}
28
67
</script>
29
68
30
69
<template>
···
60
99
class="text-8xl font-bold tracking-tighter"
61
100
style="font-family: 'Geist Sans', sans-serif"
62
101
>
63
-
<span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ name }}
102
+
<span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ pkg?.name }}
64
103
</h1>
65
104
</div>
66
105
···
77
116
boxShadow: `0 0 20px ${primaryColor}25`,
78
117
}"
79
118
>
80
-
{{ version }}
119
+
{{ resolvedVersion }}
81
120
</span>
82
121
<span v-if="downloads">
83
-
<span>• {{ downloads }} </span>
122
+
<span>• {{ $n(downloads.downloads) }} </span>
84
123
<span class="flex items-center gap-0">
85
124
<svg
86
125
width="30"
···
99
138
<span>/wk</span>
100
139
</span>
101
140
</span>
102
-
<span v-if="license"> • {{ license }}</span>
141
+
<span v-if="pkg?.license"> • {{ pkg.license }}</span>
103
142
<span class="flex items-center gap-2">
104
143
<span>•</span>
105
144
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px">
+7
-12
app/pages/package/[...package].vue
+7
-12
app/pages/package/[...package].vue
···
23
23
alias: ['/:package(.*)*'],
24
24
})
25
25
26
+
defineOgImageComponent('Package', {
27
+
name: () => packageName.value,
28
+
version: () => requestedVersion.value ?? '',
29
+
primaryColor: '#60a5fa',
30
+
})
31
+
26
32
const router = useRouter()
27
33
28
34
const header = useTemplateRef('header')
···
53
59
if (import.meta.server) {
54
60
assertValidPackageName(packageName.value)
55
61
}
56
-
57
-
const { data: downloads } = usePackageDownloads(packageName, 'last-week')
58
62
59
63
// Fetch README for specific version if requested, otherwise latest
60
64
const { data: readmeData } = useLazyFetch<ReadmeResponse>(
···
137
141
data: pkg,
138
142
status,
139
143
error,
140
-
} = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
144
+
} = usePackage(packageName, resolvedVersion.value ?? requestedVersion.value)
141
145
const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
142
146
143
147
// Process package description
···
488
492
router.push({ path: '/compare', query: { packages: pkg.value.name } })
489
493
},
490
494
)
491
-
492
-
defineOgImageComponent('Package', {
493
-
name: () => pkg.value?.name ?? 'Package',
494
-
version: () => resolvedVersion.value ?? '',
495
-
downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''),
496
-
license: () => pkg.value?.license ?? '',
497
-
stars: () => stars.value ?? 0,
498
-
primaryColor: '#60a5fa',
499
-
})
500
495
</script>
501
496
502
497
<template>