title: Cahier des charges - Application Web avec Sidebar et Markdown description: Description complète de l'application web terminée et fonctionnelle

Cahier des charges - Site Web dynamique avec Sidebar et Markdown

1. Objectif général

Créer un site web dynamique et responsive capable de :

• Afficher un contenu Markdown converti en HTML à la volée.
• Proposer une navigation latérale (sidebar) moderne et stylée.
• Offrir un header visuel avec titre et sous-titre.
• Gérer des alert-box personnalisées via marked.js.
• Permettre des liens internes entre pages Markdown.

2. Structure globale du site

2.1 Header

• Hauteur : 240px.
• Sans marges, bord à bord avec l'écran.
• Image de fond couvrant tout le container (background-size: cover).
• Superposition d'une zone texte centrée horizontalement et verticalement.
• Contient :
  • Un titre principal (H1).
  • Un sous-titre (H2).
• Les titres sont blancs avec un liseré noir d’un pixel.
• Le titre principal est un lien vers la page d'accueil, mais conserve son style.

2.2 Sidebar

• Panneau latéral amovible, piloté par un bouton hamburger.
• Largeur :
  • Petits écrans : ~50%.
  • Très grands écrans : ~25% ou max 350px.
• Couleurs modernes en dégradé.
• Scroll vertical si le contenu dépasse la hauteur de l’écran.
• Sous-menus :
  • Chaque dossier 📁 ou 📂 peut s’ouvrir/fermer au clic.
  • Flèche indiquant l’état ouvert/fermé.
• Overlay semi-transparent pour fermer le sidebar en cliquant à l’extérieur.

2.3 Contenu principal

• Contenu injecté dans un container #content.
• Converti depuis des fichiers Markdown via marked.js.
• Tous les liens internes commencent par #pages/… et sont interceptés par JavaScript.
• Images et blocs pre/code limitée à 100% de la largeur du container.
• Titres H1, H2, H3 responsive via vw.

3. Fonctionnalités principales

3.1 Navigation et sidebar

• Bouton hamburger fixe en haut à droite.
• Sidebar coulissant depuis la gauche.
• Fermeture :
  • Au clic sur overlay.
  • Au clic sur un lien dans le contenu.
• Initialisation automatique des sous-menus au chargement.
• Tri des sous-menus et liens alphabétique si nécessaire.

3.2 Chargement du contenu Markdown

• Fichiers .md chargés via fetch.
• Contenu converti en HTML avec marked.js.
• Extension alert-box définie pour les messages d’alerte colorés :
  • .info → bleu
  • .warning → orange
  • .error → rouge
• Les liens internes (#pages/…) déclenchent le chargement dynamique.
• Premier lien (Accueil) chargé automatiquement au démarrage.

3.3 Titres et styles

• Header :
  • H1 : titre principal
  • H2 : sous-titre
• Titres dans le contenu :
  • H1/H2/H3 responsives (vw).
• Alert-box intégrée via marked.js, personnalisable par classe CSS.

3.4 Accessibilité et responsive

• Design responsive :
  • Sidebar adaptable selon la taille d’écran.
  • Contenu Markdown adaptatif.
• Navigation et boutons utilisables sur mobile.
• Scroll vertical dans sidebar si nécessaire.
• Overlay pour fermer le menu sur mobile.

4. Scripts JavaScript

1. Gestion du hamburger et overlay :
   • Ouverture/fermeture de la sidebar.
2. Configuration de marked.js :
   • Options pedantic, gfm, breaks, xhtml.
   • Extension alert-box.
3. Initialisation des sous-menus :
   • Détection de tous les li contenant ul.
   • Ajout d’un clic pour ouvrir/fermer.
4. Gestion des liens Markdown :
   • Interception des liens internes (#pages/...).
   • Chargement dynamique dans le container #content.
5. Chargement automatique de la page Accueil.
6. Limitation des images et blocs code :
   • Largeur maximale 100% du container.
   • Utilisation de MutationObserver pour contenu dynamique.

5. Contenu Markdown et alert-box

• Les fichiers Markdown contiennent :
  • Titres H1/H2/H3.
  • Listes (puces et numérotées).
  • Images.
  • Code (pre/code).
  • Alert-box avec syntaxe spécifique :

> # Titre de l'alerte {.info}
> Contenu de l'alerte

Alert-boxs colorées selon leur classe : .info, .warning, .error.

Liens internes respectent la syntaxe #pages/….



---

6. Résultat final

Site entièrement fonctionnel.

Sidebar moderne et responsive.

Contenu dynamique et stylé.

Alert-box intégrées et multicolores.

Navigation interne fluide et rapide.

Compatible sur desktop et mobile.



---

7. Notes complémentaires

Aucun plugin externe autre que marked.js.

CSS intégré pour sidebar, header, overlay et contenu.

JavaScript intégré dans un seul fichier pour simplifier le déploiement.

Fonctionnement garanti en local ou sur serveur.