diff --git a/docs/superpowers/plans/2026-06-20-inline-journal-feed.md b/docs/superpowers/plans/2026-06-20-inline-journal-feed.md index a34250f..0f2b31c 100644 --- a/docs/superpowers/plans/2026-06-20-inline-journal-feed.md +++ b/docs/superpowers/plans/2026-06-20-inline-journal-feed.md @@ -2,6 +2,8 @@ > **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. +**Status:** ✅ Complete (2026-06-20) + **Goal:** Replace click-through journal entry cards with fully inline posts (photo strip + full text) across the trip page, dailies page, and home page. **Architecture:** Each journal entry becomes an `
` block that renders all its images in a CSS scroll-snap strip with dot indicators, followed by the full body text. The `id`, `data-type`, `data-lat`, `data-lng` attributes stay on the root so map targeting, filter JS, and flash animation continue to work. Story cards in all three feeds are unchanged. @@ -46,7 +48,7 @@ Add all new `.journal-post` CSS and the photo-strip dot-sync JS. Remove CSS clas **Interfaces:** - Produces: `.journal-post`, `.journal-post-header`, `.journal-post-title`, `.journal-post-meta`, `.journal-post-permalink`, `.journal-post-location`, `.journal-post-weather`, `.journal-photo-strip`, `.journal-photo-slide`, `.journal-photo-dots`, `.journal-photo-dot.is-active`, `.journal-post-body`, `.journal-post.is-highlighted` — all usable by Tasks 2–4 -- [ ] **Step 1: Add `.journal-post` CSS block to `style.css`** +- [x] **Step 1: Add `.journal-post` CSS block to `style.css`** In `user/themes/intotheeast/css/style.css`, find the line: @@ -160,7 +162,7 @@ Insert the following block **before** that comment: ``` -- [ ] **Step 2: Remove journal-card-only CSS rules from `style.css`** +- [x] **Step 2: Remove journal-card-only CSS rules from `style.css`** These rules are only used by the old journal entry card. Story cards do not use them. Remove each block exactly as shown. @@ -260,7 +262,7 @@ Replace with: } ``` -- [ ] **Step 3: Add dot-sync JS to `base.html.twig`** +- [x] **Step 3: Add dot-sync JS to `base.html.twig`** In `user/themes/intotheeast/templates/partials/base.html.twig`, find: @@ -289,7 +291,7 @@ Replace with: ``` -- [ ] **Step 4: Run existing tests to confirm nothing broke** +- [x] **Step 4: Run existing tests to confirm nothing broke** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -298,7 +300,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.sp Expected: all existing tests pass (M7 still passes because `trip.html.twig` has not changed yet — the JS still adds `is-highlighted` to `.entry-card` elements, and the old M7 selector `.entry-card.is-highlighted` finds the element). -- [ ] **Step 5: Commit user subrepo** +- [x] **Step 5: Commit user subrepo** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user @@ -320,7 +322,7 @@ Replace the journal entry card in `dailies.html.twig` with the new `.journal-pos - Consumes: `.journal-post` CSS from Task 1 - Produces: `/trips/japan-korea-2026/dailies` renders `.journal-post` blocks; T1 and T2 pass with new selectors -- [ ] **Step 1: Update T1 and T2 tests to their new selectors** +- [x] **Step 1: Update T1 and T2 tests to their new selectors** In `tests/ui/dailies.spec.js`, make the following changes: @@ -371,7 +373,7 @@ Replace with: }); ``` -- [ ] **Step 2: Run T1 and T2 to verify they fail** +- [x] **Step 2: Run T1 and T2 to verify they fail** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -380,7 +382,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T1:|T2:" Expected: FAIL — `.journal-post` selector finds no elements (the page still renders `.entry-card`). -- [ ] **Step 3: Add `weather_icons` map and replace journal card in `dailies.html.twig`** +- [x] **Step 3: Add `weather_icons` map and replace journal card in `dailies.html.twig`** In `user/themes/intotheeast/templates/dailies.html.twig`, find the line: @@ -487,7 +489,7 @@ The exact text to find and replace is the old journal branch. The old branch sta ``` -- [ ] **Step 4: Run T1 and T2 to verify they pass** +- [x] **Step 4: Run T1 and T2 to verify they pass** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -496,7 +498,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js -g "T1:|T2:" Expected: PASS. -- [ ] **Step 5: Run the full suite to check no regressions** +- [x] **Step 5: Run the full suite to check no regressions** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js @@ -504,7 +506,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.sp Expected: all pass. -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user @@ -530,7 +532,7 @@ Replace the journal entry card in `trip.html.twig` with the `.journal-post` bloc - Consumes: `.journal-post` CSS and `.journal-post.is-highlighted` from Task 1; journal-post HTML pattern from Task 2 - Produces: `/trips/japan-korea-2026` renders `.journal-post` blocks; M7 passes with `.journal-post.is-highlighted` -- [ ] **Step 1: Update M7 to the new selector** +- [x] **Step 1: Update M7 to the new selector** In `tests/ui/maps.spec.js`, find: @@ -546,7 +548,7 @@ Replace with: await expect(page.locator('.journal-post.is-highlighted')).toBeVisible({ timeout: 1500 }); ``` -- [ ] **Step 2: Run M7 to verify it fails** +- [x] **Step 2: Run M7 to verify it fails** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -555,7 +557,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" Expected: FAIL — `.journal-post.is-highlighted` not found (trip.html.twig still renders ``). -- [ ] **Step 3: Replace journal card in `trip.html.twig`** +- [x] **Step 3: Replace journal card in `trip.html.twig`** In `user/themes/intotheeast/templates/trip.html.twig`, find and replace the journal branch of the `{% if item.type == 'journal' %}` block. The old branch to replace is: @@ -655,7 +657,7 @@ Replace with:
``` -- [ ] **Step 4: Run M7 to verify it passes** +- [x] **Step 4: Run M7 to verify it passes** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -664,7 +666,7 @@ npx playwright test --project=chromium tests/ui/maps.spec.js -g "M7:" Expected: PASS. -- [ ] **Step 5: Run full suite** +- [x] **Step 5: Run full suite** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js @@ -672,7 +674,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.sp Expected: all pass. -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user @@ -697,7 +699,7 @@ Replace the journal entry card in `home.html.twig` and add a minimal home page t **Interfaces:** - Consumes: `.journal-post` CSS from Task 1; journal-post HTML pattern from Task 2 -- [ ] **Step 1: Write the failing H1 test** +- [x] **Step 1: Write the failing H1 test** Create `tests/ui/home.spec.js`: @@ -714,7 +716,7 @@ test('H1: home page shows at least one inline journal-post block', async ({ page }); ``` -- [ ] **Step 2: Run H1 to verify it fails** +- [x] **Step 2: Run H1 to verify it fails** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -723,7 +725,7 @@ npx playwright test --project=chromium tests/ui/home.spec.js Expected: FAIL — `.journal-post` not found (home page still renders ``). -- [ ] **Step 3: Replace journal card in `home.html.twig`** +- [x] **Step 3: Replace journal card in `home.html.twig`** In `user/themes/intotheeast/templates/home.html.twig`, find the journal branch: @@ -825,7 +827,7 @@ Replace with: Note: `home.html.twig` journal posts do **not** include `data-type` (the home page has no filter bar) — this matches the existing `` on home which also had no `data-type`. -- [ ] **Step 4: Run H1 to verify it passes** +- [x] **Step 4: Run H1 to verify it passes** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast @@ -834,7 +836,7 @@ npx playwright test --project=chromium tests/ui/home.spec.js Expected: PASS. -- [ ] **Step 5: Run the full suite** +- [x] **Step 5: Run the full suite** ```bash npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.spec.js tests/ui/trip-filter.spec.js tests/ui/stories.spec.js tests/ui/home.spec.js @@ -842,7 +844,7 @@ npx playwright test --project=chromium tests/ui/dailies.spec.js tests/ui/maps.sp Expected: all pass. -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user