MyBlog-Next/src/pages/index.astro

---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import LinkButton from "@components/LinkButton.astro";
import Hr from "@components/Hr.astro";
import Card from "@components/Card";
import getSortedPosts from "@utils/getSortedPosts";
import type { Frontmatter } from "@utils/types";
import socialLinks from "@utils/socialLinks";

const posts = await Astro.glob<Frontmatter>("../contents/*.md");

const sortedPosts = getSortedPosts(posts);
---

<Layout>
  <Header />
  <main id="main-content">
    <section id="hero">
      <h1>Mingalaba</h1>
      <a
        target="_blank"
        href="/rss.xml"
        class="rss-link"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="rss-icon"
          ><path
            d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
          ></path><path
            d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
          ></path><circle cx="6" cy="18" r="2"></circle>
        </svg>
      </a>

      <p>
        Astro-Paper is a minimal, responsive and SEO-friendly Astro blog theme.
        This theme is aimed to be accessible out of the box. Light and dark mode
        are supported by default and additional color schemes can also be
        configured. See the documentation for more info.
      </p>
      <div class="social-wrapper">
        <div class="social-links">Social Links:</div>
        <div class="social-icons">
          {
            socialLinks
              .filter((socialLink) => socialLink.active)
              .map((socialLink) => (
                <LinkButton
                  href={socialLink.href}
                  className="link-button"
                  title={socialLink.name}
                >
                  <Fragment set:html={socialLink.icon} />
                </LinkButton>
              ))
          }
        </div>
      </div>
    </section>

    <Hr />

    <section id="featured">
      <h2>Featured</h2>
      <ul>
        {
          posts.map(
            ({ frontmatter }) =>
              frontmatter.featured && (
                <Card
                  href={`/posts/${frontmatter.slug}`}
                  post={frontmatter}
                  secHeading={false}
                />
              )
          )
        }
      </ul>
    </section>

    <Hr />

    <section id="recent-posts">
      <h2>Recent Posts</h2>
      <ul>
        {
          sortedPosts.map(
            ({ frontmatter }, index) =>
              index < 4 && (
                <Card
                  href={`/posts/${frontmatter.slug}`}
                  post={frontmatter}
                  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>
  </main>

  <Footer />
</Layout>

<style>
  /* ===== Hero Section ===== */
  #hero {
    @apply pt-8;
  }
  #hero h1 {
    @apply inline-block font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
  }
  #hero .rss-link {
    @apply mb-6;
  }
  #hero .rss-icon {
    @apply h-6 w-6 scale-110 sm:scale-125 mb-2 sm:mb-3 fill-skin-accent;
  }
  #hero p {
    @apply my-2;
  }
  .social-wrapper {
    @apply flex flex-col sm:flex-row sm:items-center mt-4 mb-6;
  }
  .social-icons {
    @apply mt-1 sm:mt-0 sm:ml-2 sm:space-x-1;
  }
  .link-button {
    @apply p-2 sm:p-1 hover:rotate-6;
  }

  /* ===== Featured & Recent Posts Sections ===== */
  #featured,
  #recent-posts {
    @apply pt-12 pb-6;
  }
  #featured h2,
  #recent-posts h2 {
    @apply font-semibold text-2xl tracking-wide;
  }

  .all-posts-btn-wrapper {
    @apply text-center my-8;
  }
</style>