app/components/Highlight.tsx

@@ -34,10 +34,10 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 
 	const highlightedCode = createMemo<string | undefined>(() => {
 		const childrenString = props.children?.toString();
-		if (!childrenString) return "";
+		if (!childrenString) return;
 
 		const grammar = Prismjs.languages[props.language];
-		if (!grammar) return "";
+		if (!grammar) return;
 
 		const result = Prismjs.highlight(childrenString, grammar, props.language);
 
@@ -102,10 +102,7 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 			)}
 
 			<pre
-				class={clsx(
-					"relative not-prose h-full w-full prism-code flex",
-					languageClass(),
-				)}
+				class={clsx("not-prose h-full w-full prism-code flex", languageClass())}
 			>
 				<code
 					class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}

app/components/Snippet.tsx

@@ -4,7 +4,7 @@ import { For, createSignal } from "solid-js";
 import { Highlight } from "./Highlight";
 import clsx from "clsx";
 
-export function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
+function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
 		<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
 			<circle cx="5" cy="5" r="4.5" class="fill-red-400" />

app/libs/navigation.ts

@@ -104,6 +104,11 @@ export const navigation: NavigationSection[] = [
 		type: navigationsTypes.DOCUMENTATIONS,
 		position: "auto",
 		links: [
+			{
+				title: "Introduction",
+				href: "/docs/frontend",
+				subitems: [],
+			},
 			{
 				title: "HTML",
 				href: "/docs/html",
@@ -115,15 +120,6 @@ export const navigation: NavigationSection[] = [
 					{ title: "Formulaires", href: "/docs/html/formulaires" },
 				],
 			},
-			{
-				title: "JavaScript",
-				href: "/docs/javascript",
-				subitems: [
-					{ title: "Introduction", href: "/docs/javascript" },
-					{ title: "Syntaxe", href: "/docs/javascript/syntaxe" },
-					{ title: "Instructions", href: "/docs/javascript/instructions" },
-				],
-			},
 			{
 				title: "React",
 				href: "/docs/react",

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

@@ -0,0 +1,8 @@
+---
+title: "Introduction au Frontend : Langages et technologies"
+description: 
+tags: []
+---
+
+import Callout from "@/components/Callout";
+

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

@@ -1,71 +0,0 @@
----
-title: Introduction à JavaScript
-description: Parlons un peu de JavaScript, le langage de programmation incontournable pour le développement web.
-tags: []
----
-
-import Callout from "@/components/Callout";
-
-**JavaScript** est un langage de programmation populaire qui permet d'ajouter des fonctionnalités interactives aux pages web.
-Contrairement au HTML qui définit la structure et le contenu d'une page, JavaScript peut manipuler ces éléments dynamiquement et créer une expérience utilisateur plus riche.
-
-<Callout type="note" title="Environnement d'exécution">
-  Dans le cadre de cette série d'articles, nous allons principalement nous concentrer sur l'environnement d'exécution du navigateur.
-
-  Cependant, il est important de noter que JavaScript peut également être exécuté côté serveur grâce à des environnements comme **Node.js**.
-</Callout>
-
-## L'histoire de JavaScript
-
-JavaScript a été créé en 1995 par **Brendan Eich** alors qu'il travaillait chez Netscape _(un ancien navigateur web)_.  
-Il a été conçu à l'origine pour ajouter des fonctionnalités interactives aux pages web, mais il a rapidement évolué pour devenir un langage de programmation complet.
-
-Aujourd'hui, JavaScript est utilisé dans presque tous les sites web modernes et est devenu un standard pour le développement web.
-
-## Pourquoi JavaScript est-il si populaire ?
-
-JavaScript est devenu l'un des langages de programmation les plus populaires pour plusieurs raisons :
-
-- **Interactivité** : JavaScript permet d'ajouter des fonctionnalités interactives aux pages web, comme des animations, des formulaires dynamiques, etc.
-- **Compatibilité** : JavaScript est pris en charge par tous les navigateurs modernes, ce qui le rend accessible à un large public.
-- **Écosystème riche** : Il existe de nombreuses bibliothèques et frameworks/bibliothèques JavaScript, comme **React**, **Vue.js** et **Angular**, qui facilitent le développement d'applications web complexes.
-- **Communauté active** : JavaScript a une grande communauté de développeurs qui partagent des ressources, des tutoriels et des outils pour aider les autres à apprendre et à progresser.
-
-Cependant, il est important de noter que JavaScript a également ses inconvénients :
-
-- **Typage faible** : JavaScript est un langage à typage faible, ce qui signifie que le type d'une variable n'est pas défini explicitement et peut changer au cours de l'exécution du programme.
-- **Gestion asynchrone** : La nature asynchrone de JavaScript, peut rendre le code plus ddificile à comprendre et à maintenir.
-- **Support pour la POO** : Bien que JavaScript prenne en charge la programmation orientée objet, il ne le fait pas de la même manière que d'autres langages comme Java ou C#.  
-  Il utilise plutôt un modèle basé sur les prototypes, ce qui peut être déroutant pour les développeurs habitués à d'autres langages.
-- **Performances** : Bien que JavaScript soit généralement rapide, il peut être moins performant que d'autres langages compilés comme C++ ou Rust pour certaines tâches intensives en calcul.
-
-Mais alors, est-ce que JavaScript est un bon choix pour le développement web ?  
-Voyons ça ensemble !
-
-## Pourquoi utiliser JavaScript ?
-
-Déjà, il faut prendre en compte que JavaScript est **l'unique** langage de programmation qui peut être exécuté dans le navigateur.  
-Cela signifie que si vous voulez créer des applications web interactives, JavaScript est le langage à utiliser.
-
-<Callout type="note" title="Le cas des langages compilés">
-  Il existe des langages compilés qui peuvent être utilisés pour créer des applications web, comme **TypeScript** ou **WebAssembly**.  
-  Cependant, ces langages sont généralement transpilés en JavaScript avant d'être exécutés dans le navigateur.
-
-  Ça signifie que même si vous utilisez un autre langage, il y a de fortes chances qu'il soit finalement converti en JavaScript pour être exécuté dans le navigateur.
-</Callout>
-
-À partir de là, le fait d'apprendre JavaScript si l'on veut devenir développeur web est un choix évident.
-
-## Ce qui t'attend dans cette série d'articles
-
-Comme dit précédemment, cette série d'articles va se concentrer sur l'environnement d'exécution du navigateur.  
-On va donc aborder les sujets suivants :
-
-- La syntaxe de base de JavaScript
-- Les types de données
-- La compréhension et manipulation du DOM
-- Les événements
-- Les fonctions et la portée
-- Le principe d'asynchrone
-
-Chaque article de cette série sera conçu pour être facilement compréhensible, avec des exemples pratiques et une explication des concepts.

app/pages/docs/javascript/instructions/+Page.mdx

@@ -1,180 +0,0 @@
----
-title: Les instructions avec JavaScript
-description: Voyons comment écrire et comprendre des instructions avec JavaScript.
-tags: []
----
-
-import Callout from "@/components/Callout";
-import tabs from "./tabs";
-
-Maintenant que nous avons vu la syntaxe de base de JavaScript, il est temps de plonger dans les instructions.
-
-## Qu'est-ce qu'une instruction ?
-
-Une instruction est une ligne de code qui effectue une **action spécifique**.  
-Il s'agit de la **brique de base** de tout programme et JavaScript ne fait pas exception à la règle !
-
-Par exemple, voici quelques instructions simples en JavaScript :
-
-<tabs.jsBasicInstructions />
-
-Dans cet exemple, nous avons trois instructions :
-- La première instruction affiche un message dans la console avec `console.log()`.
-- La deuxième instruction déclare une variable `nom` et lui assigne la valeur `"John Doe"`.
-- La troisième instruction est une condition sur une variable `age` qui affiche un message différent selon la valeur de `age`.
-
-## Les différents types d'instructions
-
-Comme vu plus tôt, il existe plusieurs types d'instructions en JavaScript.
-
-### Instructions de déclaration
-
-Les instructions de déclaration sont utilisées pour déclarer des **variables**, des **fonctions** ou des **classes**.
-
-C'est ce qui était fait dans l'exemple précédent avec la déclaration de la variable `nom`.
-
-### Instructions de contrôle de flux
-
-Les instructions de contrôle de flux sont utilisées pour contrôler le flux d'exécution du programme.  
-Elles permettent de prendre des décisions selon certaines **conditions**.
-
-### Instructions de boucle
-
-Les instructions de boucle sont utilisées pour exécuter un bloc de code plusieurs fois.  
-Elles sont souvent utilisées pour parcourir des tableaux _(un regroupement de données)_.
-
-### Instructions de gestion des erreurs
-
-Pour gérer les erreurs, JavaScript nous met à disposition des instructions comme `try`, `catch` et `finally`.
-
-Ces instructions permettent de gérer les erreurs qui peuvent survenir lors de l'exécution du code.
-
-### Autres instructions
-
-Il existe d'autres instructions comme `return`, `break`, `continue`, `throw` ou encore `debugger` qui sont utilisées pour des cas spécifiques.
-
-On les utilisera au fur et à mesure de notre apprentissage.
-
-## Faisons notre premier programme !
-
-Maintenant que nous avons vu les instructions de base, il est temps de mettre tout cela en pratique.
-
-> Quoi ?! Mais je ne sais pas à quoi ça ressemble !
-
-Pas de panique ! On ne va pas faire du JavaScript pur tout de suite 😉.  
-On va commencer par du **pseudo-code**.
-
-### Qu'est-ce que le pseudo-code ?
-
-Le pseudo-code est une façon de décrire un algorithme ou un programme sans se soucier de la syntaxe d'un langage de programmation particulier.
-
-Il utilise un langage simple et compréhensible par tous, ce qui permet de se concentrer sur la logique du programme plutôt que sur les détails de la syntaxe.
-
-Voici quelques exemples de pseudo-code :
-
-<tabs.pseudoCode />
-
-Tu as évidemment le droit de changer les mots pour les adapter à ton propre style ou à ta propre compréhension. L'idée, c'est juste d'écrire un algorithme qui soit compréhensible par toi-même et par les autres.
-
-### Challenge
-
-Maintenant, c'est à ton tour de jouer !
-
-Tu vas devoir écrire un pseudo-code qui :
-
-- Demande à l'utilisateur son nom.
-- Demande à l'utilisateur son âge.
-- Si l'utilisateur est majeur _(18 ans ou plus)_, affiche un message de bienvenue.
-- Sinon, affiche un message lui disant qu'il n'est pas majeur.
-
-<Callout type="question" title="Comment dois-je m'y prendre ?">
-  Pour ce challenge, tu peux utiliser les instructions suivantes :
-  
-  - `DEBUT` : Indique le début du programme.
-  - `FIN` : Indique la fin du programme.
-  - `VARIABLE x` : Indique la déclaration d'une variable nomée `x`.
-  - `LIRE x` : Indique la lecture d'une valeur pour la variable `x`.
-  - `AFFICHER "..."` : Indique l'affichage du message entre guillemets.
-  - `SI ... ALORS` : Indique une condition.
-  - `SINON` : Indique le cas où la condition n'est pas remplie.
-  - `FIN SI` : Indique la fin de la condition.
-  - `x >= y` : Indique une comparaison entre la variable `x` et la valeur `y`.
-
-  Pour le moment, tu n'as pas besoin de te soucier de la syntaxe JavaScript.
-</Callout>
-
-### Traduire le pseudo-code en JavaScript
-
-Une fois que tu as écrit ton pseudo-code, il est temps de le traduire en JavaScript.
-
-Puisque je ne peux pas lire dans tes pensées, je vais te donner un exemple de pseudo-code final, pour que l'on voit ensuite comment le traduire en JavaScript !
-
-<tabs.pseudoCodeFinal />
-
-Dans cet exemple, on retrouve :
-
-- **Lignes 1 et 15 :** Le début et la fin du programme.
-- **Ligne 2 :** La déclaration de la variable `nom`.
-- **Ligne 3 :** Affichage du message demandant le nom de l'utilisateur.
-- **Ligne 4 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `nom`.
-- **Ligne 6 :** La déclaration de la variable `age`.
-- **Ligne 7 :** Affichage du message demandant l'âge de l'utilisateur.
-- **Ligne 8 :** Lecture et enregistrement de la valeur saisie par l'utilisateur dans la variable `age`.
-- **Ligne 10 :** La condition qui vérifie si l'utilisateur est majeur.
-- **Ligne 11 :** Affichage du message de bienvenue si l'utilisateur est majeur.
-- **Ligne 13 :** Affichage du message indiquant que l'utilisateur n'est pas majeur.
-- **Ligne 14 :** Fin de la condition.
-
-Et voilà !  
-Maintenant, il ne te reste plus qu'à traduire ce pseudo-code en JavaScript... 😏
-
-### Challenge 2
-
-Ce que je vais faire, c'est te donner l'équivalent de certaines instructions en JavaScript pour t'aider à traduire ton pseudo-code en JavaScript.
-
-- `DEBUT` : Pas d'équivalent en JavaScript _(ouf !)_
-- `FIN` : Pas d'équivalent en JavaScript _(ouf !)_
-- `VARIABLE x` : `let x;` ou `const x;`
-- `LIRE x` : `x = prompt("...");` _(`"..."` est le message affiché à l'utilisateur)_
-- `AFFICHER "..." + x` : `console.log("... " + x);`
-- `SI ... ALORS` : `if (...) {`
-- `SINON` : `} else {`
-- `FIN SI` : `}`
-- `x >= y` : `x >= y` _(pas de changement, ouf !)_
-
-Prêt à en découdre ? 💪
-
-### Tester ton programme
-
-Une fois que tu as traduit ton pseudo-code en JavaScript, il est temps de tester ton programme !
-
-Pour pouvoir le tester, tu peux tout simplement copier-coller ton code dans la console de ton navigateur ou dans un éditeur de code en ligne comme [CodePen](https://codepen.io/) ou [JSFiddle](https://jsfiddle.net/).
-
-### Correction
-
-Pour l'équivalent de l'exemple de pseudo-code, voici ce que ça donne en JavaScript :
-
-<tabs.jsFinal />
-
-Et voilà ! 🎉  
-Mais faisons un petit tour d'horizon sur ce code pour bien comprendre ce qu'il fait.
-
-- **Ligne 2 :** On déclare une variable `nom` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
-- **Ligne 5 :** On déclare une variable `age` avec le mot-clé `const`, puis on lui assigne la valeur saisie par l'utilisateur avec `prompt()`.
-- **Ligne 8 :** On vérifie si l'utilisateur est majeur avec une condition `if (age >= 18)`.
-- **Ligne 9 :** Si l'utilisateur est majeur, on affiche un message de bienvenue avec `console.log()`.
-- **Ligne 10 :** Sinon...
-- **Ligne 11 :** On affiche un message indiquant que l'utilisateur n'est pas majeur avec `console.log()`.
-- **Ligne 12 :** Fin de la condition.
-
-## Conclusion
-
-Pfiou, ça fait déjà pas mal de choses à digérer ! 😅
-
-On a vu les instructions de base en JavaScript, comment écrire du pseudo-code et comment le traduire en JavaScript.  
-On a même fait un petit programme ensemble !
-
-Il est temps de faire une pause et de digérer tout ça avant de passer à la suite.  
-C'est important de ne pas vouloir aller trop vite en enchaînant les articles, surtout quand on débute.
-
-Prends le temps de bien comprendre chaque concept avant de passer au suivant, et n'hésite pas à revenir sur les bases si tu as des doutes !

app/pages/docs/javascript/instructions/tabs.tsx

@@ -1,105 +0,0 @@
-import { Snippet } from "@/components/Snippet";
-
-const jsBasicInstructionsSnippets = [
-	{
-		name: "Instruction d'affichage dans la console",
-		codeLanguage: "js",
-		code: `console.log("Hello, World!");`,
-	},
-	{
-		name: "Instruction de déclaration",
-		codeLanguage: "js",
-		code: `const nom = "John Doe";`,
-	},
-	{
-		name: "Instruction de condition",
-		codeLanguage: "js",
-		code: `if (age >= 18) {
-  console.log("Vous êtes majeur.");
-} else {
-  console.log("Vous êtes mineur.");
-}`,
-	},
-];
-
-const pseudoCodeSnippets = [
-	{
-		name: "Pseudo-code d'affichage",
-		codeLanguage: "pseudocode",
-		code: `AFFICHER "Bonjour, le monde!"`,
-	},
-	{
-		name: "Pseudo-code d'une fonction simple",
-		codeLanguage: "pseudocode",
-		code: `FONCTION somme(a, b)
-	RETOURNER a + b
-FIN FONCTION`,
-	},
-	{
-		name: "Pseudo-code d'une boucle",
-		codeLanguage: "pseudocode",
-		code: `POUR i DE 1 À 10
-	AFFICHER i
-FIN POUR`,
-	},
-	{
-		name: "Pseudo-code d'une condition",
-		codeLanguage: "pseudocode",
-		code: `SI age >= 18 ALORS
-	AFFICHER "Vous êtes majeur."
-SINON
-	AFFICHER "Vous êtes mineur."
-FIN SI`,
-	},
-];
-
-const pseudoCodeFinalSnippets = [
-	{
-		name: "Pseudo-code du challenge",
-		codeLanguage: "pseudocode",
-		withLineNumbers: true,
-		code: `DEBUT
-	VARIABLE nom
-	AFFICHER "Entrez votre nom :"
-	LIRE nom
-
-	VARIABLE age
-	AFFICHER "Entrez votre âge :"
-	LIRE age
-
-	SI age >= 18 ALORS
-		AFFICHER "Bienvenue " + nom + ", vous êtes majeur."
-	SINON
-		AFFICHER "Désolé " + nom + ", vous êtes mineur."
-	FIN SI
-FIN`,
-	},
-];
-
-const jsFinalSnippets = [
-	{
-		name: "Code du challenge",
-		codeLanguage: "js",
-		withLineNumbers: true,
-		code: `// Demander le nom de l'utilisateur
-const nom = prompt("Entrez votre nom :");
-
-// Demander l'âge de l'utilisateur
-const age = prompt("Entrez votre âge :");
-
-// Vérifier si l'utilisateur est majeur ou mineur
-if (age >= 18) {
-	console.log("Bienvenue " + nom + ", vous êtes majeur.");
-} else {
-	console.log("Désolé " + nom + ", vous êtes mineur.");
-}`,
-	},
-	...pseudoCodeFinalSnippets,
-];
-
-export default {
-	jsBasicInstructions: () => <Snippet snippets={jsBasicInstructionsSnippets} />,
-	pseudoCode: () => <Snippet snippets={pseudoCodeSnippets} />,
-	pseudoCodeFinal: () => <Snippet snippets={pseudoCodeFinalSnippets} />,
-	jsFinal: () => <Snippet snippets={jsFinalSnippets} />,
-};

app/pages/docs/javascript/syntaxe/+Page.mdx

@@ -1,198 +0,0 @@
----
-title: La syntaxe de base de JavaScript
-description: Découvrons ensemble la syntaxe de base de JavaScript et comment il fonctionne dans le navigateur.
-tags: []
----
-
-import Callout from "@/components/Callout";
-import tabs from "./tabs";
-
-Pour cet article, nous allons explorer les fondements de la syntaxe de base du langage JavaScript.
-
-Mais déjà, faisons un rappel sur ce qu'est la syntaxe !
-
-## Qu'est-ce que la syntaxe ?
-
-La syntaxe d'un langage de programmation vient définir les règles et les conventions à suivre lors de l'écriture du code. Elle permet de structurer le code de manière cohérente et facilement compréhensible pour les développeurs et les machines.
-
-La syntaxe de JavaScript est inspirée de plusieurs langages, notamment **Java**, **C** et **Python**.  
-Elle est conçue pour être simple et intuitive, ce qui en fait un excellent choix pour les débutants.
-
-## Structure du code JavaScript
-
-La structure de base d'un programme JavaScript est assez simple.  
-Un programme JavaScript est généralement constitué de plusieurs éléments, notamment :
-
-- **Instructions** : Les lignes de code qui effectuent des actions.
-- **Commentaires** : Utilisés pour ajouter des notes explicatives dans le code.
-- **Variables** : Utilisées pour stocker des données.
-- **Fonctions** : Utilisées pour encapsuler des blocs de code réutilisables.
-
-## Instructions
-
-Les instructions sont les lignes de code qui effectuent des actions.  
-Il peut s'agir d'opérations mathématiques, de manipulations de chaînes de caractères, d'appels de fonctions, etc.
-
-Bien que ça ne soit pas obligatoire en JavaScript, une instruction se termine généralement par un **point-virgule** _(`;`)_.
-
-<tabs.jsInstructions />
-
-Parmis les instructions, on trouve :
-
-- **Déclaration de variable** : Utilisée pour déclarer une variable.
-- **Affectation** : Utilisée pour assigner une valeur à une variable.
-- **Appel de fonction/méthode** : Utilisée pour appeler une fonction ou une méthode.
-- **Opérations mathématiques** : Utilisées pour effectuer des calculs.
-- **Manipulation de chaînes de caractères** : Utilisée pour manipuler des chaînes de caractères.
-- **Conditions** : Utilisées pour exécuter du code en fonction de certaines conditions.
-- **Boucles** : Utilisées pour exécuter du code plusieurs fois.
-- **Retour de valeur** : Utilisée pour retourner une valeur d'une fonction.
-
-Mais on se garde tout ça pour plus tard 😉.
-
-## Commentaires
-
-Les commentaires sont des sections de code qui ne sont pas exécutées. Elles sont utilisées pour ajouter des notes ou des explications sur le code.
-
-Il existe trois types de commentaires en JavaScript :
-
-- **Commentaire sur une seule ligne** : Utilise `//` pour commenter une seule ligne.
-- **Commentaire sur plusieurs lignes** : Utilise `/* ... */` pour commenter plusieurs lignes.
-- **Commentaire de documentation** : Utilise `/** ... */` pour documenter des fonctions ou des classes.
-
-<tabs.jsComments />
-
-<Callout type="note" title="Commentaire de documentation">
-  Le commentaire de documentation est souvent utilisé pour générer automatiquement la documentation du code.  
-  Il est généralement utilisé avec des outils comme JSDoc.
-
-  Il permet de décrire les paramètres, le type de retour et d'autres informations utiles sur la fonction ou la classe.
-</Callout>
-
-## Variables
-
-Les variables sont utilisées pour stocker des valeurs qui peuvent être modifiées au cours de l'exécution du programme.  
-En JavaScript, les variables doivent être déclarées avant d'être utilisées.
-
-Il existe trois façons de déclarer une variable :
-
-- `var` : Utilisé pour déclarer une variable globale ou locale.
-- `let` : Utilisé pour déclarer une variable locale avec une portée de bloc.
-- `const` : Utilisé pour déclarer une variable constante dont la valeur ne peut pas être modifiée.
-
-On reparlera de cette histoire de portée dans un prochain article, mais pour l'instant, voici un exemple de déclaration de variable :
-
-<tabs.jsVariables />
-
-Dans cet exemple, nous avons déclaré trois variables : `nom`, `age` et `ville`.
-
-### Variable avec var
-
-La déclaration de variable avec `var` est la plus ancienne, mais elle est moins recommandée aujourd'hui en raison de son comportement particulier.
-
-La valeur d'une variable déclarée avec `var` peut être modifiée à tout moment.
-
-<Callout type="warning" title="Utilisation de var">
-  `var` est une déclaration de variable qui a une portée fonctionnelle ou globale.  
-  On verra dans un prochain article de quoi il s'agit.
-</Callout>
-
-### Variable avec let
-
-La déclaration de variable avec `let` est plus moderne et est recommandée pour la plupart des cas.  
-Elle permet de déclarer une variable avec une portée de bloc _(block scope)_.
-
-La valeur d'une variable déclarée avec `let` peut être modifiée.
-
-### Variable avec const
-
-La déclaration de variable avec `const` est similaire à `let`, mais elle est utilisée pour déclarer une variable constante.  
-Elle profite du même concept de portée de bloc.
-
-La valeur d'une variable déclarée avec `const` ne peut pas être modifiée après sa déclaration.
-
-## Fonctions
-
-Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique.  
-Elles peuvent prendre des **paramètres en entrée** et **retourner une valeur en sortie**.
-
-En JavaScript, une fonction peut être déclarée de plusieurs manières :
-
-- **Fonction déclarée** : Utilise le mot-clé `function` suivi du nom de la fonction.
-- **Fonction anonyme** : N'a pas de nom et est généralement utilisée comme argument pour une autre fonction.
-- **Fonction fléchée** : Une syntaxe plus concise pour déclarer des fonctions.
-
-<tabs.jsFunctions />
-
-### Fonction déclarée
-
-La déclaration de fonction est la méthode la plus simple à utiliser.  
-Elle est déclarée avec le mot-clé `function` suivi du nom de la fonction et des parenthèses.
-
-### Fonction anonyme
-
-Dans certains cas, il peut être utile de déclarer une fonction sans lui donner de nom.  
-C'est ce qu'on appelle une fonction anonyme.
-
-Elle est souvent utilisée comme argument pour une autre fonction ou pour créer des fonctions de rappel _(callback functions)_.
-
-### Fonction fléchée
-
-La fonction fléchée est une syntaxe plus concise et moderne pour déclarer des fonctions.  
-Elle a un comportement particulier dans le contexte de retour de valeur, avec une syntaxe raccourcie pour les fonctions à une seule ligne.
-
-<Callout type="question" title="Comment fonctionne le retour de valeur des fonctions fléchées ?">
-  Dans une fonction classique, on utilise le mot-clé `return` pour retourner une valeur.  
-  Le fonctionnement est identique pour les fonctions fléchées, mais il est possible de profiter d'une syntaxe raccourcie !
-
-  Dans le cas d'une fonction fléchée à une seule ligne, il n'est pas nécessaire d'utiliser le mot-clé `return`.
-
-  C'est d'ailleurs ce qui est fait dans l'exemple donné plus tôt, avec un retour implicite de `a + b`.
-</Callout>
-
-## Bonnes pratiques
-
-### Conventions de nommage
-
-Il est important de suivre certaines conventions pour rendre le code plus lisible et maintenable.
-Voici quelques-unes des conventions les plus courantes :
-
-- Utiliser des noms de variables et de fonctions significatifs.
-- Indenter le code pour améliorer la lisibilité.
-- Utiliser des commentaires pour expliquer le code complexe.
-- Placer un `;` _(point virgule)_ à la fin de chaque instruction.
-
-<Callout type="warning" title="Attention aux commentaires !">
-  Écrire des commentaires : c'est bien ✅.  
-  Écrire trop de commentaires : **c'est pas bien** ❌.
-
-  L'intérêt des commentaires est d'expliquer le code, pas de le répéter.  
-  Si le code est suffisamment clair, il n'est pas nécessaire d'ajouter des commentaires.
-</Callout>
-
-### Outils de développement
-
-Pour faciliter le développement, il existe plusieurs outils et environnements de développement intégrés _(IDE)_ qui peuvent aider à écrire du code JavaScript.
-
-En gratuit, on peut citer :
-
-- **Visual Studio Code** : Un éditeur de code puissant et extensible.
-- **Atom** : Un éditeur de code open-source développé par GitHub.
-- **Sublime Text** : Un éditeur de code léger et rapide.
-
-<Callout type="warning" title="Attention aux éditeurs avec de l'IA !">
-  Ne te méprends pas, l'IA c'est génial ! Mais il faut faire attention à ne pas trop se reposer sur elle.
-
-  Lorsqu'on utilise un éditeur de code avec de l'IA, il est important de garder à l'esprit que l'IA peut parfois faire des erreurs. Et ces erreurs peuvent très bien être des erreurs de sécurité, ce qui n'est pas détectable avant d'avoir été exploité.
-
-  Si demain tu demandes à l'IA de te générer un code pour une API sans être en mesure de le remettre en question, j'espère que tu ne tiens pas aux données de tes utilisateurs ou à la sécurité de ton application !
-
-  Tant que tu es en phase d'apprentissage, je te conseille de ne pas utiliser d'IA de manière générale.
-</Callout>
-
-## Conclusion
-
-Tu l'auras remarqué, même si la syntaxe de JavaScript est relativement simple, il y a beaucoup de choses à apprendre !
-
-Ne va pas trop vite dans ton apprentissage et n'hésite pas à revenir sur les bases si tu as des doutes.  
-Il est important de bien comprendre la syntaxe de base avant de passer à des concepts plus avancés.

app/pages/docs/javascript/syntaxe/tabs.tsx

@@ -1,95 +0,0 @@
-import { Snippet } from "@/components/Snippet";
-
-const jsInstructionsSnippets = [
-	{
-		name: "Instruction d'affichage dans la console",
-		codeLanguage: "js",
-		code: `console.log("Hello, World!");`,
-	},
-	{
-		name: "Instruction de déclaration",
-		codeLanguage: "js",
-		code: `const nom = "John Doe";`,
-	},
-	{
-		name: "Instruction de condition",
-		codeLanguage: "js",
-		code: `if (age >= 18) {
-  console.log("Vous êtes majeur.");
-} else {
-  console.log("Vous êtes mineur.");
-}`,
-	},
-];
-
-const jsVariablesSnippets = [
-	{
-		name: "Déclaration de variables",
-		codeLanguage: "js",
-		code: `let nom = "John Doe";
-const age = 30;
-var ville = "Paris";`,
-	},
-];
-
-const jsFunctionsSnippets = [
-	{
-		name: "Fonction classique",
-		codeLanguage: "js",
-		code: `function addition(a, b) {
-  return a + b;
-}`,
-	},
-	{
-		name: "Fonction anonyme",
-		codeLanguage: "js",
-		code: `const addition = function(a, b) {
-  return a + b;
-};`,
-	},
-	{
-		name: "Fonction fléchée avec retour explicite",
-		codeLanguage: "js",
-		code: `const addition = (a, b) => {
-  return a + b;
-};`,
-	},
-	{
-		name: "Fonction fléchée avec retour implicite",
-		codeLanguage: "js",
-		code: "const addition = (a, b) => a + b;",
-	},
-];
-
-const jsCommentsSnippets = [
-	{
-		name: "Commentaire sur une ligne",
-		codeLanguage: "js",
-		code: "// Ceci est un commentaire sur une ligne",
-	},
-	{
-		name: "Commentaire sur plusieurs lignes",
-		codeLanguage: "js",
-		code: `/*
-Ceci est un commentaire
-sur plusieurs lignes
-*/`,
-	},
-	{
-		name: "Commentaire de documentation",
-		codeLanguage: "js",
-		code: `/**
-* Ceci est un commentaire de documentation
-* @param {number} a - Le premier paramètre
-* @param {number} b - Le deuxième paramètre
-* @returns {number} La somme de a et b
-*/`,
-	},
-];
-
-export default {
-	jsInstructions: () => <Snippet snippets={jsInstructionsSnippets} />,
-	jsVariables: () => <Snippet snippets={jsVariablesSnippets} />,
-	jsFunctions: () => <Snippet snippets={jsFunctionsSnippets} />,
-	jsComments: () => <Snippet snippets={jsCommentsSnippets} />,
-};