keyboard swiper nav

'push to prod'

.gitignore

@@ -5,6 +5,8 @@
 .nitro
 .cache
 dist
+public/api
+public/imgs
 
 # Node dependencies
 node_modules

README.md

@@ -73,3 +73,4 @@ bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+test

app.vue

@@ -1,38 +1,30 @@
 <template>
   <Header />
-  <main>
-    <NuxtPage />
-  </main>
+  <NuxtPage />
 </template>
 
 <script setup>
-  const { getItems } = useDirectusItems();
-  const global = ref([]);
-  onMounted(async () => {
-    const items = await getItems({ collection: "global" });
-    global.value = items;
-  });
+    let globalData = await useFetchGlobalData();
+    globalData = globalData.globalData._object.$sglobalData;
 
-  provide('globalData', global);
+    useSeoMeta({
+      ogImage: '/card.jpg',
+      ogImageAlt: globalData.contact_image_titre,
+      twitterImage: '/card.jpg',
+    });
 
-  useSeoMeta({
-    ogImage: '/card.jpg',
-    ogImageAlt: global.value.contact_image_titre,
-    twitterImage: '/card.jpg',
-  });
-
-  useHead({
-    htmlAttrs: {
-      lang: 'fr'
-    },
-    link: [
-      {
-        rel: 'icon',
-        type: 'image/png',
-        href: 'favicon.png'
-      }
-    ]
-  });
+    useHead({
+      htmlAttrs: {
+        lang: 'fr'
+      },
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/png',
+          href: 'favicon.png'
+        }
+      ]
+    });
 </script>
 
 <style lang="scss">
@@ -48,10 +40,13 @@
     margin: 0;
     box-sizing: border-box;
     font-family: 'Latitude', serif;
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: normal;
     text-decoration: none;
     color: #0e312f;
+    @media screen and (min-width: 800px) {
+      font-size: 1.1rem;
+    }
   }
 
   body {

components/Brush.vue

@@ -0,0 +1,132 @@
+<template>
+  <div ref="canvasContainer" id="canvasContainer"></div>
+</template>
+
+<script>
+  import p5 from 'p5';
+
+  export default {
+    mounted() {
+      if (process.client) {
+        this.p5Instance = new p5(this.sketch, this.$refs.canvasContainer);
+      }
+    },
+    beforeDestroy() {
+      if (this.p5Instance) {
+        this.p5Instance.remove();
+      }
+    },
+    methods: {
+      sketch(p) {
+        let brushStrokes = [];
+        const fadingTime = 2000;
+        const brushDensity = 30;
+        const textureDensity = 2;
+        const brushSize = 4;
+
+        p.setup = () => {
+          p.createCanvas(p.windowWidth, p.windowHeight);
+          p.clear();
+          p.colorMode(p.HSL);
+          p.noStroke();
+        };
+
+        p.draw = () => {
+          p.clear();
+          for (let i = brushStrokes.length - 1; i >= 0; i--) {
+            let brushStroke = brushStrokes[i];
+            let elapsedTime = p.millis() - brushStroke.startTime;
+            if (elapsedTime > fadingTime) {
+              brushStrokes.splice(i, 1);
+              continue;
+            }
+
+            let isSwiperOpen;
+            let swipers = document.querySelectorAll('.swiper');
+            for (let swiper of swipers) {
+              if (swiper.style.opacity == 1) isSwiperOpen = true;
+            }
+
+
+
+            if (!isSwiperOpen) {
+              let alpha = p.map(elapsedTime, 0, fadingTime, 1, 0);
+              
+              
+              for (let j = 0; j < brushStroke.dots.length; j++) {
+                p.fill(
+                  brushStroke.dots[j].color.h,
+                  brushStroke.dots[j].color.s,
+                  brushStroke.dots[j].color.l,
+                  alpha);
+  
+                p.ellipse(
+                  brushStroke.dots[j].x,
+                  brushStroke.dots[j].y,
+                  brushStroke.dots[j].size,
+                  brushStroke.dots[j].size
+                );
+              }
+            }
+            }
+            
+        };
+
+        p.mouseMoved = () => {
+          let dots = [];
+          for (let j = 0; j < brushDensity; j++) {
+            let angle = p.random(p.TWO_PI);
+            let r = p.sqrt(p.pow(p.random(1), 2)) * gaussian(brushSize, 3);
+            let x = p.mouseX + r * p.cos(angle);
+            let y = p.mouseY + r * p.sin(angle);
+            dots.push({ 
+              x: x,
+              y: y,
+              size: p.random(1) * textureDensity,
+              color: {
+                h: 178,
+                s: 20,
+                l: constrainedGaussian(22, 10, 10, 100)
+              }
+            });
+          }
+          brushStrokes.push({
+            x: p.mouseX,
+            y: p.mouseY,
+            startTime: p.millis(),
+            dots: dots
+          });
+        }
+
+        function gaussian(mean, sd) {
+          let u1 = p.random();
+          let u2 = p.random();
+          let z0 = p.sqrt(-2.0 * p.log(u1)) * p.cos(p.TWO_PI * u2);
+          return z0 * sd + mean;
+        }
+
+        function constrainedGaussian(mean, sd, min, max) {
+          let value;
+          do {
+            value = gaussian(mean, sd);
+          } while (value < min || value > max);
+          return value;
+        }
+      }
+
+    },
+
+  }  
+</script>
+
+<style scoped>
+    #canvasContainer {
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+    }
+</style>

components/Header.vue

@@ -32,17 +32,21 @@
 </template>
 
 <script>
-    export default {
-        setup() {
-            const globalData = inject('globalData');
-            return { globalData };
+export default {
+    async setup() {
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData
+        };
+    },
+    methods: {
+        isActive(path) {
+            return this.$route.path === path;
         },
-        methods: {
-            isActive(path) {
-                return this.$route.path === path;
-            },
-        }
     }
+}
 </script>
 
 <style lang="scss">
@@ -58,6 +62,12 @@
                 width: auto;
                 position: relative;
                 margin-top: 1rem;
+                > .hover_el_active {
+                    top: -100% !important;
+                    left: -40% !important;
+                    width: 170% !important;
+                    height: 300% !important;
+                }
                 > a {
                     position: relative;
                     padding: 10px;
@@ -65,10 +75,6 @@
                     z-index: 1;
                 }
             }
-            h1 .hover_el_active {
-                left: -40% !important;
-                width: 170% !important;
-            }
             h1:hover .hover_el_active,
             h1.active .hover_el_active {
                 opacity: 1;
@@ -97,10 +103,10 @@
             }
             .hover_el_active {
                 position: absolute;
-                top: -70%;
-                left: -15%;
-                width: 130%;
-                height: 240%;
+                top: -75%;
+                left: -25%;
+                width: 150%;
+                height: 250%;
                 background-size: contain !important;
                 background-repeat: no-repeat !important;
                 background-position: center !important;
@@ -109,24 +115,23 @@
                 transition: opacity 0.3s ease;
             }
             #indexActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-index-2.png');
             }
             #galeryActive {
-                background-image: url('/assets/images/hover-index.png');
-                left: -30%;
-                width: 160%;
+                background-image: url('/assets/images/hover-galery-2.png');
             }
             #shopActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-shop-2.png');
             }
             #contactActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-contact-2.png');
             }
         }
         > div {
-            width: 3rem;
+            width: 2rem;
             z-index: 1;
             img {
+                padding-top: 10px;
                 width: 100%;
                 transform: rotate(0deg);
                 transition: transform 0.3s ease-out;
@@ -144,6 +149,10 @@
                 flex-direction: row;
                 h1 {
                     margin-top: 0;
+                    > .hover_el_active {
+                        top: -110% !important;
+                        height: 300% !important;
+                    }
                 }
                 ul {
                     margin-top: 0;
@@ -152,6 +161,12 @@
                     }
                 }
             }
+            > div {
+                width: 3rem;
+                > a > img {
+                    padding: 10px;
+                }
+            }
         }
     }
 </style>

components/Projects.vue

@@ -1,15 +1,12 @@
 <template>
     <main>
-        <article v-for="content in contents" :key="content.id">
+        <article v-for="content in contents.slice().reverse()" :key="content.id">
             <div>
-                <NuxtImg 
-                    :src="img((content.image ? content.image : content.shop_image))"
+                <img
+                    :src="`/imgs/small/${content.image}.webp`"
                     :alt="content.titre"
-                    format="webp"
-                    placeholder
-                    lazy
-                    sizes="sm:40vw lg:30vw"
-                    @click="displaySlider(content.id)" />
+                    @click="displaySlider(contents.length - content.id)"
+                />
             </div>
             <div>
                 <p v-if="content.titre">{{ content.titre }}</p>
@@ -25,17 +22,16 @@
             :loop="true"
             :modules="modules"
             :navigation="true"
+            :keyboard="{ enabled: true }"
             @slideChange="onSlideChange"
             @swiper="onSwiper"
         >
-            <swiper-slide v-for="content in contents" :key="content.id">
+            <swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
                 <div class="swiper-zoom-container">
-                    <NuxtImg 
-                        :src="img((content.image ? content.image : content.shop_image))"
+                    <img
+                        :src="`/imgs/large/${content.image}.webp`"
                         :alt="content.titre"
-                        format="webp"
-                        placeholder
-                        lazy />
+                    />
                 </div>
             </swiper-slide>
             <div class="swiper-button-close" @click="closeSlider()"></div>
@@ -44,15 +40,13 @@
 </template>
 
 <script>
-import { A11y, Navigation, Zoom } from "swiper/modules";
+import { Keyboard, A11y, Navigation, Zoom } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import 'swiper/css/zoom';
 
 export default {
     setup() {
-        const { getThumbnail : img } = useDirectusFiles();
-
         const swiperInstance = ref(null);
         const onSwiper = (swiper) => {
             swiperInstance.value = swiper;
@@ -63,7 +57,7 @@ export default {
             const body = document.querySelector('body');
             body.style.overflowY = 'hidden';
             const swiper = swiperInstance.value;
-            swiper.slideToLoop(index - 1);
+            swiper.slideToLoop(index);
             const swiperEl = swiper.el;
             swiperEl.style.display = "block";
             setTimeout(() => {
@@ -73,21 +67,26 @@ export default {
 
         const closeSlider = () => {
             const body = document.querySelector('body');
-            body.style.overflowY = 'auto';
-            const swiperEl = document.querySelector('.swiper');
+            const swiperElements = document.querySelectorAll('.swiper');
+            let swiperEl;
+            for (let swiperElement of swiperElements) {
+                if (swiperElement.style.opacity == 1) {
+                    swiperEl = swiperElement;
+                }
+            }
             swiperEl.style.opacity = 0;
             setTimeout(() => {
                 swiperEl.style.display = "none";
+                body.style.overflowY = 'auto';
             }, 300);
         }
 
         return {
             onSwiper,
             onSlideChange,
-            modules: [Navigation, A11y, Zoom],
+            modules: [Keyboard, Navigation, A11y, Zoom],
             displaySlider,
             closeSlider,
-            img
         };
     },
     components: {
@@ -133,6 +132,7 @@ export default {
             display: none;
             opacity: 0;
             transition: opacity 0.3s ease-out;
+            z-index: 3;
             .swiper-wrapper {
                 .swiper-slide {
                     width: 100%;
@@ -143,6 +143,14 @@ export default {
                     img{
                         width: 60%;
                     }
+                    > .swiper-zoom-container {
+                        > img {
+                            cursor: zoom-in;
+                        }
+                    }
+                }
+                .swiper-slide-zoomed > .swiper-zoom-container > img {
+                    cursor: move;
                 }
             } 
             .swiper-button-prev,
@@ -197,9 +205,10 @@ export default {
                 width: 15vw;
             }
             .swiper .swiper-wrapper .swiper-slide img {
-                width: 30%;
+                width: 60%;
+                padding-top: 2rem;
+                padding-bottom: 2rem;
             }
-
         }
     }
 </style>

composables/useFetchGlobalData.js

@@ -0,0 +1,11 @@
+export const useFetchGlobalData = async () => {
+  const globalData = useState('globalData', () => {})
+
+  await callOnce(async () => {
+    globalData.value = await $fetch(`/api/items/global`)
+    globalData.value = globalData.value.data
+  })
+  return {
+    globalData
+  }
+}

error.vue

@@ -2,42 +2,29 @@
     <Header />
     <div class="error-page">
       <h1 v-if="error.statusCode === 404">Erreur 404</h1>
+      <h1 v-else>Erreur {{ error.statusCode }}</h1>
       <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
-      <NuxtImg 
-            v-if="global.error_img"
-            :src="img(global.error_img)" 
-            :alt="global.error_img_title"
-            format="webp"
-            placeholder
-            lazy
-            sizes="sm:100vw" />
+      <img 
+            :src="`/api/assets/${globalData.error_img}.webp`"
+            :alt="globalData.error_img_title" />
     </div>
 </template>
   
 <script>
-  export default {
-    setup() {
-        const { getItems } = useDirectusItems();
-        const { getThumbnail : img } = useDirectusFiles();
-
-        const global = ref([]);
-        onMounted(async () => {
-            const items = await getItems({ collection: "Global" });
-            global.value = items;
-        });
-
-        provide('globalData', global);
-
-        return {
-            global,
-            img
-        }
-
+export default {
+    async setup() {
+      let globalData = await useFetchGlobalData();
+      globalData = globalData.globalData._object.$sglobalData;
+      
+      return {
+          globalData
+      }
+      
     },
     props: {
       error: Object
     }
-  }
+}
 </script>
   
 <style scoped>

nuxt.config.ts

@@ -1,10 +1,40 @@
+// nitro hook to get Directus files working on ssg
+// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
+// + ssg homemade caching to not retrieve all the files each generation
+
+import { crawlImages } from './ssg_hooks/crawlImages.js'
+import { cacheImages } from './ssg_hooks/cacheImages.js'
+
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
-    'nuxt-directus',
-    '@nuxt/image',
-    '@nuxtjs/seo'
+    '@nuxtjs/seo',
   ],
+  runtimeConfig: {
+    apiURL: process.env.DIRECTUS_URL,
+    apiToken: process.env.DIRECTUS_API_TOKEN
+  },
+  nitro: {
+    hooks: {
+      async 'prerender:routes'(routes) {
+        await crawlImages(routes);
+      },
+    },
+    prerender: {
+      routes: [
+        '/api/items/global',
+      ]
+    },
+  },
+  hooks: {
+    'nitro:build:public-assets': async () => {
+      const imageSizes = [
+        { small: 750 },
+        { large: 1920 },
+      ];
+      await cacheImages(imageSizes);
+    }
+  },
   app: {
     pageTransition: { name: 'page', mode: 'out-in' }
   },
@@ -13,13 +43,5 @@ export default defineNuxtConfig({
     defaultLocale: 'fr',
     name: 'Mahée Auffret',
     description: 'Portfolio de l\'artiste-peintre basée à Rennes Mahée Auffret'
-  },    
-  directus: {
-    url: process.env.DIRECTUS_URL,
-    token: process.env.DIRECTUS_API_TOKEN
   },
-  image: {
-    domains: [ `${process.env.DIRECTUS_URL}` ],
-    format: ['webp'],
-  }
-})
+})

package.json

@@ -10,15 +10,16 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/image": "^1.3.0",
-    "nuxt": "^3.10.1",
-    "nuxt-directus": "^5.6.0",
+    "@directus/sdk": "^15.1.0",
+    "p5": "^1.9.4",
+    "sharp": "^0.33.3",
     "swiper": "^11.0.6",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@nuxtjs/seo": "^2.0.0-rc.8",
+    "nuxt": "^3.11.2",
     "sass": "^1.71.0"
   }
 }

pages/contact.vue

@@ -1,24 +1,41 @@
 <template>
-    <main id="contact">
-        <div v-if="globalData.contact_image">
-            <NuxtImg 
-                :src="img(globalData.contact_image)" 
-                :alt="globalData.contact_image_titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:40vw" />
-        </div>
-        <div>
-            <p>{{ globalData.contact_texte }}</p>
-            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
-        </div>
+    <main>
+        <Brush />
+        <main id="contact">
+            <div>
+                <img 
+                    :src="`/imgs/small/${globalData.contact_image}.webp`"
+                    :alt="globalData.contact_image_titre"
+                />
+            </div>
+            <div>
+                <p v-html="globalData.contact_text"></p>
+                <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
+            </div>
+        </main>
     </main>
 </template>
 
-<script setup>
-    const globalData = inject('globalData');
-    const { getThumbnail : img } = useDirectusFiles();
+<script>
+import Brush from '@/components/Brush.vue';
+
+export default {
+    async setup() {
+
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+        if (globalData.contact_text.includes('\n')) {
+            globalData.contact_text = JSON.stringify(globalData.contact_text).replace(/\\n/g, '<br>').slice(1, -1);
+        }
+
+        return {
+            globalData
+        }
+    },
+    components: {
+        Brush
+    }
+}
 </script>
 
 <style lang="scss">
@@ -37,6 +54,24 @@
                 line-height: 1.2;
                 margin-bottom: 1.5rem;
             }
+            > a {
+                display: inline-block;
+            }
+            > a::after {
+                width: 100%;
+                height: 1rem;
+                display: block;
+                background-image: url('/assets/images/soulignage.png');
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                content: "";
+                margin-top: 0px;
+                transition: margin-top 0.2s ease-out;
+            }
+            > a:hover::after {
+                margin-top: 3px;
+            }
         }
     }
 
@@ -47,6 +82,7 @@
                 width: 30vw;
             }
             > div:last-of-type {
+                margin-top: 0;
                 width: 40vw;
                 margin-left: 2rem;
                 align-self: flex-end;

pages/galerie.vue

@@ -1,17 +1,24 @@
 <template>
-    <Projects :contents="galerie" />
+    <main>
+        <Brush />
+        <Projects :contents="galerie" />
+    </main>
 </template>
 
 <script>
 import Projects from '@/components/Projects.vue';
+import Brush from '@/components/Brush.vue';
 
 export default {
     setup() {
-        const { getItems } = useDirectusItems();
         const galerie = ref([]);
+
+        const { data: itemsData } = useFetch('/api/items/galerie', { server: true });
+        
         onMounted(async () => {
-            const items = await getItems({ collection: "galerie" });
-            galerie.value = items;
+            if (itemsData.value) {
+                galerie.value = itemsData.value.data;
+            }
         });
 
         return {
@@ -19,7 +26,8 @@ export default {
         };
     },
     components: {
-        Projects
+        Projects,
+        Brush
     }
 };
 </script>

pages/index.vue

@@ -1,67 +1,76 @@
 <template>
     <main>
         <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
-            <NuxtImg
-                :src="img(image.image_accueil)"
+            <img
+                :src="`/imgs/large/${image.image_accueil}.webp`"
                 :alt="image.titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:150vw" />
+            />
        </div>
     </main>
 </template>
 
-<script setup>
-    const { getItems } = useDirectusItems();
+<script>
+export default {
+    setup() {
+        const itemsAccueil = ref([]);
 
-    const itemsAccueil = await getItems({
-        collection: "images_accueil"
-    });
-
-    const { getThumbnail : img } = useDirectusFiles();
-
-    onMounted(() => {
-        const imgs = document.querySelectorAll('.indexImg img');
+        const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
         
-        const showingTime = 5000, transitionTime = 2000;
+        onMounted(async () => {
+            if (itemsData.value) {
+                itemsAccueil.value = itemsData.value.data;
+                setTimeout(() => {
+                    startSlider();
+                }, 1);
+            }
+        });
 
-        for (let img of imgs) {
-            img.addEventListener('click', function() {
-                nextSlide();
-                resetTimer();
-            });
-            img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
-        }
+        return {
+            itemsAccueil,
+        };
 
-        imgs[0].style.opacity = 1;
+        function startSlider() {
+            const imgs = document.querySelectorAll('.indexImg img');
+            
+            const showingTime = 5000, transitionTime = 2000;
 
-        let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
-
-        let index = 1;
-
-        function nextSlide() {
-            if (index === 0) {
-                imgs[imgs.length - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
-            } else {
-                imgs[index - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
+            for (let img of imgs) {
+                img.addEventListener('click', function() {
+                    nextSlide();
+                    resetTimer();
+                });
+                img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
             }
 
-            if (index === imgs.length - 1) {
-                index = 0;
-            } else {
-                index ++;
+            imgs[0].style.opacity = 1;
+
+            let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+
+            let index = 1;
+
+            function nextSlide() {
+                if (index === 0) {
+                    imgs[imgs.length - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                } else {
+                    imgs[index - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                }
+
+                if (index === imgs.length - 1) {
+                    index = 0;
+                } else {
+                    index ++;
+                }
+            }
+
+            function resetTimer() {
+                clearInterval(diapoTimer);
+                diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
             }
         }
-
-        function resetTimer() {
-            clearInterval(diapoTimer);
-            diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
-        }
-    });
-
+    }
+};
 </script>
 
 <style lang="scss">

pages/magasin.vue

@@ -1,31 +1,77 @@
 <template>
     <main>
+        <Brush />
         <p>{{ globalData.magasin_explication }}</p>
-        <Projects :contents="magasin" />
+        <div class="category">
+            <div>
+                <h3>Toiles</h3>
+                <Projects :contents="toiles" />
+            </div>
+            <div>
+                <h3>Impressions</h3>
+                <Projects :contents="prints" />
+            </div>
+        </div>
     </main>
 </template>
 
 <script>
 import Projects from '@/components/Projects.vue';
+import Brush from '@/components/Brush.vue';
 
 export default {
-    setup() {
-        const { getItems } = useDirectusItems();
-        const magasin = ref([]);
+    async setup() {
+        const toiles = ref([]);
+        const prints = ref([]);
+
+        const { data: toilesData } = useFetch('/api/items/toiles', { server: true });
+        const { data: printsData } = useFetch('/api/items/prints', { server: true });
+        
         onMounted(async () => {
-            const items = await getItems({ collection: "magasin" });
-            magasin.value = items;
+            if (toilesData.value) {
+                toiles.value = toilesData.value.data;
+            }
+            if (printsData.value) {
+                prints.value = printsData.value.data;
+            }
         });
 
-        const globalData = inject('globalData');
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData,
-            magasin
+            toiles,
+            prints
         };
     },
     components: {
-        Projects
+        Projects,
+        Brush
     }
 };
-</script>
+</script>
+
+<style scoped lang="scss">
+    h3:first-of-type {
+        margin-top: 3rem;
+    }
+    h3 {
+        text-transform: uppercase;
+    }
+    div > h3 + main {
+        margin-top: 3vh;
+    }
+
+    @media screen and (min-width: 800px) {
+        div > h3 + main {
+            margin-top: 4vh;
+        }
+        .category {
+            display: flex;
+            > div {
+                width: 50%;
+            }
+        }
+    }
+</style>

server/api/[...].ts

@@ -0,0 +1,18 @@
+// The BEST way to proxy your API in Nuxt
+// by Alexander Lichter
+// https://www.youtube.com/watch?v=J4E5uYz5AY8
+// to run as static `npm run generate --prerender`
+
+import { joinURL } from 'ufo'
+
+export default defineEventHandler(async (event) => {
+    const proxyUrl = useRuntimeConfig().apiURL    
+    
+    if (event.path.startsWith('/api')) {        
+        const path = event.path.replace(/^\/api\//, '')
+
+        const target = joinURL(proxyUrl, path)
+
+        return proxyRequest(event, target, { headers: { Authorization: `Bearer ${useRuntimeConfig().apiToken}`}})
+    }
+})

ssg_hooks/cacheImages.js

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import { promisify } from 'util';
+
+import { resizeImages } from '../ssg_hooks/resizeImages.js'
+
+export async function cacheImages(imageSizes) {
+    const sourceFolder = './.output/public/api/assets';      
+    const destinationFolder = './public/api/assets';
+
+    if (!fs.existsSync(destinationFolder)) fs.mkdirSync(destinationFolder, { recursive: true });
+
+    const readdir = promisify(fs.readdir);
+    const stat = promisify(fs.stat);
+    const copyFile = promisify(fs.copyFile);
+
+    async function directoryExists(directoryPath) {
+        try {
+            const stats = await fs.promises.stat(directoryPath);
+            return stats.isDirectory();
+        } catch (error) {
+            if (error.code === 'ENOENT') {
+                return false;
+            } else {
+                throw error;
+            }
+        }
+    }
+
+    async function copyFilesIfNotExist(sourceFolder, destinationFolder) {
+        try {
+            const exists = await directoryExists(sourceFolder);
+            if (!exists) {
+                console.log(`Source folder '${sourceFolder}' does not exist.`);
+                return;
+            }
+            
+            const files = await readdir(sourceFolder);
+            for (const file of files) {
+                const sourceFilePath = path.join(sourceFolder, file);
+                const destinationFilePath = path.join(destinationFolder, file);
+                const sourceFileStat = await stat(sourceFilePath);
+
+                if (sourceFileStat.isFile()) {
+                    try {
+                        await stat(destinationFilePath);
+                    } catch (error) {
+                        if (error.code === 'ENOENT') {
+                            await copyFile(sourceFilePath, destinationFilePath);
+                            console.log(`Copied '${file}' to '${destinationFolder}'.`);
+                        } else {
+                            throw error;
+                        }
+                    }
+                }
+            }
+            console.log('Files copied successfully.');
+
+            console.log('Start images resizing.');
+
+            await resizeImages(imageSizes);
+            
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+
+    copyFilesIfNotExist(sourceFolder, destinationFolder);
+}

ssg_hooks/crawlImages.js

@@ -0,0 +1,35 @@
+import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
+import fs from 'fs';
+
+export async function crawlImages(routes) {
+    const client = createDirectus(process.env.DIRECTUS_URL)
+    .with(staticToken(process.env.DIRECTUS_API_TOKEN))
+    .with(rest());
+    
+    const directusFiles = await client.request(
+        readFiles({
+            query: {
+                filter: {
+                    type: {
+                        _eq: 'image/',
+                    },
+                },
+            },
+        })
+    );
+    
+    for (let image of directusFiles) {
+        if (image.type != "image/heic") {
+            const fileExists = async (filePath) => !!(await fs.promises.access(filePath, fs.constants.F_OK).then(() => true).catch(() => false));
+            
+            const filePath = `./public/api/assets/${image.id}.webp`;
+            fileExists(filePath)
+            .then(exists => {
+                if (!exists) {
+                    routes.add(`/api/assets/${image.id}.webp`);
+                }
+            })
+            .catch(error => console.error('Error:', error));
+        }
+    }
+}

ssg_hooks/resizeImages.js

@@ -0,0 +1,49 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+import { promisify } from 'util';
+
+export async function resizeImages(sizes) {
+    const stat = promisify(fs.stat);
+    const copyFile = promisify(fs.copyFile);
+
+    const sourceFolder = './public/api/assets';
+    const outputFolder = './.output/public/imgs';
+    const sizeCacheFolder = './public/imgs';
+
+    for (const size of sizes) {
+        const key = Object.keys(size)[0];
+        const sizeFolder = `${outputFolder}/${key}`;
+        if (!fs.existsSync(sizeFolder)) fs.mkdirSync(sizeFolder, { recursive: true });
+        const cacheSizeFolder = `${sizeCacheFolder}/${key}`;
+        if (!fs.existsSync(cacheSizeFolder)) fs.mkdirSync(cacheSizeFolder, { recursive: true });
+    }
+
+    const files = fs.readdirSync(sourceFolder);
+
+    for (const file of files) {
+        const filePath = `${sourceFolder}/${file}`;
+        const image = sharp(filePath);
+
+        for (const size of sizes) {
+            const key = Object.keys(size)[0];
+            const destinationFile = path.join(sizeCacheFolder, key, file);
+            try {
+                const destinationFileStat = await stat(destinationFile);
+            } catch (error) {
+                if (error.code === 'ENOENT') {
+                    const width = parseInt(size[key]);
+                    await image.clone().resize({ width }).toFile(destinationFile);
+                    await copyFile(destinationFile, path.join(outputFolder, key, file));
+                } else {
+                    throw error;
+                }
+            }
+
+        }
+    }
+
+    fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
+
+    console.log('Images resized and cached successfully.');
+}