Skip to content

fix: finish getting star metadata when rendering og images #933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 9 commits into from
Feb 4, 2026
+61 −23
Merged

fix: finish getting star metadata when rendering og images #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d48b2f8
fix: wait page readiness for robots and og
alexdln Feb 4, 2026
e3fe852
Merge branch 'main' into fix/stars-in-og-images
alexdln Feb 4, 2026
6338a1e
fix: add try-catch for server refresh wait
alexdln Feb 4, 2026
0f9b19d
fix: load and wait data in og-image-package instead of page level
alexdln Feb 4, 2026
80b59a4
fix: fix references in og-image-package
alexdln Feb 4, 2026
6f2a889
fix: fix version reference in og-image-package
alexdln Feb 4, 2026
e7665e0
chore: fix types
danielroe Feb 4, 2026
bd6c256
fix: syntax
danielroe Feb 4, 2026
e617bbf
chore: ignore component declarations
danielroe Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/components/OgImage/Package.d.vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
declare const _default: any

export default _default
61 changes: 50 additions & 11 deletions app/components/OgImage/Package.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,69 @@
<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.value)
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>
Expand Down Expand Up @@ -60,7 +99,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>

Expand All @@ -77,10 +116,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"
Expand All @@ -99,7 +138,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">
Expand Down
19 changes: 7 additions & 12 deletions app/pages/package/[...package].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ definePageMeta({
alias: ['/:package(.*)*'],
})

defineOgImageComponent('Package', {
name: () => packageName.value,
version: () => requestedVersion.value ?? '',
primaryColor: '#60a5fa',
})

const router = useRouter()

const header = useTemplateRef('header')
Expand Down Expand Up @@ -53,8 +59,6 @@ if (import.meta.server) {
assertValidPackageName(packageName.value)
}

const { data: downloads } = usePackageDownloads(packageName, 'last-week')

// Fetch README for specific version if requested, otherwise latest
const { data: readmeData } = useLazyFetch<ReadmeResponse>(
() => {
Expand Down Expand Up @@ -136,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
Expand Down Expand Up @@ -445,15 +449,6 @@ onKeyStroke(
router.push({ path: '/compare', query: { packages: pkg.value.name } })
},
)

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,
primaryColor: '#60a5fa',
})
</script>

<template>
Expand Down
1 change: 1 addition & 0 deletions knip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!',
Expand Down
Loading