Header anchors to link to specific section

[olivierlacan]

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.

[webmasterkai]

I'll add a redirect for the google doc https://covidtracking.com/best-practices

[olivierlacan]

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

[kissane]

Where did this lovely idea end up?

[olivierlacan]

@kissane Forgotten a bit by this grueling past week and the churn I worried about on the website front. I'm sort of waiting for the Gatsby stuff to get merged in before attempting to do this since the implementation I had started was heavily dependent on the Markdown parser used by 11ty and its configuration.

[kevee]

Closing, as markdown has links in gatsbyjs branch