Render Content in Astro

---
// pages/blog/[id].astro
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content, headings } = await render(post);
---
<article>
  <h1>{post.data.title}</h1>
  <time>{post.data.pubDate.toLocaleDateString()}</time>

  <!-- Table of contents -->
  <nav>
    <ul>
      {headings.map(h => (
        <li style={\`margin-left: \${h.depth * 10}px\`}>
          <a href={\`#\${h.slug}\`}>{h.text}</a>
        </li>
      ))}
    </ul>
  </nav>

  <Content />
</article>