This way, when people clicked on the headings, the browser would scroll to that point in the article. The first thing on my list was to get a way to render the heading text in a component. Since the articles on my blog are written in markdown, I am just using a superset of markdown – MDX – which allows me to use React components in markdown files. To build a table of contents feature, I knew what I needed to do. How to Get Heading Text from the Frontmatter I shared a video of what the component looked like after completing it. If you're trying to add a Table of Contents feature to your blog, you can walk through it with me. This article is a summary of my process, so you don't have to go through the issues I went through. It will help anyone visiting my site to enjoy their time and find what they need. And for a long time, I thought about adding this feature.
I have a personal blog that I dedicate a lot of my time to. It contributes to a good User Experience because you end up saving your audience the hassle of extra scrolling and searching. This feature, in turn, helps the reader go directly to the section that includes a solution to whatever bug or issue they're facing, without reading the whole article.
The idea behind it is to give the reader a 'heads-up' about the information they're trying to consume. When you visit documentation sites, you'll notice that many of them have a common component: the component.