<script setup lang="ts">
useSeoMeta({
  title: 'Blog',
})
defineOgImageComponent('Site', {
  title: 'Blog'
})

const content = await queryCollection('blog').order('date', 'DESC').all()

function formatDateString(dateString: string) : string {
    let date = new Date(Date.parse(dateString))
    return new Intl.DateTimeFormat("en-US", {
        dateStyle: "long",
        timeZone: "Europe/Paris",
    }).format(date)
}
</script>

<template>
  <HeaderCompact title="Blog" previous-link="/" class="mb-20" />

  <div class="mb-8 mt-8 m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
      <h1 class="text-2xl" v-if="article">{{ article.title }}</h1>
      
      <h3 class="text-xl" v-if="article">
        {{ formatDateString(article.date) }}
      </h3>
      
      <div class="flex">
        <h4 v-for="tag in article.tags" 
            class="p-1 bg-slate-100 mr-3 hover:cursor-pointer">
          {{ tag }}
        </h4>
      </div>
      
      <h4 class="text-xl mt-2" v-if="article">{{ article.description }}</h4>
      
      <a :href="article.path">
        <h2 class="text-xl text-right">[ Read more ]</h2>
      </a>
  </div>
</template>
