Add detail page for album

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>

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>
+                            <a class="b1-no-underline" href={`/albums/${encodeURI(a.title)}`}>
-                            <p class="flex-2 text-center md:flex-1">{a.date}</p>
+                                <h1 class="flex-2 text-center pb-0 md:flex-1">{a.title}</h1>
-                            <img 
+                                <p class="flex-2 text-center md:flex-1">{a.date}</p>
-                                src={pb.files.getURL(a, a.images[0])} 
+                                <img 
-                                class="flex-1 md:flex-2 w-full h-full object-contain"
+                                    src={pb.files.getURL(a, a.images[0])} 
-                                alt={a.title}
+                                    class="flex-1 md:flex-2 w-full h-full object-contain"
-                            />
+                                    alt={a.title}
+                                />
+                            </a>
                         </div>
                     ))
                 }