swapped copyparty for drawing gallery link on main page; display latest drawing date there too; added drawing gallery link to header and footer

src/lib/media/a11y-img.ts

@@ -0,0 +1,4 @@
+export interface A11yImage {
+    src: string;
+    alt: string;
+}

src/lib/media/image-row.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { type A11yImage } from "./a11y-img";
+
+    let {
+        images,
+
+        // path in which all images lie. this must be the same for all images. if left blank, "./" is used instead
+        path,
+    }: {
+        images: A11yImage[];
+        path?: string;
+    } = $props();
+</script>
+
+<div class="image-gallery">
+    {#each images as i}
+        <a class="image-gallery-link" href="{path ?? "./"}/{i.src}">
+            <img class="image-gallery-img" loading="lazy" src="{path ?? "./"}/{i.src}" alt={i.alt}>
+        </a>
+    {/each}
+</div>
+
+<style>
+    .image-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 4px;
+    }
+
+    .image-gallery-img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        filter: brightness(100%) saturate(80%);
+        max-height: 320px;
+        transition: filter var(--duration-animation) var(--anim-curve),
+                    scale var(--duration-animation) var(--anim-curve);
+        scale: 1.06;
+    }
+
+    .image-gallery-link {
+        outline: var(--border-style) var(--border-dash-size) transparent;
+        border-radius: var(--border-radius);
+        z-index: 10;
+        transition: outline-color var(--duration-animation) var(--anim-curve);
+        overflow: hidden;
+        margin: 0;
+    }
+
+    .image-gallery:hover .image-gallery-img {
+        filter: brightness(60%) saturate(80%);
+    }
+
+    .image-gallery-link:hover .image-gallery-img {
+        filter: brightness(100%) saturate(100%);
+        scale: 1.0;
+    }
+
+    .image-gallery-link:hover {
+        outline-color: var(--color-highlight);
+    }
+
+    @media screen and (max-width: 800px) {
+        .image-gallery-link:hover {
+            outline-color: transparent;
+        }
+
+        .image-gallery-img {
+            border-radius: 0;
+            scale: 1.0;
+            filter: brightness(100%) saturate(100%);
+        }
+    }
+</style>

src/lib/viewport/footer.svelte

@@ -28,6 +28,7 @@
                 <a class="link-level-2" href="/projects/projectn5">Homesick</a>
                 <a href="/feed">Feed</a>
                 <a href="/blog">Blog</a>
+                <a href="/drawings">Drawing Gallery</a>
             </div>
             <div class="content-box">
                 <h6>Meta</h6>
@@ -128,6 +129,7 @@
 
     .commit {
         display: inline;
+        font-size: inherit;
     }
 
     @media screen and (max-width: 800px) {

src/lib/viewport/header.svelte

@@ -3,6 +3,7 @@
     <a href="/projects">projects</a>
     <a href="/feed">feed</a>
     <a href="/blog">blog</a>
+    <a href="/drawings">drawings</a>
     <a href="/meta/about">about</a>
 {/snippet}
 

src/routes/+page.svelte

@@ -6,11 +6,16 @@
     import { posts as blogPosts } from "./blog/posts";
     // import IndieButton from "$lib/components/indie-button.svelte";
     // import { buttons } from "$lib/components/indie-button";
-    import { getContext, onMount, setContext } from "svelte";
+    import { onMount } from "svelte";
     import { getLatestPostDate } from "./feed/feed";
+    import { drawings } from "./drawings/drawings";
 
     let latestDevlogDate = devlogPosts[0].post.date;
-    let latestBlogDate = blogPosts[0].post.date;
+
+    // this only fetches the updated date if the latest post has been updated
+    let latestBlogDate = blogPosts[0].post.dateUpdated ?? blogPosts[0].post.date;
+
+    let latestDrawingDate = drawings[drawings.length - 1].date;
 
     let latestStatusContent = $state("fetching status...");
     let latestStatusTimestamp = $state("?");
@@ -122,12 +127,20 @@
                 link: "blog",
             },
             {
-                title: "Files",
+                title: "Drawing Gallery",
-                description: "find things I've put for download on my copyparty instance.",
+                description: "a collection of my digital and physical drawings.",
-                img: "main/hypertext.webp",
+                latestUpdate: latestDrawingDate,
-                altText: "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 brandenbur ger tor!' is displayed.",
+                img: "drawings/banner.webp",
-                link: "https://files.natconf.dev/public/",
+                altText: "Several Faber-Castell Polychromos colour pencils lined up with markings next to them in the same colour on a sheet of paper.",
+                link: "drawings",
             },
+            // {
+            //     title: "Files",
+            //     description: "find things I've put for download on my copyparty instance.",
+            //     img: "main/hypertext.webp",
+            //     altText: "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 brandenbur ger tor!' is displayed.",
+            //     link: "https://files.natconf.dev/public/",
+            // },
         ]} />
     
     <hr>

src/routes/drawings/+page.svelte

@@ -107,10 +107,13 @@
         overflow: hidden;
         border-radius: var(--border-radius);
         filter: brightness(70%) saturate(60%);
-        transition: filter var(--duration-animation) var(--anim-curve);
+        outline: var(--border-style) var(--border-dash-size) transparent;
+        transition: filter var(--duration-animation) var(--anim-curve),
+                    outline-color var(--duration-animation) var(--anim-curve);
     }
     .img-button:hover {
         filter: brightness(100%) saturate(100%);
+        outline-color: var(--color-highlight);
     }
 
     .img-button img {

src/routes/feed/+page.svelte

@@ -2,12 +2,13 @@
     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";
 
     export let data;
 </script>
 
 <svelte:head>
-    <title>Art Feed | denizk0461</title>
+    <title>Creative Feed | denizk0461</title>
 </svelte:head>
 
 {#snippet pageButtons(currentIndex: number)}
@@ -34,7 +35,7 @@
     <Banner2
         title="Creative Feed"
         banner="banner.webp"
-        bannerAlt="Mirror picture of me, pixelated beyond recognition"
+        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"
     />
 
@@ -52,13 +53,10 @@
         <p class="subtitle">{post.metadata.date}</p>
         <svelte:component this={post.content} />
         {#if post.metadata.images && post.metadata.images.length > 0}
-            <div class="image-gallery">
+            <ImageRow
-                {#each post.metadata.images as i, index}
+                images={post.metadata.images}
-                    <a class="image-gallery-link" href="{post.metadata.id}/{i.src}">
+                path={post.metadata.id}
-                        <img class="image-gallery-img" loading="lazy" src="{post.metadata.id}/{i.src}" alt={i.alt}>
+            />
-                    </a>
-                {/each}
-            </div>
         {/if}
     {/each}
 
@@ -115,42 +113,6 @@
         background-color: var(--color-background-highlight-alt);
     }
 
-    .image-gallery {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 4px;
-    }
-
-    .image-gallery-img {
-        width: 100%;
-        height: 100%;
-        display: block;
-        object-fit: cover;
-        filter: brightness(60%) saturate(80%);
-        max-height: 320px;
-        transition: filter var(--duration-animation) var(--anim-curve),
-                    scale var(--duration-animation) var(--anim-curve);
-        scale: 1.04;
-    }
-
-    .image-gallery-link {
-        outline: var(--border-style) var(--border-dash-size) transparent;
-        border-radius: var(--border-radius);
-        z-index: 10;
-        transition: outline-color var(--duration-animation) var(--anim-curve);
-        overflow: hidden;
-        margin: 0;
-    }
-
-    .image-gallery-link:hover .image-gallery-img {
-        filter: brightness(100%) saturate(100%);
-        scale: 1.0;
-    }
-
-    .image-gallery-link:hover {
-        outline-color: var(--color-highlight);
-    }
-
     .subtitle {
         font-family: var(--font-mono);
         margin: 0;
@@ -168,20 +130,4 @@
     .subtitle::after {
         content: " -->";
     }
-
-    @media screen and (max-width: 800px) {
-        /* .image-gallery-link, .image-gallery-link:hover .image-gallery-img {
-            border-radius: 0;
-        } */
-
-        .image-gallery-link:hover {
-            outline-color: transparent;
-        }
-
-        .image-gallery-img {
-            border-radius: 0;
-            scale: 1.0;
-            filter: brightness(100%) saturate(100%);
-        }
-    }
 </style>

src/routes/feed/feed.ts

@@ -1,15 +1,12 @@
+import { type A11yImage } from "$lib/media/a11y-img";
+
 export interface FeedEntry {
     id: string;
     title: string;
     subtitle: string;
     date: string;
     posted: string;
-    images: FeedImage[];
+    images: A11yImage[];
-}
-
-interface FeedImage {
-    src: string;
-    alt: string;
 }
 
 export let entries: FeedEntry[] = [