From ffcf15628929f92423706754e5988bbabee25e20 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sat, 20 Jun 2026 17:53:56 +0000
Subject: [PATCH] feat: add story markers to trip map (white diamond); extend
 flash highlight to story cards

---
 themes/intotheeast/css/style.css            |  3 ++-
 themes/intotheeast/js/maplibre-utils.js     | 20 +++++++++++++++++++-
 themes/intotheeast/templates/trip.html.twig |  7 ++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index cb15e85..d782128 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -255,7 +255,8 @@ body::after {
 .journal-post-body p { margin-bottom: var(--space-4); }
 .journal-post-body p:last-child { margin-bottom: 0; }
 
-.journal-post.is-highlighted {
+.journal-post.is-highlighted,
+.entry-card.is-highlighted {
     animation: card-highlight 0.7s ease-out forwards;
 }
 
diff --git a/themes/intotheeast/js/maplibre-utils.js b/themes/intotheeast/js/maplibre-utils.js
index 92d1218..41e5e12 100644
--- a/themes/intotheeast/js/maplibre-utils.js
+++ b/themes/intotheeast/js/maplibre-utils.js
@@ -135,6 +135,23 @@
     return el;
   }
 
+  /*
+   * Return a styled <div> element for a story marker (white diamond, teal border).
+   */
+  function createStoryMarker() {
+    var el = document.createElement('div');
+    el.style.cssText = [
+      'width:10px',
+      'height:10px',
+      'background:#fff',
+      'border:2px solid ' + ACCENT,
+      'transform:rotate(45deg)',
+      'box-shadow:0 1px 4px rgba(0,0,0,0.4)',
+      'cursor:pointer'
+    ].join(';');
+    return el;
+  }
+
   /* ── GPX connector algorithm ────────────────────────────────────────── */
 
   /* Haversine distance in km between two [lat, lng] points */
@@ -273,6 +290,7 @@
     addJourneySegments:   addJourneySegments,
     buildJourneySegments: buildJourneySegments,
     extractTrackpoints:   extractTrackpoints,
-    createDotMarker:      createDotMarker
+    createDotMarker:      createDotMarker,
+    createStoryMarker:    createStoryMarker
   };
 })(window);
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 1774c2e..a49dc2d 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -88,8 +88,9 @@
 
 {% 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 %}
+    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
         {% set map_entries = map_entries|merge([{
+            'type': item.type,
             'lat': item.page.header.lat|number_format(6, '.', ''),
             'lng': item.page.header.lng|number_format(6, '.', ''),
             'slug': item.page.slug,
@@ -316,11 +317,11 @@ tripMap.on('load', function () {
     var bounds = new maplibregl.LngLatBounds();
 
     TRIP_ENTRIES.forEach(function (entry, i) {
-        var isLatest = (i === TRIP_ENTRIES.length - 1);
+        var isLatest = (entry.type !== 'story') && (i === TRIP_ENTRIES.length - 1);
         var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
         bounds.extend(lngLat);
 
-        var el = MapUtils.createDotMarker(isLatest);
+        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)