From 20f8b38c8a937c0e6d41313da5734844be507198 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Sat, 22 Nov 2025 15:18:57 +1300
Subject: [PATCH] Add detail page for album

---
 web/src/pages/albums/[title].astro | 29 +++++++++++++++++++++++++++++
 web/src/pages/albums/index.astro   | 16 +++++++++-------
 2 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 web/src/pages/albums/[title].astro

diff --git a/web/src/pages/albums/[title].astro b/web/src/pages/albums/[title].astro
new file mode 100644
index 0000000..37a3acd
--- /dev/null
+++ b/web/src/pages/albums/[title].astro
@@ -0,0 +1,29 @@
+---
+import Base from "@layout/Base";
+import { authPB } from "@utils/pocketbase";
+export const prerender = false
+
+const { title } = Astro.params
+const pb = await authPB()
+const album = await pb.collection('albums').getFirstListItem(`title ~ "${decodeURI(title!)}"`)
+const images = await Promise.all(
+    album.images.map(i => pb.files.getURL(album, i))
+)
+---
+
+<Base>
+
+    <div slot="sidebar">
+        <h1>{album.title}</h1>
+        <p>{album.date}</p>
+        <p>{album.location}</p>
+    </div>
+
+    <div slot="content">
+        {
+            images.map(img => (
+                <img class="pb-2" src={img}/>
+            ))
+        }
+    </div>
+</Base>
diff --git a/web/src/pages/albums/index.astro b/web/src/pages/albums/index.astro
index 08fe07a..63b739f 100644
--- a/web/src/pages/albums/index.astro
+++ b/web/src/pages/albums/index.astro
@@ -41,13 +41,15 @@ const albums = await pb.collection('albums').getFullList({
                 {
                     albums.map(a => (
                         <div class="swiper-slide flex flex-col md:flex-row items-center justify-center">
-                            <h1 class="flex-2 text-center pb-0 md:flex-1">{a.title}</h1>
-                            <p class="flex-2 text-center md:flex-1">{a.date}</p>
-                            <img 
-                                src={pb.files.getURL(a, a.images[0])} 
-                                class="flex-1 md:flex-2 w-full h-full object-contain"
-                                alt={a.title}
-                            />
+                            <a class="b1-no-underline" href={`/albums/${encodeURI(a.title)}`}>
+                                <h1 class="flex-2 text-center pb-0 md:flex-1">{a.title}</h1>
+                                <p class="flex-2 text-center md:flex-1">{a.date}</p>
+                                <img 
+                                    src={pb.files.getURL(a, a.images[0])} 
+                                    class="flex-1 md:flex-2 w-full h-full object-contain"
+                                    alt={a.title}
+                                />
+                            </a>
                         </div>
                     ))
                 }