From a88438438a36b00d70c4de9d03e5a807c415cd0f Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Fri, 20 Mar 2026 22:19:36 +0100
Subject: [PATCH] =?UTF-8?q?feat(where):=20merge=20been=E2=86=92where,=20ad?=
 =?UTF-8?q?d=20callout,=20fix=20checkin=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Overwrite /where/ with full map+list page (was /been/), delete been.njk
- Add "I'm currently in [venue]" callout above map using newest checkin
- Fix invisible checkin list: use Nunjucks groupby dict iteration
  ({% for groupName, groupItems in grouped %} instead of group.list)
- Deduplicated venues with visit count (e.g. "Murnau 2×")

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 been.njk  |  94 ---------------------------
 where.njk | 187 +++++++++++++++++++++++++-----------------------------
 2 files changed, 87 insertions(+), 194 deletions(-)
 delete mode 100644 been.njk

diff --git a/been.njk b/been.njk
deleted file mode 100644
index 8f7e61c..0000000
--- a/been.njk
+++ /dev/null
@@ -1,94 +0,0 @@
----
-layout: layouts/been.njk
-title: Been
-permalink: /been/
-description: All past check-ins captured by this site via Micropub.
-withSidebar: true
-leafletMap: true
----
-{% set checkins = whereCheckins.checkins or [] %}
-
-<div class="been-page">
-  <header class="mb-6 sm:mb-8">
-    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Been</h1>
-    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
-      All past check-ins captured by this site via Micropub.
-    </p>
-  </header>
-
-  {% set mapPoints = [] %}
-  {% for c in checkins %}
-    {% if c.latitude and c.longitude %}
-      {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueWebsiteUrl}), mapPoints) %}
-    {% endif %}
-  {% endfor %}
-
-  {% if mapPoints.length %}
-  <div id="checkin-map" class="mb-8 rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700" style="height: 420px;" aria-label="Map of past check-ins"></div>
-  <script>
-    var checkinPoints = {{ mapPoints | dump | safe }};
-  </script>
-  <script>
-    (function() {
-      L.Icon.Default.mergeOptions({
-        iconUrl: '/css/images/marker-icon.png',
-        iconRetinaUrl: '/css/images/marker-icon-2x.png',
-        shadowUrl: '/css/images/marker-shadow.png'
-      });
-      var map = L.map('checkin-map');
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        maxZoom: 19
-      }).addTo(map);
-      function escHtml(s) {
-        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-      }
-      var cluster = L.markerClusterGroup({ maxClusterRadius: 40 });
-      var markers = checkinPoints.map(function(p) {
-        var safeName = escHtml(p.name);
-        var safeUrl = (p.url && p.url.indexOf('https://') === 0) ? p.url : '';
-        var popup = safeUrl
-          ? '<a href="' + safeUrl + '" target="_blank" rel="noopener">' + safeName + '</a>'
-          : safeName;
-        return L.marker([p.lat, p.lng]).bindPopup(popup);
-      });
-      markers.forEach(function(m) { cluster.addLayer(m); });
-      map.addLayer(cluster);
-      map.fitBounds(cluster.getBounds().pad(0.2), { maxZoom: 13 });
-    })();
-  </script>
-  {% endif %}
-
-  {% if checkins.length %}
-  {% set grouped = checkins | groupby("name") %}
-  <ul class="divide-y divide-surface-200 dark:divide-surface-700" aria-label="Past check-ins">
-    {% for group in grouped %}
-    {% set checkin = group.list[0] %}
-    <li class="py-3">
-      <div class="font-medium text-surface-900 dark:text-surface-100">
-        {% if checkin.venueWebsiteUrl %}
-        <a href="{{ checkin.venueWebsiteUrl }}" target="_blank" rel="noopener" class="hover:underline">{{ checkin.name }}</a>
-        {% else %}
-        {{ checkin.name }}
-        {% endif %}
-        {% if group.list | length > 1 %}
-        <span class="ml-2 text-xs font-normal text-surface-500 dark:text-surface-400">{{ group.list | length }}×</span>
-        {% endif %}
-        {% if checkin.isPrivate %}<span class="ml-2 text-xs text-amber-700 dark:text-amber-400">(private)</span>{% endif %}
-      </div>
-      <div class="text-sm text-surface-600 dark:text-surface-400 mt-0.5">
-        {% if checkin.locationText %}{{ checkin.locationText }}{% if checkin.postalCode %}, {{ checkin.postalCode }}{% endif %}{% elif checkin.postalCode %}{{ checkin.postalCode }}{% endif %}
-        {% if checkin.published %}
-        <span class="mx-1">·</span><time datetime="{{ checkin.published }}">{{ checkin.published | date("MMM d, yyyy") }}</time>
-        {% endif %}
-      </div>
-    </li>
-    {% endfor %}
-  </ul>
-  {% else %}
-  <p class="text-surface-600 dark:text-surface-400">No past check-ins found.</p>
-  {% endif %}
-  <p class="mt-2 text-sm">
-    <a href="/where/" class="text-accent-700 hover:underline">Back to newest check-in →</a>
-  </p>
-</div>
diff --git a/where.njk b/where.njk
index 158beba..16486cc 100644
--- a/where.njk
+++ b/where.njk
@@ -1,113 +1,100 @@
 ---
-layout: layouts/base.njk
+layout: layouts/been.njk
 title: Where
 permalink: /where/
+description: All past check-ins captured by this site via Micropub.
 withSidebar: true
+leafletMap: true
 ---
 {% set checkins = whereCheckins.checkins or [] %}
 
-<div class="where-page">
+<div class="been-page">
   <header class="mb-6 sm:mb-8">
-      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Where</h1>
-      <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
-        Recent check-ins captured by this site via Micropub.
-      </p>      
-      <div class="prose prose-surface dark:prose-invert max-w-none text-surface-600 dark:text-surface-400 mb-2">
-        <p>
-          A <a href="https://niqwithq.com/posts/where-are-you">where page</a> is a place on the web to let others know about your current location. Thanks to <a href="https://aaronparecki.com/">Aaron Parecki</a> for ownyourswarm.
-        </p>
-      </div>
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Where</h1>
+    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
+      All past check-ins captured by this site via Micropub.
+    </p>
   </header>
 
   {% if checkins.length %}
-  <section class="space-y-4" aria-label="Recent check-ins">
-    {% set checkin = checkins[0] %}
-    <article class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
-      <div class="flex items-start gap-3 sm:gap-4">
-        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
-          <svg class="w-5 h-5 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
-          </svg>
-        </div>
-
-        <div class="flex-1 min-w-0">
-          <h2 class="text-base sm:text-lg font-semibold text-surface-900 dark:text-surface-100">
-            {{ checkin.name }}
-          </h2>
-
-          {% if checkin.locationText or checkin.postalCode %}
-          <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">
-            {{ checkin.locationText }}{% if checkin.locationText and checkin.postalCode %}, {% endif %}{{ checkin.postalCode }}
-          </p>
-          {% endif %}
-
-          <div class="text-xs text-surface-600 dark:text-surface-400 mt-2 flex flex-wrap items-center gap-2">
-            {% if checkin.published %}
-            <time class="font-mono" datetime="{{ checkin.published }}">{{ checkin.published | date("MMM d, yyyy") }}</time>
-            {% endif %}
-            {% if checkin.coordinatesText %}
-            <span class="px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">{{ checkin.coordinatesText }}</span>
-            {% endif %}
-            {% if checkin.isPrivate %}
-            <span class="px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-300">Private</span>
-            {% endif %}
-            {% if checkin.checkedInBy and (checkin.checkedInBy.name or checkin.checkedInBy.url) %}
-            <span class="px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
-              Checked in by {% if checkin.checkedInBy.url %}<a href="{{ checkin.checkedInBy.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">{{ checkin.checkedInBy.name or checkin.checkedInBy.url }}</a>{% else %}{{ checkin.checkedInBy.name }}{% endif %}
-            </span>
-            {% endif %}
-          </div>
-
-          {% if checkin.tags and checkin.tags.length %}
-          <div class="mt-3 flex flex-wrap gap-2 text-xs">
-            {% for tag in checkin.tags | head(8) %}
-            <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">#{{ tag }}</span>
-            {% endfor %}
-          </div>
-          {% endif %}
-
-          {% if checkin.taggedPeople and checkin.taggedPeople.length %}
-          <div class="mt-2 flex flex-wrap gap-2 text-xs">
-            {% for person in checkin.taggedPeople | head(6) %}
-            {% if person.url %}
-            <a href="{{ person.url }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">{{ person.name or person.url }}</a>
-            {% else %}
-            <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300">{{ person.name }}</span>
-            {% endif %}
-            {% endfor %}
-          </div>
-          {% endif %}
-
-          <div class="mt-3 flex flex-wrap gap-2 text-xs">
-            {% if checkin.mapUrl %}
-            <a href="{{ checkin.mapUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300 hover:bg-emerald-200/70 dark:hover:bg-emerald-900/50" target="_blank" rel="noopener">Map</a>
-            {% endif %}
-            {% if checkin.venueWebsiteUrl %}
-            <a href="{{ checkin.venueWebsiteUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Website</a>
-            {% endif %}
-            {% if checkin.venueSocialUrl %}
-            <a href="{{ checkin.venueSocialUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Social</a>
-            {% endif %}
-          </div>
-
-          {% if checkin.photos and checkin.photos.length %}
-          <div class="mt-3 flex flex-wrap gap-2">
-            {% for photo in checkin.photos | head(3) %}
-            <a href="{{ photo }}" target="_blank" rel="noopener" class="block">
-              <img src="{{ photo }}" alt="Check-in photo" class="w-24 h-24 object-cover rounded-lg border border-surface-200 dark:border-surface-700" loading="lazy" />
-            </a>
-            {% endfor %}
-          </div>
-          {% endif %}
-        </div>
-      </div>
-    </article>
-  </section>
-  {% else %}
-  <p class="text-surface-600 dark:text-surface-400">No check-ins found.</p>
+  {% set newest = checkins[0] %}
+  <div class="mb-6 p-4 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800">
+    <p class="text-sm font-medium text-emerald-800 dark:text-emerald-300">
+      I'm currently in <strong>{% if newest.venueWebsiteUrl %}<a href="{{ newest.venueWebsiteUrl }}" target="_blank" rel="noopener" class="underline hover:opacity-80">{{ newest.name }}</a>{% else %}{{ newest.name }}{% endif %}</strong>{% if newest.locationText %}, {{ newest.locationText }}{% endif %}
+    </p>
+  </div>
+  {% endif %}
+
+  {% set mapPoints = [] %}
+  {% for c in checkins %}
+    {% if c.latitude and c.longitude %}
+      {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueWebsiteUrl}), mapPoints) %}
+    {% endif %}
+  {% endfor %}
+
+  {% if mapPoints.length %}
+  <div id="checkin-map" class="mb-8 rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700" style="height: 420px;" aria-label="Map of past check-ins"></div>
+  <script>
+    var checkinPoints = {{ mapPoints | dump | safe }};
+  </script>
+  <script>
+    (function() {
+      L.Icon.Default.mergeOptions({
+        iconUrl: '/css/images/marker-icon.png',
+        iconRetinaUrl: '/css/images/marker-icon-2x.png',
+        shadowUrl: '/css/images/marker-shadow.png'
+      });
+      var map = L.map('checkin-map');
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19
+      }).addTo(map);
+      function escHtml(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+      }
+      var cluster = L.markerClusterGroup({ maxClusterRadius: 40 });
+      var markers = checkinPoints.map(function(p) {
+        var safeName = escHtml(p.name);
+        var safeUrl = (p.url && p.url.indexOf('https://') === 0) ? p.url : '';
+        var popup = safeUrl
+          ? '<a href="' + safeUrl + '" target="_blank" rel="noopener">' + safeName + '</a>'
+          : safeName;
+        return L.marker([p.lat, p.lng]).bindPopup(popup);
+      });
+      markers.forEach(function(m) { cluster.addLayer(m); });
+      map.addLayer(cluster);
+      map.fitBounds(cluster.getBounds().pad(0.2), { maxZoom: 13 });
+    })();
+  </script>
+  {% endif %}
+
+  {% if checkins.length %}
+  {% set grouped = checkins | groupby("name") %}
+  <ul class="divide-y divide-surface-200 dark:divide-surface-700" aria-label="Past check-ins">
+    {% for groupName, groupItems in grouped %}
+    {% set checkin = groupItems[0] %}
+    <li class="py-3">
+      <div class="font-medium text-surface-900 dark:text-surface-100">
+        {% if checkin.venueWebsiteUrl %}
+        <a href="{{ checkin.venueWebsiteUrl }}" target="_blank" rel="noopener" class="hover:underline">{{ checkin.name }}</a>
+        {% else %}
+        {{ checkin.name }}
+        {% endif %}
+        {% if groupItems | length > 1 %}
+        <span class="ml-2 text-xs font-normal text-surface-500 dark:text-surface-400">{{ groupItems | length }}×</span>
+        {% endif %}
+        {% if checkin.isPrivate %}<span class="ml-2 text-xs text-amber-700 dark:text-amber-400">(private)</span>{% endif %}
+      </div>
+      <div class="text-sm text-surface-600 dark:text-surface-400 mt-0.5">
+        {% if checkin.locationText %}{{ checkin.locationText }}{% if checkin.postalCode %}, {{ checkin.postalCode }}{% endif %}{% elif checkin.postalCode %}{{ checkin.postalCode }}{% endif %}
+        {% if checkin.published %}
+        <span class="mx-1">·</span><time datetime="{{ checkin.published }}">{{ checkin.published | date("MMM d, yyyy") }}</time>
+        {% endif %}
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No past check-ins found.</p>
   {% endif %}
-  <p class="mt-2 text-sm">
-    <a href="/been/" class="text-accent-700 hover:underline">See all past check-ins →</a>
-  </p>  
 </div>