feat(stories): add mini-map via shared partial, add story card IDs

themes/intotheeast/css/style.css

@@ -339,7 +339,8 @@ body::after {
 .journal-post-body p:last-child { margin-bottom: 0; }
 
 .journal-post.is-highlighted,
-.entry-card.is-highlighted {
+.entry-card.is-highlighted,
+.story-card.is-highlighted {
     animation: card-highlight 0.7s ease-out forwards;
 }
 

themes/intotheeast/templates/stories.html.twig

@@ -3,6 +3,35 @@
 {% block content %}
 {% 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>
@@ -22,7 +51,7 @@
             {% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
         {% endif %}
 
-        <a class="story-card" href="{{ story.url }}">
+        <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">