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

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

{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
{% set trip_route = config.site.active_trip %}
{% set trip = grav.pages.find(trip_route) %}

{% if config.site.travelling %}
{# ══════════════════════════════════════════════════════════ ACTIVE TRIP MODE #}

{% set dailies_page = grav.pages.find(trip_route ~ '/dailies') %}
{% set stories_page = grav.pages.find(trip_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.header.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
{% endfor %}
{% set all_items = all_items|sort_by_key('date', 3) %}

{% 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,
            'url': item.page.url,
            'force_connect': item.page.header.force_connect ? true : false
        }]) %}
    {% endif %}
{% endfor %}

{% set home_gpx_urls = [] %}
{% if trip %}
    {% for name, media in trip.media.all %}
        {% if name|split('.')|last == 'gpx' %}
            {% set home_gpx_urls = home_gpx_urls|merge([trip.url ~ '/' ~ name]) %}
        {% endif %}
    {% endfor %}
{% endif %}

<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 : trip_route }}</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 %}
                    {% if item.type == 'journal' %}
                        {% include 'partials/entry-journal.html.twig' %}
                    {% else %}
                        {% include 'partials/entry-story.html.twig' %}
                    {% 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/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
{% if home_gpx_urls|length > 0 %}
<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
{% endif %}
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
var HOME_ENTRIES  = {{ map_entries|json_encode|raw }};
var HOME_GPX_URLS = {{ home_gpx_urls|json_encode|raw }};
var USE_GPX       = {{ trip and trip.header.use_gpx is not null ? (trip.header.use_gpx ? 'true' : 'false') : 'true' }};
var AUTOCONNECT   = "{{ trip ? (trip.header.autoconnect ?? 'on') : 'on' }}";

var homeMap = new maplibregl.Map({
    container: 'home-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2
});

homeMap.on('load', function () {
    var bounds = new maplibregl.LngLatBounds();
    var coords = [];

    HOME_ENTRIES.forEach(function (entry, i) {
        var isLatest = (i === HOME_ENTRIES.length - 1);
        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
        coords.push(lngLat);
        bounds.extend(lngLat);

        var el = MapUtils.createDotMarker(isLatest);
        el.dataset.url = entry.url;
        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
            .setLngLat(lngLat)
            .setHTML('<span class="map-tip">' + entry.title + '</span>');
        el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () {
            var card = document.getElementById('entry-' + entry.slug);
            if (!card) return;
            window.location.hash = 'entry-' + entry.slug;
        });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
    });

    if (HOME_ENTRIES.length === 1) {
        homeMap.jumpTo({ center: coords[0], zoom: 10 });
    } else {
        homeMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
    }

    setTimeout(function () { homeMap.resize(); }, 100);

    MapUtils.renderGpxJourney(homeMap, USE_GPX ? HOME_GPX_URLS : [], HOME_ENTRIES, 'home-gpx', 'home-journey', { connectMode: AUTOCONNECT });
});
</script>
{% endif %}

<script type="module">
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
const lightbox = new PhotoSwipeLightbox({
    gallery: '.pswp-gallery',
    children: 'a.journal-photo-slide',
    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
});
lightbox.on('afterOpen', function () {
    var pswp = lightbox.pswp;
    var keyDir = 0;
    var clearTimer = null;
    function onKey(e) {
        if (e.key === 'ArrowRight') keyDir = 1;
        else if (e.key === 'ArrowLeft') keyDir = -1;
        else keyDir = 0;
    }
    document.addEventListener('keydown', onKey, true);
    pswp.on('change', function () {
        if (!keyDir) return;
        var dir = keyDir;
        keyDir = 0;
        var el = pswp.currSlide && pswp.currSlide.container;
        if (!el) return;
        el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
        el.offsetWidth;
        el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
        clearTimeout(clearTimer);
        clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
    });
    pswp.on('close', function () {
        document.removeEventListener('keydown', onKey, true);
        clearTimeout(clearTimer);
    });
});
lightbox.init();

document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
    var strip     = wrap.querySelector('.journal-photo-strip');
    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
    var expandBtn = wrap.querySelector('.journal-photo-expand');
    var article   = wrap.closest('article');
    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
    var visibleIdx = 0;

    var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (!e.isIntersecting) return;
            visibleIdx = slides.indexOf(e.target);
            dots.forEach(function (d) { d.classList.remove('is-active'); });
            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
        });
    }, { root: strip, threshold: 0.5 });
    slides.forEach(function (s) { io.observe(s); });

    if (expandBtn && slides.length) {
        expandBtn.addEventListener('click', function () {
            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
        });
    }
});
</script>

{% else %}
{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}

{# ── Highlight selection ─────────────────────────────────────────────────── #}
{% set trips_page = grav.pages.find('/trips') %}
{% set pool = [] %}
{% if trips_page %}
    {% for trip_item in trips_page.children.published() %}
        {% set t_dailies = grav.pages.find(trip_item.route ~ '/dailies') %}
        {% set t_stories = grav.pages.find(trip_item.route ~ '/stories') %}
        {% set candidates = [] %}
        {% if t_dailies %}
            {% for e in t_dailies.children.published() %}
                {% if e.header.featured %}
                    {% set candidates = candidates|merge([{'type': 'journal', 'page': e, 'trip': trip_item}]) %}
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if t_stories %}
            {% for s in t_stories.children.published() %}
                {% if s.header.featured %}
                    {% set candidates = candidates|merge([{'type': 'story', 'page': s, 'trip': trip_item}]) %}
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if candidates|length > 0 %}
            {% set pool = pool|merge([random(candidates)]) %}
        {% endif %}
    {% endfor %}
{% endif %}
{% set pool = pool|shuffle %}
{% set highlights = pool|slice(0, 6) %}

{# ── Map entries (entries with coordinates) ──────────────────────────────── #}
{% set highlights_map_entries = [] %}
{% for item in highlights %}
    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set highlights_map_entries = highlights_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,
            'url': item.page.url
        }]) %}
    {% 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-highlights-header">
            <h1 class="home-highlights-title">{{ page.title }}</h1>
            {% if page.content %}
            <div class="home-highlights-subtitle">{{ page.content|raw }}</div>
            {% endif %}
        </div>

        {% if highlights|length > 0 %}
        <div class="home-highlights-grid">
            {% for item in highlights %}
            {% 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 %}
            <div class="home-highlight-card" id="highlight-{{ entry.slug }}">
                {% if hero %}
                <div class="home-highlight-image">
                    <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
                </div>
                {% endif %}
                <div class="home-highlight-body">
                    {% if item.type == 'story' %}
                    <span class="home-highlight-badge">✦ Story</span>
                    {% else %}
                    <span class="home-highlight-badge home-highlight-badge--journal">▸ Journal</span>
                    {% endif %}
                    <a class="home-highlight-title" href="{{ entry.url }}">{{ entry.title }}</a>
                    <div class="home-highlight-trip">
                        <span class="home-highlight-trip-name">{{ item.trip.title }}</span>
                        {% if item.trip.header.tagline %}
                        <span class="home-highlight-tagline">{{ item.trip.header.tagline }}</span>
                        {% endif %}
                        <a class="home-highlight-trip-link" href="{{ item.trip.url }}">→ View trip</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="feed-empty">No highlights yet — mark entries as featured to show them here.</p>
        {% endif %}

        <div class="home-highlights-cta-wrap">
            <a class="home-highlights-cta" href="/trips">Explore all past trips →</a>
        </div>
    </div>
</div>

{% if highlights_map_entries|length > 0 %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
var HIGHLIGHTS_ENTRIES = {{ highlights_map_entries|json_encode|raw }};

var homeMap = new maplibregl.Map({
    container: 'home-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2
});

homeMap.on('load', function () {
    if (HIGHLIGHTS_ENTRIES.length === 0) return;

    var bounds = new maplibregl.LngLatBounds();

    HIGHLIGHTS_ENTRIES.forEach(function (entry) {
        var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
        bounds.extend(lngLat);

        var el = MapUtils.createDotMarker(false);
        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
            .setLngLat(lngLat)
            .setHTML('<span class="map-tip">' + entry.title + '</span>');
        el.addEventListener('mouseenter', function () { popup.addTo(homeMap); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () {
            var card = document.getElementById('highlight-' + entry.slug);
            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
    });

    if (HIGHLIGHTS_ENTRIES.length === 1) {
        homeMap.jumpTo({ center: [parseFloat(HIGHLIGHTS_ENTRIES[0].lng), parseFloat(HIGHLIGHTS_ENTRIES[0].lat)], zoom: 8 });
    } else {
        homeMap.fitBounds(bounds, { padding: 60, maxZoom: 8 });
    }

    setTimeout(function () { homeMap.resize(); }, 100);
});
</script>
{% endif %}

{% endif %}

{% endblock %}