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;
code += `\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
frontmatter.layout
)})).default;\nreturn <Layout content={${JSON.stringify(
)})).default;\nconst frontmatter=${JSON.stringify(
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{content.title}</title>
</head>
<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>
<ul data-headings>
{headings.map(heading => <li>{heading.slug}</li>)}
</ul>
<slot />
</body>
</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);
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(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 () => {
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');
});
});