Merge branch 'main' into prod

'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/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">
@@ -127,6 +131,7 @@
             width: 3rem;
             z-index: 1;
             img {
+                padding-top: 10px;
                 width: 100%;
                 transform: rotate(0deg);
                 transition: transform 0.3s ease-out;
@@ -152,6 +157,9 @@
                     }
                 }
             }
+            > div > 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 ? content.image : content.shop_image}.webp`"
                     :alt="content.titre"
-                    format="webp"
-                    placeholder
-                    lazy
-                    sizes="sm:40vw lg:30vw"
-                    @click="displaySlider(content.id)" />
+                    @click="displaySlider(content.id)"
+                />
             </div>
             <div>
                 <p v-if="content.titre">{{ content.titre }}</p>
@@ -30,12 +27,10 @@
         >
             <swiper-slide v-for="content in contents" :key="content.id">
                 <div class="swiper-zoom-container">
-                    <NuxtImg 
-                        :src="img((content.image ? content.image : content.shop_image))"
+                    <img
+                        :src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
                         :alt="content.titre"
-                        format="webp"
-                        placeholder
-                        lazy />
+                    />
                 </div>
             </swiper-slide>
             <div class="swiper-button-close" @click="closeSlider()"></div>
@@ -51,8 +46,6 @@ import 'swiper/css/zoom';
 
 export default {
     setup() {
-        const { getThumbnail : img } = useDirectusFiles();
-
         const swiperInstance = ref(null);
         const onSwiper = (swiper) => {
             swiperInstance.value = swiper;
@@ -73,11 +66,11 @@ export default {
 
         const closeSlider = () => {
             const body = document.querySelector('body');
-            body.style.overflowY = 'auto';
             const swiperEl = document.querySelector('.swiper');
             swiperEl.style.opacity = 0;
             setTimeout(() => {
                 swiperEl.style.display = "none";
+                body.style.overflowY = 'auto';
             }, 300);
         }
 
@@ -87,7 +80,6 @@ export default {
             modules: [Navigation, A11y, Zoom],
             displaySlider,
             closeSlider,
-            img
         };
     },
     components: {
@@ -143,6 +135,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 +197,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,42 @@
+// 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 { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
+
+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 +45,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,15 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/image": "^1.3.0",
-    "nuxt": "^3.10.1",
-    "nuxt-directus": "^5.6.0",
+    "@directus/sdk": "^15.1.0",
+    "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,30 @@
 <template>
     <main id="contact">
-        <div v-if="globalData.contact_image">
-            <NuxtImg 
-                :src="img(globalData.contact_image)" 
+        <div>
+            <img 
+                :src="`/imgs/small/${globalData.contact_image}.webp`"
                 :alt="globalData.contact_image_titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:40vw" />
+            />
         </div>
         <div>
-            <p>{{ globalData.contact_texte }}</p>
+            <p>{{ globalData.contact_text }}</p>
             <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
         </div>
     </main>
 </template>
 
-<script setup>
-    const globalData = inject('globalData');
-    const { getThumbnail : img } = useDirectusFiles();
+<script>
+export default {
+    async setup() {
+
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData
+        }
+    }
+}
 </script>
 
 <style lang="scss">

pages/galerie.vue

@@ -7,11 +7,14 @@ import Projects from '@/components/Projects.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 {

pages/index.vue

@@ -1,67 +1,79 @@
 <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`;
-        }
+        
 
-        imgs[0].style.opacity = 1;
+        return {
+            itemsAccueil,
+        };
 
-        let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
 
-        let index = 1;
+        function startSlider() {
+            const imgs = document.querySelectorAll('.indexImg img');
+            
+            const showingTime = 5000, transitionTime = 2000;
 
-        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

@@ -9,15 +9,19 @@
 import Projects from '@/components/Projects.vue';
 
 export default {
-    setup() {
-        const { getItems } = useDirectusItems();
+    async setup() {
         const magasin = ref([]);
-        onMounted(async () => {
-            const items = await getItems({ collection: "magasin" });
-            magasin.value = items;
+
+        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
+
+        onBeforeMount(async () => {
+            if (itemsData.value) {
+                magasin.value = itemsData.value.data;
+            }
         });
 
-        const globalData = inject('globalData');
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData,

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.');
+}