traveldiary-skill

Travel Diary

Convierte el material bruto de un viaje en un sitio web de scrollytelling: una tarjeta por día sobre un mapa satelital fijo, segmentos de movimiento (autocaravana, coche, bicicleta, a pie, ferry, casa flotante) dibujados en el mapa, fotos y videos anclados en su posición, puntos de información ("Unterwegs" / "En el camino") con imágenes de Wikimedia Commons, y una repetición por día que recorre la ruta en 3D con estadísticas, perfil de elevación y las fotos que aparecen donde fueron tomadas.

La plantilla en template/ es un proyecto Vite + TypeScript + MapLibre (sin framework, sin claves API). El usuario nunca tiene que tocar código: una aplicación web de configuración local recopila el idioma, los datos del viaje, los textos de los días y los archivos mediante arrastrar y soltar; tú haces el resto con los scripts de construcción.

¿Qué modo?

El usuario dice	Modo	Ir a
"nuevo diario de viaje", "configurar un sitio de viaje", aún no hay proyecto	init	§1
"nuevas fotos / GPX / línea de tiempo / texto del diario", "agregar día N", el proyecto existe	day	§2
"desplegar", "publicar", "hacer el archivo único", "ponerlo en línea"	deploy	§3

Un proyecto es un proyecto traveldiary cuando tiene data/trip.json y scripts/build-timeline.mjs.

1. init – crear un nuevo proyecto

1. Pregunta (o toma del mensaje) solo dos cosas: la carpeta de destino y si el usuario prefiere responder a las preguntas de configuración en la aplicación del navegador (por defecto, más amigable) o en el chat. Todo lo demás lo pregunta la app.
2. Ejecuta el andamiaje: node <directorio-habilidad>/scripts/init.mjs <carpeta-destino>. Copia template/, ejecuta npm install e imprime el siguiente comando.
3. Inicia la aplicación de configuración: npm run setup dentro del proyecto (puerto 5180) y dile al usuario que abra http://localhost:5180. Usa preview_start con esa URL si hay un panel del navegador disponible. La aplicación guía al usuario a través de: idioma (de/en) → título, subtítulo, fechas, zona horaria, vehículos, tipo de salida, color de acento → una entrada por día (fecha, título, texto del diario en Markdown) → zonas de arrastre para fotos, videos, GPX, Google Timeline. Escribe data/trip.json, content/tagebuch.md y las carpetas raw/. Pueden volver a abrirlo en cualquier momento.
4. Cuando regresen ("listo", "fertig", o simplemente pegan material), continúa con day.

Si el usuario responde en el chat, escribe data/trip.json tú mismo (esquema en references/data-formats.md) y el diario en content/tagebuch.md (## Tag N – <día_semana, fecha> – <título> / ## Day N – …).

2. day – procesar nuevo material

Lee references/day-workflow.md antes de la primera ejecución en una sesión; contiene el orden exacto, las convenciones y los problemas comunes. Versión corta:

1. Inventario de lo que hay de nuevo en raw/ (find raw -newer public/data/photos.json), y si el diario tiene nuevos días. Si hay un conector de Claude Docs y un enlace al documento, exporta el documento como Markdown a content/tagebuch.md; de lo contrario, la aplicación de configuración / el usuario mantiene ese archivo.
2. Estructura en data/trip.json: una entrada days[] por día (n, date, title, tracks[] para GPX, video para un clip de sobrevuelo, legs[] cuando no hay línea de tiempo). Renombra los archivos GPX a YYYY-MM-DD_slug.gpx.
3. Etiquetas de la línea de tiempo: ejecuta npm run data:timeline, lee la lista de segmentos de la consola y asígnale a cada uno una etiqueta legible en trip.json → timeline.labels (clave = hora de inicio local YYYY-MM-DDTHH:MM). Corrige tipos mal detectados en timeline.kinds (SKIING en una e-bike → ebike, el coche de un amigo → car). Agrega lugares de parada a places para que las paradas tengan nombres en lugar de "Pausa".
4. Construir: npm run data (contenido → tracks → línea de tiempo → pois → fotos). Los servidores públicos de enrutamiento/elevación/Commons tienen límites de velocidad; los scripts se pausan y almacenan en caché, nunca los recorren en bucle.
5. Mira las fotos: construye hojas de contacto de las nuevas fotos (script en la referencia), léelas y escribe una frase corta por foto en data/captions.json. Nombra lugares y montañas cuando la posición de la foto (impresa al lado de cada foto) los haga identificables; di "grupo Ortler" en lugar de adivinar un pico. Coloca fotos borrosas o accidentales en data/exclude.json.
6. Puntos de interés: para lugares notables por los que el usuario pasó sin una buena foto propia (un túnel, un lago famoso, un castillo), agrega entradas a data/pois.json con 2–3 oraciones factuales y un término de búsqueda de Commons; npm run data:pois recupera una imagen con licencia libre y atribución. Verifica las imágenes seleccionadas en una hoja de contacto y fija un file mejor si el primer resultado es pobre (grabados, mapas).
7. Verifica con npm run dev: abre el nuevo día, revisa líneas, pines, pies de foto y reproduce la repetición una vez.
8. Despliega (§3) y, si el proyecto es un repositorio git, haz commit.

Mantén CLAUDE.md en el proyecto actualizado (es el documento de traspaso para la próxima sesión).

3. deploy

trip.json → output dice lo que eligió el usuario; los detalles y los comandos exactos están en references/hosting.md.

• single: npm run build:single → un archivo HTML junto al proyecto con datos, fotos y videos incrustados (los videos grandes propios se omiten con una nota). Nota para el usuario: en algunos teléfonos, un archivo abierto desde el sistema de archivos bloquea el web worker del mapa; el alojamiento es más confiable.
• web: npm run deploy:web → construir, generar .htaccess + .htpasswd (Autenticación Básica) y subir archivos modificados por SSH (tubería tar, incremental mediante manifiesto hash). Necesita .env.web (host, usuario, directorio, accesos).
• nas: npm run deploy → tubería tar a un contenedor nginx de Synology; configuración en nas/default.conf.

Cosas que vale la pena saber

• Las fotos necesitan EXIF tiempo + GPS (los teléfonos proporcionan ambos). Los videos obtienen su tiempo del nombre del archivo (PXL_YYYYMMDD_HHMMSS) y su posición de la línea de tiempo, GPX, una parada o la foto más cercana.
• GPX supera a la línea de tiempo: las actividades de la línea de tiempo que se superponen a un track GPX se eliminan.
• Sin Google Timeline, los trayectos se enrutan entre lugares nombrados mediante days[].legs.
• Viajes en casa flotante: tipo boat rutea por ríos/canales de OSM (scripts/waterway.mjs, lista blanca opcional timeline.waterways) y usa las posiciones EXIF de las fotos como puntos de ruta – consulta references/day-workflow.md.
• Escritorio (≥ 900 px): mapa izquierda 50 %, historia derecha 50 % con una cuadrícula de fotos grande; la repetición muestra tarjetas de fotos a la derecha y agrupa fotos tomadas dentro de 15 min (máx. 6) en una tarjeta (móvil sin cambios).
• Los perfiles de elevación sobre túneles de autopista muestran el terreno superior; por eso la ganancia de elevación solo se cuenta para bicicleta/a pie.
• Todo el texto de la interfaz está en src/i18n.ts (de, en); agregar un idioma es un diccionario más.