feat: Nuxt Content v3 (#398)

Author: harlan-zw

docs/content/2.guides/5.content.md

@@ -3,16 +3,37 @@ title: Nuxt Content
 description: How to use the Nuxt Sitemap module with Nuxt Content.
 ---
 
-Nuxt Sitemap integrates with Nuxt Content out of the box.
+## Introduction
 
-It comes with automatic configuration when using document driven mode.
-Otherwise, you can opt in on each markdown file or set up your own [app source](/docs/sitemap/getting-started/data-sources).
+Nuxt Sitemap comes with an integration for Nuxt Content that allows you to configure your sitemap entry straight from your markdown directly.
 
-## Setup
+## Setup Nuxt Content v3
 
-### Document Driven Mode
+In Nuxt Content v3 we need to use the `asSitemapCollection()`{lang="ts"} function to augment any collections
+to be able to use the `sitemap` frontmatter key.
 
-When using `documentDriven` mode, all paths will be automatically added to the sitemap.
+```ts [content.config.ts]
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { asSitemapCollection } from '@nuxtjs/sitemap'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection(
+      // adds the robots frontmatter key to the collection
+      asSitemapCollection({
+        type: 'page',
+        source: '**/*.md',
+      }),
+    ),
+  },
+})
+```
+
+
+## Setup Nuxt Content v2
+
+In Nuxt Content v2 markdown files require either [Document Driven Mode](https://content.nuxt.com/document-driven/introduction), a `path` key to be set
+in the frontmatter or the `strictNuxtContentPaths` option to be enabled.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -34,26 +55,9 @@ export default defineNuxtConfig({
 })
 ```
 
-### Markdown opt in
-
-If you want to add markdown pages to your sitemap without any extra config, you can use the `sitemap` key on
-your frontmatter. You must provide a `loc` value, or the page must have a `path`.
-
-```md
----
-sitemap:
-  loc: /my-page
-  lastmod: 2021-01-01
-  changefreq: monthly
-  priority: 0.8
----
-
-# My Page
-```
-
-### Nuxt Content App Source
+### Advanced: Nuxt Content App Source
 
-If you'd like to set up a more automated Nuxt Content integration and your not using Document Driven mode, you can add content to the sitemap as you would with [Dynamic URLs](/docs/sitemap/guides/dynamic-urls).
+If you'd like to set up a more automated Nuxt Content integration and you're not using Document Driven mode, you can add content to the sitemap as you would with [Dynamic URLs](/docs/sitemap/guides/dynamic-urls).
 
 An example of what this might look like is below, customize to your own needs.
 
@@ -86,8 +90,34 @@ export default defineNuxtConfig({
 })
 ```
 
-## Guides
+## Usage 
 
-### Opt out from Sitemap
+### Frontmatter `sitemap`
 
-You can also disable the content from being used by passing in `sitemap: false` or `robots: false`.
+Use the `sitemap` key in your frontmatter to add a page to your sitemap.
+
+You can provide any data that you would normally provide in the sitemap configuration.
+
+```md
+---
+sitemap:
+  loc: /my-page
+  lastmod: 2021-01-01
+  changefreq: monthly
+  priority: 0.8
+---
+
+# My Page
+```
+
+### Exclude from Sitemap
+
+If you'd like to exclude a page from the sitemap, you can set `sitemap: false` in the frontmatter or `robots: false`
+if you'd like to exclude it from search engines.
+
+```md
+---
+sitemap: false
+robots: false
+---
+```

package.json

@@ -64,7 +64,8 @@
     "ufo": "^1.5.4"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "3.0.0-alpha.9",
+    "@nuxt/content-v2": "npm:@nuxt/content@2.13.4",
     "@nuxt/eslint-config": "^0.7.5",
     "@nuxt/module-builder": "0.8.4",
     "@nuxt/test-utils": "^3.15.4",
@@ -89,7 +90,8 @@
       "h3",
       "std-env",
       "nitropack",
-      "consola"
+      "consola",
+      "@nuxt/content"
     ]
   }
 }

pnpm-lock.yaml

@@ -1,2 +1,4 @@
 packages:
   - client
+  - test/fixtures/**
+  - playground

pnpm-workspace.yaml

@@ -0,0 +1,54 @@
+import { z } from '@nuxt/content'
+
+const sitemap = z.object({
+  loc: z.string().optional(),
+  lastmod: z.date().optional(),
+  changefreq: z.union([z.literal('always'), z.literal('hourly'), z.literal('daily'), z.literal('weekly'), z.literal('monthly'), z.literal('yearly'), z.literal('never')]).optional(),
+  priority: z.number().optional(),
+  images: z.array(z.object({
+    loc: z.string(),
+    caption: z.string().optional(),
+    geo_location: z.string().optional(),
+    title: z.string().optional(),
+    license: z.string().optional(),
+  })).optional(),
+  videos: z.array(z.object({
+    content_loc: z.string(),
+    player_loc: z.string().optional(),
+    duration: z.string().optional(),
+    expiration_date: z.date().optional(),
+    rating: z.number().optional(),
+    view_count: z.number().optional(),
+    publication_date: z.date().optional(),
+    family_friendly: z.boolean().optional(),
+    tag: z.string().optional(),
+    category: z.string().optional(),
+    restriction: z.object({
+      relationship: z.literal('allow').optional(),
+      value: z.string().optional(),
+    }).optional(),
+    gallery_loc: z.string().optional(),
+    price: z.string().optional(),
+    requires_subscription: z.boolean().optional(),
+    uploader: z.string().optional(),
+  })).optional(),
+}).optional()
+
+export function asSitemapCollection(collection: any) {
+  if (collection.type !== 'page') {
+    return
+  }
+  if (!collection.schema) {
+    collection.schema = z.object({
+      sitemap,
+    })
+  }
+  else {
+    collection.schema = collection.schema.extend({
+      sitemap,
+    })
+  }
+  collection._integrations = collection._integrations || []
+  collection._integrations.push('sitemap')
+  return collection
+}

src/content.ts

@@ -7,14 +7,17 @@ import {
   defineNuxtModule,
   getNuxtModuleVersion,
   hasNuxtModule,
-  hasNuxtModuleCompatibility,
+  hasNuxtModuleCompatibility, resolveModule,
   useLogger,
 } from '@nuxt/kit'
 import { joinURL, withBase, withLeadingSlash, withoutLeadingSlash, withoutTrailingSlash } from 'ufo'
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit'
 import { defu } from 'defu'
 import type { NitroRouteConfig } from 'nitropack'
 import { readPackageJSON } from 'pkg-types'
+import { dirname } from 'pathe'
+import type { FileAfterParseHook } from '@nuxt/content'
+import type { UseSeoMetaInput } from '@unhead/schema'
 import type {
   AppSourceContext,
   AutoI18nConfig,
@@ -24,7 +27,7 @@ import type {
   SitemapSourceBase,
   SitemapSourceInput,
   SitemapSourceResolved,
-  ModuleOptions as _ModuleOptions, FilterInput, I18nIntegrationOptions,
+  ModuleOptions as _ModuleOptions, FilterInput, I18nIntegrationOptions, SitemapUrl,
 } from './runtime/types'
 import { convertNuxtPagesToSitemapEntries, generateExtraRoutesFromNuxtConfig, resolveUrls } from './util/nuxtSitemap'
 import { createNitroPromise, createPagesPromise, extendTypes, getNuxtModuleOptions, resolveNitroPreset } from './util/kit'
@@ -41,6 +44,8 @@ import { normalizeFilters } from './util/filter'
 // eslint-disable-next-line
 export interface ModuleOptions extends _ModuleOptions {}
 
+export * from './content'
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: '@nuxtjs/sitemap',
@@ -352,34 +357,112 @@ declare module 'vue-router' {
 
     // @ts-expect-error untyped
     const isNuxtContentDocumentDriven = (!!nuxt.options.content?.documentDriven || config.strictNuxtContentPaths)
-    if (hasNuxtModule('@nuxt/content')) {
-      if (await hasNuxtModuleCompatibility('@nuxt/content', '^3')) {
-        logger.warn('Nuxt Sitemap does not work with Nuxt Content v3 yet, the integration will be disabled.')
-      }
-      else {
-        addServerPlugin(resolve('./runtime/server/plugins/nuxt-content'))
-        addServerHandler({
-          route: '/__sitemap__/nuxt-content-urls.json',
-          handler: resolve('./runtime/server/routes/__sitemap__/nuxt-content-urls'),
-        })
-        const tips: string[] = []
-        // @ts-expect-error untyped
-        if (nuxt.options.content?.documentDriven)
-          tips.push('Enabled because you\'re using `@nuxt/content` with `documentDriven: true`.')
-        else if (config.strictNuxtContentPaths)
-          tips.push('Enabled because you\'ve set `config.strictNuxtContentPaths: true`.')
-        else
-          tips.push('You can provide a `sitemap` key in your markdown frontmatter to configure specific URLs. Make sure you include a `loc`.')
+    const usingNuxtContent = hasNuxtModule('@nuxt/content')
+    const isNuxtContentV3 = usingNuxtContent && await hasNuxtModuleCompatibility('@nuxt/content', '^3')
+    const nuxtV3Collections = new Set<string>()
+    const isNuxtContentV2 = usingNuxtContent && await hasNuxtModuleCompatibility('@nuxt/content', '^2')
+    if (isNuxtContentV3) {
+      // TODO this is a hack until content gives us an alias
+      nuxt.options.alias['#sitemap/content-v3-nitro-path'] = resolve(dirname(resolveModule('@nuxt/content')), 'runtime/nitro')
+      // @ts-expect-error runtime type
+      nuxt.hooks.hook('content:file:afterParse', (ctx: FileAfterParseHook) => {
+        const content = ctx.content as {
+          body: { value: [string, Record<string, any>][] }
+          sitemap?: Partial<SitemapUrl>
+          path: string
+          seo: UseSeoMetaInput
+          updatedAt?: string
+        }
+        nuxtV3Collections.add(ctx.collection.name)
+        if (!('sitemap' in ctx.collection.fields)) {
+          return
+        }
+        // add any top level images
+        const images: SitemapUrl['images'] = []
+        if (config.discoverImages) {
+          images.push(...(content.body.value
+            ?.filter(c =>
+              ['image', 'img', 'nuxtimg', 'nuxt-img'].includes(c[0]),
+            )
+            .map(c => ({ loc: c[1].src })) || []),
+          )
+        }
 
-        appGlobalSources.push({
-          context: {
-            name: '@nuxt/content:urls',
-            description: 'Generated from your markdown files.',
-            tips,
-          },
-          fetch: '/__sitemap__/nuxt-content-urls.json',
-        })
+        // add any top level videos
+        const videos: SitemapUrl['videos'] = []
+        if (config.discoverVideos) {
+          // TODO
+          // videos.push(...(content.body.value
+          //     .filter(c => c[0] === 'video' && c[1]?.src)
+          //   .map(c => ({
+          //     content_loc: c[1].src
+          //   })) || []),
+          // )
+        }
+
+        const sitemapConfig = typeof content.sitemap === 'object' ? content.sitemap : {}
+        const lastmod = content.seo?.articleModifiedTime || content.updatedAt
+        const defaults: Partial<SitemapUrl> = {
+          loc: content.path,
+        }
+        if (images.length > 0)
+          defaults.images = images
+        if (videos.length > 0)
+          defaults.videos = videos
+        if (lastmod)
+          defaults.lastmod = lastmod
+        const definition = defu(sitemapConfig, defaults) as Partial<SitemapUrl>
+        if (!definition.loc) {
+          // user hasn't provided a loc... lets fallback to a relative path
+          if (content.path && content.path && content.path.startsWith('/'))
+            definition.loc = content.path
+        }
+        content.sitemap = definition
+        // loc is required
+        if (!definition.loc)
+          delete content.sitemap
+        ctx.content = content
+      })
+
+      addServerHandler({
+        route: '/__sitemap__/nuxt-content-urls.json',
+        handler: resolve('./runtime/server/routes/__sitemap__/nuxt-content-urls-v3'),
+      })
+      if (config.strictNuxtContentPaths) {
+        logger.warn('You have set `strictNuxtContentPaths: true` but are using @nuxt/content v3. This is not required, please remove it.')
       }
+      appGlobalSources.push({
+        context: {
+          name: '@nuxt/content@v3:urls',
+          description: 'Generated from your markdown files.',
+          tips: [`Parsing the following collections: ${Array.from(nuxtV3Collections).join(', ')}`],
+        },
+        fetch: '/__sitemap__/nuxt-content-urls.json',
+      })
+    }
+    else if (isNuxtContentV2) {
+      addServerPlugin(resolve('./runtime/server/plugins/nuxt-content-v2'))
+      addServerHandler({
+        route: '/__sitemap__/nuxt-content-urls.json',
+        handler: resolve('./runtime/server/routes/__sitemap__/nuxt-content-urls-v2'),
+      })
+      const tips: string[] = []
+      // @ts-expect-error untyped
+      if (nuxt.options.content?.documentDriven)
+        tips.push('Enabled because you\'re using `@nuxt/content` with `documentDriven: true`.')
+      else if (config.strictNuxtContentPaths)
+        tips.push('Enabled because you\'ve set `config.strictNuxtContentPaths: true`.')
+      else
+        tips.push('You can provide a `sitemap` key in your markdown frontmatter to configure specific URLs. Make sure you include a `loc`.')
+
+      appGlobalSources.push({
+        context: {
+          name: '@nuxt/content@v2:urls',
+          description: 'Generated from your markdown files.',
+          tips,
+        },
+        fetch: '/__sitemap__/nuxt-content-urls.json',
+      })
     }
 
     // config -> sitemaps
@@ -567,9 +650,9 @@ declare module 'vue-router' {
               // check for file in lastSegment using regex
               const isExplicitFile = !!(lastSegment?.match(/\.[0-9a-z]+$/i)?.[0])
               // avoid adding fallback pages to sitemap
-              if (r.error || ['/200.html', '/404.html', '/index.html'].includes(r.route))
+              if (isExplicitFile || r.error || ['/200.html', '/404.html', '/index.html'].includes(r.route))
                 return false
-              return (r.contentType?.includes('text/html') || !isExplicitFile)
+              return r.contentType?.includes('text/html')
             })
             .map(r => r._sitemap),
         ]

src/module.ts

@@ -1,6 +1,6 @@
 import { defu } from 'defu'
 import type { ParsedContent } from '@nuxt/content'
-import type { NitroApp } from 'nitropack'
+import type { NitroApp } from 'nitropack/types'
 import type { SitemapUrl } from '../../types'
 import { useSimpleSitemapRuntimeConfig } from '../utils'
 import { defineNitroPlugin } from '#imports'

src/runtime/server/plugins/nuxt-content.ts src/runtime/server/plugins/nuxt-content-v2.ts

@@ -0,0 +1,24 @@
+import { defineEventHandler } from 'h3'
+// @ts-expect-error alias
+import { queryCollectionWithEvent } from '#sitemap/content-v3-nitro-path'
+// @ts-expect-error alias
+import manifest from '#content/manifest'
+
+export default defineEventHandler(async (e) => {
+  const collections = []
+  // each collection in the manifest has a key => with fields which has a `sitemap`, we want to get all those
+  for (const collection in manifest) {
+    if (manifest[collection].fields.sitemap) {
+      collections.push(collection)
+    }
+  }
+  // now we need to handle multiple queries here, we want to run the requests in parralel
+  const contentList = []
+  for (const collection of collections) {
+    contentList.push(queryCollectionWithEvent(e, collection).select('sitemap').where('sitemap', 'IS NOT NULL').all())
+  }
+  // we need to wait for all the queries to finish
+  const results = await Promise.all(contentList)
+  // we need to flatten the results
+  return results.flat().map(c => c.sitemap).filter(Boolean)
+})

src/runtime/server/routes/__sitemap__/nuxt-content-urls.ts src/runtime/server/routes/__sitemap__/nuxt-content-urls-v2.ts

@@ -9,6 +9,9 @@ export default defineNuxtConfig({
   site: {
     url: 'https://nuxtseo.com',
   },
+  alias: {
+    '@nuxt/content': '@nuxt/content-v2',
+  },
   debug: process.env.NODE_ENV === 'test',
   sitemap: {
     autoLastmod: false,

src/runtime/server/routes/__sitemap__/nuxt-content-urls-v3.ts

@@ -0,0 +1,2 @@
+imports.autoImport=true
+typescript.includeWorkspace=true

test/fixtures/content/app.vue test/fixtures/content-v2/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

test/fixtures/content/content/_partial.md test/fixtures/content-v2/content/_partial.md

@@ -0,0 +1,16 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { asSitemapCollection } from '../../../src/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection(
+      asSitemapCollection({
+        type: 'page',
+        source: '**/*.md',
+        schema: z.object({
+          date: z.string().optional(),
+        }),
+      }),
+    ),
+  },
+})

test/fixtures/content/content/bar.md test/fixtures/content-v2/content/bar.md

@@ -0,0 +1 @@
+# bar

test/fixtures/content/content/foo.md test/fixtures/content-v2/content/foo.md

@@ -0,0 +1,10 @@
+---
+sitemap:
+  lastmod: 2021-10-20
+  priority: 0.5
+  changefreq: daily
+---
+
+# bar
+
+<img src="https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg" alt="Sponsors" />

test/fixtures/content/content/posts/bar.md test/fixtures/content-v2/content/posts/bar.md

@@ -0,0 +1,6 @@
+---
+sitemap:
+  priority: 0.5
+---
+
+# foo

test/fixtures/content/content/posts/fallback.md test/fixtures/content-v2/content/posts/fallback.md

@@ -0,0 +1,5 @@
+---
+sitemap:
+  lastmod: 2021-10-20
+---
+# bar

test/fixtures/content/content/posts/foo.md test/fixtures/content-v2/content/posts/foo.md

@@ -0,0 +1,8 @@
+---
+sitemap:
+  lastmod: 2021-10-20
+---
+
+# foo
+
+no sitemap config

test/fixtures/content/nuxt.config.ts test/fixtures/content-v2/nuxt.config.ts

@@ -0,0 +1,3 @@
+# foo
+
+no sitemap config

test/fixtures/content-v3/.nuxtrc

@@ -0,0 +1,21 @@
+import NuxtRobots from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [
+    NuxtRobots,
+    '@nuxt/content',
+  ],
+
+  site: {
+    url: 'https://nuxtseo.com',
+  },
+  compatibilityDate: '2024-12-06',
+
+  debug: process.env.NODE_ENV === 'test',
+
+  sitemap: {
+    autoLastmod: false,
+    credits: false,
+    debug: true,
+  },
+})

test/fixtures/content-v3/app.vue

@@ -0,0 +1,12 @@
+{
+  "private": "true",
+  "scripts": {
+    "dev": "nuxi dev"
+  },
+  "dependencies": {
+    "nuxt": "^3.5.3"
+  },
+  "devDependencies": {
+    "@nuxt/content": "3.0.0-alpha.9"
+  }
+}

test/fixtures/content-v3/content.config.ts

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { queryCollection, useRoute } from '#imports'
+
+const route = useRoute()
+const { data: page } = await useAsyncData(`page-${route.path}`, () => {
+  return queryCollection('content').path(route.path).first()
+})
+useSeoMeta(page.value?.seo || {})
+</script>
+
+<template>
+  <div>
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+    />
+    <div v-else>
+      Page not found
+    </div>
+  </div>
+</template>

test/fixtures/content-v3/content/_partial.md

@@ -5,7 +5,7 @@ import { $fetch, setup } from '@nuxt/test-utils'
 const { resolve } = createResolver(import.meta.url)
 
 await setup({
-  rootDir: resolve('../../fixtures/content'),
+  rootDir: resolve('../../fixtures/content-v2'),
 })
 describe('nuxt/content default', () => {
   it('basic', async () => {

test/fixtures/content-v3/content/bar.md

@@ -5,7 +5,7 @@ import { $fetch, setup } from '@nuxt/test-utils'
 const { resolve } = createResolver(import.meta.url)
 
 await setup({
-  rootDir: resolve('../../fixtures/content'),
+  rootDir: resolve('../../fixtures/content-v2'),
   content: {
     documentDriven: true,
   },

test/fixtures/content-v3/content/foo.md

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import { createResolver } from '@nuxt/kit'
+import { $fetch, setup } from '@nuxt/test-utils'
+
+const { resolve } = createResolver(import.meta.url)
+
+await setup({
+  rootDir: resolve('../../fixtures/content-v3'),
+})
+describe('nuxt/content v3 default', () => {
+  it('basic', async () => {
+    const nuxtContentUrls = await $fetch('/__sitemap__/nuxt-content-urls.json')
+    expect(nuxtContentUrls).toMatchInlineSnapshot(`
+      [
+        {
+          "loc": "/_partial",
+        },
+        {
+          "changefreq": "daily",
+          "images": [
+            {
+              "loc": "https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg",
+            },
+          ],
+          "lastmod": "2021-10-20",
+          "loc": "/bar",
+          "priority": 0.5,
+        },
+        {
+          "loc": "/foo",
+          "priority": 0.5,
+        },
+        {
+          "lastmod": "2021-10-20",
+          "loc": "/posts/bar",
+        },
+        {
+          "lastmod": "2021-10-20",
+          "loc": "/posts/fallback",
+        },
+        {
+          "loc": "/posts/foo",
+        },
+      ]
+    `)
+
+    const sitemap = await $fetch('/sitemap.xml')
+    expect(sitemap).toMatchInlineSnapshot(`
+      "<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="/__sitemap__/style.xsl"?>
+      <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd http://www.google.com/schemas/sitemap-image/1.1 http://www.google.com/schemas/sitemap-image/1.1/sitemap-image.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+          <url>
+              <loc>https://nuxtseo.com/</loc>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/_partial</loc>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/bar</loc>
+              <image:image>
+                  <image:loc>https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg</image:loc>
+              </image:image>
+              <lastmod>2021-10-20</lastmod>
+              <priority>0.5</priority>
+              <changefreq>daily</changefreq>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/foo</loc>
+              <priority>0.5</priority>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/posts/bar</loc>
+              <lastmod>2021-10-20</lastmod>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/posts/fallback</loc>
+              <lastmod>2021-10-20</lastmod>
+          </url>
+          <url>
+              <loc>https://nuxtseo.com/posts/foo</loc>
+          </url>
+      </urlset>"
+    `)
+  }, 60000)
+})