Header anchors to link to specific section

I found myself wanting to link people to the Best Practices doc from the homepage and since the page overflows the default viewport height on most screens I realized it wasn’t easy to link to a specific section based on a header anchor link (which I find extremely useful).

Example:

-<h2>Best Practices for Data Release</h2>
+<h2 id="best-practices-for-data-release">Best Practices for Data Release</h2>

Then anyone can easily link to https://covidtracking.com/#best-practices-for-data-release and get straight to the relevant section. We can also style the headers to display a ¶ symbol next the header when hovered so these permalinks are discoverable.

I have a proof of concept that simply adds markdown-it-anchor and replaces the default 11ty Markdown generator so that we can add that plugin and process all headers with it (it adds an anchor wrapping header tags and we can customize which header levels get it).

I’ll post the PR in a bit for discussion if we think this is useful.

[olivierlacan]

That’s swell too. Think anchor links are worth it anyway?

[kevee]

Closing, as markdown has links in gatsbyjs branch