@astrojs/mdx 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 5ec97556db3f4322
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.3.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 87ac7debf5e14016
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.5.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,34 @@
 # @astrojs/mdx
 
+## 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
+
+- [#4088](https://github.com/withastro/astro/pull/4088) [`1743fe140`](https://github.com/withastro/astro/commit/1743fe140eb58d60e26cbd11a066bb60de046e0c) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Support "layout" frontmatter property
+
+## 0.3.1
+
+### Patch Changes
+
+- [#4076](https://github.com/withastro/astro/pull/4076) [`6120a71e5`](https://github.com/withastro/astro/commit/6120a71e5425ad55a17ddac800d64a3f50273bce) Thanks [@matthewp](https://github.com/matthewp)! - Ensure file and url are always present in MDX for Astro.glob
+
 ## 0.3.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.
@@ -134,6 +152,71 @@ const posts = await Astro.glob('./*.mdx');
 ))}
 ```
 
+### Layouts
+
+Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#markdown-layouts). You can add a `layout` to [your frontmatter](#frontmatter) like so:
+
+```yaml
+---
+layout: '../layouts/BaseLayout.astro' 
+title: 'My Blog Post'
+---
+```
+
+Then, you can retrieve all other frontmatter properties from your layout via the `content` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots):
+
+```astro
+---
+// src/layouts/BaseLayout.astro
+const { content } = Astro.props;
+---
+<html>
+  <head>
+    <title>{content.title}</title>
+  </head>
+  <body>
+    <h1>{content.title}</h1>
+    <!-- Rendered MDX will be passed into the default slot. -->
+    <slot />
+  </body>
+</html>
+```
+
+#### Importing layouts manually
+
+You may need to pass information to your layouts that does not (or cannot) exist in your frontmatter. In this case, you can import and use a [`<Layout />` component](https://docs.astro.build/en/core-concepts/layouts/) like any other component:
+
+```mdx
+---
+// src/pages/posts/first-post.mdx
+
+title: 'My first MDX post'
+publishDate: '21 September 2022'
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+function fancyJsHelper() {
+  return "Try doing that with YAML!";
+}
+
+<BaseLayout title={frontmatter.title} fancyJsHelper={fancyJsHelper}>
+  Welcome to my new Astro blog, using MDX!
+</BaseLayout>
+```
+Then, your values are available to you through `Astro.props` in your layout, and your MDX content will be injected into the page where your `<slot />` component is written:
+
+```astro
+---
+// src/layouts/BaseLayout.astro
+const { title, fancyJsHelper } = Astro.props;
+---
+<!-- -->
+<h1>{title}</h1>
+<slot />
+<p>{fancyJsHelper()}</p>
+<!-- -->
+```
+
 ### Syntax highlighting
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
@@ -214,11 +297,26 @@ export default {
 <details>
   <summary><strong>rehypePlugins</strong></summary>
 
-**Default plugins:** none
+**Default plugins:** [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts)
 
 [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 [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin by default. 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 rehype plugins _while preserving_ Astro's default plugins, use a nested `extends` object like so:
+
+```js
+// astro.config.mjs
+import rehypeMinifyHtml from 'rehype-minify';
+
+export default {
+  integrations: [mdx({
+    rehypePlugins: { extends: [rehypeMinifyHtml] },
+  })],
+}
+```
+
+To apply plugins _without_ Astro's defaults, you can apply a plain array:
 
 ```js
 // astro.config.mjs

package/dist/index.js

@@ -1,4 +1,4 @@
-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";
@@ -7,9 +7,12 @@ 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 rehypeCollectHeadings from "./rehype-collect-headings.js";
 import remarkPrism from "./remark-prism.js";
-import { getFileInfo } from "./utils.js";
+import { getFileInfo, getFrontmatter } from "./utils.js";
 const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants];
+const DEFAULT_REHYPE_PLUGINS = [rehypeCollectHeadings];
 function handleExtends(config, defaults = []) {
   if (Array.isArray(config))
     return config;
@@ -22,10 +25,10 @@ function mdx(mdxOptions = {}) {
       "astro:config:setup": ({ updateConfig, config, addPageExtension, command }) => {
         addPageExtension(".mdx");
         let remarkPlugins = handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS);
-        let rehypePlugins = handleExtends(mdxOptions.rehypePlugins);
+        let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
         if (config.markdown.syntaxHighlight === "shiki") {
           remarkPlugins.push([
-            remarkShikiTwoslash.default,
+            remarkShikiTwoslash.default ?? remarkShikiTwoslash,
             config.markdown.shikiConfig
           ]);
           rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
@@ -42,32 +45,62 @@ function mdx(mdxOptions = {}) {
             ...mdxOptions.frontmatterOptions
           }
         ]);
+        const mdxPluginOpts = {
+          remarkPlugins,
+          rehypePlugins,
+          jsx: true,
+          jsxImportSource: "astro",
+          format: "mdx",
+          mdExtensions: []
+        };
         updateConfig({
           vite: {
             plugins: [
               {
                 enforce: "pre",
-                ...mdxPlugin({
-                  remarkPlugins,
-                  rehypePlugins,
-                  jsx: true,
-                  jsxImportSource: "astro",
-                  format: "mdx",
-                  mdExtensions: []
-                })
+                ...mdxPlugin(mdxPluginOpts),
+                async transform(code, id) {
+                  var _a;
+                  if (!id.endsWith("mdx"))
+                    return;
+                  if (!((_a = mdxOptions.frontmatterOptions) == null ? void 0 : _a.parsers)) {
+                    const frontmatter = getFrontmatter(code, id);
+                    if (frontmatter.layout) {
+                      const { layout, ...content } = frontmatter;
+                      code += `
+export default async function({ children }) {
+const Layout = (await import(${JSON.stringify(
+                        frontmatter.layout
+                      )})).default;
+return <Layout content={${JSON.stringify(
+                        content
+                      )}}>{children}</Layout> }`;
+                    }
+                  }
+                  const compiled = await mdxCompile(
+                    new VFile({ value: code, path: id }),
+                    mdxPluginOpts
+                  );
+                  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")) {
-                    const { fileUrl } = getFileInfo(id, config);
                     code += `
 export const url = ${JSON.stringify(fileUrl)};`;
+                  }
+                  if (!moduleExports.includes("file")) {
+                    code += `
+export const file = ${JSON.stringify(fileId)};`;
                   }
                   if (command === "dev") {
                     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,6 +1,18 @@
+import type { Options as AcornOpts } from 'acorn';
 import type { AstroConfig } from 'astro';
-/** @see 'vite-plugin-utils' for source */
-export declare function getFileInfo(id: string, config: AstroConfig): {
+import type { MdxjsEsm } from 'mdast-util-mdx';
+interface FileInfo {
     fileId: string;
-    fileUrl: string | undefined;
+    fileUrl: string;
+}
+/** @see 'vite-plugin-utils' for source */
+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 jsToTreeNode(jsString: string, acornOpts?: AcornOpts): MdxjsEsm;
+export {};

package/dist/utils.js

@@ -1,3 +1,5 @@
+import { parse } from "acorn";
+import matter from "gray-matter";
 function appendForwardSlash(path) {
   return path.endsWith("/") ? path : path + "/";
 }
@@ -5,13 +7,60 @@ function getFileInfo(id, config) {
   const sitePathname = appendForwardSlash(
     config.site ? new URL(config.base, config.site).pathname : config.base
   );
+  let url = void 0;
+  try {
+    url = new URL(`file://${id}`);
+  } catch {
+  }
   const fileId = id.split("?")[0];
-  let fileUrl = fileId.includes("/pages/") ? fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, "") : void 0;
+  let fileUrl;
+  const isPage = fileId.includes("/pages/");
+  if (isPage) {
+    fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, "");
+  } else if (url && url.pathname.startsWith(config.root.pathname)) {
+    fileUrl = url.pathname.slice(config.root.pathname.length);
+  } else {
+    fileUrl = fileId;
+  }
   if (fileUrl && config.trailingSlash === "always") {
     fileUrl = appendForwardSlash(fileUrl);
   }
   return { fileId, fileUrl };
 }
+function getFrontmatter(code, id) {
+  try {
+    return matter(code).data;
+  } catch (e) {
+    if (e.name === "YAMLException") {
+      const err = e;
+      err.id = id;
+      err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
+      err.message = e.reason;
+      throw err;
+    } else {
+      throw e;
+    }
+  }
+}
+function jsToTreeNode(jsString, acornOpts = {
+  ecmaVersion: "latest",
+  sourceType: "module"
+}) {
+  return {
+    type: "mdxjsEsm",
+    value: "",
+    data: {
+      estree: {
+        body: [],
+        ...parse(jsString, acornOpts),
+        type: "Program",
+        sourceType: "module"
+      }
+    }
+  };
+}
 export {
-  getFileInfo
+  getFileInfo,
+  getFrontmatter,
+  jsToTreeNode
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -24,29 +24,33 @@
     "./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",
-    "prismjs": "^1.28.0",
+    "github-slugger": "^1.4.0",
+    "gray-matter": "^4.0.3",
     "rehype-raw": "^6.1.1",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-mdx-frontmatter": "^2.0.2",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
-    "unist-util-visit": "^4.1.0",
-    "remark-frontmatter": "^4.0.1",
-    "remark-mdx-frontmatter": "^2.0.2"
+    "unist-util-visit": "^4.1.0"
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.0-rc.1",
+    "astro": "1.0.0-rc.4",
     "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/index.ts

@@ -1,4 +1,4 @@
-import { nodeTypes } from '@mdx-js/mdx';
+import { compile as mdxCompile, nodeTypes } from '@mdx-js/mdx';
 import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
@@ -9,8 +9,11 @@ import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 import remarkShikiTwoslash from 'remark-shiki-twoslash';
 import remarkSmartypants from 'remark-smartypants';
+import { VFile } from 'vfile';
+import type { Plugin as VitePlugin } from 'vite';
+import rehypeCollectHeadings from './rehype-collect-headings.js';
 import remarkPrism from './remark-prism.js';
-import { getFileInfo } from './utils.js';
+import { getFileInfo, getFrontmatter } from './utils.js';
 
 type WithExtends<T> = T | { extends: T };
 
@@ -26,6 +29,7 @@ type MdxOptions = {
 };
 
 const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants];
+const DEFAULT_REHYPE_PLUGINS = [rehypeCollectHeadings];
 
 function handleExtends<T>(config: WithExtends<T[] | undefined>, defaults: T[] = []): T[] {
 	if (Array.isArray(config)) return config;
@@ -40,7 +44,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 			'astro:config:setup': ({ updateConfig, config, addPageExtension, command }: any) => {
 				addPageExtension('.mdx');
 				let remarkPlugins = handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS);
-				let rehypePlugins = handleExtends(mdxOptions.rehypePlugins);
+				let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
 
 				if (config.markdown.syntaxHighlight === 'shiki') {
 					remarkPlugins.push([
@@ -48,7 +52,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 						// Workarounds tried:
 						// - "import * as remarkShikiTwoslash"
 						// - "import { default as remarkShikiTwoslash }"
-						(remarkShikiTwoslash as any).default,
+						(remarkShikiTwoslash as any).default ?? remarkShikiTwoslash,
 						config.markdown.shikiConfig,
 					]);
 					rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
@@ -68,38 +72,67 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					},
 				]);
 
+				const mdxPluginOpts: MdxRollupPluginOptions = {
+					remarkPlugins,
+					rehypePlugins,
+					jsx: true,
+					jsxImportSource: 'astro',
+					// Note: disable `.md` support
+					format: 'mdx',
+					mdExtensions: [],
+				};
+
 				updateConfig({
 					vite: {
 						plugins: [
 							{
 								enforce: 'pre',
-								...mdxPlugin({
-									remarkPlugins,
-									rehypePlugins,
-									jsx: true,
-									jsxImportSource: 'astro',
-									// Note: disable `.md` support
-									format: 'mdx',
-									mdExtensions: [],
-								}),
+								...mdxPlugin(mdxPluginOpts),
+								// Override transform to alter code before MDX compilation
+								// ex. inject layouts
+								async transform(code, id) {
+									if (!id.endsWith('mdx')) return;
+
+									// If user overrides our default YAML parser,
+									// do not attempt to parse the `layout` via gray-matter
+									if (!mdxOptions.frontmatterOptions?.parsers) {
+										const frontmatter = getFrontmatter(code, id);
+										if (frontmatter.layout) {
+											const { layout, ...content } = frontmatter;
+											code += `\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
+												frontmatter.layout
+											)})).default;\nreturn <Layout content={${JSON.stringify(
+												content
+											)}}>{children}</Layout> }`;
+										}
+									}
+
+									const compiled = await mdxCompile(
+										new VFile({ value: code, path: id }),
+										mdxPluginOpts
+									);
+
+									return {
+										code: String(compiled.value),
+										map: compiled.map,
+									};
+								},
 							},
 							{
-								name: '@astrojs/mdx',
-								transform(code: string, id: string) {
+								name: '@astrojs/mdx-postprocess',
+								// These transforms must happen *after* JSX runtime transformations
+								transform(code, id) {
 									if (!id.endsWith('.mdx')) return;
 									const [, moduleExports] = parseESM(code);
 
-									// This adds support for injected "page-ssr" scripts in MDX files.
-									// TODO: This should only be happening on page entrypoints, not all imported MDX.
-									// TODO: This code is copy-pasted across all Astro/Vite plugins that deal with page
-									// entrypoints (.astro, .md, .mdx). This should be handled in some centralized place,
-									// or otherwise refactored to not require copy-paste handling logic.
-									code += `\nimport "${'astro:scripts/page-ssr.js'}";`;
-
+									const { fileUrl, fileId } = getFileInfo(id, config);
 									if (!moduleExports.includes('url')) {
-										const { fileUrl } = getFileInfo(id, config);
 										code += `\nexport const url = ${JSON.stringify(fileUrl)};`;
 									}
+									if (!moduleExports.includes('file')) {
+										code += `\nexport const file = ${JSON.stringify(fileId)};`;
+									}
+
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach
 										code += `\nif (import.meta.hot) {
@@ -109,7 +142,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 									return code;
 								},
 							},
-						],
+						] as VitePlugin[],
 					},
 				});
 			},

package/src/rehype-collect-headings.ts

@@ -0,0 +1,50 @@
+import Slugger from 'github-slugger';
+import { visit } from 'unist-util-visit';
+import { jsToTreeNode } from './utils.js';
+
+export interface MarkdownHeading {
+	depth: number;
+	slug: string;
+	text: string;
+}
+
+export default function rehypeCollectHeadings() {
+	const slugger = new Slugger();
+	return function (tree: any) {
+		const headings: MarkdownHeading[] = [];
+		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 (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)} }`)
+		);
+	};
+}

package/src/remark-prism.ts

@@ -1,48 +1,6 @@
-// TODO: discuss extracting this file to @astrojs/prism
-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 = new Map([['ts', 'typescript']]);
-
-function runHighlighter(lang: string, code: string) {
-	let classLanguage = `language-${lang}`;
-
-	if (lang == null) {
-		lang = 'plaintext';
-	}
-
-	const ensureLoaded = (language: string) => {
-		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'); // Prism expects this to exist for a number of other langs
-		ensureLoaded(lang);
-	}
-
-	if (lang && !Prism.languages[lang]) {
-		// eslint-disable-next-line no-console
-		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 };
-}
-
 /**  */
 export default function remarkPrism() {
 	return (tree: any) =>
@@ -50,7 +8,7 @@ export default function remarkPrism() {
 			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/src/utils.ts

@@ -1,21 +1,85 @@
-import type { AstroConfig } from 'astro';
+import type { Options as AcornOpts } from 'acorn';
+import { parse } from 'acorn';
+import type { AstroConfig, SSRError } from 'astro';
+import type { MdxjsEsm } from 'mdast-util-mdx';
+
+import matter from 'gray-matter';
 
 function appendForwardSlash(path: string) {
 	return path.endsWith('/') ? path : path + '/';
 }
 
+interface FileInfo {
+	fileId: string;
+	fileUrl: string;
+}
+
 /** @see 'vite-plugin-utils' for source */
-export function getFileInfo(id: string, config: AstroConfig) {
+export function getFileInfo(id: string, config: AstroConfig): FileInfo {
 	const sitePathname = appendForwardSlash(
 		config.site ? new URL(config.base, config.site).pathname : config.base
 	);
 
+	// Try to grab the file's actual URL
+	let url: URL | undefined = undefined;
+	try {
+		url = new URL(`file://${id}`);
+	} catch {}
+
 	const fileId = id.split('?')[0];
-	let fileUrl = fileId.includes('/pages/')
-		? fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '')
-		: undefined;
+	let fileUrl: string;
+	const isPage = fileId.includes('/pages/');
+	if (isPage) {
+		fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '');
+	} else if (url && url.pathname.startsWith(config.root.pathname)) {
+		fileUrl = url.pathname.slice(config.root.pathname.length);
+	} else {
+		fileUrl = fileId;
+	}
+
 	if (fileUrl && config.trailingSlash === 'always') {
 		fileUrl = appendForwardSlash(fileUrl);
 	}
 	return { fileId, fileUrl };
 }
+
+/**
+ * Match YAML exception handling from Astro core errors
+ * @see 'astro/src/core/errors.ts'
+ */
+export function getFrontmatter(code: string, id: string) {
+	try {
+		return matter(code).data;
+	} catch (e: any) {
+		if (e.name === 'YAMLException') {
+			const err: SSRError = e;
+			err.id = id;
+			err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
+			err.message = e.reason;
+			throw err;
+		} else {
+			throw e;
+		}
+	}
+}
+
+export function jsToTreeNode(
+	jsString: string,
+	acornOpts: AcornOpts = {
+		ecmaVersion: 'latest',
+		sourceType: 'module',
+	}
+): MdxjsEsm {
+	return {
+		type: 'mdxjsEsm',
+		value: '',
+		data: {
+			estree: {
+				body: [],
+				...parse(jsString, acornOpts),
+				type: 'Program',
+				sourceType: 'module',
+			},
+		},
+	};
+}

package/test/fixtures/mdx-frontmatter/src/layouts/Base.astro

@@ -0,0 +1,18 @@
+---
+const { content = { title: "Didn't work" } } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{content.title}</title>
+</head>
+<body>
+	<h1>{content.title}</h1>
+	<p data-layout-rendered>Layout rendered!</p>
+	<slot />
+</body>
+</html>

package/test/fixtures/mdx-frontmatter/src/pages/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Using YAML frontmatter'
+layout: '../layouts/Base.astro'
 illThrowIfIDontExist: "Oh no, that's scary!"
 ---
 
-# {frontmatter.illThrowIfIDontExist}
+{frontmatter.illThrowIfIDontExist}

package/test/fixtures/mdx-get-headings/src/pages/pages.json.js

@@ -0,0 +1,11 @@
+export async function get() {
+	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
+
+	return {
+		body: JSON.stringify({
+			headingsByPage: Object.fromEntries(
+				Object.entries(mdxPages ?? {}).map(([k, v]) => [k, v?.getHeadings()])
+			),
+		}),
+	}
+}

package/test/fixtures/mdx-get-headings/src/pages/test-with-jsx-expressions.mdx

@@ -0,0 +1,8 @@
+export const h2Title = "Section 1"
+export const h3Title = "Subsection 1"
+
+# Heading test with JSX expressions
+
+## {h2Title}
+
+### {h3Title}

package/test/fixtures/mdx-get-headings/src/pages/test.mdx

@@ -0,0 +1,9 @@
+# Heading test
+
+## Section 1
+
+### Subsection 1
+
+### Subsection 2
+
+## Section 2

package/test/fixtures/mdx-get-static-paths/src/content/1.mdx

@@ -0,0 +1,5 @@
+---
+one: hello
+slug: one
+---
+First mdx file

package/test/fixtures/mdx-get-static-paths/src/pages/[slug].astro

@@ -0,0 +1,34 @@
+---
+export const getStaticPaths = async () => {
+	const content = await Astro.glob('../content/*.mdx');
+
+	return content
+    .filter((page) => !page.frontmatter.draft) // skip drafts
+    .map(({ default: MdxContent, frontmatter, url, file }) => {
+        return {
+          params: { slug: frontmatter.slug || "index" },
+          props: {
+            MdxContent,
+						file,
+            frontmatter,
+						url
+          }
+        }
+     })
+}
+
+const { MdxContent, frontmatter, url, file } = Astro.props;
+---
+
+<html>
+	<head>
+		<title>Page</title>
+	</head>
+	<body>
+		<MdxContent />
+
+		<div id="one">{frontmatter.one}</div>
+		<div id="url">{url}</div>
+		<div id="file">{file}</div>
+	</body>
+</html>

package/test/fixtures/mdx-page/astro.config.ts

@@ -0,0 +1,5 @@
+import mdx from '@astrojs/mdx';
+
+export default {
+	integrations: [mdx()]
+}

package/test/fixtures/mdx-page/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/mdx-page/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@test/mdx-page",
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*"
+  }
+}

package/test/fixtures/mdx-rehype-plugins/src/pages/reading-time.json.js

@@ -0,0 +1,7 @@
+import { readingTime } from './space-ipsum.mdx';
+
+export function get() {
+	return {
+		body: JSON.stringify(readingTime),
+	}
+}

package/test/fixtures/mdx-rehype-plugins/src/pages/space-ipsum.mdx

@@ -0,0 +1,25 @@
+# Space ipsum
+
+For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.
+
+It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn’t feel like a giant. I felt very, very small.
+
+Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
+
+## Section 2
+
+We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.
+
+There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.
+
+As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore . . . and this is exploration at its greatest.
+
+## Section 3
+
+Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman’s earth, if free men make it, will be truly round: a globe in practice, not in theory.
+
+To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?
+
+There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.
+
+We are all connected; To each other, biologically. To the earth, chemically. To the rest of the universe atomically.

package/test/mdx-frontmatter.test.js

@@ -1,6 +1,7 @@
 import mdx from '@astrojs/mdx';
 
 import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
 import { loadFixture } from '../../../astro/test/test-utils.js';
 
 const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter/', import.meta.url);
@@ -26,6 +27,36 @@ describe('MDX frontmatter', () => {
 		expect(titles).to.include('Using YAML frontmatter');
 	});
 
+	it('renders layout from "layout" frontmatter property', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		const layoutParagraph = document.querySelector('[data-layout-rendered]');
+
+		expect(layoutParagraph).to.not.be.null;
+	});
+
+	it('passes frontmatter to layout via "content" prop', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		const h1 = document.querySelector('h1');
+
+		expect(h1.textContent).to.equal('Using YAML frontmatter');
+	});
+
 	it('extracts frontmatter to "customFrontmatter" export when configured', async () => {
 		const fixture = await loadFixture({
 			root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url),

package/test/mdx-get-headings.test.js

@@ -0,0 +1,60 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX getHeadings', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
+			integrations: [mdx()],
+		});
+
+		await fixture.build();
+	});
+
+	it('adds anchor IDs to headings', async () => {
+		const html = await fixture.readFile('/test/index.html');
+		const { document } = parseHTML(html);
+
+		const h2Ids = document.querySelectorAll('h2').map((el) => el?.id);
+		const h3Ids = document.querySelectorAll('h3').map((el) => el?.id);
+		expect(document.querySelector('h1').id).to.equal('heading-test');
+		expect(h2Ids).to.contain('section-1');
+		expect(h2Ids).to.contain('section-2');
+		expect(h3Ids).to.contain('subsection-1');
+		expect(h3Ids).to.contain('subsection-2');
+	});
+
+	it('generates correct getHeadings() export', async () => {
+		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
+		// TODO: make this a snapshot test :)
+		expect(JSON.stringify(headingsByPage['./test.mdx'])).to.equal(
+			JSON.stringify([
+				{ depth: 1, slug: 'heading-test', text: 'Heading test' },
+				{ depth: 2, slug: 'section-1', text: 'Section 1' },
+				{ depth: 3, slug: 'subsection-1', text: 'Subsection 1' },
+				{ depth: 3, slug: 'subsection-2', text: 'Subsection 2' },
+				{ depth: 2, slug: 'section-2', text: 'Section 2' },
+			])
+		);
+	});
+
+	it('generates correct getHeadings() export for JSX expressions', async () => {
+		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(JSON.stringify(headingsByPage['./test-with-jsx-expressions.mdx'])).to.equal(
+			JSON.stringify([
+				{
+					depth: 1,
+					slug: 'heading-test-with-jsx-expressions',
+					text: 'Heading test with JSX expressions',
+				},
+				{ depth: 2, slug: 'h2title', text: 'h2Title' },
+				{ depth: 3, slug: 'h3title', text: 'h3Title' },
+			])
+		);
+	});
+});

package/test/mdx-get-static-paths.test.js

@@ -0,0 +1,32 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import * as cheerio from 'cheerio';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-get-static-paths', import.meta.url);
+
+describe('getStaticPaths', () => {
+	/** @type {import('astro/test/test-utils').Fixture} */
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+	});
+
+	it('Provides file and url', async () => {
+		const html = await fixture.readFile('/one/index.html');
+
+		const $ = cheerio.load(html);
+		expect($('p').text()).to.equal('First mdx file');
+		expect($('#one').text()).to.equal('hello', 'Frontmatter included');
+		expect($('#url').text()).to.equal('/src/content/1.mdx', 'url is included');
+		expect($('#file').text()).to.contain(
+			'fixtures/mdx-get-static-paths/src/content/1.mdx',
+			'file is included'
+		);
+	});
+});

package/test/mdx-page.test.js

@@ -10,7 +10,6 @@ describe('MDX Page', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: new URL('./fixtures/mdx-page/', import.meta.url),
-			integrations: [mdx()],
 		});
 	});
 

package/test/mdx-rehype-plugins.test.js

@@ -0,0 +1,81 @@
+import mdx from '@astrojs/mdx';
+import { jsToTreeNode } from '../dist/utils.js';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+export function rehypeReadingTime() {
+	return function (tree) {
+		const readingTime = getReadingTime(toString(tree));
+		tree.children.unshift(
+			jsToTreeNode(`export const readingTime = ${JSON.stringify(readingTime)}`)
+		);
+	};
+}
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-rehype-plugins/', import.meta.url);
+
+describe('MDX rehype plugins', () => {
+	describe('without "extends"', () => {
+		let fixture;
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [
+					mdx({
+						rehypePlugins: [rehypeReadingTime],
+					}),
+				],
+			});
+			await fixture.build();
+		});
+
+		it('removes default getHeadings', async () => {
+			const html = await fixture.readFile('/space-ipsum/index.html');
+			const { document } = parseHTML(html);
+
+			const headings = [...document.querySelectorAll('h1, h2')];
+			expect(headings.length).to.be.greaterThan(0);
+			for (const heading of headings) {
+				expect(heading.id).to.be.empty;
+			}
+		});
+
+		it('supports custom rehype plugins - reading time', async () => {
+			const readingTime = JSON.parse(await fixture.readFile('/reading-time.json'));
+
+			expect(readingTime).to.not.be.null;
+			expect(readingTime.text).to.match(/^\d+ min read/);
+		});
+	});
+
+	describe('with "extends"', () => {
+		let fixture;
+		before(async () => {
+			fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				integrations: [
+					mdx({
+						rehypePlugins: { extends: [rehypeReadingTime] },
+					}),
+				],
+			});
+			await fixture.build();
+		});
+
+		it('preserves default getHeadings', async () => {
+			const html = await fixture.readFile('/space-ipsum/index.html');
+			const { document } = parseHTML(html);
+
+			const headings = [...document.querySelectorAll('h1, h2')];
+			expect(headings.length).to.be.greaterThan(0);
+			for (const heading of headings) {
+				expect(heading.id).to.not.be.empty;
+			}
+		});
+	});
+});