componised ImageRow from /feed

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">
-                {#each post.metadata.images as i, index}
-                    <a class="image-gallery-link" href="{post.metadata.id}/{i.src}">
-                        <img class="image-gallery-img" loading="lazy" src="{post.metadata.id}/{i.src}" alt={i.alt}>
-                    </a>
-                {/each}
-            </div>
+            <ImageRow
+                images={post.metadata.images}
+                path={post.metadata.id}
+            />
         {/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[];
-}
-
-interface FeedImage {
-    src: string;
-    alt: string;
+    images: A11yImage[];
 }
 
 export let entries: FeedEntry[] = [