From eea62ddb25388c9f2bea71be2512c8e8eb106b15 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 3 Aug 2022 11:36:21 -0400 Subject: [PATCH 1/4] feat: expose headings on layout props --- packages/integrations/mdx/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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} }`; } } From df2b056a174267e490dc57ddfb5d14558f01d545 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 3 Aug 2022 11:44:39 -0400 Subject: [PATCH 2/4] test: frontmatter AND content --- .../fixtures/mdx-frontmatter/src/layouts/Base.astro | 12 +++++++++--- .../integrations/mdx/test/mdx-frontmatter.test.js | 8 +++++--- 2 files changed, 14 insertions(+), 6 deletions(-) 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..b0104e904909 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,24 @@ --- -const { content = { title: "Didn't work" } } = Astro.props; +const { + content = { title: "content didn't work" }, + frontmatter = { title: "frontmatter didn't work" }, +} = Astro.props; --- + - {content.title} + -

{content.title}

+

{content.title}

+

{frontmatter.title}

Layout rendered!

+ diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js index 4d25e0ed33f1..493bd3e132d5 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter.test.js +++ b/packages/integrations/mdx/test/mdx-frontmatter.test.js @@ -42,7 +42,7 @@ describe('MDX frontmatter', () => { expect(layoutParagraph).to.not.be.null; }); - it('passes frontmatter to layout via "content" prop', async () => { + it('passes frontmatter to layout via "content" and "frontmatter" props', async () => { const fixture = await loadFixture({ root: FIXTURE_ROOT, integrations: [mdx()], @@ -52,9 +52,11 @@ describe('MDX frontmatter', () => { 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(h1.textContent).to.equal('Using YAML frontmatter'); + expect(contentTitle.textContent).to.equal('Using YAML frontmatter'); + expect(frontmatterTitle.textContent).to.equal('Using YAML frontmatter'); }); it('extracts frontmatter to "customFrontmatter" export when configured', async () => { From 086f8061ad39742d17299eadefdc353649dab1b5 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 3 Aug 2022 11:57:47 -0400 Subject: [PATCH 3/4] test: headings in layouts --- .../mdx-frontmatter/src/layouts/Base.astro | 4 ++ .../src/pages/with-headings.mdx | 7 +++ .../mdx/test/mdx-frontmatter.test.js | 43 +++++++++---------- 3 files changed, 31 insertions(+), 23 deletions(-) create mode 100644 packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx 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 b0104e904909..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 @@ -2,6 +2,7 @@ const { content = { title: "content didn't work" }, frontmatter = { title: "frontmatter didn't work" }, + headings = [], } = Astro.props; --- @@ -18,6 +19,9 @@ const {

{content.title}

{frontmatter.title}

Layout rendered!

+
    + {headings.map(heading =>
  • {heading.slug}
    • )} +
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 493bd3e132d5..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); @@ -43,12 +34,6 @@ describe('MDX frontmatter', () => { }); it('passes frontmatter to layout via "content" and "frontmatter" props', async () => { - const fixture = await loadFixture({ - root: FIXTURE_ROOT, - integrations: [mdx()], - }); - await fixture.build(); - const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); @@ -59,8 +44,20 @@ describe('MDX 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(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({ @@ -70,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'); }); }); From 24ec84e59ba495b413f6027603e6b58add9b0017 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 3 Aug 2022 12:01:22 -0400 Subject: [PATCH 4/4] chore: changeset --- .changeset/hip-glasses-beg.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hip-glasses-beg.md 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