@astrojs/mdx 0.4.0 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output c4afb89e8a455a28
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.4.0 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output fbb8fed20a6e13e0
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.7.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @astrojs/mdx
 
+## 0.7.0
+
+### Minor Changes
+
+- [#4176](https://github.com/withastro/astro/pull/4176) [`2675b8633`](https://github.com/withastro/astro/commit/2675b8633c5d5c45b237ec87940d5eaf1bfb1b4b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Support frontmatter injection for MD and MDX using remark and rehype plugins
+
+### Patch Changes
+
+- [#4181](https://github.com/withastro/astro/pull/4181) [`77cede720`](https://github.com/withastro/astro/commit/77cede720b09bce34f29c3d2d8b505311ce876b1) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Make collect-headings rehype plugin non-overridable
+
+* [#4174](https://github.com/withastro/astro/pull/4174) [`8eb3a8c6d`](https://github.com/withastro/astro/commit/8eb3a8c6d9554707963c3a3bc36ed8b68d3cf0fb) Thanks [@matthewp](https://github.com/matthewp)! - Allows using React with automatic imports alongside MDX
+
+- [#4145](https://github.com/withastro/astro/pull/4145) [`c7efcf57e`](https://github.com/withastro/astro/commit/c7efcf57e00a0fcde3bc9f813e3cc59902bd484c) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Fix a missing newline bug when `layout` was set.
+
+## 0.6.0
+
+### Minor Changes
+
+- [#4134](https://github.com/withastro/astro/pull/4134) [`2968ba2b6`](https://github.com/withastro/astro/commit/2968ba2b6f00775b6e9872681b390cb466fdbfa2) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add `headings` and `frontmatter` properties to layout props
+
+## 0.5.0
+
+### Minor Changes
+
+- [#4095](https://github.com/withastro/astro/pull/4095) [`40ef43a59`](https://github.com/withastro/astro/commit/40ef43a59b08a1a8fbcd9f4a53745a9636a4fbb9) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add IDs to MDX headings and expose via getHeadings() export
+
+* [#4114](https://github.com/withastro/astro/pull/4114) [`64432bcb8`](https://github.com/withastro/astro/commit/64432bcb873efd0e4297c00fc9583a1fe516dfe7) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Refactor `@astrojs/mdx` and `@astrojs/markdown-remark` to use `@astrojs/prism` instead of duplicating the code
+
+### Patch Changes
+
+- [#4112](https://github.com/withastro/astro/pull/4112) [`e33fc9bc4`](https://github.com/withastro/astro/commit/e33fc9bc46ff0a30013deb6dc76e545e70cc3a3e) Thanks [@matthewp](https://github.com/matthewp)! - Fix MDX working with a ts config file
+
+* [#4049](https://github.com/withastro/astro/pull/4049) [`b60cc0538`](https://github.com/withastro/astro/commit/b60cc0538bc5c68dd411117780d20d892530789d) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Improve `injectScript` handling for non-Astro pages
+
+* Updated dependencies [[`64432bcb8`](https://github.com/withastro/astro/commit/64432bcb873efd0e4297c00fc9583a1fe516dfe7)]:
+  - @astrojs/prism@0.7.0
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -103,6 +103,24 @@ const posts = await Astro.glob('./*.mdx');
 
 See [the official "how MDX works" guide](https://mdxjs.com/docs/using-mdx/#how-mdx-works) for more on MDX variables.
 
+### Exported properties
+
+Alongside your [MDX variable exports](#variables), we generate a few helpful exports as well. These are accessible when importing an MDX file via `import` statements or [`Astro.glob`](https://docs.astro.build/en/reference/api-reference/#astroglob).
+
+#### `file`
+
+The absolute path to the MDX file (e.g. `home/user/projects/.../file.md`).
+
+#### `url`
+
+The browser-ready URL for MDX files under `src/pages/`. For example, `src/pages/en/about.mdx` will provide a `url` of `/en/about/`. For MDX files outside of `src/pages`, `url` will be `undefined`.
+
+#### `getHeadings()`
+
+**Returns:** `{ depth: number; slug: string; text: string }[]`
+
+A function that returns an array of all headings (i.e. `h1 -> h6` elements) in the MDX file. Each heading’s `slug` corresponds to the generated ID for a given heading and can be used for anchor links.
+
 ### Frontmatter
 
 Astro also supports YAML-based frontmatter out-of-the-box using the [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) plugin. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export. See the `frontmatterOptions` configuration to customize this behavior.
@@ -279,11 +297,11 @@ export default {
 <details>
   <summary><strong>rehypePlugins</strong></summary>
 
-**Default plugins:** none
-
 [Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We recommend checking the [Remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) catalog first _before_ considering rehype plugins, since most users want to transform their Markdown syntax instead. If HTML transforms are what you need, we encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
 
-To apply rehype plugins, use the `rehypePlugins` configuration option like so:
+We apply our own (non-overridable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
+
+To apply additional rehype plugins, pass an array to the `rehypePlugins` option like so:
 
 ```js
 // astro.config.mjs

package/dist/astro-data-utils.d.ts

@@ -0,0 +1,9 @@
+import type { MarkdownAstroData } from 'astro';
+import type { Data, VFile } from 'vfile';
+export declare function remarkInitializeAstroData(): (tree: any, vfile: VFile) => void;
+export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>, exportName?: string): (tree: any, vfile: VFile) => void;
+/**
+ * Copied from markdown utils
+ * @see "vite-plugin-utils"
+ */
+export declare function safelyGetAstroData(vfileData: Data): MarkdownAstroData;

package/dist/astro-data-utils.js

@@ -0,0 +1,66 @@
+import { name as isValidIdentifierName } from "estree-util-is-identifier-name";
+import { jsToTreeNode } from "./utils.js";
+function remarkInitializeAstroData() {
+  return function(tree, vfile) {
+    if (!vfile.data.astro) {
+      vfile.data.astro = { frontmatter: {} };
+    }
+  };
+}
+function rehypeApplyFrontmatterExport(pageFrontmatter, exportName = "frontmatter") {
+  return function(tree, vfile) {
+    if (!isValidIdentifierName(exportName)) {
+      throw new Error(
+        `[MDX] ${JSON.stringify(
+          exportName
+        )} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
+      );
+    }
+    const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
+    const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
+    let exportNodes = [];
+    if (!exportName) {
+      exportNodes = Object.entries(frontmatter).map(([k, v]) => {
+        if (!isValidIdentifierName(k)) {
+          throw new Error(
+            `[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
+              k
+            )} as a top-level export, which is not a valid export name.`
+          );
+        }
+        return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
+      });
+    } else {
+      exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
+    }
+    tree.children = exportNodes.concat(tree.children);
+  };
+}
+function isValidAstroData(obj) {
+  if (typeof obj === "object" && obj !== null && obj.hasOwnProperty("frontmatter")) {
+    const { frontmatter } = obj;
+    try {
+      JSON.stringify(frontmatter);
+    } catch {
+      return false;
+    }
+    return typeof frontmatter === "object" && frontmatter !== null;
+  }
+  return false;
+}
+function safelyGetAstroData(vfileData) {
+  const { astro } = vfileData;
+  if (!astro)
+    return { frontmatter: {} };
+  if (!isValidAstroData(astro)) {
+    throw Error(
+      `[MDX] A remark or rehype plugin tried to add invalid frontmatter. Ensure "astro.frontmatter" is a JSON object!`
+    );
+  }
+  return astro;
+}
+export {
+  rehypeApplyFrontmatterExport,
+  remarkInitializeAstroData,
+  safelyGetAstroData
+};

package/dist/index.js

@@ -1,92 +1,109 @@
-import { nodeTypes } from "@mdx-js/mdx";
+import { compile as mdxCompile, nodeTypes } from "@mdx-js/mdx";
 import mdxPlugin from "@mdx-js/rollup";
 import { parse as parseESM } from "es-module-lexer";
 import rehypeRaw from "rehype-raw";
-import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
-import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import remarkShikiTwoslash from "remark-shiki-twoslash";
 import remarkSmartypants from "remark-smartypants";
+import { VFile } from "vfile";
+import { rehypeApplyFrontmatterExport, remarkInitializeAstroData } from "./astro-data-utils.js";
+import rehypeCollectHeadings from "./rehype-collect-headings.js";
 import remarkPrism from "./remark-prism.js";
-import { getFileInfo, getFrontmatter } from "./utils.js";
-const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants];
+import { getFileInfo, parseFrontmatter } from "./utils.js";
+const DEFAULT_REMARK_PLUGINS = [
+  remarkGfm,
+  remarkSmartypants
+];
+const DEFAULT_REHYPE_PLUGINS = [];
 function handleExtends(config, defaults = []) {
   if (Array.isArray(config))
     return config;
   return [...defaults, ...(config == null ? void 0 : config.extends) ?? []];
 }
+function getRemarkPlugins(mdxOptions, config) {
+  let remarkPlugins = [
+    remarkInitializeAstroData,
+    ...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS)
+  ];
+  if (config.markdown.syntaxHighlight === "shiki") {
+    const shikiTwoslash = remarkShikiTwoslash.default ?? remarkShikiTwoslash;
+    remarkPlugins.push([shikiTwoslash, config.markdown.shikiConfig]);
+  }
+  if (config.markdown.syntaxHighlight === "prism") {
+    remarkPlugins.push(remarkPrism);
+  }
+  return remarkPlugins;
+}
+function getRehypePlugins(mdxOptions, config) {
+  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
+  if (config.markdown.syntaxHighlight === "shiki" || config.markdown.syntaxHighlight === "prism") {
+    rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
+  }
+  rehypePlugins.push(rehypeCollectHeadings);
+  return rehypePlugins;
+}
 function mdx(mdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
       "astro:config:setup": ({ updateConfig, config, addPageExtension, command }) => {
         addPageExtension(".mdx");
-        let remarkPlugins = handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS);
-        let rehypePlugins = handleExtends(mdxOptions.rehypePlugins);
-        if (config.markdown.syntaxHighlight === "shiki") {
-          remarkPlugins.push([
-            remarkShikiTwoslash.default,
-            config.markdown.shikiConfig
-          ]);
-          rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
-        }
-        if (config.markdown.syntaxHighlight === "prism") {
-          remarkPlugins.push(remarkPrism);
-          rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
-        }
-        remarkPlugins.push(remarkFrontmatter);
-        remarkPlugins.push([
-          remarkMdxFrontmatter,
-          {
-            name: "frontmatter",
-            ...mdxOptions.frontmatterOptions
-          }
-        ]);
-        const configuredMdxPlugin = mdxPlugin({
-          remarkPlugins,
-          rehypePlugins,
+        const mdxPluginOpts = {
+          remarkPlugins: getRemarkPlugins(mdxOptions, config),
+          rehypePlugins: getRehypePlugins(mdxOptions, config),
           jsx: true,
           jsxImportSource: "astro",
           format: "mdx",
           mdExtensions: []
-        });
+        };
         updateConfig({
           vite: {
             plugins: [
               {
                 enforce: "pre",
-                ...configuredMdxPlugin,
+                ...mdxPlugin(mdxPluginOpts),
                 async transform(code, id) {
-                  var _a, _b;
-                  if (!id.endsWith(".mdx"))
+                  if (!id.endsWith("mdx"))
                     return;
-                  const mdxPluginTransform = (_a = configuredMdxPlugin.transform) == null ? void 0 : _a.bind(this);
-                  if ((_b = mdxOptions.frontmatterOptions) == null ? void 0 : _b.parsers) {
-                    return mdxPluginTransform == null ? void 0 : mdxPluginTransform(code, id);
-                  }
-                  const frontmatter = getFrontmatter(code, id);
+                  let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
                   if (frontmatter.layout) {
-                    const { layout, ...content } = frontmatter;
-                    code += `
+                    const { layout, ...contentProp } = frontmatter;
+                    pageContent += `
+
 export default async function({ children }) {
 const Layout = (await import(${JSON.stringify(
                       frontmatter.layout
                     )})).default;
-return <Layout content={${JSON.stringify(
-                      content
-                    )}}>{children}</Layout> }`;
+const frontmatter=${JSON.stringify(
+                      contentProp
+                    )};
+return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
                   }
-                  return mdxPluginTransform == null ? void 0 : mdxPluginTransform(code, id);
+                  const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
+                    ...mdxPluginOpts,
+                    rehypePlugins: [
+                      ...mdxPluginOpts.rehypePlugins ?? [],
+                      () => {
+                        var _a;
+                        return rehypeApplyFrontmatterExport(
+                          frontmatter,
+                          (_a = mdxOptions.frontmatterOptions) == null ? void 0 : _a.name
+                        );
+                      }
+                    ]
+                  });
+                  return {
+                    code: String(compiled.value),
+                    map: compiled.map
+                  };
                 }
               },
               {
-                name: "@astrojs/mdx",
+                name: "@astrojs/mdx-postprocess",
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;
                   const [, moduleExports] = parseESM(code);
-                  code += `
-import "${"astro:scripts/page-ssr.js"}";`;
                   const { fileUrl, fileId } = getFileInfo(id, config);
                   if (!moduleExports.includes("url")) {
                     code += `

package/dist/rehype-collect-headings.d.ts

@@ -0,0 +1,6 @@
+export interface MarkdownHeading {
+    depth: number;
+    slug: string;
+    text: string;
+}
+export default function rehypeCollectHeadings(): (tree: any) => void;

package/dist/rehype-collect-headings.js

@@ -0,0 +1,47 @@
+import Slugger from "github-slugger";
+import { visit } from "unist-util-visit";
+import { jsToTreeNode } from "./utils.js";
+function rehypeCollectHeadings() {
+  const slugger = new Slugger();
+  return function(tree) {
+    const headings = [];
+    visit(tree, (node) => {
+      if (node.type !== "element")
+        return;
+      const { tagName } = node;
+      if (tagName[0] !== "h")
+        return;
+      const [_, level] = tagName.match(/h([0-6])/) ?? [];
+      if (!level)
+        return;
+      const depth = Number.parseInt(level);
+      let text = "";
+      visit(node, (child, __, parent) => {
+        if (child.type === "element" || parent == null) {
+          return;
+        }
+        if (child.type === "raw" && child.value.match(/^\n?<.*>\n?$/)) {
+          return;
+        }
+        if ((/* @__PURE__ */ new Set(["text", "raw", "mdxTextExpression"])).has(child.type)) {
+          text += child.value;
+        }
+      });
+      node.properties = node.properties || {};
+      if (typeof node.properties.id !== "string") {
+        let slug = slugger.slug(text);
+        if (slug.endsWith("-")) {
+          slug = slug.slice(0, -1);
+        }
+        node.properties.id = slug;
+      }
+      headings.push({ depth, slug: node.properties.id, text });
+    });
+    tree.children.unshift(
+      jsToTreeNode(`export function getHeadings() { return ${JSON.stringify(headings)} }`)
+    );
+  };
+}
+export {
+  rehypeCollectHeadings as default
+};

package/dist/remark-prism.js

@@ -1,42 +1,10 @@
-import { addAstro } from "@astrojs/prism/internal";
-import Prism from "prismjs";
-import loadLanguages from "prismjs/components/index.js";
+import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
 import { visit } from "unist-util-visit";
-const languageMap = /* @__PURE__ */ new Map([["ts", "typescript"]]);
-function runHighlighter(lang, code) {
-  let classLanguage = `language-${lang}`;
-  if (lang == null) {
-    lang = "plaintext";
-  }
-  const ensureLoaded = (language) => {
-    if (language && !Prism.languages[language]) {
-      loadLanguages([language]);
-    }
-  };
-  if (languageMap.has(lang)) {
-    ensureLoaded(languageMap.get(lang));
-  } else if (lang === "astro") {
-    ensureLoaded("typescript");
-    addAstro(Prism);
-  } else {
-    ensureLoaded("markup-templating");
-    ensureLoaded(lang);
-  }
-  if (lang && !Prism.languages[lang]) {
-    console.warn(`Unable to load the language: ${lang}`);
-  }
-  const grammar = Prism.languages[lang];
-  let html = code;
-  if (grammar) {
-    html = Prism.highlight(code, grammar, lang);
-  }
-  return { classLanguage, html };
-}
 function remarkPrism() {
   return (tree) => visit(tree, "code", (node) => {
     let { lang, value } = node;
     node.type = "html";
-    let { html, classLanguage } = runHighlighter(lang, value);
+    let { html, classLanguage } = runHighlighterWithAstro(lang, value);
     let classes = [classLanguage];
     node.value = `<pre class="${classes.join(
       " "

package/dist/utils.d.ts

@@ -1,4 +1,7 @@
+import type { Options as AcornOpts } from 'acorn';
 import type { AstroConfig } from 'astro';
+import type { MdxjsEsm } from 'mdast-util-mdx';
+import matter from 'gray-matter';
 interface FileInfo {
     fileId: string;
     fileUrl: string;
@@ -9,7 +12,6 @@ export declare function getFileInfo(id: string, config: AstroConfig): FileInfo;
  * Match YAML exception handling from Astro core errors
  * @see 'astro/src/core/errors.ts'
  */
-export declare function getFrontmatter(code: string, id: string): {
-    [key: string]: any;
-};
+export declare function parseFrontmatter(code: string, id: string): matter.GrayMatterFile<string>;
+export declare function jsToTreeNode(jsString: string, acornOpts?: AcornOpts): MdxjsEsm;
 export {};

package/dist/utils.js

@@ -1,3 +1,4 @@
+import { parse } from "acorn";
 import matter from "gray-matter";
 function appendForwardSlash(path) {
   return path.endsWith("/") ? path : path + "/";
@@ -26,9 +27,9 @@ function getFileInfo(id, config) {
   }
   return { fileId, fileUrl };
 }
-function getFrontmatter(code, id) {
+function parseFrontmatter(code, id) {
   try {
-    return matter(code).data;
+    return matter(code);
   } catch (e) {
     if (e.name === "YAMLException") {
       const err = e;
@@ -41,7 +42,25 @@ function getFrontmatter(code, id) {
     }
   }
 }
+function jsToTreeNode(jsString, acornOpts = {
+  ecmaVersion: "latest",
+  sourceType: "module"
+}) {
+  return {
+    type: "mdxjsEsm",
+    value: "",
+    data: {
+      estree: {
+        body: [],
+        ...parse(jsString, acornOpts),
+        type: "Program",
+        sourceType: "module"
+      }
+    }
+  };
+}
 export {
   getFileInfo,
-  getFrontmatter
+  jsToTreeNode,
+  parseFrontmatter
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -14,7 +14,6 @@
   "keywords": [
     "astro-integration",
     "astro-component",
-    "renderer",
     "mdx"
   ],
   "bugs": "https://github.com/withastro/astro/issues",
@@ -24,12 +23,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/prism": "^0.6.1",
+    "@astrojs/prism": "^0.7.0",
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/rollup": "^2.1.1",
+    "acorn": "^8.8.0",
     "es-module-lexer": "^0.10.5",
+    "github-slugger": "^1.4.0",
     "gray-matter": "^4.0.3",
-    "prismjs": "^1.28.0",
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
@@ -37,17 +37,20 @@
     "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
-    "unist-util-visit": "^4.1.0"
+    "unist-util-visit": "^4.1.0",
+    "vfile": "^5.3.2"
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.0-rc.3",
+    "astro": "1.0.0-rc.7",
     "astro-scripts": "0.0.6",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",
+    "mdast-util-to-string": "^3.1.0",
     "mocha": "^9.2.2",
+    "reading-time": "^1.5.0",
     "remark-toc": "^8.0.1"
   },
   "engines": {

package/src/astro-data-utils.ts

@@ -0,0 +1,81 @@
+import type { MarkdownAstroData } from 'astro';
+import { name as isValidIdentifierName } from 'estree-util-is-identifier-name';
+import type { MdxjsEsm } from 'mdast-util-mdx';
+import type { Data, VFile } from 'vfile';
+import { jsToTreeNode } from './utils.js';
+
+export function remarkInitializeAstroData() {
+	return function (tree: any, vfile: VFile) {
+		if (!vfile.data.astro) {
+			vfile.data.astro = { frontmatter: {} };
+		}
+	};
+}
+
+export function rehypeApplyFrontmatterExport(
+	pageFrontmatter: Record<string, any>,
+	exportName = 'frontmatter'
+) {
+	return function (tree: any, vfile: VFile) {
+		if (!isValidIdentifierName(exportName)) {
+			throw new Error(
+				`[MDX] ${JSON.stringify(
+					exportName
+				)} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
+			);
+		}
+		const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
+		const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
+		let exportNodes: MdxjsEsm[] = [];
+		if (!exportName) {
+			exportNodes = Object.entries(frontmatter).map(([k, v]) => {
+				if (!isValidIdentifierName(k)) {
+					throw new Error(
+						`[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
+							k
+						)} as a top-level export, which is not a valid export name.`
+					);
+				}
+				return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
+			});
+		} else {
+			exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
+		}
+		tree.children = exportNodes.concat(tree.children);
+	};
+}
+
+/**
+ * Copied from markdown utils
+ * @see "vite-plugin-utils"
+ */
+function isValidAstroData(obj: unknown): obj is MarkdownAstroData {
+	if (typeof obj === 'object' && obj !== null && obj.hasOwnProperty('frontmatter')) {
+		const { frontmatter } = obj as any;
+		try {
+			// ensure frontmatter is JSON-serializable
+			JSON.stringify(frontmatter);
+		} catch {
+			return false;
+		}
+		return typeof frontmatter === 'object' && frontmatter !== null;
+	}
+	return false;
+}
+
+/**
+ * Copied from markdown utils
+ * @see "vite-plugin-utils"
+ */
+export function safelyGetAstroData(vfileData: Data): MarkdownAstroData {
+	const { astro } = vfileData;
+
+	if (!astro) return { frontmatter: {} };
+	if (!isValidAstroData(astro)) {
+		throw Error(
+			`[MDX] A remark or rehype plugin tried to add invalid frontmatter. Ensure "astro.frontmatter" is a JSON object!`
+		);
+	}
+
+	return astro;
+}