[Component] Table of Contents (with proper highlighting)

[gustaveWPM]

Hello!
Not long ago, I coded a table of contents (ToC) to play with some blog pages.

At first, it didn't look complicated. But, in practice, I found it extremely trickier than expected.
The main problem is highlighting (aka "HL").

See it by yourself with some real world examples:

• https://blowfish.page/docs/installation/
  Scroll down until the highlight reaches "Download the Blowfish theme", then, continue to scroll down...
  The HL will be like "ghosted" in a wide dead zone.

• https://thedevdavid-digital-garden.vercel.app/posts/choosing-providers
  Click on "Other analytics providers". The page scrolls until the section, but the HL will be triggered on "Other newsletter providers".

• https://biomejs.dev/linter/rules/#suspicious
  Go on the "Suspicious" section. Then, scroll up until you're actually in the "Style" section (the "Suspicious" title isn't visible anymore at this point of scroll Y). The HL is stale, and still on "Suspicious", because it waits a title to be visible to update.

• https://biomejs.dev/linter/rules/
  Hold Space key. The HL freezes.

• https://biomejs.dev/linter/rules/
  Scroll until no section title is visible in your viewport. Refresh the page. You will be at the same scroll Y, and the HL will not be triggered. You're in the void!

---

I didn't understand why it's so difficult to get a decent HL on a simple table of contents.
And when I tried to implement it myself, I ran into all kinds of problems.

That's a shame, because it's very confusing for a user to have a highlight that bugs a lot on a table of contents component, especially if it's a documentation page.

I think it would be nice to add a component to shadcn/ui to solve this problem.

---

I started coding something on my own. It's probably not perfect, but I've done my best, and I'd be curious to start a discussion about this pain point.

https://github.com/gustaveWPM/dashboard_rtm/blob/main/src/components/ui/blog/BlogPostTocDesktopInner.tsx

Demo:
https://dashboard-rtm.vercel.app/en/blog/patch-notes/dashboard/post-06