finally fixed the fucking table of contents

src/lib/table-of-contents.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-    let {
-        document,
-        querySelector = "h2, h3, h4, h5",
-    }: {
-        document: Document;
-        querySelector?: string;
-    } = $props();
+    import {onMount} from 'svelte';
 
-    var idCounter: number = 0;
+    let idCounter: number = 0;
+
+    let container: HTMLElement;
+
+    onMount(() => {
+        let headers = getHeaders();
+        headers.forEach(header => {
+            let headerId = getHeaderId(header);
+            var element = document.createElement("li");
+            element.classList += "toc-level-" + getHeaderLevel(header);
+            element.innerHTML = `<a href="#${headerId}">${(header as HTMLElement).innerHTML}</a>`;
+            container.appendChild(element);
+        });
+    });
 
     let getHeaders = function(): NodeList {
-        return document.querySelectorAll(querySelector);
+        return document.querySelectorAll("h2, h3, h4, h5");
     }
 
     let getHeaderId = function(header: Node): string {
@@ -40,61 +47,63 @@
 </script>
 
 <div class="toc-container">
-    <ul class="toc-list">
-        {#each getHeaders() as header}
+    <ul class="toc-list" bind:this={container}>
+        <!-- {#each getHeaders() as header}
             <li class="toc-level-{getHeaderLevel(header)}"><a href="#{getHeaderId(header)}">{(header as HTMLElement).innerText}</a></li>
-        {/each}
+        {/each} -->
     </ul>
 </div>
 
 <style>
-    .toc-container {
-        width: 80%;
-        margin-left: auto;
-        margin-right: auto;
+    :global {
+        .toc-container {
+            width: 80%;
+            margin-left: auto;
+            margin-right: auto;
 
-        background-color: var(--color-background-highlight);
-        padding: 16px 0;
-    }
+            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 {
+            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-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: "↳ ";
+        .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>