Blogs

frontend/app/pages/blog/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
+import { useAsyncData } from '#app';
+const { locale } = useI18n();
+
+const {data: posts} = useAsyncData('posts', async () => 
+await queryCollection(`blog_${locale.value}`).order('date', 'DESC').all()
+);
+
+console.log(await queryCollection(`blog_${locale.value}`).order('date', 'DESC').all());
+
+</script>
+
+<template>
+    <TableHeader></TableHeader>
+    <Container>
+    <h2>Blog</h2>
+    <ul>
+      <li v-for="post in posts" :key="post.slug">
+        <NuxtLink :to="`/blog/${post.slug}`">{{ post.title }}</NuxtLink>
+        <span class="dash">-</span>
+        <span>{{ post.date }}</span>
+        <span class="dash">-</span>
+        <span>{{ post.description }}</span>
+      </li>
+    </ul>
+    </Container>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+.dash 
+{
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>