Looking for Day 11-16? I skipped them because I’m on vacation (and they didn’t seem very interesting). 🙃
Challenge #17 is a Table of Contents sidebar that automatically highlights the heading for the visible content.
With the project files downloaded and
codesandbox‘d into a live CodeSandbox, I’m ready to get going!
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 =/
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 Tailwind CSS’
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!
👈 Look at the sidebar