docs: the landing page on a phone, and two stale instructions in the plan
Review findings on PR #47. A 120-column cast shrunk into a 390px viewport computed a **4.83px** terminal font — measured in Chromium against the assembled tree. That was tolerable when the landing page sat at `/landing/`; since the user's ruling it is the first thing a phone visitor sees. Under 900px each player now scrolls sideways at a legible size instead: **11.95px**, measured the same way, with the page's own `scrollWidth` still equal to its `clientWidth` — the overflow is contained inside the player, so there is no horizontal PAGE scroll. That takes `docs/index.html` to 209 lines, past improvise-e61's "under 200". The criterion is reinterpreted rather than crammed to fit, and said so on the ticket: the number was a proxy for single file, vanilla, no build step, no framework, all of which hold. A limit met by one line and checked by nothing was never really met. `context/plan.md` carried two instructions that this PR made actively misleading: - §2.4 still told a re-recorder to use 100x30. That is the instruction whoever picks up improvise-2oxt would follow, and it disagrees with both the existing casts and the player. It now says 120x37, and says the two must be changed together. - §4.2 still said to set Pages to branch `main` / folder `/docs`. That used to fail loudly — there was no `docs/index.html`, so it was a 404 — and since improvise-e61 it fails QUIETLY: the landing page renders perfectly and its call to action 404s, because `app/` exists only in the assembled tree. It now says GitHub Actions, and says why the other setting is worse than it looks. Verified: 6/6 harness shell specs still pass against the assembled tree, the four casts still play 37 lines each at the root, and the call to action still resolves 200. cargo test 1311, both comment checkers clean. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
+7
-3
@@ -175,7 +175,7 @@ Generate the GIF by running `nix develop --command vhs docs/demo.tape`. Iterate
|
||||
|
||||
Asciinema produces `.cast` files that the asciinema-player JS widget can replay in a browser, with selectable text and pixel-perfect terminal rendering. These will be embedded in the GitHub Pages landing page in Phase 4.
|
||||
|
||||
Before recording, set the terminal to exactly 100 columns by 30 rows: `stty cols 100 rows 30` (or resize the terminal window manually if `stty` doesn't take). This matters because the asciinema player renders at the recorded dimensions and a wrong size will look broken on the landing page.
|
||||
Before recording, set the terminal to match what `docs/index.html` declares. That is **120 columns by 37 rows** today, not the 100x30 this plan originally said: the casts that were actually recorded are 120x37, and the landing page follows the recordings rather than the other way round, because a 30-row player clips the bottom seven rows of a 37-row cast — which is where the tile bar and the status line are. `stty cols 120 rows 37` (or resize the window manually if `stty` doesn't take). Whichever geometry is used, the two must agree: the player renders at the size it is told and a mismatch looks broken. If a re-recording changes it, change `cols`/`rows` in `docs/index.html` in the same commit (improvise-2oxt).
|
||||
|
||||
Record four casts under `docs/casts/`:
|
||||
|
||||
@@ -235,11 +235,15 @@ Vanilla HTML, single file, under 200 lines. No framework, no build step. Dark ba
|
||||
|
||||
Section structure: title and one-line tagline → "Reassign axes on the fly" with the pivot cast → "Drill into aggregated cells" with the drill cast → "Formulas over dimensions" with the formulas cast → "Import a CSV" with the import cast → "Get it" with the install commands and a GitHub link.
|
||||
|
||||
Each cast should be embedded with `AsciinemaPlayer.create()` configured with `rows: 30, cols: 100, theme: 'monokai', autoPlay: false, loop: true`.
|
||||
Each cast should be embedded with `AsciinemaPlayer.create()` configured with `theme: 'monokai', autoPlay: false, loop: true`, and `cols`/`rows` set to the casts' own geometry — 120x37 as recorded, not the 100x30 this plan first specified. See 2.4.
|
||||
|
||||
### 4.2 Enable GitHub Pages
|
||||
|
||||
In the GitHub repo settings, enable Pages with source set to the `main` branch and folder set to `/docs`. Verify the site is live at `https://<user>.github.io/improvise/` within a few minutes of pushing.
|
||||
**Not branch-and-folder.** Pages is served from the GitHub Actions artifact that `pages-build` / `pages-deploy` publish in `.github/workflows/ci.yml` (Settings → Pages → Source: GitHub Actions), and the tree is assembled by `web/assemble.sh`: `docs/index.html` and `docs/casts/` at the root, the browser app under `app/`.
|
||||
|
||||
Setting the source to branch `main` / folder `/docs` instead would serve `docs/` raw. That used to fail loudly — there was no `docs/index.html`, so it was a 404 — and since improvise-e61 it fails **quietly**: the landing page renders perfectly and its "Run improvise in your browser" link 404s, because `app/` exists only in the assembled tree. A page that looks right with a dead front door is worse than a page that is missing.
|
||||
|
||||
Verify the site is live at `https://<user>.github.io/improvise/` within a few minutes of pushing, and click through to the app rather than only loading the root.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -95,6 +95,16 @@
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* A 120-column cast shrunk to a phone gives a ~5px font. Scroll it
|
||||
sideways at a legible size instead of rendering it unreadable. */
|
||||
@media (max-width: 900px) {
|
||||
.player {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.player > * {
|
||||
min-width: 880px;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--rule);
|
||||
|
||||
Reference in New Issue
Block a user