---
import { getCollection, render } from 'astro:content';
import BlogPost from '@layouts/BlogPost.astro';
import type {
  InferGetStaticParamsType,
  InferGetStaticPropsType,
  GetStaticPaths,
} from "astro";

export async function getStaticPaths() {
    const posts = await getCollection('personal');
    return posts.map(post => ({
        params: { id: post.id },
        props: { post },
    }));
}

getStaticPaths satisfies GetStaticPaths;
type Params = InferGetStaticParamsType<typeof getStaticPaths>;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { post } = Astro.props as Props;
const { id } = Astro.params as Params;
const { Content } = await render(post);
---

<BlogPost {...post.data}>
    <Content />
</BlogPost>
