Travel Diary (Diário de Viagem)

Transforma o material bruto de uma viagem em um site de scrollytelling: um cartão por dia sobre um mapa satélite fixo, segmentos de movimento (camper, carro, bicicleta, a pé, balsa, barco-casa) desenhados no mapa, fotos e vídeos fixados em suas posições, pontos de informação ("Unterwegs" / "Ao longo do caminho") com imagens do Wikimedia Commons e uma reprodução por dia que sobrevoa a rota em 3D com estatísticas, perfil de elevação e as fotos aparecendo onde foram tiradas.

O template em template/ é um projeto Vite + TypeScript + MapLibre (sem framework, sem chaves de API). O usuário nunca precisa tocar em código: um aplicativo web de configuração local coleta idioma, dados da viagem, textos dos dias e arquivos por arrastar e soltar; você faz o resto com os scripts de build.

Qual modo?

O usuário diz	Modo	Vá para
"novo diário de viagem", "criar um site de viagem", ainda não há projeto	init	§1
"novas fotos / GPX / timeline / texto do diário", "adicionar dia N", projeto existe	day	§2
"publicar", "subir", "gerar o arquivo único", "colocar online"	deploy	§3

Um projeto é um projeto traveldiary quando tem data/trip.json e scripts/build-timeline.mjs.

1. init – iniciar um novo projeto

Pergunte (ou obtenha da mensagem) apenas duas coisas: a pasta de destino e se o usuário prefere responder às perguntas de configuração no aplicativo web (padrão, mais amigável) ou no chat. Todo o resto o aplicativo pergunta.
Execute o scaffold: node <skill-dir>/scripts/init.mjs <pasta-de-destino>. Ele copia template/, executa npm install e imprime o próximo comando.
Inicie o aplicativo de configuração: npm run setup dentro do projeto (porta 5180) e diga ao usuário para abrir http://localhost:5180. Use preview_start com essa URL se um painel do navegador estiver disponível. O aplicativo guia o usuário por: idioma (de/en) → título, subtítulo, datas, fuso horário, veículos, tipo de saída, cor de destaque → uma entrada por dia (data, título, texto do diário em Markdown) → zonas de arrasto para fotos, vídeos, GPX, Google Timeline. Ele escreve data/trip.json, content/tagebuch.md e as pastas raw/. O usuário pode reabri-lo a qualquer momento.
Quando o usuário voltar ("pronto", "fertig", ou apenas colar material), continue com day.

Se o usuário responder no chat, escreva data/trip.json você mesmo (esquema em references/data-formats.md) e o diário em content/tagebuch.md (## Tag N – <dia da semana, data> – <título> / ## Day N – …).

2. day – processar novo material

Leia references/day-workflow.md antes da primeira execução em uma sessão; ele tem a ordem exata, as convenções e as armadilhas. Versão resumida:

Inventário do que é novo em raw/ (find raw -newer public/data/photos.json) e se o diário tem novos dias. Se um conector Claude Docs e um link de documento estiverem disponíveis, exporte o documento como Markdown para content/tagebuch.md; caso contrário, o aplicativo de configuração / o usuário mantém esse arquivo.
Estruturação em data/trip.json: uma entrada days[] por dia (n, date, title, tracks[] para GPX, video para um clipe de sobrevoo, legs[] quando não há timeline). Renomeie arquivos GPX para YYYY-MM-DD_slug.gpx.
Rótulos da timeline: execute npm run data:timeline, leia a lista de segmentos no console e dê a cada um um rótulo humano em trip.json → timeline.labels (chave = hora de início local YYYY-MM-DDTHH:MM). Corrija tipos detectados incorretamente em timeline.kinds (SKIING em uma e-bike → ebike, carro de um amigo → car). Adicione locais de parada em places para que as paradas recebam nomes em vez de "Pause".
Build: npm run data (conteúdo → trilhas → timeline → pois → fotos). Os servidores públicos de roteamento/elevação/Commons têm limite de taxa; os scripts pausam e armazenam em cache, nunca os colocam em loop.
Observe as fotos: crie folhas de contato das novas fotos (script na referência), leia-as e escreva uma frase curta por foto em data/captions.json. Nomeie lugares e montanhas quando a posição da foto (impressa ao lado de cada foto) os tornar identificáveis; diga "grupo Ortler" em vez de adivinhar um pico. Coloque fotos borradas ou acidentais em data/exclude.json.
Pontos de interesse: para lugares notáveis pelos quais o usuário passou sem uma boa foto própria (um túnel, um lago famoso, um castelo), adicione entradas a data/pois.json com 2–3 frases factuais e um termo de busca do Commons; npm run data:pois busca uma imagem com licença livre e atribuição. Verifique as imagens selecionadas em uma folha de contato e fixe um file melhor se o primeiro resultado for pobre (gravuras, mapas).
Verifique com npm run dev: abra o novo dia, verifique linhas, pins, legendas e execute a reprodução uma vez.
Publique (§3) e, se o projeto for um repositório git, faça commit.

Mantenha CLAUDE.md no projeto atualizado (é o documento de hand-off para a próxima sessão).

3. deploy (publicar)

trip.json → output diz o que o usuário escolheu; detalhes e os comandos exatos estão em references/hosting.md.

single: npm run build:single → um arquivo HTML ao lado do projeto com dados, fotos e vídeos incorporados (vídeos grandes próprios são omitidos com uma nota). Aviso para o usuário: em alguns telefones, um arquivo aberto a partir do sistema de arquivos bloqueia o web worker do mapa; hospedar é mais confiável.
web: npm run deploy:web → build, gera .htaccess + .htpasswd (Basic Auth) e envia arquivos alterados via SSH (tar pipe, incremental via manifesto de hash). Precisa de .env.web (host, user, dir, logins).
nas: npm run deploy → tar pipe para um contêiner nginx Synology; configuração em nas/default.conf.

Coisas que vale a pena saber

As fotos precisam de EXIF com hora + GPS (os telefones fornecem ambos). Os vídeos obtêm a hora do nome do arquivo (PXL_YYYYMMDD_HHMMSS) e sua posição da timeline, GPX, uma parada ou da foto mais próxima.
GPX supera a timeline: atividades da timeline que se sobrepõem a uma trilha GPX são descartadas.
Sem um Google Timeline, os trajetos são roteados entre lugares nomeados via days[].legs.
Viagens de barco-casa: tipo boat roteia ao longo de rios/canais do OSM (scripts/waterway.mjs, opcional timeline.waterways whitelist) e usa posições EXIF das fotos como waypoints – veja references/day-workflow.md.
Desktop (≥ 900 px): mapa à esquerda 50%, história à direita 50% com uma grade de fotos grande; a reprodução mostra cartões de foto à direita e agrupa fotos tiradas dentro de 15 min (máx. 6) em um cartão (mobile inalterado).
Perfis de elevação sobre túneis de rodovia mostram o terreno acima; é por isso que o ganho de elevação é contado apenas para bicicleta/a pé.
Todo o texto da interface está em src/i18n.ts (de, en); adicionar um idioma é mais um dicionário.

Travel Diary - Diário de Viagem

O que é Travel Diary - Diário de Viagem?

Perguntar na sua IA favorita

Documentação