docs/html #25

Merged
GauthierWebDev merged 16 commits from docs/html into main 2025-05-13 13:37:11 +00:00
5 changed files with 186 additions and 146 deletions
Showing only changes of commit 85c2d26c81 - Show all commits

View File

@ -1,169 +1,177 @@
const navigationsTypes = { const navigationsTypes = {
GLOBAL: "👋 Général", GLOBAL: "👋 Général",
CERTIFICATIONS: "🎓 Certifications", CERTIFICATIONS: "🎓 Certifications",
DOCUMENTATIONS: "📚 Documentations", DOCUMENTATIONS: "📚 Documentations",
OTHER: "🔗 Autres", OTHER: "🔗 Autres",
}; };
export type NavigationSection = { export type NavigationSection = {
title: string; title: string;
type: (typeof navigationsTypes)[keyof typeof navigationsTypes]; type: (typeof navigationsTypes)[keyof typeof navigationsTypes];
position: "start" | "end" | "auto"; position: "start" | "end" | "auto";
links: NavigationLink[]; links: NavigationLink[];
}; };
export type NavigationOG = Partial<{ export type NavigationOG = Partial<{
image: string; image: string;
}>; }>;
export type NavigationLink = { export type NavigationLink = {
title: string; title: string;
href: string; href: string;
og?: NavigationOG; og?: NavigationOG;
subitems: NavigationSubItem[]; subitems: NavigationSubItem[];
}; };
export type NavigationSubItem = { export type NavigationSubItem = {
title: string; title: string;
href: string; href: string;
}; };
export const navigation: NavigationSection[] = [ export const navigation: NavigationSection[] = [
{ {
title: "Préambule", title: "Préambule",
type: navigationsTypes.GLOBAL, type: navigationsTypes.GLOBAL,
position: "start", position: "start",
links: [ links: [
{ title: "Memento Dev", href: "/", subitems: [] }, { title: "Memento Dev", href: "/", subitems: [] },
{ title: "Certifications", href: "/certifications", subitems: [] }, { title: "Certifications", href: "/certifications", subitems: [] },
{ title: "Documentations", href: "/docs", subitems: [] }, { title: "Documentations", href: "/docs", subitems: [] },
], ],
}, },
{ {
title: "Communauté", title: "Communauté",
type: navigationsTypes.GLOBAL, type: navigationsTypes.GLOBAL,
position: "start", position: "start",
links: [ links: [
{ {
title: "Influenceurs", title: "Influenceurs",
href: "/communaute/influenceurs", href: "/communaute/influenceurs",
subitems: [], subitems: [],
}, },
{ {
title: "Partages et réutilisations", title: "Partages et réutilisations",
href: "/communaute/partages", href: "/communaute/partages",
subitems: [], subitems: [],
}, },
], ],
}, },
{ {
title: "Légal", title: "Légal",
type: navigationsTypes.OTHER, type: navigationsTypes.OTHER,
position: "end", position: "end",
links: [ links: [
{ title: "Mentions légales", href: "/mentions-legales", subitems: [] }, { title: "Mentions légales", href: "/mentions-legales", subitems: [] },
{ {
title: "Politique de confidentialité", title: "Politique de confidentialité",
href: "/politique-de-confidentialite", href: "/politique-de-confidentialite",
subitems: [], subitems: [],
}, },
], ],
}, },
{ {
title: "Développeur Web et Web Mobile", title: "Développeur Web et Web Mobile",
type: navigationsTypes.CERTIFICATIONS, type: navigationsTypes.CERTIFICATIONS,
position: "auto", position: "auto",
links: [ links: [
{ title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] }, { title: "Résumé du titre", href: "/certifications/dwwm", subitems: [] },
{ {
title: "Activité Type 1", title: "Activité Type 1",
href: "/certifications/dwwm/at1", href: "/certifications/dwwm/at1",
subitems: [ subitems: [
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at1" }, { title: "Résumé de l'AT", href: "/certifications/dwwm/at1" },
{ title: "CP 1", href: "/certifications/dwwm/at1/cp1" }, { title: "CP 1", href: "/certifications/dwwm/at1/cp1" },
{ title: "CP 2", href: "/certifications/dwwm/at1/cp2" }, { title: "CP 2", href: "/certifications/dwwm/at1/cp2" },
{ title: "CP 3", href: "/certifications/dwwm/at1/cp3" }, { title: "CP 3", href: "/certifications/dwwm/at1/cp3" },
{ title: "CP 4", href: "/certifications/dwwm/at1/cp4" }, { title: "CP 4", href: "/certifications/dwwm/at1/cp4" },
], ],
}, },
{ {
title: "Activité Type 2", title: "Activité Type 2",
href: "/certifications/dwwm/at2", href: "/certifications/dwwm/at2",
subitems: [ subitems: [
{ title: "Résumé de l'AT", href: "/certifications/dwwm/at2" }, { title: "Résumé de l'AT", href: "/certifications/dwwm/at2" },
{ title: "CP 5", href: "/certifications/dwwm/at2/cp5" }, { title: "CP 5", href: "/certifications/dwwm/at2/cp5" },
{ title: "CP 6", href: "/certifications/dwwm/at2/cp6" }, { title: "CP 6", href: "/certifications/dwwm/at2/cp6" },
{ title: "CP 7", href: "/certifications/dwwm/at2/cp7" }, { title: "CP 7", href: "/certifications/dwwm/at2/cp7" },
{ title: "CP 8", href: "/certifications/dwwm/at2/cp8" }, { title: "CP 8", href: "/certifications/dwwm/at2/cp8" },
], ],
}, },
], ],
}, },
{ {
title: "Front-end", title: "Front-end",
type: navigationsTypes.DOCUMENTATIONS, type: navigationsTypes.DOCUMENTATIONS,
position: "auto", position: "auto",
links: [ links: [
{ {
title: "React", title: "HTML",
href: "/docs/react", href: "/docs/html",
subitems: [ subitems: [{ title: "Introduction", href: "/docs/html" }],
{ title: "Introduction", href: "/docs/react" }, },
{ title: "Initialisation", href: "/docs/react/initialisation" }, {
{ title: "Syntaxe JSX", href: "/docs/react/jsx" }, title: "React",
{ title: "Premier composant", href: "/docs/react/premier-composant" }, href: "/docs/react",
{ subitems: [
title: "State et cycle de vie", { title: "Introduction", href: "/docs/react" },
href: "/docs/react/state-et-cycle-de-vie", { title: "Initialisation", href: "/docs/react/initialisation" },
}, { title: "Syntaxe JSX", href: "/docs/react/jsx" },
{ title: "Hooks", href: "/docs/react/hooks" }, { title: "Premier composant", href: "/docs/react/premier-composant" },
{ title: "Le hook useContext", href: "/docs/react/use-context" }, {
{ title: "Le hook useReducer", href: "/docs/react/use-reducer" }, title: "State et cycle de vie",
], href: "/docs/react/state-et-cycle-de-vie",
}, },
{ { title: "Hooks", href: "/docs/react/hooks" },
title: "HTML", { title: "Le hook useContext", href: "/docs/react/use-context" },
href: "/docs/html", { title: "Le hook useReducer", href: "/docs/react/use-reducer" },
subitems: [{ title: "Introduction", href: "/docs/html" }], ],
}, },
], ],
}, },
{ {
title: "Base de données", title: "Base de données",
type: navigationsTypes.DOCUMENTATIONS, type: navigationsTypes.DOCUMENTATIONS,
position: "auto", position: "auto",
links: [ links: [
{ {
title: "Merise", title: "Merise",
href: "/docs/merise", href: "/docs/merise",
og: { image: "/merise/og.webp" }, og: { image: "/merise/og.webp" },
subitems: [ subitems: [
{ title: "Introduction", href: "/docs/merise" }, { title: "Introduction", href: "/docs/merise" },
{ {
title: "Dictionnaire de données", title: "Dictionnaire de données",
href: "/docs/merise/dictionnaire-de-donnees", href: "/docs/merise/dictionnaire-de-donnees",
}, },
{ title: "Modèle Conceptuel de Données", href: "/docs/merise/mcd" }, { 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 Logique de Données", href: "/docs/merise/mld" },
{ title: "Modèle Physique de Données", href: "/docs/merise/mpd" }, { title: "Modèle Physique de Données", href: "/docs/merise/mpd" },
], ],
}, },
], ],
}, },
]; ];
export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean { export function doesLinkSubitemExist(
return link.subitems.some((subitem) => subitem.href === subitemHref); link: NavigationLink,
subitemHref: string,
): boolean {
return link.subitems.some((subitem) => subitem.href === subitemHref);
} }
export function findNavigationLink(namespace: string, href?: string): NavigationLink | undefined { export function findNavigationLink(
const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, ""); namespace: string,
href?: string,
): NavigationLink | undefined {
const currentUrl = `/${namespace}/${href}`
.replace(/\/+/g, "/")
.replace(/\/$/, "");
const foundLink = navigation const foundLink = navigation
.flatMap((section) => section.links) .flatMap((section) => section.links)
.find((link) => { .find((link) => {
return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl); return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
}); });
return foundLink; return foundLink;
} }

View File

@ -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";

View File

@ -0,0 +1,8 @@
---
title: Comprendre la fonctionnalité et l'importance de la balise \<head\> dans une page HTML
description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
tags: []
---
import Callout from "@/components/Callout";

View File

@ -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";

View File

@ -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";