feat: add story markers to trip map (white diamond); extend flash highlight to story cards

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;
 }
 

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);

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)