michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[MDX] Add headings and frontmatter to layout props (#4134)

Browse source 
* feat: expose headings on layout props

* test: frontmatter AND content

* test: headings in layouts

* chore: changeset
This commit is contained in:
Ben Holmes 2022-08-03 16:54:55 -05:00 committed by GitHub
parent 7bc75a03a7
commit 2968ba2b6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hip-glasses-beg.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/mdx': minor
---
Add `headings` and `frontmatter` properties to layout props

4
packages/integrations/mdx/src/index.ts
View file

@ -101,9 +101,9 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
const { layout, ...content } = frontmatter; const { layout, ...content } = frontmatter;
code += `\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify( code += `\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
frontmatter.layout frontmatter.layout
)})).default;\nreturn <Layout content={${JSON.stringify( )})).default;\nconst frontmatter=${JSON.stringify(
content content
)}}>{children}</Layout> }`; )};\nreturn <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
} }
} }

16
packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro vendored
View file

@ -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;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{content.title}</title>
</head> </head>
<body> <body>
<h1>{content.title}</h1> <p data-content-title>{content.title}</p>
<p data-frontmatter-title>{frontmatter.title}</p>
<p data-layout-rendered>Layout rendered!</p> <p data-layout-rendered>Layout rendered!</p>
<ul data-headings>
{headings.map(heading => <li>{heading.slug}</li>)}
</ul>
<slot /> <slot />
</body> </body>
</html> </html>

7
packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx vendored Normal file
View file

@ -0,0 +1,7 @@
---
layout: '../layouts/Base.astro'
---
## Section 1
## Section 2

51
packages/integrations/mdx/test/mdx-frontmatter.test.js
View file

@ -7,33 +7,24 @@ import { loadFixture } from '../../../astro/test/test-utils.js';
const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter/', import.meta.url); const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter/', import.meta.url);
describe('MDX frontmatter', () => { describe('MDX frontmatter', () => {
it('builds when "frontmatter.property" is in JSX expression', async () => { let fixture;
const fixture = await loadFixture({ before(async () => {
fixture = await loadFixture({
root: FIXTURE_ROOT, root: FIXTURE_ROOT,
integrations: [mdx()], integrations: [mdx()],
}); });
await fixture.build(); await fixture.build();
})
it('builds when "frontmatter.property" is in JSX expression', async () => {
expect(true).to.equal(true); expect(true).to.equal(true);
}); });
it('extracts frontmatter to "frontmatter" export', async () => { 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')); const { titles } = JSON.parse(await fixture.readFile('/glob.json'));
expect(titles).to.include('Using YAML frontmatter'); expect(titles).to.include('Using YAML frontmatter');
}); });
it('renders layout from "layout" frontmatter property', async () => { 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 html = await fixture.readFile('/index.html');
const { document } = parseHTML(html); const { document } = parseHTML(html);
@ -42,23 +33,31 @@ describe('MDX frontmatter', () => {
expect(layoutParagraph).to.not.be.null; 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()],
});
await fixture.build();
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
const { document } = parseHTML(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('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 () => { 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), root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url),
integrations: [ integrations: [
mdx({ 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'); expect(titles).to.include('Using YAML frontmatter');
}); });
}); });