handle frontmatter with remark

packages/docusaurus-mdx-loader/package.json

@@ -35,6 +35,7 @@
     "mdast-util-to-string": "^3.2.0",
     "rehype-raw": "^6.1.1",
     "remark-directive": "^2.0.1",
+    "remark-frontmatter": "^5.0.0",
     "remark-emoji": "^2.2.0",
     "remark-gfm": "^3.0.1",
     "stringify-object": "^3.3.0",

packages/docusaurus-mdx-loader/src/loader.ts

@@ -9,7 +9,6 @@ import fs from 'fs-extra';
 import logger from '@docusaurus/logger';
 import {
   parseFrontMatter,
-  parseMarkdownContentTitle,
   escapePath,
   getFileLoaderUtils,
 } from '@docusaurus/utils';
@@ -132,18 +131,11 @@ export async function mdxLoader(
   const {query} = this;
   ensureMarkdownConfig(reqOptions);
 
-  const {frontMatter, content: contentWithTitle} = parseFrontMatter(fileString);
+  const {frontMatter} = parseFrontMatter(fileString);
   const mdxFrontMatter = validateMDXFrontMatter(frontMatter.mdx);
 
-  const {content: contentUnprocessed, contentTitle} = parseMarkdownContentTitle(
-    contentWithTitle,
-    {
-      removeContentTitle: reqOptions.removeContentTitle,
-    },
-  );
-
-  const content = preprocessor({
-    fileContent: contentUnprocessed,
+  const preprocessedContent = preprocessor({
+    fileContent: fileString,
     filePath,
     admonitions: reqOptions.admonitions,
     markdownConfig: reqOptions.markdownConfig,
@@ -158,9 +150,9 @@ export async function mdxLoader(
     mdxFrontMatter,
   });
 
-  let result: string;
+  let result: {content: string; data: { [key: string]: unknown }};
   try {
-    result = await processor.process({content, filePath});
+    result = await processor.process({content: preprocessedContent, filePath});
   } catch (errorUnknown) {
     const error = errorUnknown as Error;
 
@@ -184,6 +176,8 @@ export async function mdxLoader(
     );
   }
 
+  const contentTitle = 'xyz'; // TODO !
+
   // MDX partials are MDX files starting with _ or in a folder starting with _
   // Partial are not expected to have associated metadata files or front matter
   const isMDXPartial = reqOptions.isMDXPartial?.(filePath);

packages/docusaurus-mdx-loader/src/processor.ts

@@ -36,7 +36,7 @@ type SimpleProcessor = {
   }: {
     content: string;
     filePath: string;
-  }) => Promise<string>;
+  }) => Promise<{content: string; data: { [key: string]: unknown }}>;
 };
 
 const DEFAULT_OPTIONS: MDXOptions = {
@@ -74,6 +74,7 @@ function getAdmonitionsPlugins(
 // Need to be async due to ESM dynamic imports...
 async function createProcessorFactory() {
   const {createProcessor: createMdxProcessor} = await import('@mdx-js/mdx');
+  const {default: frontmatter} = await import('remark-frontmatter');
   const {default: rehypeRaw} = await import('rehype-raw');
   const {default: gfm} = await import('remark-gfm');
   // TODO using fork until PR merged: https://github.com/leebyron/remark-comment/pull/3
@@ -91,6 +92,7 @@ async function createProcessorFactory() {
   }): SimpleProcessor {
     const remarkPlugins: MDXPlugin[] = [
       ...(options.beforeDefaultRemarkPlugins ?? []),
+      frontmatter,
       directive,
       ...getAdmonitionsPlugins(options.admonitions ?? false),
       ...DEFAULT_OPTIONS.remarkPlugins,
@@ -164,7 +166,10 @@ async function createProcessorFactory() {
             value: content,
             path: filePath,
           })
-          .then((res) => res.toString()),
+          .then((vfile) => ({
+              content: vfile.toString(),
+              data: vfile.data,
+            })),
     };
   }