<template>
  <div style="display: contents">
    <NuxtLayout name="blog">
      <Head>
        <Title
          >Archive: {{ route.params.year }}/{{ route.params.month }}/{{
            route.params.day
          }}
          | Evert's Blog | lunasqu.ee</Title
        >
      </Head>
      <BlogArchive :posts="posts" />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import type { BlogPost } from '~~/lib/types/post';

const route = useRoute();
const { data: posts } = await useFetch<BlogPost[]>(`/api/blog`, {
  key: `${route.params.year}-${route.params.month}-${route.params.day}-page`,
  params: {
    year: route.params.year,
    month: route.params.month,
    day: route.params.day,
    render: false,
  },
});
</script>
