Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
Code Issues Activity

[MD] Add rawContent and compiledContent to MD layout props (#4222)

Browse source 
* fix: add subs for astro.source and astro.html

* fix: define "source" property

* test: raw and compiled content from layout

* chore: changeset

Co-authored-by: bholmesdev <bholmesdev@gmail.com>
This commit is contained in:
Ben Holmes 2022-08-09 18:18:34 -05:00 committed by GitHub
parent a4f24266c0
commit b5ef1c2113
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/warm-socks-exercise.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Add rawContent and compiledContent to MD layout props

20
packages/astro/src/vite-plugin-markdown/index.ts
View file

@ -92,10 +92,28 @@ export default function markdown({ config, logging }: AstroPluginOptions): Plugi
throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."') throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
} }
}); });
Object.defineProperty(content.astro, 'html', {
get() {
throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
}
});
Object.defineProperty(content.astro, 'source', {
get() {
throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
}
});
const contentFragment = h(Fragment, { 'set:html': html }); const contentFragment = h(Fragment, { 'set:html': html });
return ${ return ${
layout layout
? `h(Layout, { content, frontmatter: content, headings: getHeadings(), 'server:root': true, children: contentFragment })` ? `h(Layout, {
content,
frontmatter: content,
headings: getHeadings(),
rawContent,
compiledContent,
'server:root': true,
children: contentFragment
})`
: `contentFragment` : `contentFragment`
}; };
} }

22
packages/astro/test/astro-markdown.test.js
View file

@ -89,6 +89,28 @@ describe('Astro Markdown', () => {
expect(headingSlugs).to.contain('section-2'); expect(headingSlugs).to.contain('section-2');
}); });
it('Passes compiled content to layout via "compiledContent" prop', async () => {
const html = await fixture.readFile('/with-layout/index.html');
const $ = cheerio.load(html);
const compiledContent = $('[data-compiled-content]');
expect(fixLineEndings(compiledContent.text()).trim()).to.equal(
`<h2 id="section-1">Section 1</h2>\n<h2 id="section-2">Section 2</h2>`
);
});
it('Passes raw content to layout via "rawContent" prop', async () => {
const html = await fixture.readFile('/with-layout/index.html');
const $ = cheerio.load(html);
const rawContent = $('[data-raw-content]');
expect(fixLineEndings(rawContent.text()).trim()).to.equal(
`## Section 1\n\n## Section 2`
);
});
it('Exposes getHeadings() on glob imports', async () => { it('Exposes getHeadings() on glob imports', async () => {
const { headings } = JSON.parse(await fixture.readFile('/headings-glob.json')); const { headings } = JSON.parse(await fixture.readFile('/headings-glob.json'));

4
packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro vendored
View file

@ -3,6 +3,8 @@ const {
content = { title: "content didn't work" }, content = { title: "content didn't work" },
frontmatter = { title: "frontmatter didn't work" }, frontmatter = { title: "frontmatter didn't work" },
headings = [], headings = [],
compiledContent = () => '',
rawContent = () => '',
} = Astro.props; } = Astro.props;
--- ---
@ -18,6 +20,8 @@ const {
<body> <body>
<p data-content-title>{content.title}</p> <p data-content-title>{content.title}</p>
<p data-frontmatter-title>{frontmatter.title}</p> <p data-frontmatter-title>{frontmatter.title}</p>
<p data-compiled-content>{compiledContent()}</p>
<p data-raw-content>{rawContent()}</p>
<p data-layout-rendered>Layout rendered!</p> <p data-layout-rendered>Layout rendered!</p>
<ul data-headings> <ul data-headings>
{headings.map(heading => <li>{heading.slug}</li>)} {headings.map(heading => <li>{heading.slug}</li>)}