Import ) =>Ĭonst visibleHeadings = headingElements. The component looked like this: import React from 'react' It felt surreal, and I was elated for a minute. It's great because I'll be able to use the items in the headings array in the TableOfContent component. If I go ahead and map through the frontmatter, I'll be able to retrieve the content from the headings array. I'm going to use that to explain my initial approach. The snippet above is what the frontmatter of this article looks like, but with the headings entry. Title: Building a Table of Content component This pattern is common when you're building blogs with Next.js and MDX (markdown in general). Details like the title, date it was published, the tags or category that the article falls into, the description, a canonical URL, and any other thing you may feel like adding to improve your article's SEO. The frontmatter contains the metadata of all articles on my blog. I knew it was going to be stressful, but I went with it anyway.įor context, this is what a frontmatter in a markdown file looks like. A heading called 'Table of Contents' somewhere in the R Markdown file will receive id 'table-of-contents'. With this mental model, I thought of populating the frontmatter of each article with the headings in all the articles I've written. When you click on any text, it takes you to the respective section. In the snippet above, the anchor tags are tied to the sections with respect to their id attribute in the DOM. To have linked text pointing to a section, the ideal way of doing this would look like what's in the snippet below: Go to section one With HTML, you can achieve this by using the anchor tag and passing the value to an href attribute. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |