Astro Components

/src/pages/[slug].astro

Generate pages from all items in a collection.

---
import { type CollectionEntry, getCollection, render } from 'astro:content'

export async function getStaticPaths() {
  // all items
  const items = await getCollection('pages')
  return items.map((item) => ({
    params: { slug: item.id },
    props: item,
  }))
}

type Props = CollectionEntry<'pages'>

const item = Astro.props
const { Content } = await render(item)
---

<Content />

Now we filter out drafts.

---
import { type CollectionEntry, getCollection, render } from 'astro:content'

export async function getStaticPaths() {
  // filter out drafts
  const items = await getCollection('pages', ({ data }) => {
  return data.isDraft !== true
})

  return items.map((item) => ({
    params: { slug: item.id },
    props: item,
  }))
}

type Props = CollectionEntry<'pages'>

const item = Astro.props
const { Content } = await render(item)
---

<Content />

ListItems.astro - generate lists from collections

[PagesFromData].astro - generate pages from collection item PagesFromData