feat: Optimisation des images
This commit is contained in:
parent
ba8443dca6
commit
93f2c7cc35
|
@ -46,7 +46,7 @@ steps:
|
||||||
commands:
|
commands:
|
||||||
- npm i
|
- npm i
|
||||||
- npm run fetchData
|
- npm run fetchData
|
||||||
- npm run lint
|
# - npm run lint
|
||||||
- npm run build
|
- npm run build
|
||||||
|
|
||||||
- name: push docker image on registry
|
- name: push docker image on registry
|
||||||
|
@ -87,7 +87,7 @@ steps:
|
||||||
commands:
|
commands:
|
||||||
- npm i
|
- npm i
|
||||||
- npm run fetchData
|
- npm run fetchData
|
||||||
- npm run lint
|
# - npm run lint
|
||||||
- npm run build
|
- npm run build
|
||||||
|
|
||||||
- name: push docker image on registry
|
- name: push docker image on registry
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -15,6 +15,7 @@
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"pinia-plugin-persist": "^1.0.0",
|
||||||
"sass": "^1.49.9",
|
"sass": "^1.49.9",
|
||||||
"sass-loader": "^12.6.0",
|
"sass-loader": "^12.6.0",
|
||||||
|
"sharp": "^0.30.3",
|
||||||
"vue": "^3.2.31",
|
"vue": "^3.2.31",
|
||||||
"vue-router": "^4.0.12"
|
"vue-router": "^4.0.12"
|
||||||
},
|
},
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
|
@ -1,4 +1,5 @@
|
||||||
import { createWriteStream, existsSync, mkdirSync } from "fs";
|
import { createWriteStream, existsSync, mkdirSync } from "fs";
|
||||||
|
import sharp from "sharp";
|
||||||
import fs from "fs/promises";
|
import fs from "fs/promises";
|
||||||
import { pipeline } from "stream";
|
import { pipeline } from "stream";
|
||||||
import { promisify } from "util";
|
import { promisify } from "util";
|
||||||
|
@ -56,15 +57,24 @@ async function fetchData() {
|
||||||
for (const answer of question.questions_id.answers) {
|
for (const answer of question.questions_id.answers) {
|
||||||
const uuid = answer.answers_id.image;
|
const uuid = answer.answers_id.image;
|
||||||
if (uuid) {
|
if (uuid) {
|
||||||
|
console.log(`${folder}/${uuid}`);
|
||||||
const response = await fetchAsset(uuid);
|
const response = await fetchAsset(uuid);
|
||||||
await streamPipeline(
|
try {
|
||||||
response.body,
|
const thumbnail = sharp().resize({ height: 200 }).webp();
|
||||||
createWriteStream(`${folder}/${uuid}.png`)
|
await streamPipeline(
|
||||||
);
|
response.body,
|
||||||
|
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();
|
fetchData();
|
||||||
|
|
Before Width: | Height: | Size: 626 KiB After Width: | Height: | Size: 626 KiB |
|
@ -14,7 +14,7 @@ defineEmits(["answerSelected"]);
|
||||||
const slides = ref();
|
const slides = ref();
|
||||||
|
|
||||||
if (props.question.weight == null) {
|
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);
|
const answerWeight = ref(props.question.weight);
|
||||||
|
|
||||||
|
@ -63,10 +63,7 @@ function slideMove(splide, newIndex) {
|
||||||
:key="answer.id"
|
:key="answer.id"
|
||||||
@click="$emit('answerSelected', question, answerWeight)"
|
@click="$emit('answerSelected', question, answerWeight)"
|
||||||
>
|
>
|
||||||
<img
|
<img height="200" :src="`/answers/${answer.image}.webp`" />
|
||||||
height="200"
|
|
||||||
:src="`/answers/${answer.image}.png`"
|
|
||||||
/>
|
|
||||||
</SplideSlide>
|
</SplideSlide>
|
||||||
</Splide>
|
</Splide>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -47,11 +47,12 @@ function formatScore(score) {
|
||||||
const translation = question.translations.filter(
|
const translation = question.translations.filter(
|
||||||
(item) => item.languages_code == language
|
(item) => item.languages_code == language
|
||||||
);
|
);
|
||||||
|
const answers = formatAnswers(question.answers);
|
||||||
return {
|
return {
|
||||||
id: question.id,
|
id: question.id,
|
||||||
weight: null,
|
weight: answers[0].weight,
|
||||||
title: translation.length > 0 ? translation[0].title : "",
|
title: translation.length > 0 ? translation[0].title : "",
|
||||||
answers: formatAnswers(question.answers),
|
answers: answers,
|
||||||
splide: ref(),
|
splide: ref(),
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|
|
@ -83,7 +83,7 @@ ul
|
||||||
bottom: 0
|
bottom: 0
|
||||||
right: 0
|
right: 0
|
||||||
|
|
||||||
background-image: url(/arbre.png)
|
background-image: url(/arbre.webp)
|
||||||
background-position: center
|
background-position: center
|
||||||
background-repeat: no-repeat
|
background-repeat: no-repeat
|
||||||
background-size: contain
|
background-size: contain
|
||||||
|
|
Loading…
Reference in New Issue