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 title="Welcome to Astro.">
  <Header />
  <main>
    <section id="hero">
      <h1>Mingalaba<span>.</span></h1>
      <p>
        Hi, I'm a theme for Astro, an example of how you can use this starter to
        create a personal blog. If you want to know more about how you can
        customise me, add more posts, and make it your own, click on one of the
        social links which will take you to my repo.
      </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"
          >
            <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://github.com/satnaing"
            className="link-button"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z"
              ></path>
            </svg>
          </LinkButton>
          <LinkButton
            href="https://github.com/satnaing"
            className="link-button"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><path
                d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"
              ></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path
                d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056 1.267-.056 3.71 0 2.442 0 2.753.056 3.71.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.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"
              ></path>
            </svg>
          </LinkButton>
          <LinkButton
            href="https://github.com/satnaing"
            className="link-button"
          >
            <svg xmlns="http://www.w3.org/2000/svg"
              ><circle cx="4.983" cy="5.009" r="2.188"></circle><path
                d="M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118 1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z"
              ></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-12;
  }
  #hero h1 {
    @apply font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
  }
  h1 span {
    @apply text-skin-accent;
  }
  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:ml-2;
  }
  .link-button {
    @apply p-2 sm:p-1;
  }
  .link-button svg {
    @apply scale-125 sm:scale-110;
  }

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