Syncing the table of contents with the page scroll and style the active link

[MohammedAl-Mahdawi]

I've used data.markdownRemark.tableOfContents to generate the table of contents of any markdown file, however, it is just HTML, I mean it does not behave like the ToCs that appears on the Gatsby's documentation pages, I want the links in the ToCs to be active and inactive according to the section that currently showing up when the user scrolls to it, exactly like the how the ToCs of the Gatsby's documentation behave.

I made a ton of research and found nothing and even asked this question on stackoverflow and no one answered it!

Am I doing something wrong with data.markdownRemark.tableOfContents? or is there a way to achieve this that I couldn't find in the documentation? or should I implement this behavior myself using vanilla JS?

[LekoArts]

Thank you for opening this!

You'll need to implement the table of contents component and the functionality on your own. You can have a look at the www folder in this monorepo and this PR: #21762

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[MohammedAl-Mahdawi]

Thanks a lot @LekoArts for the quick reply, is it OK to open a feature request for this functionality?

[LekoArts]

As I said it's something the user needs to implement on their own. Feel free to create a Gatsby plugin for it and share it with the community :)

[MohammedAl-Mahdawi]

Here is how I implemented it in case anyone was interested.