feat(deps): use nuxt-og-image v6

danielroe · danielroe · commit 7e6dbade7f31 · 2026-02-06T23:06:50.000Z
diff --git a/app/components/OgImage/Default.takumi.vue b/app/components/OgImage/Default.takumi.vue
diff --git a/app/components/OgImage/Package.d.vue.ts b/app/components/OgImage/Package.d.vue.ts
diff --git a/app/components/OgImage/Package.takumi.vue b/app/components/OgImage/Package.takumi.vue
diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -18,7 +18,7 @@ useSeoMeta({
   twitterDescription: () => $t('about.meta_description'),
 })
 
-defineOgImageComponent('Default', {
+defineOgImage('Default', {
   primaryColor: '#60a5fa',
   title: 'About npmx',
   description: 'a fast, modern browser for the **npm registry**',
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -32,7 +32,7 @@ useSeoMeta({
   twitterDescription: () => $t('seo.home.description'),
 })
 
-defineOgImageComponent('Default', {
+defineOgImage('Default', {
   primaryColor: '#60a5fa',
   title: 'npmx',
   description: 'a fast, modern browser for the **npm registry**',
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
@@ -144,9 +144,9 @@ useSeoMeta({
   twitterDescription: () => `npm packages published by the ${orgName.value} organization`,
 })
 
-defineOgImageComponent('Default', {
-  title: () => `@${orgName.value}`,
-  description: () => (packageCount.value ? `${packageCount.value} packages` : 'npm organization'),
+defineOgImage('Default', {
+  title: `@${orgName.value}`,
+  description: packageCount.value ? `${packageCount.value} packages` : 'npm organization',
   primaryColor: '#60a5fa',
 })
 </script>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
@@ -297,9 +297,9 @@ useSeoMeta({
   twitterDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
 })
 
-defineOgImageComponent('Default', {
-  title: () => `${pkg.value?.name ?? 'Package'} - Code`,
-  description: () => pkg.value?.license ?? '',
+defineOgImage('Default', {
+  title: `${pkg.value?.name ?? 'Package'} - Code`,
+  description: pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })
 </script>
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -107,9 +107,9 @@ useSeoMeta({
   twitterDescription: () => pkg.value?.license ?? '',
 })
 
-defineOgImageComponent('Default', {
-  title: () => `${pkg.value?.name ?? 'Package'} - Docs`,
-  description: () => pkg.value?.license ?? '',
+defineOgImage('Default', {
+  title: `${pkg.value?.name ?? 'Package'} - Docs`,
+  description: pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })
 
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
@@ -18,12 +18,6 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 
-defineOgImageComponent('Package', {
-  name: () => packageName.value,
-  version: () => requestedVersion.value ?? '',
-  primaryColor: '#60a5fa',
-})
-
 const router = useRouter()
 
 const header = useTemplateRef('header')
@@ -48,6 +42,13 @@ onMounted(() => {
 })
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
+
+defineOgImage('Package', {
+  name: packageName.value,
+  version: requestedVersion.value || '',
+  primaryColor: '#60a5fa',
+})
+
 const selectedPM = useSelectedPackageManager()
 const activePmId = computed(() => selectedPM.value ?? 'npm')
 
diff --git a/app/pages/privacy.vue b/app/pages/privacy.vue
@@ -8,9 +8,9 @@ useSeoMeta({
   description: () => $t('privacy_policy.welcome', { app: 'npmx' }),
 })
 
-defineOgImageComponent('Default', {
-  title: () => $t('privacy_policy.title'),
-  description: () => $t('privacy_policy.welcome', { app: 'npmx' }),
+defineOgImage('Default', {
+  title: $t('privacy_policy.title'),
+  description: $t('privacy_policy.welcome', { app: 'npmx' }),
 })
 
 const router = useRouter()
diff --git a/app/pages/search.vue b/app/pages/search.vue
@@ -650,13 +650,13 @@ useSeoMeta({
       : $t('search.meta_description_packages'),
 })
 
-defineOgImageComponent('Default', {
-  title: () =>
-    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
-  description: () =>
-    query.value
-      ? $t('search.meta_description', { search: query.value })
-      : $t('search.meta_description_packages'),
+defineOgImage('Default', {
+  title: query.value
+    ? `${$t('search.title_search', { search: query.value })} - npmx`
+    : `${$t('search.title_packages')} - npmx`,
+  description: query.value
+    ? $t('search.meta_description', { search: query.value })
+    : $t('search.meta_description_packages'),
   primaryColor: '#60a5fa',
 })
 </script>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
@@ -27,9 +27,9 @@ useSeoMeta({
   twitterDescription: () => $t('settings.meta_description'),
 })
 
-defineOgImageComponent('Default', {
-  title: () => $t('settings.title'),
-  description: () => $t('settings.tagline'),
+defineOgImage('Default', {
+  title: $t('settings.title'),
+  description: $t('settings.tagline'),
   primaryColor: '#60a5fa',
 })
 
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
@@ -170,9 +170,9 @@ useSeoMeta({
   twitterDescription: () => `npm packages maintained by ${username.value}`,
 })
 
-defineOgImageComponent('Default', {
-  title: () => `~${username.value}`,
-  description: () => (results.value ? `${results.value.total} packages` : 'npm user profile'),
+defineOgImage('Default', {
+  title: `~${username.value}`,
+  description: results.value ? `${results.value.total} packages` : 'npm user profile',
   primaryColor: '#60a5fa',
 })
 </script>
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
@@ -106,15 +106,13 @@ useSeoMeta({
   twitterDescription: () => `npm organizations for ${username.value}`,
 })
 
-defineOgImageComponent('Default', {
-  title: () => `@${username.value}`,
-  description: () => {
-    if (isLoading.value) return 'npm organizations'
-    if (orgs.value.length === 0) return 'No organizations found'
-
-    const count = orgs.value.length
-    return `${count} ${count === 1 ? 'organization' : 'organizations'}`
-  },
+defineOgImage('Default', {
+  title: `@${username.value}`,
+  description: isLoading.value
+    ? 'npm organizations'
+    : orgs.value.length === 0
+      ? 'No organizations found'
+      : `${orgs.value.length} ${orgs.value.length === 1 ? 'organization' : 'organizations'}`,
   primaryColor: '#60a5fa',
 })
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -94,7 +94,7 @@ export default defineNuxtConfig({
     '/api/registry/files/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/:pkg/.well-known/skills/**': { isr: 3600 },
     '/:scope/:pkg/.well-known/skills/**': { isr: 3600 },
-    '/__og-image__/**': { isr: getISRConfig(60) },
+    '/_og/**': { isr: getISRConfig(60) },
     '/_avatar/**': { isr: 3600, proxy: 'https://www.gravatar.com/avatar/**' },
     '/opensearch.xml': { isr: true },
     '/oauth-client-metadata.json': { prerender: true },
@@ -204,6 +204,7 @@ export default defineNuxtConfig({
   ogImage: {
     defaults: {
       component: 'Default',
+      renderer: 'takumi',
     },
   },
 
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "npmx-connector": "pnpm --filter npmx-connector dev",
     "generate-pwa-icons": "pwa-assets-generator",
     "preview": "nuxt preview",
-    "postinstall": "pnpm rebuild @resvg/resvg-js && pnpm generate:lexicons && nuxt prepare && simple-git-hooks",
+    "postinstall": "pnpm generate:lexicons && nuxt prepare && simple-git-hooks",
     "generate:fixtures": "node scripts/generate-fixtures.ts",
     "generate:lexicons": "lex build --lexicons lexicons --out shared/types/lexicons --clear",
     "test": "vite test",
@@ -64,6 +64,7 @@
     "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "3.21.0",
     "@shikijs/themes": "3.21.0",
+    "@takumi-rs/core": "0.67.0",
     "@unocss/nuxt": "66.6.0",
     "@unocss/preset-wind4": "66.6.0",
     "@upstash/redis": "1.36.1",
@@ -81,7 +82,7 @@
     "marked": "17.0.1",
     "module-replacements": "2.11.0",
     "nuxt": "4.3.0",
-    "nuxt-og-image": "5.1.13",
+    "nuxt-og-image": "6.0.0-beta.15",
     "ofetch": "1.5.1",
     "perfect-debounce": "2.1.0",
     "sanitize-html": "2.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
