indiekit-blog/where.njk

---
layout: layouts/been.njk
title: Where
permalink: /where/
description: AMy past check-ins.
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">Where</h1>
    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
      My past check-ins.
    </p>
  </header>

  {% if checkins.length %}
  {% 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.locality %}{{ newest.locality }}{% elif newest.locationText %}{{ newest.locationText }}{% else %}{{ newest.name }}{% endif %}.</strong>
    </p>
  </div>
  {% endif %}

  {% set mapPoints = [] %}
  {% set homeSeenNames = [] %}
  {% for c in checkins %}
    {% if c.latitude and c.longitude %}
      {% if c.name == "Murnau" or c.name == "Garmisch-Partenkirchen" %}
        {% if c.name not in homeSeenNames %}
          {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueWebsiteUrl}), mapPoints) %}
          {% set homeSeenNames = (homeSeenNames.push(c.name), homeSeenNames) %}
        {% endif %}
      {% else %}
        {% set mapPoints = (mapPoints.push({name: c.name, lat: c.latitude, lng: c.longitude, url: c.venueWebsiteUrl}), mapPoints) %}
      {% endif %}
    {% 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; isolation: isolate;" aria-label="Map of past check-ins"></div>
  <script>
    var checkinPoints = {{ mapPoints | dump | safe }};
  </script>
  <script>
    window.addEventListener('load', function() {
      var map = L.map('checkin-map');
      var tiles = {
        light: {
          url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
        },
        dark: {
          url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
        }
      };
      function isDark() { return document.documentElement.classList.contains('dark'); }
      function makeTileLayer(scheme) {
        return L.tileLayer(tiles[scheme].url, { attribution: tiles[scheme].attribution, maxZoom: 19 });
      }
      var tileLayer = makeTileLayer(isDark() ? 'dark' : 'light');
      tileLayer.addTo(map);
      new MutationObserver(function() {
        var next = isDark() ? 'dark' : 'light';
        map.removeLayer(tileLayer);
        tileLayer = makeTileLayer(next);
        tileLayer.addTo(map);
      }).observe(document.documentElement, { attributeFilter: ['class'] });
      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.circleMarker([p.lat, p.lng], {
          radius: 7,
          color: isDark() ? '#504945' : '#fff',
          weight: 2,
          fillColor: '#83a598',
          fillOpacity: 0.85
        }).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 %}
     <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Been</h2>
  {% 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 and checkin.name != "Murnau" and checkin.name != "Garmisch-Partenkirchen" %}
        <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 %}
</div>