Blogs

frontend/app/app.vue

@@ -27,7 +27,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .container {
   align-items: stretch;   /* make items grow horizontally to fill container */
-  margin-top: 350px;
   margin-bottom: 30px;
   display: flex;
   flex-direction: column;

frontend/app/components/Sprite.vue

@@ -64,5 +64,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .sprite {
     position: absolute;
+    z-index: 1;
 }
 </style>

frontend/app/components/parts/HeaderLinks.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="menus">
+        <NuxtLink href="/">About</NuxtLink>
+        <NuxtLink href="/blog">Blogs</NuxtLink>
+        <NuxtLink class="disabled" href="/drawings">Drawings</NuxtLink>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.menus {
+    margin-bottom: 10px;
+}
+
+.menus > a {
+    margin-right: 20px;
+}
+
+.disabled {
+    color: #aaaaaa77;
+}
+</style>

frontend/app/components/parts/PageHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="header">
+        <Container>
+            <h1>ARANROIG.COM</h1>
+            <HeaderLinks></HeaderLinks>
+        </Container>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+    position: relative;
+    margin-top: 50px;
+    user-select: none;
+}
+</style>

frontend/app/components/parts/TableHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import HeaderLinks from './HeaderLinks.vue';
+
+</script>
+
+<template>
+    <div class="undertable">
+        <h1>ARANROIG.COM</h1>
+        <HeaderLinks></HeaderLinks>
+        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-258px" left="-65px" width="1300"></Sprite> 
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.undertable {
+    position: relative;
+    margin-top: 350px;
+    margin-left: 80px;
+    margin-bottom: 25px;
+    user-select: none;
+}
+</style>

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;
 }