From e7ec34ea6a1179561a1d07e60e2034dc5d009fcd Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Wed, 23 Apr 2025 14:58:27 +0200 Subject: [PATCH] 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