Compare commits
2 Commits
2983432be2
...
d98d68465d
| Author | SHA1 | Date | |
|---|---|---|---|
| d98d68465d | |||
| 6e4540af61 |
@ -2,7 +2,7 @@ import type { JSX } from "solid-js";
|
||||
|
||||
type ImageProps = JSX.IntrinsicElements["img"] & { src: string; alt: string };
|
||||
|
||||
export function Image(props: ImageProps) {
|
||||
export default function Image(props: ImageProps) {
|
||||
const isDecorationImage = props.alt === "";
|
||||
|
||||
return (
|
||||
|
||||
@ -5,7 +5,7 @@ tags: [DWWM, Éco-conception, Accessibilité, SEO, Maquettage, UX, UI, Zoning, W
|
||||
---
|
||||
|
||||
import Callout from "@/components/Callout";
|
||||
import Iframe from "@/components/Iframe";
|
||||
import Image from "@/components/Image";
|
||||
|
||||
## 📚 Références
|
||||
|
||||
@ -17,7 +17,7 @@ import Iframe from "@/components/Iframe";
|
||||
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" class="mx-auto rounded-md" />
|
||||
<Image src="https://i.giphy.com/28n0C19zo9OOvHnYww.webp" width="480" height="269" class="mx-auto rounded-md" />
|
||||
|
||||
... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
|
||||
|
||||
|
||||
@ -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" %}
|
||||
<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 %}
|
||||
</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 ?" %}
|
||||
<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 %}
|
||||
</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.
|
||||
39
app/pages/certifications/dwwm/at1/cp3/tabs.tsx
Normal file
39
app/pages/certifications/dwwm/at1/cp3/tabs.tsx
Normal file
@ -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} />,
|
||||
};
|
||||
@ -4,6 +4,10 @@ description: Synthèse et explications des attentes relatives à la compétence
|
||||
tags: [DWWM]
|
||||
---
|
||||
|
||||
import Callout from "@/components/Callout";
|
||||
import Image from "@/components/Image";
|
||||
import tabs from "./tabs";
|
||||
|
||||
## 📚 Références
|
||||
|
||||
- REAC _(mise à jour du 02/07/2024)_, pages 21 et 22
|
||||
@ -13,7 +17,7 @@ tags: [DWWM]
|
||||
|
||||
Ça y est, on commence à parler développement pour de vrai maintenant ! On quitte doucement l'intégration pour maintenant rajouter de l'interactivité à nos interfaces utilisateur, ce qui veut dire "utilisation d'un langage script côté client", soit...
|
||||
|
||||
{% iframe src="https://giphy.com/embed/SvFocn0wNMx0iv2rYz" width="480" height="480" className="mx-auto" /%}
|
||||
<Image src="https://i.giphy.com/SvFocn0wNMx0iv2rYz.webp" width="480" height="480" class="mx-auto rounded-md" />
|
||||
|
||||
C'est le meilleur moment pour parler de nombreuses fonctionnalités implémentées sur ton application avec JavaScript, comme :
|
||||
|
||||
@ -22,13 +26,13 @@ C'est le meilleur moment pour parler de nombreuses fonctionnalités implémenté
|
||||
- Les interactions avec l'utilisateur _(drag and drop, ouverture de fenêtre modale, etc.)_
|
||||
- Les appels à des services web _(API REST, etc.)_
|
||||
|
||||
{% callout type="note" title="Consommation d'API" %}
|
||||
<Callout type="note" title="Consommation d'API">
|
||||
Bien que j'ai mentionné le fait que faire des appels à des services web corresponde entièrement à cette CP, il est important de noter que la consommation d'API est une compétence à part entière, qui sera abordée dans la CP 7 qui correspond à la mise en place de services web et composants métier.
|
||||
|
||||
Ne te focalise donc pas sur ce que fait l'API en arrière plan, concentre toi sur comment configurer tes requêtes et comment traiter les réponses obtenues !
|
||||
{% /callout %}
|
||||
</Callout>
|
||||
|
||||
{% callout type="question" title="Mon site est fait avec React/Angular/Vue.js, donc je valide automatiquement cette CP ?" %}
|
||||
<Callout type="question" title="Mon site est fait avec React/Angular/Vue.js, donc je valide automatiquement cette CP ?">
|
||||
Pas si vite ! 😏
|
||||
Effectivement, ton site répond _(en théorie)_ en tous points pour la compétence actuelle, mais il est important de montrer que tu sais comment fonctionne le JavaScript "vanilla" _(c'est-à-dire sans framework ou bibliothèque)_.
|
||||
|
||||
@ -36,7 +40,7 @@ Si tu as utilisé un framework, tu peux tout à fait montrer des extraits de cod
|
||||
|
||||
Mais on ne va pas se le cacher, si tu as réussi à réaliser un projet avec un framework, c'est déjà un très bon point pour toi qui permet de démontrer que tu as de bonnes connaissances en JavaScript.
|
||||
Cependant il va potentiellement y avoir un défaut majeur sur ton projet : le référencement naturel _(SEO)_.
|
||||
{% /callout %}
|
||||
</Callout>
|
||||
|
||||
## ➕ Informations complémentaires
|
||||
|
||||
@ -58,7 +62,7 @@ Tu as aussi la possibilité d'utiliser [Next.js](https://nextjs.org/) pour React
|
||||
Je me permets également de lâcher une bombe sur une certaine techno JS : **jQuery**.
|
||||
Bon sang, celui-là il me fait penser à un vieux pote qui a pris un coup de vieux... 😅
|
||||
|
||||
{% callout type="question" title="jQuery, c'est quoi ?" %}
|
||||
<Callout type="question" title="jQuery, c'est quoi ?">
|
||||
jQuery est une bibliothèque JavaScript qui a été très populaire dans les années 2000 et 2010.
|
||||
Elle a été créée pour simplifier l'écriture de scripts JavaScript et pour faciliter la manipulation du DOM.
|
||||
|
||||
@ -66,15 +70,14 @@ jQuery a été très utilisée pour les animations, les requêtes AJAX, la manip
|
||||
Mais depuis l'arrivée des frameworks front-end comme React, Angular ou Vue.js, jQuery a perdu de sa superbe et est de moins en moins utilisée.
|
||||
|
||||
Cependant, il est toujours bon de connaître jQuery, car il est possible que tu tombes sur un projet qui l'utilise encore, comme sur des templates Wordpress qui commencent à dater par exemple.
|
||||
{% /callout %}
|
||||
</Callout>
|
||||
|
||||
Mais alors, pourquoi je te parle de jQuery ?
|
||||
|
||||
Eh bien.. pour faire simple, aujourd'hui jQuery est relativement obsolète et surtout très lourd pour ce que ça rajoute à un projet.
|
||||
Dans la mesure du possible, il est recommandé de ne pas utiliser jQuery pour un nouveau projet, et de préférer JavaScript "vanilla" ou un framework ou bibliothèque front-end comme React, Angular ou Vue.js _(attention, d'un point de vue éco-conception l'utilisation d'un framework n'est pas forcément la meilleure solution)_.
|
||||
|
||||
{% callout type="question" title="Mais comment je vais faire pour mes consommations d'API, vu que j'utilisais `jQuery.ajax()` ?!" %}
|
||||
|
||||
<Callout type="question" title="Mais comment je vais faire pour mes consommations d'API, vu que j'utilisais `jQuery.ajax()` ?!">
|
||||
Tout doux, tout doux, il existe une solution ! 😎
|
||||
|
||||
Si je te parle des requêtes XHR _(XMLHttpRequest)_ tu me dis... ?
|
||||
@ -90,27 +93,10 @@ Et tu as raison, mais si maintenant je te dis qu'il y a une autre solution, nati
|
||||
Fetch est une API plus moderne et plus simple à utiliser que les requêtes XHR, et elle est supportée par tous les navigateurs modernes.
|
||||
Elle permet de faire des requêtes HTTP de manière asynchrone et de gérer les réponses de manière plus simple.
|
||||
|
||||
{% tabs defaultSelectedTab="xhr" %}
|
||||
{% tab value="xhr" label="🥉 XHR" %}
|
||||
{% snippet path="js/xhr/xhr.js" language="js" showLineNumbers=true /%}
|
||||
{% /tab %}
|
||||
|
||||
{% tab value="jquery" label="🥈 jQuery" %}
|
||||
{% snippet path="js/xhr/jquery-ajax.js" language="js" showLineNumbers=true /%}
|
||||
{% /tab %}
|
||||
|
||||
{% tab value="fetch" label="🥇🏆 Fetch" %}
|
||||
{% snippet path="js/xhr/fetch.js" language="js" showLineNumbers=true /%}
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
<tabs.xhrRequest />
|
||||
|
||||
Non seulement `fetch` est plus simple à utiliser et comprendre _(contrairement à XMLHttpRequest)_ mais elle est également plus légère que `jQuery.ajax()` puisqu'elle est native au navigateur ! Alors pourquoi s'en priver ? 😉
|
||||
|
||||
{% /callout %}
|
||||
|
||||
## 🛠️ Ressources conseillées
|
||||
|
||||
_En cours de rédaction..._
|
||||
</Callout>
|
||||
|
||||
## 🎯 Critères d'évaluation
|
||||
|
||||
@ -143,28 +129,18 @@ Maintenant, on sait qu'on peut charger de manière "asynchrone" nos images et no
|
||||
Prenons l'exemple d'un site qui incorpore plusieurs dizaines de vidéos Youtube sur une seule page. On aura donc des `<iframe>` qui vont charger des vidéos Youtube, et ça, c'est pas très éco-responsable... 😕
|
||||
Mais on peut améliorer notre page en mettant en place une légère interaction JavaScript pour charger l'iframe uniquement si l'utilisateur clique sur un bouton !
|
||||
|
||||
{% callout type="note" title="Chargement d'un iframe Youtube uniquement au clic de l'utilisateur" %}
|
||||
<Callout type="note" title="Chargement d'un iframe Youtube uniquement au clic de l'utilisateur">
|
||||
<tabs.deferIframe />
|
||||
</Callout>
|
||||
|
||||
{% tabs defaultSelectedTab="html" %}
|
||||
{% tab value="html" label="HTML - 1ère étape" %}
|
||||
{% snippet path="html/defer-iframe.html" language="html" showLineNumbers=true /%}
|
||||
{% /tab %}
|
||||
|
||||
{% tab value="js" label="JavaScript - 2ème étape" %}
|
||||
{% snippet path="js/defer-iframe.ts" language="ts" showLineNumbers=true /%}
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
|
||||
{% /callout %}
|
||||
|
||||
{% callout type="question" title="Mais ça fait beaucoup de code juste pour charger des iframes, c'est vraiment nécessaire ?" %}
|
||||
<Callout type="question" title="Mais ça fait beaucoup de code juste pour charger des iframes, c'est vraiment nécessaire ?">
|
||||
Pour être franc, il n'y a pas de solution idéale. Mais on peut améliorer les performances du site et gagner en sobriété numérique en ne chargeant pas des ressources lourdes inutilement.
|
||||
|
||||
Est-ce que tu savais que le simple fait de charger un iframe d'une vidéo Youtube demande au navigateur de faire une dizaine de requêtes HTTP pour charger la vidéo, les scripts et les styles de Youtube ? Imagine si on mixe plusieurs sources pour nos iframes, comme Dailymotion, Vimeo, etc. 😱
|
||||
|
||||
Et le pire dans tout ça, c'est que le navigateur va charger ces ressources même si l'utilisateur ne comptait pas regarder la vidéo !
|
||||
Alors autant faire en sorte que notre site réponde au besoin de l'utilisateur, sans pour autant supprimer les fonctionnalités _(comme nos iframes)_ qui peuvent être utiles.
|
||||
{% /callout %}
|
||||
</Callout>
|
||||
|
||||
## 🧠 Documentations
|
||||
|
||||
81
app/pages/certifications/dwwm/at1/cp4/tabs.tsx
Normal file
81
app/pages/certifications/dwwm/at1/cp4/tabs.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import { Snippet } from "@/components/Snippet";
|
||||
|
||||
const xhrRequestSnippets = [
|
||||
{
|
||||
name: "🥉 XHR",
|
||||
codeLanguage: "javascript",
|
||||
code: `const xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", "https://api.exemple.com/data", true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
console.log(JSON.parse(xhr.responseText));
|
||||
}
|
||||
};
|
||||
xhr.send();`,
|
||||
},
|
||||
{
|
||||
name: "🥈 jQuery",
|
||||
codeLanguage: "javascript",
|
||||
code: `$.ajax({
|
||||
url: "https://api.exemple.com/data",
|
||||
method: "GET",
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
},
|
||||
});`,
|
||||
},
|
||||
{
|
||||
name: "🥇 Fetch",
|
||||
codeLanguage: "javascript",
|
||||
code: `fetch("https://api.exemple.com/data")
|
||||
.then((response) => response.json())
|
||||
.then((data) => console.log(data));`,
|
||||
},
|
||||
];
|
||||
|
||||
const deferIframeSnippets = [
|
||||
{
|
||||
name: "HTML - 1ère étape",
|
||||
codeLanguage: "html",
|
||||
code: `<div
|
||||
class="iframe-container"
|
||||
data-src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
data-width="1280"
|
||||
data-height="720"
|
||||
>
|
||||
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" loading="lazy" />
|
||||
<button type="button" class="iframe-loader">Charger la vidéo</button>
|
||||
</div>`,
|
||||
},
|
||||
{
|
||||
name: "JavaScript - 2ème étape",
|
||||
codeLanguage: "javascript",
|
||||
code: `document.querySelectorAll('button.iframe-loader').forEach((button) => {
|
||||
// Pour chaque bouton qui doit charger un iframe, on écoute le clic dessus
|
||||
button.addEventListener('click', () => {
|
||||
// On récupère le container de l'iframe, qui dans notre exemple est la balise parente du bouton
|
||||
const container = button.closest('.iframe-container');
|
||||
|
||||
// Si le container n'existe pas, on arrête l'exécution de la fonction pour éviter un plantage
|
||||
if (!container) return;
|
||||
|
||||
const { src, width, height } = container.dataset;
|
||||
|
||||
// On prépare notre iframe avec les données stockées dans le container
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('src', src);
|
||||
iframe.setAttribute('width', width);
|
||||
iframe.setAttribute('height', height);
|
||||
|
||||
// On supprime le contenu du container pour y ajouter notre iframe
|
||||
container.innerHTML = '';
|
||||
container.appendChild(iframe);
|
||||
});
|
||||
});`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
xhrRequest: () => <Snippet snippets={xhrRequestSnippets} />,
|
||||
deferIframe: () => <Snippet snippets={deferIframeSnippets} />,
|
||||
};
|
||||
@ -5,7 +5,7 @@ import blurCyanImage from "@/images/blur-cyan.webp";
|
||||
import { HeroBackground } from "./HeroBackground";
|
||||
import { Snippet } from "@/components/Snippet";
|
||||
import { Button } from "@/components/Button";
|
||||
import { Image } from "@/components/Image";
|
||||
import Image from "@/components/Image";
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user