DEV Community

Discussion on: Adding a TOC in Astro

View post
Collapse
 
peerreynders profile image
peerreynders •

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers •

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.