42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import TableHeader from '~/components/parts/TableHeader.vue';
|
|
import { useAsyncData } from '#app';
|
|
import FixedLayout from '~/components/layouts/FixedLayout.vue';
|
|
const { locale } = useI18n();
|
|
const localePath = useLocalePath()
|
|
|
|
const {data: posts, refresh} = useAsyncData('blog-posts', async () =>
|
|
await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
|
|
, {watch: [locale, () => useRoute().path]});
|
|
|
|
onActivated(() => {
|
|
refresh();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<TableHeader></TableHeader>
|
|
<FixedLayout>
|
|
<Container>
|
|
<h2>Blog</h2>
|
|
<ul>
|
|
<li v-for="post in posts" :key="post.slug">
|
|
<NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
|
|
<span class="dash">-</span>
|
|
<span>{{ post.date }}</span>
|
|
<span class="dash">-</span>
|
|
<span>{{ post.description }}</span>
|
|
</li>
|
|
</ul>
|
|
</Container>
|
|
</FixedLayout>
|
|
<Footer></Footer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.dash
|
|
{
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
</style> |