feat: Mise à jour du design de l'application
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2023-04-27 22:31:59 +02:00
parent 58a6da1d94
commit 9d3e144748
16 changed files with 675 additions and 104 deletions

View File

@ -30,7 +30,7 @@ async function fetchAsset(uuid) {
return fetch(url);
}
async function fetchData() {
async function fetchScoresData() {
const fields = [
"*",
"translations.*",
@ -72,18 +72,7 @@ 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,
thumbnail,
createWriteStream(`${folder}/${uuid}.webp`)
);
} catch (err) {
console.log(err);
}
await downloadImage(uuid, `${folder}/${uuid}.webp`, { height: 200 });
}
}
}
@ -92,4 +81,231 @@ async function fetchData() {
// await sharp('src/assets/arbre.png').resize({ width: 440, height: 690 }).webp().toFile('public/arbre.webp')
}
async function transformImage(response, path, options, format = "webp") {
try {
let thumbnail;
console.log(path);
if (format == "webp") {
thumbnail = sharp().resize(options).webp();
} else {
thumbnail = sharp().resize(options).toFormat("png");
}
const stream = createWriteStream(path);
await streamPipeline(response.body, thumbnail, stream);
await stream;
} catch (err) {
console.log(err);
}
}
async function downloadImage(uuid, path, options, format = "webp") {
const response = await fetchAsset(uuid);
await transformImage(response, path, options, format);
}
async function fetchHomepageData() {
const fields = ["*"];
const url = `/items/homepage?${fields
.map((item) => `fields[]=${item}`)
.join("&")}`;
const homepage = (await fetchJSONApi(url)).data;
await downloadImage(homepage.image, `public/homepage.webp`, {
width: 1280,
height: 720,
fit: sharp.fit.cover,
});
const favicons = [
{
path: `public/favicon/android-icon-192x192.png`,
options: {
width: 192,
height: 192,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-57x57.png`,
options: {
width: 57,
height: 57,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-60x60.png`,
options: {
width: 60,
height: 60,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-72x72.png`,
options: {
width: 72,
height: 72,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-76x76.png`,
options: {
width: 76,
height: 76,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-114x114.png`,
options: {
width: 114,
height: 114,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-120x120.png`,
options: {
width: 120,
height: 120,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-144x144.png`,
options: {
width: 144,
height: 144,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-152x152.png`,
options: {
width: 152,
height: 152,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/apple-icon-180x180.png`,
options: {
width: 180,
height: 180,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/favicon-16x16.png`,
options: {
width: 16,
height: 16,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/favicon-32x32.png`,
options: {
width: 32,
height: 32,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/favicon-96x96.png`,
options: {
width: 96,
height: 96,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/favicon-256x256.png`,
options: {
width: 256,
height: 256,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/ms-icon-70x70.png`,
options: {
width: 70,
height: 70,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/ms-icon-144x144.png`,
options: {
width: 144,
height: 144,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/ms-icon-150x150.png`,
options: {
width: 150,
height: 150,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
{
path: `public/favicon/ms-icon-310x310.png`,
options: {
width: 310,
height: 310,
fit: sharp.fit.contain,
background: { r: 255, g: 255, b: 255, alpha: 0 },
},
format: "png",
},
];
for (const favicon of favicons) {
downloadImage(homepage.logo, favicon.path, favicon.options, favicon.format);
}
}
async function fetchData() {
await fetchHomepageData();
await fetchScoresData();
}
fetchData();