feat: trip page — entry counts, merged feed, sticky sidebar index
This commit is contained in:
@@ -1,8 +1,22 @@
|
|||||||
{% extends 'partials/base.html.twig' %}
|
{% extends 'partials/base.html.twig' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% set tracker_page = grav.pages.find(page.route ~ '/dailies') %}
|
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
|
||||||
{% set entries = tracker_page ? tracker_page.children.published() : [] %}
|
{% 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">
|
<div class="trip-hero">
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
@@ -12,6 +26,10 @@
|
|||||||
{% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% endif %}
|
{% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% endif %}
|
||||||
</p>
|
</p>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
|
|
||||||
<nav class="trip-nav">
|
<nav class="trip-nav">
|
||||||
@@ -21,16 +39,108 @@
|
|||||||
<a href="{{ page.route }}/stories">Stories</a>
|
<a href="{{ page.route }}/stories">Stories</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{% if entries|length > 0 %}
|
<div class="trip-layout">
|
||||||
<section class="trip-recent">
|
<div class="trip-feed">
|
||||||
<h2>Recent entries</h2>
|
<div class="feed">
|
||||||
{% for entry in entries|slice(0, 3) %}
|
{% if all_items|length > 0 %}
|
||||||
<a href="{{ entry.url }}">
|
{% for item in all_items %}
|
||||||
<span>{{ entry.date|date('d M Y') }}</span>
|
{% set entry = item.page %}
|
||||||
{{ entry.title }}
|
{% set hero = null %}
|
||||||
{% if entry.header.location_city %} · {{ entry.header.location_city }}{% endif %}
|
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||||
</a>
|
{% set hero = entry.media[entry.header.hero_image] %}
|
||||||
{% endfor %}
|
{% elseif entry.media.images|length > 0 %}
|
||||||
</section>
|
{% set hero = entry.media.images|first %}
|
||||||
{% endif %}
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user