32 lines
962 B
Vue
32 lines
962 B
Vue
<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> {{ simpleDateFormat(metadata.date) }}</span
|
|
>
|
|
<img alt="thumbnail" :src="metadata.thumbnail" />
|
|
</RouterLink>
|
|
</div>
|
|
</template>
|
|
</main>
|
|
</template>
|