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>

frontend/app/pages/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
 const { get, post } = api();
 
@@ -14,17 +15,9 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="undertable">
-        <h1>ARANROIG.COM</h1>
-        <div class="menus">
-            <a href="/">About</a>
-            <a class="disabled">Blogs</a>
-            <a class="disabled">Drawings</a>
-        </div>
-    </div>
+    <TableHeader></TableHeader>
 
-    <Container style="width: max-width;">
-        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-418px" left="-5px" width="1300"></Sprite> 
+    <Container>
     <h2>About</h2>
         <p>
             I'm Aran. Welcome to my website! It will always remain under development.
@@ -86,20 +79,6 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-.undertable {
-    margin-left: 80px;
-    margin-bottom: 25px;
-    user-select: none;
-
-    .menus > a {
-        margin-right: 20px;
-    }
-
-    .disabled {
-        color: #aaaaaa77;
-    }
-}
-
 h2 {
     margin-left: 20px;
 }