From 1f3fed93a15101e26e766b34d906ddb7853b2a90 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Tue, 3 Feb 2026 16:42:17 -0600
Subject: [PATCH] feat: reorganize blog layout

---
 ...aturedArticle.astro => BlogRecentArticles.astro} |  6 +++---
 ...gRecentCard.astro => BlogSelectedArticles.astro} |  3 +--
 src/pages/blog/index.astro                          | 13 ++++++++-----
 3 files changed, 12 insertions(+), 10 deletions(-)
 rename src/components/blog/{BlogFeaturedArticle.astro => BlogRecentArticles.astro} (77%)
 rename src/components/blog/{BlogRecentCard.astro => BlogSelectedArticles.astro} (94%)

diff --git a/src/components/blog/BlogFeaturedArticle.astro b/src/components/blog/BlogRecentArticles.astro
similarity index 77%
rename from src/components/blog/BlogFeaturedArticle.astro
rename to src/components/blog/BlogRecentArticles.astro
index 0a6869d..e3695ca 100644
--- a/src/components/blog/BlogFeaturedArticle.astro
+++ b/src/components/blog/BlogRecentArticles.astro
@@ -12,10 +12,10 @@ const { posts } = Astro.props;
 <section class="mx-auto mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
   <div class="text-left">
     <h2
-      id="selected-articel"
-      class="smooth-reveal-2 mb-4 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+      id="recent-articles"
+      class="smooth-reveal-2 mb-10 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
     >
-      Older Articles
+      Recent Posts
     </h2>
   </div>
 
diff --git a/src/components/blog/BlogRecentCard.astro b/src/components/blog/BlogSelectedArticles.astro
similarity index 94%
rename from src/components/blog/BlogRecentCard.astro
rename to src/components/blog/BlogSelectedArticles.astro
index 189aa62..f99bb67 100644
--- a/src/components/blog/BlogRecentCard.astro
+++ b/src/components/blog/BlogSelectedArticles.astro
@@ -10,12 +10,11 @@ interface Props {
 }
 
 const { posts } = Astro.props;
-const blogPosts = posts.slice(0, 5);
 ---
 
 <section class="smooth-reveal">
   {
-    blogPosts.map((b, index) =>
+    posts.map((b, index) =>
       index % 2 === 0 ? (
         <BlogLeftSection
           title={b.title}
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 99d9485..635f068 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -5,8 +5,8 @@ import type { Post } from '@lib/directusTypes';
 
 import directus from '@lib/directus';
 import BaseLayout from '@layouts/BaseLayout.astro';
-import BlogRecentCard from '@components/blog/BlogRecentCard.astro';
-import BlogFeaturedArticle from '@components/blog/BlogFeaturedArticle.astro';
+import BlogSelectedArticles from '@components/blog/BlogSelectedArticles.astro';
+import BlogRecentArticles from '@components/blog/BlogRecentArticles.astro';
 import HeroSection from '@components/ui/sections/HeroSection.astro';
 import blogImg from '@images/autumn_tree.png';
 
@@ -18,7 +18,10 @@ const posts = await directus.request(
     sort: ['-published_date'],
   })
 );
-const selectedPosts: Post[] = posts.filter((p) => p.selected);
+const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
+const recentPosts: Post[] = posts.filter(
+  (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
+).slice(0, 6);
 ---
 
 <BaseLayout
@@ -42,8 +45,8 @@ const selectedPosts: Post[] = posts.filter((p) => p.selected);
 >
   <HeroSection title="Blog" subTitle={global.about_blog} src={blogImg} alt={global.blog_image_alt} />
 
-  <BlogRecentCard posts={posts} />
-  <BlogFeaturedArticle posts={selectedPosts} />
+  <BlogSelectedArticles posts={selectedPosts} />
+  <BlogRecentArticles posts={recentPosts} />
 </BaseLayout>
 
 <script>