pepate/traveldiary-skill

Travel Diary

Verwandelt die Rohdaten einer Reise in eine Scrollytelling-Website: eine Karte pro Tag über einer festen Satellitenkarte, Bewegungssegmente (Wohnmobil, Auto, Fahrrad, zu Fuß, Fähre, Hausboot) auf der Karte eingezeichnet, Fotos und Videos an ihrem Standort verankert, Infopunkte („Unterwegs“) mit Wikimedia-Commons-Bildern und ein Replay pro Tag, das die Route in 3D abfliegt – mit Statistiken, Höhenprofil und den Fotos, die an den Aufnahmeorten erscheinen.

Die Vorlage in template/ ist ein Vite + TypeScript + MapLibre-Projekt (kein Framework, keine API-Schlüssel). Der Benutzer muss niemals Code anfassen: Eine lokale Setup-Web-App sammelt Sprache, Reisedaten, Tagestexte und Dateien per Drag & Drop; alles Weitere erledigen Sie mit den Build-Skripten.

Welcher Modus?

Benutzer sagt	Modus	Gehe zu
„neues Reisetagebuch“, „Reise-Seite einrichten“, noch kein Projekt	init	§1
„neue Fotos / GPX / Zeitplan / Tagebuchtext“, „Tag N hinzufügen“, Projekt existiert	day	§2
„bereitstellen“, „veröffentlichen“, „die einzelne Datei erstellen“, „online stellen“	deploy	§3

Ein Projekt ist ein Travel-Diary-Projekt, wenn es data/trip.json und scripts/build-timeline.mjs enthält.

1. init – Neues Projekt anlegen

1. Fragen Sie (oder entnehmen Sie der Nachricht) nur zwei Dinge ab: den Zielordner und ob der Benutzer die Einrichtungsfragen lieber in der Browser-App (Standard, benutzerfreundlicher) oder im Chat beantworten möchte. Alles Weitere fragt die App.
2. Führen Sie das Gerüst aus: node <skill-verzeichnis>/scripts/init.mjs <zielordner>. Es kopiert template/, führt npm install aus und gibt den nächsten Befehl aus.
3. Starten Sie die Setup-App: npm run setup im Projekt (Port 5180) und fordern Sie den Benutzer auf, http://localhost:5180 zu öffnen. Verwenden Sie preview_start mit dieser URL, falls ein Browserfenster verfügbar ist. Die App führt den Benutzer durch: Sprache (de/en) → Titel, Untertitel, Daten, Zeitzone, Fahrzeuge, Ausgabetyp, Akzentfarbe → einen Eintrag pro Tag (Datum, Titel, Tagebuchtext in Markdown) → Ablagebereiche für Fotos, Videos, GPX, Google-Zeitplan. Sie schreibt data/trip.json, content/tagebuch.md und die raw/-Ordner. Der Benutzer kann sie jederzeit wieder öffnen.
4. Wenn der Benutzer zurückkommt („fertig“, „done“ oder einfach Material einfügt), fahren Sie mit day fort.

Antwortet der Benutzer stattdessen im Chat, schreiben Sie data/trip.json selbst (Schema in references/data-formats.md) und das Tagebuch in content/tagebuch.md (## Tag N – <Wochentag, Datum> – <Titel> / ## Day N – …).

2. day – Neues Material verarbeiten

Lesen Sie references/day-workflow.md vor dem ersten Durchlauf in einer Sitzung; dort stehen die genaue Reihenfolge, die Konventionen und die Fallstricke. Kurzfassung:

1. Bestandsaufnahme, was unter raw/ neu ist (find raw -newer public/data/photos.json), und ob das Tagebuch neue Tage hat. Falls ein Claude Docs Connector und ein Dokumentenlink verfügbar sind, exportieren Sie das Dokument als Markdown nach content/tagebuch.md; andernfalls pflegt die Setup-App oder der Benutzer diese Datei.
2. Strukturieren in data/trip.json: ein days[]-Eintrag pro Tag (n, date, title, tracks[] für GPX, video für einen Überflugclip, legs[] wenn kein Zeitplan vorhanden). Benennen Sie GPX-Dateien in YYYY-MM-DD_slug.gpx um.
3. Zeitplanbeschriftungen: führen Sie npm run data:timeline aus, lesen Sie die Konsolenliste der Segmente und geben Sie jedem ein menschliches Label in trip.json → timeline.labels (Schlüssel = lokale Startzeit YYYY-MM-DDTHH:MM). Korrigieren Sie falsch erkannte Arten in timeline.kinds (SKIING auf einem E-Bike → ebike, Auto eines Freundes → car). Fügen Sie Halteorte zu places hinzu, damit Stopps Namen statt „Pause“ erhalten.
4. Build: npm run data (Inhalt → Tracks → Zeitplan → POIs → Fotos). Öffentliche Routing-/Höhen-/Commons- Server sind ratenbegrenzt; die Skripte pausieren und cachen, führen keine Schleifen aus.
5. Fotos ansehen: erstellen Sie Kontaktbögen der neuen Fotos (Skript in der Referenz), lesen Sie sie und schreiben Sie einen kurzen Satz pro Foto in data/captions.json. Nennen Sie Orte und Berge, wenn die Position des Fotos (neben jedem Foto gedruckt) sie identifizierbar macht; sagen Sie „Ortler-Gruppe“ statt einen Gipfel zu erraten. Unscharfe oder versehentliche Aufnahmen in data/exclude.json ablegen.
6. Sehenswürdigkeiten: für bemerkenswerte Orte, die der Benutzer ohne eigenes gutes Foto passiert hat (einen Tunnel, einen berühmten See, ein Schloss), fügen Sie Einträge in data/pois.json mit 2–3 sachlichen Sätzen und einem Commons- Suchbegriff ein; npm run data:pois holt ein frei lizenziertes Bild mit Quellenangabe. Prüfen Sie die ausgewählten Bilder auf einem Kontaktbogen und setzen Sie eine bessere file, wenn der erste Treffer schlecht ist (Stiche, Karten).
7. Verifizieren mit npm run dev: öffnen Sie den neuen Tag, prüfen Sie Linien, Stecknadeln, Bildunterschriften und spielen Sie das Replay einmal ab.
8. Bereitstellen (§3) und, falls das Projekt ein Git-Repo ist, committen.

Halten Sie CLAUDE.md im Projekt aktuell (es ist das Übergabedokument für die nächste Sitzung).

3. deploy

trip.json → output gibt an, was der Benutzer gewählt hat; Details und die genauen Befehle stehen in references/hosting.md.

• single: npm run build:single → eine HTML-Datei neben dem Projekt mit eingebetteten Daten, Fotos und Videos (große eigene Videos werden mit einem Hinweis weggelassen). Hinweis für den Benutzer: Auf manchen Handys blockiert eine aus dem Dateisystem geöffnete Datei den Web Worker der Karte; Hosting ist zuverlässiger.
• web: npm run deploy:web → Build, .htaccess + .htpasswd (Basic Auth) erzeugen und geänderte Dateien per SSH übertragen (tar pipe, inkrementell via Hash-Manifest). Benötigt .env.web (host, user, dir, logins).
• nas: npm run deploy → tar pipe zu einem Synology nginx-Container; Konfiguration in nas/default.conf.

Wissenswertes

• Fotos benötigen EXIF-Zeit + GPS (Handys liefern beides). Videos erhalten ihre Zeit aus dem Dateinamen (PXL_YYYYMMDD_HHMMSS) und ihre Position aus dem Zeitplan, GPX, einem Stopp oder dem nächsten Foto.
• GPX überschreibt den Zeitplan: Zeitplanaktivitäten, die einen GPX-Track überlappen, werden verworfen.
• Ohne Google-Zeitplan werden Fahrten zwischen benannten Orten über days[].legs geroutet.
• Hausbootfahrten: Art boat routet entlang OSM-Flüssen/Kanälen (scripts/waterway.mjs, optionale timeline.waterways-Whitelist) und verwendet Foto-EXIF-Positionen als Wegpunkte – siehe references/day-workflow.md.
• Desktop (≥ 900 Pixel): Karte links 50 %, Story rechts 50 % mit einem großen Fotogitter; das Replay zeigt Fotokarten auf der rechten Seite und gruppiert Fotos, die innerhalb von 15 Minuten aufgenommen wurden (max. 6) auf einer Karte (mobil unverändert).
• Höhenprofile über Autobahntunnel zeigen das Gelände darüber; deshalb wird Höhengewinn nur für Fahrrad/Fuß gezählt.
• Der gesamte UI-Text befindet sich in src/i18n.ts (de, en); das Hinzufügen einer Sprache ist ein weiteres Wörterbuch.