// Páginas del blog. Cada una recibe { t (tokens), nav, postId? }. const { WorldMap: WM, PostCard: PC, SectionHead: SH, PhotoMapApp: PMA } = window; const DATA = window.BLOG_DATA; const { useState, useEffect } = React; // ============= INICIO ============= function HomePage({ t, nav }) { const isC = t.style === 'scrapbook'; // Featured = la más reciente marcada como destacada, o si no, la más reciente sin más. // Las demás (incluidas otras destacadas) siempre aparecen en el feed. const sorted = DATA.posts; // ya viene ordenado por año desc const featured = sorted.find(p => p.featured) || sorted[0]; const others = sorted.filter(p => p.id !== featured.id).slice(0, 3); return (
{/* HERO */}
Diario abierto · {DATA.family.name}

{isC ? <>Las rutas largas se cuentan, no se planean. : <>Lugares que cambiaron la forma de mirar. }

{isC ? 'Diario abierto de los viajes que vamos haciendo en familia. Texto, mapas, fotos y la lista de bares con buena tortilla. Nada más, nada menos.' : 'Una colección de historias, mapas dibujados con los pies y fotografías que no quisimos perder. Pasa, hay café.' }

{isC && (
MAY · 26
última entrada
)} {!isC && (
{DATA.family.stats.paises}
Países visitados
)}
Países{DATA.family.stats.paises}
Historias{DATA.family.stats.historias}
Fotos{DATA.family.stats.fotos.toLocaleString('es')}
{/* HISTORIA DESTACADA */}
nav('post', featured.id)} />
{/* FEED */}
nav('historias')}>Ver todas →} t={t} />
{others.map(p => nav('post', p.id)} />)}
{/* MAPA RESUMEN */}
nav('mapa')}>Abrir mapa →} t={t} /> nav('post', id)} />
{/* ENLACES RÁPIDOS */}
nav('nosotros')}>
El diario

Quiénes somos y por qué viajamos.

Ruben y Dora (y a veces los cuatro), contándonos los viajes para no olvidarlos.

Conócenos →
nav('nosotros', null, '.om-wish')}>
Lista de deseos

Los viajes que aún soñamos.

Egipto, Marruecos, un safari en África… lo que queremos tachar algún día.

Ver la lista →
); } // ============= HISTORIAS (feed completo con filtros) ============= function HistoriasPage({ t, nav }) { const isC = t.style === 'scrapbook'; const [filter, setFilter] = useState('todos'); const tags = ['todos', 'Europa', 'Asia', 'África', 'Road trip', 'Familia', 'Playa', 'Ciudad']; const filtered = filter === 'todos' ? DATA.posts : DATA.posts.filter(p => p.tags && p.tags.includes(filter)); return (
Archivo · {DATA.posts.length} {DATA.posts.length === 1 ? 'entrada' : 'entradas'}

Cada viaje, contado dos veces: en voz alta y por escrito.

Todas nuestras historias, ordenadas por fecha. Filtra por continente, tipo de viaje o ambiente. Cada una incluye mapa, lista de sitios y fotos.

{tags.map(tag => ( setFilter(tag)}> {tag === 'todos' ? 'Todas' : tag} ))} {filtered.length} historia{filtered.length === 1 ? '' : 's'}
{filter === 'todos' && filtered[0] && (
nav('post', filtered[0].id)} />
)}
{(filter === 'todos' ? filtered.slice(1) : filtered).map(p => ( nav('post', p.id)} /> ))}
); } // ============= HISTORIA INDIVIDUAL ============= function PostPage({ t, nav, postId }) { const isC = t.style === 'scrapbook'; const post = DATA.posts.find(p => p.id === postId) || DATA.posts[0]; const places = post.places || []; const route = post.route || []; const album = post.album && post.album.length ? post.album : null; const [lb, setLb] = useState(null); // índice de foto abierta en grande, o null useEffect(() => { if (lb === null || !album) return; const onKey = e => { if (e.key === 'Escape') setLb(null); else if (e.key === 'ArrowRight') setLb(i => (i + 1) % album.length); else if (e.key === 'ArrowLeft') setLb(i => (i - 1 + album.length) % album.length); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [lb, album]); return (
nav('historias')}>← Volver a historias
{post.country}· {post.region}· {post.date}· {post.readMin} min lectura· {post.coords}

{post.title}

{post.subtitle}
{!post.coverImage && `[ foto de cabecera · ${post.id}-cover.jpg ]`}
{post.bodyIntro &&

{post.bodyIntro}

} {(post.bodyParas || ['Aquí va el resto de la historia. Edita este post desde el panel de administración para añadir más texto, fotos intercaladas y lo que necesites.']).map((para, i) => (

{para}

))}
{route.length > 0 && (
{route.length > 1 && ( `${p.x},${p.y}`).join(' ')} fill="none" stroke={t.accent2} strokeWidth="0.6" strokeDasharray="2 1.5" /> )} {route.map((p, i) => (
{p.name}
))}
)}
{album ? album.map((src, i) => (
setLb(i)} >
)) : [1, 2, 3, 4, 5, 6].map(n => (
[ {post.id}-{String(n).padStart(2, '0')}.jpg ]
))}
{album && lb !== null && (
setLb(null)}> {album.length > 1 && } {`Foto e.stopPropagation()} /> {album.length > 1 && }
{lb + 1} / {album.length}
)}
); } // ============= MAPA ============= function MapaPage({ t, nav }) { const isC = t.style === 'scrapbook'; return (
Atlas · todos los pines

El mapa que dibujamos juntos.

{DATA.family.stats.paises}
países
{DATA.worldPins.length}
marcas
3
continentes
nav('post', id)} />

Lugares en el mapa

{DATA.worldPins.map((p, i) => (
p.id && nav('post', p.id)} > {p.label} {p.future ? 'prox.' : '✓'}
))}
); } // ============= NOSOTROS ============= function NosotrosPage({ t, nav }) { const isC = t.style === 'scrapbook'; const memberColors = [t.accent1, t.accent2, t.accent3 || t.accent1, 'oklch(0.6 0.12 280)']; const wishTagStyle = (tag) => { if (tag === 'pronto') return { bg: t.accent1, color: 'oklch(0.97 0.005 80)' }; if (tag === 'plan') return { bg: t.accent2Soft, color: t.text }; return { bg: t.bgAlt, color: t.textMuted }; }; return (
Sobre nosotros

Viajamos juntos, y lo contamos aquí.

{DATA.family.intro}

Esta es nuestra caja de recuerdos: historias, mapas y fotografías que no quisimos perder.

Diario en números

{DATA.family.stats.paises}
países
{DATA.family.stats.historias}
historias
{DATA.family.stats.fotos.toLocaleString('es')}
fotos
{DATA.family.members.length > 0 && (
{DATA.family.members.map((m, i) => (
{m.initial}
{m.name}
{m.note}
))}
)} {DATA.wishlist.length > 0 && (
{DATA.wishlist.map((w, i) => { const st = wishTagStyle(w.tag); return (
{String(i + 1).padStart(2, '0')} {w.name}{w.sub} {w.when}
); })}
)}
); } // ============= MAPA DE FOTOS (app interactiva embebida) ============= function MapaFotosPage({ t, nav }) { const isC = t.style === 'scrapbook'; const MAP_URL = 'https://biovibe-cloud.github.io/mapaFlickr-Codex/'; return (
Mapa de fotos

Cada foto, en el lugar donde la tomamos.

Nuestro mapa interactivo: explora las fotos geolocalizadas, muévete por el mundo y acércate a cada viaje.

Abrir en pantalla completa →
Si el mapa tarda en cargar, espera unos segundos o ábrelo en pantalla completa.
); } Object.assign(window, { HomePage, HistoriasPage, PostPage, MapaPage, MapaFotosPage, NosotrosPage });