fix: load and wait data in og-image-package instead of page level

Author: alexdln

app/components/OgImage/Package.vue

@@ -1,30 +1,70 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue'
+import { joinURL } from 'ufo'
 
 const props = withDefaults(
   defineProps<{
     name: string
     version: string
-    stars: number
-    downloads?: string
-    license?: string
     primaryColor?: string
   }>(),
   {
-    downloads: '',
-    license: '',
     primaryColor: '#60a5fa',
   },
 )
 
-const { name, version, stars, downloads, license, primaryColor } = toRefs(props)
+const { name, version, primaryColor } = toRefs(props)
+
+const {
+  data: resolvedVersion,
+  status: versionStatus,
+  error: versionError,
+} = await useResolvedVersion(name, version)
+
+if (
+  versionStatus.value === 'error' &&
+  versionError.value?.statusCode &&
+  versionError.value.statusCode >= 400 &&
+  versionError.value.statusCode < 500
+) {
+  throw createError({
+    statusCode: 404,
+  })
+}
+
+const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(name, 'last-week')
+const { data: pkg, refresh: refreshPkg } = usePackage(name, resolvedVersion.value ?? version)
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+
+const repositoryUrl = computed(() => {
+  const repo = displayVersion.value?.repository
+  if (!repo?.url) return null
+  let url = normalizeGitUrl(repo.url)
+  // append `repository.directory` for monorepo packages
+  if (repo.directory) {
+    url = joinURL(`${url}/tree/HEAD`, repo.directory)
+  }
+  return url
+})
+
+const { stars, refresh: refreshRepoMeta } = useRepoMeta(repositoryUrl)
 
 const formattedStars = computed(() =>
   Intl.NumberFormat('en', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(stars.value),
 )
+
+try {
+  await refreshPkg()
+  await Promise.all([refreshRepoMeta(), refreshDownloads()])
+} catch (err) {
+  console.warn('[og-image-package] Failed to load data server-side:', err)
+  throw createError({
+    statusCode: 404,
+  })
+}
 </script>
 
 <template>
@@ -60,7 +100,7 @@ const formattedStars = computed(() =>
           class="text-8xl font-bold tracking-tighter"
           style="font-family: 'Geist Sans', sans-serif"
         >
-          <span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ name }}
+          <span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ pkg?.name }}
         </h1>
       </div>
 
@@ -77,10 +117,10 @@ const formattedStars = computed(() =>
             boxShadow: `0 0 20px ${primaryColor}25`,
           }"
         >
-          {{ version }}
+          {{ resolvedVersion }}
         </span>
         <span v-if="downloads">
-          <span>• {{ downloads }} </span>
+          <span>• {{ $n(downloads.downloads) }} </span>
           <span class="flex items-center gap-0">
             <svg
               width="30"
@@ -99,7 +139,7 @@ const formattedStars = computed(() =>
             <span>/wk</span>
           </span>
         </span>
-        <span v-if="license"> • {{ license }}</span>
+        <span v-if="pkg?.license"> • {{ pkg.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">

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

@@ -22,6 +22,12 @@ definePageMeta({
   alias: ['/:package(.*)*'],
 })
 
+defineOgImageComponent('Package', {
+  name: () => packageName,
+  version: () => requestedVersion.value ?? '',
+  primaryColor: '#60a5fa',
+})
+
 const router = useRouter()
 
 const header = useTemplateRef('header')
@@ -53,8 +59,6 @@ if (import.meta.server) {
   assertValidPackageName(packageName.value)
 }
 
-const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(packageName, 'last-week')
-
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
@@ -136,7 +140,6 @@ const {
   data: pkg,
   status,
   error,
-  refresh: refreshPkg,
 } = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
@@ -454,34 +457,6 @@ onKeyStroke(
     router.push({ path: '/compare', query: { packages: pkg.value.name } })
   },
 )
-
-// Wait for all critical data to be received on the server side for correct OG rendering and better results for robots
-if (import.meta.server) {
-  const event = useRequestEvent()
-  const agent = event?.node.req.headers['user-agent']?.toLowerCase() || ''
-  const crawlerRegex =
-    /(facebookexternalhit|bluesky|twitterbot|linkedinbot|discordbot|slackbot|telegrambot|whatsapp|vkshare|skypeuripreview|googlebot|bingbot|yandexbot|baiduspider|duckduckbot|crawler|spider|bot|preview)/i
-
-  const isCrawler = crawlerRegex.test(agent)
-
-  if (isCrawler) {
-    try {
-      await refreshPkg()
-      await Promise.all([refreshRepoMeta(), refreshDownloads()])
-    } catch (err) {
-      console.warn('[crawler-refresh] Failed to refresh data server-side:', err)
-    }
-  }
-}
-
-defineOgImageComponent('Package', {
-  name: () => pkg.value?.name ?? 'Package',
-  version: () => resolvedVersion.value ?? '',
-  downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''),
-  license: () => pkg.value?.license ?? '',
-  stars: () => repoMeta.value?.stars ?? 0,
-  primaryColor: '#60a5fa',
-})
 </script>
 
 <template>