docs(deps): update nuxt-og-image to v3

docs/components/OgImage/Docs.vue

@@ -1,8 +1,4 @@
 <script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false
-})
-
 defineProps({
   title: {
     type: String,

docs/package.json

@@ -20,7 +20,7 @@
     "nuxt": "^3.12.2",
     "nuxt-cloudflare-analytics": "^1.0.8",
     "nuxt-component-meta": "^0.6.4",
-    "nuxt-og-image": "^2.2.4",
+    "nuxt-og-image": "^3.0.0-rc.53",
     "prettier": "^3.3.2",
     "typescript": "^5.4.5",
     "ufo": "^1.5.3",

docs/pages/[...slug].vue

@@ -75,10 +75,7 @@ useSeoMeta({
   ogDescription: page.value.description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title: page.value.title,
-  description: page.value.description,
+defineOgImageComponent('Docs', {
   headline: headline.value
 })
 

docs/pages/playground.vue

@@ -9,11 +9,7 @@ useSeoMeta({
   description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
+defineOgImageComponent('Docs')
 </script>
 
 <template>

docs/pages/releases.vue

@@ -69,11 +69,7 @@ useSeoMeta({
   ogDescription: description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
+defineOgImageComponent('Docs')
 </script>
 
 <style scoped>

docs/pages/roadmap.vue

@@ -9,11 +9,7 @@ useSeoMeta({
   description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
+defineOgImageComponent('Docs')
 
 const appConfig = useAppConfig()
 const colorMode = useColorMode()