agentandClaude 5e0f8d87a8 v0.5: Mobile-Toggle-Pattern statt Bottom-Panel
Drei Probleme mit v0.4 Mobile-Layout:
1. 140px Bottom-Panel frisst vertikalen Platz auf Phone
2. User muss zur 3D-Graph scrollen, die nicht interaktiv nutzbar ist
3. Resize zwischen Mobile/Tablet/Desktop an fixen Breakpoints ist holprig

Fix v0.5: Graph wird als Full-Screen-Modal über Toggle-Button gezeigt.

Neues Layout-System:
- Desktop >=1025px: obv default 3-panel, keine Toggles sichtbar
- Compact 601-1024px: 2-panel (Tree + Content), Graph als Toggle-Modal,
  Toggle-Buttons für Tree UND Graph sichtbar im Header
- Mobile <=600px: 1-panel (nur Content), Tree als Hamburger (auto-hide
  nach File-Selection), Graph als Toggle-Modal

Plus Mobile-Overflow-Fix:
- word-wrap + overflow-wrap auf Markdown-Content
- pre/code: white-space: pre-wrap + word-break: break-word
- table: display:block + overflow-x: auto
- img: max-width: 100%

Graph-Modal:
- Full-Screen overlay mit Backdrop
- Title-Bar + Close-Button (×)
- Three.js re-rendered in modal-canvas (für isolierte Performance)
- Click-to-Navigate vom Modal zurück in die Page
- ESC-Taste schließt Modal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-16 18:49:50 +00:00

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

S
Description
Customizable Obsidian-Vault viewer with 3D Graph, current-page highlighting, responsive layout. Fork of DanielCheer/obsidian-web-viewer.
Readme MIT
178 KiB
Languages
Python 33.6%
JavaScript 29.9%
CSS 20.9%
Shell 15.6%