m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add between-trips highlights mode with grid and map markers

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-21 01:48:39 +02:00
parent 8edbfd2dd3
commit 04e4fa3dcd
2 changed files with 285 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/home.html.twig
+149 -2
View File
@@ -225,8 +225,155 @@ homeMap.on('load', function () {
{% endif %}
{% else %}
{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
{# ══════════════════════════════════════════════════════ 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">Into the East</h1>
<p class="home-highlights-subtitle">A few moments from past journeys</p>
</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 %}