DEV Community

Discussion on: Adding a TOC in Astro

peerreynders profile image

Markdown - Layout

Alternately (much more bare bones) layouts receiving markdown content can obtain a content prop.

// src/layouts/BaseLayout.astro
const { content } = Astro.props;
Enter fullscreen mode Exit fullscreen mode

which includes astro.headers

  "astro": {
    "headers": [
        "depth": 1,
        "text": "Astro 0.18 Release",
        "slug": "astro-018-release"
        "depth": 2,
        "text": "Responsive partial hydration",
        "slug": "responsive-partial-hydration"
      /* ... */
    "source": "# Astro 0.18 Release\\nA little over a month ago, the first public beta [...]"
  "url": ""
Enter fullscreen mode Exit fullscreen mode

The slug is the id on the h* tag (and consequently the hash fragment of its URL).

This is demonstrated in the docs example template starting at MainLayout.astro layout supplying the TableOfContents.tsx component with the headers.

dailydevtips1 profile image
Chris Bongers Author

Yep their own fetchContent way is pretty solid as well!
This one might just be easier for most people, and a bit more dynamic from the start.