feat: support `layout` in MDX frontmatter (#4088)

* deps: add gray-matter

* feat: support layout frontmatter property

* test: frontmatter, content prop

* docs: update layout recommendation

* deps: fix lockfile

* chore: changeset

* fix: inherit rollup plugin transform

* fix: avoid parsing frontmatter on custom parsers

* fix: match YAML err handling from md

* docs: absolute url to docs

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* chore: formatting

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 31 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js
index 3021f926f..4d25e0ed3 100644
--- a/packages/integrations/mdx/test/mdx-frontmatter.test.js
+++ b/packages/integrations/mdx/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),