style: Update colors in prism.css for consistency

app/layouts/prism.css

@@ -8,7 +8,7 @@
 .dark .token.rule,
 .dark .token.pseudo-class,
 .dark .token.important {
-  color: #CB5FDE;
+  color: #cb5fde;
 }
 
 .dark .token.comment,
@@ -25,16 +25,16 @@
 .dark .token.attr-value,
 .dark .token.class,
 .dark .token.string {
-  color: #89CA6C;
+  color: #89ca6c;
 }
 
 .dark .token.property,
 .dark .token.tag {
-  color: #E3596F;
+  color: #e3596f;
 }
 
 .dark .token.function-variable {
-  color: #61AFEF;
+  color: #61afef;
 }
 
 /** Light mode */
@@ -42,13 +42,13 @@
 .token.attr-value,
 .token.class,
 .token.string {
-  color: #50A14F;
+  color: #50a14f;
 }
 
 .token.function-variable,
 .token.generic-function,
 .token.function {
-  color: #4078F2;
+  color: #4078f2;
 }
 
 .token.module,
@@ -56,28 +56,29 @@
 .token.rule,
 .token.pseudo-class,
 .token.important {
-  color: #A626A4;
+  color: #a626a4;
 }
 
 .token.property,
 .token.tag,
 .token.constant {
-  color: #E55649;
+  color: #e55649;
 }
 
 .token.generic,
 .token.attr-name,
+.token.entity,
 .token.boolean,
 .token.number,
 .token.class-name {
-  color: #C18401;
+  color: #c18401;
 }
 
 .token.comment,
 .token.combinator {
-  color: #A0A1A7;
+  color: #a0a1a7;
 }
 .token.operator,
 .token.builtin {
-  color: #0184BC;
+  color: #0184bc;
-}
+}

app/pages/+data.ts

@@ -7,39 +7,40 @@ import buildTitle from "./buildTitle";
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export async function data(pageContext: PageContext) {
-	const config = useConfig();
+  const config = useConfig();
-	await docCache.waitingForCache(20000);
+  await docCache.waitingForCache(20000);
 
-	const {
+  const {
-		exports: { frontmatter },
+    exports: { frontmatter },
-		urlParsed,
+    urlParsed,
-	} = pageContext;
+  } = pageContext;
-	const isRoot = urlParsed.pathname === "/";
+  const isRoot = urlParsed.pathname === "/";
 
-	config({
+  config({
-		title: buildTitle(isRoot ? undefined : frontmatter?.title),
+    title: buildTitle(isRoot ? undefined : frontmatter?.title),
-		description: frontmatter?.description,
+    description: frontmatter?.description,
-	});
+  });
 
-	let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
+  let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, "");
-	if (cachePathname === "") cachePathname = "index";
+  if (cachePathname === "") cachePathname = "index";
 
-	const doc = docCache.get(cachePathname);
+  const doc = docCache.get(cachePathname);
+  console.log(doc);
 
-	if (!doc) {
+  if (!doc) {
-		console.error(
+    console.error(
-			`DocCache: No doc found for ${cachePathname}. This is a bug!`,
+      `DocCache: No doc found for ${cachePathname}. This is a bug!`,
-			"Please report it to the maintainers.",
+      "Please report it to the maintainers.",
-		);
+    );
-	}
+  }
 
-	return {
+  return {
-		sections: doc?.sections || [],
+    sections: doc?.sections || [],
-		frontmatter,
+    frontmatter,
-		docs: docCache.orderByLastEdit({
+    docs: docCache.orderByLastEdit({
-			limit: 2,
+      limit: 2,
-			includedBasePaths: ["docs", "certifications"],
+      includedBasePaths: ["docs", "certifications"],
-			excludedFileNames: [cachePathname, "docs", "certifications"],
+      excludedFileNames: [cachePathname, "docs", "certifications"],
-		}),
+    }),
-	};
+  };
 }

app/pages/docs/html/+Page.mdx

@@ -5,6 +5,7 @@ tags: []
 ---
 
 import Callout from "@/components/Callout";
+import tabs from "./tabs";
 
 HTML est un langage de balisage utilisé pour structurer le contenu des pages web.  
 Bien qu'il ne s'agisse pas d'un langage de programmation à proprement parler, il reste fondamental pour créer des sites web.
@@ -14,7 +15,7 @@ Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de c
 ## 🤔 Qu'est-ce que le HTML ?
 
 HTML, ou **HyperText Markup Language**, est le langage standard utilisé pour créer des pages web. Il s'agit d'un langage de balisage qui utilise des **balises** pour structurer le contenu.  
-Il s'agit du squelette d'une page web, qui définit la structure et le contenu de celle-ci.
+Il s'agit du **squelette d'une page web**, qui définit la structure et le contenu de celle-ci.
 
 <Callout type="question" title="Pourquoi HTML n'est pas un langage de programmation ?">
   Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.
@@ -22,15 +23,32 @@ Il s'agit du squelette d'une page web, qui définit la structure et le contenu d
   <Callout type="note" title="Langage de programmation" collapsible>
     Un langage de programmation est un ensemble de règles et de conventions qui permettent d'écrire des instructions que l'ordinateur peut comprendre et exécuter.  
     Ces instructions peuvent inclure des calculs, des conditions, des boucles, etc.
-
-    Parmis les langages de programmation les plus connus, on peut citer :
-
-    - JavaScript
-    - Python
-    - Java
-    - C++
-    - C#
-
-    et bien d'autres !
   </Callout>
+
+  Si on regarde la définition d'un langage de programmation, on peut voir que le HTML ne correspond pas à cette définition.  
+  Tout simplement parce que le HTML ne permet pas d'écrire des instructions que l'ordinateur peut exécuter !
+</Callout>
+
+Mais bon... savoir ça c'est bien : mais ça ne va pas nous aider à créer des pages web.
+
+## 🏗️ La structure d'une page HTML
+
+Une page HTML est composée de plusieurs éléments, chacun ayant un rôle spécifique.
+
+Par exemple, une page HTML typique contient les éléments suivants :
+- `<!DOCTYPE html>` : Indique au navigateur que le document est un fichier HTML.
+- `<html>` : L'élément racine qui englobe tout le contenu de la page.
+- `<head>` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc.
+- `<body>` : Contient le contenu visible de la page, comme le texte, les images, les liens, etc.
+
+Il s'agit des balises de base qui composent une page HTML.  
+Voici un exemple de code HTML simple :
+
+<tabs.htmlBase />
+
+<Callout type="question" title="C'est quoi la balise `<!-- -->` ?">
+  La balise `<!-- -->` est utilisée pour ajouter des commentaires dans le code HTML.  
+  Ces commentaires ne sont pas affichés dans le navigateur et sont uniquement visibles dans le code source de la page.
+
+  On les utilise pour ajouter des notes ou des explications dans le code, ce qui peut être utile pour les développeurs qui lisent le code plus tard.
 </Callout>

app/pages/docs/html/tabs.tsx

@@ -0,0 +1,52 @@
+import { Snippet } from "@/components/Snippet";
+
+const htmlBaseSnippets = [
+  {
+    name: "Exemple de structure HTML de base",
+    codeLanguage: "html",
+    withLineNumbers: true,
+    code: `<!-- On indique au navigateur que le document est en HTML -->
+<!DOCTYPE html>
+
+<!-- On indique la langue du document (ici, en français) -->
+<html lang="fr">
+
+<!-- On indique les paramètres de la page... -->
+<head>
+  <!-- ... commme le titre de la page... -->
+  <title>Mon super site</title>
+
+  <!-- ... et la description de la page... -->
+  <meta name="description" content="Ceci est un exemple de page HTML.">
+</head>
+
+<!-- On indique le début du corps de la page -->
+<!-- Le corps de la page contient le contenu visible par l'utilisateur -->
+<body>
+  <!-- On indique le début d'un en-tête -->
+  <header>
+    <!-- On indique le titre principal de la page -->
+    <h1>Bienvenue sur ma page HTML</h1>
+  </header>
+
+  <!-- On indique le début d'une section -->
+  <section>
+    <!-- On indique un sous-titre -->
+    <h2>Voici un exemple de section</h2>
+    <!-- On indique un paragraphe -->
+    <p>Ceci est un exemple de paragraphe dans une section.</p>
+  </section>
+
+  <!-- On indique le début d'un pied de page -->
+  <footer>
+    <!-- On indique un texte de copyright -->
+    <p>&copy; 2023 Mon Site Web</p>
+  </footer>
+</body>
+</html>`,
+  },
+];
+
+export default {
+  htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
+};