diff --git a/docs/working/plans/2026-06-22-asset-pipeline.md b/docs/working/plans/2026-06-22-asset-pipeline.md index d5aac36..c20e8a9 100644 --- a/docs/working/plans/2026-06-22-asset-pipeline.md +++ b/docs/working/plans/2026-06-22-asset-pipeline.md @@ -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 ` ``` -- [ ] **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 `