Les images sur Notion ont un token qui expire au bout d'un jour.
Il est donc nécessaire de récupérer l'image depuis Notion, puis la téléverser sur l'hébergement-cible.
Historique
Actuellement, un mécanisme de récupération intelligent (qui ne re-télécharge pas les images déjà présentes sur l'hébergement) est déjà implémenté sur le repository imrok :
[x] Téléchargement de l'image, si pas présente sur le site live.
Extraction du mécanisme
J'ai créé le répertoire nebula-genesis pour rassembler les différents mécanismes amont de la génération de site :
Fetch les pages d'une DB Notion,
Fetch des blocs de chaque page,
Calcul des blocs spéciaux,
Téléchargement des images,
Tests de ces fonctionnalités.
Bien que j'aurais aimé en faire un module npm, je rencontre un problème d'import avec gatsby-node (je pense à une dépendance concurrente, mais j'ai pas encore trouvé la solution).
Pour le moment je pense qu'on git clonera ce repo dans les diverses instances de site.
Description de la tâche
Partie gatsby-node et nebula-genesis
La tâche devrait se dérouler principalement dans le dossier cacheBlockImages.
Le critère de validation de la fonctionnalité sur cette partie est de pouvoir faire tourner au vert le test npm run e2e-main-resize.
[ ] En plus du téléchargement, les images reçues depuis Notion devraient être redimensionnées.
Les différents formats-cible :
Format mobile (min) : 360px de largeur,
Format desktop (med) : 800px de largeur,
Format non-redimensionné (max).
Il ne faut redimensionner que les images qui excèdent les deux premiers formats.
Une image de 200px de large n'a pas à être redimensionnée.
Une image de 900px de large doit être redimensionnée en min et med.
Redimensionnées, les images doivent être renommées avec le suffixe --min ou --med.
L'image de 900px (ex: illu.png) engendre les images : illu--min.png et illu--med.png.
[ ] Il faut aussi tester que les redimensionnements sont présents sur le serveur et ne pas redimensionner les images déjà présentes sur l'hébergement (économie de CPU et de bande passante).
[ ] Ajouter des console.log (pour afficher dans le build CI/CD) :
Le nombre de blocs images trouvés depuis Notion,
Le nombre d'images non-trouvées sur l'hébèrgement et redimensionnées avec le nom des fichiers cibles (min/med/normal).
Partie imrok (POC)
On va se servir du projet et du site imrok pour implémenter les répercussions côté front.
Je détaillerais plus sur cette partie de la feature sur ce projet plus tard, mais en attendant voici les grandes lignes :
[ ] Dans le composant du bloc image (module statikon), gérer l'affichage responsive des images mobile et desktop (srcset ou imgset ...).
[ ] Utiliser la nouvelle feature Gatsby-5 des composants client pour ouvrir l'image non-redimensionnée lors d'un clic.
Notes
Essayer de créer des tests unitaires et E2E pertinents sur la partie cacheBlocksImages.
Bien penser à décomposer les étapes pour les tester plus facilement.
Contexte
Problématique
Les images sur Notion ont un token qui expire au bout d'un jour.
Il est donc nécessaire de récupérer l'image depuis Notion, puis la téléverser sur l'hébergement-cible.
Historique
Actuellement, un mécanisme de récupération intelligent (qui ne re-télécharge pas les images déjà présentes sur l'hébergement) est déjà implémenté sur le repository
imrok:https://github.com/Skaant/imrok/tree/main/src/helpers/cacheBlocksImages
Extraction du mécanisme
J'ai créé le répertoire
nebula-genesispour rassembler les différents mécanismes amont de la génération de site :Bien que j'aurais aimé en faire un module npm, je rencontre un problème d'import avec
gatsby-node(je pense à une dépendance concurrente, mais j'ai pas encore trouvé la solution).Pour le moment je pense qu'on git clonera ce repo dans les diverses instances de site.
Description de la tâche
Partie
gatsby-nodeetnebula-genesisLa tâche devrait se dérouler principalement dans le dossier
cacheBlockImages.Le critère de validation de la fonctionnalité sur cette partie est de pouvoir faire tourner au vert le test
npm run e2e-main-resize.Les différents formats-cible :
Il ne faut redimensionner que les images qui excèdent les deux premiers formats.
Une image de 200px de large n'a pas à être redimensionnée.
Une image de 900px de large doit être redimensionnée en min et med.
Redimensionnées, les images doivent être renommées avec le suffixe
--minou--med.L'image de 900px (ex: illu.png) engendre les images :
illu--min.pngetillu--med.png.[ ] Il faut aussi tester que les redimensionnements sont présents sur le serveur et ne pas redimensionner les images déjà présentes sur l'hébergement (économie de CPU et de bande passante).
[ ] Ajouter des
console.log(pour afficher dans le build CI/CD) :Partie
imrok(POC)On va se servir du projet et du site
imrokpour implémenter les répercussions côté front.Je détaillerais plus sur cette partie de la feature sur ce projet plus tard, mais en attendant voici les grandes lignes :
[ ] Dans le composant du bloc image (module
statikon), gérer l'affichage responsive des images mobile et desktop (srcsetouimgset...).[ ] Utiliser la nouvelle feature Gatsby-5 des composants client pour ouvrir l'image non-redimensionnée lors d'un clic.
Notes
Essayer de créer des tests unitaires et E2E pertinents sur la partie
cacheBlocksImages.Bien penser à décomposer les étapes pour les tester plus facilement.