Added album remarks, lazy loading images

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>

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>

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">

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>