<template>
  <div style="display: contents">
    <NuxtLayout name="blog">
      <template v-for="post of posts">
        <BlogPost :post="post" :detail="false" />
      </template>
    </NuxtLayout>
  </div>
</template>

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

const { data: posts } = await useFetch<BlogPost[]>('/api/blog', {
  key: 'frontpage',
  params: { limit: 16, render: false },
});
</script>
