---
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 %}
  <ul class="divide-y divide-surface-200 dark:divide-surface-700" aria-label="Past check-ins">
    {% for checkin in checkins %}
    <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>
      <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>