Merge pull request #36 from NovaGaia/feat/adv-image

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "problemMatcher": [],
+      "label": "npm: dev",
+      "detail": "npm run dev",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

src/components/fiches/MetaItem.astro

@@ -28,6 +28,9 @@ const getDatas = async ({ collectionType, item, meta, collectionTypeMeta }) => {
     .replace(`src/content/${collectionType}/`, "")
     .replace(".mdx", "");
   const o: any = await getEntry(collectionType, id);
+  if (!o?.slug) {
+    return { label: "TBD", path: "#" };
+  }
   const [lang, ...slug] = o.slug.split("/");
   return {
     label: o.data[collectionTypeMeta],

src/components/mdx/MDXPositionableImage.astro

@@ -1,7 +1,8 @@
 ---
 import ResponsiveImage from "@components/ResponsiveImage.astro";
 import type { ImageMetadata } from "astro";
-import { Picture } from "astro:assets";
+import { Icon } from "astro-icon/components";
+import { Picture, getImage } from "astro:assets";
 const props: any = Astro.props;
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
@@ -11,29 +12,61 @@ if (!images[props.src])
   throw new Error(
     `"${props.src}" does not exist in glob: "src/assets/**/*.{jpeg,jpg,png,gif,svg}"`,
   );
+const unZoomedImage = await getImage({
+  src: images[props.src](),
+  format: "webp",
+});
 ---
 
 <figure
   class:list={[
-    props.position,
-    props.imgWidth,
     {
-      "mr-2 pb-2": props.position === "float-left",
+      "float-left mr-2 pb-2": props.position === "float-left",
+      "float-right ml-2 pb-2": props.position === "float-right",
+      "mx-auto block pb-2": props.position === "block",
     },
     {
-      "ml-2 pb-2": props.position === "float-right",
+      "w-auto": props.imgWidth === "auto",
+      "w-full": props.imgWidth === "fullWidth",
+      "w-full md:w-2/3": props.imgWidth === "twoThirdWidth",
+      "w-full md:w-1/2": props.imgWidth === "halfWidth",
+      "w-full md:w-1/3": props.imgWidth === "thirdWidth",
+      "w-full md:w-1/4": props.imgWidth === "quarterWidth",
     },
   ]}
 >
-  <Picture
-    src={images[props.src]()}
-    formats={["avif", "webp"]}
-    width={props.width || 400}
-    height={props.height || 300}
-    alt={props.alt || `Undefined`}
-    title={props.title || ``}
-    class:list={[props.class]}
-  />
+  {
+    props.zoomable ? (
+      <a
+        href={unZoomedImage?.src || ""}
+        target="_blank"
+        class="group relative inline-block"
+      >
+        <Picture
+          src={images[props.src]()}
+          formats={["avif", "webp"]}
+          width={props.width || 600}
+          height={props.height || 400}
+          alt={props.alt || `Undefined`}
+          title={props.title || ``}
+          class:list={[`mx-auto`, props.class]}
+        />
+        <span class="absolute bottom-0 right-0 m-2 rounded-lg bg-black bg-opacity-25 p-1 group-hover:bg-opacity-50">
+          <Icon name="tabler:zoom-scan" size={24} class="text-white" />
+        </span>
+      </a>
+    ) : (
+      <Picture
+        src={images[props.src]()}
+        formats={["avif", "webp"]}
+        width={props.width || 600}
+        height={props.height || 400}
+        alt={props.alt || `Undefined`}
+        title={props.title || ``}
+        class:list={[`mx-auto`, props.class]}
+      />
+    )
+  }
   {
     props.caption && (
       <figcaption class="block text-center text-xs italic">

src/content/fiches/fr/RWP_1.04-securiser-les-formulaires-en-ligne.mdx

@@ -1,28 +1,28 @@
 ---
-refID: "1.04"
+refID: '1.04'
 title: Sécuriser les formulaires en ligne
 createdAt: 2024-01-20T13:17:16.663Z
-updatedAt: 2024-01-26T08:38:37.518Z
+updatedAt: 2024-02-20T08:46:34.218Z
 language: fr
 published: true
 refType: RWP
 versions:
   - version: 1.0.0
-    idRef: "1.04"
+    idRef: '1.04'
 people: Dominique N.
-scope: features
 responsible:
   - responsible: >-
       src/content/personas/fr/low-code-freelance-et-developpeur-front-end-d-agences.mdx
 lifecycle: 1-analyse-of-needs
-priority_implementation: high_priority
 environmental_impact: medium_environmental_impact
+priority_implementation: high_priority
+scope: features
 saved_resources:
   - storage
   - network
 validations:
   - rule: de formulaires non sécurisés
-    maxValue: "0"
+    maxValue: '0'
 ---
 
 ## Sujet
@@ -40,34 +40,34 @@ Le captcha est un système qui permet de vérifier, par une suite de lettres, un
 
 reCAPTCHA est un système de détection automatisée d'utilisateurs appartenant à Google et mettant à profit les capacités de reconnaissance de ces derniers, mobilisées par les tests CAPTCHA, pour améliorer par la même occasion le processus de reconnaissance des formes par les robots<sup>2</sup>.
 
-![recaptcha](/src/assets/fiches/1.04/1.04_recaptcha.jpg "recaptcha")
+<PositionableImage src="/src/assets/fiches/1.04/1.04_recaptcha.jpg" alt="reCaptcha" caption="reCaptcha " position="block" imgWidth="auto" />
 
 Il en existe de plusieurs types (reconnaissances d'images, de textes, validation automatique par Google).
 
 #### Captcha personnalisé
 
 Vous pouvez ne pas utiliser Google reCAPTCHA, et créer vos propres questions/réponses ou questions mathématiques.
 
-![captcha-calcul](/src/assets/fiches/1.04/1.04_captcha-calcul.jpg "captcha-calcul")
+<PositionableImage position="block" imgWidth="auto" src="/src/assets/fiches/1.04/1.04_captcha-calcul.jpg" alt="captcha-calcul" caption="captcha-calcul" />
 
 ### Le Pot de miel
 
 La méthode pot de miel est efficace pour éviter les spams. Un champ est ajouté dans le code du site, mais non visible pour les utilisateurs. Ainsi, s'il est rempli, c'est que l'utilisateur est un robot.
 
 ## GreenIT vous conseille
 
-- Choisir une extension de gestion des formulaires qui intègre au moins une des méthodes ci-dessus
-- Veiller à ce que tous les utilisateurs puissent valider la méthode choisie
-- Nettoyer vos données lorsque la méthode choisie n'a pas été efficace (ce qui peut toujours arriver)
+* Choisir une extension de gestion des formulaires qui intègre au moins une des méthodes ci-dessus
+* Veiller à ce que tous les utilisateurs puissent valider la méthode choisie
+* Nettoyer vos données lorsque la méthode choisie n'a pas été efficace (ce qui peut toujours arriver)
 
 > ⚠️ Le Google reCaptcha n'est pas la méthode la plus recommandée :
 
-- elle fait appel à des fichiers sources externes qui sont lourds
-- elle n'est pas utilisable par l'ensemble des utilisateurs
+* elle fait appel à des fichiers sources externes qui sont lourds
+* elle n'est pas utilisable par l'ensemble des utilisateurs
 
 ## Sources
 
-- Note 1 : [https://fr.wikipedia.org/wiki/CAPTCHA](https://fr.wikipedia.org/wiki/CAPTCHA)
-- Note 2 : [https://fr.wikipedia.org/wiki/ReCAPTCHA](https://fr.wikipedia.org/wiki/ReCAPTCHA)
-- CAPTCHA et sobriété numérique (Greenspector) : [https://greenspector.com/fr/captcha-et-sobriete-numerique/](https://greenspector.com/fr/captcha-et-sobriete-numerique/)
-- Captcha et numérique responsable : quelles solutions? (Empreinte Digitale) : [https://blog.empreintedigitale.fr/2022/09/05/captcha-et-numerique-responsable-quelles-solutions/](https://blog.empreintedigitale.fr/2022/09/05/captcha-et-numerique-responsable-quelles-solutions/)
+* Note 1 : [https://fr.wikipedia.org/wiki/CAPTCHA](https://fr.wikipedia.org/wiki/CAPTCHA)
+* Note 2 : [https://fr.wikipedia.org/wiki/ReCAPTCHA](https://fr.wikipedia.org/wiki/ReCAPTCHA)
+* CAPTCHA et sobriété numérique (Greenspector) : [https://greenspector.com/fr/captcha-et-sobriete-numerique/](https://greenspector.com/fr/captcha-et-sobriete-numerique/)
+* Captcha et numérique responsable : quelles solutions? (Empreinte Digitale) : [https://blog.empreintedigitale.fr/2022/09/05/captcha-et-numerique-responsable-quelles-solutions/](https://blog.empreintedigitale.fr/2022/09/05/captcha-et-numerique-responsable-quelles-solutions/)

src/content/fiches/fr/RWP_1.TBD-services-tiers-en-general.mdx

@@ -11,8 +11,6 @@ versions:
     idRef: "1.TBD"
 people: Yann K.
 scope: features
-responsible:
-  - responsible: tbd
 lifecycle: 1-analyse-of-needs
 environmental_impact: tbd
 priority_implementation: tbd

src/content/fiches/fr/RWP_3.01-limiter-l_autocompeltion-lors-d_une-recherche.mdx

@@ -1,16 +1,15 @@
 ---
-refID: "3.01"
+refID: '3.01'
 title: Limiter l'autocomplétion lors d'une recherche
 createdAt: 2024-01-20T13:17:16.663Z
-updatedAt: 2024-01-26T09:14:01.887Z
+updatedAt: 2024-02-20T09:08:22.151Z
 language: fr
 published: true
 refType: RWP
 versions:
   - version: 1.0.0
-    idRef: "3.01"
+    idRef: '3.01'
 people: Renaud H.
-scope: front-office
 responsible:
   - responsible: src/content/personas/fr/codeuseur-developpeuser.mdx
   - responsible: src/content/personas/fr/designeuser.mdx
@@ -20,6 +19,7 @@ responsible:
 lifecycle: 3-conception-design
 environmental_impact: high_environmental_impact
 priority_implementation: high_priority
+scope: front-office
 saved_resources:
   - cpu
   - ram
@@ -28,14 +28,14 @@ saved_resources:
   - requests
 validations:
   - rule: de champ d'autocomplétion
-    maxValue: "1"
-  - rule: "de caractères avant de déclencher la première requête "
-    maxValue: "5"
+    maxValue: '1'
+  - rule: 'de caractères avant de déclencher la première requête '
+    maxValue: '5'
 ---
 
 ## Sujet
 
-![Exemple avec Google](/src/assets/fiches/3.01/pict1.png)
+<PositionableImage position="block" imgWidth="twoThirdWidth" src="/src/assets/fiches/3.01/pict1.png" alt="Exemple avec Google" caption="Exemple avec Google search" />
 
 La suggestion de réponse au moment de la saisie dans un champ de recherche (ou de toute liste) est pratique, mais a un réel impact réseau ainsi que sur les processeurs du serveur comme sur celui de la machine utilisée par le visiteur du site.
 
@@ -47,11 +47,11 @@ Pour faire simple, **à chaque caractère saisi, une demande est envoyée au ser
 
 Si elle est jugée indispensable, il y a des paramètres sur lesquelles on peut jouer pour limiter l'impact :
 
-- Augmenter le nombre de caractères à saisir avant de faire la première requête. La moyenne du nombre de caractères des mots en français étant de 4 (ou 5 suivant les sources), on peut donc configurer ce nombre de caractères minimal à 6.
-- On peut aussi omettre les mots de moins de 3-4 caractères et ainsi n'envoyer que les mots "pertinents" et ne pas rechercher les articles ou mots de coordination (de, du, ils, or...).
-- Cloisonner la recherche à certains types de posts, au titre, etc.
-- **Il faut privilégier l'utilisation de \[\[extension|extensions]] spécialisés et proposant de réaliser des recherches sur l'indexation qu'ils auront faite de votre site**. Les index sont des bases de données optimisées pour la recherche. Elles recensent les mots contenus par votre site qui sont sauvegardés, avec le nombre d'occurrences trouvées pour celui-ci et les pages liées et qui n'est mis à jour que lorsque le site est lui-même mis à jour. Tout le travail de "recherche" est donc fait lors de la création/mise à jour de l'index suivant les paramètres configurés et préoptimisés. Lors de la recherche utilisateur, le plug-in fait ses requêtes sur cette base/table spécifique et optimisée, ce qui allège la charge serveur et qui à l'avantage d'être aussi beaucoup plus rapide.
+* Augmenter le nombre de caractères à saisir avant de faire la première requête. La moyenne du nombre de caractères des mots en français étant de 4 (ou 5 suivant les sources), on peut donc configurer ce nombre de caractères minimal à 6.
+* On peut aussi omettre les mots de moins de 3-4 caractères et ainsi n'envoyer que les mots "pertinents" et ne pas rechercher les articles ou mots de coordination (de, du, ils, or...).
+* Cloisonner la recherche à certains types de posts, au titre, etc.
+* **Il faut privilégier l'utilisation de \[\[extension|extensions]] spécialisés et proposant de réaliser des recherches sur l'indexation qu'ils auront faite de votre site**. Les index sont des bases de données optimisées pour la recherche. Elles recensent les mots contenus par votre site qui sont sauvegardés, avec le nombre d'occurrences trouvées pour celui-ci et les pages liées et qui n'est mis à jour que lorsque le site est lui-même mis à jour. Tout le travail de "recherche" est donc fait lors de la création/mise à jour de l'index suivant les paramètres configurés et préoptimisés. Lors de la recherche utilisateur, le plug-in fait ses requêtes sur cette base/table spécifique et optimisée, ce qui allège la charge serveur et qui à l'avantage d'être aussi beaucoup plus rapide.
 
 ## Sources
 
-- Réduire les impacts de l'autocomplétion (Greenspector) : [https://greenspector.com/fr/reduire-les-impacts-de-lautocompletion/](https://greenspector.com/fr/reduire-les-impacts-de-lautocompletion/)
+* Réduire les impacts de l'autocomplétion (Greenspector) : [https://greenspector.com/fr/reduire-les-impacts-de-lautocompletion/](https://greenspector.com/fr/reduire-les-impacts-de-lautocompletion/)

src/content/fiches/fr/RWP_5.02-utiliser-le-format-adequat-d_image.mdx

@@ -1,16 +1,15 @@
 ---
-refID: "5.02"
+refID: '5.02'
 title: Utiliser le format adéquat d'image
 createdAt: 2024-01-20T13:17:16.663Z
-updatedAt: 2024-01-27T12:48:26.221Z
+updatedAt: 2024-02-20T12:04:02.574Z
 language: fr
 published: true
 refType: RWP
 versions:
   - version: 1.0.0
-    idRef: "5.02"
+    idRef: '5.02'
 people: Renaud H. & Florine S.
-scope: images
 responsible:
   - responsible: src/content/personas/fr/codeuseur-developpeuser.mdx
   - responsible: src/content/personas/fr/designeuser.mdx
@@ -20,14 +19,15 @@ responsible:
 lifecycle: 5-content-media
 environmental_impact: high_environmental_impact
 priority_implementation: high_priority
+scope: images
 saved_resources:
   - cpu
   - ram
   - storage
   - network
 validations:
   - rule: d'images ayant un format inadapté à son contexte
-    maxValue: "0"
+    maxValue: '0'
 ---
 
 ## Sujet
@@ -40,10 +40,10 @@ Le monde des extensions de formats est vivant et complexe, pour plus de clarté
 
 Petites légendes des émoticons utilisées :
 
-- 🌱 - GreenIT recommande ces formats en respectant les conditions d'utilisation
-- ✋ - GreenIT vous recommande d'attendre une prise en charge significative
-- ❓ - GreenIT recommande d'être attentif au contexte d'utilisation de ces formats
-- 🚫 - GreenIT ne recommande pas l'utilisation de ces formats
+* 🌱 - GreenIT recommande ces formats en respectant les conditions d'utilisation
+* ✋ - GreenIT vous recommande d'attendre une prise en charge significative
+* ❓ - GreenIT recommande d'être attentif au contexte d'utilisation de ces formats
+* 🚫 - GreenIT ne recommande pas l'utilisation de ces formats
 
 ### 🌱 Le SVG (Scalable Vector Graphics ou Graphique Vectoriel Adaptable) 🌱
 
@@ -57,8 +57,8 @@ Nous commençons par le seul format \[\[vectoriel]] de cette liste, c'est-à-dir
 
 C'est un format de compression (avec ou sans perte) d'images \[\[matricielle|matricielles]] crée par Google en 2010 en Open Source dans le but de remplacer `.jpeg`, `.jpg`, `.png`, `.gif`, etc. Développé spécialement pour le web, il possède les qualités de chaque format décrit ci-dessous à savoir :
 
-- la gestion de la transparence
-- l'affichage d'une séquence d'images (animation) comme un GIF
+* la gestion de la transparence
+* l'affichage d'une séquence d'images (animation) comme un GIF
 
 Le WebP est en moyenne 26% plus légère qu’une image PNG, et jusqu’à 34% plus légère qu’une image JPEG. Adopté par Google Chrome, Microsoft Edge et Mozilla Firefox fin 2018, puis par tous les navigateurs chromium comme Opera, Vivaldi, Brave, il est supporté depuis 2020 par Safari d’Apple. Il supporte 97% des usages ([https://caniuse.com/webp](https://caniuse.com/webp)).
 
@@ -131,7 +131,8 @@ Nous l'avons retravaillé comme il suit :
 | Fichier d'origine en `.jpg`                                  | 999 ko | Fond blanc  |
 | Fichier revectorisé sous Illustrator puis exporter en `.svg` | 137 ko |             |
 
-![format-choice.svg](/src/assets/fiches/5.02/image2.png "Fig.1 - JPG vs PNG vs GIF vs SVG (source EN)")
+<PositionableImage position="block" imgWidth="twoThirdWidth" caption="Fig.1 - JPG vs PNG vs GIF vs SVG (source EN | https://modomodoagency.com/2019/01/22/jpg-vs-png-vs-gif-vs-svg-image-format-guide/)" alt="format image choice chart" src="/src/assets/fiches/5.02/image2.png" zoomable={true} />
+
 [Source de l'image](https://uxdesign.cc/jpg-vs-png-vs-gif-vs-svg-aefeca89f61)
 
 ### Photographie
@@ -148,8 +149,10 @@ Changements de format réalisés avec Photoshop :
 | `.WebP` qualité 75% (pas de perte visible) | 831 ko  |
 | `.WebP` qualité 50% (pas de perte visible) | 620 ko  |
 
-_Source de l'exemple : [https://www.pexels.com/fr-fr/photo/nature-troncs-foret-arbres-7604425/](https://www.pexels.com/fr-fr/photo/nature-troncs-foret-arbres-7604425/)_
+*Source de l'exemple : [https://www.pexels.com/fr-fr/photo/nature-troncs-foret-arbres-7604425/](https://www.pexels.com/fr-fr/photo/nature-troncs-foret-arbres-7604425/)*
 
 ## Sources :
 
-- [Enabling WebP by default (EN)](https://make.wordpress.org/core/2022/03/28/enabling-webp-by-default/)
+* [Enabling WebP by default (EN)](https://make.wordpress.org/core/2022/03/28/enabling-webp-by-default/ "Source EN")
+* [GIF, PNG, JPG or SVG. Which One To Use? (EN)](https://www.sitepoint.com/gif-png-jpg-which-one-to-use/ "Source EN")
+* [JPG VS PNG VS GIF VS SVG: WHEN TO USE WHICH? (EN)](https://modomodoagency.com/2019/01/22/jpg-vs-png-vs-gif-vs-svg-image-format-guide/ "Source EN")

tina/collections/fiches.tsx

@@ -11,6 +11,7 @@ import {
   MESURE_ON_3,
   MESURE_ON_5,
 } from "../../referentiel-config";
+import { imageBlock } from "../utils/templates.js";
 
 const PUBLIC_BASE =
   process.env.PUBLIC_BASE && process.env.PUBLIC_BASE !== ""
@@ -452,7 +453,7 @@ const fiches: Collection = {
       isBody: true,
       label: "Contenu",
       required: true,
-      templates: [tinaTableTemplate],
+      templates: [tinaTableTemplate, imageBlock],
     },
     {
       type: "object",

tina/collections/home.tsx

@@ -1,3 +1,4 @@
+import { imageBlock } from "../utils/templates";
 import {
   defaultFields,
   onDefaultPagesBeforeSubmit,
@@ -45,7 +46,7 @@ const home: Collection = {
       required: true,
       // description:
       //   "Ne pas utiliser le niveau 1 (#) pour vos titres, il est réservé au titre de la page (champs `Title`).",
-      templates: [templateCTAWithIcon, tinaTableTemplate],
+      templates: [templateCTAWithIcon, tinaTableTemplate, imageBlock],
     },
   ],
 };

tina/collections/mentionsLegales.tsx

@@ -1,3 +1,4 @@
+import { imageBlock } from "../utils/templates";
 import {
   defaultFields,
   onDefaultPagesBeforeSubmit,
@@ -46,7 +47,7 @@ const mentionsLegales: Collection = {
       required: true,
       // description:
       //   "Ne pas utiliser le niveau 1 (#) pour vos titres, il est réservé au titre de la page (champs `Title`).",
-      templates: [templateCTAWithIcon, tinaTableTemplate],
+      templates: [templateCTAWithIcon, tinaTableTemplate, imageBlock],
     },
   ],
 };