Add recent posts section to index

web/src/components/index/recentPosts.astro

@@ -0,0 +1,39 @@
+---
+import SummaryCard from "./summaryCard.astro";
+import { authPB } from "@utils/pocketbase";
+import { getFormattedDate } from "@utils/date";
+
+const pb = await authPB()
+
+const posts = await pb.collection('posts').getList(1, 3, {
+	sort: '-publishDate',
+    filter: 'published=true',
+})
+
+const postImages = await Promise.all( posts.items.map(p => pb.files.getURL(p, p.headerImage)) )
+
+---
+<SummaryCard
+    title="Recent Posts",
+    titleLink="/posts"
+>
+    <div class="flex flex-col md:flex-row gap-4 md:gap-4">
+        {
+            posts.items.map((p, i) => (
+            <div class="flex md:flex-col flex-row gap-3 md:gap-2 flex-1">
+                <time class="hidden md:block text-sm text-gray-500" datetime={p.publishDate}>{getFormattedDate(p.publishDate)}</time>
+                <a href={`/posts/${p.slug}`} class="shrink-0">
+                    <img class="w-24 h-24 md:w-full md:h-48 object-cover rounded-lg" src={postImages[i]} alt={p.title}/>
+                </a>
+
+                <div class="flex flex-col justify-start md:justify-start">
+                    <a href={`/posts/${p.slug}`} class="b1-no-underline line-clamp-2 md:line-clamp-none">
+                        {p.title}
+                    </a>
+                    <time class="md:hidden text-sm text-gray-500" datetime={p.publishDate}>{getFormattedDate(p.publishDate)}</time>
+                </div>
+            </div>
+            ))
+        }
+    </div>
+</SummaryCard>

web/src/components/index/summaryCard.astro

@@ -0,0 +1,14 @@
+---
+
+const { title, titleLink } = Astro.props
+
+---
+
+<div>
+    <a href={titleLink} rel="prefetch" class="b1-no-underline">
+            <h2 class="text-xl">{title}</h2>
+    </a>
+    <div class="flex flex-row gap-2">
+        <slot/>
+    </div>
+</div>

web/src/components/photos/carousel.astro

@@ -89,7 +89,7 @@ const photoLinks = await Promise.all(
 <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
 <div class="hidden" id="photo-links-data">{JSON.stringify(photoLinks)}</div>
 
-<div class="swiper w-full h-[60vh] md:h-[calc(100vh-7rem)]">
+<div class="swiper w-full h-[70vh] md:h-[calc(100vh-7rem)]">
     <div class="swiper-wrapper">
         {photos.map((photo, i) => (
             <div class="swiper-slide flex items-center justify-center">

web/src/components/postList/postCard.astro

@@ -1,27 +1,41 @@
 ---
-import { getFormattedDate } from "@utils/date"
+import { calcReadTime } from "@utils/post"
 import { authPB } from "@utils/pocketbase"
+import PostInfo from "@components/post/postInfo"
 
 const pb = await authPB()
 const { p } = Astro.props
+
+const wordCount = p.content.split(' ').length;
+const readTime = calcReadTime(wordCount);
 ---
 
-<div class="mb-8 pb-4 md:pb-8 border-b border-gray-200 last:border-b-0 flex flex-col md:flex-row gap-4 md:gap-3">
+<div class="mb-8 pb-7 md:pb-8 border-b border-gray-200 last:border-b-0 flex flex-col md:flex-row gap-4 md:gap-3">
     <!-- Text content on left -->
     <div class="flex-1  flex flex-col justify-start order-2 md:order-1">
         
-        <time datetime={p.publishDate} class="text-sm text-gray-500">{getFormattedDate(p.publishDate)}</time>
         <a href={`/posts/${p.slug}/`} rel="prefetch" class="no-underline hover:underline">
-            <h2 class="text-xl font-bold ">{p.title}</h2>
+            <h2 class="text-xl ">{p.title}</h2>
         </a>
         {
             p.description !== "" &&
-            <q class="line-clamp-3 block italic text-gray-700">{p['description']}</q>
+            <p class="line-clamp-3 block italic text-gray-600">{p.description}</p>
         }
+
+        <div class="flex flex-row gap-1">
+            <PostInfo
+                publishDate={p.publishDate},
+                wordCount={wordCount},
+                readTime={readTime},
+                tags={p.tags}
+            />
+        </div>
     </div>
 
+    
+    
     <!-- Image on right -->
-    <div class="md:w-80 order-1 md:order-2">
+    <div class="md:max-w-1/2 order-1 md:order-2">
         <a href={`/posts/${p.slug}/`} rel="prefetch">
             <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-sm w-full h-48 md:h-full object-cover" alt={p['title']}/>
         </a>

web/src/pages/index.astro

@@ -1,13 +1,21 @@
 ---
 import Base from "src/layout/Base.astro"
+import RecentPosts from "@components/index/recentPosts"
+
+export const prerender = false
+
 ---
 
 <Base>
-	<div slot="sidebar">
+	<div slot="sidebar" class="text-left">
-		sidebar stuff
+		<p>New website new me!</p> <br>
+		<p>Check out some of the photos and posts I've added recently, as well as the new design.</p><br>
+
+		<!-- todo: write this post lmfao -->
+		<p>If you're interested, I actually wrote a post about the new design and all that went into it.</p>
 	</div>
 
-	<div slot="content">
+	<div slot="content" class="md:py-10">
-		ya
+		<RecentPosts/>
 	</div>
 </Base>