improved styling of side-bound TableOfContents component

fixed ContentSidebar sizing and margin of first item
replaced manually-added table of contents with automatic ContentSidebar toc where needed
2026-04-26 22:39:07 +02:00 · 2026-04-26 22:34:02 +02:00 · 2026-04-26 22:22:29 +02:00 · 2026-04-26 22:13:15 +02:00
19 changed files with 214 additions and 176 deletions
--- a/src/lib/banner2.svelte
+++ b/src/lib/banner2.svelte
@@ -1,57 +1,43 @@
 <script lang="ts">
+    import { type BannerContent } from './components/banner-content';
+
    let {
-        title,
-        date = "", // date posted
-        dateUpdated = "",
-        dateIndeterminate = "", // raw date without an explanation marker next to it
-        subtitle = "",
-        banner = "",
-        bannerAlt = "",
-        tags = [],
-        pixelated,
+        content,
    }: {
-        title: string;
-        date?: string;
-        dateUpdated?: string;
-        dateIndeterminate?: string;
-        subtitle?: string;
-        banner?: string;
-        bannerAlt?: string;
-        tags?: string[];
-        pixelated?: boolean;
+        content: BannerContent;
    } = $props();

 </script>

-{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
+{#snippet titles()}
 	<div class="title-container">
        <div class="title-text-container">
-            <h1 class="title">{title}</h1>
+            <h1 class="title">{content.title}</h1>

-            {#if subtitle}
-                <p class="subtitle">[ {subtitle} ]</p>
+            {#if content.subtitle}
+                <p class="subtitle">[ {content.subtitle} ]</p>
            {/if}

-            {#if tags.length}
+            {#if content.tags && content.tags.length > 0}
                <div class="tag-container">
-                    {#each tags as tag}
+                    {#each content.tags as tag}
                        <span class="post-tag">{tag}</span>
                    {/each}
                </div>
            {/if}
        </div>
-        {#if date || dateUpdated || dateIndeterminate}
+        {#if content.date || content.dateUpdated || content.dateIndeterminate}
            <div class="date-container">
-                {#if dateIndeterminate}
-                    <p class="date">:: {dateIndeterminate}</p>
+                {#if content.dateIndeterminate && content.dateIndeterminate != "undefined"}
+                    <p class="date">:: {content.dateIndeterminate}</p>
                {/if}

-                {#if date}
-                    <p class="date">posted :: {date}</p>
+                {#if content.date && content.date != "undefined"}
+                    <p class="date">posted :: {content.date}</p>
                {/if}

-                {#if dateUpdated}
-                    <p class="date">last updated :: {dateUpdated}</p>
+                {#if content.dateUpdated && content.dateUpdated != "undefined"}
+                    <p class="date">last updated :: {content.dateUpdated}</p>
                {/if}
            </div>
        {/if}
@@ -59,13 +45,13 @@
 {/snippet}

 <div class="container">
-    {#if banner && banner !== ""}
-        <a class="banner-container" href={banner}>
-            <img class="banner {pixelated ? "pixelated-img" : ""}" src={banner} alt={bannerAlt}>
+    {#if content.banner && content.banner !== ""}
+        <a class="banner-container" href={content.banner}>
+            <img class="banner {content.pixelated ? "pixelated-img" : ""}" src={content.banner} alt={content.bannerAlt}>
        </a>
    {/if}
    
-    {@render titles({title, subtitle, date})}
+    {@render titles()}
    <hr>
 </div>

--- a/src/lib/components/banner-content.ts
+++ b/src/lib/components/banner-content.ts
@@ -0,0 +1,11 @@
+export interface BannerContent {
+    title: string;
+    date?: string; // date posted
+    dateUpdated?: string;
+    dateIndeterminate?: string; // raw date without an explanation marker next to it
+    subtitle?: string;
+    banner?: string;
+    bannerAlt?: string;
+    tags?: string[];
+    pixelated?: boolean;
+}
--- a/src/lib/components/table-of-contents.svelte
+++ b/src/lib/components/table-of-contents.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
    import { onMount } from 'svelte';

+    let {
+        type,
+    }: {
+        // possible values: none, 'side'
+        type: string;
+    } = $props();
+
    interface TocEntry {
        text: string;
        link: string;
@@ -63,7 +70,7 @@
 {/snippet}

 {#if tocEntries.length > 0}
-    <div class="toc-container blurred-background">
+    <div class="{type ? "toc-container-side" : "toc-container"} blurred-background">
        <ul class="toc-list">
            {#each tocEntries as entry}
                {@render tocEntryLine({ entry })}
@@ -74,21 +81,38 @@

 <style>
    :global {
-        body {
-            --padding-indent-base: 44px;
-            --padding-level-indent: 24px;
+        .toc-container, .toc-container-side {
+            box-sizing: border-box;
+            padding: 16px 0;
+            border-radius: var(--border-radius);
        }
        
        .toc-container {
+            --padding-indent-base: 44px;
+            --padding-level-indent: 24px;
+
            max-width: var(--width-toc);
            margin-left: auto;
            margin-right: auto;
            margin-top: 12px;
-            box-sizing: border-box;
-            background-color: var(--color-background-highlight);
-            padding: 16px 0;
            border: var(--border-style) var(--border-dash-size) var(--color-highlight);
-        border-radius: var(--border-radius);
+            background-color: var(--color-background-highlight);
+        }
+
+        .toc-container-side {
+            --padding-indent-base: 24px;
+            --padding-level-indent: 24px;
+
+            width: 400px;
+            margin: 32px 12px 0 12px;
+            position: sticky;
+            top: 64px;
+            border-left: var(--border-style) var(--border-dash-size) var(--color-highlight);
+        }
+
+        .toc-container-side .toc-list a {
+            border-top-right-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
        }

        .toc-list {
--- a/src/lib/viewport/content-sidebar.svelte
+++ b/src/lib/viewport/content-sidebar.svelte
@@ -1,22 +1,54 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import type { BannerContent } from "$lib/components/banner-content";
+    import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
+    import TableOfContents from "$lib/components/table-of-contents.svelte";
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+        bannerContent,
+    }: {
+        children: Snippet,
+        bannerContent: BannerContent;
+    } = $props();
+</script>
+
+<div class="container">
+    <Banner2 content={bannerContent}/>
+
    <div class="content">
-    <div class="side">
-        <slot name="side-left" />
+        <div class="content-sidebar-main-container">
+            {@render children()}
+            <ScrollTopButton />
+        </div>
+        <div class="side">
+            <TableOfContents type="side" />
        </div>
-    <div class="main">
-        <slot name="main" />
    </div>
 </div>

 <style>
-    .content {
-        max-width: 2000px;
+    /* not elegant at all but it works */
+    :global {
+        .content-sidebar-main-container > *:nth-child(1) {
+            margin-top: 0 !important;
+        }
+    }
+    .container {
+        width: var(--page-width);
        margin: 0 auto;
+        padding: 0 24px;
+        box-sizing: border-box;
+    }
+
+    .content {
        display: flex;
        flex-direction: row;
-        padding: 0 24px;
    }
+
    .side {
-        min-width: 400px;
+        width: fit-content;
    }

    @media screen and (max-width: 800px) {
--- a/src/lib/viewport/content.svelte
+++ b/src/lib/viewport/content.svelte
@@ -1,10 +1,23 @@
 <script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import type { BannerContent } from "$lib/components/banner-content";
    import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
+    import type { Snippet } from "svelte";

-    let { children } = $props();
+    let {
+        children,
+        bannerContent,
+    }: {
+        children: Snippet,
+        bannerContent?: BannerContent;
+    } = $props();
 </script>

 <div class="main-content">
+    {#if bannerContent}
+        <Banner2 content={bannerContent} />
+    {/if}
+    
    <ScrollTopButton />
    {@render children()}
 </div>
--- a/src/routes/art/music/+page.svelte
+++ b/src/routes/art/music/+page.svelte
@@ -7,12 +7,12 @@
    <title>My Tracks | denizk0461</title> 
 </svelte:head>

-<Content>
-    <Banner2
-        title="My Tracks"
-        subtitle=""
-        banner=""
-        bannerAlt="" />
+<Content bannerContent={{
+    title: "My Tracks",
+    subtitle: "",
+    banner: "",
+    bannerAlt: "",
+}}>

    well this is awkward. there's nothing here yet. come back later?

--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -24,11 +24,11 @@
    <title>Blog | denizk0461</title> 
 </svelte:head>

-<Content>
-	<Banner2
-		title="Blog"
-        banner="robert.webp"
-        bannerAlt="View at a tram bridge rising and then curving to the left." />
+<Content bannerContent={{
+    title: "Blog",
+    banner: "robert.webp",
+    bannerAlt: "View at a tram bridge rising and then curving to the left.",
+}}>

    <!-- TODO descriptions on filter click -->
    <div class="tag-filters-alt">
--- a/src/routes/blog/[year]/[date]/+page.svelte
+++ b/src/routes/blog/[year]/[date]/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-    import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/viewport/content.svelte";
-    import TableOfContents from "$lib/components/table-of-contents.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";

 	export let data;
 </script>
@@ -12,18 +10,16 @@
    <meta name="DCTERMS.created" content="{data.date}T{data.time}">
 </svelte:head>

-<Content>
-    <Banner2
-        title="{data.title}"
-        subtitle="{data.subtitle}"
-        date="{data.date}"
-        dateUpdated="{data.dateUpdated}"
-        banner="{data.banner}"
-        bannerAlt="Banner for blog post '{data.title}'"
-        tags={data.tags} />
-
-    <TableOfContents />
+<ContentSidebar bannerContent={{
+    title: data.title,
+    subtitle: data.subtitle,
+    date: data.date,
+    dateUpdated: data.dateUpdated,
+    banner: data.banner,
+    bannerAlt: `Banner for blog post '${data.title}'`,
+    tags: data.tags,
+}}>

    <svelte:component this={data.content} />

-</Content>
+</ContentSidebar>
--- a/src/routes/drawings/+page.svelte
+++ b/src/routes/drawings/+page.svelte
@@ -12,13 +12,12 @@
    <title>Drawing Gallery | denizk0461</title>
 </svelte:head>

-<Content>
-    <Banner2
-        title="Drawing Gallery"
-        banner="banner.webp"
-        bannerAlt="Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper."
-        subtitle="???"
-        />
+<Content bannerContent={{
+    title: "Drawing Gallery",
+    banner: "banner.webp",
+    bannerAlt: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
+    subtitle: "sketches & stuff",
+}}>
    
    <div class="selected-container">
        <a class="selected-img-link" href={drawingsRev[selectedIndex].src}>
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-    import Content from "$lib/viewport/content.svelte";
-    import Banner2 from "$lib/banner2.svelte";
-    import TableOfContents from "$lib/components/table-of-contents.svelte";
    import ImageRow from "$lib/media/image-row.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";

    export let data;
 </script>
@@ -31,20 +29,17 @@
    </div>
 {/snippet}

-<Content>
-    <Banner2
-        title="Creative Feed"
-        banner="banner.webp"
-        bannerAlt="A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner."
-        subtitle="minor things I have worked on"
-    />
+<ContentSidebar bannerContent={{
+    title: "Creative Feed",
+    banner: "banner.webp",
+    bannerAlt: "A blue screen with the text 'how do you do art ? 1. face your fears 2. become your heroes'. The 'art' looks to have been edited in. The music artist Porter Robinson is standing in the bottom right corner.",
+    subtitle: "minor things I have worked on",
+}}>

    <p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>

    <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>

-    <!-- <TableOfContents /> -->
-
    {@render pageButtons(data.currentPage)}
    
    {#each data.feedPosts as post}
@@ -62,7 +57,7 @@

    {@render pageButtons(data.currentPage)}

-</Content>
+</ContentSidebar>

 <style>
    .page-button-container {
--- a/src/routes/meta/about/+page.svelte
+++ b/src/routes/meta/about/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-    import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/viewport/content.svelte";
-    import TableOfContents from "$lib/components/table-of-contents.svelte";
    import LinkList, { type LinkEntry } from "$lib/lists/link-list.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";

    let favouriteAlbums: LinkEntry[] = [
        {
@@ -108,17 +106,15 @@
 </svelte:head>


-<Content>
-    <Banner2
-        title="About Me & natconf.dev"
-        banner="/me.webp"
-        bannerAlt="Mirror picture of me, pixelated beyond recognition"
-        subtitle="If you'd like to learn more about me and my website"
-        date="2025-08-10"
-        dateUpdated="2026-04-03"
-        pixelated />
-
-    <TableOfContents />
+<ContentSidebar bannerContent={{
+    title: "About Me & natconf.dev",
+    banner: "/me.webp",
+    bannerAlt: "Mirror picture of me, pixelated beyond recognition",
+    subtitle: "If you'd like to learn more about me and my website",
+    date: "2025-08-10",
+    dateUpdated: "2026-04-03",
+    pixelated: true,
+}}>

    <p>Hi there! I'm Deniz (they/them). Welcome to my website!</p>

@@ -199,7 +195,7 @@
    <p>When I was recently replaying the original Ratchet & Clank (2002) in German, I noticed again that the dialogue translated into German is often longer than the original English dialogue, which makes characters' voice lines run into one another. This doesn't happen in the English original.</p>

    <p>This is most noticeable in the cutscene that plays after you acquire the Hologuise on planet Kalebo III, where <a href="https://youtu.be/XIShUN7AUqg?t=3479">the narrator explains how the Hologuise works</a>. The narrations lags WAY behind the visuals, to the point that there's a brief black screen at the end while the narration is still ongoing, and then it just cuts off the narrator entirely.</p>
-</Content>
+</ContentSidebar>

 <style>
    .faq-question {
--- a/src/routes/meta/feeds/+page.svelte
+++ b/src/routes/meta/feeds/+page.svelte
@@ -19,10 +19,10 @@
    <title>Feeds | denizk0461</title> 
 </svelte:head>

-<Content>
-	<Banner2
-		title="Feeds"
-		subtitle="XML feeds" />
+<Content bannerContent={{
+	title: "Feeds",
+	subtitle: "XML feeds",
+}}>

 	<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>

--- a/src/routes/meta/music-rotation/+page.svelte
+++ b/src/routes/meta/music-rotation/+page.svelte
@@ -8,11 +8,10 @@
    <title>Music Rotation | denizk0461</title>
 </svelte:head>

-<Content>
-    <Banner2
-        title="Music Rotation"
-        dateUpdated="2026-04-14"
-        />
+<Content bannerContent={{
+    title: "Music Rotation",
+    dateUpdated: "2026-04-14",
+}}>

    <p>content coming soon.</p>

--- a/src/routes/meta/now/+page.svelte
+++ b/src/routes/meta/now/+page.svelte
@@ -7,11 +7,10 @@
    <title>Now | denizk0461</title>
 </svelte:head>

-<Content>
-    <Banner2
-        title="Now"
-        dateUpdated="2026-04-14"
-        />
+<Content bannerContent={{
+    title: "Now",
+    dateUpdated: "2026-04-14",
+}}>

    <p>content coming soon.</p>

--- a/src/routes/other/privacy/+page.svelte
+++ b/src/routes/other/privacy/+page.svelte
@@ -7,11 +7,10 @@
    <title>Privacy & Cookies | denizk0461</title>
 </svelte:head>

-<Content>
-    <Banner2
-        title="Information on Privacy & Cookies"
-        dateUpdated="2025-09-10"
-        />
+<Content bannerContent={{
+    title: "Information on Privacy & Cookies",
+    dateUpdated: "2025-09-10",
+}}>

    <p>This page uses <b>no cookies</b> as of now. No data will be stored on your device while browsing this website. <b>No trackers</b> are used either – <b>no analytics</b>, not even a visit counter of any kind. Not by a third-party, and currently, none I built myself either.</p>

--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -31,12 +31,12 @@
    <title>Projects | denizk0461</title> 
 </svelte:head>

-<Content>
-    <Banner2
-        title="My Disordered Projects"
-        banner="banner.webp"
-        bannerAlt="An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging."
-        subtitle="things I have worked on" />
+<Content bannerContent={{
+    title: "My Disordered Projects",
+    banner: "banner.webp",
+    bannerAlt: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
+    subtitle: "things I have worked on",
+}}>

    <p>Welcome to my 💫new💫 projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>

--- a/src/routes/projects/[category]/[id]/+page.svelte
+++ b/src/routes/projects/[category]/[id]/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-    import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/viewport/content.svelte";
-    // import TableOfContents from "$lib/components/table-of-contents.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";

 	export let data;
 </script>
@@ -12,17 +10,14 @@
    <meta name="DCTERMS.created" content="{data.projectDetails.date}T12:00">
 </svelte:head>

-<Content>
-    <Banner2
-        title="{data.projectDetails.title}"
-        subtitle="{data.projectDetails.subtitle}"
-        dateIndeterminate="{data.projectDetails.date}"
-        dateUpdated="{data.projectDetails.dateUpdated}"
-        banner="{data.projectDetails.banner}"
-        bannerAlt="{data.projectDetails.bannerAlt}"
-        />
-
-    <!-- <TableOfContents /> -->
+<ContentSidebar bannerContent={{
+    title: data.projectDetails.title,
+    subtitle: data.projectDetails.subtitle,
+    dateIndeterminate: data.projectDetails.date,
+    dateUpdated: data.projectDetails.dateUpdated,
+    banner: data.projectDetails.banner,
+    bannerAlt: data.projectDetails.bannerAlt,
+}}>

    {#if data.projectDetails.links.length > 0}
        <div class="link-button-container">
@@ -34,7 +29,7 @@

    <svelte:component this={data.content} />

-</Content>
+</ContentSidebar>

 <style>
    .link-button-container {
--- a/src/routes/projects/projectn5/+page.svelte
+++ b/src/routes/projects/projectn5/+page.svelte
@@ -32,11 +32,11 @@
    <title>Homesick | denizk0461</title> 
 </svelte:head>

-<Content>
-    <Banner2
-        title="Homesick"
-        banner="/projects/projectn5/banner2.webp"
-        bannerAlt="The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky." />
+<Content bannerContent={{
+    title: "Homesick",
+    banner: "/projects/projectn5/banner2.webp",
+    bannerAlt: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
+}}>

    <p>I am currently working on a game under the working title <b>Homesick</b> (fka Project N5)! I'm aiming for it to be an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>

--- a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
@@ -1,7 +1,5 @@
 <script>
-    import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/viewport/content.svelte";
-    import TableOfContents from "$lib/components/table-of-contents.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";

 	export let data;
 </script>
@@ -12,18 +10,14 @@
    <meta name="DCTERMS.created" content="{data.date}">
 </svelte:head>

-<Content>
-
-    <Banner2
-        title="{data.title}"
-        subtitle="Homesick Devlog"
-        date="{data.date}"
-        banner="preview.webp"
-        bannerAlt="{data.bannerAlt}"    
-    />
-
-    <TableOfContents />
+<ContentSidebar bannerContent={{
+    title: data.title,
+    subtitle: "Homesick Devlog",
+    date: data.date,
+    banner: "preview.webp",
+    bannerAlt: data.bannerAlt,
+}}>

    <svelte:component this={data.content} />

-</Content>
+</ContentSidebar>
Author	SHA1	Message	Date
denizk0461	72347769c3	improved styling of side-bound TableOfContents component	2026-04-26 22:39:07 +02:00
denizk0461	a1effdec8e	fixed ContentSidebar sizing and margin of first item	2026-04-26 22:34:02 +02:00
denizk0461	3586d7eece	replaced manually-added table of contents with automatic ContentSidebar toc where needed	2026-04-26 22:22:29 +02:00
denizk0461	b24712ef4c	banner now controlled by Content and ContentSidebar components	2026-04-26 22:13:15 +02:00