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

play: make sure md also works

Browse source
This commit is contained in:
bholmesdev 2023-02-10 08:45:37 -05:00
parent fa9bd3bcec
commit b4b1396039
3 changed files with 48 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/with-markdoc/src/content/blog/plain-md.md Normal file
View file

@ -0,0 +1,8 @@
---
title: Markdown
---
## Just markdown
- working?
- yes.

4
examples/with-markdoc/src/content/blog/test.mdoc
View file

@ -1,8 +1,8 @@
---
title: Example!
title: Markdoc
---
# Hey there
# Markdoc h2
Look at this table! Built-in to Markdoc, neat.

61
examples/with-markdoc/src/pages/index.astro
View file

@ -2,14 +2,10 @@
import { Markdoc } from '@astrojs/markdoc';
import { Code } from 'astro/components';
import Marquee from '../components/Marquee.astro';
import { getEntryBySlug } from 'astro:content';
import { getCollection } from 'astro:content';
import RedP from '../components/RedP.astro';
const mdocEntry = await getEntryBySlug('blog', 'test');
const mdxEntry = await getEntryBySlug('blog', 'with-mdx');
console.log(mdocEntry);
const { Content } = await mdocEntry.render();
const { Content: MDXContent } = await mdxEntry.render();
const entries = await getCollection('blog');
---
<html lang="en">
@ -23,23 +19,42 @@ const { Content: MDXContent } = await mdxEntry.render();
<body>
<h1>Astro</h1>
<article>
<MDXContent />
<Content
components={{
marquee: Marquee,
p: RedP,
pre: {
component: Code,
props({ attributes, getTreeNode }) {
return {
...attributes,
lang: attributes.lang ?? attributes['data-language'],
code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
};
},
},
}}
/>
{
entries.map(async (entry) => {
const { Content } = await entry.render();
if (entry.id.endsWith('mdoc')) {
return (
<Fragment>
<h1>{entry.data.title}</h1>
<Content
components={{
marquee: Marquee,
p: RedP,
pre: {
component: Code,
props({ attributes, getTreeNode }) {
return {
...attributes,
lang: attributes.lang ?? attributes['data-language'],
code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
};
},
},
}}
/>
<hr />
</Fragment>
);
}
return (
<>
<h1>{entry.data.title}</h1>
<Content />
<hr />
</>
);
})
}
</article>
</body>
</html>