943 lines
36 KiB
Markdown
943 lines
36 KiB
Markdown
# Homepage Redesign 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:** Context-aware homepage with a persistent two-column map+feed layout: active-trip mode shows the live feed + GPX on the home map; between-trips mode shows a curated highlights grid from all trips with markers-only on the map.
|
||
|
||
**Architecture:** Single `home.html.twig` with a `{% if config.site.travelling %}` branch. Active trip branch keeps the existing feed and adds GPX loading to the home map. Between-trips branch selects one random `featured:true` entry per trip (max 6), renders a highlight card grid, and passes coordinates to the map (no GPX, no journey line). Three blueprint files expose new data fields. A site-config blueprint exposes the mode switch and active-trip selector in Admin2.
|
||
|
||
**Tech Stack:** Grav CMS 2.0 (PHP/Twig), MapLibre GL v4, toGeoJSON CDN, Playwright (Node.js)
|
||
|
||
## Global Constraints
|
||
|
||
- All `user/` file changes committed via `git -C user` from the project root (or `git` from within `user/`)
|
||
- Test files in `tests/ui/` and `scripts/` committed via plain `git` from the project root
|
||
- No new Grav plugins
|
||
- No JS build pipeline — plain CSS and vanilla JS only
|
||
- `config.site.active_trip` stores a **full page route**: `/trips/italy-2026-demo` (not a bare slug)
|
||
- `config.site.travelling` is `true` for active-trip mode, `false` for between-trips mode
|
||
- `entry.header.featured` and `story.header.featured` (bool) gate highlight eligibility — no type-based auto-include; both stories and journal entries use the same flag
|
||
- `trip.header.tagline` (string) is the trip description shown on highlight cards
|
||
- Dev server at `http://localhost:8081` must be running (`make start`) for all Playwright tests
|
||
- Demo data must be loaded (`make demo-load`) before running Playwright tests
|
||
- Playwright test IDs continue sequentially: next map test is M8; next home tests are H2–H5
|
||
|
||
---
|
||
|
||
### Task 1: Blueprints, config, and demo seed data
|
||
|
||
**Files:**
|
||
- Create: `user/blueprints/config/site.yaml`
|
||
- Modify: `user/themes/intotheeast/blueprints/trip.yaml` — add `tagline` field in Trip tab
|
||
- Modify: `user/themes/intotheeast/blueprints/entry.yaml` — add `featured` toggle in Entry tab
|
||
- Modify: `user/themes/intotheeast/blueprints/story.yaml` — add `featured` toggle in Publishing tab
|
||
- Modify: `user/config/site.yaml` — change `active_trip` to full route, add `travelling: true`
|
||
- Modify: `user/pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md` — add `featured: true`
|
||
- Modify: first journal entry under `user/pages/01.trips/italy-2026-demo/01.dailies/` — add `featured: true`
|
||
- Modify: matching demo source files in `user/docs/demo/trips/italy-2026-demo/` — mirror the `featured: true` additions
|
||
|
||
**Interfaces:**
|
||
- Produces: `config.site.travelling` (bool) — read in Twig as `config.site.travelling`
|
||
- Produces: `config.site.active_trip` (string, full route) — used in Task 2 path lookups
|
||
- Produces: `entry.header.featured` / `story.header.featured` (bool) — used in Task 3 selection logic
|
||
- Produces: `trip.header.tagline` (string) — used in Task 3 card rendering
|
||
|
||
- [ ] **Step 1: Record baseline test result**
|
||
|
||
```bash
|
||
make test
|
||
```
|
||
|
||
Expected: 13 passed, 1 failed (`parent set to /trips/japan-korea-2026/dailies` — pre-existing). Record this so you can verify nothing changed after your edits.
|
||
|
||
- [ ] **Step 2: Create `user/blueprints/config/site.yaml`**
|
||
|
||
```yaml
|
||
form:
|
||
validation: loose
|
||
fields:
|
||
active_trip:
|
||
type: pages
|
||
label: Active Trip
|
||
start_route: '/trips'
|
||
show_root: false
|
||
show_slug: true
|
||
|
||
travelling:
|
||
type: toggle
|
||
label: Currently Travelling
|
||
highlight: 1
|
||
default: false
|
||
options:
|
||
1: 'Yes'
|
||
0: 'No'
|
||
validate:
|
||
type: bool
|
||
```
|
||
|
||
Note: `type: pages` is confirmed present in Admin2's JS bundle but untested in a site config blueprint. If it fails to render in Admin2, fall back to `type: select` with explicit `options:` entries — one per trip slug — and no other code changes are needed.
|
||
|
||
- [ ] **Step 3: Add `tagline` to `user/themes/intotheeast/blueprints/trip.yaml`**
|
||
|
||
In the `trip` tab's `fields` block, after `header.album_url`, add:
|
||
|
||
```yaml
|
||
header.tagline:
|
||
type: text
|
||
label: Tagline
|
||
placeholder: '6 weeks from Venice to Sicily by train'
|
||
help: 'Short description shown on homepage highlight cards'
|
||
```
|
||
|
||
- [ ] **Step 4: Add `featured` toggle to `user/themes/intotheeast/blueprints/entry.yaml`**
|
||
|
||
In the `entry` tab's `fields` block, after `header.force_connect`, add:
|
||
|
||
```yaml
|
||
header.featured:
|
||
type: toggle
|
||
label: Featured highlight
|
||
help: 'Show as a homepage highlight when not travelling'
|
||
highlight: 1
|
||
default: 0
|
||
options:
|
||
1: 'Yes'
|
||
0: 'No'
|
||
validate:
|
||
type: bool
|
||
```
|
||
|
||
- [ ] **Step 5: Add `featured` toggle to `user/themes/intotheeast/blueprints/story.yaml`**
|
||
|
||
In the `publishing` tab's `fields` block, after `header.published`, add:
|
||
|
||
```yaml
|
||
header.featured:
|
||
type: toggle
|
||
label: Featured highlight
|
||
help: 'Show as a homepage highlight when not travelling'
|
||
highlight: 1
|
||
default: 0
|
||
options:
|
||
1: 'Yes'
|
||
0: 'No'
|
||
validate:
|
||
type: bool
|
||
```
|
||
|
||
- [ ] **Step 6: Update `user/config/site.yaml`**
|
||
|
||
Replace the file contents with:
|
||
|
||
```yaml
|
||
title: 'Into the East'
|
||
description: 'A travel blog by Mischa'
|
||
author:
|
||
name: Mischa
|
||
email: mischa@gorinskat.nl
|
||
taxonomies: [category, tag]
|
||
metadata:
|
||
description: 'Into the East — travel journal'
|
||
active_trip: /trips/italy-2026-demo
|
||
travelling: true
|
||
```
|
||
|
||
- [ ] **Step 7: Mark the demo story as featured**
|
||
|
||
Open `user/pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md` and add `featured: true` to its YAML frontmatter block. For example, if the existing frontmatter ends with `published: true`, add the line after it:
|
||
|
||
```yaml
|
||
featured: true
|
||
```
|
||
|
||
- [ ] **Step 8: Mark one demo journal entry as featured**
|
||
|
||
Find the first entry folder:
|
||
|
||
```bash
|
||
ls user/pages/01.trips/italy-2026-demo/01.dailies/ | head -1
|
||
```
|
||
|
||
Open `user/pages/01.trips/italy-2026-demo/01.dailies/<that-slug>/entry.md` and add `featured: true` to its YAML frontmatter. Ensure the entry has `lat` and `lng` set — if the first entry doesn't, pick the first one that does (check with `grep -l "^lat:" user/pages/01.trips/italy-2026-demo/01.dailies/*/entry.md | head -1`).
|
||
|
||
- [ ] **Step 9: Mirror featured flags to demo source**
|
||
|
||
The demo source lives in `user/docs/demo/trips/italy-2026-demo/`. Apply the same `featured: true` additions to:
|
||
- `user/docs/demo/trips/italy-2026-demo/stories/val-dorcia-at-dawn/story.md`
|
||
- The matching journal entry in `user/docs/demo/trips/italy-2026-demo/dailies/<slug>/entry.md`
|
||
|
||
This ensures featured flags survive `make demo-reset`.
|
||
|
||
- [ ] **Step 10: Verify tests unchanged**
|
||
|
||
```bash
|
||
make test
|
||
```
|
||
|
||
Expected: identical to Step 1 (13 passed, 1 pre-existing failure). These are YAML-only changes — no template or script changed.
|
||
|
||
- [ ] **Step 11: Commit**
|
||
|
||
```bash
|
||
git -C user add blueprints/config/site.yaml \
|
||
themes/intotheeast/blueprints/trip.yaml \
|
||
themes/intotheeast/blueprints/entry.yaml \
|
||
themes/intotheeast/blueprints/story.yaml \
|
||
config/site.yaml \
|
||
pages/01.trips/italy-2026-demo/04.stories/val-dorcia-at-dawn/story.md \
|
||
docs/demo/trips/italy-2026-demo/stories/val-dorcia-at-dawn/story.md
|
||
git -C user commit -m "feat: add blueprints for active_trip/travelling config, tagline, featured fields"
|
||
```
|
||
|
||
Then commit the journal entry (substitute the actual slug discovered in Step 8):
|
||
|
||
```bash
|
||
git -C user add pages/01.trips/italy-2026-demo/01.dailies/<slug>/entry.md \
|
||
docs/demo/trips/italy-2026-demo/dailies/<slug>/entry.md
|
||
git -C user commit -m "chore: mark demo entries as featured for homepage highlight testing"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Active trip mode — route-based lookup + GPX on home map
|
||
|
||
**Files:**
|
||
- Modify: `user/themes/intotheeast/templates/home.html.twig` — full replacement
|
||
- Modify: `tests/ui/maps.spec.js` — add M8
|
||
|
||
**Interfaces:**
|
||
- Consumes: `config.site.travelling` (bool) — Task 1
|
||
- Consumes: `config.site.active_trip` (full route string) — Task 1
|
||
- Produces: `window.homeMap` global (already existed — now with GPX sources `home-gpx-0` … and `home-journey`)
|
||
- Produces: `{% else %}` placeholder in template for Task 3 to fill
|
||
|
||
- [ ] **Step 1: Write failing test M8**
|
||
|
||
Add to `tests/ui/maps.spec.js`:
|
||
|
||
```js
|
||
// ── M8: Home map has GPX journey source on active trip ────────────────────────
|
||
test('M8: home map has a journey source after GPX settles (active trip)', async ({ page }) => {
|
||
// Requires travelling: true in user/config/site.yaml (set in Task 1).
|
||
// Requires GPX files attached to the active trip (italy-2026-demo has 7).
|
||
const errors = [];
|
||
page.on('pageerror', e => errors.push(e.message));
|
||
|
||
await page.goto('/');
|
||
await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
|
||
await expect(page.locator('#home-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
|
||
|
||
await page.waitForFunction(function () {
|
||
return window.homeMap &&
|
||
(window.homeMap.getSource('home-journey') !== undefined ||
|
||
window.homeMap.getSource('home-gpx-0') !== undefined);
|
||
}, { timeout: 20000 });
|
||
|
||
const hasSource = await page.evaluate(function () {
|
||
return !!(window.homeMap.getSource('home-journey') || window.homeMap.getSource('home-gpx-0'));
|
||
});
|
||
|
||
expect(hasSource, 'Home map has a journey or GPX source').toBe(true);
|
||
expect(errors, 'No JS errors on home page').toHaveLength(0);
|
||
});
|
||
```
|
||
|
||
Run to confirm it fails:
|
||
|
||
```bash
|
||
npx playwright test tests/ui/maps.spec.js --grep "M8"
|
||
```
|
||
|
||
Expected: FAIL (GPX sources not yet added to home map).
|
||
|
||
- [ ] **Step 2: Replace `home.html.twig` with the active-trip-mode version**
|
||
|
||
Replace the entire file with:
|
||
|
||
```twig
|
||
{% extends 'partials/base.html.twig' %}
|
||
|
||
{% block content %}
|
||
{% 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' %}
|
||
{% set weather_icons = {
|
||
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
||
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
||
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
||
} %}
|
||
<article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||
<header class="journal-post-header">
|
||
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
||
<p class="journal-post-meta">
|
||
<a class="journal-post-permalink" href="{{ entry.url }}">
|
||
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
||
</a>
|
||
{% if entry.header.location_city or entry.header.location_country %}
|
||
<span class="journal-post-location">
|
||
· 📍
|
||
{%- 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 %}
|
||
{% if entry.header.weather_desc %}
|
||
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
||
{% endif %}
|
||
</p>
|
||
</header>
|
||
|
||
{% set images = entry.media.images %}
|
||
{% if images|length > 0 %}
|
||
<div class="journal-photo-strip" data-slides="{{ images|length }}">
|
||
{% for img in images %}
|
||
<div class="journal-photo-slide">
|
||
<img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% if images|length > 1 %}
|
||
<div class="journal-photo-dots" aria-hidden="true">
|
||
{% for img in images %}
|
||
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
|
||
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
||
</article>
|
||
{% else %}
|
||
{% 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 %}
|
||
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" 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>
|
||
{% 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 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) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
});
|
||
|
||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
|
||
});
|
||
|
||
/* Draw simple journey line immediately; replaced below if GPX is present */
|
||
MapUtils.addJourneyLine(homeMap, coords, 'home-journey');
|
||
|
||
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);
|
||
|
||
if (HOME_GPX_URLS.length > 0) {
|
||
Promise.all(HOME_GPX_URLS.map(function (url, idx) {
|
||
return fetch(url)
|
||
.then(function (r) { return r.text(); })
|
||
.then(function (text) {
|
||
var xml = new DOMParser().parseFromString(text, 'text/xml');
|
||
var geojson = toGeoJSON.gpx(xml);
|
||
var sid = 'home-gpx-' + idx;
|
||
homeMap.addSource(sid, { type: 'geojson', data: geojson });
|
||
homeMap.addLayer({
|
||
id: sid + '-line', type: 'line', source: sid,
|
||
layout: { 'line-join': 'round', 'line-cap': 'round' },
|
||
paint: { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
|
||
});
|
||
return MapUtils.extractTrackpoints(geojson);
|
||
})
|
||
.catch(function (err) { console.warn('GPX load failed:', url, err); return []; });
|
||
})).then(function (allTrackpoints) {
|
||
if (homeMap.getLayer('home-journey')) homeMap.removeLayer('home-journey');
|
||
if (homeMap.getSource('home-journey')) homeMap.removeSource('home-journey');
|
||
var valid = allTrackpoints.filter(function (tp) { return tp.length > 0; });
|
||
var segments = MapUtils.buildJourneySegments(HOME_ENTRIES, valid, 10);
|
||
MapUtils.addJourneySegments(homeMap, segments, 'home-journey');
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
|
||
<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
|
||
{% endif %}
|
||
|
||
{% endblock %}
|
||
```
|
||
|
||
- [ ] **Step 3: Run M8 test**
|
||
|
||
```bash
|
||
npx playwright test tests/ui/maps.spec.js --grep "M8"
|
||
```
|
||
|
||
Expected: PASS. The home map now loads GPX URLs, adds `home-gpx-N` layer sources, and replaces the simple `home-journey` source with connector-suppressed segments.
|
||
|
||
- [ ] **Step 4: Run existing home + map tests**
|
||
|
||
```bash
|
||
npx playwright test tests/ui/maps.spec.js tests/ui/home.spec.js
|
||
```
|
||
|
||
Expected: M4 and H1 still pass; M8 passes.
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git -C user add themes/intotheeast/templates/home.html.twig
|
||
git -C user commit -m "feat: add travelling branch and GPX to home map (active trip mode)"
|
||
git add tests/ui/maps.spec.js
|
||
git commit -m "test(maps): add M8 — home map GPX source on active trip"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Between-trips highlights mode + CSS + Playwright tests
|
||
|
||
**Files:**
|
||
- Modify: `user/themes/intotheeast/templates/home.html.twig` — replace `{% else %}` placeholder with full highlights branch
|
||
- Modify: `user/themes/intotheeast/css/style.css` — append highlight card and grid styles
|
||
- Create: `tests/ui/home-highlights.spec.js`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `config.site.travelling` (bool) — Task 1
|
||
- Consumes: `entry.header.featured` / `story.header.featured` (bool) — Task 1
|
||
- Consumes: `trip.header.tagline` (string) — Task 1
|
||
- Produces: `.home-highlights-grid` — the grid container, used in Playwright selectors
|
||
- Produces: `.home-highlight-card[id="highlight-<slug>"]` — per-card IDs for map marker scroll-to
|
||
- Produces: `.home-highlights-cta` — CTA link to `/trips`
|
||
- Produces: `window.homeMap` global in between-trips mode (same name, separate branch)
|
||
|
||
- [ ] **Step 1: Write failing tests**
|
||
|
||
Create `tests/ui/home-highlights.spec.js`:
|
||
|
||
```js
|
||
// @ts-check
|
||
// Tests: H2–H5 — Between-trips highlights mode
|
||
// These tests temporarily set travelling: false in user/config/site.yaml,
|
||
// run the assertions, then restore the original value.
|
||
// Requires demo data with featured entries: run `make demo-load` first.
|
||
const { test, expect } = require('@playwright/test');
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
const SITE_YAML_PATH = path.join(__dirname, '../../user/config/site.yaml');
|
||
|
||
test.describe('Between-trips highlights mode', () => {
|
||
let originalSiteYaml;
|
||
|
||
test.beforeAll(async () => {
|
||
originalSiteYaml = fs.readFileSync(SITE_YAML_PATH, 'utf8');
|
||
const patched = originalSiteYaml.replace(/^travelling:\s*true/m, 'travelling: false');
|
||
fs.writeFileSync(SITE_YAML_PATH, patched);
|
||
// Brief pause for Grav to re-read config on next request
|
||
await new Promise(r => setTimeout(r, 400));
|
||
});
|
||
|
||
test.afterAll(async () => {
|
||
fs.writeFileSync(SITE_YAML_PATH, originalSiteYaml);
|
||
});
|
||
|
||
// ── H2: Highlights grid is visible ──────────────────────────────────────────
|
||
test('H2: homepage shows highlights grid when not travelling', async ({ page }) => {
|
||
await page.goto('/');
|
||
await expect(page.locator('.home-highlights-grid')).toBeVisible({ timeout: 10000 });
|
||
});
|
||
|
||
// ── H3: Highlight cards contain trip link ────────────────────────────────────
|
||
test('H3: highlight cards have a View-trip link', async ({ page }) => {
|
||
await page.goto('/');
|
||
await expect(page.locator('.home-highlight-card').first()).toBeVisible({ timeout: 10000 });
|
||
await expect(page.locator('.home-highlight-trip-link').first()).toBeVisible();
|
||
});
|
||
|
||
// ── H4: Between-trips home map renders without JS errors ────────────────────
|
||
test('H4: home map renders in between-trips mode without JS errors', async ({ page }) => {
|
||
const errors = [];
|
||
page.on('pageerror', e => errors.push(e.message));
|
||
await page.goto('/');
|
||
await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
|
||
expect(errors, 'No JS errors').toHaveLength(0);
|
||
});
|
||
|
||
// ── H5: CTA links to /trips ──────────────────────────────────────────────────
|
||
test('H5: "Explore all past trips" CTA links to /trips', async ({ page }) => {
|
||
await page.goto('/');
|
||
const cta = page.locator('.home-highlights-cta');
|
||
await expect(cta).toBeVisible({ timeout: 10000 });
|
||
await expect(cta).toHaveAttribute('href', /\/trips/);
|
||
});
|
||
});
|
||
```
|
||
|
||
Run to confirm they fail:
|
||
|
||
```bash
|
||
npx playwright test tests/ui/home-highlights.spec.js
|
||
```
|
||
|
||
Expected: H2–H5 all FAIL (`.home-highlights-grid` not present).
|
||
|
||
- [ ] **Step 2: Append highlight CSS to `user/themes/intotheeast/css/style.css`**
|
||
|
||
Append to the end of `style.css`:
|
||
|
||
```css
|
||
/* ── Between-trips highlights grid ──────────────────────────────────────────── */
|
||
|
||
.home-highlights-header {
|
||
margin-bottom: var(--space-8);
|
||
padding-bottom: var(--space-6);
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.home-highlights-title {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-2xl);
|
||
font-weight: 400;
|
||
color: var(--color-ink);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.home-highlights-subtitle {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-ink-muted);
|
||
}
|
||
|
||
.home-highlights-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-6);
|
||
margin-bottom: var(--space-10);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.home-highlights-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.home-highlights-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.home-highlight-card {
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-canvas);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.home-highlight-image {
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.home-highlight-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.home-highlight-body {
|
||
padding: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
flex: 1;
|
||
}
|
||
|
||
.home-highlight-badge {
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
font-variant: small-caps;
|
||
letter-spacing: 0.08em;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.home-highlight-badge--journal {
|
||
color: var(--color-ink-muted);
|
||
}
|
||
|
||
.home-highlight-title {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-lg);
|
||
font-weight: 400;
|
||
color: var(--color-ink);
|
||
text-decoration: none;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.home-highlight-title:hover { color: var(--color-accent); }
|
||
|
||
.home-highlight-trip {
|
||
margin-top: auto;
|
||
padding-top: var(--space-3);
|
||
border-top: 1px solid var(--color-border);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-ink-muted);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.home-highlight-trip-name {
|
||
font-weight: 600;
|
||
color: var(--color-ink-2);
|
||
}
|
||
|
||
.home-highlight-tagline { font-style: italic; }
|
||
|
||
.home-highlight-trip-link {
|
||
color: var(--color-accent);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.home-highlight-trip-link:hover { text-decoration: underline; }
|
||
|
||
.home-highlights-cta-wrap {
|
||
text-align: center;
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.home-highlights-cta {
|
||
display: inline-block;
|
||
color: var(--color-accent);
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
padding: var(--space-3) var(--space-6);
|
||
border: 1px solid var(--color-accent);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.home-highlights-cta:hover {
|
||
background: var(--color-accent);
|
||
color: var(--color-canvas);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Replace the placeholder `{% else %}` branch in `home.html.twig`**
|
||
|
||
Find this exact block (added in Task 2):
|
||
|
||
```twig
|
||
{% else %}
|
||
{# ════════════════════════════════════════════════ BETWEEN-TRIPS MODE (Task 3) #}
|
||
<p class="feed-empty" style="padding: 2rem;">Off season — highlights coming in Task 3.</p>
|
||
{% endif %}
|
||
```
|
||
|
||
Replace it with:
|
||
|
||
```twig
|
||
{% 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">Into the East</h1>
|
||
<p class="home-highlights-subtitle">A few moments from past journeys</p>
|
||
</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 %}
|
||
```
|
||
|
||
- [ ] **Step 4: Run H2–H5 tests**
|
||
|
||
```bash
|
||
npx playwright test tests/ui/home-highlights.spec.js
|
||
```
|
||
|
||
Expected: H2, H3, H4, H5 all PASS.
|
||
|
||
- [ ] **Step 5: Verify no regressions**
|
||
|
||
```bash
|
||
make test
|
||
npx playwright test tests/ui/
|
||
```
|
||
|
||
Expected: `make test` same as baseline (13 passed, 1 pre-existing failure). All Playwright tests pass — H1 and M4 use `travelling: true`; H2–H5 temporarily flip to `false` and restore it.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git -C user add themes/intotheeast/templates/home.html.twig \
|
||
themes/intotheeast/css/style.css
|
||
git -C user commit -m "feat: add between-trips highlights mode with grid and map markers"
|
||
git add tests/ui/home-highlights.spec.js
|
||
git commit -m "test(home): add H2–H5 between-trips highlights Playwright tests"
|
||
```
|