feat: reorganize blog layout

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"
+      id="recent-articles"
-      class="smooth-reveal-2 mb-4 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+      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>
 

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}

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 BlogSelectedArticles from '@components/blog/BlogSelectedArticles.astro';
-import BlogFeaturedArticle from '@components/blog/BlogFeaturedArticle.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} />
+  <BlogSelectedArticles posts={selectedPosts} />
-  <BlogFeaturedArticle posts={selectedPosts} />
+  <BlogRecentArticles posts={recentPosts} />
 </BaseLayout>
 
 <script>