From 82258addeb8115d68339a1d972adccd870520934 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Sun, 13 Apr 2025 20:52:57 +0200
Subject: [PATCH] feat: Add Iframe component for rendering embedded content

---
 app/components/common/Iframe.tsx             |  19 ++
 app/data/certifications/dwwm/at1/cp1/page.md |   8 +-
 app/data/certifications/dwwm/at1/cp2/page.md | 106 ++++++++++
 app/data/certifications/dwwm/at1/cp3/page.md | 195 +++++++++++++++++++
 app/data/snippets/html/lazy-loading.html     |   7 +
 app/data/snippets/nginx/reverse-proxy.conf   |  11 ++
 app/markdoc/tags.tsx                         |  11 ++
 app/vite.config.ts                           |   2 +-
 8 files changed, 354 insertions(+), 5 deletions(-)
 create mode 100644 app/components/common/Iframe.tsx
 create mode 100644 app/data/certifications/dwwm/at1/cp2/page.md
 create mode 100644 app/data/certifications/dwwm/at1/cp3/page.md
 create mode 100644 app/data/snippets/html/lazy-loading.html
 create mode 100644 app/data/snippets/nginx/reverse-proxy.conf

diff --git a/app/components/common/Iframe.tsx b/app/components/common/Iframe.tsx
new file mode 100644
index 0000000..7a6de69
--- /dev/null
+++ b/app/components/common/Iframe.tsx
@@ -0,0 +1,19 @@
+import clsx from "clsx";
+
+type IframeProps = {
+  src: string;
+  width?: string;
+  height?: string;
+  className?: string;
+};
+
+export function Iframe(props: IframeProps) {
+  return (
+    <iframe
+      src={props.src}
+      className={clsx("max-w-full pointer-events-none", props.className)}
+      width={props.width}
+      height={props.height}
+    />
+  );
+}
diff --git a/app/data/certifications/dwwm/at1/cp1/page.md b/app/data/certifications/dwwm/at1/cp1/page.md
index 1e62196..6861f52 100644
--- a/app/data/certifications/dwwm/at1/cp1/page.md
+++ b/app/data/certifications/dwwm/at1/cp1/page.md
@@ -40,7 +40,7 @@ Toutefois, il est préférable que tu saches expliquer comment installer et conf
 
 {% /callout %}
 
-### ➕ Informations complémentaires
+## ➕ Informations complémentaires
 
 {% callout type="warning" title="Versions des outils et dépendances" %}
 
@@ -50,11 +50,11 @@ Même si le choix des outils que tu utilises est libre, il est important de pré
 
 {% /callout %}
 
-### 🛠️ Ressources conseillées
+## 🛠️ Ressources conseillées
 
-TODO
+_En cours de rédaction..._
 
-### 🎯 Critères d'évaluation
+## 🎯 Critères d'évaluation
 
 - Les outils de développement nécessaires sont installés et configurés
 - Les outils de gestion de versions et de collaboration sont installés
diff --git a/app/data/certifications/dwwm/at1/cp2/page.md b/app/data/certifications/dwwm/at1/cp2/page.md
new file mode 100644
index 0000000..5ece525
--- /dev/null
+++ b/app/data/certifications/dwwm/at1/cp2/page.md
@@ -0,0 +1,106 @@
+---
+title: DWWM CP 2 - Maquetter des interfaces utilisateur web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 2 du titre professionnel DWWM (01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 17 et 18
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Pour cette compétence, tu vas devoir réaliser des maquettes d'interfaces utilisateur.  
+Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bien de maquettes numériques.
+
+{% iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" className="mx-auto" /%}
+
+... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
+
+1. **Analyse des besoins** : comprendre les besoins du client et de l'utilisateur final
+2. **Création d'une arborescence** : définir la structure de l'application et les différentes pages
+3. **Conception des zonings** : créer des schémas sans détails pour définir la disposition des éléments sur chaque page
+4. **Réalisation des wireframes** : créer des maquettes plus détaillées avec des légendes et commentaires pour les interactions
+5. **Récupération ou création de la charte graphique** : définir les couleurs, polices et styles à utiliser dans l'application
+6. **Création de maquettes graphiques** : réaliser des maquettes graphiques en respectant la charte graphique et les wireframes
+7. **Mise en place du prototypage** : créer un prototype interactif pour tester l'application avant le développement
+
+{% callout type="question" title="Mais je ne suis pas webdesigner ! 😱" %}
+
+Pas de panique !
+
+Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.  
+Évidemment, si tu as des compétences en design, c'est un plus car en général les développeurs ne sont pas tous réputés pour être de bons designers... 😅
+
+Ce qu'on attend de toi, c'est de respecter les consignes du cahier des charges tout en répondant au besoin du client et en faisant attention à l'**expérience utilisateur** et l'**accessibilité**.
+
+Si par ailleurs tu cherches un outil gratuit pour réaliser des maquettes, tu peux te tourner vers [Figma](https://www.figma.com/fr-fr/) qui permet non seulement de créer des **maquettes** et **prototypes**, mais aussi de **collaborer** avec d'autres personnes sur un même projet.
+
+{% /callout %}
+
+## ➕ Informations complémentaires
+
+Il est probable que ton client t'impose une charte graphique à respecter et que cette dernière ne soit pas forcément accessible, ergonomique ou éco-conçue.  
+C'est à toi en tant que développeur d'expliquer à ton client les enjeux que ça représente pour son site web.
+
+Il aura dans tous les cas le dernier mot, mais il est important de l'informer des conséquences de ses choix pour son site.  
+S'il ne veut pas améliorer prendre en compte ces informations, tu pourras toujours lui proposer de le faire évoluer par la suite, une fois le site en ligne _(mais attention, cela peut coûter cher pour rattraper les différents défauts)_.
+
+### 🔍 Accessibilité
+
+D'après toi, qu'est-ce que l'accessibilité en matière de développement web ?
+
+Si tu as répondu que c'est le fait de rendre un site accessible à tous, tu as tout bon !
+L'accessibilité est un point essentiel à prendre en compte lors de la réalisation de maquettes, car tout le monde doit pouvoir accéder à un site web, y compris les personnes en situation de handicap.
+
+Pour améliorer l'accessibilité de ton site, il est recommandé de suivre les recommandations du W3C à propos du WCAG et du RGAA, mais je ne te cache pas c'est un gros morceau et qu'on se perdre en voulant tout respecter à la lettre. Alors voici un condensé des points les plus importants à respecter dans un premier temps :
+
+- **Contraste** : Assure-toi que le texte est lisible sur n'importe quel fond. Il faut viser un score **AA** _(ratio 4.5:1)_ au minimum et idéalement **AAA** _(ratio 7:1)_ sur nos éléments textuels et pour l'iconographie.
+- **Taille de police** : La taille de police doit être suffisamment grande pour être lisible par tout le monde. En général, on recommande une taille de 16px minimum.
+- **Choix de la police** : Utilise des polices lisibles et évite les polices fantaisistes. Si tu cherches une police légère, gratuite et réputée pour être lisible, tu peux te tourner vers la police Luciole !
+- **Intitulés des liens et boutons** : Les liens et boutons doivent être clairs et explicites. Évite les "Cliquez ici" et préfère des phrases plus descriptives. Évite également d'uniquer mettre un pictogramme pour un lien, car cela peut ne pas être compris par tout le monde.
+
+Bien entendu, l'accessibilité ne se limite pas à ces points, mais c'est un bon début pour rendre ton site accessible à tous. J'y reviendrai plus en détail dans la compétence suivante, puisqu'on parlera de l'intégration de ces maquettes 😉
+
+Et pour terminer ! _(oui, je sais, je parle beaucoup 😅)_  
+L'**éco-conception** !
+
+### 🌍 L'éco-conception
+
+L'éco-conception, c'est l'art de concevoir un produit ou un service en prenant en compte son impact environnemental tout au long de son cycle de vie.  
+Dans le cas d'un site web, cela signifie qu'on va réfléchir à la manière de réduire l'impact environnemental de notre site tout en respectant les besoins du client et de l'utilisateur final.
+
+On évitera par exemple d'intégrer beaucoup d'images et autres médias.  
+De manière générale : moins il y a de requêtes, moins il y a de données à charger, et donc moins d'énergie consommée.
+
+Même si dans l'ensemble on serait en droit de crier "greenwashing" _(et on aurait pas tort)_, il est important de prendre en compte l'impact environnemental de nos sites web.  
+Au delà de l'impact environnemental, un site éco-conçu est souvent plus rapide et plus léger, ce qui permet aux sites et applications d'être plus performants tant en termes de vitesse que de consommation de données.
+
+Tu l'auras compris, que tu sois éco-convaincu ou non, c'est un point qui est en faveur de l'expérience utilisateur ! 🚀
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- Les maquettes sont réalisées conformément au dossier de conception, en langue française ou anglaise _(niveau B1 du CECRL pour l'anglais)_
+- La charte graphique de l'entreprise est respectée
+- Les exigences de sécurisation sont respectées
+- Les maquettes tiennent compte de l'expérience utilisateur, y compris pour les personnes en situation de handicap et du type d'utilisation, y compris pour les équipements mobiles
+- L'enchainement des maquettes est formalisé par un schéma
+- La législation en vigueur est respectée, y compris celle relative à l'accessibilité
+
+## 🤯 Aller plus loin _(hors référentiel)_
+
+Tu trouves que je n'ai pas assez parlé dans cette compétence ? Alors je vais te donner quelques pistes pour aller plus loin !
+
+Je vais parler un peu plus en détail de l'éco-conception, tant il s'agit d'un sujet important, relativement récent et souvent négligé _(ou incompris)_.  
+Le premier réflexe que l'on pourrait avoir en entendu ce terme, c'est crier au greenwashing et penser qu'on attend de nous de revenir dans les années 90 avec des sites tout moches et tout plats.
+
+Alors... Greenwashing ? Tout dépend de qui en parle et avec quels arguments, mais la cause elle-même est noble et mérite d'être prise en compte.  
+Pour le côté "site tout moche", c'est effectivement une possibilité, mais uniquement si c'est un développeur PHP ou Java qui s'en occupe 😘.
+
+Faire une galerie photo avec des images en pleine résolution, c'est bien, mais c'est lourd à charger. Et pourtant, on peut quand même rendre le site d'un photographe beau et éco-conçu, tout en préservant la qualité de son travail !  
+Ça peut sembler contre-intuitif, mais tout va se jouer dans le code où l'on pourra charger **uniquement au besoin** et à la **demande de l'utilisateur** les images dans notre page.
diff --git a/app/data/certifications/dwwm/at1/cp3/page.md b/app/data/certifications/dwwm/at1/cp3/page.md
new file mode 100644
index 0000000..d01a183
--- /dev/null
+++ b/app/data/certifications/dwwm/at1/cp3/page.md
@@ -0,0 +1,195 @@
+---
+title: DWWM CP 3 - Réaliser des interfaces utilisateur statiques web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 3 du titre professionnel DWWM (01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 19 et 20
+- RE _(mise à jour du 02/07/2024)_, page 10
+
+## 📋 En résumé
+
+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 ?" %}
+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 %}
+
+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 !)_
+
+On va rentrer directement dans le vif du sujet, avec pour commencer... les technologies à utiliser !  
+Puisqu'on ne parle pas de dynamique mais de statique, tu vas devoir te tourner vers des technologies front-end, comme le **HTML** et le **CSS**. Le JavaScript sera également de la partie, mais qu'à partir de la CP 4 😉
+
+Dans un premier temps, tu vas devoir parler du squelette de ton site, c'est-à-dire de la structure HTML. On retrouvera par ailleurs des notions essentielles comme :
+
+- Les balises sémantiques _(pour une meilleure accessibilité et un meilleur référencement)_
+- Les médias _(images, vidéos, sons, etc.)_
+- Les liens _(pour naviguer d'une page à une autre)_
+
+Ensuite, tu vas devoir t'occuper de la mise en forme de ton site, c'est-à-dire du CSS.  
+N'oublie pas : le site doit correspondre aux maquettes que tu as réalisées, et donc respecter la charte graphique.
+
+Ensuite, tu vas devoir t'assurer que ton site est bien accessible à tous, rendre tes pages web responsives _(c'est-à-dire qu'elles s'adaptent à tous les types d'écrans)_ et enfin, publier ton site de manière sécurisée.
+
+La partie éco-conception sera également à prendre en compte, en veillant à ne pas surcharger ton site en médias inutiles ou trop lourds.
+
+## ➕ Informations complémentaires
+
+### 🔍 Accessibilité
+
+Dans la compétence précédente, je t'ai parlé de l'accessibilité et de l'importance de rendre un site accessible à tous. On a notamment vu qu'il est important de maîtriser le contraste, la taille de police, le choix de la police et les intitulés des liens et boutons.
+
+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
+  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
+
+J'entends déjà l'un de mes collègues juré s'impatienter : "Et le référencement, on en parle ?"  
+La réponse : bien sûr que ~~non~~ **oui** !
+
+Le référencement naturel, ou SEO _(pour Search Engine Optimization)_, est un ensemble de techniques visant à améliorer la visibilité d'un site web dans les moteurs de recherche.  
+On parlera dans un premier temps de l'optimisation du contenu, avec des balises `<title>`, `<meta>`, `<h1>`, `<h2>`, etc., mais aussi de l'optimisation technique, avec la vitesse de chargement, la compatibilité mobile, les balises sémantiques, etc.
+
+On retrouvera également des notions de netlinking _(liens entrants et sortants)_, de maillage interne, de balises `<a>` et `<img>`, de sitemap, de `robots.txt`, etc.
+
+Ça fait beaucoup, non ? 😅  
+Disons que c'est un vaste sujet et qui, même s'il ne fait pas toujours rêver, est indispensable pour que ton site soit visible sur les moteurs de recherche.
+
+Difficile de dire au client "Désolé, votre site n'apparaît pas sur Google et je m'en fiche" !
+
+### 🌳 L'éco-conception
+
+On sait déjà ce que l'éco-conception.  
+Puisque l'une des principales préoccupations de l'éco-conception est de réduire son impact environnemental, on va éviter d'intégrer beaucoup d'images et autres médias.  
+Mais est-ce que ça veut pour autant dire que tu dois te contenter de sites tout moches et tout gris ? Non !
+
+En HTML, au delà de l'import des médias, on ne va pas avoir beaucoup de contrôle sur la consommation énergétique.  
+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.
+
+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 !
+
+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 %}
+
+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)_
+
+On va évidemment utiliser une balise `<img>`, mais on va également utiliser des techniques de chargement différé, comme le lazy loading, qui permet de charger les images uniquement lorsqu'elles sont visibles à l'écran.
+
+En tant que juré, j'ai souvent vu des projets qui exploitent un script JS pour faire du lazy loading, mais il existe un attribut HTML qui permet de faire ça très simplement : `loading="lazy"`.  
+De cette manière, nos images ne seront chargées que si elles sont visibles à l'écran, ce qui permet de réduire la consommation de bande passante et par conséquent l'impact environnemental.
+
+En finalité, ça ressemble à ça :
+
+{% snippet path="html/lazy-loading.html" language="html" /%}
+
+Allez, arrêtons-nous là pour l'éco-conception !
+
+### 📱 Le responsive design
+
+Maintenant que notre site est éco-conçu, accessible et optimisé pour le référencement, il est temps de s'attaquer à la partie responsive design. Tu connais certainement déjà le principe, mais pour les autres, le responsive design c'est le fait de rendre un site web adaptatif et lisible sur tous les types d'écrans, que ce soit un ordinateur, une tablette ou un smartphone.
+
+Pour cela, nous avons plusieurs possibilités :
+
+- Les media queries _(pour adapter le style en fonction de la taille de l'écran et du type de support)_
+- Les unités relatives _(pour adapter la taille des éléments en fonction de la taille de la police ou d'un élément parent)_
+  - `em` : unité relative à la taille de la police de l'élément parent
+  - `rem` : unité relative à la taille de la police de l'élément racine
+  - `%` : unité relative à la taille de l'élément parent
+  - `vw`/`vh` : unité relative à la largeur de la fenêtre _(ainsi que les variantes `lvh`/`lvw`, `svh`/`svw` et `dvh`/`dvw`)_
+- Les grid et flexbox _(pour organiser les éléments de manière flexible et adaptative)_
+
+Il est également possible d'utiliser des frameworks CSS, comme Tailwind CSS ou Bootstrap, qui proposent des composants et des classes prédéfinies pour faciliter la mise en place du responsive design.
+
+### 🔒 Déploiement et sécurité
+
+Dernière étape avant de pouvoir souffler un peu : le déploiement de ton site.
+
+Pour déployer ton site, tu vas devoir choisir un hébergeur, un nom de domaine, configurer un serveur, transférer tes fichiers, etc.  
+Tu peux totalement utiliser des services "gratuits", comme Netlify ou Vercel, mais assure-toi que le service que tu choisis respecte les normes de sécurité, les normes de respect sur les données personnelles, mais surtout que tu sois en mesure de déployer ton site sans ces outils !
+
+Enfin, n'oublie pas de sécuriser ton site, en utilisant un certificat SSL par exemple.
+
+{% 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 %}
+
+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
+- L'interface tient compte de l'expérience utilisateur, y compris pour les personnes en situation de handicap
+- L'interface respecte les recommandations de sécurité liées aux applications web ou web mobile
+- L'interface s'adapte au type d'utilisation de l'application, et notamment à la taille, au type et à la disposition du support, y compris pour les équipements mobiles
+- La règlementation en vigueur est respectée, y compris celle relative à l'accessibilité
+- Le site est publié de manière sécurisée
+- Le site est visible sur les moteurs de recherche et le référencement dépend du public
+
+## 🤯 Aller plus loin
+
+Tu utilises un site qui tourne sur un port spécifique, mais tu aimerais bien que ton site soit accessible sur les ports 80 _(HTTP)_ et 443 _(HTTPS)_ ?  
+Pour ça il y a une merveilleuse technologie qui s'appelle le reverse proxy !
+
+Le reverse proxy, c'est un serveur qui va recevoir les requêtes HTTP et les rediriger vers le serveur qui héberge le site. Tu peux très bien faire la redirection sur le même serveur, c'est d'ailleurs ce qu'on va faire ici.
+
+Prenons un exemple concret, le cas d'une application qui tourne sur le port 3000, mais que l'on souhaite rendre accessible sur le port 80.
+
+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 /%}
+
+... 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.  
+Si tu souhaites également rajouter le support du HTTPS, tu peux utiliser [Certbot](https://certbot.eff.org/) pour générer un certificat gratuit avec Let's Encrypt.
+
+## 🧠 Documentations
+
+- [Wikipédia - Accessibilité web](https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)
+- [Wikipédia - Référencement naturel](https://fr.wikipedia.org/wiki/R%C3%A9f%C3%A9rencement_naturel)
+- [Wikipédia - Éco-conception numérique](https://fr.wikipedia.org/wiki/%C3%89coconception)
+- [MDN - Accessible Rich Internet Applications _(ARIA)_](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
+
+## 🛠️ Outils
+
+- [Let's Encrypt](https://letsencrypt.org/)
+- [Certbot](https://certbot.eff.org/)
+- [WebAim Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Contrast Checker](https://contrastchecker.com/)
+- [Coolors - Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Bulma](https://bulma.io/)
+- [Bootstrap](https://getbootstrap.com/)
diff --git a/app/data/snippets/html/lazy-loading.html b/app/data/snippets/html/lazy-loading.html
new file mode 100644
index 0000000..217cc31
--- /dev/null
+++ b/app/data/snippets/html/lazy-loading.html
@@ -0,0 +1,7 @@
+<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"
+/>
diff --git a/app/data/snippets/nginx/reverse-proxy.conf b/app/data/snippets/nginx/reverse-proxy.conf
new file mode 100644
index 0000000..3785380
--- /dev/null
+++ b/app/data/snippets/nginx/reverse-proxy.conf
@@ -0,0 +1,11 @@
+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
+    }
+}
\ No newline at end of file
diff --git a/app/markdoc/tags.tsx b/app/markdoc/tags.tsx
index 765cc51..3c63747 100644
--- a/app/markdoc/tags.tsx
+++ b/app/markdoc/tags.tsx
@@ -6,6 +6,7 @@ import { Callout } from "@syntax/Callout";
 // import { Tag } from "./Tag";
 import React from "react";
 import { Snippet } from "@/components/syntax/Snippet";
+import { Iframe } from "@/components/common/Iframe";
 // import path from "path";
 
 // const __dirname = path.resolve();
@@ -89,6 +90,16 @@ const tags = {
       },
     },
   },
+  iframe: {
+    render: Iframe,
+    attributes: {
+      src: { type: String },
+      width: { type: String },
+      height: { type: String },
+      className: { type: String },
+    },
+    selfClosing: true,
+  },
 };
 
 export default tags;
diff --git a/app/vite.config.ts b/app/vite.config.ts
index f57de65..46b0c07 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -9,7 +9,7 @@ import vike from "vike/plugin";
 export default defineConfig({
   plugins: [
     prismjsVitePlugin({
-      languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash"],
+      languages: ["javascript", "typescript", "tsx", "jsx", "css", "html", "bash", "nginx"],
     }),
     Unfonts({
       fontsource: {