nuxt · Atinux · Jun 27, 2022 · Jun 27, 2022 · Jun 27, 2022 · Jun 27, 2022
diff --git a/docs/content/4.api/1.components/1.content-doc.md b/docs/content/4.api/1.components/1.content-doc.md
@@ -23,7 +23,9 @@ It uses `<ContentRenderer>`{lang=html} and `<ContentQuery>`{lang=html} under the
 - `query`{lang=ts}: A query to be passed to `queryContent()`.
   - Type: `QueryBuilderParams`{lang=ts}
   - Default: `undefined`{lang=ts}
-
+- `head`{lang=ts}: Toggles the usage of [`useContentHead`](/api/composables/use-content-head).
+  - Type: `Boolean`{lang=ts}
+  - Default: `true`{lang=ts}
 
 ## Slots
 

diff --git a/docs/content/4.api/2.composables/6.use-content-head.md b/docs/content/4.api/2.composables/6.use-content-head.md
@@ -0,0 +1,38 @@
+---
+title: 'useContentHead()'
+description: 'Configuring your <head> tag from your content has never been easier!'
+---
+
+`useContentHead()`{lang="ts"} is a small helper providing easy binding between your content data and [`useHead`](https://v3.nuxtjs.org/guide/features/head-management) composable from Nuxt 3.
+
+It is already implement for you in both [`<ContentDoc />`](/api/components/content-doc) component and the default [`documentDriven`](https://content.nuxtjs.org/guide/writing/document-driven) catch-all page.
+
+## Usage
+
+`useContentHead()`{lang="ts"} is available everywhere in your app where `useHead` would be.
+
+It takes two arguments:
+
+- `document`: A document data (of any type)
+- `to`: A route path
+  - Default: `useRoute()`{lang=ts}
+
+::code-group
+
+  ```vue [with documentDriven]
+  <script setup lang="ts">
+  const { page } = useContent()
+
+  useContentHead(page)
+  </script>
+  ```
+
+  ```vue [with queryContent]
+  <script setup lang="ts">
+  const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)
+
+  useContentHead(page)
+  </script>
+  ```
+
+::
diff --git a/docs/package.json b/docs/package.json
@@ -8,6 +8,9 @@
     "preview": "nuxi preview",
     "generate": "nuxi generate"
   },
+  "resolutions": {
+    "@nuxt/content": "file:../"
+  },
   "devDependencies": {
     "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
     "@docus/github": "npm:@docus/github-edge@latest",

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -451,10 +451,8 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@nuxt/content@npm:@nuxt/content-edge@latest":
-  version "2.0.1-27605578.cfd8782"
-  resolved "https://registry.yarnpkg.com/@nuxt/content-edge/-/content-edge-2.0.1-27605578.cfd8782.tgz#08212f1cc261754035c1afea4c01bd873c34affd"
-  integrity sha512-knX0/J5Peic/ggAMO1k/b4BEb5JDk99malCEne8ulE6onlgv22Y3nBmAHkEu5fAwY3QmeadseSvosK3zLxDS8A==
+"@nuxt/content@file:../", "@nuxt/content@npm:@nuxt/content-edge@latest":
+  version "2.0.1"
   dependencies:
     "@nuxt/kit" "^3.0.0-rc.4"
     csvtojson "^2.0.10"
@@ -5784,9 +5782,9 @@ socket.io-client@^4.5.1:
     socket.io-parser "~4.2.0"
 
 socket.io-parser@~4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.0.tgz#3f01e5bc525d94aa52a97ed5cbc12e229bbc4d6b"
-  integrity sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
   dependencies:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"

diff --git a/src/module.ts b/src/module.ts
@@ -319,6 +319,7 @@ export default defineNuxtModule<ModuleOptions>({
     addAutoImport([
       { name: 'queryContent', as: 'queryContent', from: resolveRuntimeModule('./composables/query') },
       { name: 'useContentHelpers', as: 'useContentHelpers', from: resolveRuntimeModule('./composables/helpers') },
+      { name: 'useContentHead', as: 'useContentHead', from: resolveRuntimeModule('./composables/head') },
       { name: 'withContentBase', as: 'withContentBase', from: resolveRuntimeModule('./composables/utils') },
       { name: 'useUnwrap', as: 'useUnwrap', from: resolveRuntimeModule('./composables/utils') }
     ])

diff --git a/src/runtime/components/ContentDoc.ts b/src/runtime/components/ContentDoc.ts
@@ -1,9 +1,9 @@
 
-import { PropType, defineComponent, h, useSlots, nextTick } from 'vue'
+import { PropType, defineComponent, h, useSlots } from 'vue'
 import type { QueryBuilderParams } from '../types'
 import ContentRenderer from './ContentRenderer'
 import ContentQuery from './ContentQuery'
-import { useRoute, useHead } from '#imports'
+import { useRoute, useContentHead } from '#imports'
 
 export default defineComponent({
   props: {
@@ -51,53 +51,41 @@ export default defineComponent({
       type: Object as PropType<QueryBuilderParams>,
       required: false,
       default: undefined
+    },
+
+    /**
+     * Whether or not to map the document data to the `head` property.
+     */
+    head: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   render (ctx) {
     const slots = useSlots()
 
-    const { tag, excerpt, path, query } = ctx
+    const { tag, excerpt, path, query, head } = ctx
 
     // Merge local `path` props and apply `findOne` query default.
     const contentQueryProps = Object.assign(query || {}, { path, find: 'one' })
 
     const emptyNode = (slot: string, data: any) => h('pre', null, JSON.stringify({ message: 'You should use slots with <ContentDoc>', slot, data }, null, 2))
 
-    const addHead = (doc: any) => {
-      if (path !== useRoute().path) { return }
-      const head = Object.assign({}, doc.head)
-      head.title = head.title || doc.title
-      head.meta = head.meta || []
-      const description = head.description || doc.description
-      // Shortcut for head.description
-      if (description && head.meta.filter(m => m.name === 'description').length === 0) {
-        head.meta.push({
-          name: 'description',
-          content: description
-        })
-      }
-      // Shortcut for head.image to og:image in meta
-      if (head.image && head.meta.filter(m => m.property === 'og:image').length === 0) {
-        head.meta.push({
-          property: 'og:image',
-          content: head.image
-        })
-      }
-      if (process.client) { nextTick(() => useHead(head)) } else { useHead(head) }
-    }
-
     return h(
       ContentQuery,
       contentQueryProps,
       {
         // Default slot
         default: slots?.default
           ? ({ data, refresh, isPartial }) => {
-              addHead(data)
-              return slots.default({ doc: data, refresh, isPartial, excerpt, ...this.$attrs })
+              if (head) { useContentHead(data) }
+
+              return slots.default?.({ doc: data, refresh, isPartial, excerpt, ...this.$attrs })
             }
           : ({ data }) => {
-              addHead(data)
+              if (head) { useContentHead(data) }
+
               return h(
                 ContentRenderer,
                 { value: data, excerpt, tag, ...this.$attrs },

diff --git a/src/runtime/composables/head.ts b/src/runtime/composables/head.ts
@@ -0,0 +1,79 @@
+import { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router'
+import type { HeadObjectPlain } from '@vueuse/head'
+import { ParsedContent } from '../types'
+import { useRoute, nextTick, useHead } from '#imports'
+
+export const useContentHead = (
+  document: ParsedContent,
+  to: RouteLocationNormalized | RouteLocationNormalizedLoaded = useRoute()
+) => {
+  // Don't call this function if no route is yet available
+  if (!to.path) { return }
+
+  // Default head to `document?.head`
+  const head: HeadObjectPlain = Object.assign({}, document?.head || {})
+
+  // Great basic informations from the document
+  head.title = head.title || document.title
+  head.meta = head.meta || []
+
+  // Grab description from `head.description` or fallback to `document.description`
+  // @ts-ignore - We expect `head.description` from Nuxt configurations...
+  const description = head?.description || document.description
+
+  // Shortcut for head.description
+  if (description && head.meta.filter(m => m.name === 'description').length === 0) {
+    head.meta.push({
+      name: 'description',
+      content: description
+    })
+  }
+
+  // Grab description from `head` or fallback to `document.description`
+  // @ts-ignore - We expect `head.image` from Nuxt configurations...
+  const image = head?.image || document.image
+
+  // Shortcut for head.image to og:image in meta
+  if (image && head.meta.filter(m => m.property === 'og:image').length === 0) {
+    // Handles `image: '/image/src.jpg'`
+    if (typeof image === 'string') {
+      head.meta.push({
+        property: 'og:image',
+        // @ts-ignore - We expect `head.image` from Nuxt configurations...
+        content: head.image
+      })
+    }
+
+    // Handles: `image.src: '/image/src.jpg'` & `image.alt: 200`...
+    if (typeof image === 'object') {
+      // https://ogp.me/#structured
+      const imageKeys = [
+        'src',
+        'secure_url',
+        'type',
+        'width',
+        'height',
+        'alt'
+      ]
+
+      // Look on available keys
+      for (const key of imageKeys) {
+        // `src` is a shorthand for the URL.
+        if (key === 'src' && image.src) {
+          head.meta.push({
+            property: 'og:image',
+            content: image[key]
+          })
+        } else if (image[key]) {
+          head.meta.push({
+            property: `og:${key}`,
+            content: image[key]
+          })
+        }
+      }
+    }
+  }
+
+  // @ts-ignore
+  if (process.client) { nextTick(() => useHead(head)) } else { useHead(head) }
+}
diff --git a/src/runtime/pages/document-driven.vue b/src/runtime/pages/document-driven.vue
@@ -1,60 +1,9 @@
 <script setup lang="ts">
-import { computed, useContent, useHead } from '#imports'
+import { useContent, useContentHead } from '#imports'
 
 const { page } = useContent()
 
-const cover = computed(() => {
-  const cover = page.value?.cover /* || theme.value?.cover */
-
-  if (typeof cover === 'string') {
-    return { src: cover, alt: page.value?.title /* || theme.value.title */ }
-  }
-
-  return cover || {}
-})
-
-useHead({
-  bodyAttrs: {
-    class: []
-  },
-  title: page.value?.title,
-  titleTemplate: /* theme.value?.title ? '%s | Playground' : */ '%s',
-  meta: [
-    { hid: 'description', name: 'description', content: page.value?.description /* || theme.value?.description */ },
-    { hid: 'og:site_name', property: 'og:site_name', content: 'Nuxt' },
-    { hid: 'og:type', property: 'og:type', content: 'website' },
-    {
-      hid: 'twitter:site',
-      name: 'twitter:site',
-      content: '' /* theme.value?.url || theme.value?.socials?.twitter || '' */
-    },
-    {
-      hid: 'twitter:card',
-      name: 'twitter:card',
-      content: 'summary_large_image'
-    },
-    {
-      hid: 'og:image',
-      property: 'og:image',
-      content: cover.value.src || ''
-    },
-    {
-      hid: 'og:image:secure_url',
-      property: 'og:image:secure_url',
-      content: cover.value.src || ''
-    },
-    {
-      hid: 'og:image:alt',
-      property: 'og:image:alt',
-      content: cover.value.alt || ''
-    },
-    {
-      hid: 'twitter:image',
-      name: 'twitter:image',
-      content: cover.value.src || ''
-    }
-  ]
-})
+useContentHead(page)
 </script>
 
 <template>

diff --git a/src/runtime/plugins/documentDriven.ts b/src/runtime/plugins/documentDriven.ts
@@ -4,7 +4,7 @@ import { useRuntimeConfig, addRouteMiddleware } from '#app'
 import { withoutTrailingSlash } from 'ufo'
 import { NavItem, ParsedContent } from '../types'
 // @ts-ignore
-import { defineNuxtPlugin, queryContent, useContentHelpers, useContentState, fetchContentNavigation, useRoute } from '#imports'
+import { defineNuxtPlugin, queryContent, useContentHelpers, useContentHead, useContentState, fetchContentNavigation, useRoute } from '#imports'
 // @ts-ignore
 import layouts from '#build/layouts'
 
@@ -43,7 +43,7 @@ export default defineNuxtPlugin((nuxt) => {
   const refresh = async (to: RouteLocationNormalized | RouteLocationNormalizedLoaded, force: boolean = false) => {
     const { navigation, page, globals, surround } = useContentState()
 
-    const promises: (() => Promise<any> | undefined)[] = []
+    const promises: (() => Promise<any> | any)[] = []
 
     /**
      * `navigation`