m038/intotheeast-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: mark asset pipeline plan as complete

Browse Source
This commit is contained in:
m038
2026-06-25 00:13:25 +02:00
parent 41e303e6bc
commit 7b93fbc5a3
1 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/working/plans/2026-06-22-asset-pipeline.md
+37 -37
View File
@@ -1,6 +1,6 @@
# Asset Pipeline & Frontend Reliability 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.
> **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 (`- [x]`) syntax for tracking.
**Goal:** Eliminate all CDN dependencies, self-host fonts, and deduplicate shared JS logic into versioned bundles built via Docker.
@@ -54,7 +54,7 @@ Set up `package.json`, the Docker `make build-assets` target, and gitignore. Ver
**Interfaces:**
- Produces: `make build-assets` command that runs `npm ci && npm run build` in Docker Node 20 Alpine
- [ ] **Step 1: Create package.json**
- [x] **Step 1: Create package.json**
Create `user/themes/intotheeast/package.json`:
@@ -78,7 +78,7 @@ Create `user/themes/intotheeast/package.json`:
}
```
- [ ] **Step 2: Add `build-assets` target to Makefile**
- [x] **Step 2: Add `build-assets` target to Makefile**
Add after the existing `build:` target in `Makefile`:
@@ -90,7 +90,7 @@ build-assets:
sh -c "npm install && npm run build"
```
- [ ] **Step 3: Add node_modules to user/ gitignore**
- [x] **Step 3: Add node_modules to user/ gitignore**
Add to `user/.gitignore`:
@@ -98,7 +98,7 @@ Add to `user/.gitignore`:
/themes/intotheeast/node_modules/
```
- [ ] **Step 4: Create placeholder source files so the build has something to process**
- [x] **Step 4: Create placeholder source files so the build has something to process**
Create `user/themes/intotheeast/js/src/main.js`:
```javascript
@@ -110,7 +110,7 @@ Create `user/themes/intotheeast/js/src/map.js`:
// placeholder — replaced in Task 4
```
- [ ] **Step 5: Run the build and verify it completes**
- [x] **Step 5: Run the build and verify it completes**
```bash
make build-assets
@@ -122,7 +122,7 @@ ls user/themes/intotheeast/js/main.js
ls user/themes/intotheeast/js/map.js
```
- [ ] **Step 6: Commit**
- [x] **Step 6: Commit**
```bash
git -C user add themes/intotheeast/package.json themes/intotheeast/package-lock.json themes/intotheeast/js/src/main.js themes/intotheeast/js/src/map.js .gitignore
@@ -147,7 +147,7 @@ Write the full `js/src/main.js`. This is the single source of truth for all dupl
- `css-compiled/main.css` — PhotoSwipe CSS + @font-face rules for DM Sans variable + DM Serif Display
- `fonts/*.woff2` — copied from @fontsource packages by esbuild
- [ ] **Step 1: Write js/src/main.js**
- [x] **Step 1: Write js/src/main.js**
Replace `user/themes/intotheeast/js/src/main.js` with:
@@ -407,7 +407,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
```
- [ ] **Step 2: Run build**
- [x] **Step 2: Run build**
```bash
make build-assets
@@ -422,7 +422,7 @@ ls user/themes/intotheeast/fonts/
`fonts/` should contain woff2 files from @fontsource packages.
- [ ] **Step 3: Verify font output in CSS**
- [x] **Step 3: Verify font output in CSS**
```bash
grep '@font-face' user/themes/intotheeast/css-compiled/main.css | head -5
@@ -430,7 +430,7 @@ grep '@font-face' user/themes/intotheeast/css-compiled/main.css | head -5
Expected: multiple `@font-face` rules referencing `../fonts/*.woff2` paths.
- [ ] **Step 4: Commit**
- [x] **Step 4: Commit**
```bash
git -C user add themes/intotheeast/js/src/main.js themes/intotheeast/js/main.js themes/intotheeast/css-compiled/main.css themes/intotheeast/fonts/
@@ -452,7 +452,7 @@ Move `parseGpxFiles` from `trip.html.twig` into the shared utility and expose `h
- `MapUtils.haversineKm(lat1, lng1, lat2, lng2)` → `number` (km)
- `MapUtils.parseGpxFiles(urls, callback)` — `urls: string[]`, `callback({ distance, eleGain, eleLoss, highest, lowest, movingTime, avgSpeed } | { error: string })` → `void`
- [ ] **Step 1: Add parseGpxFiles function to maplibre-utils.js**
- [x] **Step 1: Add parseGpxFiles function to maplibre-utils.js**
In `user/themes/intotheeast/js/maplibre-utils.js`, add the following block immediately before the `global.MapUtils = {` line (currently line 333):
@@ -545,7 +545,7 @@ In `user/themes/intotheeast/js/maplibre-utils.js`, add the following block immed
}
```
- [ ] **Step 2: Add haversineKm and parseGpxFiles to MapUtils exports**
- [x] **Step 2: Add haversineKm and parseGpxFiles to MapUtils exports**
Find the `global.MapUtils = {` block (currently the last block in the file) and add both new entries:
@@ -564,7 +564,7 @@ Find the `global.MapUtils = {` block (currently the last block in the file) and
};
```
- [ ] **Step 3: Commit**
- [x] **Step 3: Commit**
```bash
git -C user add themes/intotheeast/js/maplibre-utils.js
@@ -589,7 +589,7 @@ Write `js/src/map.js` to bundle MapLibre GL, toGeoJSON, and maplibre-utils as a
- `window.toGeoJSON` — toGeoJSON converter
- `window.MapUtils` — all MapUtils functions (set by maplibre-utils.js side effect)
- [ ] **Step 1: Write js/src/map.js**
- [x] **Step 1: Write js/src/map.js**
Replace `user/themes/intotheeast/js/src/map.js` with:
@@ -605,7 +605,7 @@ window.maplibregl = maplibregl;
window.toGeoJSON = toGeoJSON;
```
- [ ] **Step 2: Run build**
- [x] **Step 2: Run build**
```bash
make build-assets
@@ -619,7 +619,7 @@ ls user/themes/intotheeast/css-compiled/map.css
`css-compiled/map.css` should be non-empty (~100KB+) as it contains full MapLibre GL styles.
- [ ] **Step 3: Commit**
- [x] **Step 3: Commit**
```bash
git -C user add themes/intotheeast/js/src/map.js themes/intotheeast/js/map.js themes/intotheeast/css-compiled/map.css
@@ -639,7 +639,7 @@ Register the universal bundle via Grav's Asset Manager, remove Google Fonts exte
**Interfaces:**
- Produces: `{% block map_assets %}{% endblock %}` — filled by trip.html.twig, feed-map.html.twig, map.html.twig in later tasks
- [ ] **Step 1: Update base.html.twig**
- [x] **Step 1: Update base.html.twig**
Replace the entire file content of `user/themes/intotheeast/templates/partials/base.html.twig` with:
@@ -683,7 +683,7 @@ Key changes from original:
- Removed the `<script>` photo strip block (lines 30–73) — now in `js/main.js`
- Added `{% block map_assets %}{% endblock %}` before `{{ assets.js('bottom')|raw }}`
- [ ] **Step 2: Remove Google Fonts @import from style.css if present**
- [x] **Step 2: Remove Google Fonts @import from style.css if present**
Check whether `css/style.css` contains a Google Fonts import:
@@ -693,13 +693,13 @@ grep -n 'googleapis\|fonts.g' user/themes/intotheeast/css/style.css
If any line is found, remove it. The font-family declarations using `--font-display` and `--font-ui` stay unchanged — they reference the CSS custom properties defined in `tokens.css`, which will work with the self-hosted fonts in `css-compiled/main.css`.
- [ ] **Step 3: Load the dev server and verify the page renders**
- [x] **Step 3: Load the dev server and verify the page renders**
Open `http://localhost:8081` in a browser. The page should load with correct fonts (DM Sans for body, DM Serif Display for headings). Open browser DevTools → Network tab → filter by "google" — no requests to `fonts.googleapis.com` or `fonts.gstatic.com` should appear.
If fonts look wrong, check that `css-compiled/main.css` is served by opening `http://localhost:8081/user/themes/intotheeast/css-compiled/main.css`.
- [ ] **Step 4: Commit**
- [x] **Step 4: Commit**
```bash
git -C user add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css
@@ -722,7 +722,7 @@ This is the largest template change. Remove all duplicated JS blocks, CDN tags,
- `window.MapUtils.haversineKm(lat1, lng1, lat2, lng2)` — from map bundle (Task 3)
- `window.scrollama` — from `js/main.js` (Task 2, though not used on this page)
- [ ] **Step 1: Remove the CDN script/link tags and PhotoSwipe CSS link**
- [x] **Step 1: Remove the CDN script/link tags and PhotoSwipe CSS link**
Remove these lines from `trip.html.twig`:
- Line 4: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">`
@@ -734,7 +734,7 @@ Remove these lines from `trip.html.twig`:
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
```
- [ ] **Step 2: Add map_assets block immediately after `{% block content %}`**
- [x] **Step 2: Add map_assets block immediately after `{% block content %}`**
After the opening `{% block content %}` line, add:
@@ -745,7 +745,7 @@ After the opening `{% block content %}` line, add:
{% endblock %}
```
- [ ] **Step 3: Remove the duplicated JS blocks**
- [x] **Step 3: Remove the duplicated JS blocks**
Remove the following `<script>` blocks entirely from `trip.html.twig`. These are now handled by `js/main.js`:
@@ -756,7 +756,7 @@ Remove the following `<script>` blocks entirely from `trip.html.twig`. These are
Note: the `makePanelToggle` code lives *inside* the GPX stats IIFE (which stays) — that is handled in Step 5, not here.
- [ ] **Step 4: Update the GPX stats block to use MapUtils**
- [x] **Step 4: Update the GPX stats block to use MapUtils**
In the remaining GPX stats IIFE (the block starting with `(function() {` that references `HAS_GPX`, `parseGpxFiles`, and `haversineKm`):
@@ -803,7 +803,7 @@ Replace with:
);
```
- [ ] **Step 5: Remove the makePanelToggle function from the GPX stats IIFE**
- [x] **Step 5: Remove the makePanelToggle function from the GPX stats IIFE**
Inside the GPX stats IIFE, find and remove:
- The `makePanelToggle` function definition
@@ -812,7 +812,7 @@ Inside the GPX stats IIFE, find and remove:
These are now handled by `initPanelToggles()` in `main.js`.
- [ ] **Step 6: Open the trip page and verify all features**
- [x] **Step 6: Open the trip page and verify all features**
Open `http://localhost:8081/trips/japan-korea-2026` (or the current active trip URL). Verify:
- Map loads and markers are visible
@@ -827,7 +827,7 @@ Open `http://localhost:8081/trips/japan-korea-2026` (or the current active trip
Open DevTools → Network tab → reload. Filter by "cdn.jsdelivr" — zero results expected.
- [ ] **Step 7: Commit**
- [x] **Step 7: Commit**
```bash
git -C user add themes/intotheeast/templates/trip.html.twig
@@ -845,7 +845,7 @@ Remove CDN tags from `feed-map.html.twig`, `map.html.twig`, and `story.html.twig
- Modify: `user/themes/intotheeast/templates/map.html.twig`
- Modify: `user/themes/intotheeast/templates/story.html.twig`
- [ ] **Step 1: feed-map.html.twig — remove CDN tags, add map_assets block**
- [x] **Step 1: feed-map.html.twig — remove CDN tags, add map_assets block**
In `user/themes/intotheeast/templates/partials/feed-map.html.twig`:
@@ -865,7 +865,7 @@ Add the map assets block at the very top of the `{% if map_entries|length > 0 %}
{% endblock %}
```
- [ ] **Step 2: map.html.twig — remove CDN tags, add map_assets block**
- [x] **Step 2: map.html.twig — remove CDN tags, add map_assets block**
In `user/themes/intotheeast/templates/map.html.twig`:
@@ -885,7 +885,7 @@ Add after `{% block content %}`:
{% endblock %}
```
- [ ] **Step 3: story.html.twig — remove Scrollama CDN tag**
- [x] **Step 3: story.html.twig — remove Scrollama CDN tag**
In `user/themes/intotheeast/templates/story.html.twig`:
@@ -896,7 +896,7 @@ Remove line 72:
Scrollama is now bundled in `main.js` and exposed as `window.scrollama`. The existing inline script that calls `scrollama()` will work unchanged.
- [ ] **Step 4: Commit**
- [x] **Step 4: Commit**
```bash
git -C user add themes/intotheeast/templates/partials/feed-map.html.twig themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/story.html.twig
@@ -909,7 +909,7 @@ git -C user commit -m "refactor: remove CDN tags from feed-map, map, story templ
**Files:** None modified. Verification only.
- [ ] **Step 1: Verify zero external requests on the trip page**
- [x] **Step 1: Verify zero external requests on the trip page**
Open `http://localhost:8081/trips/japan-korea-2026`. Open DevTools → Network tab → reload.
@@ -918,7 +918,7 @@ Check these domains appear zero times:
- `fonts.googleapis.com`
- `fonts.gstatic.com`
- [ ] **Step 2: Verify trip page features**
- [x] **Step 2: Verify trip page features**
- Map renders with markers and GPX track
- Marker click scrolls to entry card and flashes it
@@ -932,7 +932,7 @@ Check these domains appear zero times:
- Back-to-top button appears after scrolling down; click scrolls to top
- Journal photo strip: swipe/scroll dots sync; ‹ › buttons navigate; expand button opens PhotoSwipe; arrow keys advance; click outside closes
- [ ] **Step 3: Verify story page**
- [x] **Step 3: Verify story page**
Open a story URL (e.g. `http://localhost:8081/trips/italy-2026-demo/stories/sorano-rock-and-time`):
- Hero image loads
@@ -942,7 +942,7 @@ Open a story URL (e.g. `http://localhost:8081/trips/italy-2026-demo/stories/sora
- If page has `.scrolly` sections: they animate on scroll
- No console errors
- [ ] **Step 4: Check built file sizes**
- [x] **Step 4: Check built file sizes**
```bash
ls -lh user/themes/intotheeast/js/main.js user/themes/intotheeast/js/map.js user/themes/intotheeast/css-compiled/main.css user/themes/intotheeast/css-compiled/map.css
@@ -956,7 +956,7 @@ Rough expected sizes (minified):
If `map.js` is unexpectedly small (<100 KB), MapLibre GL may not have bundled — check that `import maplibregl from 'maplibre-gl'` is in `js/src/map.js`.
- [ ] **Step 5: Final commit**
- [x] **Step 5: Final commit**
```bash
git -C user add -A