---
import { type CollectionEntry, getCollection } from "astro:content";
import PageLayout from "@/layouts/PageLayout.astro";
import TopLayout from "@/layouts/TopLayout.astro";
import BottomLayout from "@/layouts/BottomLayout.astro";
import ArticleTopLayout from "@/layouts/ArticleTopLayout.astro";
import ArticleBottomLayout from "@/layouts/ArticleBottomLayout.astro";
import ArticleContent from "@/components/ArticleContent.astro";

// Create the static blog pages
export async function getStaticPaths() {
    const posts = await getCollection("blog");
    return posts
        .filter((post) => !post.data.draft)
        .map((post) => ({
            params: { slug: post.id },
            props: post,
        }));
}

// Get the requested post
type Props = CollectionEntry<"blog">;
const post = Astro.props;
const { title, summary } = post.data;
---

<PageLayout
    title={title}
    description={summary}
    image={"/open-graph/blog/" + post.id + ".png"}
>
    <TopLayout>
        <div class="animate">
            <ArticleTopLayout entry={post} />
        </div>
    </TopLayout>
    <ArticleContent entry={post} />
    <BottomLayout>
        <div class="animate">
            <ArticleBottomLayout entry={post} />
        </div>
    </BottomLayout>
</PageLayout>
