<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { listArticles } from '@lib/articles'
import type { ArticleMetadata } from '@interfaces'
import { simpleDateFormat } from '@/lib/dates'

const articles = ref<ArticleMetadata[]>([])

onBeforeMount(async () => {
  const newArticles = await listArticles()
  console.log(newArticles)
  articles.value.splice(0, articles.value.length, ...newArticles)
})
</script>

<template>
  <main>
    <h1 class="title">Articles</h1>
    <template v-for="(metadata, index) in articles" v-bind:key="index">
      <div v-if="!metadata.draft && metadata.path">
        <RouterLink :to="metadata.path">
          <h3>{{ metadata.title }}</h3>
          <span class="time"
            ><span>Published on</span>&nbsp;&nbsp;{{ simpleDateFormat(metadata.date) }}</span
          >
          <img alt="thumbnail" :src="metadata.thumbnail" />
        </RouterLink>
      </div>
    </template>
  </main>
</template>
