From f94a8cf320d1ecca697559c6f3ee6a47cd878bb0 Mon Sep 17 00:00:00 2001
From: 37b7 <matheo.thierry.63@gmail.com>
Date: Mon, 19 May 2025 16:37:08 +0200
Subject: [PATCH] 01964

---
 assets/css/theme.css          | 19 +++++++++++++++++++
 components/ThemeToggle.vue    | 25 ++++++-------------------
 nuxt.config.ts                | 15 +++++++++++----
 pages/projects/[id]/index.vue | 21 +++++++++------------
 plugins/router.ts             | 35 ++++++++++++++++++++---------------
 plugins/theme.ts              | 28 ++++++++++++++++------------
 6 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/assets/css/theme.css b/assets/css/theme.css
index 6363a9d..b677c90 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -1,5 +1,14 @@
 :root {
   --transition-speed: 0.3s;
+
+  /* based thème */
+  --bg-primary: var(--bg-primary-default);
+  --bg-secondary: var(--bg-secondary-default);
+  --bg-hover: var(--bg-hover-default);
+  --text-primary: var(--text-primary-default);
+  --text-secondary: var(--text-secondary-default);
+  --border-color: var(--border-color-default);
+  --shadow-color: var(--shadow-color-default);
 }
 
 [data-theme="dark"] {
@@ -20,4 +29,14 @@
   --text-secondary: #666666;
   --border-color: #dee2e6;
   --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="default"] {
+  --bg-primary-default: #ffffff;
+  --bg-secondary-default: #f8f9fa;
+  --bg-hover-default: #e9ecef;
+  --text-primary-default: #333333;
+  --text-secondary-default: #666666;
+  --border-color-default: #dee2e6;
+  --shadow-color-default: rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
index 7353b49..b53d6e0 100644
--- a/components/ThemeToggle.vue
+++ b/components/ThemeToggle.vue
@@ -8,26 +8,13 @@
 import { TEXTS } from '../config/content';
 import { computed } from 'vue';
 
-const props = defineProps({
-  'isDark': {
-    type: [Boolean, Object],
-    default: false
-  },
-  'toggleTheme': {
-    type: Function,
-    required: true
-  }
-});
+const { $theme } = useNuxtApp();
 
-// Gérer le cas où isDark est un Ref<boolean> ou un booléen direct
-const themeIsDark = computed(() => {
-  if (typeof props.isDark === 'boolean') {
-    return props.isDark;
-  } else if (props.isDark && typeof props.isDark.value === 'boolean') {
-    return props.isDark.value;
-  }
-  return false;
-});
+const themeIsDark = computed(() => $theme.isDark);
+
+const toggleTheme = () => {
+  $theme.toggleTheme();
+};
 </script>
 
 <style scoped>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index eedd13a..f198b4b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,7 +30,8 @@ export default defineNuxtConfig({
         }
       ],
     },
-    buildAssetsDir: '/containers/matheothierry-portfolio_nuxt' + '/_nuxt/',
+    baseURL: process.env.NODE_ENV === 'production' ? '/containers/matheothierry-portfolio_nuxt' : '/',
+    buildAssetsDir: '/_nuxt/',
   },
 
   routeRules: {
@@ -46,8 +47,8 @@ export default defineNuxtConfig({
   modules: ['@nuxt/image'],
 
   plugins: [
-    '~/plugins/router.ts',
-    '~/plugins/theme.ts'
+    { src: '~/plugins/router.ts', mode: 'client' },
+    { src: '~/plugins/theme.ts', mode: 'client' }
   ],
 
   image: {
@@ -71,9 +72,15 @@ export default defineNuxtConfig({
     },
   },
 
+  nitro: {
+    routeRules: {
+      '/**': { cors: true }
+    }
+  },
+
   runtimeConfig: {
     public: {
-      basePath: process.env.BASE_PATH || ''
+      basePath: process.env.NODE_ENV === 'production' ? '/containers/matheothierry-portfolio_nuxt' : '/'
     }
   }
 })
\ No newline at end of file
diff --git a/pages/projects/[id]/index.vue b/pages/projects/[id]/index.vue
index 6f67317..dc00b1b 100644
--- a/pages/projects/[id]/index.vue
+++ b/pages/projects/[id]/index.vue
@@ -84,7 +84,6 @@ import { TEXTS } from '~/config/content';
 import { PATHS , DEFAULT_IMAGES} from '~/config/paths';
 import { projects } from '~/config/projects';
 import type { Project } from '~/types/project';
-
 const handleLightboxImageError = (event: Event): void => {
     const target = event.target as HTMLImageElement;
     target.src = DEFAULT_IMAGES.PROJECT;
@@ -100,12 +99,10 @@ const handleIconError = (event: Event): void => {
     target.src = DEFAULT_IMAGES.ICON;
 };
 
-
 const useProjectDetail = (id: number) => {
   const { $theme } = useNuxtApp();
   const showLightbox = ref(false);
   const currentImageIndex = ref(0);
-  const processedImages = ref<string[]>([]);
   const currentProject = ref<Project | null>(null);
 
   currentProject.value = projects.find((project) => project.id === id) || null;
@@ -120,13 +117,13 @@ const useProjectDetail = (id: number) => {
   };
 
   const nextImage = (): void => {
-    if (!processedImages.value.length) return;
-    currentImageIndex.value = (currentImageIndex.value + 1) % processedImages.value.length;
+    if (!currentProject.value?.gallery?.length) return;
+    currentImageIndex.value = (currentImageIndex.value + 1) % currentProject.value.gallery.length;
   };
 
   const prevImage = (): void => {
-    if (!processedImages.value.length) return;
-    currentImageIndex.value = (currentImageIndex.value - 1 + processedImages.value.length) % processedImages.value.length;
+    if (!currentProject.value?.gallery?.length) return;
+    currentImageIndex.value = (currentImageIndex.value - 1 + currentProject.value.gallery.length) % currentProject.value.gallery.length;
   };
 
   const handleKeyDown = (event: KeyboardEvent): void => {
@@ -145,7 +142,7 @@ const useProjectDetail = (id: number) => {
     }
   };
 
-  onMounted(async () => {
+  onMounted(() => {
     window.addEventListener('keydown', handleKeyDown);
   });
 
@@ -168,10 +165,10 @@ const useProjectDetail = (id: number) => {
       icon: getIconPath('DEMO'),
       label: TEXTS.PROJECTS.RESOURCES.DEMO
     } : null,
-    documentation: currentProject.value?.documentation ? {
+    documentation: {
       icon: getIconPath('DOCUMENTATION'),
       label: TEXTS.PROJECTS.RESOURCES.DOCUMENTATION
-    } : null,
+    },
     youtube: currentProject.value?.youtube ? {
       icon: getIconPath('YOUTUBE'),
       label: TEXTS.PROJECTS.RESOURCES.YOUTUBE
@@ -208,8 +205,8 @@ const {
   prevImage
 } = useProjectDetail(projectId);
 
-const projectImage = computed(() => {return currentProject.value?.image || DEFAULT_IMAGES.PROJECT;});
-const projectGallery = computed(() => {return currentProject.value?.gallery || [];});
+const projectImage = computed(() => currentProject.value?.image || DEFAULT_IMAGES.PROJECT);
+const projectGallery = computed(() => currentProject.value?.gallery || []);
 
 </script>
 
diff --git a/plugins/router.ts b/plugins/router.ts
index e20a837..580d323 100644
--- a/plugins/router.ts
+++ b/plugins/router.ts
@@ -1,19 +1,24 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('app:error', (error) => {
-    if (error.statusCode === 404 && process.client) {
-      error.path = window.location.pathname
+export default defineNuxtPlugin({
+  name: 'router',
+  enforce: 'pre',
+  setup(nuxtApp) {
+    nuxtApp.hook('app:error', (error) => {
+      if (error.statusCode === 404 && process.client) {
+        const basePath = process.env.NODE_ENV === 'production' ? '/containers/matheothierry-portfolio_nuxt' : '/'
+        error.path = window.location.pathname.replace(basePath, '')
+      }
+    })
+
+    nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
+      console.error('Vue Error:', error)
+      console.error('Component:', instance)
+      console.error('Info:', info)
     }
-  })
 
-  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
-    console.error('Vue Error:', error)
-    console.error('Component:', instance)
-    console.error('Info:', info)
+    nuxtApp.hook('vue:error', (error, instance, info) => {
+      console.error('Vue Error:', error)
+      console.error('Component:', instance)
+      console.error('Info:', info)
+    })
   }
-
-  nuxtApp.hook('vue:error', (error, instance, info) => {
-    console.error('Vue Error:', error)
-    console.error('Component:', instance)
-    console.error('Info:', info)
-  })
 }) 
\ No newline at end of file
diff --git a/plugins/theme.ts b/plugins/theme.ts
index 22a68af..8d7e291 100644
--- a/plugins/theme.ts
+++ b/plugins/theme.ts
@@ -42,20 +42,24 @@ export const useTheme = () => {
   }
 
   return {
-    isDark,
-    toggleTheme
+    isDark: process.client ? isDark : ref(false),
+    toggleTheme: process.client ? toggleTheme : () => {}
   };
 };
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const { isDark, toggleTheme } = useTheme();
+export default defineNuxtPlugin({
+  name: 'theme',
+  enforce: 'pre',
+  setup(nuxtApp) {
+    const { isDark, toggleTheme } = useTheme();
 
-  return {
-    provide: {
-      theme: {
-        isDark,
-        toggleTheme
+    return {
+      provide: {
+        theme: {
+          isDark: process.client ? isDark : ref(false),
+          toggleTheme: process.client ? toggleTheme : () => {}
+        }
       }
-    }
-  };
-}); 
\ No newline at end of file
+    };
+  }
+});
\ No newline at end of file