feat: suport seo and meta frontmatter, close #2, close #3

Author: antfu

README.md

@@ -6,7 +6,7 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxt Module to compile markdown files into Vue SFC at build time.
+Nuxt Module to compile markdown files into Vue SFC at **build time**. This enables you to put `.md` files into your `pages` directory as standalone pages, and `.md` under `components` directory as Vue components. With components auto-import built-in in Nuxt, you can also use any components in your markdown files.
 
 ## Install
 
@@ -33,33 +33,11 @@ export default defineNuxtConfig({
 })
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+## FAQ
 
-## Development
+### How does this compare to [@nuxt/content](https://content.nuxtjs.org/)?
 
-```bash
-# Install dependencies
-npm install
-
-# Generate type stubs
-npm run dev:prepare
-
-# Develop with the playground
-npm run dev
-
-# Build the playground
-npm run dev:build
 
-# Run ESLint
-npm run lint
-
-# Run Vitest
-npm run test
-npm run test:watch
-
-# Release new version
-npm run release
-```
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-compile-markdown/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.6.5",
-    "unplugin-vue-markdown": "^0.24.1"
+    "unplugin-vue-markdown": "^0.24.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.40.2",
@@ -42,6 +42,6 @@
     "changelogen": "^0.5.4",
     "eslint": "^8.47.0",
     "nuxt": "^3.6.5",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.2"
   }
 }

playground/app.vue

@@ -1,3 +1,5 @@
 <template>
-  <NuxtPage />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

playground/pages/blog.md

@@ -3,6 +3,7 @@ title: Blog
 seo:
   title: 'Welcome to my blog'
   description: 'A list of article about Vue & Nuxt'
+  ogImage: https://nuxt.com/social.jpg
 meta:
   layout: dark
   middleware: log

playground/pages/index.md

@@ -1,3 +1,7 @@
+---
+title: Home!
+---
+
 # Hello
 
 Nuxt Page as Markdown

pnpm-lock.yaml

@@ -1,8 +1,8 @@
 import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'
-import type { Options } from 'unplugin-vue-markdown/types'
+import type { Options as MarkdownOptions } from 'unplugin-vue-markdown/types'
 import Markdown from 'unplugin-vue-markdown'
 
-export interface ModuleOptions extends Options { }
+export interface ModuleOptions extends MarkdownOptions { }
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -51,37 +51,57 @@ export default defineNuxtModule<ModuleOptions>({
         nuxt.options.vite.vue.include.push(reEndingOrQuery)
     }
 
-    options.include = [reEndingOrQuery]
     const originalMarkdownItSetup = options.markdownItSetup
-    options.markdownItSetup = async (md) => {
-      await originalMarkdownItSetup?.(md)
+    const resolvedOptions: MarkdownOptions = {
+      wrapperClasses: '',
+      ...options,
+      include: [reEndingOrQuery],
+      headEnabled: false,
+      async markdownItSetup(md) {
+        await originalMarkdownItSetup?.(md)
 
-      // Replace <a> with <NuxtLink>
-      md.core.ruler.push(
-        'NuxtLink',
-        (state) => {
-          type Token = (typeof state.tokens)[0]
-          function visit(token: Token) {
-            if (token.tag === 'a') {
-              token.tag = 'NuxtLink'
-              // Replace `href` with `to`
-              const hrefTag = token.attrs?.find(([name]) => name === 'href')
-              if (hrefTag)
-                hrefTag[0] = 'to'
+        // Replace <a> with <NuxtLink>
+        md.core.ruler.push(
+          'NuxtLink',
+          (state) => {
+            type Token = (typeof state.tokens)[0]
+            function visit(token: Token) {
+              if (token.tag === 'a') {
+                token.tag = 'NuxtLink'
+                // Replace `href` with `to`
+                const hrefTag = token.attrs?.find(([name]) => name === 'href')
+                if (hrefTag)
+                  hrefTag[0] = 'to'
+              }
+              token.children?.forEach(visit)
             }
-            token.children?.forEach(visit)
+
+            state.tokens.forEach(visit)
+          },
+        )
+      },
+
+      transforms: {
+        extraScripts(frontmatter) {
+          const scripts: string[] = []
+
+          if (frontmatter.meta)
+            scripts.push(`definePageMeta(${JSON.stringify(frontmatter.meta)})`)
+
+          if (frontmatter.seo || frontmatter.title || frontmatter.description) {
+            scripts.push(`useSeoMeta(${JSON.stringify({
+              ...frontmatter.title ? { title: frontmatter.title } : {},
+              ...frontmatter.description ? { description: frontmatter.description } : {},
+              ...frontmatter.seo,
+            })})`)
           }
 
-          state.tokens.forEach(visit)
+          return scripts
         },
-      )
+      },
     }
 
-    options.wrapperClasses = options.wrapperClasses || ''
-    // Force disabling head (leveraging `seo` key)
-    options.headEnabled = false
-
-    addVitePlugin(() => Markdown.vite(options))
-    addWebpackPlugin(() => Markdown.webpack(options))
+    addVitePlugin(() => Markdown.vite(resolvedOptions))
+    addWebpackPlugin(() => Markdown.webpack(resolvedOptions))
   },
 })