Bruno Charest
b695095593
feat: add line numbers to code blocks with gutter styling - Implemented line number display with absolute positioned gutter (40px width, right-aligned text) - Added dynamic padding to pre element based on showLineNumbers state (3.5rem left padding when enabled) - Moved hljs import to top-level for better performance and removed redundant dynamic imports - Added ViewEncapsulation.None to enable global hljs theme styling - Enhanced gutter styling with semi-transparent background, border, and pointer
🌌 ObsiViewer — Explorateur de voûte Obsidian
ObsiViewer est une application web moderne permettant d'explorer et de visualiser une voûte Obsidian en lecture seule depuis n'importe quel navigateur. Elle offre une expérience riche, fluide et fidèle à Obsidian, idéale pour partager vos connaissances ou accéder à vos notes en déplacement.
✨ Fonctionnalités Clés
🗂️ Navigation & Organisation
- Explorateur de fichiers : Arborescence complète, dossiers pliables.
- Recherche Avancée : Compatible Obsidian (
path:,tag:,file:, etc.) avec backend Meilisearch ultra-rapide. - Favoris (Bookmarks) : Gestion complète et synchronisée avec
.obsidian/bookmarks.json. - Tags & Calendrier : Filtrage par tags et navigation temporelle.
📝 Rendu Markdown Riche
- Support complet : Wikilinks, Callouts, Task lists, Footnotes, Math (KaTeX).
- Média : Images, diagrammes Mermaid, et dessins Excalidraw.
- Syntax Highlighting : Pour plus de 100 langages.
🕸️ Graphe Interactif
- Visualisation : Graphe de connaissances fluide (d3-force).
- Contrôles : Filtres, groupes de couleurs, physique ajustable.
- Persistance : Sauvegarde des réglages dans
.obsidian/graph.json.
🚀 Démarrage Rapide
Option 1 : Docker (Recommandé)
Utilisez Docker Compose pour lancer la stack complète (Frontend + Backend + Search).
# Dans le dossier docker-compose/
docker compose up -d
Accédez à l'application sur http://localhost:3000.
Option 2 : Développement Local
Prérequis : Node.js 20+, npm.
-
Installation
npm install -
Configuration Copiez
.env.examplevers.envet ajustez le chemin de votre vault :cp .env.example .env # Éditez .env : VAULT_PATH=/chemin/vers/votre/vault -
Lancement
- Frontend (Mode démo) :
npm run dev - Backend API :
node server/index.mjs - Full Stack (avec Meilisearch) :
npm run meili:up # Lance Meilisearch npm run meili:reindex # Indexe le vault node server/index.mjs # Lance l'API npm run dev # Lance le Frontend (autre terminal)
- Frontend (Mode démo) :
⚙️ Configuration
Les principales variables d'environnement (fichier .env) :
| Variable | Description | Défaut |
|---|---|---|
VAULT_PATH |
Chemin absolu ou relatif vers le dossier du vault | ./vault |
PORT |
Port du serveur API Express | 4000 |
MEILI_HOST |
URL de l'instance Meilisearch | http://127.0.0.1:7700 |
MEILI_MASTER_KEY |
Clé API Meilisearch | devMeiliKey123 |
🏗️ Architecture Technique
- Frontend : Angular 20 (Signals, Standalone), TailwindCSS, D3.js.
- Backend : Node.js/Express pour l'API et le file system access.
- Search : Meilisearch pour l'indexation et la recherche performante.
- Live Reload : Server-Sent Events (SSE) et Chokidar pour la détection de changements.
Pour plus de détails, consultez le dossier docs/.
🗺️ Roadmap
Le projet est en développement actif. Consultez ROADMAP.md pour voir les fonctionnalités planifiées et l'avancement.
🤝 Contribution
Les contributions sont les bienvenues !
- Forkez le projet.
- Créez une branche (
git checkout -b feature/AmazingFeature). - Commitez vos changements (
git commit -m 'Add some AmazingFeature'). - Poussez la branche (
git push origin feature/AmazingFeature). - Ouvrez une Pull Request.
📄 Licence
Usage libre pour développement et consultation.