From 60a1e22392ae6c17d956c278a4bbe9e22d19c84d Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Wed, 17 Jan 2024 15:24:02 +0630
Subject: [PATCH] fix: remove recent posts section if there's no post

Changes made:
- Removed the recent posts section if there are no posts under the recent section.
- Eliminated unnecessary <Hr /> tags when there are no recent posts.
- Extracted all-links from the recent section.

Closes: #204
---
 src/pages/index.astro | 46 ++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index bc752611f..82b74bc09 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,6 +14,7 @@ const posts = await getCollection("blog");
 
 const sortedPosts = getSortedPosts(posts);
 const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
+const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
 const socialCount = SOCIALS.filter(social => social.active).length;
 ---
@@ -83,18 +84,17 @@ const socialCount = SOCIALS.filter(social => social.active).length;
               ))}
             </ul>
           </section>
-          <Hr />
+          {recentPosts.length > 0 && <Hr />}
         </>
       )
     }
 
-    <section id="recent-posts">
-      <h2>Recent Posts</h2>
-      <ul>
-        {
-          sortedPosts
-            .filter(({ data }) => !data.featured)
-            .map(
+    {
+      recentPosts.length > 0 && (
+        <section id="recent-posts">
+          <h2>Recent Posts</h2>
+          <ul>
+            {recentPosts.map(
               ({ data, slug }, index) =>
                 index < 4 && (
                   <Card
@@ -103,20 +103,22 @@ const socialCount = SOCIALS.filter(social => social.active).length;
                     secHeading={false}
                   />
                 )
-            )
-        }
-      </ul>
-      <div class="all-posts-btn-wrapper">
-        <LinkButton href="/posts">
-          All Posts
-          <svg xmlns="http://www.w3.org/2000/svg"
-            ><path
-              d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
-            ></path>
-          </svg>
-        </LinkButton>
-      </div>
-    </section>
+            )}
+          </ul>
+        </section>
+      )
+    }
+
+    <div class="all-posts-btn-wrapper">
+      <LinkButton href="/posts">
+        All Posts
+        <svg xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
+          ></path>
+        </svg>
+      </LinkButton>
+    </div>
   </main>
 
   <Footer />