Big update

2026-03-20 23:10:38 +01:00
parent 63cb32779f
commit c105669065
25 changed files with 268 additions and 135 deletions
--- a/frontend/app/components/Footer.vue
+++ b/frontend/app/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="footer">
-        <span>(C) 2026 Aran Roig. All rights whatever.</span>
+        <span>{{ $t('footer') }}</span>
    </div>
 </template>

--- a/frontend/app/components/parts/HeaderLinks.vue
+++ b/frontend/app/components/parts/HeaderLinks.vue
@@ -1,8 +1,13 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
+
 <template>
    <div class="menus">
-        <NuxtLink href="/">About</NuxtLink>
-        <NuxtLink href="/blog">Blog</NuxtLink>
-        <NuxtLink class="disabled">Drawings</NuxtLink>
+        <NuxtLink :to="localePath('index')">/</NuxtLink>
+        <NuxtLink :to="localePath('blog')">/{{ $t('header.links.blog') }}</NuxtLink>
+        <NuxtLink :to="localePath('contact')">/{{ $t('header.links.contact') }}</NuxtLink>
+        <!-- <NuxtLink class="disabled">Drawings</NuxtLink> -->
    </div>
 </template>

--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -35,7 +35,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
    position: relative;
    left: 45px;
    margin-top: 300px;
-    margin-left: -500px;
+    margin-left: -360px;
    margin-bottom: 25px;
    user-select: none;
 }
--- a/frontend/app/components/parts/site_options/LanguageSelector.vue
+++ b/frontend/app/components/parts/site_options/LanguageSelector.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'

 const dropdownVisible = ref(false);

@@ -26,29 +25,24 @@ onUnmounted(() => {


 // i18n
-const { locale } = useI18n()
+const { locales, setLocale, locale } = useI18n()

-const setLocale = (lang) => {
-  locale.value = lang
+const changeLocale = (lang) => {
+  setLocale(lang.code);
  dropdownVisible.value = false
 }
 </script>

 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">Language </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button>

  <div class="dropdown" v-show="dropdownVisible">
    <div class="section">
-        <div class="menu-item" @click="setLocale('en')">
-            🇬🇧 English
-        </div>
-        <div class="menu-item" @click="setLocale('es')">
-            🇪🇸 Spanish
-        </div>
-        <div class="menu-item" @click="setLocale('ca')">
-            🇦🇩 Catalan
-        </div>
+      <div :class="{'menu-item': true, 'active': locale === loc.code}"
+       v-for="loc in locales" @click="changeLocale(loc)">
+        {{ $t('locales.' + loc.code) }}
+      </div>
    </div>
  </div>
 </div>
@@ -64,6 +58,10 @@ const setLocale = (lang) => {
  border-radius: 6px;
  cursor: pointer;
  margin-right: 15px;
+
+  &.active {
+    background-color: #30363d;
+  }
 }
 .dropdown {
 z-index: 10;
--- a/frontend/app/components/parts/site_options/SiteOptions.vue
+++ b/frontend/app/components/parts/site_options/SiteOptions.vue
@@ -13,5 +13,7 @@ import ThemeSelector from './ThemeSelector.vue';
 <style lang="scss" scoped>
 .site-options {
    display: flex;
+    justify-content: right;
+    width: 400px;
 }
 </style>
--- a/frontend/app/components/parts/site_options/ThemeSelector.vue
+++ b/frontend/app/components/parts/site_options/ThemeSelector.vue
@@ -30,36 +30,39 @@ onUnmounted(() => {

 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">Theme </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button>

  <div class="dropdown" v-show="dropdownVisible">
    <div class="two-columns">
        <div class="section">
            <div class="menu-section">
                <div class="menu-header">
-                    Theme
+                    {{ $t('site_options.theme_selector.dropdown') }}
                </div>
            </div>
            <div class="divider"></div>
            <div class="menu-section">
                <div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
-                    <div class="circle dark"></div>Dark
+                    <div class="circle dark"></div>
+                    {{ $t('themes.dark') }}
                </div>
                <div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
-                    <div class="circle light"></div>Light
+                    <div class="circle light"></div>
+                    {{ $t('themes.light') }}
                </div>
            </div>
        </div>
        <div class="section">
            <div class="menu-section">
                <div class="menu-header">
-                    Dragon
+                    {{ $t('site_options.theme_selector.dragon') }}
                </div>
            </div>
            <div class="divider"></div>
            <div class="menu-section">
                <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
-                    <div class="circle katlum"></div>Katlum
+                    <div class="circle katlum"></div>
+                    {{ $t('themes.accents.katlum') }}
                </div>
                <!--
                <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
--- a/frontend/app/i18n.config.ts
+++ b/frontend/app/i18n.config.ts
@@ -0,0 +1,6 @@
+// i18n.config.ts
+export default defineI18nConfig(() => ({
+  fallbackLocale: 'en',
+  missingWarn: true,
+  fallbackWarn: true
+}))
--- a/frontend/app/pages/blog/[slug].vue
+++ b/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>

--- a/frontend/app/pages/blog/index.vue
+++ b/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>
--- a/frontend/app/pages/contact/index.vue
+++ b/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>
--- a/frontend/app/pages/index.vue
+++ b/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>