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

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