m038
1458c24aa3
main.js now registers initSortButton for feed-sort-toggle on all pages; inline IIFEs caused double-fire reversing to original order. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
78 lines
2.8 KiB
Twig
78 lines
2.8 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
||
|
||
{% block content %}
|
||
{% set stories = page.children.published().order('date', 'asc') %}
|
||
|
||
{# Collect stories that have coordinates for the mini-map #}
|
||
{% set map_entries = [] %}
|
||
{% for story in stories %}
|
||
{% if story.header.lat is not empty and story.header.lng is not empty %}
|
||
{% set map_entries = map_entries|merge([{
|
||
'lat': story.header.lat,
|
||
'lng': story.header.lng,
|
||
'title': story.title,
|
||
'slug': story.slug,
|
||
'url': story.url,
|
||
'type': 'story',
|
||
'force_connect': false,
|
||
'transport_mode': null
|
||
}]) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% set trip_page = page.parent() %}
|
||
|
||
{% include 'partials/feed-map.html.twig' with {
|
||
'map_entries': map_entries,
|
||
'map_id': 'stories-map',
|
||
'map_var': 'storiesMap',
|
||
'link_href': null,
|
||
'card_prefix': 'story-',
|
||
'trip_page': trip_page,
|
||
'show_journey': false
|
||
} only %}
|
||
|
||
<div class="stories-listing">
|
||
<div class="stories-listing__header">
|
||
<h1 class="stories-listing__heading">Stories</h1>
|
||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||
</div>
|
||
|
||
{% if stories|length > 0 %}
|
||
<div class="stories-grid">
|
||
{% for story in stories %}
|
||
{% set hero = null %}
|
||
{% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
|
||
{% set hero = story.media[story.header.hero_image] %}
|
||
{% endif %}
|
||
|
||
{% set date_str = story.date|date('d M Y') %}
|
||
{% if story.header.end_date %}
|
||
{% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
|
||
{% endif %}
|
||
|
||
<a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
|
||
{% if hero %}
|
||
<div class="story-card__photo">
|
||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
|
||
</div>
|
||
{% else %}
|
||
<div class="story-card__photo story-card__photo--empty"></div>
|
||
{% endif %}
|
||
<div class="story-card__body">
|
||
<time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
|
||
{% if story.header.location_name %}
|
||
<span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
|
||
{% endif %}
|
||
<h2 class="story-card__title">{{ story.title }}</h2>
|
||
<span class="story-card__cta">Read story →</span>
|
||
</div>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="stories-empty">No stories yet — check back soon.</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|