fix: remove recent posts section if there's no post (#238)

Changes made:
- Removed the recent posts section if there's no post under the recent section.
- Eliminated unnecessary <Hr /> tags when there's no recent post.
- Extracted all-links from the recent section and put it above the footer.

Closes: #204

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 />}
         </>
       )
     }
 
+    {
+      recentPosts.length > 0 && (
         <section id="recent-posts">
           <h2>Recent Posts</h2>
           <ul>
-        {
+            {recentPosts.map(
-          sortedPosts
-            .filter(({ data }) => !data.featured)
-            .map(
               ({ data, slug }, index) =>
                 index < 4 && (
                   <Card
@@ -103,9 +103,12 @@ const socialCount = SOCIALS.filter(social => social.active).length;
                     secHeading={false}
                   />
                 )
+            )}
+          </ul>
+        </section>
       )
     }
-      </ul>
+
     <div class="all-posts-btn-wrapper">
       <LinkButton href="/posts">
         All Posts
@@ -116,7 +119,6 @@ const socialCount = SOCIALS.filter(social => social.active).length;
         </svg>
       </LinkButton>
     </div>
-    </section>
   </main>
 
   <Footer />