From baca4c78e7b28b55a1a1a8ff0bb0fef35dbc5438 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Wed, 23 Apr 2025 14:36:34 +0200 Subject: [PATCH 01/15] style: Update navigation.ts formatting and structure --- app/libs/navigation.ts | 295 +++++++++++++++++----------------- app/pages/docs/html/+Page.mdx | 36 +++++ 2 files changed, 182 insertions(+), 149 deletions(-) create mode 100644 app/pages/docs/html/+Page.mdx diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts index 325861d..69807a9 100644 --- a/app/libs/navigation.ts +++ b/app/libs/navigation.ts @@ -1,172 +1,169 @@ 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: "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: "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" }, + ], + }, + ], + }, ]; -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; } diff --git a/app/pages/docs/html/+Page.mdx b/app/pages/docs/html/+Page.mdx new file mode 100644 index 0000000..4b60041 --- /dev/null +++ b/app/pages/docs/html/+Page.mdx @@ -0,0 +1,36 @@ +--- +title: Introduction au 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"; + +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. + +Mais avant de plonger dans le vif du sujet, faisons un petit tour d'horizon de ce qu'est le HTML et pourquoi il est si important. + +## đŸ€” 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. + + + Avant de rĂ©pondre Ă  cette question, il est important de connaĂźtre la dĂ©finition d'un langage de programmation. + + + 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 ! + + \ No newline at end of file -- 2.45.2 From e7ec34ea6a1179561a1d07e60e2034dc5d009fcd Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Wed, 23 Apr 2025 14:58:27 +0200 Subject: [PATCH 02/15] style: Update colors in prism.css for consistency --- app/layouts/prism.css | 25 ++++++++------- app/pages/+data.ts | 59 ++++++++++++++++++----------------- app/pages/docs/html/+Page.mdx | 40 +++++++++++++++++------- app/pages/docs/html/tabs.tsx | 52 ++++++++++++++++++++++++++++++ app/pages/docs/html/test.html | 0 5 files changed, 124 insertions(+), 52 deletions(-) create mode 100644 app/pages/docs/html/tabs.tsx create mode 100644 app/pages/docs/html/test.html diff --git a/app/layouts/prism.css b/app/layouts/prism.css index e6feb9e..72743f5 100644 --- a/app/layouts/prism.css +++ b/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; -} \ No newline at end of file + color: #0184bc; +} diff --git a/app/pages/+data.ts b/app/pages/+data.ts index 873d355..98db99e 100644 --- a/app/pages/+data.ts +++ b/app/pages/+data.ts @@ -7,39 +7,40 @@ import buildTitle from "./buildTitle"; export type Data = Awaited>; export async function data(pageContext: PageContext) { - const config = useConfig(); - await docCache.waitingForCache(20000); + const config = useConfig(); + await docCache.waitingForCache(20000); - const { - exports: { frontmatter }, - urlParsed, - } = pageContext; - const isRoot = urlParsed.pathname === "/"; + const { + exports: { frontmatter }, + urlParsed, + } = pageContext; + const isRoot = urlParsed.pathname === "/"; - config({ - title: buildTitle(isRoot ? undefined : frontmatter?.title), - description: frontmatter?.description, - }); + config({ + title: buildTitle(isRoot ? undefined : frontmatter?.title), + description: frontmatter?.description, + }); - let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, ""); - if (cachePathname === "") cachePathname = "index"; + let cachePathname = urlParsed.pathname.replace(/\/$/, "").replace(/^\//, ""); + if (cachePathname === "") cachePathname = "index"; - const doc = docCache.get(cachePathname); + const doc = docCache.get(cachePathname); + console.log(doc); - if (!doc) { - console.error( - `DocCache: No doc found for ${cachePathname}. This is a bug!`, - "Please report it to the maintainers.", - ); - } + if (!doc) { + console.error( + `DocCache: No doc found for ${cachePathname}. This is a bug!`, + "Please report it to the maintainers.", + ); + } - return { - sections: doc?.sections || [], - frontmatter, - docs: docCache.orderByLastEdit({ - limit: 2, - includedBasePaths: ["docs", "certifications"], - excludedFileNames: [cachePathname, "docs", "certifications"], - }), - }; + return { + sections: doc?.sections || [], + frontmatter, + docs: docCache.orderByLastEdit({ + limit: 2, + includedBasePaths: ["docs", "certifications"], + excludedFileNames: [cachePathname, "docs", "certifications"], + }), + }; } diff --git a/app/pages/docs/html/+Page.mdx b/app/pages/docs/html/+Page.mdx index 4b60041..e5cac42 100644 --- a/app/pages/docs/html/+Page.mdx +++ b/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. 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 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 ! + + 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 ! + + +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 : +- `` : Indique au navigateur que le document est un fichier HTML. +- `` : L'Ă©lĂ©ment racine qui englobe tout le contenu de la page. +- `` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc. +- `` : 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 : + + + + + 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. \ No newline at end of file diff --git a/app/pages/docs/html/tabs.tsx b/app/pages/docs/html/tabs.tsx new file mode 100644 index 0000000..b3ae793 --- /dev/null +++ b/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: ` + + + + + + + + + Mon super site + + + + + + + + + +
+ +

Bienvenue sur ma page HTML

+
+ + +
+ +

Voici un exemple de section

+ +

Ceci est un exemple de paragraphe dans une section.

+
+ + +
+ +

© 2023 Mon Site Web

+
+ +`, + }, +]; + +export default { + htmlBase: () => , +}; diff --git a/app/pages/docs/html/test.html b/app/pages/docs/html/test.html new file mode 100644 index 0000000..e69de29 -- 2.45.2 From 67c9732ee540e7478a8b81d0862129ef1a3de4f0 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Wed, 23 Apr 2025 14:58:34 +0200 Subject: [PATCH 03/15] docs: Delete test.html --- app/pages/docs/html/test.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 app/pages/docs/html/test.html diff --git a/app/pages/docs/html/test.html b/app/pages/docs/html/test.html deleted file mode 100644 index e69de29..0000000 -- 2.45.2 From 6031b88792f2baac8b6982f22f502bd1cccd7672 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Wed, 23 Apr 2025 15:53:21 +0200 Subject: [PATCH 04/15] refactor: Improve code formatting in ReadProgressBar --- app/partials/ReadProgressBar.tsx | 69 ++++++++++++++------------------ 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx index f89e3d1..10f297c 100644 --- a/app/partials/ReadProgressBar.tsx +++ b/app/partials/ReadProgressBar.tsx @@ -1,51 +1,44 @@ import { createEffect, createSignal } from "solid-js"; export function ReadProgressBar() { - const articleContentElement: HTMLElement | null = - document.getElementById("article-content"); - if (!articleContentElement) return null; + const articleContentElement: HTMLElement | null = document.getElementById("article-content"); + if (!articleContentElement) return null; - const [width, setWidth] = createSignal("0%"); + const [width, setWidth] = createSignal("0%"); - const handleScroll = () => { - const articleHeight = articleContentElement.scrollHeight; - const topPosition = articleContentElement.getBoundingClientRect().top; - const windowHeight = window.innerHeight; + const handleScroll = () => { + const articleHeight = articleContentElement.scrollHeight; + const topPosition = articleContentElement.getBoundingClientRect().top; + const windowHeight = window.innerHeight; - if (articleHeight <= windowHeight) { - setWidth("100%"); - return; - } + if (articleHeight <= windowHeight) { + setWidth("100%"); + return; + } - const elementScrollTop = -topPosition; - const scrollableHeight = articleHeight - windowHeight; - const percentage = (elementScrollTop / scrollableHeight) * 100; - const clampedPercentage = Math.max(0, Math.min(100, percentage)); + const elementScrollTop = -topPosition; + const scrollableHeight = articleHeight - windowHeight; + const percentage = (elementScrollTop / scrollableHeight) * 100; + const clampedPercentage = Math.max(0, Math.min(100, percentage)); - setWidth(`${clampedPercentage}%`); - }; + setWidth(`${clampedPercentage}%`); + }; - createEffect(() => { - window.addEventListener("scroll", handleScroll); - window.addEventListener("resize", handleScroll); + createEffect(() => { + window.addEventListener("scroll", handleScroll); + window.addEventListener("resize", handleScroll); - handleScroll(); + handleScroll(); - return () => { - window.removeEventListener("scroll", handleScroll); - window.removeEventListener("resize", handleScroll); - }; - }); + return () => { + window.removeEventListener("scroll", handleScroll); + window.removeEventListener("resize", handleScroll); + }; + }); - return ( -