01964

3 weeks ago · f94a8cf320
parent 93f08482b7
commit f94a8cf320
6 changed files with 81 additions and 62 deletions
--- 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);
 }
--- 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>
--- 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' : '/'
    }
  }
 })
--- 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>

--- 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)
-  })
 }) 
--- 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 : () => {}
+        }
      }
-    }
-  };
-}); 
+    };
+  }
+});