Advent of JavaScript, Day 17

Looking for Day 11-16? I skipped them because I’m on vacation (and they didn’t seem very interesting). 🙃

Advent of JS Homepage

Challenge #17 is a Table of Contents sidebar that automatically highlights the heading for the visible content.

Screenshot of app

With the project files downloaded and codesandbox‘d into a live CodeSandbox, I’m ready to get going!

User Requirements

Again, let’s start with the User Requirements and speculate how I can solve these:

  • view the currently visible header in the table of contents

This…isn’t very good or helpful user requirements.

Table of Contents have several edge-cases & considerations that need to be addressed:

  • The last visible header is selected

  • When between headers, the last passed header is selected

  • When multiple headers are visible, the last header is selected

    This is necessary when the last header (e.g. “Conclusion”) has very little content

  • On mobile, the Table of Contents needs to be hidden by default, but toggled on

    • When toggled on, there needs to be a close indicator
    • When a link is clicked, the Table of Contents needs to be hidden

    It sucks that these templates aren’t responsive by default =/

Technical Requirement

Since Table of Contents are so ubiquitous, it’d be great if I could use a custom Web component that doesn’t require bundling and could be used from a CDN:

  • Lit doesn’t have a CDN solution
  • Slim.JS has a CDN solution, but I wonder how far I can get without any library…
  • Native Web Components wouldn’t require bundling or other libraries. Hopefully, it’s just a <script> tag away from usage!

For styling, I want to remove everything that exists in the default styles.css and let tailwindcss’ .prose takeover.

But that’s going to make things a bit more complicated, since @tailwindcss/typography is a plugin.

I’m going to skip the Codesandbox and develop toc.js right here for this page!

Demo

👈 Look at the sidebar

Table of Contents