Compare commits
3 Commits
2a0283785a
...
67c9732ee5
| Author | SHA1 | Date | |
|---|---|---|---|
| 67c9732ee5 | |||
| e7ec34ea6a | |||
| baca4c78e7 |
@ -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;
|
||||
}
|
||||
color: #0184bc;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -7,39 +7,40 @@ import buildTitle from "./buildTitle";
|
||||
export type Data = Awaited<ReturnType<typeof data>>;
|
||||
|
||||
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"],
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
54
app/pages/docs/html/+Page.mdx
Normal file
54
app/pages/docs/html/+Page.mdx
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
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";
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
<Callout type="question" title="Pourquoi HTML n'est pas un langage de programmation ?">
|
||||
Avant de répondre à cette question, il est important de connaître la définition d'un langage de programmation.
|
||||
|
||||
<Callout type="note" title="Langage de programmation" collapsible>
|
||||
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.
|
||||
</Callout>
|
||||
|
||||
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 !
|
||||
</Callout>
|
||||
|
||||
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 :
|
||||
- `<!DOCTYPE html>` : Indique au navigateur que le document est un fichier HTML.
|
||||
- `<html>` : L'élément racine qui englobe tout le contenu de la page.
|
||||
- `<head>` : Contient des informations sur la page, comme le titre, les liens vers les fichiers CSS et JavaScript, etc.
|
||||
- `<body>` : 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 :
|
||||
|
||||
<tabs.htmlBase />
|
||||
|
||||
<Callout type="question" title="C'est quoi la balise `<!-- -->` ?">
|
||||
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.
|
||||
</Callout>
|
||||
52
app/pages/docs/html/tabs.tsx
Normal file
52
app/pages/docs/html/tabs.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Snippet } from "@/components/Snippet";
|
||||
|
||||
const htmlBaseSnippets = [
|
||||
{
|
||||
name: "Exemple de structure HTML de base",
|
||||
codeLanguage: "html",
|
||||
withLineNumbers: true,
|
||||
code: `<!-- On indique au navigateur que le document est en HTML -->
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!-- On indique la langue du document (ici, en français) -->
|
||||
<html lang="fr">
|
||||
|
||||
<!-- On indique les paramètres de la page... -->
|
||||
<head>
|
||||
<!-- ... commme le titre de la page... -->
|
||||
<title>Mon super site</title>
|
||||
|
||||
<!-- ... et la description de la page... -->
|
||||
<meta name="description" content="Ceci est un exemple de page HTML.">
|
||||
</head>
|
||||
|
||||
<!-- On indique le début du corps de la page -->
|
||||
<!-- Le corps de la page contient le contenu visible par l'utilisateur -->
|
||||
<body>
|
||||
<!-- On indique le début d'un en-tête -->
|
||||
<header>
|
||||
<!-- On indique le titre principal de la page -->
|
||||
<h1>Bienvenue sur ma page HTML</h1>
|
||||
</header>
|
||||
|
||||
<!-- On indique le début d'une section -->
|
||||
<section>
|
||||
<!-- On indique un sous-titre -->
|
||||
<h2>Voici un exemple de section</h2>
|
||||
<!-- On indique un paragraphe -->
|
||||
<p>Ceci est un exemple de paragraphe dans une section.</p>
|
||||
</section>
|
||||
|
||||
<!-- On indique le début d'un pied de page -->
|
||||
<footer>
|
||||
<!-- On indique un texte de copyright -->
|
||||
<p>© 2023 Mon Site Web</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
htmlBase: () => <Snippet snippets={htmlBaseSnippets} />,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user