docs(html): add section on styles and scripts in <head>

feat(docs): add introduction to frontend documentation
refactor(nav): format navigation types consistently
2025-05-13 13:54:28 +02:00 · 2025-05-13 13:45:55 +02:00 · 2025-05-13 13:22:28 +02:00
7 changed files with 326 additions and 146 deletions
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@ -1,169 +1,192 @@
 const navigationsTypes = {
-  GLOBAL: "👋 Général",
-  CERTIFICATIONS: "🎓 Certifications",
-  DOCUMENTATIONS: "📚 Documentations",
-  OTHER: "🔗 Autres",
+	GLOBAL: "👋 Général",
+	CERTIFICATIONS: "🎓 Certifications",
+	DOCUMENTATIONS: "📚 Documentations",
+	OTHER: "🔗 Autres",
 };

 export type NavigationSection = {
-  title: string;
-  type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
-  position: "start" | "end" | "auto";
-  links: NavigationLink[];
+	title: string;
+	type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
+	position: "start" | "end" | "auto";
+	links: NavigationLink[];
 };

 export type NavigationOG = Partial<{
-  image: string;
+	image: string;
 }>;

 export type NavigationLink = {
-  title: string;
-  href: string;
-  og?: NavigationOG;
-  subitems: NavigationSubItem[];
+	title: string;
+	href: string;
+	og?: NavigationOG;
+	subitems: NavigationSubItem[];
 };

 export type NavigationSubItem = {
-  title: string;
-  href: string;
+	title: string;
+	href: string;
 };

 export const navigation: NavigationSection[] = [
-  {
-    title: "Préambule",
-    type: navigationsTypes.GLOBAL,
-    position: "start",
-    links: [
-      { title: "Memento Dev", href: "/", subitems: [] },
-      { title: "Certifications", href: "/certifications", subitems: [] },
-      { title: "Documentations", href: "/docs", subitems: [] },
-    ],
-  },
-  {
-    title: "Communauté",
-    type: navigationsTypes.GLOBAL,
-    position: "start",
-    links: [
-      {
-        title: "Influenceurs",
-        href: "/communaute/influenceurs",
-        subitems: [],
-      },
-      {
-        title: "Partages et réutilisations",
-        href: "/communaute/partages",
-        subitems: [],
-      },
-    ],
-  },
-  {
-    title: "Légal",
-    type: navigationsTypes.OTHER,
-    position: "end",
-    links: [
-      { title: "Mentions légales", href: "/mentions-legales", subitems: [] },
-      {
-        title: "Politique de confidentialité",
-        href: "/politique-de-confidentialite",
-        subitems: [],
-      },
-    ],
-  },
-  {
-    title: "Développeur Web et Web Mobile",
-    type: navigationsTypes.CERTIFICATIONS,
-    position: "auto",
-    links: [
-      { title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
-      {
-        title: "Activité Type 1",
-        href: "/certifications/dwwm/at1",
-        subitems: [
-          { title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
-          { title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
-          { title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
-          { title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
-          { title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
-        ],
-      },
-      {
-        title: "Activité Type 2",
-        href: "/certifications/dwwm/at2",
-        subitems: [
-          { title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
-          { title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
-          { title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
-          { title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
-          { title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Front-end",
-    type: navigationsTypes.DOCUMENTATIONS,
-    position: "auto",
-    links: [
-      {
-        title: "React",
-        href: "/docs/react",
-        subitems: [
-          { title: "Introduction", href: "/docs/react" },
-          { title: "Initialisation", href: "/docs/react/initialisation" },
-          { title: "Syntaxe JSX", href: "/docs/react/jsx" },
-          { title: "Premier composant", href: "/docs/react/premier-composant" },
-          {
-            title: "State et cycle de vie",
-            href: "/docs/react/state-et-cycle-de-vie",
-          },
-          { title: "Hooks", href: "/docs/react/hooks" },
-          { title: "Le hook useContext", href: "/docs/react/use-context" },
-          { title: "Le hook useReducer", href: "/docs/react/use-reducer" },
-        ],
-      },
-      {
-        title: "HTML",
-        href: "/docs/html",
-        subitems: [{ title: "Introduction", href: "/docs/html" }],
-      },
-    ],
-  },
-  {
-    title: "Base de données",
-    type: navigationsTypes.DOCUMENTATIONS,
-    position: "auto",
-    links: [
-      {
-        title: "Merise",
-        href: "/docs/merise",
-        og: { image: "/merise/og.webp" },
-        subitems: [
-          { title: "Introduction", href: "/docs/merise" },
-          {
-            title: "Dictionnaire de données",
-            href: "/docs/merise/dictionnaire-de-donnees",
-          },
-          { title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
-          { title: "Modèle Logique de Données", href: "/docs/merise/mld" },
-          { title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
-        ],
-      },
-    ],
-  },
+	{
+		title: "Préambule",
+		type: navigationsTypes.GLOBAL,
+		position: "start",
+		links: [
+			{ title: "Memento Dev", href: "/", subitems: [] },
+			{ title: "Certifications", href: "/certifications", subitems: [] },
+			{ title: "Documentations", href: "/docs", subitems: [] },
+		],
+	},
+	{
+		title: "Communauté",
+		type: navigationsTypes.GLOBAL,
+		position: "start",
+		links: [
+			{
+				title: "Influenceurs",
+				href: "/communaute/influenceurs",
+				subitems: [],
+			},
+			{
+				title: "Partages et réutilisations",
+				href: "/communaute/partages",
+				subitems: [],
+			},
+		],
+	},
+	{
+		title: "Légal",
+		type: navigationsTypes.OTHER,
+		position: "end",
+		links: [
+			{ title: "Mentions légales", href: "/mentions-legales", subitems: [] },
+			{
+				title: "Politique de confidentialité",
+				href: "/politique-de-confidentialite",
+				subitems: [],
+			},
+		],
+	},
+	{
+		title: "Développeur Web et Web Mobile",
+		type: navigationsTypes.CERTIFICATIONS,
+		position: "auto",
+		links: [
+			{ title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
+			{
+				title: "Activité Type 1",
+				href: "/certifications/dwwm/at1",
+				subitems: [
+					{ title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
+					{ title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
+					{ title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
+					{ title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
+					{ title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
+				],
+			},
+			{
+				title: "Activité Type 2",
+				href: "/certifications/dwwm/at2",
+				subitems: [
+					{ title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
+					{ title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
+					{ title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
+					{ title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
+					{ title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
+				],
+			},
+		],
+	},
+	{
+		title: "Front-end",
+		type: navigationsTypes.DOCUMENTATIONS,
+		position: "auto",
+		links: [
+			{
+				title: "Introduction",
+				href: "/docs/frontend",
+				subitems: [],
+			},
+			{
+				title: "HTML",
+				href: "/docs/html",
+				subitems: [
+					{ title: "Introduction", href: "/docs/html" },
+					{ title: "Balise <head>", href: "/docs/html/balise-head" },
+					{ title: "Balises de base", href: "/docs/html/balises-de-base" },
+					{ title: "Attributs", href: "/docs/html/attributs" },
+					{
+						title: "Intégrations et médias",
+						href: "/docs/html/integrations-medias",
+					},
+					{ title: "Formulaires", href: "/docs/html/formulaires" },
+				],
+			},
+			{
+				title: "React",
+				href: "/docs/react",
+				subitems: [
+					{ title: "Introduction", href: "/docs/react" },
+					{ title: "Initialisation", href: "/docs/react/initialisation" },
+					{ title: "Syntaxe JSX", href: "/docs/react/jsx" },
+					{ title: "Premier composant", href: "/docs/react/premier-composant" },
+					{
+						title: "State et cycle de vie",
+						href: "/docs/react/state-et-cycle-de-vie",
+					},
+					{ title: "Hooks", href: "/docs/react/hooks" },
+					{ title: "Le hook useContext", href: "/docs/react/use-context" },
+					{ title: "Le hook useReducer", href: "/docs/react/use-reducer" },
+				],
+			},
+		],
+	},
+	{
+		title: "Base de données",
+		type: navigationsTypes.DOCUMENTATIONS,
+		position: "auto",
+		links: [
+			{
+				title: "Merise",
+				href: "/docs/merise",
+				og: { image: "/merise/og.webp" },
+				subitems: [
+					{ title: "Introduction", href: "/docs/merise" },
+					{
+						title: "Dictionnaire de données",
+						href: "/docs/merise/dictionnaire-de-donnees",
+					},
+					{ title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" },
+					{ title: "Modèle Logique de Données", href: "/docs/merise/mld" },
+					{ title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
+				],
+			},
+		],
+	},
 ];

-export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
-  return link.subitems.some((subitem) => subitem.href === subitemHref);
+export function doesLinkSubitemExist(
+	link: NavigationLink,
+	subitemHref: string,
+): boolean {
+	return link.subitems.some((subitem) => subitem.href === subitemHref);
 }

-export function findNavigationLink(namespace: string, href?: string): NavigationLink | undefined {
-  const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
+export function findNavigationLink(
+	namespace: string,
+	href?: string,
+): NavigationLink | undefined {
+	const currentUrl = `/${namespace}/${href}`
+		.replace(/\/+/g, "/")
+		.replace(/\/$/, "");

-  const foundLink = navigation
-    .flatMap((section) => section.links)
-    .find((link) => {
-      return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
-    });
+	const foundLink = navigation
+		.flatMap((section) => section.links)
+		.find((link) => {
+			return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
+		});

-  return foundLink;
+	return foundLink;
 }
--- a/app/pages/docs/frontend/+Page.mdx
+++ b/app/pages/docs/frontend/+Page.mdx
@ -0,0 +1,8 @@
+---
+title: "Introduction au Frontend : Langages et technologies"
+description: 
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
--- a/app/pages/docs/html/attributs/+Page.mdx
+++ b/app/pages/docs/html/attributs/+Page.mdx
@ -0,0 +1,8 @@
+---
+title: "Exploration approfondie des attributs HTML : utilisation, explications et exemples pratiques"
+description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
--- a/app/pages/docs/html/balise-head/+Page.mdx
+++ b/app/pages/docs/html/balise-head/+Page.mdx
@ -0,0 +1,83 @@
+---
+title: Comprendre la fonctionnalité et l'importance de la balise <head> dans une page HTML
+description: Comprendre comme la balise <head> contribue à la structure et au fonctionnement d'une page web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Dans l'introduction au HTML, nous avons exploré la structure générale d'une page HTML. Nous avons vu que le contenu visible d'une page est défini dans la balise `<body>`,
+mais savais-tu que ce n'est pas la seule balise qui joue un rôle essentiel dans la création d'une page web ?
+
+Il existe également une balise qui est tout aussi importante, mais qui est souvent négligée : la **balise `<head>`**.  
+
+## 🎓 Aperçu de la balise \<head\>
+
+La balise `<head>` est située entre les balises `<html>` et `<body>`. Elle ne contient pas de contenu directement visible sur la page, mais
+elle fournit des métadonnées importantes et inclut des liens vers des ressources externes, comme des fichiers CSS et JavaScript.
+
+<tabs.htmlBasicHead />
+
+## 🔎 Les métadonnées
+
+Certaines balises situées dans la balise `<head>` fournissent des informations essentielles au navigateur, aux moteurs de recherche et à d'autres applications.
+Ces informations sont appelées **métadonnées**.
+
+Voici un aperçu de certains éléments courants que tu peux y trouver :
+
+- **Titre** `<title>`
+  - Définit le titre de la page, affiché dans l'onglet du navigateur.
+  - Il est important pour le référencement et l'expérience utilisateur.
+- **Encodage des caractères** `<meta charset="UTF-8">`
+  - Définit l'encodage de caractères utilisé dans le document.
+  - UTF-8 est couramment utilisé en raison de sa prise en charge des langues et caractères spéciaux.
+- **Viewport** `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
+  - Configure la vue du navigateur pour les appareils mobiles.
+  - Permet de garantir que le site web est adapté à un affichage adaptatif _(responsive)_.
+- **Description** `<meta name="description" content="...">`
+  - Fournit une brève description de la page.
+  - Utilisée par les moteurs de recherche pour afficher un extrait dans les résultats de recherche.
+- **Mots-clés** `<meta name="keywords" content="...">`
+  - Liste de mots-clés pertinents pour la page.
+
+<Callout type="note" title='Balise `<meta name="keywords">`'>
+  Cette balise est encore souvent utilisée, mais son importance est que très légère dans le référencement moderne.
+  
+  À titre d'information : [Google ne l'utilise pas](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=fr).
+</Callout>
+
+## 🎨 Styles et scripts
+
+La balise `<head>` permet également d'inclure des ressources externes telles que des feuilles de style _(CSS)_ et des scripts _(JavaScript)_.
+Ces ressources permettent de styliser la page et d'ajouter des fonctionnalités interactives.
+
+<tabs.htmlStylesAndScripts />
+
+Dans cet exemple, une feuille de style externe appelée `styles.css` est liée au document HTML à l'aide de la balise `<link>`.
+De même, un script JavaScript externe appelé `app.js` est inclus à l'aide de la balise `<script>`.
+
+Ces fichiers sont chargés lorsque la page est ouverte, ce qui permet d'appliquer des styles et d'ajouter des fonctionnalités à la page.
+
+<Callout type="warning" title="Inclusion des fichiers JavaScript dans la balise `<head>`">
+  Il est recommandé d'inclure les fichiers JavaScript à la fin de la balise `<body>` pour améliorer les performances de chargement de la page.
+  
+  En effet, cela permet au navigateur de charger le contenu visible avant d'exécuter les scripts, ce qui améliore l'expérience utilisateur.
+</Callout>
+
+## 🌐 Le référencement
+
+Tu l'auras remarqué, j'ai parlé de référencement à plusieurs reprises dans cet article. Mais alors, qu'est-ce que c'est ?
+
+Le **référencement** _(ou SEO pour Search Engine Optimization)_ est l'ensemble des techniques visant à
+améliorer la visibilité d'un site web dans les résultats des moteurs de recherche.
+
+Il est essentiel de bien structurer la balise `<head>` pour optimiser le référencement de ta page.  
+Les moteurs se basent sur les informations fournies dans cette balise pour indexer et classer les pages web.
+
+Mais bien entendu, le référencement ne se limite pas à la balise `<head>` ! 😉
+
+## 📚 Conclusion
+
+La balise `<head>` est un élément essentiel de toute page HTML. Elle fournit des informations essentielles pour la structure
+d'une page HTML, y compris le titre, les métadonnées et les liens vers des ressources externes.
--- a/app/pages/docs/html/balise-head/tabs.tsx
+++ b/app/pages/docs/html/balise-head/tabs.tsx
@ -0,0 +1,42 @@
+import { Snippet } from "@/components/Snippet";
+
+const htmlBasicHeadSnippets = [
+	{
+		name: "Exemple de la balise head",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mon super site</title>
+  <meta name="description" content="Ceci est un exemple de page HTML.">
+</head>
+
+<body></body>
+</html>`,
+	},
+];
+
+const htmlStylesAndScriptsSnippets = [
+	{
+		name: "Exemple d'inclusion de styles et de scripts",
+		codeLanguage: "html",
+		withLineNumbers: true,
+		code: `<head>
+  <!-- Feuille de style CSS -->
+  <link rel="stylesheet" href="/styles/styles.css">
+
+  <!-- Script JavaScript -->
+  <script src="/scripts/app.js"></script>
+</head>`,
+	},
+];
+
+export default {
+	htmlBasicHead: () => <Snippet snippets={htmlBasicHeadSnippets} />,
+	htmlStylesAndScripts: () => (
+		<Snippet snippets={htmlStylesAndScriptsSnippets} />
+	),
+};
--- a/app/pages/docs/html/balises-de-base/+Page.mdx
+++ b/app/pages/docs/html/balises-de-base/+Page.mdx
@ -0,0 +1,8 @@
+---
+title: Découverte des balises HTML courantes pour structurer une page web
+description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
--- a/app/pages/docs/html/formulaires/+Page.mdx
+++ b/app/pages/docs/html/formulaires/+Page.mdx
@ -0,0 +1,8 @@
+---
+title: "Créer des formulaires interactifs avec HTML : éléments, types d'entrées et validation de données"
+description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
+tags: []
+---
+
+import Callout from "@/components/Callout";
+
Author	SHA1	Message	Date
GauthierWebDev	5258ffdbca	docs(html): add section on styles and scripts in <head>	2025-05-13 13:54:28 +02:00
GauthierWebDev	814efdce81	feat(docs): add introduction to frontend documentation	2025-05-13 13:45:55 +02:00
GauthierWebDev	85c2d26c81	refactor(nav): format navigation types consistently	2025-05-13 13:22:28 +02:00