From b24712ef4cfd406c66482e812c68158ba58be743 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Sun, 26 Apr 2026 22:13:15 +0200
Subject: [PATCH] banner now controlled by Content and ContentSidebar
 components

---
 src/lib/banner2.svelte                        | 56 +++++++------------
 src/lib/components/banner-content.ts          | 11 ++++
 src/lib/components/table-of-contents.svelte   | 29 ++++++++--
 src/lib/viewport/content-sidebar.svelte       | 39 +++++++++++--
 src/lib/viewport/content.svelte               | 15 ++++-
 src/routes/art/music/+page.svelte             | 12 ++--
 src/routes/blog/+page.svelte                  | 10 ++--
 src/routes/blog/[year]/[date]/+page.svelte    | 20 +++----
 src/routes/drawings/+page.svelte              | 13 ++---
 src/routes/feed/+page.svelte                  | 13 ++---
 src/routes/meta/about/+page.svelte            | 26 ++++-----
 src/routes/meta/feeds/+page.svelte            |  8 +--
 src/routes/meta/music-rotation/+page.svelte   |  9 ++-
 src/routes/meta/now/+page.svelte              |  9 ++-
 src/routes/other/privacy/+page.svelte         |  9 ++-
 src/routes/projects/+page.svelte              | 12 ++--
 .../projects/[category]/[id]/+page.svelte     | 20 +++----
 src/routes/projects/projectn5/+page.svelte    | 10 ++--
 .../devlog/[year]/[date]/+page.svelte         | 18 +++---
 19 files changed, 191 insertions(+), 148 deletions(-)
 create mode 100644 src/lib/components/banner-content.ts

diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte
index 3ff339c..0d8a866 100644
--- 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>
 
diff --git a/src/lib/components/banner-content.ts b/src/lib/components/banner-content.ts
new file mode 100644
index 0000000..53b9be5
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/lib/components/table-of-contents.svelte b/src/lib/components/table-of-contents.svelte
index dd05ffe..dd97af4 100644
--- a/src/lib/components/table-of-contents.svelte
+++ b/src/lib/components/table-of-contents.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-    import {onMount} from 'svelte';
+    import { onMount } from 'svelte';
+
+    let {
+        type,
+    }: {
+        // possible values: none, 'side'
+        type: string;
+    } = $props();
 
     interface TocEntry {
         text: 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 })}
@@ -78,17 +85,27 @@
             --padding-indent-base: 44px;
             --padding-level-indent: 24px;
         }
+
+        .toc-container, .toc-container-side {
+            box-sizing: border-box;
+            padding: 16px 0;
+            border: var(--border-style) var(--border-dash-size) var(--color-highlight);
+            border-radius: var(--border-radius);
+        }
         
         .toc-container {
             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);
+        }
+
+        .toc-container-side {
+            width: 400px;
+            margin: 0 12px 0 12px;
+            position: sticky;
+            top: 64px;
         }
 
         .toc-list {
diff --git a/src/lib/viewport/content-sidebar.svelte b/src/lib/viewport/content-sidebar.svelte
index 9978214..076512a 100644
--- a/src/lib/viewport/content-sidebar.svelte
+++ b/src/lib/viewport/content-sidebar.svelte
@@ -1,22 +1,49 @@
+<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="banner-container">
+    <Banner2 content={bannerContent}/>
+</div>
+
 <div class="content">
-    <div class="side">
-        <slot name="side-left" />
-    </div>
+
     <div class="main">
-        <slot name="main" />
+        <ScrollTopButton />
+        {@render children()}
+    </div>
+    <div class="side">
+        <TableOfContents type="side" />
     </div>
 </div>
 
 <style>
+    .banner-container {
+        width: var(--page-width);
+        margin: 0 auto;
+    }
+
     .content {
-        max-width: 2000px;
+        max-width: var(--page-width);
         margin: 0 auto;
         display: flex;
         flex-direction: row;
         padding: 0 24px;
     }
     .side {
-        min-width: 400px;
+        width: fit-content;
     }
 
     @media screen and (max-width: 800px) {
diff --git a/src/lib/viewport/content.svelte b/src/lib/viewport/content.svelte
index 3276ba6..072825c 100644
--- 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>
diff --git a/src/routes/art/music/+page.svelte b/src/routes/art/music/+page.svelte
index da9bcc9..7a865fe 100644
--- 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?
 
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 8c87168..32b148e 100644
--- 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">
diff --git a/src/routes/blog/[year]/[date]/+page.svelte b/src/routes/blog/[year]/[date]/+page.svelte
index 1a763a4..caa8473 100644
--- a/src/routes/blog/[year]/[date]/+page.svelte
+++ b/src/routes/blog/[year]/[date]/+page.svelte
@@ -12,17 +12,17 @@
     <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} />
+<Content 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,
+}}>
 
-    <TableOfContents />
+    <!-- <TableOfContents /> -->
 
     <svelte:component this={data.content} />
 
diff --git a/src/routes/drawings/+page.svelte b/src/routes/drawings/+page.svelte
index b2dc1fc..d3676e7 100644
--- 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}>
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
index eb6de90..e091865 100644
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -31,13 +31,12 @@
     </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"
-    />
+<Content 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>
 
diff --git a/src/routes/meta/about/+page.svelte b/src/routes/meta/about/+page.svelte
index fa4bfd6..bb0581f 100644
--- 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 {
diff --git a/src/routes/meta/feeds/+page.svelte b/src/routes/meta/feeds/+page.svelte
index b266069..dc3daf7 100644
--- 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>
 
diff --git a/src/routes/meta/music-rotation/+page.svelte b/src/routes/meta/music-rotation/+page.svelte
index 9742367..8acf97d 100644
--- 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>
 
diff --git a/src/routes/meta/now/+page.svelte b/src/routes/meta/now/+page.svelte
index b0ff230..97ce28c 100644
--- 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>
 
diff --git a/src/routes/other/privacy/+page.svelte b/src/routes/other/privacy/+page.svelte
index d1e95bf..0b4d2d9 100644
--- 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>
 
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index d62b615..f57e8ca 100644
--- 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>
 
diff --git a/src/routes/projects/[category]/[id]/+page.svelte b/src/routes/projects/[category]/[id]/+page.svelte
index 4220789..ea5de09 100644
--- a/src/routes/projects/[category]/[id]/+page.svelte
+++ b/src/routes/projects/[category]/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script>
     import Banner2 from "$lib/banner2.svelte";
+    import ContentSidebar from "$lib/viewport/content-sidebar.svelte";
     import Content from "$lib/viewport/content.svelte";
     // import TableOfContents from "$lib/components/table-of-contents.svelte";
 
@@ -12,15 +13,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}"
-        />
+<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,
+}}>
 
     <!-- <TableOfContents /> -->
 
@@ -34,7 +34,7 @@
 
     <svelte:component this={data.content} />
 
-</Content>
+</ContentSidebar>
 
 <style>
     .link-button-container {
diff --git a/src/routes/projects/projectn5/+page.svelte b/src/routes/projects/projectn5/+page.svelte
index 9532e61..9c7dfa8 100644
--- 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>
 
diff --git a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
index b962d9c..0bdefd0 100644
--- a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
@@ -12,17 +12,15 @@
     <meta name="DCTERMS.created" content="{data.date}">
 </svelte:head>
 
-<Content>
+<Content bannerContent={{
+    title: data.title,
+    subtitle: "Homesick Devlog",
+    date: data.date,
+    banner: "preview.webp",
+    bannerAlt: data.bannerAlt,
+}}>
 
-    <Banner2
-        title="{data.title}"
-        subtitle="Homesick Devlog"
-        date="{data.date}"
-        banner="preview.webp"
-        bannerAlt="{data.bannerAlt}"    
-    />
-
-    <TableOfContents />
+    <!-- <TableOfContents /> -->
 
     <svelte:component this={data.content} />