doc: improved nuxt content integration guide

docs/content/1.integrations/1.content.md

@@ -3,31 +3,44 @@ title: Nuxt Content
 description: How to use the Nuxt OG Image module with Nuxt Content.
 ---
 
-Nuxt OG Image integrates with Nuxt Content out of the box.
+## Introduction
 
-It supports the `ogImage` frontmatter key that can be used to configure your OG Image.
-
-This will only work when you're using Document Driven mode, or you have set a `path` and are using the `useContentHead` composable.
+Nuxt OG Image integrates with Nuxt Content out of the box, supporting a `ogImage` frontmatter key that can be used to configure your OG Image.
 
 ## Setup
 
-Add the `ogImage` key on your frontmatter. This has the same options as `defineOgImage`.
+When `strictNuxtContentPaths` has been configured, images will be automatically generated for each markdown file in your content folder. 
+To use `strictNuxtContentPaths` the markdown paths must match the path of the page. For example, if you have a markdown file at `content/blog/3-months-of-europe.md`, the path of the page must be `/blog/3-months-of-europe`.
 
-```md [content/blog/3-months-of-europe.md]
+Otherwise, you will need to provide the `ogImage` for each markdown file.
+
+::code-group
+
+```ts [Strict Paths]
+export default defineNuxtConfig({
+  ogImage: {
+    strictNuxtContentPaths: true
+  }
+})
+```
+
+```md [Path Key]
 ---
-ogImage:
-  component: BlogOgImage
-  props:
-    image: /blog/3-months-of-europe.png
-    readingMins: 5
+path: /blog/3-months-of-europe
+ogImage: true
 ---
 ```
 
-If you're not using Document Driven mode, you must use the `path` key on your frontmatter.
+::
+
+
+### Frontmatter Configuration
+
+The frontmatter key has the same options as [`defineOgImageComponent()`{lang="ts"}](/docs/og-image/api/define-og-image-component).
+Providing `true` will use the default values, a `false` value will disable the OG Image for that page.
 
 ```md [content/blog/3-months-of-europe.md]
 ---
-path: /blog/3-months-of-europe
 ogImage:
   component: BlogOgImage
   props:
@@ -36,33 +49,37 @@ ogImage:
 ---
 ```
 
-If you're not using `documentDriven` mode and all of your content paths are the same as their real paths,
-you can enable `strictNuxtContentPaths` to get the same behaviour.
+### Content head
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ogImage: {
-    strictNuxtContentPaths: true
-  }
-})
-```
+The module works by injecting extra tags within the `content.head` property of a markdown file.
 
-Additionally, you will need to make sure you're using the `useContentHead` composable if you're not using Document Driven mode.
+To have the og image work it needs to render this property, if you're not using document driven then you
+will need to use the `useContentHead` composable or the `head` property in your component.
 
-```vue [post.vue]
+::code-group
+
+```vue [useContentHead]
 <script setup>
 const page = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
 useContentHead(page)
 </script>
 ```
 
-If you have issues with your `ogImage` data not updating, you may need to clear the `.nuxt/content-cache` folder.
+```vue [useContentHead]
+<template>
+<ContentDoc head />
+</template>
+```
+
+::
+
 
-### Using Components
+### Screenshots
 
-If you'd like to use the `<OgImage />` or `<OgImageScreenshot />` components within your content instead of using
-frontmatter, you'll need
-to make the components global.
+If you'd like to use the screenshots, you'll need to use the `<OgImageScreenshot />` component within your content instead of using
+frontmatter.
+
+To have this work in your markdown files, you will need to make the components global.
 
 ```ts
 export default defineNuxtConfig({
@@ -75,5 +92,9 @@ export default defineNuxtConfig({
 ```
 
 ```md [content/blog/3-months-of-europe.md]
-:OgImage{component="BlogOgImage" image="/blog/3-months-of-europe.png" readingMins="5"}
+:OgImageScreenshot
 ```
+
+### Troubleshooting
+
+If you have issues with your `ogImage` data not updating, you may need to clear the `.nuxt/content-cache` folder.

test/fixtures/content/app.vue

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

test/fixtures/content/content/foo.md

@@ -1,4 +1,6 @@
 ---
+title: woohoo - test
+foo: 'bar'
 sitemap:
   priority: 0.5
 ---

test/fixtures/content/nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
 
   ogImage: {
     debug: true,
+    strictNuxtContentPaths: true,
   },
 
   devtools: { enabled: true },

test/fixtures/content/pages/[...slug].vue

@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <ContentDoc head />
+  </main>
+</template>