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,14 +47,15 @@
 </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>
+    :global {
         .toc-container {
             width: 80%;
             margin-left: auto;
@@ -97,4 +105,5 @@
         .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,
+		}),
 	},
 };