@astrojs/mdx 0.2.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 345323bc7c261c68
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.2.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 0a3d73b5c732032a
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.3.1 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,33 @@
 # @astrojs/mdx
 
+## 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
+
+- [#3977](https://github.com/withastro/astro/pull/3977) [`19433eb4a`](https://github.com/withastro/astro/commit/19433eb4a4441522f68492ca914ad2ab4f061343) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add remarkPlugins and rehypePlugins to config, with the same default plugins as our standard Markdown parser
+
+* [#4002](https://github.com/withastro/astro/pull/4002) [`3b8a74452`](https://github.com/withastro/astro/commit/3b8a7445247221100462ba035f6778b43ea180e7) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Support Prism and Shiki syntax highlighting based on project config
+
+- [#3995](https://github.com/withastro/astro/pull/3995) [`b2b367c96`](https://github.com/withastro/astro/commit/b2b367c969493aaf21c974064beb241d05228066) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Support YAML frontmatter in MDX files
+
+### Patch Changes
+
+- [#4050](https://github.com/withastro/astro/pull/4050) [`9ab66c4ba`](https://github.com/withastro/astro/commit/9ab66c4ba9bf2250990114c76b792f26d0694365) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Add support for injected "page-ssr" scripts
+
+* [#3981](https://github.com/withastro/astro/pull/3981) [`61fec6304`](https://github.com/withastro/astro/commit/61fec63044e1585348e8405bee6fdf4dec635efa) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Include page url in MDX glob result
+
+## 0.2.1
+
+### Patch Changes
+
+- [#3937](https://github.com/withastro/astro/pull/3937) [`31f9c0bf0`](https://github.com/withastro/astro/commit/31f9c0bf029ffa4b470e620f2c32e1370643e81e) Thanks [@delucis](https://github.com/delucis)! - Roll back supported Node engines
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -78,9 +78,231 @@ To write your first MDX page in Astro, head to our [UI framework documentation][
 
 Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
+### Variables
+
+MDX supports `export` statements to add variables to your templates. These variables are accessible both from the template itself _and_ as named properties when importing the template somewhere else.
+
+For instance, you can export a `title` field from an MDX page or component to use as a heading with `{JSX expressions}`:
+
+```mdx
+export const title = 'My first MDX post'
+
+# {title}
+```
+
+This `title` will be accessible from `import` and [glob](https://docs.astro.build/en/reference/api-reference/#astroglob) statements as well:
+
+```astro
+---
+// src/pages/index.astro
+const posts = await Astro.glob('./*.mdx');
+---
+
+{posts.map(post => <p>{post.title}</p>)}
+```
+
+See [the official "how MDX works" guide](https://mdxjs.com/docs/using-mdx/#how-mdx-works) for more on MDX variables.
+
+### 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.
+
+For example, we can add a `title` and `publishDate` to an MDX page or component like so:
+
+```mdx
+---
+title: 'My first MDX post'
+publishDate: '21 September 2022'
+---
+
+# {frontmatter.title}
+```
+
+Now, this `title` and `publishDate` will be accessible from `import` and [glob](https://docs.astro.build/en/reference/api-reference/#astroglob) statements via the `frontmatter` property. This matches the behavior of [plain markdown in Astro](https://docs.astro.build/en/reference/api-reference/#markdown-files) as well!
+
+```astro
+---
+// src/pages/index.astro
+const posts = await Astro.glob('./*.mdx');
+---
+
+{posts.map(post => (
+  <Fragment>
+    <h2>{post.frontmatter.title}</h2>
+    <time>{post.frontmatter.publishDate}</time>
+  </Fragment>
+))}
+```
+
+### Layouts
+
+You can use the [MDX layout component](https://mdxjs.com/docs/using-mdx/#layout) to specify a layout component to wrap all page content. This is done with a default export statement at the end of your `.mdx` file:
+
+```mdx
+// src/pages/my-page.mdx
+
+export {default} from '../../layouts/BaseLayout.astro';
+```
+
+You can also import and use a [`<Layout />` component](/en/core-concepts/layouts/) for your MDX page content, and pass all the variables declared in frontmatter as props. 
+
+```mdx
+---
+// src/pages/posts/first-post.mdx
+
+title: 'My first MDX post'
+publishDate: '21 September 2022'
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+<BaseLayout {...frontmatter}>
+  # {frontmatter.title}
+
+  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, publishDate } = Astro.props;
+---
+<!-- -->
+<h1>{title}</h1>
+<slot />
+<p>Published on {publishDate}</p>
+<!-- -->
+```
+
+### Syntax highlighting
+
+The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
+
+We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default [using Shiki twoslash](https://shikijs.github.io/twoslash/). You can customize [this remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash) using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
+
+```js
+// astro.config.mjs
+export default {
+  markdown: {
+    shikiConfig: {
+      theme: 'dracula',
+    },
+  },
+  integrations: [mdx()],
+}
+```
+
+Visit [our Shiki configuration docs](https://docs.astro.build/en/guides/markdown-content/#shiki-configuration) for more on using Shiki with Astro.
+
+#### Switch to Prism
+
+You can also use the [Prism](https://prismjs.com/) syntax highlighter by setting `markdown.syntaxHighlight` to `'prism'` in your `astro.config` like so:
+
+```js
+// astro.config.mjs
+export default {
+  markdown: {
+    syntaxHighlight: 'prism',
+  },
+  integrations: [mdx()],
+}
+```
+
+This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
+
 ## Configuration
 
-There are currently no configuration options for the `@astrojs/mdx` integration. Please [open an issue](https://github.com/withastro/astro/issues/new/choose) if you have a compelling use case to share.
+<details>
+  <summary><strong>remarkPlugins</strong></summary>
+
+**Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)
+
+[Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) allow you to extend your Markdown with new capabilities. This includes [auto-generating a table of contents](https://github.com/remarkjs/remark-toc), [applying accessible emoji labels](https://github.com/florianeckerstorfer/remark-a11y-emoji), and more. We encourage you to browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list!
+
+We apply [GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) and [Smartypants](https://github.com/silvenon/remark-smartypants) by default. This brings some niceties like auto-generating clickable links from text (ex. `https://example.com`) and formatting quotes for readability. When applying your own plugins, you can choose to preserve or remove these defaults.
+
+To apply plugins _while preserving_ Astro's default plugins, use a nested `extends` object like so:
+
+```js
+// astro.config.mjs
+import remarkToc from 'remark-toc';
+
+export default {
+  integrations: [mdx({
+    // apply remark-toc alongside GitHub-flavored markdown and Smartypants
+    remarkPlugins: { extends: [remarkToc] },
+  })],
+}
+```
+
+To apply plugins _without_ Astro's defaults, you can apply a plain array:
+
+```js
+// astro.config.mjs
+import remarkToc from 'remark-toc';
+
+export default {
+  integrations: [mdx({
+    // apply remark-toc alone, removing other defaults
+    remarkPlugins: [remarkToc],
+  })],
+}
+```
+
+</details>
+
+<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:
+
+```js
+// astro.config.mjs
+import rehypeMinifyHtml from 'rehype-minify';
+
+export default {
+  integrations: [mdx({
+    rehypePlugins: [rehypeMinifyHtml],
+  })],
+}
+```
+</details>
+
+<details>
+  <summary><strong>frontmatterOptions</strong></summary>
+
+**Default:** `{ name: 'frontmatter' }`
+
+We use [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) to parse YAML-based frontmatter in your MDX files. If you want to override our default configuration or extend remark-mdx-frontmatter (ex. to [apply a custom frontmatter parser](https://github.com/remcohaszing/remark-mdx-frontmatter#parsers)), you can supply a `frontmatterOptions` configuration.
+
+For example, say you want to access frontmatter as root-level variables without a nested `frontmatter` object. You can override the [`name` configuration option](https://github.com/remcohaszing/remark-mdx-frontmatter#name) like so:
+
+```js
+// astro.config.mjs
+export default {
+  integrations: [mdx({
+    frontmatterOptions: {
+      name: '',
+    }
+  })],
+}
+```
+
+```mdx
+---
+title: I'm just a variable now!
+---
+
+# {title}
+```
+
+See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
+</details>
 
 ## Examples
 

package/dist/index.d.ts

@@ -1,2 +1,18 @@
+import { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroIntegration } from 'astro';
-export default function mdx(): AstroIntegration;
+import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
+declare type WithExtends<T> = T | {
+    extends: T;
+};
+declare type MdxOptions = {
+    remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
+    rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
+    /**
+     * Configure the remark-mdx-frontmatter plugin
+     * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
+     * @default {{ name: 'frontmatter' }}
+     */
+    frontmatterOptions?: RemarkMdxFrontmatterOptions;
+};
+export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;
+export {};

package/dist/index.js

@@ -1,31 +1,85 @@
+import { nodeTypes } from "@mdx-js/mdx";
 import mdxPlugin from "@mdx-js/rollup";
-function mdx() {
+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 remarkPrism from "./remark-prism.js";
+import { getFileInfo } from "./utils.js";
+const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants];
+function handleExtends(config, defaults = []) {
+  if (Array.isArray(config))
+    return config;
+  return [...defaults, ...(config == null ? void 0 : config.extends) ?? []];
+}
+function mdx(mdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
-      "astro:config:setup": ({ updateConfig, addPageExtension, command }) => {
+      "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
+          }
+        ]);
         updateConfig({
           vite: {
             plugins: [
               {
                 enforce: "pre",
                 ...mdxPlugin({
+                  remarkPlugins,
+                  rehypePlugins,
                   jsx: true,
                   jsxImportSource: "astro",
                   format: "mdx",
                   mdExtensions: []
                 })
               },
-              command === "dev" && {
+              {
                 name: "@astrojs/mdx",
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;
-                  return `${code}
+                  const [, moduleExports] = parseESM(code);
+                  code += `
+import "${"astro:scripts/page-ssr.js"}";`;
+                  const { fileUrl, fileId } = getFileInfo(id, config);
+                  if (!moduleExports.includes("url")) {
+                    code += `
+export const url = ${JSON.stringify(fileUrl)};`;
+                  }
+                  if (!moduleExports.includes("file")) {
+                    code += `
+export const file = ${JSON.stringify(fileId)};`;
+                  }
+                  if (command === "dev") {
+                    code += `
 if (import.meta.hot) {
 											import.meta.hot.decline();
 										}`;
+                  }
+                  return code;
                 }
               }
             ]

package/dist/remark-prism.d.ts

@@ -0,0 +1,2 @@
+/**  */
+export default function remarkPrism(): (tree: any) => void;

package/dist/remark-prism.js

@@ -0,0 +1,49 @@
+import { addAstro } from "@astrojs/prism/internal";
+import Prism from "prismjs";
+import loadLanguages from "prismjs/components/index.js";
+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 classes = [classLanguage];
+    node.value = `<pre class="${classes.join(
+      " "
+    )}"><code class="${classLanguage}">${html}</code></pre>`;
+    return node;
+  });
+}
+export {
+  remarkPrism as default
+};

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+import type { AstroConfig } from 'astro';
+interface FileInfo {
+    fileId: string;
+    fileUrl: string;
+}
+/** @see 'vite-plugin-utils' for source */
+export declare function getFileInfo(id: string, config: AstroConfig): FileInfo;
+export {};

package/dist/utils.js

@@ -0,0 +1,30 @@
+function appendForwardSlash(path) {
+  return path.endsWith("/") ? path : path + "/";
+}
+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;
+  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 };
+}
+export {
+  getFileInfo
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -24,20 +24,33 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@mdx-js/rollup": "^2.1.1"
+    "@astrojs/prism": "^0.6.1",
+    "@mdx-js/mdx": "^2.1.2",
+    "@mdx-js/rollup": "^2.1.1",
+    "es-module-lexer": "^0.10.5",
+    "prismjs": "^1.28.0",
+    "rehype-raw": "^6.1.1",
+    "remark-gfm": "^3.0.1",
+    "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"
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.0-beta.70",
+    "astro": "1.0.0-rc.2",
     "astro-scripts": "0.0.6",
     "chai": "^4.3.6",
+    "linkedom": "^0.14.12",
     "mocha": "^9.2.2",
-    "linkedom": "^0.14.12"
+    "remark-toc": "^8.0.1"
   },
   "engines": {
-    "node": "^14.20.0 || >=16.14.0"
+    "node": "^14.18.0 || >=16.12.0"
   },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",

package/src/index.ts

@@ -1,18 +1,81 @@
-import mdxPlugin from '@mdx-js/rollup';
+import { 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';
+import rehypeRaw from 'rehype-raw';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkGfm from 'remark-gfm';
+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 remarkPrism from './remark-prism.js';
+import { getFileInfo } from './utils.js';
 
-export default function mdx(): AstroIntegration {
+type WithExtends<T> = T | { extends: T };
+
+type MdxOptions = {
+	remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
+	rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
+	/**
+	 * Configure the remark-mdx-frontmatter plugin
+	 * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
+	 * @default {{ name: 'frontmatter' }}
+	 */
+	frontmatterOptions?: RemarkMdxFrontmatterOptions;
+};
+
+const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants];
+
+function handleExtends<T>(config: WithExtends<T[] | undefined>, defaults: T[] = []): T[] {
+	if (Array.isArray(config)) return config;
+
+	return [...defaults, ...(config?.extends ?? [])];
+}
+
+export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 	return {
 		name: '@astrojs/mdx',
 		hooks: {
-			'astro:config:setup': ({ updateConfig, addPageExtension, command }: any) => {
+			'astro:config:setup': ({ updateConfig, config, addPageExtension, command }: any) => {
 				addPageExtension('.mdx');
+				let remarkPlugins = handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS);
+				let rehypePlugins = handleExtends(mdxOptions.rehypePlugins);
+
+				if (config.markdown.syntaxHighlight === 'shiki') {
+					remarkPlugins.push([
+						// Default export still requires ".default" chaining for some reason
+						// Workarounds tried:
+						// - "import * as remarkShikiTwoslash"
+						// - "import { default as remarkShikiTwoslash }"
+						(remarkShikiTwoslash as any).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,
+					},
+				]);
+
 				updateConfig({
 					vite: {
 						plugins: [
 							{
 								enforce: 'pre',
 								...mdxPlugin({
+									remarkPlugins,
+									rehypePlugins,
 									jsx: true,
 									jsxImportSource: 'astro',
 									// Note: disable `.md` support
@@ -20,14 +83,34 @@ export default function mdx(): AstroIntegration {
 									mdExtensions: [],
 								}),
 							},
-							command === 'dev' && {
+							{
 								name: '@astrojs/mdx',
 								transform(code: string, id: string) {
 									if (!id.endsWith('.mdx')) return;
-									// TODO: decline HMR updates until we have a stable approach
-									return `${code}\nif (import.meta.hot) {
+									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')) {
+										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) {
 											import.meta.hot.decline();
 										}`;
+									}
+									return code;
 								},
 							},
 						],

package/src/remark-prism.ts

@@ -0,0 +1,60 @@
+// 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 { 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) =>
+		visit(tree, 'code', (node: any) => {
+			let { lang, value } = node;
+			node.type = 'html';
+
+			let { html, classLanguage } = runHighlighter(lang, value);
+			let classes = [classLanguage];
+			node.value = `<pre class="${classes.join(
+				' '
+			)}"><code class="${classLanguage}">${html}</code></pre>`;
+			return node;
+		});
+}

package/src/utils.ts

@@ -0,0 +1,39 @@
+import type { AstroConfig } from 'astro';
+
+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): 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: 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 };
+}

package/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js

@@ -0,0 +1,9 @@
+export async function get() {
+	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
+
+	return {
+		body: JSON.stringify({
+			titles: Object.values(mdxPages ?? {}).map(v => v?.customFrontmatter?.title),
+		})
+	}
+}

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

@@ -0,0 +1,6 @@
+---
+title: 'Using YAML frontmatter'
+illThrowIfIDontExist: "Oh no, that's scary!"
+---
+
+# {customFrontmatter.illThrowIfIDontExist}

package/test/fixtures/mdx-frontmatter/src/pages/glob.json.js

@@ -0,0 +1,9 @@
+export async function get() {
+	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
+
+	return {
+		body: JSON.stringify({
+			titles: Object.values(mdxPages ?? {}).map(v => v?.frontmatter?.title),
+		})
+	}
+}

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

@@ -0,0 +1,6 @@
+---
+title: 'Using YAML frontmatter'
+illThrowIfIDontExist: "Oh no, that's scary!"
+---
+
+# {frontmatter.illThrowIfIDontExist}

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-remark-plugins/src/pages/with-gfm.mdx

@@ -0,0 +1,3 @@
+# GitHub-flavored Markdown test
+
+This should auto-gen a link: https://example.com

package/test/fixtures/mdx-remark-plugins/src/pages/with-toc.mdx

@@ -0,0 +1,19 @@
+# TOC test
+
+## Table of contents
+
+## Section 1
+
+Some text!
+
+### Subsection 1
+
+Some subsection test!
+
+### Subsection 2
+
+Oh cool, more text!
+
+## Section 2
+
+And section 2, with a hyperlink to check GFM is preserved: https://handle-me-gfm.com

package/test/fixtures/mdx-syntax-hightlighting/src/pages/index.mdx

@@ -0,0 +1,9 @@
+# Syntax highlighting
+
+```astro
+---
+const handlesAstroSyntax = true
+---
+
+<h1>{handlesAstroSyntax}</h1>
+```

package/test/fixtures/mdx-url-export/src/pages/pages.json.js

@@ -0,0 +1,9 @@
+export async function get() {
+	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
+
+	return {
+		body: JSON.stringify({
+			urls: Object.values(mdxPages ?? {}).map(v => v?.url),
+		})
+	}
+}

package/test/fixtures/mdx-url-export/src/pages/test-1.mdx

@@ -0,0 +1 @@
+# I'm a page with a url of "/test-1!"

package/test/fixtures/mdx-url-export/src/pages/test-2.mdx

@@ -0,0 +1 @@
+# I'm a page with a url of "/test-2!"

package/test/fixtures/mdx-url-export/src/pages/with-url-override.mdx

@@ -0,0 +1,3 @@
+export const url = '/AH!'
+
+# I'm a test with a url override!

package/test/mdx-frontmatter.test.js

@@ -0,0 +1,45 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter/', import.meta.url);
+
+describe('MDX frontmatter', () => {
+	it('builds when "frontmatter.property" is in JSX expression', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+		expect(true).to.equal(true);
+	});
+
+	it('extracts frontmatter to "frontmatter" export', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+
+		const { titles } = JSON.parse(await fixture.readFile('/glob.json'));
+		expect(titles).to.include('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),
+			integrations: [
+				mdx({
+					frontmatterOptions: {
+						name: 'customFrontmatter',
+					},
+				}),
+			],
+		});
+		await fixture.build();
+
+		const { titles } = JSON.parse(await fixture.readFile('/glob.json'));
+		expect(titles).to.include('Using YAML frontmatter');
+	});
+});

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-remark-plugins.test.js

@@ -0,0 +1,62 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import remarkToc from 'remark-toc';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-remark-plugins/', import.meta.url);
+
+describe('MDX remark plugins', () => {
+	it('supports custom remark plugins - TOC', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [
+				mdx({
+					remarkPlugins: [remarkToc],
+				}),
+			],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-toc/index.html');
+		const { document } = parseHTML(html);
+
+		const tocLink1 = document.querySelector('ul a[href="#section-1"]');
+		expect(tocLink1).to.not.be.null;
+	});
+
+	it('applies GitHub-flavored markdown by default', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-gfm/index.html');
+		const { document } = parseHTML(html);
+
+		const autoGenLink = document.querySelector('a[href="https://example.com"]');
+		expect(autoGenLink).to.not.be.null;
+	});
+
+	it('preserves default GitHub-flavored markdown with "extends"', async () => {
+		const fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [
+				mdx({
+					remarkPlugins: { extends: [remarkToc] },
+				}),
+			],
+		});
+		await fixture.build();
+
+		const html = await fixture.readFile('/with-toc/index.html');
+		const { document } = parseHTML(html);
+
+		const tocLink1 = document.querySelector('ul a[href="#section-1"]');
+		expect(tocLink1).to.not.be.null;
+		const autoGenLink = document.querySelector('a[href="https://handle-me-gfm.com"]');
+		expect(autoGenLink).to.not.be.null;
+	});
+});

package/test/mdx-syntax-highlighting.test.js

@@ -0,0 +1,67 @@
+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-syntax-hightlighting/', import.meta.url);
+
+describe('MDX syntax highlighting', () => {
+	describe('shiki', () => {
+		it('works', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				markdown: {
+					syntaxHighlight: 'shiki',
+				},
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const shikiCodeBlock = document.querySelector('pre.shiki');
+			expect(shikiCodeBlock).to.not.be.null;
+		});
+
+		it('respects markdown.shikiConfig.theme', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				markdown: {
+					syntaxHighlight: 'shiki',
+					shikiConfig: {
+						theme: 'dracula',
+					},
+				},
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const shikiCodeBlock = document.querySelector('pre.shiki.dracula');
+			expect(shikiCodeBlock).to.not.be.null;
+		});
+	});
+
+	describe('prism', () => {
+		it('works', async () => {
+			const fixture = await loadFixture({
+				root: FIXTURE_ROOT,
+				markdown: {
+					syntaxHighlight: 'prism',
+				},
+				integrations: [mdx()],
+			});
+			await fixture.build();
+
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const prismCodeBlock = document.querySelector('pre.language-astro');
+			expect(prismCodeBlock).to.not.be.null;
+		});
+	});
+});

package/test/mdx-url-export.test.js

@@ -0,0 +1,28 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX url export', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-url-export/', import.meta.url),
+			integrations: [mdx()],
+		});
+
+		await fixture.build();
+	});
+
+	it('generates correct urls in glob result', async () => {
+		const { urls } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(urls).to.include('/test-1');
+		expect(urls).to.include('/test-2');
+	});
+
+	it('respects "export url" overrides in glob result', async () => {
+		const { urls } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(urls).to.include('/AH!');
+	});
+});