101 lines
4.4 KiB
Plaintext
101 lines
4.4 KiB
Plaintext
---
|
||
layout: layouts/been.njk
|
||
title: Where
|
||
permalink: /where/
|
||
description: All 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">
|
||
All past check-ins captured by this site via Micropub.
|
||
</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.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; isolation: isolate;" 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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||
maxZoom: 19
|
||
}).addTo(map);
|
||
function escHtml(s) {
|
||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||
}
|
||
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 %}
|
||
</div>
|