Drei Probleme mit der JS-Injection: 1. CSS kommt NACH First Paint → User sieht kurze obv-Layout, dann 'springt' zu responsive Layout (FOUC = Flash of Unstyled Content) 2. JS-Injection kann fehlschlagen (head nicht ready, Browser-Inkonsistenzen) 3. Inline <style>-Tag wird nicht gecacht, lädt bei jedem Reload Fix: hermes-custom.css als separate Datei, geladen via <link rel='stylesheet'> im HEAD. Server liefert sie automatisch. Außerdem: Mobile-Mode zeigt Graph als Bottom-Panel (140px), nicht mehr display:none. User behält Wiki-Beziehungen auch auf Phone. vault-custom.js.js behält injectResponsiveCSS als no-op für Backward-Compat. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Hermes Wiki Viewer
A customizable Obsidian-vault viewer with 3D Graph visualization, current-page highlighting, and responsive layout. Designed specifically for Lukas Huber's Hermes Wiki workflow.
This is a side-project fork of DanielCheer/obsidian-web-viewer (MIT, 2026-04) with customizations layered on top via an additive vault-custom.js. Upstream patches merge cleanly because we touch exactly one line of vault.html.
Features (in addition to upstream)
- Current-page highlighting in 3D Graph — the node representing the open file gets a brighter material and a glow outline; connected nodes (via
[[wikilinks]]) are also highlighted; unrelated nodes dim to 20% opacity - Click-to-navigate on 3D Graph — Three.js raycaster triggers file navigation on node click
- Responsive layout — graph collapses to a bottom panel below 1024px viewport; tree collapses to hamburger menu below 768px
- Backlinks panel (planned) — see CHANGELOG.md
Features (from upstream, unchanged)
- File tree sidebar (collapsible folder tree)
- Markdown rendering with code blocks, tables, blockquotes, images
- Wikilink navigation (
[[links]]click-to-traverse) - YAML frontmatter rendered as styled card
- Full-text search by note name and content with snippets
- 3D graph visualization (Three.js) showing note connections
- Catppuccin-inspired dark theme
- Zero client-side setup — anyone with the URL can browse
Architecture
See docs/ARCHITECTURE.md for the design rationale (why vault-custom.js, why the minimal vault.html patch, why we don't fork aggressively).
Quick Start
# Clone
git clone https://github.com/LukasHuber/hermes-wiki-viewer.git
cd hermes-wiki-viewer
# Optional: PyYAML for frontmatter
pip install -r requirements.txt
# Point to your vault
python3 server.py --vault /path/to/your/vault --host 127.0.0.1 --port 8765
# Open http://localhost:8765
For Tailscale access (Lukas' typical setup), pair with tailscale serve:
tailscale serve --bg --https=443 http://127.0.0.1:8765
# Access via https://<hostname>.<tailnet>.ts.net/
One-command setup via wrapper script
The scripts/hermes-wiki-serve.sh wrapper handles start/stop/logs/status, PID-tracking, log-files, and Tailscale integration:
# Install: copy script to PATH
cp scripts/hermes-wiki-serve.sh ~/.local/bin/
chmod +x ~/.local/bin/hermes-wiki-serve.sh
# Use:
hermes-wiki-serve.sh start # starts server, sets up tailscale serve
hermes-wiki-serve.sh status # shows PID, Tailscale-URL, health
hermes-wiki-serve.sh logs # tail all logs
hermes-wiki-serve.sh stop # stops server (keeps tailscale running)
hermes-wiki-serve.sh restart # stop + start
The script defaults to using this repo at ~/repos/hermes-wiki-viewer/. Override via HERMES_WIKI_OWV_DIR.
Customization
vault-custom.js is Lukas' own code, organized into clear sections:
// Current-page highlighting
window.HermesCustom = window.HermesCustom || {};
HermesCustom.highlightCurrentNode = function() { ... };
// Graph click-to-navigate
HermesCustom.setupGraphClickHandler = function() { ... };
// Responsive layout
HermesCustom.responsiveLayout = function() { ... };
To add a new customization, add a method to HermesCustom and call it from HermesCustom.init() at the bottom of the file.
Updating from upstream
git remote add upstream https://github.com/DanielCheer/obsidian-web-viewer.git
git fetch upstream
git merge upstream/master
# Conflicts should only occur in vault.html — the one-line patch
If vault.html has been heavily modified upstream, manually re-apply the single patch:
<!-- Add before </body>: -->
<script src="vault-custom.js"></script>
License
MIT — same as upstream. See LICENSE.
Author
Lukas Huber — see Personal-Profile for context. This fork exists to make the agent-wiki viewing experience fit Lukas' specific needs (3D graph focus, responsive layout for mobile reading, current-page highlighting for fast cross-page navigation).
Upstream: DanielCheer/obsidian-web-viewer © 2026 Daniel Cheer Hermes Wiki Viewer fork © 2026 Lukas Huber