ObsiViewer · Obsidian Vault Viewer

ObsiViewer est une application Angular permettant de consulter un coffre (vault) Obsidian en lecture seule : exploration des fichiers, rendu Markdown enrichi, graphe des liens et visualisation des tags. Le projet utilise des données mockées pour démontrer l’interface, sans connexion à un véritable backend.

Architecture du projet

src/ : composants Angular (app.component.*, components/, services/, types.ts).
docker/ : Dockerfiles et scripts PowerShell/Bash pour la construction et le déploiement d’images.
docker-compose/ : orchestration d'un conteneur obsi-viewer-angular avec gestion des volumes pour la voûte Obsidian.
index.tsx : point d’entrée Angular (bootstrap sans zone).
metadata.json : métadonnées descriptives pour l’intégration AI Studio.

Prérequis

Node.js 20+ et npm (node --version).
Angular CLI (npm install -g @angular/cli) recommandé pour les commandes ng locales.
Optionnel : Docker Engine (et WSL Debian sur Windows) si vous utilisez les scripts de conteneurisation.

Configuration des variables d’environnement

Copiez .env.local (ou créez-le) et renseignez vos propres clés, notamment GEMINI_API_KEY. Ce fichier est ignoré par Git.
Pour Docker Compose, dupliquez docker-compose/.env.example en docker-compose/.env et remplacez toutes les valeurs de démonstration avant toute mise en production. Ne stockez pas de secrets réels dans le dépôt.

Lancement en développement (Angular CLI)

npm install
npm run dev

L’application est servie sur http://localhost:3000/ (voir angular.json).
Les données proviennent exclusivement de src/services/vault.service.ts.

Build de production

npm run build

La commande appelle ng build --configuration=production et génère la sortie dans dist/ selon angular.json.
Vous pouvez servir le dossier dist/ avec un serveur statique de votre choix (npx http-server dist par exemple).

Conteneurisation

Construction d’une image locale

Sur Windows, exécutez docker/build-img.ps1 (PowerShell) pour construire ObsiViewer-angular:latest via WSL Debian. Ajoutez -full pour une construction sans cache.
En environnement Linux, utilisez directement docker/Dockerfile.origi : docker build -t obsi-viewer:latest -f docker/Dockerfile.origi .
Le Dockerfile fourni part d’une image Node 20, construit l’application puis attend un serveur Node (server/index.mjs). Si vous n’avez pas ce backend, servez simplement les fichiers dist/ avec un serveur HTTP statique.

Utilisation de Docker Compose

docker-compose/docker-compose.yml référence une image distante docker-registry.dev.home:5000/newtube-angular:latest et monte des volumes applicatifs.
Avant d’exécuter docker compose up -d, préparez docker-compose/.env (via init.sh ou manuellement) et assurez-vous que le registre et les chemins montés existent.

Scripts de déploiement

docker/deploy-img.sh (appelé via deploy-img.ps1) versionne et pousse l’image locale vers un registre HTTP (insecure). Vérifiez la configuration insecure-registries de Docker avant utilisation.

Tests

Aucun test automatisé n’est fourni. Ajoutez vos propres suites (ex. ng test, ng e2e) selon vos besoins.

Limitations connues

Les scripts Docker supposent l’existence d’un dossier server/ et d’un schéma db/schema.sql non inclus ici (héritage AI Studio).
Les clés présentes dans docker-compose/.env et init.sh sont des valeurs de démonstration : remplacez-les impérativement.
Le rendu Markdown est volontairement simplifié (MarkdownService) et peut nécessiter des adaptations pour un vault complet.

Ressources utiles

Documentation officielle Angular : https://angular.dev/
Documentation ng serve : https://angular.dev/cli/serve
Guide Docker Compose : docker-compose/README.md

4.0 KiB Raw Blame History Unescape Escape