feat: Add a dynamic Table of Contents

[dance2die]

To Dos

1. • Add a direct link on headers during MDX transformation
   • Research on how to add id on each header element in gatsby-node.js.
2. • Add a Scotch.io style ToC.
   • Lazily load the ToC component (for largest media query breakpoint, only).
   • It's a progressive enhancement: hidden except largest media query breakpoint.
   • Question: Create an NPM package out of it for others to benefit? 🤔
3. • Style: Add a blob around headers
   • Create a blob SVG
   • CSS on h2 header only

Description

For easier navigation, add a fixed table of contents (ToC, hereafter) in Scotch.io style.
Example page: https://scotch.io/tutorials/building-a-video-blog-with-gatsby-and-markdown-mdx#toc-prerequisites

Demos

1. ToC on hover

2. Direct link on headers

3. Styled header with SVG blob.

Why?

1. I found ToC helps readers to understand the context during reading as one can get lost easily what one's reading.
   • ToC solves the problem and can figure out where they are.
2. A side effect of having to add link on each header makes it easy to share on other media such as website, slack, etc.