Add recent albums section at index

web/src/components/albums/albumCard.astro

@@ -6,13 +6,13 @@ const pb = await authPB()
 
 <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>
+        <h1 class="text-center pb-0 md:flex-1">{a.title}</h1>
+        <p class="text-center">{a.date}</p>
         <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}
+            src={pb.files.getURL(a, a.images[0])} 
+            class="w-full h-full object-contain"
+            loading="lazy"
+            alt={a.title}
         />
     </a>
 </div>

web/src/components/index/navbar.astro

@@ -4,10 +4,10 @@ const links = [
         txt: 'now',
         lnk: '/now'
     },
-    {
-        txt: 'photos',
-        lnk: '/photos'
-    },
+    // {
+    //     txt: 'photos',
+    //     lnk: '/photos'
+    // },
     {
         txt: 'albums',
         lnk: '/albums'

web/src/components/index/recentAlbums.astro

@@ -0,0 +1,36 @@
+---
+import SummaryCard from "./summaryCard.astro";
+import { authPB } from "@utils/pocketbase";
+import { getFormattedDate } from "@utils/date";
+
+const pb = await authPB()
+
+const albums = await pb.collection('albums').getList(1, 3, {
+	sort: '-created',
+})
+
+const postImages = await Promise.all( albums.items.map(a => pb.files.getURL(a, a.images[0])) )
+
+---
+<SummaryCard
+    title="Recent Albums",
+    titleLink="/albums"
+>
+    <div class="flex flex-col md:flex-row gap-4 md:gap-4">
+        {
+            albums.items.map((p, i) => (
+            <div class="flex md:flex-col flex-row gap-3 md:gap-2 flex-1">
+                <a href={`/albums/${encodeURI(p.title)}`} class="shrink-0">
+                    <img class="w-24 h-24 md:w-full md:h-48 object-cover rounded-sm" src={postImages[i]} alt={p.title}/>
+                </a>
+
+                <div class="flex flex-col justify-start md:justify-start">
+                    <a href={`/albums/${encodeURI(p.title)}`} class="b1-no-underline line-clamp-2 md:line-clamp-none">
+                        {p.title}
+                    </a>
+                </div>
+            </div>
+            ))
+        }
+    </div>
+</SummaryCard>

web/src/components/photos/carousel.astro

@@ -38,15 +38,6 @@ const photoLinks = await Promise.all(
         currentPosIndicator.innerText = '1';
     }
 
-    function preloadImages() {
-        photoLinks.forEach((url: string) => {
-            const preloadImg = new Image();
-            preloadImg.src = url;
-        });
-    }
-    
-    // Call preload on page load
-    preloadImages();
 
     const swiper = new Swiper('.swiper', {
         modules: [Navigation, Keyboard, EffectFade],

web/src/pages/albums/[title].astro

@@ -11,7 +11,7 @@ const images = await Promise.all(
 )
 ---
 
-<Base>
+<Base meta={{title: "album", description: album.title, ogImage: images[0]}}>
 
     <div slot="sidebar">
         <h1>{album.title}</h1>

web/src/pages/albums/index.astro

@@ -31,14 +31,16 @@ const albums = await pb.collection('albums').getFullList({
 </script>
 
 
-<Base>
-    <div slot="sidebar" class="text-left">
-        More focused photo albums. These are more single-purpose collections of photos compared to the general images of <a href="/photos">photos.</a> Best viewed on a large screen!
+<Base meta={{title: "albums"}}>
+    <div slot="sidebar">
+        <p class="text-left"> More focused, themed collections of photos compared to the more miscellaneous images of the (now defunct) <a href="/photos">photos page.</a> Best viewed on a large screen!</p>
+        <!-- <br>
+        ← / → -->
     </div>
 
     <div slot="content">
-        <div class="swiper-album w-full h-[90vh] overflow-hidden">
-            <div class="swiper-wrapper">
+        <div class=" w-full">
+            <div class="">
                 { albums.map(a =>  <AlbumCard a={a}/> ) }
             </div>
         </div>

web/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Base from "src/layout/Base.astro"
 import RecentPosts from "@components/index/recentPosts"
+import RecentAlbums from "@components/index/recentAlbums"
 
 export const prerender = false
 
@@ -12,15 +13,13 @@ export const prerender = false
 
 		<p>This is the third major iteration of the website, and by far the most flexible and best designed (imo!)</p><br>
 
-		<!-- todo: write this post lmfao -->
-		<!-- <p>If you're interested, I actually wrote <a href="/posts/design-for-purpose">a post</a> about the new design and all that went into it.</p><br> -->
-
-		<p>I'm... really not sure what to put on this landing page, make sure to check out some of the photos and posts I've added recently, I've been totally revamping those too and I'm really proud of this batch.</p><br>
+		<p>I'm... really not sure what else to put on this landing page, make sure to check out some of the photos and posts I've added recently, I've been totally revamping those too and I'm really proud of this batch.</p><br>
 
 		<p>Hope you enjoy your time here :)</p>
 	</div>
 
-	<!-- <div slot="content" class="md:py-10">
+	<div slot="content" class="md:py-10 space-y-4">
+		<RecentAlbums/>
 		<RecentPosts/>
-	</div> -->
+	</div>
 </Base>