added table of contents generator

src/lib/banner-title.svelte

@@ -13,8 +13,8 @@
 
 <div class="container">
     <img src="{banner}">
-    <h1>{title}</h1>
-    <h2>{subtitle}</h2>
+    <h1 class="title">{title}</h1>
+    <p class="subtitle">{subtitle}</p>
 </div>
 
 <style>
@@ -33,7 +33,7 @@
         object-fit: cover;
     }
 
-    .container h1 {
+    .title {
         position: absolute;
         width: 100%;
         box-sizing: border-box;
@@ -44,4 +44,8 @@
         bottom: 0px;
         background-image: linear-gradient(to right, #00000088, #000000AA);
     }
+
+    .subtitle {
+
+    }
 </style>

src/lib/footer.svelte

@@ -0,0 +1 @@
+<p>temporary footer</p>

src/lib/table-of-contents.svelte

@@ -0,0 +1,100 @@
+<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>