add TableOfContents

[AnnMarieW]

WIP for the TableOfContents PR snehilvj/dash-mantine-components#513

Also added interactive example for PinInput

[AnnMarieW]

@deadkex and @BSd3v

Any feedback on these docs for the TableOfContents component?

[deadkex]

@AnnMarieW
Looks good, maybe a small hint that scrolling to the url#heading on page load is not included with TOC but one could implement it themselves via clientside callback?

[AnnMarieW]

Thanks for the suggestion @deadkex I tried to add a clientside callback to the docs to handle the scroll to the hash on initial load and on refresh, but it's not working. It starts in the correct location, then scrolls to the top of the page. Have you implemented this feature in other projects?

I'll also add an example of styling using the Styles API. You had a good example in your PR.

[deadkex]

This works for my website @AnnMarieW

clientside_callback(
    """
    function(event, hash) {
        function scrollToHash(retries = 10) {
            if (retries <= 0 || hash == '') return;
        
            var targetId = hash.replace('#', '');
            var target = document.getElementById(targetId);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            } else {
                setTimeout(() => scrollToHash(retries - 1), 100);
            }
        }
        scrollToHash();
        return window.dash_clientside.no_update;
    }
    """,
    Output(*AppIds.Page.div_toc_empty.children),
    Input(*AppIds.App.url.pathname),
    State(*AppIds.App.url.hash)
)

[AnnMarieW]

Nice! That works great! Thanks so much 🥇

[AnnMarieW]

Huh, it works perfectly when I run it locally, but not when it's deployed on render 🤔

[deadkex]

@AnnMarieW --Try clearing your browser cache, works for me on the dmc website--
Edit: Okay it seems to be kind of bugged?
Edit2: Seems like it loads the text content first, then it jumps to the header and then the embedded things (examples etc.) get loaded which result in the content moving down.