From 2968ba2b6f00775b6e9872681b390cb466fdbfa2 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Wed, 3 Aug 2022 16:54:55 -0500 Subject: [PATCH] [MDX] Add `headings` and `frontmatter` to layout props (#4134) * feat: expose headings on layout props * test: frontmatter AND content * test: headings in layouts * chore: changeset --- .changeset/hip-glasses-beg.md | 5 ++ packages/integrations/mdx/src/index.ts | 4 +- .../mdx-frontmatter/src/layouts/Base.astro | 16 ++++-- .../src/pages/with-headings.mdx | 7 +++ .../mdx/test/mdx-frontmatter.test.js | 51 +++++++++---------- 5 files changed, 52 insertions(+), 31 deletions(-) create mode 100644 .changeset/hip-glasses-beg.md create mode 100644 packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx diff --git a/.changeset/hip-glasses-beg.md b/.changeset/hip-glasses-beg.md new file mode 100644 index 000000000000..c19b38a6e9c0 --- /dev/null +++ b/.changeset/hip-glasses-beg.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Add `headings` and `frontmatter` properties to layout props diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 7a38643aaa8e..c8a5e515a1bc 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -101,9 +101,9 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { const { layout, ...content } = frontmatter; code += `\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify( frontmatter.layout - )})).default;\nreturn {children} }`; + )};\nreturn {children} }`; } } diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro index 0d18725f282d..e4fa7560acf9 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro @@ -1,18 +1,28 @@ --- -const { content = { title: "Didn't work" } } = Astro.props; +const { + content = { title: "content didn't work" }, + frontmatter = { title: "frontmatter didn't work" }, + headings = [], +} = Astro.props; --- + - {content.title} + -

{content.title}

+

{content.title}

+

{frontmatter.title}

Layout rendered!

+ + diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx new file mode 100644 index 000000000000..cc4db9582f83 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx @@ -0,0 +1,7 @@ +--- +layout: '../layouts/Base.astro' +--- + +## Section 1 + +## Section 2 diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js index 4d25e0ed33f1..3026981222ed 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter.test.js +++ b/packages/integrations/mdx/test/mdx-frontmatter.test.js @@ -7,33 +7,24 @@ 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({ + let fixture; + before(async () => { + fixture = await loadFixture({ root: FIXTURE_ROOT, integrations: [mdx()], }); await fixture.build(); + }) + it('builds when "frontmatter.property" is in JSX expression', async () => { 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('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); @@ -42,23 +33,31 @@ describe('MDX frontmatter', () => { 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(); - + it('passes frontmatter to layout via "content" and "frontmatter" props', async () => { const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); - const h1 = document.querySelector('h1'); + const contentTitle = document.querySelector('[data-content-title]'); + const frontmatterTitle = document.querySelector('[data-frontmatter-title]'); + + expect(contentTitle.textContent).to.equal('Using YAML frontmatter'); + expect(frontmatterTitle.textContent).to.equal('Using YAML frontmatter'); + }); + + it('passes headings to layout via "headings" prop', async () => { + const html = await fixture.readFile('/with-headings/index.html'); + const { document } = parseHTML(html); + + const headingSlugs = [...document.querySelectorAll('[data-headings] > li')] + .map(el => el.textContent); - expect(h1.textContent).to.equal('Using YAML frontmatter'); + expect(headingSlugs.length).to.be.greaterThan(0); + expect(headingSlugs).to.contain('section-1'); + expect(headingSlugs).to.contain('section-2'); }); it('extracts frontmatter to "customFrontmatter" export when configured', async () => { - const fixture = await loadFixture({ + const customFixture = await loadFixture({ root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url), integrations: [ mdx({ @@ -68,9 +67,9 @@ describe('MDX frontmatter', () => { }), ], }); - await fixture.build(); + await customFixture.build(); - const { titles } = JSON.parse(await fixture.readFile('/glob.json')); + const { titles } = JSON.parse(await customFixture.readFile('/glob.json')); expect(titles).to.include('Using YAML frontmatter'); }); });