From 316f28074de0c4c812349cb4157386172bd7adbb Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Fri, 20 Mar 2026 21:59:32 +0100
Subject: [PATCH] fix(been): simple list, venue website link, map fit all
 checkins

---
 been.njk | 113 ++++++++++---------------------------------------------
 1 file changed, 20 insertions(+), 93 deletions(-)

diff --git a/been.njk b/been.njk
index 5ab4e80..73ece27 100644
--- a/been.njk
+++ b/been.njk
@@ -19,7 +19,7 @@ leafletMap: true
   {% 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.venueUrl}), mapPoints) %}
+      {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueWebsiteUrl}), mapPoints) %}
     {% endif %}
   {% endfor %}
 
@@ -52,106 +52,33 @@ leafletMap: true
         return L.marker([p.lat, p.lng]).bindPopup(popup);
       });
       markers.forEach(function(m) { m.addTo(map); });
-      if (markers.length === 1) {
-        map.setView([checkinPoints[0].lat, checkinPoints[0].lng], 15);
-      } else {
-        var group = L.featureGroup(markers);
-        map.fitBounds(group.getBounds().pad(0.1));
-      }
+      var group = L.featureGroup(markers);
+      map.fitBounds(group.getBounds().pad(0.2), { maxZoom: 13 });
     })();
   </script>
   {% endif %}
 
   {% if checkins.length %}
-  <section class="space-y-4" aria-label="Past check-ins">
+  <ul class="divide-y divide-surface-200 dark:divide-surface-700" aria-label="Past check-ins">
     {% for checkin in checkins %}
-    <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">
-            {% if checkin.venueUrl %}
-            <a href="{{ checkin.venueUrl }}" target="_blank" rel="noopener" class="hover:underline">{{ checkin.name }}</a>
-            {% else %}
-            {{ checkin.name }}
-            {% endif %}
-          </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>
+    <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 checkin.isPrivate %}<span class="ml-2 text-xs text-amber-700 dark:text-amber-400">(private)</span>{% endif %}
       </div>
-    </article>
+      <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 %}
-  </section>
+  </ul>
   {% else %}
   <p class="text-surface-600 dark:text-surface-400">No past check-ins found.</p>
   {% endif %}