feat(been): add Leaflet map, show all checkins, link venue names
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ layout: layouts/been.njk
|
||||
title: Been
|
||||
permalink: /been/
|
||||
withSidebar: true
|
||||
leafletMap: true
|
||||
---
|
||||
{% set checkins = whereCheckins.checkins or [] %}
|
||||
|
||||
@@ -14,9 +15,46 @@ withSidebar: true
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{% if checkins.length > 1 %}
|
||||
{% 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) %}
|
||||
{% 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.imagePath = 'https://unpkg.com/leaflet@1.9.4/dist/images/';
|
||||
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);
|
||||
var markers = checkinPoints.map(function(p) {
|
||||
var popup = p.url
|
||||
? '<a href="' + p.url + '" target="_blank" rel="noopener">' + p.name + '</a>'
|
||||
: p.name;
|
||||
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));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if checkins.length %}
|
||||
<section class="space-y-4" aria-label="Past check-ins">
|
||||
{% for checkin in checkins %}{% if not loop.first %}
|
||||
{% 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">
|
||||
@@ -28,7 +66,11 @@ withSidebar: true
|
||||
|
||||
<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 %}
|
||||
@@ -98,7 +140,7 @@ withSidebar: true
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}{% endfor %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% else %}
|
||||
<p class="text-surface-600 dark:text-surface-400">No past check-ins found.</p>
|
||||
|
||||
Reference in New Issue
Block a user