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