MDX Table of Contents: Part 3
Workshops in this series
- Extract the headings from the MDX
- Create a table of contents from the headings
- Make the table of contents sticky and responsive
- Add a descriptive id for each heading
- Link each item in the table of contents to the heading location in the blog post
- Scroll smoothly and adjust position for header (coming May 30, 2024)
Prerequisites
Time to take the table of contents styling up a notch! In this workshop, we’ll add responsive and sticky styling.
Workshop context
- In the previous two workshops, you created a table of contents from the MDX blog headers, and displayed the table of contents next to the blog content.
- In future workshops, you’ll add links from the table of contents headings that scroll to the corresponding heading in the post.
Your goals
By the end of this workshop:
- When the viewport becomes narrower than 70rem, hide the table of contents.
- When the user scrolls down to read more of the blog post, the top of the table of contents should never get closer than 1rem to the header – until the bottom of the table of contents is even with the bottom of the blog post content.
Hints
Hint 1
For the responsive showing / hiding: you may want to write the CSS using a “mobile first” approach :
- revert the
.wrapperCSS to what it was before you added the table of contents - add
display: nonefor the table of contents - add a media query for the target width, and inside the media query add the grid for
.wrapper, grid areas for the appropriate classes, and show the table of contents (display: revert)
Hint 2
Sticky positioning , sadly, can be very frustrating. Sometimes things just refuse to stick. Here is a likely reason you might encounter for the table of contents:
The container for the sticky element (the aside) is automatically sized to fit its contents (the table of contents). Without specifying a height for the aside, it isn’t long enough for the the table of contents to have room to stick before the container scrolls off the page. Try adding height: 100% to the CSS you’ve assigned to the aside in the BlogPost component. (See the workshop solution for more explanation of what’s going on here.)
Hint 3
To keep the table of contents from sliding underneath the header, set the top value to be 1rem plus the height of the header. You can find a css custom property for the height of the header in src/app/globals.css. You can add values in CSS using calc .
Resources
- MDN media queries
- MDN sticky positioning