gallery of photos in the activity page

bincio/edit/server.py

@@ -8,6 +8,7 @@ from pathlib import Path
 from typing import Any
 
 from fastapi import FastAPI, File, HTTPException, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
 
 # Populated by the CLI before uvicorn starts
@@ -16,6 +17,14 @@ site_url: str = "http://localhost:4321"
 
 app = FastAPI(title="BincioActivity Edit Server", docs_url=None, redoc_url=None)
 
+# Allow the Astro dev server (and any local origin) to call the write API
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 SPORTS = ["cycling", "running", "hiking", "walking", "swimming", "skiing", "other"]
 STAT_PANELS = ["elevation", "speed", "heart_rate", "cadence", "power"]
 

bincio/render/merge.py

@@ -90,6 +90,22 @@ def merge_all(data_dir: Path) -> int:
         for md_path in sorted(edits_dir.glob("*.md")):
             sidecars[md_path.stem] = parse_sidecar(md_path)
 
+    # Collect image lists — activities with uploaded images get custom.images even
+    # if they have no sidecar text yet
+    image_lists: dict[str, list[str]] = {}
+    images_root = edits_dir / "images" if edits_dir.exists() else None
+    if images_root and images_root.exists():
+        for img_dir in sorted(images_root.iterdir()):
+            if img_dir.is_dir():
+                files = sorted(
+                    p.name for p in img_dir.iterdir()
+                    if p.is_file() and not p.name.startswith(".")
+                )
+                if files:
+                    image_lists[img_dir.name] = files
+
+    to_merge = set(sidecars) | set(image_lists)
+
     # Wipe and recreate _merged/activities/
     if merged_acts.exists():
         shutil.rmtree(merged_acts)
@@ -102,20 +118,23 @@ def merge_all(data_dir: Path) -> int:
                 continue
             dest = merged_acts / src.name
             activity_id = src.stem
-            if src.suffix == ".json" and activity_id in sidecars:
+            if src.suffix == ".json" and activity_id in to_merge:
-                fm, body = sidecars[activity_id]
                 detail = json.loads(src.read_text(encoding="utf-8"))
-                merged = apply_sidecar(detail, fm, body)
+                if activity_id in sidecars:
-                dest.write_text(json.dumps(merged, indent=2, ensure_ascii=False))
+                    fm, body = sidecars[activity_id]
+                    detail = apply_sidecar(detail, fm, body)
+                if activity_id in image_lists:
+                    detail["custom"] = dict(detail.get("custom") or {})
+                    detail["custom"]["images"] = image_lists[activity_id]
+                dest.write_text(json.dumps(detail, indent=2, ensure_ascii=False))
             else:
                 dest.symlink_to(src.resolve())
 
     # Mirror edits/images/ → _merged/activities/images/ so the site can serve them
-    edits_images = edits_dir / "images" if edits_dir.exists() else None
+    if images_root and images_root.exists():
-    if edits_images and edits_images.exists():
         merged_images = merged_acts / "images"
         merged_images.mkdir(exist_ok=True)
-        for img_dir in edits_images.iterdir():
+        for img_dir in images_root.iterdir():
             if img_dir.is_dir():
                 dest_img = merged_images / img_dir.name
                 if not dest_img.exists():

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:')
+      const isLocal = href && !href.startsWith('http') && !href.startsWith('/') && !href.startsWith('data:');
-        ? imageBase + href
+      if (isLocal) return '';
-        : href ?? '';
       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 -->