feat: home page template — sticky map + merged feed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RB86BaJBG3eGiMdfhmHRrQ
This commit is contained in:
@@ -0,0 +1,168 @@
|
|||||||
|
{% extends 'partials/base.html.twig' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
{% set slug = config.site.active_trip %}
|
||||||
|
{% set trip = grav.pages.find('/trips/' ~ slug) %}
|
||||||
|
{% set dailies_page = grav.pages.find('/trips/' ~ slug ~ '/dailies') %}
|
||||||
|
{% set stories_page = grav.pages.find('/trips/' ~ slug ~ '/stories') %}
|
||||||
|
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
|
||||||
|
{% set story_entries = stories_page ? stories_page.children.published() : [] %}
|
||||||
|
|
||||||
|
{% set all_items = [] %}
|
||||||
|
{% for e in journal_entries %}
|
||||||
|
{% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.date}]) %}
|
||||||
|
{% endfor %}
|
||||||
|
{% for s in story_entries %}
|
||||||
|
{% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
|
||||||
|
{% endfor %}
|
||||||
|
{% set all_items = all_items|sort((a, b) => a.date < b.date ? 1 : -1) %}
|
||||||
|
|
||||||
|
{% set journal_count = journal_entries|length %}
|
||||||
|
{% set story_count = story_entries|length %}
|
||||||
|
|
||||||
|
{% set map_entries = [] %}
|
||||||
|
{% for item in all_items %}
|
||||||
|
{% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
|
||||||
|
{% set map_entries = 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
|
||||||
|
}]) %}
|
||||||
|
{% 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-trip-header">
|
||||||
|
<h1 class="home-trip-name">{{ trip ? trip.title : slug }}</h1>
|
||||||
|
<span class="home-trip-counts">
|
||||||
|
{{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
|
||||||
|
{% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feed">
|
||||||
|
{% if all_items|length > 0 %}
|
||||||
|
{% for item in all_items %}
|
||||||
|
{% 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 %}
|
||||||
|
|
||||||
|
{% if item.type == 'journal' %}
|
||||||
|
<article class="entry-card" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||||||
|
<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>
|
||||||
|
{% else %}
|
||||||
|
<article class="entry-card entry-card--story" id="entry-{{ entry.slug }}">
|
||||||
|
<a class="entry-card-inner" href="{{ entry.url }}">
|
||||||
|
{% if hero %}
|
||||||
|
<div class="entry-card-photo entry-card-photo--story">
|
||||||
|
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="entry-card-body">
|
||||||
|
<span class="story-badge">✦ Story</span>
|
||||||
|
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if map_entries|length > 0 %}
|
||||||
|
<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 HOME_ENTRIES = {{ map_entries|json_encode|raw }};
|
||||||
|
|
||||||
|
var map = L.map('home-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
|
||||||
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||||
|
maxZoom: 20,
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
var latLngs = HOME_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
|
||||||
|
|
||||||
|
if (latLngs.length > 1) {
|
||||||
|
L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
HOME_ENTRIES.forEach(function(entry, i) {
|
||||||
|
var isLatest = (i === HOME_ENTRIES.length - 1);
|
||||||
|
var size = isLatest ? 16 : 10;
|
||||||
|
var color = isLatest ? '#155244' : '#2A8C73';
|
||||||
|
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() {
|
||||||
|
var card = document.getElementById('entry-' + entry.slug);
|
||||||
|
if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (latLngs.length === 1) {
|
||||||
|
map.setView(latLngs[0], 10);
|
||||||
|
} else {
|
||||||
|
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user