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,6 +41,7 @@ const albums = await pb.collection('albums').getFullList({
                 {
                     albums.map(a => (
                         <div class="swiper-slide flex flex-col md:flex-row items-center justify-center">
+                            <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 
@@ -48,6 +49,7 @@ const albums = await pb.collection('albums').getFullList({
                                     class="flex-1 md:flex-2 w-full h-full object-contain"
                                     alt={a.title}
                                 />
+                            </a>
                         </div>
                     ))
                 }