From afb6e69e197f7ecb7f07678a94ad5fa429e4ebe0 Mon Sep 17 00:00:00 2001 From: JP Hastings-Spital Date: Thu, 20 Aug 2026 18:06:25 +0100 Subject: [PATCH] feat: equal optical height for the home page's two logo marks (ATFS-nx4w) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both marks' viewBoxes were square and already rendered at the same 23.5x23.5px box, so width/height: 1.4em changed nothing. The real cause: the Docker artwork only fills ~49.7% of its own viewBox height (a wide, short mark with vertical whitespace above and below), while the Pi silhouette fills the full height of its own. Tightens each viewBox to its measured artwork bounding box (path data untouched) and switches .run .mark to height-driven sizing with width: auto, so both marks now share one visible height and take their natural width — the Docker mark ends up noticeably wider than the Pi's, which is the correct consequence of equal height for a wide-aspect mark. Also fixes .run-note's padding-left, which assumed both marks were a 1.4em square: it used em inside a rule with a smaller local font-size than the row's, a latent mismatch that became visible once the Pi mark stopped being square. Rewritten in rem so the note still lines up under the SBC row's label text. --- ...lient-document-for-the-whole-site-equal.md | 31 +++++++++++++++---- site/index.html | 22 ++++++++++--- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/.beans/ATFS-nx4w--one-oauth-client-document-for-the-whole-site-equal.md b/.beans/ATFS-nx4w--one-oauth-client-document-for-the-whole-site-equal.md index 9b60297..0655290 100644 --- a/.beans/ATFS-nx4w--one-oauth-client-document-for-the-whole-site-equal.md +++ b/.beans/ATFS-nx4w--one-oauth-client-document-for-the-whole-site-equal.md @@ -1,11 +1,11 @@ --- # ATFS-nx4w title: One OAuth client document for the whole site; equal logo heights on the home page -status: in-progress +status: completed type: task priority: normal created_at: 2026-08-20T16:59:48Z -updated_at: 2026-08-20T17:00:29Z +updated_at: 2026-08-20T17:06:13Z parent: ATFS-qchs --- @@ -27,10 +27,10 @@ Do NOT rebase, push, or open a PR — adding two commits to the existing feat/si - [x] web/home/src/lib/session.js points at the new filename; comment rewritten (the /downloads/ distinction is gone) - [x] hack/deploy-site.sh's required-files check and comment updated - [x] Sweep the repo for any other client-metadata.json reference — CLAUDE.md and README.md never named the file directly (nothing to change there); updated the one open, forward-looking bean reference (ATFS-5gqb's todo item); left archived beans (ATFS-t7d4, ATFS-vw63, ATFS-nc7y) and ATFS-ji1d's completed Summary of Changes alone, since those describe history as it actually happened -- [ ] Tighten both logo viewBoxes in site/index.html to their artwork bounding boxes -- [ ] .run .mark: height: 1.4em; width: auto; flex: none, with a comment on why -- [ ] make web && make check pass; cd web/setup && vp run check clean -- [ ] git status clean of build output after committing +- [x] Tighten both logo viewBoxes in site/index.html to their artwork bounding boxes (Docker 2 8 28 16, Pi -11 0 267 327) +- [x] .run .mark: height: 1.4em; width: auto; flex: none, with a comment on why — also fixed .run-note's padding-left, which assumed both marks were 1.4em square (an em-in-wrong-font-context bug, pre-existing but now visible), so it still lines up under the SBC row's label text +- [x] make web && make check pass; cd web/setup && vp run check clean +- [x] git status clean of build output after committing @@ -39,3 +39,22 @@ Do NOT rebase, push, or open a PR — adding two commits to the existing feat/si - **Identity change, deliberately accepted.** `client_id` changing from `https://atfs.dev/client-metadata.json` to `https://atfs.dev/oauth-client-metadata.json` is a new OAuth client identity as far as any PDS/authorization-server is concerned — any consent grants already made against the old client_id (there won't be many; the site is new) don't carry over, and whoever signed in before will be asked to re-authorise. Accepted. - **Why two `redirect_uris` is correct, not accidental.** Verified by reading the pinned `@atproto/oauth-client-browser`'s bundled output (site/login/login.js, built from web/home): `BrowserOAuthClient`'s redirect selection matches the declared redirect_uri whose origin AND pathname equal the current page, so the home page (served at `/`) resolves to the `https://atfs.dev/` entry and the setup flow (served at `/downloads/`) resolves to the `https://atfs.dev/downloads/` entry, from the same client document. Order doesn't matter to that match, but neither entry is removable while both pages sign in. - **The bundled OAuth library requires this exact filename.** site/login/login.js's bundled `@atproto/oauth-types`'s client-id-metadata-document validator hard-rejects any `client_id` URL whose pathname isn't exactly `/oauth-client-metadata.json` (own error message: "ClientID must be \"/oauth-client-metadata.json\""). The old `site/client-metadata.json` name would never have passed that check — this rename isn't just a naming cleanup, it fixes an OAuth client that couldn't have validated in the browser at all. + + + +(Commit 1 verified: make web, make check, vp run check all clean; built site/downloads/ carries no client-metadata.json.) + + + +## Summary of Changes + +**Commit 1 — one OAuth client for the whole site.** `site/client-metadata.json` renamed to `site/oauth-client-metadata.json` (git mv) with `client_id: https://atfs.dev/oauth-client-metadata.json` and two `redirect_uris` (`https://atfs.dev/`, `https://atfs.dev/downloads/`); `web/setup/public/client-metadata.json` deleted outright. `web/setup/src/lib/session.js` now resolves the client id as `new URL("/oauth-client-metadata.json", location.origin)` instead of a path relative to `location.href`, since the app is served from `/downloads/` but the document lives at the site root. `web/home/src/lib/session.js` updated to the new filename and the same origin-relative resolution, with its comment rewritten — the old "site root's own vs. /downloads/'s" distinction is gone since it's the same document either way. `hack/deploy-site.sh`'s required-tree check and neighbouring comment updated. Swept the repo for other references: CLAUDE.md and README.md never named the file directly; the one open, forward-looking bean checklist item (ATFS-5gqb) was updated; archived beans and ATFS-ji1d's already-completed Summary of Changes were left alone as accurate history. Confirmed by reading the pinned `@atproto/oauth-client-browser`'s bundled output (site/login/login.js) that this is correct on two counts: `BrowserOAuthClient`'s redirect selection matches on origin+pathname, so one client with two redirect_uris is exactly the right shape for two same-origin pages signing in independently; and the bundled `@atproto/oauth-types` validator hard-requires the client_id's pathname to be exactly `/oauth-client-metadata.json` — the old name could never have validated in the browser. Noted in the bean: this changes the OAuth client's identity, so any existing consent grants don't carry over (accepted; the site is new). + +**Commit 2 — equal optical height for the two home-page logos.** Both `site/index.html` mark viewBoxes were square and already rendered at the same pixel box, so `width/height: 1.4em` changed nothing — the Docker artwork only filled ~49.7% of its viewBox height (a wide, short mark with vertical whitespace) while the Pi filled 100%. Tightened each viewBox to its measured artwork bounding box (Docker `0 0 32 32` → `2 8 28 16`; Pi `-35.5 0 327 327` → `-11 0 267 327`; path data untouched) and changed `.run .mark` to `height: 1.4em; width: auto; flex: none` with a comment explaining why height drives sizing. Also fixed `.run-note`'s `padding-left`, which assumed both marks were a 1.4em square: it used `em` inside a rule whose own font-size (0.85rem) differs from the row's (1.05rem), a pre-existing mismatch that became visible once the Pi mark stopped being square — rewritten in `rem` (unaffected by the local font-size) so the note still lines up under the SBC row's label text. + +## Verification + +- Browser-verified (chrome-devtools, local static server): both marks measure the identical 23.5px height at the default viewport; Docker renders ~41px wide, Pi ~19px wide (matches the predicted ~2.5em vs ~1.1em). Checked in light mode, dark mode (`prefers-color-scheme`), and a 360px mobile viewport — the row's pre-existing `flex-wrap` still wraps the Docker code chip onto its own line at that width (unchanged from before this branch; not a regression). `.run-note`'s text start now measures within a fraction of a pixel of the SBC label's start. +- `export PATH="/opt/homebrew/bin:$PATH" && make web` and `make check` both pass (vet, vet-gosd, go test, test-oci, web unit tests, web build+bake). Built `site/downloads/` carries no `client-metadata.json`. +- `cd web/setup && vp run check`: clean (0 errors, 0 warnings). +- `git status`: clean of build output after each commit (site/downloads/, site/login/ stay gitignored). diff --git a/site/index.html b/site/index.html index c49cdc9..1c9ad54 100644 --- a/site/index.html +++ b/site/index.html @@ -266,8 +266,14 @@ } .run .mark { - width: 1.4em; + /* Height drives sizing, width flexes: the two marks' artwork fills + very different fractions of a square viewBox (a wide, short + whale vs. a tall, narrow Pi silhouette), so matching width/height + together would leave their actual ink at different optical + sizes. Equal height reads as equal size; the whale is simply + wider as a result. */ height: 1.4em; + width: auto; flex: none; } @@ -293,7 +299,15 @@ .run-note { margin: -0.35rem 0 0; - padding-left: calc(1.4em + 0.55rem); + /* Indents to sit under the SBC row's label text, not its icon. + The Pi mark is no longer a 1.4em square — it takes its natural + width at 1.4em height (1.4 × the row's 1.05rem font-size × + 267/327, the mark's viewBox aspect ratio; see .run .mark) — so + the indent tracks that width plus the row's own gap. Written in + rem, not em: this rule's own font-size (0.85rem) is smaller + than the row's, and an em here would resolve against THIS + font-size rather than the icon's. */ + padding-left: calc(1.2rem + 0.55rem); font-size: 0.85rem; color: var(--text-dim); } @@ -354,13 +368,13 @@

- + Docker: atcr.io/atfs.dev/atfs - + Single Board Computers Device not booting? See the setup docs. -- 2.51.2