content: align dailies container title to 'Journal' across trips

Match the demo's naming (was 'The Journey' on real trips). These
containers are inert folders now; the title just labels what's below.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/demo/trips/italy-2026-demo/dailies/dailies.md

@@ -1,6 +1,8 @@
 ---
 title: Journal
-template: dailies
+template: default
+routable: false
+visible: false
 content:
     items: '@self.children'
     order:

docs/demo/trips/italy-2026-demo/map.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Map'
-template: map
----

docs/demo/trips/italy-2026-demo/stats.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Stats'
-template: stats
----

docs/demo/trips/italy-2026-demo/stories.md

@@ -1,5 +1,7 @@
 ---
 title: Stories
-template: stories
+template: default
+routable: false
+visible: false
 published: true
 ---

pages/01.trips/central-asia-2023/01.dailies/dailies.md

@@ -1,6 +1,8 @@
 ---
-title: 'The Journey'
-template: dailies
+title: Journal
+template: default
+routable: false
+visible: false
 content:
     items: '@self.children'
     order:

pages/01.trips/central-asia-2023/02.map/map.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Map'
-template: map
----

pages/01.trips/central-asia-2023/03.stats/stats.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Stats'
-template: stats
----

pages/01.trips/central-asia-2023/04.stories/stories.md

@@ -1,5 +1,7 @@
 ---
 title: Stories
-template: stories
+template: default
+routable: false
+visible: false
 published: true
 ---

pages/01.trips/italy-2025/01.dailies/dailies.md

@@ -1,6 +1,8 @@
 ---
-title: 'The Journey'
-template: dailies
+title: Journal
+template: default
+routable: false
+visible: false
 content:
     items: '@self.children'
     order:

pages/01.trips/italy-2025/02.map/map.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Map'
-template: map
----

pages/01.trips/italy-2025/03.stats/stats.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Stats'
-template: stats
----

pages/01.trips/italy-2025/04.stories/stories.md

@@ -1,5 +1,7 @@
 ---
 title: Stories
-template: stories
+template: default
+routable: false
+visible: false
 published: true
 ---

pages/01.trips/slovenia-2024/01.dailies/dailies.md

@@ -1,6 +1,8 @@
 ---
-title: 'The Journey'
-template: dailies
+title: Journal
+template: default
+routable: false
+visible: false
 content:
     items: '@self.children'
     order:

pages/01.trips/slovenia-2024/02.map/map.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Map'
-template: map
----

pages/01.trips/slovenia-2024/03.stats/stats.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Stats'
-template: stats
----

pages/01.trips/slovenia-2024/04.stories/stories.md

@@ -1,5 +1,7 @@
 ---
 title: Stories
-template: stories
+template: default
+routable: false
+visible: false
 published: true
 ---

pages/01.trips/us-canada-mex-2024/01.dailies/dailies.md

@@ -1,6 +1,8 @@
 ---
-title: 'The Journey'
-template: dailies
+title: Journal
+template: default
+routable: false
+visible: false
 content:
     items: '@self.children'
     order:

pages/01.trips/us-canada-mex-2024/02.map/map.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Map'
-template: map
----

pages/01.trips/us-canada-mex-2024/03.stats/stats.md

@@ -1,4 +0,0 @@
----
-title: 'Trip Stats'
-template: stats
----

pages/01.trips/us-canada-mex-2024/04.stories/stories.md

@@ -1,5 +1,7 @@
 ---
 title: Stories
-template: stories
+template: default
+routable: false
+visible: false
 published: true
 ---

themes/intotheeast/js/maplibre-utils.js

@@ -417,8 +417,138 @@
     }
   }
 
+  /*
+   * Config-driven entry-map initialisation — the single orchestration shared by
+   * the trip page and both home views. Mirrors the trip page's canonical handler:
+   * compact collapsed attribution bottom-left, an on('load') marker loop with a
+   * map-tip hover popup, bounds fit (jumpTo for one entry), GPX journey rendering,
+   * and the fullscreen toggle.
+   *
+   * opts:
+   *   container      string   — map div id ('trip-map', 'home-map')
+   *   entries        array    — parsed map_entries [{lat,lng,slug,title,url,type?,force_connect?}, ...]
+   *   cardPrefix     string?  — e.g. 'entry-'; when set and a card #prefix+slug exists,
+   *                             click scrolls+flashes that card; otherwise click navigates to entry.url
+   *   storyMarkers   bool     — render createStoryMarker() for entry.type === 'story' (default: dot markers)
+   *   markLatest     bool     — enlarge the final non-story entry's dot (default true; pass false for
+   *                             unordered sets like home highlights so no marker is singled out)
+   *   fullscreen     object?  — { btnId, colSelector }; wires the fullscreen toggle + fullscreen-aware click
+   *   gpx            object?  — { urls, use, autoconnect, sourcePrefix, journeyId }; forwarded to renderGpxJourney
+   *   fit            object?  — { padding=60, maxZoom=11, singleZoom=10 }
+   *
+   * Returns the maplibregl.Map instance.
+   */
+  function initEntryMap(opts) {
+    opts = opts || {};
+    var entries    = opts.entries || [];
+    var fit        = opts.fit || {};
+    var padding    = fit.padding    != null ? fit.padding    : 60;
+    var maxZoom    = fit.maxZoom    != null ? fit.maxZoom    : 11;
+    var singleZoom = fit.singleZoom != null ? fit.singleZoom : 10;
+    var markLatest = opts.markLatest !== false;
+
+    var map = new maplibregl.Map({
+      container: opts.container,
+      style:     MAP_STYLE,
+      center:    [20, 20],
+      zoom:      2,
+      attributionControl: false
+    });
+    map.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+    map.on('load', function () {
+      if (entries.length === 0) {
+        map.jumpTo({ center: [0, 20], zoom: 2 });
+        return;
+      }
+
+      var bounds = new maplibregl.LngLatBounds();
+
+      entries.forEach(function (entry, i) {
+        var isLatest = markLatest && (entry.type !== 'story') && (i === entries.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = (opts.storyMarkers && entry.type === 'story')
+          ? createStoryMarker()
+          : 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(map); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () {
+          var card = opts.cardPrefix ? document.getElementById(opts.cardPrefix + entry.slug) : null;
+          if (!card) { window.location.href = entry.url; return; }
+          var hashId = opts.cardPrefix + entry.slug;
+          function scrollAndHighlight() {
+            window.location.hash = hashId;
+            setTimeout(function () {
+              card.classList.add('is-highlighted');
+              setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+            }, 350);
+          }
+          if (opts.fullscreen) {
+            var col  = document.querySelector(opts.fullscreen.colSelector);
+            var isFs = col && col.classList.contains('is-fullscreen');
+            if (isFs) {
+              var fsBtn = document.getElementById(opts.fullscreen.btnId);
+              if (fsBtn) fsBtn.click();
+              setTimeout(scrollAndHighlight, 450);
+              return;
+            }
+          }
+          scrollAndHighlight();
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
+      });
+
+      if (entries.length === 1) {
+        map.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: singleZoom });
+      } else {
+        map.fitBounds(bounds, { padding: padding, maxZoom: maxZoom });
+      }
+
+      if (opts.gpx) {
+        renderGpxJourney(
+          map,
+          opts.gpx.use ? (opts.gpx.urls || []) : [],
+          entries,
+          opts.gpx.sourcePrefix,
+          opts.gpx.journeyId,
+          { connectMode: opts.gpx.autoconnect }
+        );
+      }
+
+      /* Collapse attribution <details> which MapLibre may open on load */
+      var attrib = map.getContainer().querySelector('.maplibregl-ctrl-attrib');
+      if (attrib) attrib.removeAttribute('open');
+    });
+
+    setTimeout(function () { map.resize(); }, 100);
+
+    if (opts.fullscreen) {
+      var fsBtn = document.getElementById(opts.fullscreen.btnId);
+      var col   = document.querySelector(opts.fullscreen.colSelector);
+      if (fsBtn && col) {
+        fsBtn.addEventListener('click', function () {
+          var isFs = col.classList.toggle('is-fullscreen');
+          fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+          document.body.style.overflow = isFs ? 'hidden' : '';
+          setTimeout(function () { map.resize(); }, 50);
+        });
+      }
+    }
+
+    return map;
+  }
+
   global.MapUtils = {
     MAP_STYLE:            MAP_STYLE,
+    initEntryMap:         initEntryMap,
     ACCENT:               ACCENT,
     haversineKm:          haversineKm,
     parseGpxFiles:        parseGpxFiles,

themes/intotheeast/js/src/main.js

@@ -238,6 +238,49 @@ function initPanelToggles() {
     });
 }
 
+/* ── Trip stats / cycling computation (trip + home-active) ───
+   config: { gpxUrls: [], gpsPoints: [[lat,lng],...], hasGpx: bool }
+   No-op if #stat-distance is absent (page rendered no stats panel).
+   No-GPX fallback: if gpsPoints.length < 2, write '—' and return (no '~0'). */
+function initTripStats(config) {
+    var distEl = document.getElementById('stat-distance');
+    if (!distEl) return;
+
+    var gpxUrls   = config.gpxUrls   || [];
+    var gpsPoints = config.gpsPoints || [];
+
+    if (config.hasGpx) {
+        MapUtils.parseGpxFiles(gpxUrls, function (result) {
+            distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
+            function setText(id, val) {
+                var el = document.getElementById(id);
+                if (el) el.textContent = val;
+            }
+            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
+            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
+            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
+            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
+            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
+            setText('cyc-moving-time', result.movingTime || '—');
+            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
+        });
+    } else {
+        if (gpsPoints.length < 2) {
+            distEl.textContent = '—';
+            return;
+        }
+        var total = 0;
+        for (var i = 1; i < gpsPoints.length; i++) {
+            total += MapUtils.haversineKm(
+                parseFloat(gpsPoints[i-1][0]), parseFloat(gpsPoints[i-1][1]),
+                parseFloat(gpsPoints[i][0]),   parseFloat(gpsPoints[i][1])
+            );
+        }
+        distEl.textContent = '~' + Math.round(total).toLocaleString();
+    }
+}
+window.initTripStats = initTripStats;
+
 /* ── Boot ────────────────────────────────────────────────── */
 document.addEventListener('DOMContentLoaded', function () {
     initPhotoStrip();

themes/intotheeast/templates/dailies.html.twig

@@ -1,70 +0,0 @@
-{% extends 'default.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 journal_entries = page.collection() %}
-{% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
-{% 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.date}]) %}
-{% endfor %}
-{% for s in story_entries %}
-    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
-{% endfor %}
-
-{# page.collection() returns date-descending; reverse to match ascending default on trip page. #}
-{% set all_items = all_items|reverse %}
-
-{# Collect GPS entries for mini-map #}
-{% 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,
-            'lng': item.page.header.lng,
-            'title': item.page.title,
-            'slug': item.page.slug,
-            'url': item.page.url,
-            'force_connect': item.page.header.force_connect ? true : false,
-            'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
-        }]) %}
-    {% endif %}
-{% endfor %}
-
-{% set trip_page = page.parent() %}
-
-{% include 'partials/feed-map.html.twig' with {
-    'map_entries': map_entries,
-    'map_id': 'feed-map',
-    'map_var': 'feedMap',
-    'link_href': page.parent().url ~ '/map',
-    'card_prefix': 'entry-',
-    'trip_page': trip_page,
-    'show_journey': true
-} only %}
-
-<div class="feed-sort-bar">
-    <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
-</div>
-<div class="feed">
-    {% if all_items|length > 0 %}
-        {% for item in all_items %}
-            {% set entry = item.page %}
-            {% if item.type == 'journal' %}
-                {% include 'partials/entry-journal.html.twig' %}
-            {% else %}
-                {% include 'partials/entry-story.html.twig' %}
-            {% endif %}
-        {% endfor %}
-    {% else %}
-        <p class="feed-empty">No entries yet. The journey is about to begin.</p>
-    {% endif %}
-</div>
-
-{% endblock %}

themes/intotheeast/templates/home.html.twig

@@ -29,6 +29,13 @@
 {% 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 %}
@@ -54,33 +61,33 @@
 
 <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' %}
-                        {% include 'partials/entry-journal.html.twig' %}
-                    {% else %}
-                        {% include 'partials/entry-story.html.twig' %}
-                    {% endif %}
-                {% endfor %}
-            {% else %}
-                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
-            {% endif %}
+        <div class="home-map" id="home-map">
+            <button class="feed-map-fullscreen-btn" id="home-map-fullscreen" aria-label="Expand map">
+                <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                    <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+                </svg>
+                <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+            </button>
         </div>
     </div>
+
+    {% 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>
 
 {% if map_entries|length > 0 %}
@@ -91,49 +98,14 @@ var USE_GPX       = {{ trip and trip.header.use_gpx is not null ? (trip.header.u
 var AUTOCONNECT   = "{{ trip ? (trip.header.autoconnect ?? 'on') : 'on' }}";
 
 document.addEventListener('DOMContentLoaded', function() {
-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) return;
-            window.location.hash = 'entry-' + entry.slug;
-        });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
+    window.homeMap = MapUtils.initEntryMap({
+        container:  'home-map',
+        entries:    HOME_ENTRIES,
+        cardPrefix: 'entry-',
+        fullscreen: { btnId: 'home-map-fullscreen', colSelector: '.home-map-col' },
+        gpx:        { urls: HOME_GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'home-gpx', journeyId: 'home-journey' },
+        fit:        { padding: 60, maxZoom: 11, singleZoom: 10 }
     });
-
-    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, USE_GPX ? HOME_GPX_URLS : [], HOME_ENTRIES, 'home-gpx', 'home-journey', { connectMode: AUTOCONNECT });
-});
 }); // DOMContentLoaded
 </script>
 {% endif %}
@@ -247,44 +219,12 @@ homeMap.on('load', function () {
 var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};
 
 document.addEventListener('DOMContentLoaded', function() {
-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);
+    window.homeMap = MapUtils.initEntryMap({
+        container:  'home-map',
+        entries:    HIGHLIGHTS_ENTRIES,
+        markLatest: false,
+        fit:        { padding: 60, maxZoom: 8, singleZoom: 8 }
     });
-
-    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);
-});
 }); // DOMContentLoaded
 </script>
 {% endif %}

themes/intotheeast/templates/map.html.twig

@@ -1,102 +0,0 @@
-{% 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_page = page.parent() %}
-{% set tracker_page = grav.pages.find(page.parent().route ~ '/dailies') %}
-{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
-
-{% set gpx_urls = [] %}
-{% for name, media in trip_page.media.all %}
-    {% if name|split('.')|last == 'gpx' %}
-        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
-    {% endif %}
-{% endfor %}
-
-{% set map_entries = [] %}
-{% for entry in all_entries %}
-    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
-        {% set hero_url = null %}
-        {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
-            {% set hero_url = entry.media[entry.header.hero_image].cropResize(240, 135).url %}
-        {% elseif entry.media.images|length > 0 %}
-            {% set hero_url = entry.media.images|first.cropResize(240, 135).url %}
-        {% endif %}
-        {% set map_entries = map_entries|merge([{
-            'lat': entry.header.lat|number_format(6, '.', ''),
-            'lng': entry.header.lng|number_format(6, '.', ''),
-            'title': entry.title,
-            'date': entry.date|date('d M Y'),
-            'url': entry.url,
-            'hero': hero_url,
-            'force_connect': entry.header.force_connect ? true : false,
-            'transport_mode': entry.header.transport_mode ? entry.header.transport_mode : null
-        }]) %}
-    {% endif %}
-{% endfor %}
-
-<div class="map-container" id="trip-map"></div>
-
-<script>
-var ENTRIES     = {{ map_entries|json_encode|raw }};
-var GPX_URLS    = {{ gpx_urls|json_encode|raw }};
-var USE_GPX     = {{ trip_page.header.use_gpx ?? true ? 'true' : 'false' }};
-var AUTOCONNECT = "{{ trip_page.header.autoconnect ?? 'on' }}";
-
-document.addEventListener('DOMContentLoaded', function() {
-var map = new maplibregl.Map({
-    container: 'trip-map',
-    style: MapUtils.MAP_STYLE,
-    center: [20, 20],
-    zoom: 2
-});
-
-map.addControl(new maplibregl.NavigationControl(), 'top-right');
-
-if (ENTRIES.length === 0) {
-    var empty = document.createElement('div');
-    empty.className = 'map-empty';
-    empty.textContent = 'No locations yet — entries with GPS will appear here.';
-    document.getElementById('trip-map').appendChild(empty);
-}
-
-map.on('load', function () {
-    if (ENTRIES.length === 0) return;
-
-    /* ── Markers + bounds ──────────────────────────────────────── */
-    var bounds = new maplibregl.LngLatBounds();
-
-    ENTRIES.forEach(function (entry, i) {
-        var isLatest = (i === ENTRIES.length - 1);
-        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
-        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(map); });
-        el.addEventListener('mouseleave', function () { popup.remove(); });
-        el.addEventListener('click', function () { window.location.href = entry.url; });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
-    });
-
-    /* ── Fit bounds ─────────────────────────────────────────────── */
-    if (ENTRIES.length === 1) {
-        map.jumpTo({ center: [parseFloat(ENTRIES[0].lng), parseFloat(ENTRIES[0].lat)], zoom: 10 });
-    } else {
-        map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
-    }
-
-    /* ── GPX tracks + journey segments ─────────────────────────── */
-    MapUtils.renderGpxJourney(map, USE_GPX ? GPX_URLS : [], ENTRIES, 'gpx', 'journey', { connectMode: AUTOCONNECT });
-});
-}); // DOMContentLoaded
-</script>
-{% endblock %}

themes/intotheeast/templates/partials/base.html.twig

@@ -13,7 +13,7 @@
     {{ assets.css()|raw }}
     {{ assets.js()|raw }}
 </head>
-<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
+<body class="{% if page.template == 'home' or page.template == 'trip' %}home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
     <a class="skip-link" href="#main-content">Skip to main content</a>
     <header class="site-header">
         <a class="site-title" href="{{ base_url_absolute }}">into the east</a>

themes/intotheeast/templates/partials/feed-map.html.twig

@@ -1,119 +0,0 @@
-{#
-  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
-
-  Required variables (via {% include ... with {...} only %}):
-    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
-    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
-    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
-    link_href    — string|null: URL for "View full map" link; null/empty hides the link
-    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
-    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
-    show_journey — bool: whether to draw the route connector line between markers
-
-  Callers must register map assets via {% block map_assets %} in their own template.
-#}
-{% if map_entries|length > 0 %}
-<div class="feed-map-wrap">
-    <div class="feed-map" id="{{ map_id }}">
-        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-fullscreen" aria-label="Expand map">
-            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
-            </svg>
-            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
-        </button>
-    </div>
-    {% if link_href %}
-    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
-    {% endif %}
-</div>
-
-<script>
-{% set js_suffix = map_id|replace({'-': '_'})|upper %}
-{% if show_journey %}
-{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
-{% endif %}
-var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
-{% if show_journey %}
-var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
-{% endif %}
-
-document.addEventListener('DOMContentLoaded', function() {
-var {{ map_var }} = new maplibregl.Map({
-    container: '{{ map_id }}',
-    style: MapUtils.MAP_STYLE,
-    center: [20, 20],
-    zoom: 2,
-    attributionControl: false
-});
-{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
-
-{{ map_var }}.on('load', function () {
-    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
-    if (attrib) attrib.removeAttribute('open');
-
-    var bounds = new maplibregl.LngLatBounds();
-    var entries = MAP_ENTRIES_{{ js_suffix }};
-
-    entries.forEach(function (entry, i) {
-        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
-        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
-        bounds.extend(lngLat);
-
-        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : 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({{ map_var }}); });
-        el.addEventListener('mouseleave', function () { popup.remove(); });
-
-        el.addEventListener('click', function () {
-            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
-            var mapWrap = document.querySelector('.feed-map-wrap');
-            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
-            function scrollAndHighlight() {
-                if (!card) { window.location.href = entry.url; return; }
-                window.location.hash = '{{ card_prefix }}' + entry.slug;
-                setTimeout(function () {
-                    card.classList.add('is-highlighted');
-                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
-                }, 350);
-            }
-            if (isFs) {
-                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
-                if (fsBtn) fsBtn.click();
-                setTimeout(scrollAndHighlight, 450);
-            } else {
-                scrollAndHighlight();
-            }
-        });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
-    });
-
-    if (entries.length === 1) {
-        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
-    } else {
-        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
-    }
-
-    {% if show_journey %}
-    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
-    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
-    {% endif %}
-});
-
-(function() {
-    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
-    var mapWrap = document.querySelector('.feed-map-wrap');
-    if (!fsBtn || !mapWrap) return;
-    fsBtn.addEventListener('click', function() {
-        var isFs = mapWrap.classList.toggle('is-fullscreen');
-        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
-        document.body.style.overflow = isFs ? 'hidden' : '';
-        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
-    });
-})();
-}); // DOMContentLoaded
-</script>
-{% endif %}

themes/intotheeast/templates/partials/home-predeparture.html.twig

@@ -0,0 +1,16 @@
+<div class="home-feed-col">
+    <div class="home-trip-header">
+        <h1 class="home-trip-name">{{ trip_page.title }}</h1>
+        {% if trip_page.header.date_start %}
+        <p class="trip-dates">Departing {{ trip_page.header.date_start|date('d M Y') }}</p>
+        {% endif %}
+        <span class="home-trip-counts">Coming soon</span>
+    </div>
+    <div class="feed">
+        <hr class="home-predeparture-divider">
+        <p class="feed-empty">The journey hasn't begun yet — check back once we're on the road.</p>
+        <div class="home-highlights-cta-wrap">
+            <a class="home-highlights-cta" href="/trips">In the meantime, explore my other trips →</a>
+        </div>
+    </div>
+</div>

themes/intotheeast/templates/partials/trip-feed-col.html.twig

@@ -0,0 +1,65 @@
+{% import 'macros/stats.html.twig' as stats_m %}
+{% import 'macros/cycling.html.twig' as cycling_m %}
+<div class="home-feed-col">
+    <div class="home-trip-header">
+        <h1 class="home-trip-name">{{ trip_page.title }}</h1>
+        {% if trip_page.header.date_start %}
+        <p class="trip-dates">
+            {{ trip_page.header.date_start|date('d M Y') }}
+            {% if trip_page.header.date_end %} — {{ trip_page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
+        </p>
+        {% endif %}
+        <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 class="trip-filter-bar">
+            <div class="trip-filter-group">
+                <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
+                <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
+                <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
+            </div>
+            {% if show_sort %}
+            <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
+            {% endif %}
+        </div>
+        <div class="trip-panel-toggles">
+            <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+            {% if has_gpx %}
+            <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+            {% endif %}
+        </div>
+    </div>
+
+    {{ stats_m.stats_panel(journal_entries, trip_page, journal_count, has_gpx) }}
+
+    {% if has_gpx %}
+    {{ cycling_m.cycling_panel() }}
+    {% endif %}
+
+    <div class="feed">
+        {% if all_items|length > 0 %}
+            {% for item in all_items %}
+                {% set entry = item.page %}
+                {% if item.type == 'journal' %}
+                    {% include 'partials/entry-journal.html.twig' %}
+                {% else %}
+                    {% include 'partials/entry-story.html.twig' %}
+                {% endif %}
+            {% endfor %}
+        {% else %}
+            <p class="feed-empty">No entries yet. The journey is about to begin.</p>
+        {% endif %}
+        <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        initTripStats({
+            gpxUrls:   {{ gpx_urls|json_encode|raw }},
+            gpsPoints: {{ gps_points|json_encode|raw }},
+            hasGpx:    {{ has_gpx ? 'true' : 'false' }}
+        });
+    });
+    </script>
+</div>

themes/intotheeast/templates/stats.html.twig

@@ -1,196 +0,0 @@
-{% extends 'partials/base.html.twig' %}
-
-{% block content %}
-{% set trip_page = page.parent() %}
-{% set tracker_page = grav.pages.find(trip_page.route ~ '/dailies') %}
-{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
-
-{# Basic counts #}
-{% set entry_count = all_entries|length %}
-
-{# Days on road — past trip uses declared date_end; active trip uses first entry to now #}
-{% set days_on_road = 0 %}
-{% if trip_page.header.date_end is not empty %}
-    {# Past trip: use declared end date #}
-    {% set start_ts = trip_page.header.date_start|date('U') %}
-    {% set end_ts = trip_page.header.date_end|date('U') %}
-    {% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
-{% else %}
-    {# Active trip: first entry to now #}
-    {% set first_ts = null %}
-    {% for entry in all_entries %}
-        {% set ts = entry.date|date('U') %}
-        {% if first_ts is null or ts < first_ts %}{% set first_ts = ts %}{% endif %}
-    {% endfor %}
-    {% if first_ts is not null %}
-        {% set diff_seconds = "now"|date('U') - first_ts %}
-        {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
-        {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
-    {% endif %}
-{% endif %}
-
-{# Countries — unique, case-insensitive dedup, preserve original casing #}
-{% set seen_lower = [] %}
-{% set country_display = [] %}
-{% for entry in all_entries %}
-    {% if entry.header.location_country is not empty %}
-        {% set lower = entry.header.location_country|trim|lower %}
-        {% if lower not in seen_lower %}
-            {% set seen_lower = seen_lower|merge([lower]) %}
-            {% set country_display = country_display|merge([entry.header.location_country|trim]) %}
-        {% endif %}
-    {% endif %}
-{% endfor %}
-
-{# Cities — unique, case-insensitive dedup, preserve original casing #}
-{% set seen_city_lower = [] %}
-{% set city_display = [] %}
-{% for entry in all_entries %}
-    {% if entry.header.location_city is not empty %}
-        {% set lower = entry.header.location_city|trim|lower %}
-        {% if lower not in seen_city_lower %}
-            {% set seen_city_lower = seen_city_lower|merge([lower]) %}
-            {% set city_display = city_display|merge([entry.header.location_city|trim]) %}
-        {% endif %}
-    {% endif %}
-{% endfor %}
-
-{# Temperature range #}
-{% set temp_min = null %}
-{% set temp_max = null %}
-{% for entry in all_entries %}
-    {% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
-        {% set t = entry.header.weather_temp_c %}
-        {% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
-        {% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% endif %}
-    {% endif %}
-{% endfor %}
-
-{# GPS points for distance — collect as JSON for JS computation #}
-{% set gps_points = [] %}
-{% for entry in all_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 %}
-
-{# GPX detection — trip has GPX files if any .gpx media exists on the trip page #}
-{% set gpx_urls = [] %}
-{% for name, media in trip_page.media.all %}
-    {% if name|split('.')|last == 'gpx' %}
-        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
-    {% endif %}
-{% endfor %}
-{% set has_gpx = gpx_urls|length > 0 %}
-
-<div class="stats-page">
-    <h1 class="stats-heading">Trip Statistics</h1>
-
-    <div class="stats-grid">
-        <div class="stat-block">
-            <span class="stat-value">{{ days_on_road }}</span>
-            <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
-        </div>
-        <div class="stat-block">
-            <span class="stat-value">{{ entry_count }}</span>
-            <span class="stat-label">{{ entry_count == 1 ? 'entry' : 'entries' }} posted</span>
-        </div>
-        <div class="stat-block">
-            <span class="stat-value">{{ country_display|length }}</span>
-            <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
-        </div>
-        <div class="stat-block">
-            <span class="stat-value">{{ city_display|length }}</span>
-            <span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
-        </div>
-        <div class="stat-block">
-            <span class="stat-value" id="stat-distance">—</span>
-            <span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
-        </div>
-        <div class="stat-block">
-            {% if temp_min is not null %}
-            <span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
-            {% else %}
-            <span class="stat-value">—</span>
-            {% endif %}
-            <span class="stat-label">°C range</span>
-        </div>
-    </div>
-
-    {% if country_display|length > 0 %}
-    <div class="stats-countries">
-        <span class="stats-countries-label">Countries visited</span>
-        {{ country_display|join(' · ') }}
-    </div>
-    {% endif %}
-
-    <p class="stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
-</div>
-
-<script>
-var GPS_POINTS = {{ gps_points|json_encode|raw }};
-var GPX_URLS = {{ gpx_urls|json_encode|raw }};
-
-function haversine(lat1, lng1, lat2, lng2) {
-    var R = 6371;
-    var dLat = (lat2 - lat1) * Math.PI / 180;
-    var dLng = (lng2 - lng1) * Math.PI / 180;
-    var a = Math.sin(dLat/2)*Math.sin(dLat/2) +
-            Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)*
-            Math.sin(dLng/2)*Math.sin(dLng/2);
-    return R * 2 * Math.asin(Math.sqrt(a));
-}
-
-var distEl = document.getElementById('stat-distance');
-
-if (GPX_URLS.length > 0) {
-    // Mode A: sum haversine between all GPX trackpoints (deterministic order)
-    var pending = GPX_URLS.length;
-    var fileResults = new Array(GPX_URLS.length);
-    GPX_URLS.forEach(function(url, idx) {
-        fetch(url)
-            .then(function(r) { return r.text(); })
-            .then(function(text) {
-                var xml = new DOMParser().parseFromString(text, 'text/xml');
-                var trkpts = xml.querySelectorAll('trkpt');
-                var pts = [];
-                trkpts.forEach(function(pt) {
-                    pts.push({
-                        lat: parseFloat(pt.getAttribute('lat')),
-                        lon: parseFloat(pt.getAttribute('lon'))
-                    });
-                });
-                fileResults[idx] = pts;
-                pending--;
-                if (pending === 0) { computeTotalDistance(); }
-            })
-            .catch(function(err) {
-                console.warn('GPX load failed:', url, err);
-                fileResults[idx] = [];
-                pending--;
-                if (pending === 0) { computeTotalDistance(); }
-            });
-    });
-
-    function computeTotalDistance() {
-        var total = 0;
-        fileResults.forEach(function(pts) {
-            for (var i = 1; i < pts.length; i++) {
-                total += haversine(pts[i-1].lat, pts[i-1].lon, pts[i].lat, pts[i].lon);
-            }
-        });
-        distEl.textContent = total > 0 ? Math.round(total).toLocaleString() : '—';
-    }
-} else {
-    // Mode B: sum haversine between consecutive entry lat/lng points
-    var total = 0;
-    for (var i = 1; i < GPS_POINTS.length; i++) {
-        total += haversine(
-            parseFloat(GPS_POINTS[i-1][0]), parseFloat(GPS_POINTS[i-1][1]),
-            parseFloat(GPS_POINTS[i][0]), parseFloat(GPS_POINTS[i][1])
-        );
-    }
-    distEl.textContent = GPS_POINTS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
-}
-</script>
-{% endblock %}

themes/intotheeast/templates/stories.html.twig

@@ -1,80 +0,0 @@
-{% 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 %}
-{% import 'macros/date-range.html.twig' as dr_m %}
-{% set stories = page.children.published().order('date', 'asc') %}
-
-{# Collect stories that have coordinates for the mini-map #}
-{% set map_entries = [] %}
-{% for story in stories %}
-    {% if story.header.lat is not empty and story.header.lng is not empty %}
-        {% set map_entries = map_entries|merge([{
-            'lat': story.header.lat,
-            'lng': story.header.lng,
-            'title': story.title,
-            'slug': story.slug,
-            'url': story.url,
-            'type': 'story',
-            'force_connect': false,
-            'transport_mode': null
-        }]) %}
-    {% endif %}
-{% endfor %}
-
-{% set trip_page = page.parent() %}
-
-{% include 'partials/feed-map.html.twig' with {
-    'map_entries': map_entries,
-    'map_id': 'stories-map',
-    'map_var': 'storiesMap',
-    'link_href': null,
-    'card_prefix': 'story-',
-    'trip_page': trip_page,
-    'show_journey': false
-} only %}
-
-<div class="stories-listing">
-    <div class="stories-listing__header">
-        <h1 class="stories-listing__heading">Stories</h1>
-        <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
-    </div>
-
-    {% if stories|length > 0 %}
-    <div class="stories-grid">
-        {% for story in stories %}
-        {% set hero = null %}
-        {% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
-            {% set hero = story.media[story.header.hero_image] %}
-        {% endif %}
-
-        {% set date_str = dr_m.format_date_range(story.date, story.header.end_date ?? null) %}
-
-        <a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
-            {% if hero %}
-            <div class="story-card__photo">
-                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
-            </div>
-            {% else %}
-            <div class="story-card__photo story-card__photo--empty"></div>
-            {% endif %}
-            <div class="story-card__body">
-                <time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
-                {% if story.header.location_name %}
-                <span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
-                {% endif %}
-                <h2 class="story-card__title">{{ story.title }}</h2>
-                <span class="story-card__cta">Read story →</span>
-            </div>
-        </a>
-        {% endfor %}
-    </div>
-    {% else %}
-    <p class="stories-empty">No stories yet — check back soon.</p>
-    {% endif %}
-</div>
-{% endblock %}

themes/intotheeast/templates/trip.html.twig

@@ -67,57 +67,17 @@
         </div>
     </div>
 
-    <div class="home-feed-col">
-        <div class="home-trip-header">
-            <h1 class="home-trip-name">{{ page.title }}</h1>
-            {% if page.header.date_start %}
-            <p class="trip-dates">
-                {{ page.header.date_start|date('d M Y') }}
-                {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
-            </p>
-            {% endif %}
-            <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 class="trip-filter-bar">
-                <div class="trip-filter-group">
-                    <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
-                    <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
-                    <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
-                </div>
-                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
-            </div>
-            <div class="trip-panel-toggles">
-                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
-                {% if has_gpx %}
-                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
-                {% endif %}
-            </div>
-        </div>
-
-        {{ stats_m.stats_panel(journal_entries, page, journal_count, has_gpx) }}
-
-        {% if has_gpx %}
-        {{ cycling_m.cycling_panel() }}
-        {% endif %}
-
-        <div class="feed">
-            {% if all_items|length > 0 %}
-                {% for item in all_items %}
-                    {% set entry = item.page %}
-                    {% if item.type == 'journal' %}
-                        {% include 'partials/entry-journal.html.twig' %}
-                    {% else %}
-                        {% include 'partials/entry-story.html.twig' %}
-                    {% endif %}
-                {% endfor %}
-            {% else %}
-                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
-            {% endif %}
-            <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
-        </div>
-    </div>
+    {% include 'partials/trip-feed-col.html.twig' with {
+        trip_page: page,
+        all_items: all_items,
+        journal_entries: journal_entries,
+        journal_count: journal_count,
+        story_count: story_count,
+        has_gpx: has_gpx,
+        gpx_urls: gpx_urls,
+        gps_points: gps_points,
+        show_sort: true
+    } only %}
 </div>
 
 <script>
@@ -127,127 +87,15 @@ var USE_GPX      = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
 var AUTOCONNECT  = "{{ page.header.autoconnect ?? 'on' }}";
 
 document.addEventListener('DOMContentLoaded', function() {
-
-var tripMap = new maplibregl.Map({
-    container: 'trip-map',
-    style: MapUtils.MAP_STYLE,
-    center: [20, 20],
-    zoom: 2,
-    attributionControl: false
-});
-tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
-
-tripMap.on('load', function () {
-    if (TRIP_ENTRIES.length === 0) {
-        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
-        return;
-    }
-
-    /* ── Markers + bounds ──────────────────────────────────────── */
-    var bounds = new maplibregl.LngLatBounds();
-
-    TRIP_ENTRIES.forEach(function (entry, i) {
-        var isLatest = (entry.type !== 'story') && (i === TRIP_ENTRIES.length - 1);
-        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
-        bounds.extend(lngLat);
-
-        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : 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(tripMap); });
-        el.addEventListener('mouseleave', function () { popup.remove(); });
-        el.addEventListener('click', function () {
-            var card = document.getElementById('entry-' + entry.slug);
-            if (!card) return;
-            var mapCol = document.querySelector('.home-map-col');
-            var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
-            function scrollAndHighlight() {
-                window.location.hash = 'entry-' + entry.slug;
-                setTimeout(function () {
-                    card.classList.add('is-highlighted');
-                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
-                }, 350);
-            }
-            if (isFs) {
-                var fsBtn = document.getElementById('trip-map-fullscreen');
-                if (fsBtn) fsBtn.click();
-                setTimeout(scrollAndHighlight, 450);
-            } else {
-                scrollAndHighlight();
-            }
-        });
-
-        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
+    window.tripMap = MapUtils.initEntryMap({
+        container:    'trip-map',
+        entries:      TRIP_ENTRIES,
+        cardPrefix:   'entry-',
+        storyMarkers: true,
+        fullscreen:   { btnId: 'trip-map-fullscreen', colSelector: '.home-map-col' },
+        gpx:          { urls: GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'gpx', journeyId: 'trip-journey' },
+        fit:          { padding: 60, maxZoom: 11, singleZoom: 10 }
     });
-
-    /* ── Fit bounds ─────────────────────────────────────────────── */
-    if (TRIP_ENTRIES.length === 1) {
-        tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
-    } else {
-        tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
-    }
-
-    /* ── GPX tracks + journey segments ─────────────────────────── */
-    MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });
-
-    // Collapse attribution <details> which MapLibre may open on load
-    var attrib = tripMap.getContainer().querySelector('.maplibregl-ctrl-attrib');
-    if (attrib) attrib.removeAttribute('open');
-});
-setTimeout(function () { tripMap.resize(); }, 100);
-
-(function() {
-    var fsBtn = document.getElementById('trip-map-fullscreen');
-    var mapCol = document.querySelector('.home-map-col');
-    if (!fsBtn || !mapCol) return;
-    fsBtn.addEventListener('click', function() {
-        var isFs = mapCol.classList.toggle('is-fullscreen');
-        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
-        document.body.style.overflow = isFs ? 'hidden' : '';
-        setTimeout(function() { tripMap.resize(); }, 50);
-    });
-})();
-
-var STATS_GPS = {{ gps_points|json_encode|raw }};
-var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
-
-(function() {
-    var distEl = document.getElementById('stat-distance');
-
-    if (HAS_GPX) {
-        MapUtils.parseGpxFiles(GPX_URLS, function(result) {
-            if (distEl) {
-                distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
-            }
-            function setText(id, val) {
-                var el = document.getElementById(id);
-                if (el) el.textContent = val;
-            }
-            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
-            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
-            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
-            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
-            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
-            setText('cyc-moving-time', result.movingTime || '—');
-            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
-        });
-    } else {
-        var total = 0;
-        for (var i = 1; i < STATS_GPS.length; i++) {
-            total += MapUtils.haversineKm(
-                parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
-                parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
-            );
-        }
-        if (distEl) {
-            distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
-        }
-    }
-
-})();
-
 }); // DOMContentLoaded
 </script>