cache des images resize

.gitignore

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

app.vue

@@ -40,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

@@ -131,6 +131,7 @@ export default {
             width: 3rem;
             z-index: 1;
             img {
+                padding-top: 10px;
                 width: 100%;
                 transform: rotate(0deg);
                 transition: transform 0.3s ease-out;
@@ -156,6 +157,9 @@ export default {
                     }
                 }
             }
+            > div > a > img {
+                padding: 10px;
+            }
         }
     }
 </style>

components/Projects.vue

@@ -1,9 +1,9 @@
 <template>
     <main>
-        <article v-for="content in contents" :key="content.id">
+        <article v-for="content in contents.slice().reverse()" :key="content.id">
             <div>
                 <img
-                    :src="`/small/${content.image ? content.image : content.shop_image}.webp`"
+                    :src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
                     :alt="content.titre"
                     @click="displaySlider(content.id)"
                 />
@@ -28,7 +28,7 @@
             <swiper-slide v-for="content in contents" :key="content.id">
                 <div class="swiper-zoom-container">
                     <img
-                        :src="`/large/${content.image ? content.image : content.shop_image}.webp`"
+                        :src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
                         :alt="content.titre"
                     />
                 </div>
@@ -135,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,
@@ -189,9 +197,10 @@ export default {
                 width: 15vw;
             }
             .swiper .swiper-wrapper .swiper-slide img {
-                width: 30%;
+                width: 60%;
+                padding-top: 2rem;
+                padding-bottom: 2rem;
             }
-
         }
     }
 </style>

nuxt.config.ts

@@ -30,7 +30,11 @@ export default defineNuxtConfig({
   },
   hooks: {
     'nitro:build:public-assets': async () => {
-      await cacheImages();
+      const imageSizes = [
+        { small: 750 },
+        { large: 1920 },
+      ];
+      await cacheImages(imageSizes);
     }
   },
   app: {

pages/contact.vue

@@ -2,7 +2,7 @@
     <main id="contact">
         <div>
             <img 
-                :src="`/api/assets/${globalData.contact_image}.webp`"
+                :src="`/imgs/small/${globalData.contact_image}.webp`"
                 :alt="globalData.contact_image_titre"
             />
         </div>

pages/index.vue

@@ -2,7 +2,7 @@
     <main>
         <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
             <img
-                :src="`/api/assets/${image.image_accueil}.webp`"
+                :src="`/imgs/large/${image.image_accueil}.webp`"
                 :alt="image.titre"
             />
        </div>

ssg_hooks/cacheImages.js

@@ -4,7 +4,7 @@ import { promisify } from 'util';
 
 import { resizeImages } from '../ssg_hooks/resizeImages.js'
 
-export async function cacheImages() {
+export async function cacheImages(imageSizes) {
     const sourceFolder = './.output/public/api/assets';      
     const destinationFolder = './public/api/assets';
 
@@ -57,11 +57,6 @@ export async function cacheImages() {
             console.log('Files copied successfully.');
 
             console.log('Start images resizing.');
-             
-            const imageSizes = [
-                { small: 750 },
-                { large: 1920 },
-            ];
 
             await resizeImages(imageSizes);
             

ssg_hooks/resizeImages.js

@@ -1,35 +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';
+    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 });
-        }
+        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 sizeFolder = `${outputFolder}/${key}`;
-            const width = parseInt(size[key]);
+            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;
+                }
+            }
 
-            await image.clone().resize({ width }).toFile(`${sizeFolder}/${file}`);
         }
     }
 
-    // fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
+    fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
 
-    console.log('Images resized and saved successfully.');
+    console.log('Images resized and cached successfully.');
 }