m038andClaude Opus 4.8
e2ba8f413a
trip.html.twig and home.html.twig hand-wrote near-identical map-column markup + a MapUtils.initEntryMap() invocation. Extract both into partials/entry-map.html.twig, parameterised (map id, global, entries, gpx config, story markers). Callers now pass resolved header values. The map engine (js/map.js initEntryMap) is unchanged; emitted config is byte-equivalent to the previous inline scripts. Verified: trip-map, home-map and window.tripMap/homeMap Playwright tests pass; both pages 200. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
217 lines
8.5 KiB
Twig
217 lines
8.5 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
|
|
|
{% block map_assets %}
|
|
{% do assets.addCss('theme://css-compiled/map.css') %}
|
|
{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
|
|
{% endblock %}
|
|
|
|
{% 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 gps_points = [] %}
|
|
{% for entry in journal_entries %}
|
|
{% if entry.header.lat is not empty and entry.header.lng is not empty %}
|
|
{% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% 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">
|
|
{% include 'partials/entry-map.html.twig' with {
|
|
map_id: 'home-map',
|
|
map_global: 'homeMap',
|
|
entries: map_entries,
|
|
card_prefix: 'entry-',
|
|
story_markers: false,
|
|
gpx_urls: home_gpx_urls,
|
|
use_gpx: trip and trip.header.use_gpx is not null ? trip.header.use_gpx : true,
|
|
autoconnect: trip ? (trip.header.autoconnect ?? 'on') : 'on',
|
|
gpx_source_prefix: 'home-gpx',
|
|
journey_id: 'home-journey'
|
|
} only %}
|
|
|
|
{% if all_items|length == 0 %}
|
|
{% include 'partials/home-predeparture.html.twig' with {
|
|
trip_page: trip
|
|
} only %}
|
|
{% else %}
|
|
{% include 'partials/trip-feed-col.html.twig' with {
|
|
trip_page: trip,
|
|
all_items: all_items,
|
|
journal_entries: journal_entries,
|
|
journal_count: journal_count,
|
|
story_count: story_count,
|
|
has_gpx: home_gpx_urls|length > 0,
|
|
gpx_urls: home_gpx_urls,
|
|
gps_points: gps_points,
|
|
show_sort: false
|
|
} only %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% 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 %}
|
|
<script>
|
|
var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.homeMap = MapUtils.initEntryMap({
|
|
container: 'home-map',
|
|
entries: HIGHLIGHTS_ENTRIES,
|
|
markLatest: false,
|
|
fit: { padding: 60, maxZoom: 8, singleZoom: 8 }
|
|
});
|
|
}); // DOMContentLoaded
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
{% endblock %}
|