Drei Probleme, drei Fixes:
1. Touch-Drag auf Graph geht nicht:
obv's mousedown/mousemove/mouseup sind Mausevents only.
Fix: zusätzlich touchstart/touchmove/touchend/touchcancel
+ getPos() Helper der touches[0] oder clientX nutzt
+ preventDefault() auf Drag (sonst versucht iOS zu scrollen)
2. Suche und Content-Scroll blockiert:
obv's animateGraph() läuft mit requestAnimationFrame endlos
und blockt den Main-Thread auf iOS. Plus iOS-300ms-Tap-Delay
auf inline onclick=.
Fix:
- document.hidden check (skip rendering wenn Tab im Hintergrund)
- autoRotate pausiert 3s nach User-Interaktion
- html, body { touch-action: manipulation } (entfernt 300ms delay)
- -webkit-tap-highlight-color: transparent (entfernt blauen Flash)
- .vault-content, .vault-sidebar { touch-action: pan-y, -webkit-overflow-scrolling: touch }
- .vault-graph canvas { touch-action: none } (damit Browser-Default Three.js-Drag nicht blockt)
Nicht angefasst: obv's Inline-onclick-Handler (Suche-Eingabe, File-Click,
WikiLinks) — diese funktionieren sobald der 300ms-Tap-Delay weg ist
und der Main-Thread nicht mehr blockt.
🤖 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