New Component: Table of Contents

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

We need a new table of contents. We'll immediately put it to use in the Skeleton docs site, but seems like a great addition to the library itself too. This will allow quick navigation on long pages with a lot of content.

Here's a mock of where it would live on the page:

Here's a full version of the page to compare:

Suggested features:

• I love how Mantine's version updates automatically as you scroll up/down the page
• Support subheadings, which are indented
• Perhaps we implement data-* attributes on the headings to make the pairing process easier

Beyond that, this is open ended. Additional features and such as welcome!

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

References (see the right side of the page)

• https://mantine.dev/core/button/
• https://mui.com/material-ui/react-button/

[benzara-tahar]

Hi @endigo9740, I can take this one

[endigo9740]

Reference: https://janosh.github.io/svelte-toc/?ref=madewithsvelte.com

[endigo9740]

This is now ready to begin testing. You can preview here:
https://skeleton-docs-git-feat-table-of-contents-skeleton-labs.vercel.app/components/table-of-contents

This has been added to the DocShell layout in our documentation, which means it will appear on most pages. It'll auto-hide on pages that have no relevant headings though.

Let me know if you come across any issues!

[endigo9740]

I've made several new improvements today to the way we implement it into our doc page and how scrolling is handled. It should now be sticky and follow as you scroll, and the scrolling itself should be smooth and more accurate.

[faiqali1]

If its the same as the link above, It doesn't follow the heading.

[endigo9740]

@faiqali1 your comment doesn't give me much to go off of. I see you're trying to access a couple of the lower items on the page. The page can only scroll as far as it can scroll. If you run out of area it'll stop and that heading won't align with the top. Other than adding a ton of whitespace below the content there's not really a way around that.

Please clarify if this is not the issue you're seeing. Thanks