feat: add between-trips highlights mode with grid and map markers
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -1772,3 +1772,139 @@ body::after {
|
||||
color: var(--color-ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Between-trips highlights grid ──────────────────────────────────────────── */
|
||||
|
||||
.home-highlights-header {
|
||||
margin-bottom: var(--space-8);
|
||||
padding-bottom: var(--space-6);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.home-highlights-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
color: var(--color-ink);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.home-highlights-subtitle {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
.home-highlights-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-6);
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.home-highlights-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.home-highlights-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.home-highlight-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-highlight-image {
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-highlight-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.home-highlight-body {
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home-highlight-badge {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.home-highlight-badge--journal {
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
.home-highlight-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 400;
|
||||
color: var(--color-ink);
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.home-highlight-title:hover { color: var(--color-accent); }
|
||||
|
||||
.home-highlight-trip {
|
||||
margin-top: auto;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-ink-muted);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.home-highlight-trip-name {
|
||||
font-weight: 600;
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
.home-highlight-tagline { font-style: italic; }
|
||||
|
||||
.home-highlight-trip-link {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.home-highlight-trip-link:hover { text-decoration: underline; }
|
||||
|
||||
.home-highlights-cta-wrap {
|
||||
text-align: center;
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.home-highlights-cta {
|
||||
display: inline-block;
|
||||
color: var(--color-accent);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.home-highlights-cta:hover {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-canvas);
|
||||
}
|
||||
|
||||
@@ -225,8 +225,155 @@ homeMap.on('load', function () {
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
|
||||
<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
|
||||
{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
|
||||
|
||||
{# ── Highlight selection ─────────────────────────────────────────────────── #}
|
||||
{% set trips_page = grav.pages.find('/trips') %}
|
||||
{% set pool = [] %}
|
||||
{% if trips_page %}
|
||||
{% for trip_item in trips_page.children.published() %}
|
||||
{% set t_dailies = grav.pages.find(trip_item.route ~ '/dailies') %}
|
||||
{% set t_stories = grav.pages.find(trip_item.route ~ '/stories') %}
|
||||
{% set candidates = [] %}
|
||||
{% if t_dailies %}
|
||||
{% for e in t_dailies.children.published() %}
|
||||
{% if e.header.featured %}
|
||||
{% set candidates = candidates|merge([{'type': 'journal', 'page': e, 'trip': trip_item}]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if t_stories %}
|
||||
{% for s in t_stories.children.published() %}
|
||||
{% if s.header.featured %}
|
||||
{% set candidates = candidates|merge([{'type': 'story', 'page': s, 'trip': trip_item}]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if candidates|length > 0 %}
|
||||
{% set pool = pool|merge([random(candidates)]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% set pool = pool|shuffle %}
|
||||
{% set highlights = pool|slice(0, 6) %}
|
||||
|
||||
{# ── Map entries (entries with coordinates) ──────────────────────────────── #}
|
||||
{% set highlights_map_entries = [] %}
|
||||
{% for item in highlights %}
|
||||
{% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
|
||||
{% set highlights_map_entries = highlights_map_entries|merge([{
|
||||
'lat': item.page.header.lat|number_format(6, '.', ''),
|
||||
'lng': item.page.header.lng|number_format(6, '.', ''),
|
||||
'slug': item.page.slug,
|
||||
'title': item.page.title,
|
||||
'url': item.page.url
|
||||
}]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="home-layout">
|
||||
<div class="home-map-col">
|
||||
<div class="home-map" id="home-map"></div>
|
||||
</div>
|
||||
|
||||
<div class="home-feed-col">
|
||||
<div class="home-highlights-header">
|
||||
<h1 class="home-highlights-title">Into the East</h1>
|
||||
<p class="home-highlights-subtitle">A few moments from past journeys</p>
|
||||
</div>
|
||||
|
||||
{% if highlights|length > 0 %}
|
||||
<div class="home-highlights-grid">
|
||||
{% for item in highlights %}
|
||||
{% set entry = item.page %}
|
||||
{% set hero = null %}
|
||||
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||
{% set hero = entry.media[entry.header.hero_image] %}
|
||||
{% elseif entry.media.images|length > 0 %}
|
||||
{% set hero = entry.media.images|first %}
|
||||
{% endif %}
|
||||
<div class="home-highlight-card" id="highlight-{{ entry.slug }}">
|
||||
{% if hero %}
|
||||
<div class="home-highlight-image">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="home-highlight-body">
|
||||
{% if item.type == 'story' %}
|
||||
<span class="home-highlight-badge">✦ Story</span>
|
||||
{% else %}
|
||||
<span class="home-highlight-badge home-highlight-badge--journal">▸ Journal</span>
|
||||
{% endif %}
|
||||
<a class="home-highlight-title" href="{{ entry.url }}">{{ entry.title }}</a>
|
||||
<div class="home-highlight-trip">
|
||||
<span class="home-highlight-trip-name">{{ item.trip.title }}</span>
|
||||
{% if item.trip.header.tagline %}
|
||||
<span class="home-highlight-tagline">{{ item.trip.header.tagline }}</span>
|
||||
{% endif %}
|
||||
<a class="home-highlight-trip-link" href="{{ item.trip.url }}">→ View trip</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="feed-empty">No highlights yet — mark entries as featured to show them here.</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="home-highlights-cta-wrap">
|
||||
<a class="home-highlights-cta" href="/trips">Explore all past trips →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if highlights_map_entries|length > 0 %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
||||
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
||||
<script>
|
||||
var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};
|
||||
|
||||
var homeMap = new maplibregl.Map({
|
||||
container: 'home-map',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
homeMap.on('load', function () {
|
||||
if (HIGHLIGHTS_ENTRIES.length === 0) return;
|
||||
|
||||
var bounds = new maplibregl.LngLatBounds();
|
||||
|
||||
HIGHLIGHTS_ENTRIES.forEach(function (entry) {
|
||||
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
||||
bounds.extend(lngLat);
|
||||
|
||||
var el = MapUtils.createDotMarker(false);
|
||||
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
||||
.setLngLat(lngLat)
|
||||
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
||||
el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
|
||||
el.addEventListener('mouseleave', function () { popup.remove(); });
|
||||
el.addEventListener('click', function () {
|
||||
var card = document.getElementById('highlight-' + entry.slug);
|
||||
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
|
||||
});
|
||||
|
||||
if (HIGHLIGHTS_ENTRIES.length === 1) {
|
||||
homeMap.jumpTo({ center: [parseFloat(HIGHLIGHTS_ENTRIES[0].lng), parseFloat(HIGHLIGHTS_ENTRIES[0].lat)], zoom: 8 });
|
||||
} else {
|
||||
homeMap.fitBounds(bounds, { padding: 60, maxZoom: 8 });
|
||||
}
|
||||
|
||||
setTimeout(function () { homeMap.resize(); }, 100);
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user