Bruno Charest
914515efe4
docs: restructure README with concise overview and improved organization - Condensed README from 715 to 113 lines with streamlined feature descriptions - Replaced verbose documentation with quick-start focused content - Reorganized sections: removed detailed architecture, API endpoints, and Meilisearch implementation details - Added version badges and simplified feature categories (Navigation, Markdown, Graph) - Streamlined installation instructions with Docker-first approach and simplified local
144 lines
4.8 KiB
Markdown
144 lines
4.8 KiB
Markdown
# ✅ Bloc de Code Nimbus - Améliorations Terminées
|
|
|
|
## 🎯 Fonctionnalités Implémentées
|
|
|
|
### 1. **Mode Preview / Collapse** ✓
|
|
- **En mode replié** : Le bloc affiche une forme de "pill" compacte (comme le bloc File)
|
|
- Icône de code
|
|
- Nom du langage détecté
|
|
- Nombre de lignes
|
|
- Bouton "Preview"
|
|
- **Clic sur le bloc replié** : Expansion pour voir le code complet
|
|
|
|
### 2. **Détection Automatique du Langage** ✓
|
|
- Utilise `highlight.js` pour détecter automatiquement le langage
|
|
- Se déclenche lors de la saisie de code (si aucun langage n'est sélectionné)
|
|
- Mise à jour automatique de l'affichage du langage
|
|
|
|
### 3. **Menu de Sélection de Langage** ✓
|
|
- Badge cliquable affichant le langage actuel
|
|
- Menu déroulant avec liste complète des langages supportés
|
|
- Langages disponibles : JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, PHP, Ruby, Swift, Kotlin, Scala, HTML, CSS, SCSS, JSON, XML, YAML, Markdown, SQL, Bash, Shell, PowerShell, Dockerfile, GraphQL, Plain Text
|
|
|
|
### 4. **Menu de Sélection de Thèmes** ✓
|
|
- Accessible via le menu principal (bouton ⋮)
|
|
- Sous-menu avec 11 thèmes préconçus :
|
|
- Darcula
|
|
- Default
|
|
- MBO
|
|
- MDN
|
|
- Monokai
|
|
- Neat
|
|
- NEO
|
|
- Nord
|
|
- Yeti
|
|
- Yonce
|
|
- Zenburn
|
|
|
|
### 5. **Menu de Sélection de Fonts** ✓
|
|
- Accessible via le menu principal (bouton ⋮)
|
|
- Sous-menu avec 6 polices couramment utilisées pour le code :
|
|
- Default Mono (système)
|
|
- **Fira Code** (avec ligatures)
|
|
- **JetBrains Mono**
|
|
- **Consolas**
|
|
- **Source Code Pro**
|
|
- **Ubuntu Mono**
|
|
- Import Google Fonts pour toutes les polices web
|
|
|
|
### 6. **Bouton "Copier dans le Presse-papiers"** ✓
|
|
- Icône de copie dans la barre d'outils
|
|
- Animation de confirmation (✓) après copie
|
|
- Également disponible dans le menu principal
|
|
|
|
### 7. **Toggle Numéros de Ligne** ✓
|
|
- Bouton (#) dans la barre d'outils
|
|
- Affichage/masquage des numéros de ligne
|
|
- Colonne dédiée avec fond semi-transparent
|
|
- Également dans le menu principal
|
|
|
|
### 8. **Légende au Bas du Bloc** ✓
|
|
- **Gauche** :
|
|
- Indicateur coloré (point) + Nom du langage
|
|
- Nombre de caractères
|
|
- Nombre de lignes
|
|
- **Droite** :
|
|
- Nom de la police actuelle (visible au survol)
|
|
|
|
### 9. **Menu Principal Amélioré** ✓
|
|
- Bouton ⋮ (trois points verticaux)
|
|
- **Structure du menu** :
|
|
- Theme → (sous-menu)
|
|
- Font → (sous-menu)
|
|
- ---
|
|
- Copy code
|
|
- Show/Hide line numbers
|
|
- Enable/Disable wrap
|
|
- ---
|
|
- Collapse block
|
|
|
|
### 10. **Fonctionnalités Supplémentaires** ✓
|
|
- **Word wrap** : Toggle pour activer/désactiver le retour à la ligne
|
|
- **Interface responsive** : Menus repositionnés intelligemment
|
|
- **Scrollbar personnalisé** : Design moderne et discret
|
|
- **Icônes SVG** : Utilisation d'icônes SVG pour une meilleure qualité
|
|
- **Fermeture automatique** : Les menus se ferment en cliquant à l'extérieur
|
|
- **Animations fluides** : Transitions douces pour toutes les interactions
|
|
- **Hover effects** : Feedback visuel sur tous les éléments interactifs
|
|
|
|
## 🎨 Améliorations Visuelles
|
|
|
|
### Header
|
|
- Fond semi-transparent avec effet de profondeur
|
|
- Badge de langage stylisé avec couleur primaire
|
|
- Actions rapides (copie, numéros de ligne) facilement accessibles
|
|
- Séparateurs visuels pour organiser l'interface
|
|
|
|
### Body
|
|
- Padding confortable pour la lisibilité
|
|
- Scrollbar personnalisé discret
|
|
- Support du mode sombre et clair
|
|
- Colonne de numéros de ligne avec bordure subtile
|
|
|
|
### Footer
|
|
- Informations contextuelles toujours visibles
|
|
- Design minimaliste qui ne distrait pas
|
|
- Nom de police visible au survol
|
|
|
|
### Collapsed State
|
|
- Design de "pill" élégant et compact
|
|
- Icône de code reconnaissable
|
|
- Informations essentielles visibles
|
|
- Hover effect pour indiquer l'interactivité
|
|
|
|
## 🔧 Architecture Technique
|
|
|
|
### Composant Principal
|
|
- `code-block.component.ts` : Logique complète réécrite
|
|
- Utilisation de Signals Angular pour la réactivité
|
|
- HostListener pour fermer les menus au clic extérieur
|
|
- Gestion d'état local pour les menus et sous-menus
|
|
|
|
### Styles
|
|
- `code-themes.css` : 11 thèmes de couleur avec support dark/light
|
|
- Import Google Fonts pour les polices web
|
|
- Classes CSS pour chaque police
|
|
- Scrollbar personnalisé
|
|
|
|
### Services
|
|
- `CodeThemeService` : Gestion centralisée des thèmes et langages
|
|
- 28 langages supportés avec noms d'affichage
|
|
|
|
### Modèle de Données
|
|
- `CodeProps` : Interface complète avec tous les champs nécessaires
|
|
- `lang`, `code`, `theme`, `showLineNumbers`, `enableWrap`, `collapsed`
|
|
|
|
## ✅ Build Réussi
|
|
Le projet compile sans erreurs avec `npm run build`.
|
|
|
|
## 📝 Notes
|
|
- Toutes les fonctionnalités demandées ont été implémentées
|
|
- Le design est professionnel et moderne
|
|
- La performance est optimisée (détection de langage avec debouncing implicite)
|
|
- Compatibilité totale avec l'architecture existante du projet Nimbus
|