From 345ed627844ca2fa3a99d32fd18eaa106e6ad239 Mon Sep 17 00:00:00 2001
From: svemagie <869694+svemagie@users.noreply.github.com>
Date: Wed, 11 Mar 2026 08:05:35 +0100
Subject: [PATCH] feat: unify check-in rendering in /been with /where,
 consistent design for all entries

---
 been.njk | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/been.njk b/been.njk
index 24ac657..6f334db 100644
--- a/been.njk
+++ b/been.njk
@@ -19,7 +19,85 @@ withSidebar: true
   <section class="space-y-4" aria-label="Past check-ins">
     {% for checkin in checkins | slice(1) %}
     <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">
-      {# ...existing checkin rendering code from where.njk... #}
+      <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>
     {% endfor %}
   </section>