<template>
  <section id="blog" class="Blog content">
    <div class="grid">
      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)" />
    </div>
  </section>
</template>

<script setup lang="ts">
const { data } = await useAsyncData('articles', () => queryCollection('blog').limit(10).all())

const articles = data.value!

const makeBlogCard = (article : typeof articles[0]) => ({
  title: article.title,
  description: article.description,
  image: article.meta.image as string,
  date: article.meta.date as string,
  excerpt: article.excerpt,
  link: article.path,
  tags: article.meta.tags as string[],
  category: article.meta.category as string,
  author: article.meta.author as { name: string, image: string },
})
</script>