@astrojs/mdx 0.15.0-beta.1 → 0.15.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 60f6ddcdbc2ddb72
+@astrojs/mdx:build: cache hit, replaying output 86781ef119fbfda9
 @astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.15.0-beta.1 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > @astrojs/mdx@0.15.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,7 +1,155 @@
 # @astrojs/mdx
 
+## 0.15.1
+
+### Patch Changes
+
+- [#5978](https://github.com/withastro/astro/pull/5978) [`7abb1e905`](https://github.com/withastro/astro/commit/7abb1e9056c4b4fd0abfced347df32a41cdfbf28) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fix MDX heading IDs generation when using a frontmatter reference
+
+- Updated dependencies [[`7abb1e905`](https://github.com/withastro/astro/commit/7abb1e9056c4b4fd0abfced347df32a41cdfbf28)]:
+  - @astrojs/markdown-remark@2.0.1
+
+## 0.15.0
+
+### Minor Changes
+
+- [#5684](https://github.com/withastro/astro/pull/5684) [`a9c292026`](https://github.com/withastro/astro/commit/a9c2920264e36cc5dc05f4adc1912187979edb0d) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Refine Markdown and MDX configuration options for ease-of-use. & [#5769](https://github.com/withastro/astro/pull/5769) [`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Introduce a `smartypants` flag to opt-out of Astro's default SmartyPants plugin.
+
+  - **Markdown**
+
+    - **Replace the `extendDefaultPlugins` option** with a `gfm` boolean and a `smartypants` boolean. These are enabled by default, and can be disabled to remove GitHub-Flavored Markdown and SmartyPants.
+
+    - Ensure GitHub-Flavored Markdown and SmartyPants are applied whether or not custom `remarkPlugins` or `rehypePlugins` are configured. If you want to apply custom plugins _and_ remove Astro's default plugins, manually set `gfm: false` and `smartypants: false` in your config.
+
+  - **Migrate `extendDefaultPlugins` to `gfm` and `smartypants`**
+
+    You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the `extendDefaultPlugins` option. This has now been split into 2 flags to disable each plugin individually:
+
+    - `markdown.gfm` to disable GitHub-Flavored Markdown
+    - `markdown.smartypants` to disable SmartyPants
+
+    ```diff
+    // astro.config.mjs
+    import { defineConfig } from 'astro/config';
+
+    export default defineConfig({
+      markdown: {
+    -   extendDefaultPlugins: false,
+    +   smartypants: false,
+    +   gfm: false,
+      }
+    });
+    ```
+
+    Additionally, applying remark and rehype plugins **no longer disables** `gfm` and `smartypants`. You will need to opt-out manually by setting `gfm` and `smartypants` to `false`.
+
+  - **MDX**
+
+    - Support _all_ Markdown configuration options (except `drafts`) from your MDX integration config. This includes `syntaxHighlighting` and `shikiConfig` options to further customize the MDX renderer.
+
+    - Simplify `extendPlugins` to an `extendMarkdownConfig` option. MDX options will default to their equivalent in your Markdown config. By setting `extendMarkdownConfig` to false, you can "eject" to set your own syntax highlighting, plugins, and more.
+
+  - **Migrate MDX's `extendPlugins` to `extendMarkdownConfig`**
+
+    You may have used the `extendPlugins` option to manage plugin defaults in MDX. This has been replaced by 3 flags:
+
+    - `extendMarkdownConfig` (`true` by default) to toggle Markdown config inheritance. This replaces the `extendPlugins: 'markdown'` option.
+    - `gfm` (`true` by default) and `smartypants` (`true` by default) to toggle GitHub-Flavored Markdown and SmartyPants in MDX. This replaces the `extendPlugins: 'defaults'` option.
+
+- [#5687](https://github.com/withastro/astro/pull/5687) [`e2019be6f`](https://github.com/withastro/astro/commit/e2019be6ffa46fa33d92cfd346f9ecbe51bb7144) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Give remark and rehype plugins access to user frontmatter via frontmatter injection. This means `data.astro.frontmatter` is now the _complete_ Markdown or MDX document's frontmatter, rather than an empty object.
+
+  This allows plugin authors to modify existing frontmatter, or compute new properties based on other properties. For example, say you want to compute a full image URL based on an `imageSrc` slug in your document frontmatter:
+
+  ```ts
+  export function remarkInjectSocialImagePlugin() {
+    return function (tree, file) {
+      const { frontmatter } = file.data.astro;
+      frontmatter.socialImageSrc = new URL(frontmatter.imageSrc, 'https://my-blog.com/').pathname;
+    };
+  }
+  ```
+
+  When using Content Collections, you can access this modified frontmatter using the `remarkPluginFrontmatter` property returned when rendering an entry.
+
+  **Migration instructions**
+
+  Plugin authors should now **check for user frontmatter when applying defaults.**
+
+  For example, say a remark plugin wants to apply a default `title` if none is present. Add a conditional to check if the property is present, and update if none exists:
+
+  ```diff
+  export function remarkInjectTitlePlugin() {
+    return function (tree, file) {
+      const { frontmatter } = file.data.astro;
+  +    if (!frontmatter.title) {
+        frontmatter.title = 'Default title';
+  +    }
+    }
+  }
+  ```
+
+  This differs from previous behavior, where a Markdown file's frontmatter would _always_ override frontmatter injected via remark or reype.
+
+- [#5891](https://github.com/withastro/astro/pull/5891) [`05caf445d`](https://github.com/withastro/astro/commit/05caf445d4d2728f1010aeb2179a9e756c2fd17d) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Remove deprecated Markdown APIs from Astro v0.X. This includes `getHeaders()`, the `.astro` property for layouts, and the `rawContent()` and `compiledContent()` error messages for MDX.
+
+- [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0
+
+- [#5825](https://github.com/withastro/astro/pull/5825) [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Baseline the experimental `contentCollections` flag. You're free to remove this from your astro config!
+
+  ```diff
+  import { defineConfig } from 'astro/config';
+
+  export default defineConfig({
+  - experimental: { contentCollections: true }
+  })
+  ```
+
+### Patch Changes
+
+- [#5837](https://github.com/withastro/astro/pull/5837) [`12f65a4d5`](https://github.com/withastro/astro/commit/12f65a4d55e3fd2993c2f67b18794dd536280c69) Thanks [@giuseppelt](https://github.com/giuseppelt)! - fix shiki css class replace logic
+
+- [#5741](https://github.com/withastro/astro/pull/5741) [`000d3e694`](https://github.com/withastro/astro/commit/000d3e6940839c2aebba1984e6fb3b133cec6749) Thanks [@delucis](https://github.com/delucis)! - Fix broken links in README
+
+- Updated dependencies [[`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b), [`e2019be6f`](https://github.com/withastro/astro/commit/e2019be6ffa46fa33d92cfd346f9ecbe51bb7144), [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a), [`12f65a4d5`](https://github.com/withastro/astro/commit/12f65a4d55e3fd2993c2f67b18794dd536280c69), [`16107b6a1`](https://github.com/withastro/astro/commit/16107b6a10514ef1b563e585ec9add4b14f42b94), [`a9c292026`](https://github.com/withastro/astro/commit/a9c2920264e36cc5dc05f4adc1912187979edb0d), [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f), [`7572f7402`](https://github.com/withastro/astro/commit/7572f7402238da37de748be58d678fedaf863b53)]:
+  - @astrojs/markdown-remark@2.0.0
+  - @astrojs/prism@2.0.0
+
+## 1.0.0-beta.2
+
+<details>
+<summary>See changes in 1.0.0-beta.2</summary>
+
+### Major Changes
+
+- [#5825](https://github.com/withastro/astro/pull/5825) [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Baseline the experimental `contentCollections` flag. You're free to remove this from your astro config!
+
+  ```diff
+  import { defineConfig } from 'astro/config';
+
+  export default defineConfig({
+  - experimental: { contentCollections: true }
+  })
+  ```
+
+### Minor Changes
+
+- [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0
+
+### Patch Changes
+
+- [#5837](https://github.com/withastro/astro/pull/5837) [`12f65a4d5`](https://github.com/withastro/astro/commit/12f65a4d55e3fd2993c2f67b18794dd536280c69) Thanks [@giuseppelt](https://github.com/giuseppelt)! - fix shiki css class replace logic
+
+- Updated dependencies [[`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a), [`12f65a4d5`](https://github.com/withastro/astro/commit/12f65a4d55e3fd2993c2f67b18794dd536280c69), [`16107b6a1`](https://github.com/withastro/astro/commit/16107b6a10514ef1b563e585ec9add4b14f42b94), [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f), [`7572f7402`](https://github.com/withastro/astro/commit/7572f7402238da37de748be58d678fedaf863b53)]:
+  - @astrojs/prism@2.0.0-beta.0
+  - @astrojs/markdown-remark@2.0.0-beta.2
+
+</details>
+
 ## 0.15.0-beta.1
 
+<details>
+<summary>See changes in 0.15.0-beta.1</summary>
+
 ### Minor Changes
 
 - [#5769](https://github.com/withastro/astro/pull/5769) [`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Introduce a `smartypants` flag to opt-out of Astro's default SmartyPants plugin.
@@ -41,8 +189,13 @@
 - Updated dependencies [[`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b)]:
   - @astrojs/markdown-remark@2.0.0-beta.1
 
+</details>
+
 ## 0.15.0-beta.0
 
+<details>
+<summary>See changes in 0.15.0-beta.0</summary>
+
 ### Minor Changes
 
 - [#5687](https://github.com/withastro/astro/pull/5687) [`e2019be6f`](https://github.com/withastro/astro/commit/e2019be6ffa46fa33d92cfd346f9ecbe51bb7144) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Give remark and rehype plugins access to user frontmatter via frontmatter injection. This means `data.astro.frontmatter` is now the _complete_ Markdown or MDX document's frontmatter, rather than an empty object.
@@ -146,6 +299,8 @@
 - Updated dependencies [[`e2019be6f`](https://github.com/withastro/astro/commit/e2019be6ffa46fa33d92cfd346f9ecbe51bb7144), [`a9c292026`](https://github.com/withastro/astro/commit/a9c2920264e36cc5dc05f4adc1912187979edb0d)]:
   - @astrojs/markdown-remark@2.0.0-beta.0
 
+</details>
+
 ## 0.14.0
 
 ### Minor Changes

package/README.md

@@ -89,7 +89,7 @@ You can configure how your MDX is rendered with the following options:
 All [`markdown` configuration options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) except `drafts` can be configured separately in the MDX integration. This includes remark and rehype plugins, syntax highlighting, and more. Options will default to those in your Markdown config ([see the `extendMarkdownConfig` option](#extendmarkdownconfig) to modify this).
 
 :::note
-There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overriden for MDX files specifically.
+There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
 ```ts

package/dist/index.js

@@ -7,8 +7,6 @@ import fs from "node:fs/promises";
 import { VFile } from "vfile";
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from "./plugins.js";
 import { getFileInfo, parseFrontmatter } from "./utils.js";
-const RAW_CONTENT_ERROR = "MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
-const COMPILED_CONTENT_ERROR = "MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
 function mdx(partialMdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
@@ -87,18 +85,6 @@ export const url = ${JSON.stringify(fileUrl)};`;
                     code += `
 export const file = ${JSON.stringify(fileId)};`;
                   }
-                  if (!moduleExports.includes("rawContent")) {
-                    code += `
-export function rawContent() { throw new Error(${JSON.stringify(
-                      RAW_CONTENT_ERROR
-                    )}) };`;
-                  }
-                  if (!moduleExports.includes("compiledContent")) {
-                    code += `
-export function compiledContent() { throw new Error(${JSON.stringify(
-                      COMPILED_CONTENT_ERROR
-                    )}) };`;
-                  }
                   if (!moduleExports.includes("Content")) {
                     code = code.replace("export default MDXContent;", "");
                     code += `

package/dist/plugins.js

@@ -59,22 +59,6 @@ function rehypeApplyFrontmatterExport() {
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
-					content.astro = {};
-					Object.defineProperty(content.astro, 'headings', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
-						}
-					});
-					Object.defineProperty(content.astro, 'html', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
-						}
-					});
-					Object.defineProperty(content.astro, 'source', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
-						}
-					});
 					return layoutJsx(Layout, {
 						file,
 						url,
@@ -127,9 +111,7 @@ async function getRemarkPlugins(mdxOptions, config) {
     remarkPlugins.push(remarkSmartypants);
   }
   remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
-  if (config.experimental.contentCollections) {
-    remarkPlugins.push(toRemarkContentRelImageError(config));
-  }
+  remarkPlugins.push(toRemarkContentRelImageError(config));
   return remarkPlugins;
 }
 function getRehypePlugins(mdxOptions) {

package/dist/remark-shiki.js

@@ -42,7 +42,7 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false })
         lang = "plaintext";
       }
       let html = highlighter.codeToHtml(node.value, { lang });
-      html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+      html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
       if (node.lang === "diff") {
         html = html.replace(
           /<span class="line"><span style="(.*?)">([\+|\-])/g,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.15.0-beta.1",
+  "version": "0.15.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,8 +23,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.0.0-beta.1",
-    "@astrojs/prism": "^1.0.2",
+    "@astrojs/markdown-remark": "^2.0.1",
+    "@astrojs/prism": "^2.0.0",
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/rollup": "^2.1.1",
     "acorn": "^8.8.0",
@@ -48,8 +48,8 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.0.0-beta.1",
-    "astro-scripts": "0.0.9",
+    "astro": "2.0.2",
+    "astro-scripts": "0.0.10",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "linkedom": "^0.14.12",
@@ -64,7 +64,7 @@
     "vite": "^4.0.3"
   },
   "engines": {
-    "node": "^14.18.0 || >=16.12.0"
+    "node": ">=16.12.0"
   },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",

package/src/index.ts

@@ -12,12 +12,6 @@ import type { Plugin as VitePlugin } from 'vite';
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js';
 import { getFileInfo, parseFrontmatter } from './utils.js';
 
-const RAW_CONTENT_ERROR =
-	'MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
-
-const COMPILED_CONTENT_ERROR =
-	'MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
-
 export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
 	extendMarkdownConfig: boolean;
 	recmaPlugins: PluggableList;
@@ -123,16 +117,6 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 									if (!moduleExports.includes('file')) {
 										code += `\nexport const file = ${JSON.stringify(fileId)};`;
 									}
-									if (!moduleExports.includes('rawContent')) {
-										code += `\nexport function rawContent() { throw new Error(${JSON.stringify(
-											RAW_CONTENT_ERROR
-										)}) };`;
-									}
-									if (!moduleExports.includes('compiledContent')) {
-										code += `\nexport function compiledContent() { throw new Error(${JSON.stringify(
-											COMPILED_CONTENT_ERROR
-										)}) };`;
-									}
 									if (!moduleExports.includes('Content')) {
 										// Make `Content` the default export so we can wrap `MDXContent` and pass in `Fragment`
 										code = code.replace('export default MDXContent;', '');

package/src/plugins.ts

@@ -79,22 +79,6 @@ export function rehypeApplyFrontmatterExport() {
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
-					content.astro = {};
-					Object.defineProperty(content.astro, 'headings', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
-						}
-					});
-					Object.defineProperty(content.astro, 'html', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
-						}
-					});
-					Object.defineProperty(content.astro, 'source', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
-						}
-					});
 					return layoutJsx(Layout, {
 						file,
 						url,
@@ -161,9 +145,8 @@ export async function getRemarkPlugins(
 	remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
 
 	// Apply last in case user plugins resolve relative image paths
-	if (config.experimental.contentCollections) {
-		remarkPlugins.push(toRemarkContentRelImageError(config));
-	}
+	remarkPlugins.push(toRemarkContentRelImageError(config));
+
 	return remarkPlugins;
 }
 

package/src/remark-shiki.ts

@@ -66,7 +66,7 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 			// <span class="line"
 
 			// Replace "shiki" class naming with "astro".
-			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+			html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(

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

@@ -0,0 +1,45 @@
+---
+title: The Frontmatter Title
+keywords: [Keyword 1, Keyword 2, Keyword 3]
+tags:
+  - Tag 1
+  - Tag 2
+  - Tag 3
+items:
+  - value: Item 1
+  - value: Item 2
+  - value: Item 3
+nested_items:
+  nested:
+    - value: Nested Item 1
+    - value: Nested Item 2
+    - value: Nested Item 3
+---
+
+# {frontmatter.title}
+
+This ID should be the frontmatter title.
+
+## frontmatter.title
+
+The ID should not be the frontmatter title.
+
+### {frontmatter.keywords[1]}
+
+The ID should be the frontmatter keyword #2.
+
+### {frontmatter.tags[0]}
+
+The ID should be the frontmatter tag #1.
+
+#### {frontmatter.items[1].value}
+
+The ID should be the frontmatter item #2.
+
+##### {frontmatter.nested_items.nested[2].value}
+
+The ID should be the frontmatter nested item #3.
+
+###### {frontmatter.unknown}
+
+This ID should not reference the frontmatter.

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

@@ -149,3 +149,46 @@ describe('MDX heading IDs can be injected before user plugins', () => {
 		expect(h1?.id).to.equal('heading-test');
 	});
 });
+
+describe('MDX headings with frontmatter', () => {
+	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-with-frontmatter/index.html');
+		const { document } = parseHTML(html);
+
+		const h3Ids = document.querySelectorAll('h3').map((el) => el?.id);
+
+		expect(document.querySelector('h1').id).to.equal('the-frontmatter-title');
+		expect(document.querySelector('h2').id).to.equal('frontmattertitle');
+		expect(h3Ids).to.contain('keyword-2');
+		expect(h3Ids).to.contain('tag-1');
+		expect(document.querySelector('h4').id).to.equal('item-2');
+		expect(document.querySelector('h5').id).to.equal('nested-item-3');
+		expect(document.querySelector('h6').id).to.equal('frontmatterunknown');
+	});
+
+	it('generates correct getHeadings() export', async () => {
+		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(JSON.stringify(headingsByPage['./test-with-frontmatter.mdx'])).to.equal(
+			JSON.stringify([
+				{ depth: 1, slug: 'the-frontmatter-title', text: 'The Frontmatter Title' },
+				{ depth: 2, slug: 'frontmattertitle', text: 'frontmatter.title' },
+				{ depth: 3, slug: 'keyword-2', text: 'Keyword 2' },
+				{ depth: 3, slug: 'tag-1', text: 'Tag 1' },
+				{ depth: 4, slug: 'item-2', text: 'Item 2' },
+				{ depth: 5, slug: 'nested-item-3', text: 'Nested Item 3' },
+				{ depth: 6, slug: 'frontmatterunknown', text: 'frontmatter.unknown' },
+			])
+		);
+	});
+});