Implement blog page sticky table of contents.

[tymzd]

It's more challenging than initially thought. What would be necessary to implement this is to:

1. Tell the MDX component to map all of h1, h2, h3, ... to a component that attaches the textContent as an id. This is necessary to set up URI fragment (anchoring with #).
2. Position the table of contents with position: sticky to have it stick around while scrolling down.
3. Highlight the current heading in the table of contents through a prop to , eg. currentHeading = "...". Use react-intersection-observer. The current heading is the first element currently in view. When an element exits view, the next element becomes the currentHeading. I think every heading needs to use the useInView hook.

[tymzd]

https://www.npmjs.com/package/react-intersection-observer

[tymzd]

Try again starting from here: https://www.google.com/search?q=table+of+contents+with+scroll+highlighting&oq=table+of+contents+with+scroll+highlighting&aqs=chrome..69i57.5194j0j7&sourceid=chrome&ie=UTF-8