fix: nuxt content merging

src/runtime/nitro/plugins/nuxt-content.ts

@@ -1,6 +1,7 @@
 import { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import { defu } from 'defu'
+import type { UseHeadInput } from 'unhead'
 import { getOgImagePath, useOgImageRuntimeConfig } from '../../utils'
 
 export default defineNitroPlugin((nitroApp) => {
@@ -28,15 +29,16 @@ export default defineNitroPlugin((nitroApp) => {
         payload[key.replace(/-([a-z])/g, g => g[1].toUpperCase())] = val
       })
 
-      content.head = defu({
+      content.head = defu(<UseHeadInput<any>> {
         script: [
           {
-            id: 'nuxt-og-image-options',
+            id: 'nuxt-og-image-overrides',
             type: 'application/json',
             processTemplateParams: true,
             innerHTML: payload,
             // we want this to be last in our head
             tagPosition: 'bodyClose',
+            tagPriority: 30, // slighty higher priority
           },
         ],
         meta: [

src/runtime/nuxt/plugins/og-image-canonical-urls.server.ts

@@ -1,7 +1,9 @@
 import { parseURL } from 'ufo'
 import type { HeadPlugin } from '@unhead/schema'
 import { toValue } from 'vue'
-import { isInternalRoute } from '../../utils.pure'
+import { defu } from 'defu'
+import { isInternalRoute, separateProps } from '../../utils.pure'
+import type { OgImageOptions } from '../../types'
 import { defineNuxtPlugin, useRequestEvent, withSiteUrl } from '#imports'
 
 export default defineNuxtPlugin({
@@ -16,10 +18,21 @@ export default defineNuxtPlugin({
 
       // unhead plugin to correct missing site URL, this is to fix the Nuxt Content integration not being able to resolve the correct URL
       ssrContext?.head.use(<HeadPlugin>{
-        key: 'nuxt-og-image:canonical-urls',
+        key: 'nuxt-og-image:overrides-and-canonical-urls',
         hooks: {
-          'tags:resolve': async ({ tags }) => {
-            for (const tag of tags) {
+          'tags:resolve': async (ctx) => {
+            // see if id "nuxt-og-image-overrides" exists
+            let overrides: OgImageOptions | undefined
+            for (const tag of ctx.tags) {
+              if (tag.tag === 'script' && tag.props.id === 'nuxt-og-image-overrides') {
+                overrides = separateProps(JSON.parse(tag.innerHTML || '{}'))
+                delete ctx.tags[ctx.tags.indexOf(tag)]
+                break
+              }
+            }
+            ctx.tags = ctx.tags.filter(Boolean)
+
+            for (const tag of ctx.tags) {
               if (tag.tag === 'meta' && (tag.props.property === 'og:image' || tag.props.name === 'twitter:image:src')) {
                 // looking for:
                 // property og:image
@@ -30,6 +43,10 @@ export default defineNuxtPlugin({
                   })
                 }
               }
+              // need to insert the overrides into the payload
+              else if (overrides && tag.tag === 'script' && tag.props.id === 'nuxt-og-image-options') {
+                tag.innerHTML = JSON.stringify(defu(overrides, JSON.parse(tag.innerHTML)))
+              }
             }
           },
         },

test/fixtures/content/app.vue

@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+defineOgImage({
+  props: {
+    title: 'hello world',
+    foo: 'bar',
+    colorMode: 'dark',
+    theme: '#121212',
+  },
+})
+</script>
+
 <template>
   <main>
     <ContentDoc />

test/fixtures/content/content/disabled.md

@@ -0,0 +1,5 @@
+---
+ogImage: false
+---
+
+# foo

test/fixtures/content/content/index.md

@@ -3,8 +3,6 @@ path: '/'
 title: 'Nuxt Content'
 ogImage:
   description: 'Hello OG Image'
-  extension: 'png'
-  colorMode: 'light'
 ---
 
 # bar