From ff486c01e3bb01d554b6bbbed3da2accd4890543 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Sat, 22 Nov 2025 16:03:50 +1300
Subject: [PATCH] Added album remarks, lazy loading images

---
 web/src/components/albums/albumCard.astro | 1 +
 web/src/components/photos/carousel.astro  | 1 +
 web/src/pages/albums/[title].astro        | 4 +++-
 web/src/pages/albums/index.astro          | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/albums/albumCard.astro b/web/src/components/albums/albumCard.astro
index 080b811..49b1208 100644
--- a/web/src/components/albums/albumCard.astro
+++ b/web/src/components/albums/albumCard.astro
@@ -11,6 +11,7 @@ const pb = await authPB()
         <img 
         src={pb.files.getURL(a, a.images[0])} 
         class="flex-1 md:flex-2 w-full h-full object-contain"
+        loading="lazy"
         alt={a.title}
         />
     </a>
diff --git a/web/src/components/photos/carousel.astro b/web/src/components/photos/carousel.astro
index 3154940..a08cdb7 100644
--- a/web/src/components/photos/carousel.astro
+++ b/web/src/components/photos/carousel.astro
@@ -102,6 +102,7 @@ const photoLinks = await Promise.all(
                 <img 
                     src={photoLinks[i]} 
                     class="w-full h-full object-contain"
+                    loading="lazy"
                     alt={photo.title || 'Photo'}
                 />
             </div>
diff --git a/web/src/pages/albums/[title].astro b/web/src/pages/albums/[title].astro
index 37a3acd..d4498cb 100644
--- a/web/src/pages/albums/[title].astro
+++ b/web/src/pages/albums/[title].astro
@@ -16,7 +16,9 @@ const images = await Promise.all(
     <div slot="sidebar">
         <h1>{album.title}</h1>
         <p>{album.date}</p>
-        <p>{album.location}</p>
+        <p>{album.location}</p><br>
+
+        <Fragment set:html={album.remarks}/>
     </div>
 
     <div slot="content">
diff --git a/web/src/pages/albums/index.astro b/web/src/pages/albums/index.astro
index 92d4009..78f8445 100644
--- a/web/src/pages/albums/index.astro
+++ b/web/src/pages/albums/index.astro
@@ -37,7 +37,7 @@ const albums = await pb.collection('albums').getFullList({
     </div>
 
     <div slot="content">
-        <div class="swiper-album w-full h-[80vh] overflow-hidden">
+        <div class="swiper-album w-full h-[90vh] overflow-hidden">
             <div class="swiper-wrapper">
                 { albums.map(a =>  <AlbumCard a={a}/> ) }
             </div>