intotheeast-com-content/themes/intotheeast/templates/stories.html.twig

{% extends 'partials/base.html.twig' %}

{% block map_assets %}
{% do assets.addCss('theme://css-compiled/map.css') %}
{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
{% endblock %}

{% block content %}
{% import 'macros/date-range.html.twig' as dr_m %}
{% 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 = dr_m.format_date_range(story.date, story.header.end_date ?? null) %}

        <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 %}