[MDX] Support YAML frontmatter

packages/astro/src/core/build/generate.ts

@@ -59,7 +59,7 @@ function shouldSkipDraft(pageModule: ComponentInstance, astroConfig: AstroConfig
 		!astroConfig.markdown.drafts &&
 		// This is a draft post
 		'frontmatter' in pageModule &&
-		(pageModule as any).frontmatter.draft === true
+		(pageModule as any).frontmatter?.draft === true
 	);
 }
 

packages/integrations/mdx/package.json

@@ -32,7 +32,9 @@
   "dependencies": {
     "@mdx-js/rollup": "^2.1.1",
     "es-module-lexer": "^0.10.5",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-mdx-frontmatter": "^2.0.2",
     "remark-smartypants": "^2.0.0"
   },
   "devDependencies": {

packages/integrations/mdx/src/index.ts

@@ -1,23 +1,32 @@
 import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroIntegration } from 'astro';
+import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
 import { parse as parseESM } from 'es-module-lexer';
 import remarkGfm from 'remark-gfm';
 import remarkSmartypants from 'remark-smartypants';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
 import { getFileInfo } from './utils.js';
 
 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[] | undefined {
+	defaults: T[] = [],
+): T[] {
 	if (Array.isArray(config)) return config;
 
 	return [...defaults, ...(config?.extends ?? [])];
@@ -35,9 +44,18 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 							{
 								enforce: 'pre',
 								...mdxPlugin({
-									remarkPlugins: handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS),
+									remarkPlugins: [
+										...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS),
+										// Frontmatter plugins should always be applied!
+										// We can revisit this if a strong use case to *remove*
+										// YAML frontmatter via config is reported.
+										remarkFrontmatter,
+										[remarkMdxFrontmatter, {
+											name: 'frontmatter',
+											...mdxOptions.frontmatterOptions,
+										}],
+									],
 									rehypePlugins: handleExtends(mdxOptions.rehypePlugins),
-									// place these after so the user can't override
 									jsx: true,
 									jsxImportSource: 'astro',
 									// Note: disable `.md` support

packages/integrations/mdx/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),
+		})
+	}
+}

packages/integrations/mdx/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}

packages/integrations/mdx/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),
+		})
+	}
+}

packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/index.mdx

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

packages/integrations/mdx/test/mdx-frontmatter.js

@@ -0,0 +1,43 @@
+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');
+	});
+});