MyBlog-Next/src/pages/posts/index.astro

---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Main from "@layouts/Main.astro";
import Card from "@components/Card.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 activeNav="posts" />
  <Main pageTitle="Posts" pageDesc="All the tags used in posts.">
    <ul>
      {
        sortedPosts.map(({ frontmatter }) => {
          return (
            <Card href={`/posts/${frontmatter.slug}`} post={frontmatter} />
          );
        })
      }
    </ul>
  </Main>
  <Footer />
</Layout>