componised ImageRow from /feed

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,71 @@
+<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(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);
+    }
+
+    @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/routes/feed/+page.svelte

@@ -2,6 +2,7 @@
     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>
@@ -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[] = [