Dynamically populating the TOC?

[sbarre]

I’m wondering is it possible to add items to the table of contents programatically, or is it only built from Markdown headers?

I’m doing some looping through data in my page and would like to add a TOC entry for each block, but I haven’t figured out how to do that.

Outputting H2s through a template tag doesn’t do it.

[mbostock]

The table of contents is built using static analysis of the Markdown (and HTML), so it won’t include any headers that you’re generating dynamically on the client using JavaScript.

If you want to generate the page contents dynamically and have them included in the table of contents, you can use a page loader to generate the page. Since the contents are known at build time, they will be included in the table of contents.

We could reengineer the table of contents so that it updates dynamically with JavaScript (using mutation observers). But generally it’s a good idea to generate as much of the page content at build time anyway, since it typically leads to a better user experience (the page loads all at once, faster, with less reflow) and it’s easier for search engines to index (if your app is public).

[sbarre]

Thanks Mike! I was an early adopter of Framework (7+ months ago), before page loaders were a thing, so I haven't explored them in depth yet, but that sounds like a good approach so I'll check it out as a refactoring option.