diff --git a/docs/superpowers/plans/2026-06-19-home-and-trip-pages.md b/docs/superpowers/plans/2026-06-19-home-and-trip-pages.md new file mode 100644 index 0000000..68659fe --- /dev/null +++ b/docs/superpowers/plans/2026-06-19-home-and-trip-pages.md @@ -0,0 +1,1049 @@ +# Home Page & Content Flow Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Replace the redirect-based home page with a real side-by-side map + feed home page, add a past-trips archive, add story cards to all feeds, and enrich the trip page with a sticky sidebar index. + +**Architecture:** Pure Twig + CSS. New `home.html.twig` template for the home page; updated `trips.html.twig`, `trip.html.twig`, `dailies.html.twig`, `stories.html.twig`. All feeds merge journal entries and story entries into one chronological collection sorted descending by date. Leaflet map on the home page reuses the same CDN setup as `dailies.html.twig`. + +**Tech Stack:** Grav CMS 2.0 (Twig 3), Vanilla CSS (custom properties from `tokens.css`), Leaflet.js 1.9.4 via CDN + +## Global Constraints + +- All template/theme changes committed via `git -C user` (the `user/` dir is a separate git repo) +- No new Grav plugins, no JS framework, no build pipeline +- Existing CSS token names in `tokens.css` must not change — only new rules added to `style.css` +- Theme dir: `user/themes/intotheeast/` +- Active trip slug: `config.site.active_trip` (set in `user/config/site.yaml`) +- Dev server: `http://100.96.115.96:8081` — twig.cache is false, changes take effect immediately +- All commits use `git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user` + +--- + +### Task 1: Home page routing + nav + +**Files:** +- Create: `user/pages/00.home/home.md` +- Modify: `user/config/system.yaml` (line 31: `home.alias`) +- Modify: `user/themes/intotheeast/templates/partials/base.html.twig` + +**Interfaces:** +- Produces: `/` serves a real page (not redirect); nav shows "Home" + "Past Trips"; `{% block nav %}` is overridable by child templates + +- [ ] **Step 1: Create the home page directory and markdown file** + +```bash +mkdir -p /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user/pages/00.home +``` + +Write `user/pages/00.home/home.md`: +```markdown +--- +title: Home +visible: false +routable: true +--- +``` + +- [ ] **Step 2: Change home.alias in system.yaml** + +In `user/config/system.yaml`, find line 31: +```yaml +home: + alias: /trips/japan-korea-2026/dailies +``` +Replace with: +```yaml +home: + alias: /home +``` + +- [ ] **Step 3: Update base.html.twig — nav + body class + block nav** + +Replace the entire content of `user/themes/intotheeast/templates/partials/base.html.twig` with: + +```twig + + + + + + {% if page.title %}{{ page.title }} | {% endif %}{{ site.title }} + + + + + + {{ assets.css()|raw }} + {{ assets.js()|raw }} + + +
+ into the east + {% block nav %} + + {% endblock %} +
+
+ {% block content %}{% endblock %} +
+ {{ assets.js('bottom')|raw }} + + +``` + +- [ ] **Step 4: Verify routing** + +```bash +curl -s -o /dev/null -w "%{http_code}" http://100.96.115.96:8081/ +``` +Expected: `200` (was previously a redirect chain ending at `/trips/japan-korea-2026/dailies`) + +```bash +curl -s http://100.96.115.96:8081/ | grep -o 'Home\|Past Trips' +``` +Expected: `Home` and `Past Trips` (nav links present) + +- [ ] **Step 5: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add pages/00.home/home.md config/system.yaml themes/intotheeast/templates/partials/base.html.twig +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: home page routing — real / route, new nav (Home + Past Trips)" +``` + +--- + +### Task 2: CSS additions + +**Files:** +- Modify: `user/themes/intotheeast/css/style.css` (append new rules at end) + +**Interfaces:** +- Produces: `.home-page`, `.home-layout`, `.home-map-col`, `.home-map`, `.home-feed-col`, `.home-trip-header`, `.home-trip-name`, `.home-trip-counts`; `.trips-heading`, `.trips-list`, `.trip-card`, `.trip-card-title`, `.trip-card-meta`, `.trip-card-dates`, `.trip-card-counts`; `.trip-counts`, `.trip-layout`, `.trip-feed`, `.trip-sidebar`, `.trip-sidebar-section`, `.trip-sidebar-heading`, `.trip-sidebar-list`, `.trip-sidebar-link`, `.trip-sidebar-date`; `.entry-card--story`, `.entry-card-photo--story`, `.story-badge`; `.story-escape` + +- [ ] **Step 1: Append CSS rules to style.css** + +Append to the end of `user/themes/intotheeast/css/style.css`: + +```css +/* ── Home page layout ────────────────────────────────────────────────────────── */ + +.home-page .site-main { max-width: none; padding: 0; } + +.home-layout { + display: grid; + grid-template-columns: 45% 55%; +} + +.home-map-col { + position: sticky; + top: var(--site-header-height); + height: calc(100vh - var(--site-header-height)); + align-self: start; +} + +.home-map { + width: 100%; + height: 100%; +} + +.home-feed-col { + padding: var(--space-8) var(--space-8); +} + +.home-trip-header { + margin-bottom: var(--space-8); + padding-bottom: var(--space-6); + border-bottom: 1px solid var(--color-border); +} + +.home-trip-name { + font-family: var(--font-display); + font-size: var(--text-2xl); + font-weight: 400; + color: var(--color-ink); + margin-bottom: var(--space-2); +} + +.home-trip-counts { + font-size: var(--text-sm); + color: var(--color-ink-muted); +} + +@media (max-width: 768px) { + .home-layout { display: flex; flex-direction: column; } + .home-map-col { position: static; height: 40vh; } + .home-feed-col { padding: var(--space-6) var(--space-5); } +} + +/* ── Past trips archive ──────────────────────────────────────────────────────── */ + +.trips-heading { + font-family: var(--font-display); + font-size: var(--text-2xl); + font-weight: 400; + color: var(--color-ink); + margin-bottom: var(--space-8); +} + +.trips-list { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.trip-card { + display: block; + background: var(--color-canvas); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-6); + text-decoration: none; + color: inherit; + transition: border-color 0.15s, background 0.15s; +} + +.trip-card:hover { + border-color: var(--color-accent); + background: var(--color-surface-raised); +} + +.trip-card-title { + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 400; + color: var(--color-ink); + margin-bottom: var(--space-2); +} + +.trip-card-meta { + display: flex; + gap: var(--space-4); + flex-wrap: wrap; + align-items: center; +} + +.trip-card-dates { font-size: var(--text-sm); color: var(--color-ink-2); } +.trip-card-counts { font-size: var(--text-sm); color: var(--color-ink-muted); } + +/* ── Trip page sidebar ───────────────────────────────────────────────────────── */ + +.trip-counts { + font-size: var(--text-sm); + color: var(--color-ink-muted); + margin-top: var(--space-2); +} + +.trip-layout { + display: grid; + grid-template-columns: 1fr 220px; + gap: var(--space-10); + align-items: start; +} + +.trip-sidebar { + position: sticky; + top: calc(var(--site-header-height) + var(--space-6)); + display: flex; + flex-direction: column; + gap: var(--space-6); +} + +.trip-sidebar-heading { + font-size: var(--text-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-ink-muted); + margin-bottom: var(--space-3); +} + +.trip-sidebar-list { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.trip-sidebar-link { + display: block; + font-size: var(--text-sm); + color: var(--color-ink-2); + text-decoration: none; + padding: var(--space-1) 0; + transition: color 0.15s; +} + +.trip-sidebar-link:hover { color: var(--color-accent); } + +.trip-sidebar-date { + font-size: var(--text-xs); + color: var(--color-ink-muted); + margin-right: var(--space-2); +} + +@media (max-width: 900px) { + .trip-layout { grid-template-columns: 1fr; } + .trip-sidebar { position: static; display: none; } +} + +/* ── Story cards in feed ─────────────────────────────────────────────────────── */ + +.entry-card--story { + border-left: 3px solid var(--color-accent); + padding-left: var(--space-5); +} + +.entry-card-photo--story { aspect-ratio: 16 / 7; } + +.story-badge { + display: inline-block; + font-size: var(--text-xs); + font-weight: 600; + font-variant: small-caps; + letter-spacing: 0.08em; + color: var(--color-accent); + margin-bottom: var(--space-2); +} + +/* ── Story page escape link ──────────────────────────────────────────────────── */ + +.story-escape { + position: fixed; + top: var(--space-5); + left: var(--space-5); + z-index: 200; + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-ink); + text-decoration: none; + background: rgba(0,0,0,0.6); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + backdrop-filter: blur(4px); +} + +.story-escape:hover { color: var(--color-accent); } +``` + +- [ ] **Step 2: Verify CSS loads without errors** + +```bash +curl -s http://100.96.115.96:8081/trips | grep -c "200\|html" +``` +Load any page and confirm no CSS parse errors in browser dev tools console. Expected: page renders normally, no console errors. + +- [ ] **Step 3: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add themes/intotheeast/css/style.css +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: CSS for home layout, story cards, trip sidebar, escape link" +``` + +--- + +### Task 3: Past trips archive + +**Files:** +- Modify: `user/themes/intotheeast/templates/trips.html.twig` + +**Interfaces:** +- Consumes: `.trip-card`, `.trip-card-title`, `.trip-card-meta`, `.trip-card-dates`, `.trip-card-counts`, `.trips-heading`, `.trips-list` from Task 2 +- Produces: `/trips` renders trip cards with title, date range, and entry counts + +- [ ] **Step 1: Rewrite trips.html.twig** + +Replace the entire content of `user/themes/intotheeast/templates/trips.html.twig` with: + +```twig +{% extends 'partials/base.html.twig' %} + +{% block content %} +

Past Trips

+{% set trips = page.children.published() %} +{% if trips|length == 0 %} +

No trips yet.

+{% else %} +
+{% for trip in trips %} + {% set dailies_page = grav.pages.find(trip.route ~ '/dailies') %} + {% set stories_page = grav.pages.find(trip.route ~ '/stories') %} + {% set journal_count = dailies_page ? dailies_page.children.published()|length : 0 %} + {% set story_count = stories_page ? stories_page.children.published()|length : 0 %} + +
{{ trip.title }}
+
+ {% if trip.header.date_start %} + + {{ trip.header.date_start|date('M Y') }} + {% if trip.header.date_end %} — {{ trip.header.date_end|date('M Y') }}{% else %} — Ongoing{% endif %} + + {% endif %} + + {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }} + {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %} + +
+ +{% endfor %} +
+{% endif %} +{% endblock %} +``` + +- [ ] **Step 2: Verify /trips renders trip cards** + +```bash +curl -s http://100.96.115.96:8081/trips | grep -o 'trip-card\|trip-card-title' +``` +Expected output: `trip-card` and `trip-card-title` appear (at least one trip card rendered). + +```bash +curl -s http://100.96.115.96:8081/trips | grep -o 'journal entr\|Ongoing\|stories' +``` +Expected: at least one of these strings present (entry counts or ongoing label). + +- [ ] **Step 3: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add themes/intotheeast/templates/trips.html.twig +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: past trips archive with trip cards and entry counts" +``` + +--- + +### Task 4: Home page template + +**Files:** +- Create: `user/themes/intotheeast/templates/home.html.twig` + +**Interfaces:** +- Consumes: `config.site.active_trip`; CSS classes from Task 2; `home.md` page from Task 1 +- Produces: `/` renders two-column map + feed layout; map markers click to scroll to entry cards + +- [ ] **Step 1: Create home.html.twig** + +Create `user/themes/intotheeast/templates/home.html.twig` with this content: + +```twig +{% extends 'partials/base.html.twig' %} + +{% block content %} +{% set slug = config.site.active_trip %} +{% set trip = grav.pages.find('/trips/' ~ slug) %} +{% set dailies_page = grav.pages.find('/trips/' ~ slug ~ '/dailies') %} +{% set stories_page = grav.pages.find('/trips/' ~ slug ~ '/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 %} + +{% 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 + }]) %} + {% endif %} +{% endfor %} + +
+
+
+
+ +
+
+

{{ trip ? trip.title : slug }}

+ + {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }} + {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %} + +
+ +
+ {% 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' %} +
+ + {% if hero %} +
+ {{ entry.title }} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + 📍 + {% 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 %} + + {% endif %} +
+
+ {% else %} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + {%- 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(', ') }} + + {% endif %} +
+ {% endif %} +
+

{{ entry.title }}

+

{{ entry.summary|striptags|slice(0, 250)|trim }}

+ Read entry → +
+ +
+ {% else %} + + {% endif %} + {% endfor %} + {% else %} +

No entries yet. The journey is about to begin.

+ {% endif %} +
+
+
+ +{% if map_entries|length > 0 %} + + + +{% endif %} +{% endblock %} +``` + +- [ ] **Step 2: Verify home page renders** + +```bash +curl -s http://100.96.115.96:8081/ | grep -o 'home-layout\|home-trip-name\|entry-card' +``` +Expected: `home-layout`, `home-trip-name`, `entry-card` all present. + +```bash +curl -s http://100.96.115.96:8081/ | grep -o 'leaflet\|home-map' +``` +Expected: `leaflet` and `home-map` present (map loaded, assuming entries with lat/lng exist). + +- [ ] **Step 3: Visual check in browser** + +Open `http://100.96.115.96:8081/` in a browser. Confirm: +- Two-column layout: map left, feed right +- Map is sticky as you scroll the feed +- Map markers are visible (if demo entries with GPS loaded) +- Trip name and entry count show in the feed header +- On mobile viewport (< 768px): map stacks above feed + +- [ ] **Step 4: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add themes/intotheeast/templates/home.html.twig +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: home page template — sticky map + merged feed" +``` + +--- + +### Task 5: Trip page sidebar + +**Files:** +- Modify: `user/themes/intotheeast/templates/trip.html.twig` + +**Interfaces:** +- Consumes: CSS classes `.trip-counts`, `.trip-layout`, `.trip-feed`, `.trip-sidebar`, `.trip-sidebar-section`, `.trip-sidebar-heading`, `.trip-sidebar-list`, `.trip-sidebar-link`, `.trip-sidebar-date`, `.entry-card--story`, `.story-badge` from Task 2 +- Produces: `/trips//` renders entry count in header, merged feed as main content, sticky right sidebar with journal + story jump-links + +- [ ] **Step 1: Rewrite trip.html.twig** + +Replace the entire content of `user/themes/intotheeast/templates/trip.html.twig` with: + +```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 %} + +
+

{{ page.title }}

+ {% if page.header.date_start %} +

+ {{ page.header.date_start|date('d M Y') }} + {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% endif %} +

+ {% endif %} +

+ {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }} + {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %} +

+
+ + + +
+
+
+ {% 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' %} +
+ + {% if hero %} +
+ {{ entry.title }} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + 📍 + {% 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 %} + + {% endif %} +
+
+ {% else %} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + {%- 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(', ') }} + + {% endif %} +
+ {% endif %} +
+

{{ entry.title }}

+

{{ entry.summary|striptags|slice(0, 250)|trim }}

+ Read entry → +
+ +
+ {% else %} + + {% endif %} + {% endfor %} + {% else %} +

No entries yet. The journey is about to begin.

+ {% endif %} +
+
+ + +
+{% endblock %} +``` + +- [ ] **Step 2: Verify trip page** + +```bash +curl -s http://100.96.115.96:8081/trips/japan-korea-2026 | grep -o 'trip-counts\|trip-layout\|trip-sidebar\|entry-card' +``` +Expected: `trip-counts`, `trip-layout`, `trip-sidebar`, `entry-card` all present. + +```bash +curl -s http://100.96.115.96:8081/trips/japan-korea-2026 | grep -o 'journal entr\|trip-sidebar-heading' +``` +Expected: `journal entr` (count line) and `trip-sidebar-heading` present. + +- [ ] **Step 3: Visual check** + +Open `http://100.96.115.96:8081/trips/japan-korea-2026` in browser. Confirm: +- Trip title + entry count visible in hero +- Two-column layout: feed left, sidebar right +- Sidebar shows "Journal" section with date + entry title links +- Clicking a sidebar link scrolls to that entry card + +- [ ] **Step 4: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add themes/intotheeast/templates/trip.html.twig +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: trip page — entry counts, merged feed, sticky sidebar index" +``` + +--- + +### Task 6: Dailies feed + stories escape link + +**Files:** +- Modify: `user/themes/intotheeast/templates/dailies.html.twig` +- Modify: `user/themes/intotheeast/templates/stories.html.twig` + +**Interfaces:** +- Consumes: CSS classes from Task 2; `{% block nav %}` from Task 1 +- Produces: `/trips//dailies` shows merged feed with story cards and `id`/`data-` attrs on cards; map markers scroll to cards; `/trips//stories/` shows escape link instead of global nav + +- [ ] **Step 1: Update dailies.html.twig — add id/data attrs, merge stories, scroll-on-marker-click** + +Replace the entire content of `user/themes/intotheeast/templates/dailies.html.twig` with: + +```twig +{% extends 'default.html.twig' %} + +{% block content %} +{% set journal_entries = page.collection() %} +{% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %} +{% 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) %} + +{# Collect GPS entries for mini-map #} +{% 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, + 'lng': item.page.header.lng, + 'title': item.page.title, + 'slug': item.page.slug, + 'url': item.page.url + }]) %} + {% endif %} +{% endfor %} + +{% if map_entries|length > 0 %} +
+
+ View full map → +
+ + + + +{% endif %} + +
+ {% 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' %} +
+ + {% if hero %} +
+ {{ entry.title }} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + 📍 + {% 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 %} + + {% endif %} +
+
+ {% else %} +
+ + {% if entry.header.location_city or entry.header.location_country %} + + {%- 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(', ') }} + + {% endif %} +
+ {% endif %} +
+

{{ entry.title }}

+

{{ entry.summary|striptags|slice(0, 250)|trim }}

+ Read entry → +
+ +
+ {% else %} + + {% endif %} + {% endfor %} + {% else %} +

No entries yet. The journey is about to begin.

+ {% endif %} +
+{% endblock %} +``` + +- [ ] **Step 2: Update stories.html.twig — escape link, no global nav** + +Replace the entire content of `user/themes/intotheeast/templates/stories.html.twig` with: + +```twig +{% extends 'partials/base.html.twig' %} + +{% block nav %} +← Back +{% endblock %} + +{% block content %} +

{{ page.title }}

+

Stories coming soon.

+{% endblock %} +``` + +- [ ] **Step 3: Verify dailies feed** + +```bash +curl -s http://100.96.115.96:8081/trips/japan-korea-2026/dailies | grep -o 'id="entry-\|entry-card--story\|story-badge' +``` +Expected: `id="entry-` present (cards have anchor IDs). `entry-card--story` and `story-badge` present only if story pages exist. + +- [ ] **Step 4: Verify stories escape link** + +First check if a story page exists (otherwise create a test one). If stories exist: +```bash +curl -s http://100.96.115.96:8081/trips/japan-korea-2026/stories | grep -o 'story-escape\|site-nav' +``` +Expected: `story-escape` present, `site-nav` absent. + +- [ ] **Step 5: Commit** + +```bash +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user add themes/intotheeast/templates/dailies.html.twig themes/intotheeast/templates/stories.html.twig +git -C /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user commit -m "feat: dailies merges stories, id attrs for map sync; stories escape link" +``` + +--- + +## Self-Review + +**Spec coverage check:** +- §1 URL structure — Task 1 (home.md, system.yaml) ✓ +- §2 Home page layout + data + map — Task 4 ✓ +- §2 Mobile stack — Task 2 CSS media query ✓ +- §3 Past trips archive with counts — Task 3 ✓ +- §4 Trip page counts + sidebar + merged feed — Task 5 ✓ +- §5 Story cards in feeds (home + trip + dailies) — Tasks 4, 5, 6 ✓ +- §5 Story card visual treatment (teal border, badge) — Task 2 CSS ✓ +- §6 Nav updated to Home + Past Trips — Task 1 ✓ +- Stories escape link / nav override — Task 6 ✓ + +**Placeholder scan:** None found. + +**Type consistency:** `entry.slug` used consistently for `id="entry-{{ entry.slug }}"` in Tasks 4, 5, 6. Map entries use `slug` field for scroll target in Tasks 4, 6. All match.