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

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

{% block content %}
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
{% set stories_page = grav.pages.find(page.route ~ '/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 %}

<div class="trip-hero">
    <h1>{{ page.title }}</h1>
    {% if page.header.date_start %}
    <p class="trip-dates">
        {{ page.header.date_start|date('d M Y') }}
        {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% endif %}
    </p>
    {% endif %}
    <p class="trip-counts">
        {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
        {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
    </p>
</div>

<nav class="trip-nav">
    <a href="{{ page.route }}/dailies">Journal</a>
    <a href="{{ page.route }}/map">Map</a>
    <a href="{{ page.route }}/stats">Stats</a>
    <a href="{{ page.route }}/stories">Stories</a>
</nav>

<div class="trip-layout">
    <div class="trip-feed">
        <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 }}">
                        <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>

    <aside class="trip-sidebar">
        {% if journal_entries|length > 0 %}
        <div class="trip-sidebar-section">
            <h3 class="trip-sidebar-heading">Journal</h3>
            <ul class="trip-sidebar-list">
                {% for e in journal_entries %}
                <li>
                    <a href="#entry-{{ e.slug }}" class="trip-sidebar-link">
                        <span class="trip-sidebar-date">{{ e.date|date('d M') }}</span>{{ e.title }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        {% if story_entries|length > 0 %}
        <div class="trip-sidebar-section">
            <h3 class="trip-sidebar-heading">Stories</h3>
            <ul class="trip-sidebar-list">
                {% for s in story_entries %}
                <li><a href="#entry-{{ s.slug }}" class="trip-sidebar-link">{{ s.title }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </aside>
</div>
{% endblock %}