In my project I have a content collection of "changelogs" represented by Markdown files.
/content
/changelogs
2024-01-01.md
Each change log is simply a date field in the frontmatter and a body.
---
date: 2024-01-01
---
This is the body.
I want to display all the changelogs on a single page so I've used getCollection to fetch them.
---
const changelogs = await getCollection('changelogs')
---
<ul>
{changelogs.map((c) => (<li>{c.body}</li>)}
</ul>
However, this renders the body as plain text, when I need it to be rendered as HTML.
All the examples of using const { Content } = entry.render() to get destructure the <Content /> component show it happening in the frontmatter.
How can I render() each entry in the template?
It turns out I could just expand the inline .map() function in my template and perform the render there before returning.
<ul>
{
changelogs.map(async (c) => {
const { Content } = await c.render()
return (
<li>
<Content />
</li>
)
})
}
</ul>