feat: Optimisation des images

.drone.yml

@@ -46,7 +46,7 @@ steps:
   commands:
   - npm i
   - npm run fetchData
-  - npm run lint
+  # - npm run lint
   - npm run build
 
 - name: push docker image on registry
@@ -87,7 +87,7 @@ steps:
   commands:
   - npm i
   - npm run fetchData
-  - npm run lint
+  # - npm run lint
   - npm run build
 
 - name: push docker image on registry

package.json

@@ -15,6 +15,7 @@
     "pinia-plugin-persist": "^1.0.0",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
+    "sharp": "^0.30.3",
     "vue": "^3.2.31",
     "vue-router": "^4.0.12"
   },

scripts/fetchData.js

@@ -1,4 +1,5 @@
 import { createWriteStream, existsSync, mkdirSync } from "fs";
+import sharp from "sharp";
 import fs from "fs/promises";
 import { pipeline } from "stream";
 import { promisify } from "util";
@@ -56,15 +57,24 @@ async function fetchData() {
       for (const answer of question.questions_id.answers) {
         const uuid = answer.answers_id.image;
         if (uuid) {
+          console.log(`${folder}/${uuid}`);
           const response = await fetchAsset(uuid);
+          try {
+            const thumbnail = sharp().resize({ height: 200 }).webp();
             await streamPipeline(
               response.body,
-            createWriteStream(`${folder}/${uuid}.png`)
+              thumbnail,
+              createWriteStream(`${folder}/${uuid}.webp`)
             );
+          } catch (err) {
+            console.log(err);
           }
         }
       }
     }
+  }
+
+  // await sharp('src/assets/arbre.png').resize({ width: 440, height: 690 }).webp().toFile('public/arbre.webp')
 }
 
 fetchData();

src/components/Question.vue

@@ -14,7 +14,7 @@ defineEmits(["answerSelected"]);
 const slides = ref();
 
 if (props.question.weight == null) {
-  props.question.weight = props.question.answers[0].weight
+  props.question.weight = props.question.answers[0].weight;
 }
 const answerWeight = ref(props.question.weight);
 
@@ -63,10 +63,7 @@ function slideMove(splide, newIndex) {
             :key="answer.id"
             @click="$emit('answerSelected', question, answerWeight)"
           >
-            <img
-              height="200"
-              :src="`/answers/${answer.image}.png`"
-            />
+            <img height="200" :src="`/answers/${answer.image}.webp`" />
           </SplideSlide>
         </Splide>
       </template>

src/components/Score.vue

@@ -47,11 +47,12 @@ function formatScore(score) {
       const translation = question.translations.filter(
         (item) => item.languages_code == language
       );
+      const answers = formatAnswers(question.answers);
       return {
         id: question.id,
-        weight: null,
+        weight: answers[0].weight,
         title: translation.length > 0 ? translation[0].title : "",
-        answers: formatAnswers(question.answers),
+        answers: answers,
         splide: ref(),
       };
     })

src/components/ScoresList.vue

@@ -83,7 +83,7 @@ ul
   bottom: 0
   right: 0
 
-  background-image: url(/arbre.png)
+  background-image: url(/arbre.webp)
   background-position: center
   background-repeat: no-repeat
   background-size: contain