gallery of photos in the activity page

site/astro.config.mjs

@@ -4,6 +4,7 @@ import tailwind from "@astrojs/tailwind";
 
 export default defineConfig({
   integrations: [svelte(), tailwind()],
+  devToolbar: { enabled: false },
   output: "static",
   // When hosting at a subdirectory (e.g. GitHub Pages project site), set:
   // base: "/repo-name",

site/src/components/ActivityDetail.svelte

@@ -16,6 +16,7 @@
   let error = '';
   let hoveredIdx: number | null = null;
   let editOpen = false;
+  let lightboxIndex: number | null = null;
 
   // Local overrides applied immediately after a save (no re-fetch needed)
   let localTitle = '';
@@ -42,21 +43,32 @@
   $: trackUrl = activity.track_url ? `${base}data/${activity.track_url}` : null;
   $: color = sportColor(activity.sport);
 
+  function lightboxPrev() { if (lightboxIndex !== null) lightboxIndex = (lightboxIndex - 1 + galleryImages.length) % galleryImages.length; }
+  function lightboxNext() { if (lightboxIndex !== null) lightboxIndex = (lightboxIndex + 1) % galleryImages.length; }
+  function onKeydown(e: KeyboardEvent) {
+    if (lightboxIndex === null) return;
+    if (e.key === 'ArrowLeft')  { e.preventDefault(); lightboxPrev(); }
+    if (e.key === 'ArrowRight') { e.preventDefault(); lightboxNext(); }
+    if (e.key === 'Escape')     { lightboxIndex = null; }
+  }
+
   $: rawDescription = localDescription || detail?.description || '';
   $: descriptionHtml = (() => {
     if (!rawDescription) return '';
-    const imageBase = `${base}data/activities/images/${activity.id}/`;
     const renderer = new marked.Renderer();
+    // Local relative images are always shown in the gallery — suppress inline rendering
     renderer.image = ({ href, title, text }) => {
-      const src = href && !href.startsWith('http') && !href.startsWith('/') && !href.startsWith('data:')
-        ? imageBase + href
-        : href ?? '';
+      const isLocal = href && !href.startsWith('http') && !href.startsWith('/') && !href.startsWith('data:');
+      if (isLocal) return '';
       const titleAttr = title ? ` title="${title}"` : '';
-      return `<img src="${src}" alt="${text}"${titleAttr} class="rounded-lg max-w-full my-2">`;
+      return `<img src="${href ?? ''}" alt="${text}"${titleAttr} class="rounded-lg max-w-full my-2">`;
     };
     return marked(rawDescription, { renderer }) as string;
   })();
 
+  $: imageBase = `${base}data/activities/images/${activity.id}/`;
+  $: galleryImages = (detail?.custom as any)?.images as string[] ?? [];
+
   const stat = (label: string, value: string, key?: string) => ({ label, value, key });
   $: hiddenStats = new Set<string>((detail?.custom as any)?.hide_stats ?? []);
   $: stats = [
@@ -71,10 +83,62 @@
   ].filter(s => !s.key || !hiddenStats.has(s.key));
 </script>
 
+<svelte:window on:keydown={onKeydown} />
+
 {#if editOpen && editUrl}
   <EditDrawer activityId={activity.id} {editUrl} on:saved={onSaved} />
 {/if}
 
+<!-- Lightbox -->
+{#if lightboxIndex !== null}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+    on:click={() => lightboxIndex = null}
+    on:keydown={onKeydown}
+  >
+    <!-- Prev -->
+    {#if galleryImages.length > 1}
+      <button
+        class="absolute left-4 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-3xl px-3 py-6 transition-colors z-10"
+        on:click|stopPropagation={lightboxPrev}
+        aria-label="Previous"
+      >‹</button>
+    {/if}
+
+    <img
+      src={imageBase + galleryImages[lightboxIndex]}
+      alt={galleryImages[lightboxIndex]}
+      class="max-h-[90vh] max-w-[90vw] rounded-lg shadow-2xl object-contain"
+      on:click|stopPropagation
+    />
+
+    <!-- Next -->
+    {#if galleryImages.length > 1}
+      <button
+        class="absolute right-4 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-3xl px-3 py-6 transition-colors z-10"
+        on:click|stopPropagation={lightboxNext}
+        aria-label="Next"
+      >›</button>
+    {/if}
+
+    <!-- Counter + filename -->
+    <div class="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/50 text-xs text-center">
+      <p>{galleryImages[lightboxIndex]}</p>
+      {#if galleryImages.length > 1}
+        <p class="mt-0.5">{lightboxIndex + 1} / {galleryImages.length}</p>
+      {/if}
+    </div>
+
+    <!-- Close -->
+    <button
+      class="absolute top-4 right-5 text-white/50 hover:text-white text-2xl transition-colors"
+      on:click={() => lightboxIndex = null}
+      aria-label="Close"
+    >×</button>
+  </div>
+{/if}
+
 <!-- Header -->
 <div class="flex items-start gap-4 mb-6">
   <a href={`${base}`} class="text-zinc-500 hover:text-white transition-colors mt-1 shrink-0">
@@ -111,6 +175,26 @@
   </div>
 </div>
 
+<!-- Photo gallery -->
+{#if galleryImages.length}
+  <div class="mb-4 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
+    {#each galleryImages as img, i}
+      <button
+        class="relative overflow-hidden rounded-lg bg-zinc-800 aspect-square hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500"
+        on:click={() => lightboxIndex = i}
+        aria-label="Open photo {i + 1}"
+      >
+        <img
+          src={imageBase + img}
+          alt={img}
+          class="w-full h-full object-cover"
+          loading="lazy"
+        />
+      </button>
+    {/each}
+  </div>
+{/if}
+
 <!-- Map + Stats split -->
 <div class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-4 mb-4">
   <!-- Map -->