Big update

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

@@ -5,7 +5,8 @@ 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()
+  console.log(queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first())
+  return queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first()
 })
 </script>
 

frontend/app/pages/blog/index.vue

@@ -4,11 +4,8 @@ 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());
-
+await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
+, {watch: [locale]});
 </script>
 
 <template>

frontend/app/pages/contact/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import TableHeader from '~/components/parts/TableHeader.vue';
+
+const { get, post } = api();
+const { locale } = useI18n();
+
+
+// Move useAsyncData to top level — NOT inside onMounted
+const { data: markdown } = await useAsyncData(`fixed`, async () =>
+ await queryCollection(`fixed`).path(`/fixed/${locale.value}/contact`).first()
+, {watch: [locale]})
+</script>
+
+<template>
+    <TableHeader></TableHeader>
+
+    <Container>
+      <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+    </Container>
+    <Footer></Footer>
+</template>
+
+<style lang="scss" scoped>
+h2 {
+    margin-left: 20px;
+}
+
+p {
+    margin-left: 30px;
+}
+
+.two-columns {
+    display: flex;
+    width: 100%;
+}
+</style>

frontend/app/pages/index.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
+
 const { get, post } = api();
+const { locale } = useI18n();
+
+// Move useAsyncData to top level — NOT inside onMounted
+const { data: markdown } = await useAsyncData(`fixed-root`, async () =>
+ await queryCollection(`fixed`).path(`/fixed/${locale.value}/root`).first()
+, {watch: [locale]})
 
 onMounted(async () => {
   try {
@@ -15,80 +22,9 @@ onMounted(async () => {
 </script>
 
 <template>
-    <TableHeader></TableHeader>
-
-    <Container>
-    <h2>About</h2>
-        <p>
-            I'm Aran. Welcome to my website! It will always remain under development.
-      </p>
-      <p>
-        I am a Mathematician and Software Engineer from Barcelona. I'm currently working as a full-stack dev at <a href="https://codelearn.cat">Codelearn</a> while
-        also studying on the master's degree in <i>Machine Learning and Cybersecurity for Internet-Connected Systems</i> at <a href="https://upc.edu">UPC</a>
-      </p>
-      <p>
-      Besides all of that, I also like drawing, board games and self-hosting
-  </p> 
-      <p>You can download my resume <a href="https://cv.aranroig.com">here</a></p>
-    <h2>Contact</h2>
-        <ul>
-            <li>Mail: <a href="mailto:aranseraroig@gmail.com">aranseraroig@gmail.com</a> (Still pending to host my email)</li>
-            <li>Gitea: <a href="https://git.aranroig.com/Syndria98">git.aranroig.com</a> (My self-hosted git server)</li>
-            <li>GitHub: <a href="https://github.com/BinarySandia04">BinarySandia04</a></li>
-            <li>LinkedIn: <a href="https://www.linkedin.com/in/aran-roig/">aran-roig</a></li>
-            <li>Instagram: <a href="https://www.instagram.com/aran.roig/">aran.roig</a> (Some of my drawings are there)</li>
-        </ul>
-    </Container>
-    <Footer></Footer>
-
-    <!--
-    <div class="two-columns">
-        <Container style="flex-basis: 70%">
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-        </Container>
-        <Container style="flex-basis: 30%">
-            Test Lorem ipsum
-        </Container>
-    </div>
-    <div class="two-columns">
-        <Container style="flex-basis: 70%">
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-        </Container>
-        <Container style="flex-basis: 30%">
-            Test Lorem ipsum
-        </Container>
-    </div>
-    <div class="two-columns">
-        <Container style="flex-basis: 70%">
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
-        </Container>
-        <Container style="flex-basis: 30%">
-            Test Lorem ipsum
-        </Container>
-    </div>
-    -->
-</template>
-
-<style lang="scss" scoped>
-h2 {
-    margin-left: 20px;
-}
-
-p {
-    margin-left: 30px;
-}
-
-.two-columns {
-    display: flex;
-    width: 100%;
-}
-</style>
+  <TableHeader></TableHeader>
+  <Container>
+      <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+  </Container>
+  <Footer></Footer>
+</template>