From 6c28a4c5f3798d37ff5add27ca9e349b68bc7757 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Wed, 21 Jan 2026 22:08:09 +0100
Subject: [PATCH] merged main page and devlog galleries to common lib

---
 src/lib/lists/gallery-entry.svelte            |  91 -------
 src/lib/lists/gallery.svelte                  | 109 ++++++++
 src/lib/table-of-contents.svelte              |   3 +-
 src/routes/+page.svelte                       |  12 +-
 src/routes/projects/+page.svelte              |  12 +-
 .../projects/projectn5/devlog/+page.svelte    | 239 ++----------------
 6 files changed, 130 insertions(+), 336 deletions(-)
 delete mode 100644 src/lib/lists/gallery-entry.svelte
 create mode 100644 src/lib/lists/gallery.svelte

diff --git a/src/lib/lists/gallery-entry.svelte b/src/lib/lists/gallery-entry.svelte
deleted file mode 100644
index 1c75a05..0000000
--- a/src/lib/lists/gallery-entry.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-    export interface GalleryEntry {
-        title: string;
-        subtitle: string;
-        fullWidth: boolean;
-        img: string;
-        imgAlt: string;
-        link: string;
-    }
-
-    let {
-        entries,
-    }: {
-        entries: GalleryEntry[];
-    } = $props();
-</script>
-
-<div class="container">
-    {#each entries as entry}
-    {#if entry.fullWidth}
-    <div class="entry-parent full-width notched">
-        {@render galleryEntry({entry})}
-    </div>
-    {:else}
-    <div class="entry-parent half-width notched">
-        {@render galleryEntry({entry})}
-    </div>
-    {/if}
-    {/each}
-</div>
-
-{#snippet galleryEntry({entry}: {entry: GalleryEntry})}
-<a class="entry" href="{entry.link}">
-    <img src="{entry.img}" alt="{entry.imgAlt}">
-    <p class="wide-font">{entry.title}</p>
-    <p>{@html entry.subtitle}</p>
-</a>
-{/snippet}
-
-<style>
-    .container {
-        margin-left: auto;
-        margin-right: auto;
-        display: flex;
-        flex-wrap: wrap;
-        /* flex-flow: row wrap; */
-        justify-content: left;
-        padding: 4px;
-    }
-
-    .entry-parent {
-        display: flex;
-    }
-
-    .entry {
-        width: 100%;
-        margin: 4px;
-        padding-bottom: 20px;
-        background-color: var(--color-background-highlight);
-        text-decoration: none; /* removes link underline */
-        transition: background-color 0.16s ease-in-out;
-    }
-    .entry:hover {
-        background-color: var(--color-background-highlight-hover);
-    }
-
-    .entry img {
-        width: 100%;
-        object-fit: cover;
-        max-height: 300px;
-    }
-    .entry p {
-        margin: 0 32px;
-    }
-    /* gallery entry header */
-    .entry p:nth-child(2) {
-        font-size: 20px;
-        margin-top: 12px;
-        font-family: var(--font-title);
-        font-size: 1.2rem;
-        font-weight: 800;
-        font-style: italic;
-    }
-
-    .half-width {
-        width: 50%;
-    }
-    .full-width {
-        width: 100%;
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/gallery.svelte
new file mode 100644
index 0000000..e718e87
--- /dev/null
+++ b/src/lib/lists/gallery.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    export interface GalleryEntry {
+        title: string;
+        subtitle: string;
+        img: string;
+        imgAlt: string;
+        link: string;
+    }
+
+    let {
+        entries,
+        reverseTextOrder,
+    }: {
+        entries: GalleryEntry[];
+        reverseTextOrder?: boolean;
+    } = $props();
+</script>
+
+<div class="post-list">
+    {#each entries as entry}
+        {@render galleryEntry({entry, reverseTextOrder})}
+    {/each}
+</div>
+
+{#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
+<!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
+    <a class="gallery-container" href="{entry.link}">
+        <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
+        <div class="gallery-text-container">
+            {#if reverseTextOrder}
+                <p class="gallery-date">{@html entry.subtitle}</p>
+                <p class="gallery-title">{entry.title}</p>
+            {:else}
+                <p class="gallery-title">{entry.title}</p>
+                <p class="gallery-date">{@html entry.subtitle}</p>
+            {/if}
+        </div>
+    </a>
+{/snippet}
+
+<style>
+    :root {
+        --color-laura: #C76668CC;
+        --color-laura-darker: #A55051CC;
+    }
+
+    .post-list {
+        max-width: 1600px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .gallery-container {
+        box-sizing: content-box;
+        height: 80px;
+        display: flex;
+        flex-direction: row;
+        text-decoration: none;
+        align-items: center;
+        margin: 6px 0;
+    }
+
+    .gallery-img {
+        width: 145px;
+        height: 100%;
+        margin: 0;
+        object-fit: cover;
+        filter: grayscale(60%);
+        transition: filter 0.1s ease-out;
+    }
+
+    .gallery-text-container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        height: 100%;
+        padding-left: 16px;
+        border-style: dashed;
+        justify-content: center;
+        border-color: transparent;
+        border-width: 2px;
+        border-left: none;
+        transition: border-color 0.1s ease-out;
+    }
+
+    .gallery-date, .gallery-title {
+        margin: 0;
+        transition: color 0.1s ease-out;
+    }
+
+    .gallery-date {
+        font-size: 1.0rem;
+    }
+
+    .gallery-title {
+        font-family: var(--font-mono);
+        font-weight: 700;
+    }
+
+    .gallery-container:hover .gallery-text-container {
+        border-color: var(--color-highlight);
+    }
+    .gallery-container:hover .gallery-img {
+        filter: grayscale(0%);
+    }
+    .gallery-container:hover p {
+        color: var(--color-highlight);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte
index 5c6d54b..c455859 100644
--- a/src/lib/table-of-contents.svelte
+++ b/src/lib/table-of-contents.svelte
@@ -81,10 +81,9 @@
 <style>
     :global {
         .toc-container {
-            width: 80%;
+            width: 70%;
             margin-left: auto;
             margin-right: auto;
-
             background-color: var(--color-background-highlight);
             padding: 16px 0;
         }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0b36820..6a96de7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,12 +2,11 @@
     import { onMount } from "svelte";
     import Content from "$lib/content.svelte";
     import GamedevWebring from "$lib/webrings/gamedev.svelte";
-    import Gallery from "$lib/lists/gallery-entry.svelte";
+    import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
     import LinkList from "$lib/link-list.svelte";
     import { quotes, type Quote } from "./quotes";
 
-    import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts";
-    import { type GalleryEntry } from "$lib/lists/gallery-entry.svelte";
+    import { posts } from "./projects/projectn5/devlog/posts";
 
     let meImg: string = $state("common/me/a.webp");
     let marqueeQuote: Quote = $state({
@@ -20,8 +19,7 @@
     const galleryEntries: GalleryEntry[] = [
         {
             title: "Project N5 – devlog",
-            subtitle: `my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: ${latestDevlogDate}</i>`,
-            fullWidth: true,
+            subtitle: `my active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
             img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
             imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
             link: "projects/projectn5/devlog",
@@ -29,15 +27,13 @@
         {
             title: "Projects",
             subtitle: "an overview of what I do and have done",
-            fullWidth: false,
             img: "projects/project-mix.webp",
             imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
             link: "projects",
         },
         {
             title: "Files",
-            subtitle: "find things I've put for download on my <a href='https://github.com/9001/copyparty'>copyparty</a> instance",
-            fullWidth: false,
+            subtitle: "find things I've put for download on my copyparty instance",
             img: "common/hypertext.webp",
             imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
             link: "//files.denizk0461.dev/",
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index a453945..93447c2 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -5,16 +5,6 @@
     import { projects } from './projects';
     import LinkList from "$lib/link-list.svelte";
     import Content from "$lib/content.svelte";
-
-    let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
-        var result: Project[] = [];
-        projects.forEach(project => {
-            if (project.isActive == isActive) {
-                result.push(project);
-            }
-        });
-        return result;
-    }
 </script>
 
 <svelte:head>
@@ -123,7 +113,7 @@
         
         color: var(--color-text-dark);
         background-color: var(--color-highlight);
-        font-family: var(--font-stylised);
+        font-family: var(--font-sans-serif);
         padding: 4px;
     }
 
diff --git a/src/routes/projects/projectn5/devlog/+page.svelte b/src/routes/projects/projectn5/devlog/+page.svelte
index 6ba0dcd..63fdc9e 100644
--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+page.svelte
@@ -3,6 +3,19 @@
     import Content from "$lib/content.svelte";
     // import type { DevlogPost } from "./devlog-posts";
     import { posts, type DevlogPost } from "./posts";
+    import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
+
+    let entries: GalleryEntry[] = posts.entries().map(mapEntries).toArray();
+
+    function mapEntries(m: [String, DevlogPost], index: number): GalleryEntry {
+        return {
+            title: `${m[1].title}`,
+            subtitle: `#${posts.size - index} // ${m[1].date}`,
+            img: `/projects/projectn5/devlog/${m[0]}/preview.webp`,
+            link: `/projects/projectn5/devlog/${m[0]}/`,
+            imgAlt: `Preview image for ${m[1].title}`,
+        };
+    }
 
     // Leftpads a single-digit number to two digits
     function leftpad(n: number): String {
@@ -28,227 +41,5 @@
 
     <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
 
-    <div class="post-list">
-        {#each posts.entries() as [key, post], index}
-            {@render devlogPost2({key, post, index})}
-        {/each}
-    </div>
-</Content>
-
-{#snippet devlogPost2({key, post, index}: {key: string, post: DevlogPost, index: number})}
-    <a class="post2-container" href="/projects/projectn5/devlog/{key}/">
-        <img class="post2-img" src="/projects/projectn5/devlog/{key}/preview.webp" alt="Preview image for devlog {post.title}">
-        <div class="post2-text-container">
-            <p class="post2-date"><span class="post2-number">#{posts.size - index}</span> // {post.date}</p>
-            <p class="post2-title">{post.title}</p>
-        </div>
-    </a>
-{/snippet}
-
-
-<style>
-    :root {
-        --color-laura: #C76668CC;
-        --color-laura-darker: #A55051CC;
-    }
-
-    .post-list {
-        max-width: 1600px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .post2-container {
-        box-sizing: content-box;
-        height: 80px;
-        display: flex;
-        flex-direction: row;
-        text-decoration: none;
-        align-items: center;
-        margin: 6px 0;
-        /* gap: 16px; */
-    }
-
-    .post2-img {
-        width: 145px;
-        height: 100%;
-        margin: 0;
-        object-fit: cover;
-        filter: grayscale(60%);
-        transition: filter 0.1s ease-out;
-    }
-
-    .post2-text-container {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        height: 100%;
-        padding-left: 16px;
-        border-style: dashed;
-        justify-content: center;
-        border-color: transparent;
-        border-width: 2px;
-        border-left: none;
-        transition: border-color 0.1s ease-out;
-    }
-
-    .post2-date, .post2-title, .post2-number {
-        margin: 0;
-        transition: color 0.1s ease-out;
-    }
-
-    .post2-date, .post2-number {
-        font-size: 1.0rem;
-    }
-
-    .post2-number {
-        color: var(--color-highlight);
-        font-weight: 700;
-    }
-
-    .post2-title {
-        font-family: var(--font-mono);
-        font-weight: 700;
-    }
-
-    .post2-container:hover .post2-text-container {
-        /* background-color: var(--color-background-highlight-hover); */
-        border-color: var(--color-highlight);
-    }
-    .post2-container:hover .post2-img {
-        filter: grayscale(0%);
-    }
-    .post2-container:hover p{/*}, .post2-container:hover .post2-number {*/
-        color: var(--color-highlight);
-    }
-
-    .post {
-        text-decoration: none;
-        background-color: #00000044;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        padding: 16px;
-        transition: background-color 0.16s ease-in-out;
-        margin: 4px;
-        
-        --notch-size-devlog: 30px;
-        --notch-size-devlog-img: 24px;
-        clip-path: polygon(
-            0% var(--notch-size-devlog), 
-            var(--notch-size-devlog) 0%, 
-            calc(100% - var(--notch-size-devlog)) 0%, 
-            100% var(--notch-size-devlog), 
-            100% calc(100% - var(--notch-size-devlog)), 
-            calc(100% - var(--notch-size-devlog)) 100%, 
-            var(--notch-size-devlog) 100%, 
-            0% calc(100% - var(--notch-size-devlog))
-        );
-    }
-    .post:hover {
-        background-color: var(--color-background-highlight-hover);
-    }
-
-    .post:hover .post-title, .post:hover .post-date {
-        color: var(--color-text-dark);
-    }
-
-    .post:hover .post-img-container {
-        background-color: transparent;
-    }
-
-    .post-img-container {
-        position: relative;
-        height: fit-content;
-        width: fit-content;
-        /* background-color: var(--color-background-highlight-hover); */
-        
-        transition: background-color 0.16s ease-in-out;
-        clip-path: polygon(
-            0% var(--notch-size-devlog-img), 
-            var(--notch-size-devlog-img) 0%, 
-            calc(100% - var(--notch-size-devlog-img)) 0%, 
-            100% var(--notch-size-devlog-img), 
-            100% calc(100% - var(--notch-size-devlog-img)), 
-            100% 100%, 
-            var(--notch-size-devlog-img) 100%, 
-            0% calc(100% - var(--notch-size-devlog-img))
-        );
-    }
-
-    .post-img {
-        width: 125px;
-        height: 100px;
-        margin: 0;
-        object-fit: cover;
-        
-        clip-path: polygon(
-            0% 0%, 
-            100% 0%, 
-            100% 0%, 
-            100% 0%, 
-            100% calc(100% - var(--notch-size-devlog-img)), 
-            calc(100% - var(--notch-size-devlog-img)) 100%, 
-            0% 100%, 
-            0% 100%
-        );
-    }
-
-    .post-text-container {
-        display: flex;
-        flex-direction: column;
-        padding-left: 24px;
-        justify-content: center;
-    }
-
-    .post-date, .post-title {
-        font-family: 'Space Mono', monospace;
-        margin: 4px 0;
-        transition: color 0.16s ease-in-out;
-    }
-
-    .post-date {
-        font-size: 0.8rem;
-        line-height: 0.7rem;
-        font-weight: 500;
-    }
-
-    .post-title {
-        font-size: 1.1rem;
-        line-height: 1.4rem;
-        font-weight: 700;
-    }
-
-    @media screen and (max-width: 1250px) {
-        .post-supercontainer {
-            width: 50% !important;
-        }
-    }
-
-    @media screen and (max-width: 700px) {
-        .post-supercontainer {
-            width: 100% !important;
-        }
-    }
-
-    @media screen and (max-width: 800px) {
-        .post {
-            --notch-size-devlog: 18px;
-            --notch-size-devlog-img: 12px;
-        }
-        .post-img {
-            width: 100px;
-            height: 70px;
-        }
-
-        .post-date {
-            font-size: 0.8rem;
-            line-height: 0.9rem;
-        }
-        
-        .post-title {
-            font-size: 1.0rem;
-            line-height: 1.1rem;
-        }
-    }
-</style>
\ No newline at end of file
+    <Gallery entries={entries} reverseTextOrder />
+</Content>
\ No newline at end of file