personotes/PROJET.md

Plan de Développement : Éditeur Markdown HTTP(S)

Ce document détaille le plan de développement pour un éditeur Markdown web, avec un backend en Go et un frontend JavaScript simple, intégrant des fonctionnalités WYSIWYG, des commandes slash et une recherche par tags sans base de données.

1. Objectifs Principaux

• Éditeur Markdown : Rapide, simple, avec une notion de WYSIWYG.
• Commandes Slash (/) : Permettre l'utilisation de raccourcis Markdown ou d'autres actions (ex: ajouter la date, des liens).
• Stockage des Notes : Fichiers Markdown purs (.md).
• Recherche par Tags : Possibilité de rechercher des notes par tags, sans utiliser de base de données.
• Architecture : Application web HTTP(S) avec backend Go et frontend JavaScript.

2. Architecture et Technologies Choisies

Backend (Go)

• Langage : Go
• Serveur Web : net/http (bibliothèque standard de Go)
• Rôles :
  • Servir les fichiers statiques du frontend (HTML, CSS, JavaScript).
  • Scanner les fichiers .md au démarrage pour construire et maintenir un index des tags en mémoire.
  • Exposer une API (ex: GET /api/search) pour permettre la recherche dans cet index.
  • (À terme) Gérer la lecture/écriture des fichiers Markdown.

Frontend (JavaScript)

• Langage : JavaScript (ES6+ "vanilla")
• Structure : HTML5, CSS3
• Éditeur Markdown : Milkdown
  • Pourquoi Milkdown ? Éditeur "headless" basé sur Prosemirror et Remark, léger, extensible, supporte nativement les commandes slash (/) et offre une expérience WYSIWYG moderne.
• Style (CSS) : Pico.css
  • Pourquoi Pico.css ? Micro-framework CSS minimaliste qui fournit un style propre et moderne aux éléments HTML de base sans configuration complexe.

3. Détail du Plan par Phase

Phase 1 : Mise en place du Backend Go

1. Créer la structure de projet Go.
2. Mettre en place un serveur HTTP simple utilisant net/http.
3. Configurer le serveur pour servir les fichiers statiques depuis un répertoire public/ (qui contiendra le frontend).
4. Implémenter la logique de scan des fichiers .md :
   • Au démarrage du serveur, parcourir un répertoire désigné (ex: notes/).
   • Pour chaque fichier .md, lire le "Front Matter" YAML en début de fichier.
   • Extraire les tags et autres métadonnées.
   • Construire un index en mémoire (ex: map[string][]string où la clé est le tag et la valeur est une liste de chemins de fichiers).
5. Créer une API de recherche :
   • Définir une route GET /api/search?tag=votre_tag.
   • Cette route interrogera l'index en mémoire et renverra la liste des fichiers correspondants (ex: leurs noms ou chemins relatifs).

Phase 2 : Développement du Frontend

1. Créer le répertoire public/ pour les fichiers frontend.
2. Créer le fichier public/index.html avec la structure de base.
3. Inclure Pico.css via CDN pour le style général.
4. Inclure Milkdown et ses dépendances (via CDN ou modules ES) dans index.html.
5. Créer un fichier public/app.js pour la logique JavaScript.
6. Dans app.js, initialiser l'éditeur Milkdown dans un élément div de index.html.
7. Ajouter les éléments d'interface pour la recherche :
   • Un champ de saisie pour les tags.
   • Un bouton de recherche ou une recherche dynamique.
   • Une zone pour afficher les résultats de la recherche (liste de liens vers les notes).

Phase 3 : Implémentation des Fonctionnalités Clés

1. Configuration des Commandes Slash (/) dans Milkdown :
   • Utiliser le plugin "slash" de Milkdown.
   • Définir des commandes de base (ex: /h1 pour titre 1, /list pour liste).
   • Implémenter des commandes personnalisées :
     • /date : Insère la date actuelle.
     • /lien : Insère un modèle de lien Markdown (ex: [texte du lien](url)).
2. Intégration de la Recherche :
   • Lorsque l'utilisateur saisit un tag et lance la recherche dans le frontend, app.js effectue une requête fetch vers GET /api/search?tag=....
   • Afficher les résultats de l'API dans la zone dédiée du frontend.
   • Permettre de cliquer sur un résultat pour charger le contenu du fichier Markdown correspondant dans l'éditeur (nécessitera une nouvelle API backend pour GET /api/notes/{filename}).
3. Gestion des Fichiers Markdown :
   • (Backend) Créer une API GET /api/notes/{filename} pour lire et renvoyer le contenu d'un fichier Markdown spécifique.
   • (Backend) Créer une API POST /api/notes/{filename} pour sauvegarder le contenu de l'éditeur dans un fichier Markdown.

4. Approche de Stockage des Tags (Sans BDD)

• Format : YAML Front Matter en haut de chaque fichier .md.
• Exemple :

  ---
  title: Mon Titre
  tags: [tag1, tag2, autre-tag]
  date: 2025-11-08
  ---
  

• Indexation : Le backend Go lit ce bloc au démarrage et construit un index en mémoire pour des recherches rapides.
• Mise à jour de l'index : Pour une solution plus robuste, un "watcher" de fichiers (fsnotify) pourra être ajouté pour mettre à jour l'index dynamiquement lors des modifications de fichiers.

Ce plan fournit une feuille de route claire pour le développement de votre éditeur Markdown.