app/pages/certifications/dwwm/at1/cp3/+Page.mdx

@@ -20,6 +20,10 @@ tags:
   ]
 ---
 
+import QuickLinks from "@/components/QuickLinks";
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
 ## 📚 Références
 
 - REAC _(mise à jour du 02/07/2024)_, pages 19 et 20
@@ -30,9 +34,9 @@ tags:
 Pfiou, les maquettes sont terminées et tu as survécu à mes pavés d'explications ! 💪  
 Eh bien... c'est reparti pour un tour, car maintenant tu vas devoir réaliser les interfaces statiques web ou web mobile à partir de ces maquettes.
 
-{% callout type="question" title="Mais qu'est-ce qu'une interface statique ?" %}
+<Callout type="question" title="Mais qu'est-ce qu'une interface statique ?">
 Une interface statique, c'est une interface qui ne bouge pas, qui n'a pas d'interactions avec l'utilisateur autre que les différents liens qui peuvent être présents.
-{% /callout %}
+</Callout>
 
 Pour réaliser ces interfaces, tu vas devoir respecter les maquettes que tu as réalisées précédemment, tout en prenant en compte les besoins en éco-conception et en accessibilité. _(je radote, mais c'est important !)_
 
@@ -60,12 +64,12 @@ Dans la compétence précédente, je t'ai parlé de l'accessibilité et de l'imp
 
 Mais au delà de ces aspects, on va également pouvoir donner plus de précisions au navigateur sur le contenu de notre site, en utilisant des balises sémantiques ainsi que des attributs spécifiques : `alt` pour les images, `title` pour les liens, mais surtout `aria-*`.
 
-{% quick-link
+<QuickLinks.QuickLink
   title="Attributs ARIA (Accessible Rich Internet Applications)"
   href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA"
   icon="presets"
   description="> MDN Web Docs - Attributs ARIA"
-/%}
+/>
 
 ### 🌐 Le référencement naturel
 
@@ -93,24 +97,24 @@ Mais pas aucun contrôle !
 
 L'action la plus primordiale sur les images, c'est dans un premier temps d'utiliser des ressources compressées, mais aussi de les dimensionner correctement.
 
-{% callout type="note" title="En CSS, ça prend 2 secondes de redimensionner une image" %}
-Effectivement, il est possible de redimensionner les images en leur appliquant une largeur et une hauteur.  
-Mais l'image reste chargée en entier, même si elle n'est pas affichée dans sa totalité.  
-Ça voudrait donc dire imposer au navigateur de télécharger une image en haute résolution pour l'afficher en miniature : pas terrible.
+<Callout type="note" title="En CSS, ça prend 2 secondes de redimensionner une image">
+  Effectivement, il est possible de redimensionner les images en leur appliquant une largeur et une hauteur.  
+  Mais l'image reste chargée en entier, même si elle n'est pas affichée dans sa totalité.  
+  Ça voudrait donc dire imposer au navigateur de télécharger une image en haute résolution pour l'afficher en miniature : pas terrible.
 
-Pour éviter ça, on va dans un premier temps réduire et compresser l'image et on peut également utiliser l'attribut `srcset` qui permet de charger une image en fonction de la taille de l'écran.
-{% /callout %}
+  Pour éviter ça, on va dans un premier temps réduire et compresser l'image et on peut également utiliser l'attribut `srcset` qui permet de charger une image en fonction de la taille de l'écran.
+</Callout>
 
 Maintenant que nos images sont prêtes, il faut que je vous dise que ce n'est pas tout !  
 Il faut également penser au format de nos images. La plupart du temps, on croise des images en JPEG, PNG ou GIF, mais il existe un format plus récent et plus performant : le **WebP**.
 
-{% callout type="question" title="Et le format SVG ? Ce n'est pas bien ?" %}
-Si, si, le format SVG est très bien !
+<Callout type="question" title="Et le format SVG ? Ce n'est pas bien ?">
+  Si, si, le format SVG est très bien !
 
-C'est vrai que je ne l'évoque pas ici, mais le SVG est un format d'image vectorielle qui a l'avantage d'être léger et de s'adapter à toutes les tailles d'écran sans créer de flou ou pixélisation.
+  C'est vrai que je ne l'évoque pas ici, mais le SVG est un format d'image vectorielle qui a l'avantage d'être léger et de s'adapter à toutes les tailles d'écran sans créer de flou ou pixélisation.
 
-Il est particulièrement adapté pour les icônes, logos et autres éléments graphiques simples.
-{% /callout %}
+  Il est particulièrement adapté pour les icônes, logos et autres éléments graphiques simples.
+</Callout>
 
 Allez cette fois-ci, on ne touche plus aux images et leur format, par contre "comment peut-on les charger ?".  
 Celui qui répond "avec une simple balise `<img>` et son attribut `src`" a tout faux ! _(enfin non, pas tout faux, mais pas tout à fait juste)_
@@ -122,7 +126,7 @@ De cette manière, nos images ne seront chargées que si elles sont visibles à
 
 En finalité, ça ressemble à ça :
 
-{% snippet path="html/lazy-loading.html" language="html" /%}
+<tabs.htmlLazyLoading />
 
 Allez, arrêtons-nous là pour l'éco-conception !
 
@@ -151,20 +155,16 @@ Tu peux totalement utiliser des services "gratuits", comme Netlify ou Vercel, ma
 
 Enfin, n'oublie pas de sécuriser ton site, en utilisant un certificat SSL par exemple.
 
-{% callout type="question" title="Un certificat quoi ? 🤔" %}
+<Callout type="question" title="Un certificat quoi ? 🤔">
 Un certificat SSL est un fichier de données qui sécurise les échanges de données entre un serveur et un navigateur en cryptant les données transmises. Il garantit que les données sont sécurisées et ne peuvent pas être interceptées.
 
 Tu peux en générer un gratuitement avec [Let's Encrypt](https://letsencrypt.org/), mais il faudra le renouveler tous les 3 mois.
-{% /callout %}
+</Callout>
 
 Si tu as la main sur la configuration du serveur, tu pourras également mettre en place des règles de sécurité, comme le CSP _(Content Security Policy)_, qui permet de limiter les risques de failles XSS _(Cross-Site Scripting)_.
 
 Tu peux également activer la compression Gzip pour réduire la taille des fichiers envoyés au navigateur afin d'accélérer le chargement du site et de répondre davantage aux critères d'éco-conception.
 
-## 🛠️ Ressources conseillées
-
-_En cours de rédaction..._
-
 ## 🎯 Critères d'évaluation
 
 - L'interface est conforme à la maquette et les besoins en éco-conception sont pris en compte
@@ -186,7 +186,7 @@ Prenons un exemple concret, le cas d'une application qui tourne sur le port 3000
 
 Avec Nginx, on peut faire ça très simplement en créant un fichier de configuration dans `/etc/nginx/sites-available/`.
 
-{% snippet path="nginx/reverse-proxy.conf" language="nginx" showLineNumbers=true /%}
+<tabs.nginxReverseProxy />
 
 ... Tadaaa ! C'est tout !  
 Bien entendu, il va falloir activer ce site avec un lien symbolique dans `/etc/nginx/sites-enabled/` et redémarrer Nginx pour que les changements soient pris en compte.  

app/pages/certifications/dwwm/at1/cp3/tabs.tsx

@@ -0,0 +1,39 @@
+import { Snippet } from "@/components/Snippet";
+
+const htmlLazyLoadingSnippets = [
+	{
+		name: "Lazy loading d'une image en HTML",
+		codeLanguage: "html",
+		code: `<img
+  src="clairiere.jpg"
+  srcset="clairiere-480w.webp 480w, clairiere-800w.webp 800w"
+  sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 800px"
+  alt="Une clairière verdoyante"
+  loading="lazy"
+/>`,
+	},
+];
+
+const nginxReverseProxySnippets = [
+	{
+		name: "Configuration d'un reverse proxy Nginx",
+		codeLanguage: "nginx",
+		withLineNumbers: true,
+		code: `server {
+    listen 80;
+    listen [::]:80;
+    server_name monsite.fr;
+
+    location / {
+        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for ; # On transmet l'adresse IP du client
+        proxy_set_header    Host $host; # On transmet le nom de domaine
+        proxy_pass          http://localhost:3000; # On redirige les requêtes vers le port 3000, où tourne notre application
+    }
+}`,
+	},
+];
+
+export default {
+	htmlLazyLoading: () => <Snippet snippets={htmlLazyLoadingSnippets} />,
+	nginxReverseProxy: () => <Snippet snippets={nginxReverseProxySnippets} />,
+};