fix: displays featured section only if featured posts exist

src/pages/index.astro

@@ -13,6 +13,9 @@ import Socials from "@components/Socials.astro";
 const posts = await Astro.glob<Frontmatter>("../contents/**/*.md");
 
 const sortedPosts = getSortedPosts(posts);
+const featuredPosts = sortedPosts.filter(
+  ({ frontmatter }) => frontmatter.featured
+);
 ---
 
 <Layout>
@@ -59,25 +62,25 @@ const sortedPosts = getSortedPosts(posts);
 
     <Hr />
 
-    <section id="featured">
+    {
-      <h2>Featured</h2>
+      featuredPosts.length > 0 && (
-      <ul>
+        <>
-        {
+          <section id="featured">
-          sortedPosts.map(
+            <h2>Featured</h2>
-            ({ frontmatter }) =>
+            <ul>
-              frontmatter.featured && (
+              {featuredPosts.map(({ frontmatter }) => (
                 <Card
                   href={`/posts/${slugify(frontmatter)}`}
                   post={frontmatter}
                   secHeading={false}
                 />
-              )
+              ))}
-          )
+            </ul>
-        }
+          </section>
-      </ul>
+          <Hr />
-    </section>
+        </>
-
+      )
-    <Hr />
+    }
 
     <section id="recent-posts">
       <h2>Recent Posts</h2>