Blogs

frontend/app/pages/blog/[slug].vue

@@ -0,0 +1,36 @@
+<script setup>
+import PageHeader from '~/components/parts/PageHeader.vue';
+
+const slug = useRoute().params.slug;
+const { locale } = useI18n();
+
+const { data: post } = await useAsyncData(`blog-${slug}`, () => {
+  return queryCollection(`blog_${locale.value}`).path(`/blog/${locale.value}/${slug}`).first()
+})
+</script>
+
+<template>
+  <!-- Render the blog post as Prose & Vue components -->
+  <PageHeader></PageHeader>
+  <Container>
+    <ContentRenderer :value="post" class="blog" />
+  </Container>
+  <Footer></Footer>
+</template>
+
+<style lang="scss">
+.blog {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 400px;
+    }
+}
+</style>

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>