feat: add trip/trips/stories templates, update nav and map/stats to use trip-relative paths
- Rename tracker.html.twig to dailies.html.twig; update dailies.md template key - Fix map.html.twig and stats.html.twig: find dailies via page.parent().route - Update base.html.twig nav to use config.site.active_trip for all hrefs - Fix dailies.html.twig mini-map link to use page.parent().url/map - Create trip.html.twig, trips.html.twig, stories.html.twig Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
{% extends 'default.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% set entries = page.collection() %}
|
||||
|
||||
{# Collect GPS entries for mini-map #}
|
||||
{% set map_entries = [] %}
|
||||
{% for entry in entries %}
|
||||
{% if entry.header.lat is not empty and entry.header.lng is not empty %}
|
||||
{% set map_entries = map_entries|merge([{
|
||||
'lat': entry.header.lat,
|
||||
'lng': entry.header.lng,
|
||||
'title': entry.title,
|
||||
'url': entry.url
|
||||
}]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if map_entries|length > 0 %}
|
||||
<div class="feed-map-wrap">
|
||||
<div class="feed-map" id="feed-map"></div>
|
||||
<a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
|
||||
<script>
|
||||
var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
|
||||
|
||||
var map = L.map('feed-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
|
||||
|
||||
if (latLngs.length > 1) {
|
||||
L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
|
||||
}
|
||||
|
||||
FEED_ENTRIES.forEach(function(entry, i) {
|
||||
var isLatest = (i === FEED_ENTRIES.length - 1);
|
||||
var size = isLatest ? 16 : 10;
|
||||
var color = isLatest ? '#155244' : '#1F6B5A';
|
||||
var icon = L.divIcon({
|
||||
className: '',
|
||||
html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size/2, size/2]
|
||||
});
|
||||
L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
|
||||
.addTo(map)
|
||||
.on('click', function() { window.location = entry.url; });
|
||||
});
|
||||
|
||||
if (latLngs.length === 1) {
|
||||
map.setView(latLngs[0], 10);
|
||||
} else {
|
||||
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<div class="feed">
|
||||
{% if entries|length > 0 %}
|
||||
{% for entry in entries %}
|
||||
<article class="entry-card">
|
||||
{% 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 %}
|
||||
|
||||
<a class="entry-card-inner" href="{{ entry.url }}">
|
||||
{% if hero %}
|
||||
<div class="entry-card-photo">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
<div class="entry-card-photo-overlay">
|
||||
<time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
|
||||
{{ entry.date|date('d M Y')|upper }}
|
||||
</time>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="entry-location-overlay">
|
||||
📍
|
||||
{% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
|
||||
{% if entry.header.location_city and entry.header.location_country %}, {% endif %}
|
||||
{% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="entry-card-textmeta">
|
||||
<time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
|
||||
{{ entry.date|date('d M Y')|upper }}
|
||||
</time>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="entry-location-plain">
|
||||
{%- set _loc = [] -%}
|
||||
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
||||
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
||||
📍 {{ _loc|join(', ') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="entry-card-body">
|
||||
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||
<p class="entry-excerpt">{{ entry.summary|striptags|slice(0, 250)|trim }}</p>
|
||||
<span class="entry-read-more">Read entry →</span>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user