<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">
import type { Category } from '../../components/Blog/types'

const { data } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').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.date as string,
  excerpt: article.excerpt,
  link: article.path,
  tags: article.meta.tags as string[],
  category: article.meta.category as Category,
  author: article.meta.author as { name: string, image: string },
})

useHead({
  link: [
    { rel: 'alternate', type: 'application/rss+xml', href: '/blog/rss.xml', title: 'blogfussel' },
  ],
})
</script>