diff --git a/.changeset/tasty-masks-draw.md b/.changeset/tasty-masks-draw.md new file mode 100644 index 000000000000..790cac1511f2 --- /dev/null +++ b/.changeset/tasty-masks-draw.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Pass injected frontmatter from remark and rehype plugins to layouts diff --git a/packages/integrations/mdx/src/astro-data-utils.ts b/packages/integrations/mdx/src/astro-data-utils.ts index fdad15b8f74e..0bc375c27fa6 100644 --- a/packages/integrations/mdx/src/astro-data-utils.ts +++ b/packages/integrations/mdx/src/astro-data-utils.ts @@ -19,6 +19,42 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record{children} }`; - } - + const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id); const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), { ...mdxPluginOpts, rehypePlugins: [ diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/layouts/Base.astro b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/layouts/Base.astro new file mode 100644 index 000000000000..b3d55f0a8823 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/layouts/Base.astro @@ -0,0 +1,17 @@ +--- +const defaults = { title: 'Frontmatter not passed to layout!' } +const { frontmatter = defaults, content = defaults } = Astro.props; +--- + + + + + + + + {frontmatter.title} + + + + + diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx index 2fcd655ec05a..1092099f00f3 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx @@ -1,3 +1,7 @@ +--- +layout: '../layouts/Base.astro' +--- + # Page 1 Look at that! diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx index 4a6b9adddf81..c82eb97c2f01 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx @@ -1,3 +1,7 @@ +--- +layout: '../layouts/Base.astro' +--- + # Page 2 ## Table of contents diff --git a/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js b/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js index 420e4716ecde..780f7252c77d 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js +++ b/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js @@ -1,4 +1,5 @@ import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; import { loadFixture } from '../../../astro/test/test-utils.js'; const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter-injection/', import.meta.url); @@ -41,4 +42,15 @@ describe('MDX frontmatter injection', () => { expect(titles).to.contain('Overridden title'); expect(readingTimes).to.contain('1000 min read'); }); + + it('passes injected frontmatter to layouts', async () => { + const html1 = await fixture.readFile('/page-1/index.html'); + const html2 = await fixture.readFile('/page-2/index.html'); + + const title1 = parseHTML(html1).document.querySelector('title'); + const title2 = parseHTML(html2).document.querySelector('title'); + + expect(title1.innerHTML).to.equal('Page 1'); + expect(title2.innerHTML).to.equal('Page 2'); + }); });