Premier commit déjà bien avancé
This commit is contained in:
93
PROJET.md
Normal file
93
PROJET.md
Normal file
@ -0,0 +1,93 @@
|
||||
# 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](https://milkdown.dev/)
|
||||
* **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](https://picocss.com/)
|
||||
* **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 :**
|
||||
```yaml
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user