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>

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
     import Header from "$lib/header.svelte";
     import Footer from "$lib/footer.svelte";
 
+    export const prerender = true;
+
 	let { children } = $props();
 </script>
 
@@ -54,7 +56,7 @@
             height: 100%;
             width: 100%;
             background-color: var(--color-waters);
-            mask-image: url('bremen-waters-white.svg');
+            mask-image: url('/bremen-waters-white.svg');
             mask-position: center;
             background-position: center;
             background-attachment: fixed;

src/routes/projects/+page.svelte

@@ -21,7 +21,7 @@
 <p>This is a listing of some of my more noteworthy projects that can be found on the web.</p>
 
 {#if browser}
-    <TableOfContents {document}/>
+    <TableOfContents />
 {/if}
 
 <h2>Active Projects</h2>

src/routes/projects/projectn5/devlog/20250316/+page.svelte

@@ -6,7 +6,7 @@
 
 <BannerTitle title="Project N5 Progress Update: 2025-03-16" subtitle="Refactoring" banner="/projects/projectn5/devlog/20250316/fishmonger.webp" />
 
-<TableOfContents document={document}/>
+<TableOfContents />
 
 <p>I've been making a lot of progress in a lot of different areas, so I won't be able to elaborate on every little detail, but I'll focus on more major things. Excited to share what I've been working on!</p>
 

svelte.config.js

@@ -3,9 +3,15 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	// preprocess: vitePreprocess(),
 	kit: {
-		adapter: adapter(),
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: undefined,
+			preprocess: false,
+			strict: true,
+		}),
 	},
 };