---
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>
