feat(build): support markdown frontmatter options (#1218)

Author: meteorlxy

package.json

@@ -93,7 +93,9 @@
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^0.9.2",
+    "@mdit-vue/plugin-frontmatter": "^0.9.2",
     "@mdit-vue/plugin-toc": "^0.9.2",
+    "@mdit-vue/types": "^0.9.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
@@ -129,7 +131,6 @@
     "execa": "^6.1.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
-    "gray-matter": "^4.0.3",
     "lint-staged": "^13.0.3",
     "lru-cache": "^7.13.2",
     "markdown-it": "^13.0.1",

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+import type { MarkdownItEnv } from '@mdit-vue/types'
+import { CleanUrlsMode } from '../shared'
+
+export interface MarkdownEnv extends MarkdownItEnv {
+  path: string
+  relativePath: string
+  cleanUrls: CleanUrlsMode
+}

src/node/markdown/env.ts

@@ -0,0 +1,2 @@
+export * from './env'
+export * from './markdown'

src/node/markdown/index.ts

@@ -3,6 +3,10 @@ import anchorPlugin from 'markdown-it-anchor'
 import attrsPlugin from 'markdown-it-attrs'
 import emojiPlugin from 'markdown-it-emoji'
 import { componentPlugin } from '@mdit-vue/plugin-component'
+import {
+  frontmatterPlugin,
+  type FrontmatterPluginOptions
+} from '@mdit-vue/plugin-frontmatter'
 import { tocPlugin, type TocPluginOptions } from '@mdit-vue/plugin-toc'
 import { IThemeRegistration } from 'shiki'
 import { highlight } from './plugins/highlight'
@@ -32,6 +36,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
     allowedAttributes?: string[]
     disable?: boolean
   }
+  frontmatter?: FrontmatterPluginOptions
   theme?: ThemeOptions
   toc?: TocPluginOptions
   externalLinks?: Record<string, string>
@@ -92,6 +97,9 @@ export const createMarkdownRenderer = async (
     permalink: anchorPlugin.permalink.ariaHidden({}),
     ...options.anchor
   } as anchorPlugin.AnchorOptions)
+    .use(frontmatterPlugin, {
+      ...options.frontmatter
+    } as FrontmatterPluginOptions)
     .use(tocPlugin, {
       slugify,
       ...options.toc

src/node/markdown/markdown.ts

@@ -3,7 +3,8 @@
 // 2. normalize internal links to end with `.html`
 
 import MarkdownIt from 'markdown-it'
-import { MarkdownRenderer } from '../markdown'
+import type { MarkdownEnv } from '../env'
+import type { MarkdownRenderer } from '../markdown'
 import { URL } from 'url'
 import { EXTERNAL_URL_RE, CleanUrlsMode } from '../../shared'
 
@@ -14,7 +15,13 @@ export const linkPlugin = (
   externalAttrs: Record<string, string>,
   base: string
 ) => {
-  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+  md.renderer.rules.link_open = (
+    tokens,
+    idx,
+    options,
+    env: MarkdownEnv,
+    self
+  ) => {
     const token = tokens[idx]
     const hrefIndex = token.attrIndex('href')
     if (hrefIndex >= 0) {
@@ -37,7 +44,7 @@ export const linkPlugin = (
         // links to files (other than html/md)
         !/\.(?!html|md)\w+($|\?)/i.test(url)
       ) {
-        normalizeHref(hrefAttr, env.cleanUrl)
+        normalizeHref(hrefAttr, env.cleanUrls)
       }
 
       // encode vite-specific replace strings in case they appear in URLs

src/node/markdown/plugins/link.ts

@@ -1,13 +1,16 @@
 import fs from 'fs'
 import path from 'path'
 import c from 'picocolors'
-import matter from 'gray-matter'
 import LRUCache from 'lru-cache'
 import { PageData, HeadConfig, EXTERNAL_URL_RE, CleanUrlsMode } from './shared'
 import { slash } from './utils/slash'
 import { deeplyParseHeader } from './utils/parseHeader'
 import { getGitTimestamp } from './utils/getGitTimestamp'
-import { createMarkdownRenderer, MarkdownOptions } from './markdown/markdown'
+import {
+  createMarkdownRenderer,
+  type MarkdownEnv,
+  type MarkdownOptions
+} from './markdown'
 import _debug from 'debug'
 
 const debug = _debug('vitepress:md')
@@ -69,19 +72,18 @@ export async function createMarkdownToVueRenderFn(
       }
     })
 
-    const { content, data: frontmatter } = matter(src)
-
     // reset state before render
     md.__path = file
     md.__relativePath = relativePath
 
-    const html = md.render(content, {
+    const env: MarkdownEnv = {
       path: file,
       relativePath,
-      cleanUrls,
-      frontmatter
-    })
+      cleanUrls
+    }
+    const html = md.render(src, env)
     const data = md.__data
+    const { content = '', frontmatter = {} } = env
 
     // validate data.links
     const deadLinks: string[] = []
@@ -128,7 +130,7 @@ export async function createMarkdownToVueRenderFn(
 
     const pageData: PageData = {
       title: inferTitle(frontmatter, content),
-      titleTemplate: frontmatter.titleTemplate,
+      titleTemplate: frontmatter.titleTemplate as any,
       description: inferDescription(frontmatter),
       frontmatter,
       headers: data.headers || [],