[MDX] Support YAML frontmatter (#3995)

* chore: remove old comment

* deps: add remark-frontmatter

* deps: add remark-mdx-frontmatter

* fix: handle null or undefined frontmatter key

* feat: configure frontmatter plugins with defaults

* test: frontmatter and custom frontmatter name

* docs: add frontmatterOptions config

* docs: add "variables" and "frontmatter" docs

* chore: excessible -> accessible

* chore: changeset

* chore: remove bad mdx comment

1 files changed, 43 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-frontmatter.js b/packages/integrations/mdx/test/mdx-frontmatter.js
new file mode 100644
index 000000000..1d8ec36f6
--- /dev/null
+++ b/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');
+	});
+});