From 933652fd57cf45094686ac44fd16c1e43ff56891 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 21:07:12 +0200
Subject: [PATCH] refactor(templates): extract entry markup into shared
 partials

Creates partials/entry-journal.html.twig and partials/entry-story.html.twig
so trip, dailies, and home all use the same up-to-date markup. Home page
gains PhotoSwipe, blurred fill, adaptive aspect ratio, and hash-based
marker scroll. Future changes only need to happen in one place.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 .../intotheeast/templates/dailies.html.twig   |  79 +------------
 themes/intotheeast/templates/home.html.twig   | 106 +++++++-----------
 .../partials/entry-journal.html.twig          |  59 ++++++++++
 .../templates/partials/entry-story.html.twig  |  17 +++
 themes/intotheeast/templates/trip.html.twig   |  79 +------------
 5 files changed, 120 insertions(+), 220 deletions(-)
 create mode 100644 themes/intotheeast/templates/partials/entry-journal.html.twig
 create mode 100644 themes/intotheeast/templates/partials/entry-story.html.twig

diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index eaca391..3f4d007 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -91,85 +91,10 @@ feedMap.on('load', function () {
     {% if all_items|length > 0 %}
         {% for item in all_items %}
             {% set entry = item.page %}
-
             {% if item.type == 'journal' %}
-            {% set weather_icons = {
-                'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
-                'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
-                'Snow': '❄️', 'Thunderstorm': '⛈️'
-            } %}
-            <article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
-                <header class="journal-post-header">
-                    <h2 class="journal-post-title">{{ entry.title }}</h2>
-                    <p class="journal-post-meta">
-                        <a class="journal-post-permalink" href="{{ entry.url }}">
-                            <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
-                        </a>
-                        {% if entry.header.location_city or entry.header.location_country %}
-                        <span class="journal-post-location">
-                            · 📍
-                            {%- set _loc = [] -%}
-                            {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
-                            {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
-                            {{ _loc|join(', ') }}
-                        </span>
-                        {% endif %}
-                        {% if entry.header.weather_desc %}
-                        <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
-                        {% endif %}
-                    </p>
-                </header>
-
-                {% set images = entry.media.images %}
-                {% if images|length > 0 %}
-                {% set firstImg = images|first %}
-                {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
-                <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
-                    <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
-                        {% for img in images %}
-                        <a class="journal-photo-slide"
-                           href="{{ img.url }}"
-                           data-pswp-width="{{ img.width }}"
-                           data-pswp-height="{{ img.height }}"
-                           style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
-                           target="_blank">
-                            <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
-                        </a>
-                        {% endfor %}
-                    </div>
-                    {% if images|length > 1 %}
-                    <div class="journal-photo-dots" aria-hidden="true">
-                        {% for img in images %}
-                        <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                    <button class="journal-photo-expand" aria-label="View full size">
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
-                    </button>
-                </div>
-                {% endif %}
-
-                <div class="journal-post-body">{{ entry.content|raw }}</div>
-            </article>
+                {% include 'partials/entry-journal.html.twig' %}
             {% else %}
-            {% 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 %}
-            <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
-                    {% if hero %}
-                    <div class="entry-card-photo entry-card-photo--story">
-                        <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
-                    </div>
-                    {% endif %}
-                    <div class="entry-card-body">
-                        <span class="story-badge">✦ Story</span>
-                        <h2 class="entry-title">{{ entry.title }}</h2>
-                    </div>
-            </a>
+                {% include 'partials/entry-story.html.twig' %}
             {% endif %}
         {% endfor %}
     {% else %}
diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig
index f24f343..9614745 100644
--- a/themes/intotheeast/templates/home.html.twig
+++ b/themes/intotheeast/templates/home.html.twig
@@ -1,6 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set trip_route = config.site.active_trip %}
 {% set trip = grav.pages.find(trip_route) %}
 
@@ -65,73 +66,10 @@
             {% if all_items|length > 0 %}
                 {% for item in all_items %}
                     {% set entry = item.page %}
-
                     {% if item.type == 'journal' %}
-                    {% set weather_icons = {
-                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
-                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
-                        'Snow': '❄️', 'Thunderstorm': '⛈️'
-                    } %}
-                    <article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
-                        <header class="journal-post-header">
-                            <h2 class="journal-post-title">{{ entry.title }}</h2>
-                            <p class="journal-post-meta">
-                                <a class="journal-post-permalink" href="{{ entry.url }}">
-                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
-                                </a>
-                                {% if entry.header.location_city or entry.header.location_country %}
-                                <span class="journal-post-location">
-                                    · 📍
-                                    {%- set _loc = [] -%}
-                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
-                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
-                                    {{ _loc|join(', ') }}
-                                </span>
-                                {% endif %}
-                                {% if entry.header.weather_desc %}
-                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
-                                {% endif %}
-                            </p>
-                        </header>
-
-                        {% set images = entry.media.images %}
-                        {% if images|length > 0 %}
-                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
-                            {% for img in images %}
-                            <div class="journal-photo-slide">
-                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
-                            </div>
-                            {% endfor %}
-                        </div>
-                        {% if images|length > 1 %}
-                        <div class="journal-photo-dots" aria-hidden="true">
-                            {% for img in images %}
-                            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
-                            {% endfor %}
-                        </div>
-                        {% endif %}
-                        {% endif %}
-
-                        <div class="journal-post-body">{{ entry.content|raw }}</div>
-                    </article>
+                        {% include 'partials/entry-journal.html.twig' %}
                     {% else %}
-                    {% 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 %}
-                    <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" href="{{ entry.url }}">
-                        {% if hero %}
-                        <div class="entry-card-photo entry-card-photo--story">
-                            <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
-                        </div>
-                        {% endif %}
-                        <div class="entry-card-body">
-                            <span class="story-badge">✦ Story</span>
-                            <h2 class="entry-title">{{ entry.title }}</h2>
-                        </div>
-                    </a>
+                        {% include 'partials/entry-story.html.twig' %}
                     {% endif %}
                 {% endfor %}
             {% else %}
@@ -180,7 +118,8 @@ homeMap.on('load', function () {
         el.addEventListener('mouseleave', function () { popup.remove(); });
         el.addEventListener('click', function () {
             var card = document.getElementById('entry-' + entry.slug);
-            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            if (!card) return;
+            window.location.hash = 'entry-' + entry.slug;
         });
 
         new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
@@ -199,6 +138,41 @@ homeMap.on('load', function () {
 </script>
 {% endif %}
 
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.init();
+
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
+</script>
+
 {% else %}
 {# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
 
diff --git a/themes/intotheeast/templates/partials/entry-journal.html.twig b/themes/intotheeast/templates/partials/entry-journal.html.twig
new file mode 100644
index 0000000..980766c
--- /dev/null
+++ b/themes/intotheeast/templates/partials/entry-journal.html.twig
@@ -0,0 +1,59 @@
+{% set weather_icons = {
+    'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+    'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+    'Snow': '❄️', 'Thunderstorm': '⛈️'
+} %}
+<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
+    <header class="journal-post-header">
+        <h2 class="journal-post-title">{{ entry.title }}</h2>
+        <p class="journal-post-meta">
+            <a class="journal-post-permalink" href="{{ entry.url }}">
+                <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
+            </a>
+            {% if entry.header.location_city or entry.header.location_country %}
+            <span class="journal-post-location">
+                · 📍
+                {%- set _loc = [] -%}
+                {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
+                {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
+                {{ _loc|join(', ') }}
+            </span>
+            {% endif %}
+            {% if entry.header.weather_desc %}
+            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
+            {% endif %}
+        </p>
+    </header>
+
+    {% set images = entry.media.images %}
+    {% if images|length > 0 %}
+    {% set firstImg = images|first %}
+    {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+    <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
+        <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
+            {% for img in images %}
+            <a class="journal-photo-slide"
+               href="{{ img.url }}"
+               data-pswp-width="{{ img.width }}"
+               data-pswp-height="{{ img.height }}"
+               style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
+               target="_blank">
+                <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
+            </a>
+            {% endfor %}
+        </div>
+        {% if images|length > 1 %}
+        <div class="journal-photo-dots" aria-hidden="true">
+            {% for img in images %}
+            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
+            {% endfor %}
+        </div>
+        {% endif %}
+        <button class="journal-photo-expand" aria-label="View full size">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+        </button>
+    </div>
+    {% endif %}
+
+    <div class="journal-post-body">{{ entry.content|raw }}</div>
+</article>
diff --git a/themes/intotheeast/templates/partials/entry-story.html.twig b/themes/intotheeast/templates/partials/entry-story.html.twig
new file mode 100644
index 0000000..dee014f
--- /dev/null
+++ b/themes/intotheeast/templates/partials/entry-story.html.twig
@@ -0,0 +1,17 @@
+{% 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 %}
+<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
+    {% if hero %}
+    <div class="entry-card-photo entry-card-photo--story">
+        <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
+    </div>
+    {% endif %}
+    <div class="entry-card-body">
+        <span class="story-badge">✦ Story</span>
+        <h2 class="entry-title">{{ entry.title }}</h2>
+    </div>
+</a>
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 93d79a6..4f38710 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -216,85 +216,10 @@
             {% if all_items|length > 0 %}
                 {% for item in all_items %}
                     {% set entry = item.page %}
-
                     {% if item.type == 'journal' %}
-                    {% set weather_icons = {
-                        'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
-                        'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
-                        'Snow': '❄️', 'Thunderstorm': '⛈️'
-                    } %}
-                    <article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
-                        <header class="journal-post-header">
-                            <h2 class="journal-post-title">{{ entry.title }}</h2>
-                            <p class="journal-post-meta">
-                                <a class="journal-post-permalink" href="{{ entry.url }}">
-                                    <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
-                                </a>
-                                {% if entry.header.location_city or entry.header.location_country %}
-                                <span class="journal-post-location">
-                                    · 📍
-                                    {%- set _loc = [] -%}
-                                    {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
-                                    {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
-                                    {{ _loc|join(', ') }}
-                                </span>
-                                {% endif %}
-                                {% if entry.header.weather_desc %}
-                                <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
-                                {% endif %}
-                            </p>
-                        </header>
-
-                        {% set images = entry.media.images %}
-                        {% if images|length > 0 %}
-                        {% set firstImg = images|first %}
-                        {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
-                        <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
-                            <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
-                                {% for img in images %}
-                                <a class="journal-photo-slide"
-                                   href="{{ img.url }}"
-                                   data-pswp-width="{{ img.width }}"
-                                   data-pswp-height="{{ img.height }}"
-                                   style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
-                                   target="_blank">
-                                    <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
-                                </a>
-                                {% endfor %}
-                            </div>
-                            {% if images|length > 1 %}
-                            <div class="journal-photo-dots" aria-hidden="true">
-                                {% for img in images %}
-                                <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
-                                {% endfor %}
-                            </div>
-                            {% endif %}
-                            <button class="journal-photo-expand" aria-label="View full size">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
-                            </button>
-                        </div>
-                        {% endif %}
-
-                        <div class="journal-post-body">{{ entry.content|raw }}</div>
-                    </article>
+                        {% include 'partials/entry-journal.html.twig' %}
                     {% else %}
-                    {% 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 %}
-                    <a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
-                            {% if hero %}
-                            <div class="entry-card-photo entry-card-photo--story">
-                                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
-                            </div>
-                            {% endif %}
-                            <div class="entry-card-body">
-                                <span class="story-badge">✦ Story</span>
-                                <h2 class="entry-title">{{ entry.title }}</h2>
-                            </div>
-                    </a>
+                        {% include 'partials/entry-story.html.twig' %}
                     {% endif %}
                 {% endfor %}
             {% else %}