pages/src/lib/table-of-contents.svelte

<script lang="ts">
    let {
        document,
        querySelector = "h2, h3, h4, h5",
    }: {
        document: Document;
        querySelector?: string;
    } = $props();

    var idCounter: number = 0;

    let getHeaders = function(): NodeList {
        return document.querySelectorAll(querySelector);
    }

    let getHeaderId = function(header: Node): string {
        var id = (header as HTMLElement).id;
        if (!id) {
            id = `header-${idCounter}`;
            (header as HTMLElement).id = id;
            idCounter += 1;
        }
        return id;
    }

    let getHeaderLevel = function(header: Node): string {
        switch ((header as HTMLElement).tagName) {
            case "H2":
                return "0";
            case "H3":
                return "1";
            case "H4":
                return "2";
            case "H5":
                return "3";
            default:
                return "0";
        }
    }
</script>

<div class="toc-container">
    <ul class="toc-list">
        {#each getHeaders() as header}
            <li class="toc-level-{getHeaderLevel(header)}"><a href="#{getHeaderId(header)}">{(header as HTMLElement).innerText}</a></li>
        {/each}
    </ul>
</div>

<style>
    .toc-container {
        width: 80%;
        margin-left: auto;
        margin-right: auto;

        background-color: var(--color-background-highlight);
        padding: 16px 0;
    }

    .toc-list {
        padding: 0;
        margin: 0;
    }
    .toc-list li {
        list-style: none;
    }
    .toc-list li a {
        width: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 24px;
        display: inline-block;
        color: var(--color-text);
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        transition-property: color background-color;
        box-sizing: border-box;
    }

    .toc-list li a:hover {
        color: var(--color-text-dark);
        background-color: var(--color-highlight);
    }

    .toc-level-0 a {
    padding-left: 44px;
    }
    .toc-level-1 a {
        padding-left: 68px;
    }
    .toc-level-2 a {
        padding-left: 92px;
    }
    .toc-level-3 a {
        padding-left: 116px;
    }
    .toc-level-1 a::before, .toc-level-2 a::before, .toc-level-3 a::before {
        content: "↳ ";
    }
</style>