agentandClaude 4bb8134b9c v0.3.0: Responsive-Layout Fixes (Script-Position + CSS-Spezifität)
Drei Bugs gefixt die Responsive-Layout kaputt machten:

1. Script-Tag war NACH </body> platziert (HTML-invalid)
   Fix: Script-Tag ist jetzt VOR </body> im vault.html-Patch

2. CSS-Spezifität zu niedrig (nur .vault-app statt .vault-app.hermes-rc)
   Fix: 2-Klassen-Selektoren .vault-app.hermes-rc.X schlagen obv's
   Single-Class-Selektoren

3. Mobile-Overflow nicht kontrolliert
   Fix: overflow-x: hidden auf .vault-app + .vault-content,
   word-wrap + overflow-wrap für lange URLs/Codes

Außerdem:
- Init mit 50ms-Delay nach DOMContentLoaded (gibt obv Zeit für Setup)
- Hamburger-Toggle mit e.stopPropagation()
- Tablet-Graph als Bottom-Panel (220px) mit border-top statt border-left
- Mobile-Graph komplett hidden (war: nur klein)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-16 18:17:35 +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%