MyBlog-Next/src/pages/posts/[slug].astro

---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Datetime from "@components/Datetime.astro";
import Tag from "@components/Tag.astro";
import type { MarkdownInstance } from "astro";
import type { Frontmatter } from "@utils/types";
import Breadcrumbs from "@components/Breadcrumbs.astro";

export interface Props {
  post: MarkdownInstance<Frontmatter>;
}

export async function getStaticPaths() {
  const posts = await Astro.glob("../../contents/*.md");

  return posts.map((post) => {
    return {
      params: {
        slug: post.frontmatter.slug,
      },
      props: {
        post,
        frontmatter: post.frontmatter,
      },
    };
  });
}

const { Content, frontmatter } = Astro.props.post;
---

<Layout title={frontmatter.title}>
  <Header />
  <Breadcrumbs />
  <main id="main-content">
    <h1 class="post-title">{frontmatter.title}</h1>
    <Datetime datetime={frontmatter.datetime} size="lg" className="my-2" />
    <article
      id="article"
      role="article"
      class="mx-auto max-w-3xl mt-8 prose prose-slate"
    >
      <Content />
    </article>

    <ul class="tags-container">
      {frontmatter.tags.map((tag) => <Tag name={tag} />)}
    </ul>
  </main>
  <Footer />
</Layout>

<style>
  main {
    @apply max-w-3xl mx-auto px-4 pb-12 w-full;
  }
  .post-title {
    @apply font-semibold text-2xl text-skin-accent;
  }
  .tags-container {
    @apply my-8;
  }
</style>