[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.

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
··· 1 + declare const _default: any 2 + 3 + export default _default
+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
··· 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>
+1
knip.ts
··· 8 8 'app/error.vue!', 9 9 'app/pages/**/*.vue!', 10 10 'app/components/**/*.vue!', 11 + 'app/components/**/*.d.vue.ts!', 11 12 'app/composables/**/*.ts!', 12 13 'app/middleware/**/*.ts!', 13 14 'app/plugins/**/*.ts!',