fix: support reactive og image options & props (#361)

Author: harlan-zw

playground/pages/prebuilt-reactive.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { defineOgImage, ref } from '#imports'
+
+const name = ref('foo')
+
+defineOgImage({
+  url: () => `https://nitro.build/_og/guide/tasks.png?name=${name.value}&title=Tasks&description=Nitro+tasks+allow+on-off+operations+in+runtime.`,
+  width: 1200,
+  height: 630,
+  alt: 'Nitro UI',
+})
+
+name.value = 'bar'
+</script>
+
+<template>
+  <div>prebuilt</div>
+</template>

playground/pages/satori/reactive-props.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { defineOgImageComponent, ref } from '#imports'
+
+const title = ref('foo')
+defineOgImageComponent('NuxtSeo', {
+  title,
+})
+title.value = 'bar'
+</script>
+
+<template>
+  <div>
+    <div>
+      bad usage example
+    </div>
+  </div>
+</template>

src/runtime/app/composables/defineOgImage.ts

@@ -1,12 +1,11 @@
 import type { ActiveHeadEntry } from '@unhead/vue'
-import type { DefineOgImageInput, OgImageOptions } from '../../types'
-import { defu } from 'defu'
+import type { DefineOgImageInput } from '../../types'
 import { appendHeader } from 'h3'
 import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from 'nuxt/app'
-import { ref } from 'vue'
+import { ref, toValue } from 'vue'
 import { createNitroRouteRuleMatcher } from '../../server/util/kit'
-import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from '../../shared'
-import { createOgImageMeta, normaliseOptions } from '../utils'
+import { getOgImagePath, useOgImageRuntimeConfig } from '../../shared'
+import { createOgImageMeta, setHeadOgImagePrebuilt } from '../utils'
 
 // In non-dev client-side environments this is treeshaken
 export function defineOgImage(_options: DefineOgImageInput = {}) {
@@ -47,23 +46,25 @@ export function defineOgImage(_options: DefineOgImageInput = {}) {
     return
   }
   const { defaults } = useOgImageRuntimeConfig()
-  const options = normaliseOptions(defu({
-    ..._options,
-  }, {
-    component: defaults.component,
-  }))
+  const options = toValue(_options)
+  for (const key in routeRules) {
+    if (options[key] === undefined)
+      options[key] = routeRules[key]
+  }
+  for (const key in defaults) {
+    if (options[key] === undefined)
+      options[key] = defaults[key]
+  }
   if (route.query)
     options._query = route.query
-  const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults) as OgImageOptions)
   // allow overriding using a prebuild config
-  if (resolvedOptions.url) {
-    createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext!)
+  if (options.url) {
+    setHeadOgImagePrebuilt(options)
+    return
   }
-  else {
-    const path = getOgImagePath(basePath, defu(resolvedOptions, { _query: options._query }))
-    if (import.meta.prerender) {
-      appendHeader(useRequestEvent(nuxtApp)!, 'x-nitro-prerender', path)
-    }
-    createOgImageMeta(path, options, resolvedOptions, nuxtApp.ssrContext!)
+  const path = getOgImagePath(basePath, options)
+  if (import.meta.prerender) {
+    appendHeader(useRequestEvent(nuxtApp)!, 'x-nitro-prerender', path)
   }
+  createOgImageMeta(path, options, nuxtApp.ssrContext!)
 }

src/runtime/app/utils.ts

@@ -1,26 +1,34 @@
 import type { Head } from '@unhead/vue'
 import type { NuxtSSRContext } from 'nuxt/app'
-import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types'
+import type { OgImageOptions, OgImagePrebuilt } from '../types'
 import { componentNames } from '#build/nuxt-og-image/components.mjs'
 import { useHead } from '#imports'
 import { resolveUnrefHeadInput } from '@unhead/vue'
 import { defu } from 'defu'
 import { stringify } from 'devalue'
 import { withQuery } from 'ufo'
-import { unref } from 'vue'
-import { generateMeta, separateProps } from '../shared'
+import { generateMeta, separateProps, useOgImageRuntimeConfig } from '../shared'
 
-export function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: NuxtSSRContext) {
+export function setHeadOgImagePrebuilt(input: OgImagePrebuilt) {
   if (import.meta.client) {
     return
   }
-  const _input = separateProps(defu(input, ssrContext._ogImagePayload))
-  let url = src || input.url || resolvedOptions.url
+  const url = input.url
   if (!url)
     return
-  if (input._query && Object.keys(input._query).length && url)
-    url = withQuery(url, { _query: input._query })
-  const meta = generateMeta(url, resolvedOptions)
+  const meta = generateMeta(url, input)
+  useHead({ meta }, { tagPriority: 'high' })
+}
+
+export function createOgImageMeta(src: string, input: OgImageOptions | OgImagePrebuilt, ssrContext: NuxtSSRContext) {
+  if (import.meta.client) {
+    return
+  }
+  const { defaults } = useOgImageRuntimeConfig()
+  const _input = separateProps(defu(input, ssrContext._ogImagePayload))
+  if (input._query && Object.keys(input._query).length)
+    src = withQuery(src, { _query: input._query })
+  const meta = generateMeta(src, input)
   ssrContext._ogImageInstances = ssrContext._ogImageInstances || []
   const script: Head['script'] = []
   if (src) {
@@ -32,12 +40,19 @@ export function createOgImageMeta(src: string | null, input: OgImageOptions | Og
         const payload = resolveUnrefHeadInput(_input)
         if (typeof payload.props.title === 'undefined')
           payload.props.title = '%s'
+        payload.component = resolveComponentName(input.component, defaults.component)
         delete payload.url
         if (payload._query && Object.keys(payload._query).length === 0) {
           delete payload._query
         }
+        const final = {}
+        for (const k in payload) {
+          if (payload[k] !== defaults[k]) {
+            final[k] = payload[k]
+          }
+        }
         // don't apply defaults
-        return stringify(payload)
+        return stringify(final)
       },
       // we want this to be last in our head
       tagPosition: 'bodyClose',
@@ -54,23 +69,16 @@ export function createOgImageMeta(src: string | null, input: OgImageOptions | Og
   ssrContext._ogImageInstances.push(instance)
 }
 
-export function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt {
-  const options = { ...unref(_options) } as OgImageOptions
-  if (!options)
-    return options
+export function resolveComponentName(component: OgImageOptions['component'], fallback: string): OgImageOptions['component'] {
+  component = component || fallback || componentNames?.[0]?.pascalName
   // try and fix component name if we're using a shorthand (i.e Banner instead of OgImageBanner)
-  if (options.component && componentNames) {
-    const originalName = options.component
+  if (component && componentNames) {
+    const originalName = component
     for (const component of componentNames) {
       if (component.pascalName.endsWith(originalName) || component.kebabName.endsWith(originalName)) {
-        options.component = component.pascalName
-        break
+        return component.pascalName
       }
     }
   }
-  else if (!options.component) {
-    // just pick first component
-    options.component = componentNames[0]?.pascalName
-  }
-  return options
+  return component
 }

src/runtime/app/utils/plugins.ts

@@ -9,9 +9,9 @@ import { parse, stringify } from 'devalue'
 import { createRouter as createRadixRouter, toRouteMatcher } from 'radix3'
 import { parseURL, withoutBase } from 'ufo'
 import { toValue } from 'vue'
-import { createOgImageMeta, normaliseOptions } from '../../app/utils'
+import { createOgImageMeta } from '../../app/utils'
 import { isInternalRoute, separateProps } from '../../pure'
-import { getOgImagePath, useOgImageRuntimeConfig } from '../../shared'
+import { getOgImagePath } from '../../shared'
 
 export function ogImageCanonicalUrls(nuxtApp: NuxtApp) {
   // specifically we're checking if a route is missing a payload but has route rules, we can inject the meta needed
@@ -106,13 +106,8 @@ export function routeRuleOgImage(nuxtApp: NuxtApp) {
       nuxtApp.ssrContext!._ogImageInstances = undefined
       return
     }
-    const { defaults } = useOgImageRuntimeConfig()
-    routeRules = normaliseOptions(defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules, {
-      component: defaults.component,
-    }))
-
-    const resolvedOptions = normaliseOptions(defu(routeRules, defaults) as OgImageOptions)
-    const src = getOgImagePath(ssrContext!.url, resolvedOptions)
-    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext!)
+    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules)
+    const src = getOgImagePath(ssrContext!.url, routeRules)
+    createOgImageMeta(src, routeRules, nuxtApp.ssrContext!)
   })
 }

src/runtime/pure.ts

@@ -115,5 +115,8 @@ export function withoutQuery(path: string) {
 export function getExtension(path: string) {
   path = withoutQuery(path)
   const lastSegment = (path.split('/').pop() || path)
-  return lastSegment.split('.').pop() || lastSegment
+  const extension = lastSegment.split('.').pop() || lastSegment
+  if (extension === 'jpg')
+    return 'jpeg'
+  return extension
 }

src/runtime/shared.ts

@@ -1,21 +1,18 @@
-import type { Head } from '@unhead/vue'
-import type { OgImageOptions, OgImageRuntimeConfig } from './types'
+import type { ResolvableMeta } from '@unhead/vue'
+import type { OgImageOptions, OgImagePrebuilt, OgImageRuntimeConfig } from './types'
 import { useRuntimeConfig } from '#imports'
-import { defu } from 'defu'
 import { joinURL, withQuery } from 'ufo'
+import { toValue } from 'vue'
 import { getExtension } from './pure'
 
 // must work in both Nuxt an
 
 export * from './pure'
 
-export function generateMeta(url: string, resolvedOptions: OgImageOptions): Head['meta'] {
-  let urlExtension = getExtension(url) || resolvedOptions.extension
-  if (urlExtension === 'jpg')
-    urlExtension = 'jpeg'
-  const meta: Head['meta'] = [
+export function generateMeta(url: OgImagePrebuilt['url'] | string, resolvedOptions: OgImageOptions | OgImagePrebuilt): ResolvableMeta[] {
+  const meta: ResolvableMeta[] = [
     { property: 'og:image', content: url },
-    { property: 'og:image:type', content: `image/${urlExtension}` },
+    { property: 'og:image:type', content: () => `image/${resolvedOptions.extension || getExtension(toValue(url))}` },
     { name: 'twitter:card', content: 'summary_large_image' },
     // we don't need this but avoids issue when using useSeoMeta({ twitterImage })
     { name: 'twitter:image', content: url },
@@ -38,10 +35,10 @@ export function generateMeta(url: string, resolvedOptions: OgImageOptions): Head
 
 export function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>) {
   const baseURL = useRuntimeConfig().app.baseURL
-  const options = defu(_options, useOgImageRuntimeConfig().defaults)
-  const path = joinURL('/', baseURL, `__og-image__/${import.meta.prerender ? 'static' : 'image'}`, pagePath, `og.${options.extension}`)
-  if (Object.keys(options._query || {}).length) {
-    return withQuery(path, options._query)
+  const extension = _options?.extension || useOgImageRuntimeConfig().defaults.extension
+  const path = joinURL('/', baseURL, `__og-image__/${import.meta.prerender ? 'static' : 'image'}`, pagePath, `og.${extension}`)
+  if (Object.keys(_options?._query || {}).length) {
+    return withQuery(path, _options!._query!)
   }
   return path
 }

src/runtime/types.ts

@@ -8,6 +8,7 @@ import type { NitroApp } from 'nitropack/types'
 import type { SatoriOptions } from 'satori'
 import type { html } from 'satori-html'
 import type { SharpOptions } from 'sharp'
+import type { Ref } from 'vue'
 
 export interface OgImageRenderEventContext {
   unocss: UnoGenerator
@@ -82,7 +83,8 @@ export interface ScreenshotOptions {
   delay?: number
 }
 
-export type OgImagePrebuilt = { url: string } & Pick<OgImageOptions, 'width' | 'height' | 'alt' | '_query'>
+export interface OgImagePrebuilt extends OgImageOptions {
+}
 
 export type DefineOgImageInput = OgImageOptions | OgImagePrebuilt | false
 
@@ -92,23 +94,23 @@ export interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
    *
    * @default 1200
    */
-  width?: number
+  width?: number | (() => number) | Ref<number>
   /**
    * The height of the screenshot.
    *
    * @default 630
    */
-  height?: number
+  height?: number | (() => number) | Ref<number>
   /**
    * The alt text for the image.
    */
-  alt?: string
+  alt?: string | (() => string) | Ref<string>
   /**
    * Use a prebuilt image instead of generating one.
    *
    * Should be an absolute URL.
    */
-  url?: string
+  url?: string | (() => string) | Ref<string>
   /**
    * The name of the component to render.
    */