docs: mark inline-journal-feed plan complete

This commit is contained in:
2026-06-20 19:58:49 +02:00
parent 3f8004da48
commit 8f5ad0dae9
@@ -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. > **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. **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 `<article class="journal-post">` 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. **Architecture:** Each journal entry becomes an `<article class="journal-post">` 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:** **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 24 - 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 24
- [ ] **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: 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. 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: In `user/themes/intotheeast/templates/partials/base.html.twig`, find:
@@ -289,7 +291,7 @@ Replace with:
</body> </body>
``` ```
- [ ] **Step 4: Run existing tests to confirm nothing broke** - [x] **Step 4: Run existing tests to confirm nothing broke**
```bash ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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). 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 ```bash
cd /home/mischa/Projects/travel-blog-intotheeast/user 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 - Consumes: `.journal-post` CSS from Task 1
- Produces: `/trips/japan-korea-2026/dailies` renders `.journal-post` blocks; T1 and T2 pass with new selectors - 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: 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 ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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`). 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: 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
</a> </a>
``` ```
- [ ] **Step 4: Run T1 and T2 to verify they pass** - [x] **Step 4: Run T1 and T2 to verify they pass**
```bash ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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. Expected: PASS.
- [ ] **Step 5: Run the full suite to check no regressions** - [x] **Step 5: Run the full suite to check no regressions**
```bash ```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 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. Expected: all pass.
- [ ] **Step 6: Commit** - [x] **Step 6: Commit**
```bash ```bash
cd /home/mischa/Projects/travel-blog-intotheeast/user 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 - 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` - 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: In `tests/ui/maps.spec.js`, find:
@@ -546,7 +548,7 @@ Replace with:
await expect(page.locator('.journal-post.is-highlighted')).toBeVisible({ timeout: 1500 }); 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 ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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 `<a class="entry-card">`). Expected: FAIL — `.journal-post.is-highlighted` not found (trip.html.twig still renders `<a class="entry-card">`).
- [ ] **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: 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:
</article> </article>
``` ```
- [ ] **Step 4: Run M7 to verify it passes** - [x] **Step 4: Run M7 to verify it passes**
```bash ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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. Expected: PASS.
- [ ] **Step 5: Run full suite** - [x] **Step 5: Run full suite**
```bash ```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 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. Expected: all pass.
- [ ] **Step 6: Commit** - [x] **Step 6: Commit**
```bash ```bash
cd /home/mischa/Projects/travel-blog-intotheeast/user 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:** **Interfaces:**
- Consumes: `.journal-post` CSS from Task 1; journal-post HTML pattern from Task 2 - 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`: 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 ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast 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 `<a class="entry-card">`). Expected: FAIL — `.journal-post` not found (home page still renders `<a class="entry-card">`).
- [ ] **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: 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 `<a class="entry-card">` on home which also had no `data-type`. Note: `home.html.twig` journal posts do **not** include `data-type` (the home page has no filter bar) — this matches the existing `<a class="entry-card">` 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 ```bash
cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
@@ -834,7 +836,7 @@ npx playwright test --project=chromium tests/ui/home.spec.js
Expected: PASS. Expected: PASS.
- [ ] **Step 5: Run the full suite** - [x] **Step 5: Run the full suite**
```bash ```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 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. Expected: all pass.
- [ ] **Step 6: Commit** - [x] **Step 6: Commit**
```bash ```bash
cd /home/mischa/Projects/travel-blog-intotheeast/user cd /home/mischa/Projects/travel-blog-intotheeast/user