agentandClaude
d0e4e8ab9e
Touch-First Design (style.css, 17 KB): - Mobile-First CSS mit Safe-Area-Insets für iOS Dynamic Island - Bottom-Nav (Files / Search / Graph) auf <768px - Hamburger-Tree slidet von links rein mit Backdrop - Graph-Modal als Full-Screen-Overlay mit Title-Bar + Close - Tap-Targets ≥ 44px (--tap-min) - Tablet-Mode (768-1023px): 2-Panel + Bottom-Graph 240px - Desktop (≥1024px): 3-Panel mit Tree 280px / Graph 320px - Touch-Action-Manipulation verhindert 300ms-Tap-Delay - Word-wrap + overflow-wrap für Mobile-Content - Frontmatter-Card als Grid-Layout - TOC + Backlinks Styling Touch-First JS (app.js, 21 KB): - Tree-Render mit auf-/zuklappbaren Ordnern (auto-open concepts/entities) - Search mit Live-Dropdown, Keyboard-Navigation (↑↓ Enter Esc) - 3D Graph in Three.js, KEIN Auto-Rotation, drag-to-rotate + wheel-zoom - Click-zentriert: Click auf Node → navigiert zur Page - Modal-Close via X-Button oder Escape - Touch/Click-Handler: pointerdown/move/up + Raycaster - Backlinks-Section aus data.backlinks - TOC aus h2/h3-Headings der aktuellen Page - Hash-anchor highlighting via :target CSS Template-Patch (generator.py): - Search-Wrap-Container für absolute Dropdown-Position - Bottom-Nav mit inner-Flex - Graph-Modal-Container - Three.js-CDN-Script im HEAD Assets werden jetzt aus dem Repo kopiert (style.css, app.js, manifest.json) statt eingebettete Placeholder-Strings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
hermes-wiki-static
Static HTML wiki generator for Lukas Huber's karpathy-style Obsidian-vault.
What this is
A Python tool that watches /home/admin/my-karpathy-wiki/ for changes and
regenerates static HTML files on disk. A simple HTTP server serves them on
loopback port 8765; Tailscale exposes it to the tailnet.
Why this exists
We previously used DanielCheer/obsidian-web-viewer (forked as
hermes-wiki-viewer). It had three blockers:
- No touch support on iOS Safari — click handlers don't work reliably
- 3D-Graph auto-rotates — prevents node selection via tap
- Fixed 260px Graph column — wastes horizontal space
This tool replaces obv with our own renderer:
- Touch-first design — bottom-nav on mobile, hamburger-tree, FAB+modal graph
- Static HTML — each page is a real URL, deep-linkable, PWA-installable
- No auto-rotation — graph is static, click-to-rotate, click-to-navigate
- Native-feeling — service worker, pull-to-refresh, swipe-back
Architecture
my-karpathy-wiki/*.md (input)
|
v
[watchdog observer] (auto-regen on .md change)
|
v
generator.py (Python: markdown + frontmatter)
|
v
~/.local/share/hermes-wiki/site/ (static HTML output)
|
v
python3 http.server (loopback:8765)
|
v
tailscale serve (https://openclaw.wholphin-musical.ts.net/)
Files
generator.py— daemon with watchdog + HTTP serverrequirements.txt— markdown, pyyaml, watchdog, python-frontmatter
Run
# Install deps (one-time, system Python)
pip install --break-system-packages markdown pyyaml watchdog python-frontmatter
# Start daemon
python3 generator.py --start
# Status / Stop
python3 generator.py --status
python3 generator.py --stop
# One-shot regen (no watcher, no HTTP server)
python3 generator.py --once
Output structure
site/
├── index.html (redirect to first note)
├── concepts/<slug>.html (one file per .md)
├── entities/<slug>.html
├── ...
└── __/
├── style.css
├── app.js
├── data.js (all metadata inlined for offline)
├── tree.json
├── graph.json
├── tags.json
├── backlinks.json
└── manifest.json (PWA)
WikiLink syntax
[[entity-name]] or [[entity-name|display text]] resolves to a real
<a class="wikilink" href="/path/to/entity.html"> if the target exists,
otherwise <a class="wikilink-missing"> (greyed out).
Frontmatter
---
title: My Note
type: concept
status: stable
updated: 2026-07-15
sources:
- https://example.com
tags:
- hermes
- architecture
---
Known limitations (Phase 1)
- CSS is placeholder — touch design comes in Phase 2
- JS is placeholder — search/tree/graph render comes in Phase 2
- Bottom-Nav template is there but not styled
- 5 YAML files in the wiki have malformed frontmatter (parser warnings)
- Graph only shows 27 edges — some WikiLinks not resolving due to those YAML issues