From 33bbb7a3b9e5b1a9cfbe62528b05291c09ea2b3a Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Tue, 28 Apr 2026 19:29:40 +0200
Subject: [PATCH] feat(localization): implement localePath for project links
 across components

- Updated HytaleDemoGrid.vue, ProjectCard.vue, FeaturedProjectsSection.vue, about.vue, and project/[id].vue to utilize localePath for project links, enhancing localization support.
- This change ensures that project URLs are correctly localized, improving user experience across different languages.

This commit strengthens the site's multilingual capabilities by standardizing project link paths.
---
 app/components/HytaleDemoGrid.vue                   | 10 ++++++++++
 app/components/ProjectCard.vue                      |  5 +++--
 app/components/sections/FeaturedProjectsSection.vue |  3 ++-
 app/pages/about.vue                                 |  5 +++--
 app/pages/project/[id].vue                          |  5 +++--
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/components/HytaleDemoGrid.vue b/app/components/HytaleDemoGrid.vue
index 6d38fa9..8e3ffc2 100644
--- a/app/components/HytaleDemoGrid.vue
+++ b/app/components/HytaleDemoGrid.vue
@@ -2,6 +2,7 @@
 import { hytaleDemos } from '~/data/hytaleDemos'
 
 const { t } = useI18n()
+const localePath = useLocalePath()
 </script>
 
 <template>
@@ -76,6 +77,15 @@ const { t } = useI18n()
             </div>
 
             <div class="flex flex-wrap gap-2 mt-2">
+              <UButton
+                :to="localePath(`/project/${demo.id}`)"
+                color="primary"
+                variant="soft"
+                size="sm"
+                trailing-icon="i-lucide-arrow-right"
+              >
+                {{ t('projects.buttons.viewProject') }}
+              </UButton>
               <UButton
                 v-if="demo.website"
                 :to="demo.website"
diff --git a/app/components/ProjectCard.vue b/app/components/ProjectCard.vue
index 9b212eb..1e31184 100644
--- a/app/components/ProjectCard.vue
+++ b/app/components/ProjectCard.vue
@@ -7,6 +7,7 @@ interface Props {
 
 const props = defineProps<Props>()
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 const translatedCategory = computed(() => {
   if (!props.project.category) return ''
@@ -22,7 +23,7 @@ const translatedCategory = computed(() => {
     itemtype="https://schema.org/CreativeWork"
   >
     <!-- Image -->
-    <NuxtLink :to="`/project/${project.id}`" class="block relative overflow-hidden">
+    <NuxtLink :to="localePath(`/project/${project.id}`)" class="block relative overflow-hidden">
       <NuxtImg
         :src="project.image"
         :alt="`${project.title} - ${project.description.slice(0, 60)}...`"
@@ -81,7 +82,7 @@ const translatedCategory = computed(() => {
 
     <!-- Hidden SEO link -->
     <NuxtLink
-      :to="`/project/${project.id}`"
+      :to="localePath(`/project/${project.id}`)"
       class="absolute inset-0 z-10"
       :aria-label="`${t('projects.buttons.viewProject')} - ${project.title}`"
       itemprop="url"
diff --git a/app/components/sections/FeaturedProjectsSection.vue b/app/components/sections/FeaturedProjectsSection.vue
index e9a2a4e..bb670a8 100644
--- a/app/components/sections/FeaturedProjectsSection.vue
+++ b/app/components/sections/FeaturedProjectsSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const { featuredProjects } = useProjects()
+const localePath = useLocalePath()
 </script>
 
 <template>
@@ -13,7 +14,7 @@ const { featuredProjects } = useProjects()
           <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mt-3 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-600 dark:from-white dark:via-gray-200 dark:to-gray-500 bg-clip-text text-transparent">{{ t('home.featuredProjects.title') }}</h2>
           <p class="text-lg text-gray-500 dark:text-gray-400 mt-4 max-w-2xl leading-relaxed">{{ t('home.featuredProjects.subtitle') }}</p>
         </div>
-        <UButton to="/projects" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto group">
+        <UButton :to="localePath('/projects')" variant="ghost" trailing-icon="i-lucide-arrow-right" class="shrink-0 self-start md:self-auto group">
           {{ t('home.cta.viewProjects') }}
         </UButton>
       </div>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 767bb94..0139a23 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -2,6 +2,7 @@
 import { techStack } from '~/data/techstack'
 
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 useSeoMeta({
   title: () => t('seo.about.title'),
@@ -180,9 +181,9 @@ const approachCards = computed(() => [
       :title="t('about.cta.title')"
       :subtitle="t('about.cta.description')"
       :primary-text="t('about.cta.button')"
-      primary-to="/contact"
+      :primary-to="localePath('/contact')"
       :secondary-text="t('home.cta.viewProjects')"
-      secondary-to="/projects"
+      :secondary-to="localePath('/projects')"
     />
   </div>
 </template>
diff --git a/app/pages/project/[id].vue b/app/pages/project/[id].vue
index 564c29e..1e6d898 100644
--- a/app/pages/project/[id].vue
+++ b/app/pages/project/[id].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 const { t } = useI18n()
+const localePath = useLocalePath()
 const { findById, projects } = useProjects()
 
 const project = findById(route.params.id as string)
@@ -52,7 +53,7 @@ useSeoMeta({
             variant="solid"
             color="neutral"
             icon="i-lucide-arrow-left"
-            to="/projects"
+            :to="localePath('/projects')"
             size="sm"
             class="shadow-lg backdrop-blur-sm"
           >
@@ -215,7 +216,7 @@ useSeoMeta({
                 <NuxtLink
                   v-for="related in relatedProjects"
                   :key="related.id"
-                  :to="`/project/${related.id}`"
+                  :to="localePath(`/project/${related.id}`)"
                   class="flex gap-3 p-3 rounded-xl border border-transparent hover:border-brand-500/20 hover:bg-brand-500/5 transition-all duration-200 group"
                 >
                   <NuxtImg