355 lines
16 KiB
Twig
355 lines
16 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
|
|
|
{% block content %}
|
|
{% set trip_route = config.site.active_trip %}
|
|
{% set trip = grav.pages.find(trip_route) %}
|
|
|
|
{% if config.site.travelling %}
|
|
{# ══════════════════════════════════════════════════════════ ACTIVE TRIP MODE #}
|
|
|
|
{% set dailies_page = grav.pages.find(trip_route ~ '/dailies') %}
|
|
{% set stories_page = grav.pages.find(trip_route ~ '/stories') %}
|
|
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
|
|
{% set story_entries = stories_page ? stories_page.children.published() : [] %}
|
|
|
|
{% set all_items = [] %}
|
|
{% for e in journal_entries %}
|
|
{% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
|
|
{% endfor %}
|
|
{% for s in story_entries %}
|
|
{% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
|
|
{% endfor %}
|
|
{% set all_items = all_items|sort_by_key('date', 3) %}
|
|
|
|
{% set journal_count = journal_entries|length %}
|
|
{% set story_count = story_entries|length %}
|
|
|
|
{% set map_entries = [] %}
|
|
{% for item in all_items %}
|
|
{% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
|
|
{% set map_entries = map_entries|merge([{
|
|
'lat': item.page.header.lat|number_format(6, '.', ''),
|
|
'lng': item.page.header.lng|number_format(6, '.', ''),
|
|
'slug': item.page.slug,
|
|
'title': item.page.title,
|
|
'url': item.page.url,
|
|
'force_connect': item.page.header.force_connect ? true : false
|
|
}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% set home_gpx_urls = [] %}
|
|
{% if trip %}
|
|
{% for name, media in trip.media.all %}
|
|
{% if name|split('.')|last == 'gpx' %}
|
|
{% set home_gpx_urls = home_gpx_urls|merge([trip.url ~ '/' ~ name]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="home-layout">
|
|
<div class="home-map-col">
|
|
<div class="home-map" id="home-map"></div>
|
|
</div>
|
|
|
|
<div class="home-feed-col">
|
|
<div class="home-trip-header">
|
|
<h1 class="home-trip-name">{{ trip ? trip.title : trip_route }}</h1>
|
|
<span class="home-trip-counts">
|
|
{{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
|
|
{% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="feed">
|
|
{% if all_items|length > 0 %}
|
|
{% for item in all_items %}
|
|
{% set entry = item.page %}
|
|
|
|
{% if item.type == 'journal' %}
|
|
{% set weather_icons = {
|
|
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
|
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
|
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
|
} %}
|
|
<article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
|
<header class="journal-post-header">
|
|
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
|
<p class="journal-post-meta">
|
|
<a class="journal-post-permalink" href="{{ entry.url }}">
|
|
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
|
</a>
|
|
{% if entry.header.location_city or entry.header.location_country %}
|
|
<span class="journal-post-location">
|
|
· 📍
|
|
{%- set _loc = [] -%}
|
|
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
|
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
|
{{ _loc|join(', ') }}
|
|
</span>
|
|
{% endif %}
|
|
{% if entry.header.weather_desc %}
|
|
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</header>
|
|
|
|
{% set images = entry.media.images %}
|
|
{% if images|length > 0 %}
|
|
<div class="journal-photo-strip" data-slides="{{ images|length }}">
|
|
{% for img in images %}
|
|
<div class="journal-photo-slide">
|
|
<img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if images|length > 1 %}
|
|
<div class="journal-photo-dots" aria-hidden="true">
|
|
{% for img in images %}
|
|
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
|
</article>
|
|
{% else %}
|
|
{% set hero = null %}
|
|
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
|
{% set hero = entry.media[entry.header.hero_image] %}
|
|
{% elseif entry.media.images|length > 0 %}
|
|
{% set hero = entry.media.images|first %}
|
|
{% endif %}
|
|
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" href="{{ entry.url }}">
|
|
{% if hero %}
|
|
<div class="entry-card-photo entry-card-photo--story">
|
|
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</div>
|
|
{% endif %}
|
|
<div class="entry-card-body">
|
|
<span class="story-badge">✦ Story</span>
|
|
<h2 class="entry-title">{{ entry.title }}</h2>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if map_entries|length > 0 %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
|
{% if home_gpx_urls|length > 0 %}
|
|
<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
|
|
{% endif %}
|
|
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
|
<script>
|
|
var HOME_ENTRIES = {{ map_entries|json_encode|raw }};
|
|
var HOME_GPX_URLS = {{ home_gpx_urls|json_encode|raw }};
|
|
|
|
var homeMap = new maplibregl.Map({
|
|
container: 'home-map',
|
|
style: MapUtils.MAP_STYLE,
|
|
center: [20, 20],
|
|
zoom: 2
|
|
});
|
|
|
|
homeMap.on('load', function () {
|
|
var bounds = new maplibregl.LngLatBounds();
|
|
var coords = [];
|
|
|
|
HOME_ENTRIES.forEach(function (entry, i) {
|
|
var isLatest = (i === HOME_ENTRIES.length - 1);
|
|
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
|
coords.push(lngLat);
|
|
bounds.extend(lngLat);
|
|
|
|
var el = MapUtils.createDotMarker(isLatest);
|
|
el.dataset.url = entry.url;
|
|
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
|
.setLngLat(lngLat)
|
|
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
|
el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
|
|
el.addEventListener('mouseleave', function () { popup.remove(); });
|
|
el.addEventListener('click', function () {
|
|
var card = document.getElementById('entry-' + entry.slug);
|
|
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
});
|
|
|
|
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
|
|
});
|
|
|
|
if (HOME_ENTRIES.length === 1) {
|
|
homeMap.jumpTo({ center: coords[0], zoom: 10 });
|
|
} else {
|
|
homeMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
|
|
}
|
|
|
|
setTimeout(function () { homeMap.resize(); }, 100);
|
|
|
|
MapUtils.renderGpxJourney(homeMap, HOME_GPX_URLS, HOME_ENTRIES, 'home-gpx', 'home-journey');
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
|
|
|
|
{# ── Highlight selection ─────────────────────────────────────────────────── #}
|
|
{% set trips_page = grav.pages.find('/trips') %}
|
|
{% set pool = [] %}
|
|
{% if trips_page %}
|
|
{% for trip_item in trips_page.children.published() %}
|
|
{% set t_dailies = grav.pages.find(trip_item.route ~ '/dailies') %}
|
|
{% set t_stories = grav.pages.find(trip_item.route ~ '/stories') %}
|
|
{% set candidates = [] %}
|
|
{% if t_dailies %}
|
|
{% for e in t_dailies.children.published() %}
|
|
{% if e.header.featured %}
|
|
{% set candidates = candidates|merge([{'type': 'journal', 'page': e, 'trip': trip_item}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if t_stories %}
|
|
{% for s in t_stories.children.published() %}
|
|
{% if s.header.featured %}
|
|
{% set candidates = candidates|merge([{'type': 'story', 'page': s, 'trip': trip_item}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if candidates|length > 0 %}
|
|
{% set pool = pool|merge([random(candidates)]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% set pool = pool|shuffle %}
|
|
{% set highlights = pool|slice(0, 6) %}
|
|
|
|
{# ── Map entries (entries with coordinates) ──────────────────────────────── #}
|
|
{% set highlights_map_entries = [] %}
|
|
{% for item in highlights %}
|
|
{% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
|
|
{% set highlights_map_entries = highlights_map_entries|merge([{
|
|
'lat': item.page.header.lat|number_format(6, '.', ''),
|
|
'lng': item.page.header.lng|number_format(6, '.', ''),
|
|
'slug': item.page.slug,
|
|
'title': item.page.title,
|
|
'url': item.page.url
|
|
}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="home-layout">
|
|
<div class="home-map-col">
|
|
<div class="home-map" id="home-map"></div>
|
|
</div>
|
|
|
|
<div class="home-feed-col">
|
|
<div class="home-highlights-header">
|
|
<h1 class="home-highlights-title">{{ page.title }}</h1>
|
|
{% if page.content %}
|
|
<div class="home-highlights-subtitle">{{ page.content|raw }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if highlights|length > 0 %}
|
|
<div class="home-highlights-grid">
|
|
{% for item in highlights %}
|
|
{% set entry = item.page %}
|
|
{% set hero = null %}
|
|
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
|
{% set hero = entry.media[entry.header.hero_image] %}
|
|
{% elseif entry.media.images|length > 0 %}
|
|
{% set hero = entry.media.images|first %}
|
|
{% endif %}
|
|
<div class="home-highlight-card" id="highlight-{{ entry.slug }}">
|
|
{% if hero %}
|
|
<div class="home-highlight-image">
|
|
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</div>
|
|
{% endif %}
|
|
<div class="home-highlight-body">
|
|
{% if item.type == 'story' %}
|
|
<span class="home-highlight-badge">✦ Story</span>
|
|
{% else %}
|
|
<span class="home-highlight-badge home-highlight-badge--journal">▸ Journal</span>
|
|
{% endif %}
|
|
<a class="home-highlight-title" href="{{ entry.url }}">{{ entry.title }}</a>
|
|
<div class="home-highlight-trip">
|
|
<span class="home-highlight-trip-name">{{ item.trip.title }}</span>
|
|
{% if item.trip.header.tagline %}
|
|
<span class="home-highlight-tagline">{{ item.trip.header.tagline }}</span>
|
|
{% endif %}
|
|
<a class="home-highlight-trip-link" href="{{ item.trip.url }}">→ View trip</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="feed-empty">No highlights yet — mark entries as featured to show them here.</p>
|
|
{% endif %}
|
|
|
|
<div class="home-highlights-cta-wrap">
|
|
<a class="home-highlights-cta" href="/trips">Explore all past trips →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if highlights_map_entries|length > 0 %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
|
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
|
<script>
|
|
var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};
|
|
|
|
var homeMap = new maplibregl.Map({
|
|
container: 'home-map',
|
|
style: MapUtils.MAP_STYLE,
|
|
center: [20, 20],
|
|
zoom: 2
|
|
});
|
|
|
|
homeMap.on('load', function () {
|
|
if (HIGHLIGHTS_ENTRIES.length === 0) return;
|
|
|
|
var bounds = new maplibregl.LngLatBounds();
|
|
|
|
HIGHLIGHTS_ENTRIES.forEach(function (entry) {
|
|
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
|
bounds.extend(lngLat);
|
|
|
|
var el = MapUtils.createDotMarker(false);
|
|
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
|
.setLngLat(lngLat)
|
|
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
|
el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
|
|
el.addEventListener('mouseleave', function () { popup.remove(); });
|
|
el.addEventListener('click', function () {
|
|
var card = document.getElementById('highlight-' + entry.slug);
|
|
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
});
|
|
|
|
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
|
|
});
|
|
|
|
if (HIGHLIGHTS_ENTRIES.length === 1) {
|
|
homeMap.jumpTo({ center: [parseFloat(HIGHLIGHTS_ENTRIES[0].lng), parseFloat(HIGHLIGHTS_ENTRIES[0].lat)], zoom: 8 });
|
|
} else {
|
|
homeMap.fitBounds(bounds, { padding: 60, maxZoom: 8 });
|
|
}
|
|
|
|
setTimeout(function () { homeMap.resize(); }, 100);
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
{% endblock %}
|