---
import { getCollection, render } from "astro:content";
import Layout from "../../layouts/Blog.astro";
import dayjs from "dayjs";
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { id: post.id, slug: post.data.url },
    props: { post },
  }));
}
// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);
---

<Layout title=`Blog - ${post.data.title}`>
  <div class="flex justify-stretch justify-self-center">
    <div>
      <h1 class="text-3xl text-center font-bold">{post.data.title}</h1>
      <p class="italic text-center">
        {dayjs(post.data.published).format("MMMM DD, YYYY")}
      </p>
      <br />
      <article
        class="prose text-black prose-blockquote:bg-transparent"
      >
        <Content />
      </article>
    </div>
  </div>
</Layout>
