MyBlog-Next/src/pages/index.astro

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

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">
          <LinkButton
            href="https://github.com/satnaing"
            className="link-button"
            title="Github"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
              ></path>
            </svg>
          </LinkButton>
          <LinkButton
            href="https://www.facebook.com/satnaing.dev"
            className="link-button"
            title="Facebook"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
              ></path>
            </svg>
          </LinkButton>
          <LinkButton
            href="https://www.instagram.com/satnaing.dev/"
            className="link-button"
            title="Instagram"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                d="M20.947 8.305a6.53 6.53 0 0 0-.419-2.216 4.61 4.61 0 0 0-2.633-2.633 6.606 6.606 0 0 0-2.186-.42c-.962-.043-1.267-.055-3.709-.055s-2.755 0-3.71.055a6.606 6.606 0 0 0-2.185.42 4.607 4.607 0 0 0-2.633 2.633 6.554 6.554 0 0 0-.419 2.185c-.043.963-.056 1.268-.056 3.71s0 2.754.056 3.71c.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.043 1.268.056 3.71.056s2.755 0 3.71-.056a6.59 6.59 0 0 0 2.186-.419 4.615 4.615 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.187.043-.962.056-1.267.056-3.71-.002-2.442-.002-2.752-.058-3.709zm-8.953 8.297c-2.554 0-4.623-2.069-4.623-4.623s2.069-4.623 4.623-4.623a4.623 4.623 0 0 1 0 9.246zm4.807-8.339a1.077 1.077 0 0 1-1.078-1.078 1.077 1.077 0 1 1 2.155 0c0 .596-.482 1.078-1.077 1.078z"
              ></path><circle cx="11.994" cy="11.979" r="3.003"></circle>
            </svg>
          </LinkButton>
          <LinkButton
            href="https://linkedin.com/satnaing.dev"
            className="link-button"
            title="Linkedin"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"
              ></path>
            </svg>
          </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;
  }
  .link-button {
    @apply p-2 sm:p-1;
  }
  .link-button svg {
    @apply scale-125 sm:scale-125;
  }

  /* ===== 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>