From d48b2f8e195185b22615c7dc6e34769209dee863 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 4 Feb 2026 11:43:53 +0000
Subject: [PATCH 1/8] fix: wait page readiness for robots and og

---
 app/pages/package/[...package].vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 11be99087..7d3e2cc29 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -53,7 +53,7 @@ if (import.meta.server) {
   assertValidPackageName(packageName.value)
 }
 
-const { data: downloads } = usePackageDownloads(packageName, 'last-week')
+const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(packageName, 'last-week')
 
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
@@ -136,6 +136,7 @@ const {
   data: pkg,
   status,
   error,
+  refresh: refreshPkg,
 } = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
@@ -243,7 +244,15 @@ const repositoryUrl = computed(() => {
   return url
 })
 
-const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
+const {
+  meta: repoMeta,
+  repoRef,
+  stars,
+  starsLink,
+  forks,
+  forksLink,
+  refresh: refreshRepoMeta,
+} = useRepoMeta(repositoryUrl)
 
 const PROVIDER_ICONS: Record<string, string> = {
   github: 'i-carbon:logo-github',
@@ -446,12 +455,27 @@ onKeyStroke(
   },
 )
 
+// 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) {
+    await refreshPkg()
+    await Promise.all([refreshRepoMeta(), refreshDownloads()])
+  }
+}
+
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
   version: () => resolvedVersion.value ?? '',
   downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''),
   license: () => pkg.value?.license ?? '',
-  stars: () => stars.value ?? 0,
+  stars: () => repoMeta.value?.stars ?? 0,
   primaryColor: '#60a5fa',
 })
 </script>

From 6338a1ecf018fab0083da7b3b07652419695d374 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 4 Feb 2026 12:12:49 +0000
Subject: [PATCH 2/8] fix: add try-catch for server refresh wait

---
 app/pages/package/[...package].vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 5ac59fa15..1aec7b44b 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -465,8 +465,12 @@ if (import.meta.server) {
   const isCrawler = crawlerRegex.test(agent)
 
   if (isCrawler) {
-    await refreshPkg()
-    await Promise.all([refreshRepoMeta(), refreshDownloads()])
+    try {
+      await refreshPkg()
+      await Promise.all([refreshRepoMeta(), refreshDownloads()])
+    } catch (err) {
+      console.warn('[crawler-refresh] Failed to refresh data server-side:', err)
+    }
   }
 }
 

From 0f9b19d46ef7e749bd391ad046a17666c51f0e50 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 4 Feb 2026 13:11:22 +0000
Subject: [PATCH 3/8] fix: load and wait data in og-image-package instead of
 page level

---
 app/components/OgImage/Package.vue | 60 +++++++++++++++++++++++++-----
 app/pages/package/[...package].vue | 37 +++---------------
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/app/components/OgImage/Package.vue b/app/components/OgImage/Package.vue
index 5716ebc0d..dcf6fb05b 100644
--- a/app/components/OgImage/Package.vue
+++ b/app/components/OgImage/Package.vue
@@ -1,23 +1,53 @@
 <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', {
@@ -25,6 +55,16 @@ const formattedStars = computed(() =>
     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">
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 1aec7b44b..390b71019 100644
--- a/app/pages/package/[...package].vue
+++ b/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>

From 80b59a4395b9dd852a0f1849a6c543de0d2b0662 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 4 Feb 2026 13:26:41 +0000
Subject: [PATCH 4/8] fix: fix references in og-image-package

---
 app/pages/package/[...package].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 390b71019..15498e881 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -23,7 +23,7 @@ definePageMeta({
 })
 
 defineOgImageComponent('Package', {
-  name: () => packageName,
+  name: () => packageName.value,
   version: () => requestedVersion.value ?? '',
   primaryColor: '#60a5fa',
 })
@@ -140,7 +140,7 @@ const {
   data: pkg,
   status,
   error,
-} = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
+} = usePackage(packageName, resolvedVersion.value ?? requestedVersion.value)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
 // Process package description

From 6f2a889b5fe89ecafdda9a0c7ff8b5eb55169084 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 4 Feb 2026 13:29:48 +0000
Subject: [PATCH 5/8] fix: fix version reference in og-image-package

---
 app/components/OgImage/Package.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/OgImage/Package.vue b/app/components/OgImage/Package.vue
index dcf6fb05b..7ea69b1ce 100644
--- a/app/components/OgImage/Package.vue
+++ b/app/components/OgImage/Package.vue
@@ -33,7 +33,7 @@ if (
 }
 
 const { data: downloads, refresh: refreshDownloads } = usePackageDownloads(name, 'last-week')
-const { data: pkg, refresh: refreshPkg } = usePackage(name, resolvedVersion.value ?? version)
+const { data: pkg, refresh: refreshPkg } = usePackage(name, resolvedVersion.value ?? version.value)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
 const repositoryUrl = computed(() => {

From e7665e00b73bcfc516a47fe792370a7d5286a38f Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Feb 2026 13:37:21 +0000
Subject: [PATCH 6/8] chore: fix types

---
 app/components/OgImage/Package.d.vue.ts |  3 +++
 app/components/OgImage/Package.vue      |  1 -
 app/pages/package/[...package].vue      | 10 +---------
 3 files changed, 4 insertions(+), 10 deletions(-)
 create mode 100644 app/components/OgImage/Package.d.vue.ts

diff --git a/app/components/OgImage/Package.d.vue.ts b/app/components/OgImage/Package.d.vue.ts
new file mode 100644
index 000000000..901d78c94
--- /dev/null
+++ b/app/components/OgImage/Package.d.vue.ts
@@ -0,0 +1,3 @@
+const _default: any
+
+export default _default
diff --git a/app/components/OgImage/Package.vue b/app/components/OgImage/Package.vue
index 7ea69b1ce..0806c291d 100644
--- a/app/components/OgImage/Package.vue
+++ b/app/components/OgImage/Package.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
 import { joinURL } from 'ufo'
 
 const props = withDefaults(
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 15498e881..e21908707 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -247,15 +247,7 @@ const repositoryUrl = computed(() => {
   return url
 })
 
-const {
-  meta: repoMeta,
-  repoRef,
-  stars,
-  starsLink,
-  forks,
-  forksLink,
-  refresh: refreshRepoMeta,
-} = useRepoMeta(repositoryUrl)
+const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
 const PROVIDER_ICONS: Record<string, string> = {
   github: 'i-carbon:logo-github',

From bd6c256b97bfe28b4e8fa71c0863f52ae76a9d35 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Feb 2026 13:48:52 +0000
Subject: [PATCH 7/8] fix: syntax

---
 app/components/OgImage/Package.d.vue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/OgImage/Package.d.vue.ts b/app/components/OgImage/Package.d.vue.ts
index 901d78c94..9a9d8297b 100644
--- a/app/components/OgImage/Package.d.vue.ts
+++ b/app/components/OgImage/Package.d.vue.ts
@@ -1,3 +1,3 @@
-const _default: any
+declare const _default: any
 
 export default _default

From e617bbf5d4d39606102a8fda8d339a43955e9298 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Feb 2026 14:31:34 +0000
Subject: [PATCH 8/8] chore: ignore component declarations

---
 knip.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/knip.ts b/knip.ts
index 3968b3c52..493fc3154 100644
--- a/knip.ts
+++ b/knip.ts
@@ -8,6 +8,7 @@ const config: KnipConfig = {
         'app/error.vue!',
         'app/pages/**/*.vue!',
         'app/components/**/*.vue!',
+        'app/components/**/*.d.vue.ts!',
         'app/composables/**/*.ts!',
         'app/middleware/**/*.ts!',
         'app/plugins/**/*.ts!',