Bruno Charest
2a5047b7f0
feat: redesign code block header with professional action buttons and tabbed menu - Replaced collapsible header with dedicated action buttons for line numbers, word wrap, and collapse/preview - Added custom SVG icons for each action button with active/inactive states and hover effects - Implemented tabbed menu interface with Language/Theme/Font/Options sections replacing vertical scrolling - Added collapsed preview mode with syntax highlighting using cached highlightedHtml - Introduced auto-detect language toggle
🌌 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.