01964

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"] {
@@ -21,3 +30,13 @@
   --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);
+}

components/ThemeToggle.vue

@@ -8,26 +8,13 @@
 import { TEXTS } from '../config/content';
 import { computed } from 'vue';
 
-const props = defineProps({
+const { $theme } = useNuxtApp();
-  'isDark': {
-    type: [Boolean, Object],
-    default: false
-  },
-  'toggleTheme': {
-    type: Function,
-    required: true
-  }
-});
 
-// Gérer le cas où isDark est un Ref<boolean> ou un booléen direct
+const themeIsDark = computed(() => $theme.isDark);
-const themeIsDark = computed(() => {
+
-  if (typeof props.isDark === 'boolean') {
+const toggleTheme = () => {
-    return props.isDark;
+  $theme.toggleTheme();
-  } else if (props.isDark && typeof props.isDark.value === 'boolean') {
+};
-    return props.isDark.value;
-  }
-  return false;
-});
 </script>
 
 <style scoped>

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',
+    { src: '~/plugins/router.ts', mode: 'client' },
-    '~/plugins/theme.ts'
+    { 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' : '/'
     }
   }
 })

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;
+    if (!currentProject.value?.gallery?.length) return;
-    currentImageIndex.value = (currentImageIndex.value + 1) % processedImages.value.length;
+    currentImageIndex.value = (currentImageIndex.value + 1) % currentProject.value.gallery.length;
   };
 
   const prevImage = (): void => {
-    if (!processedImages.value.length) return;
+    if (!currentProject.value?.gallery?.length) return;
-    currentImageIndex.value = (currentImageIndex.value - 1 + processedImages.value.length) % processedImages.value.length;
+    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 projectImage = computed(() => currentProject.value?.image || DEFAULT_IMAGES.PROJECT);
-const projectGallery = computed(() => {return currentProject.value?.gallery || [];});
+const projectGallery = computed(() => currentProject.value?.gallery || []);
 
 </script>
 

plugins/router.ts

@@ -1,19 +1,24 @@
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin({
-  nuxtApp.hook('app:error', (error) => {
+  name: 'router',
-    if (error.statusCode === 404 && process.client) {
+  enforce: 'pre',
-      error.path = window.location.pathname
+  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) => {
+    nuxtApp.hook('vue:error', (error, instance, info) => {
-    console.error('Vue Error:', error)
+      console.error('Vue Error:', error)
-    console.error('Component:', instance)
+      console.error('Component:', instance)
-    console.error('Info:', info)
+      console.error('Info:', info)
+    })
   }
-
-  nuxtApp.hook('vue:error', (error, instance, info) => {
-    console.error('Vue Error:', error)
-    console.error('Component:', instance)
-    console.error('Info:', info)
-  })
 }) 

plugins/theme.ts

@@ -42,20 +42,24 @@ export const useTheme = () => {
   }
 
   return {
-    isDark,
+    isDark: process.client ? isDark : ref(false),
-    toggleTheme
+    toggleTheme: process.client ? toggleTheme : () => {}
   };
 };
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin({
-  const { isDark, toggleTheme } = useTheme();
+  name: 'theme',
+  enforce: 'pre',
+  setup(nuxtApp) {
+    const { isDark, toggleTheme } = useTheme();
 
-  return {
+    return {
-    provide: {
+      provide: {
-      theme: {
+        theme: {
-        isDark,
+          isDark: process.client ? isDark : ref(false),
-        toggleTheme
+          toggleTheme: process.client ? toggleTheme : () => {}
+        }
       }
-    }
+    };
-  };
+  }
 });