challenges
May 2, 2024
[
Dev W rkshop
]

MDX Table of Contents: Part 3

Workshops in this series

  1. Extract the headings from the MDX
  2. Create a table of contents from the headings
  3. Make the table of contents sticky and responsive
  4. Add a descriptive id for each heading
  5. Link each item in the table of contents to the heading location in the blog post
  6. Scroll smoothly and adjust position for header

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.

Workshop goal

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 :

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

Go to solution and explanation