docs icon indicating copy to clipboard operation
docs copied to clipboard

Missing: Rendering content to HTML for `getCollection`

Open MiloParigi opened this issue 1 year ago • 0 comments

📚 Subject area/topic

Content collection - Rendering content to html

📋 Suggested page

https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html

📋 General description or bullet points (if proposing new content)

The current documentation show us how to generate the content when using the getEntry method for one entry only:

Screenshot 2024-03-08 at 10 52 13

In my current use case, I have a collection of entries that I want to be rendered on one page. After fiddling for a few hours, here is a similar example to the one provided for one entry. but for multiple entries:

---
import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog');
const renderedBlogEntries = await Promise.all(blogEntries.map(async (blogEntry) => {
    const { Content, headings } = await blogEntry.render();
    return { ...blogEntry, Content, headings };
}));
---
<div>
  {blogEntries.map(blogEntry => (
      <h1>{blogEntry.data.title}<h1>
      <blogEntry.Content />
    ))}
</div>

I'll make a StackBlitz example when I have the time but I wanted to share the solution first, so that anybody stuck on this problem can at least fix it if they find this issue.

🖥️ Reproduction of code samples in StackBlitz

No response

MiloParigi avatar Mar 08 '24 10:03 MiloParigi