fix(nav): keep sign-in and sign-up in the header without javascript #241

Sammanfogat

supernaut sammanfogade 1 incheckning från work/154 in i main

2026-09-21 08:16:20 +00:00

supernaut kommenterad

2026-09-20 22:30:54 +00:00

Ägare

With JavaScript disabled the header had no "Sign in" and no "Sign up". secondary-navigation.astro rendered <UserMenu server:defer> with an aria-hidden placeholder holding two empty spans, so the served HTML carried no links at all. The same hole opened with JavaScript on whenever the /_server-islands/UserMenu request failed.

The island is kept. Pages set public cache headers and the deferred island is what keeps a signed-in user's menu out of a shared cache.

Fix: the fallback renders UserMenu itself with a new anonymous prop that forces the signed-out branch before Astro.locals.user is read. No new component, no duplicated markup, and the old hand-tuned placeholder CSS is deleted. Net 45 lines removed, 9 added.

Verified against the served HTML, which is the only evidence that counts here:

/ carries href="/auth/login/" "Logga in" and href="/signup/" "Skapa konto" inside <nav class="user-menu" slot="fallback">.
/en/ carries /en/auth/login/ "Sign in" and /en/signup/ "Sign up".
/docs/faq/ carries the Swedish pair.
cache-control unchanged: public, max-age=300, s-maxage=3600 on /, public, max-age=86400, s-maxage=86400 on /docs/faq/. The body under those headers now only ever contains anonymous links.
Both the fallback <nav> and the resolved <nav> carry the same data-astro-cid scope, so the reserved box is generated by the identical component and CSS rather than approximated. user-menu-fallback no longer appears in the response.

pnpm lint, pnpm check and pnpm test (361 tests) pass.

One acceptance bullet is not met, and it may not be reachable

The issue asks for "no anonymous links flash first" for a signed-in user with JavaScript enabled. A server:defer fallback is in the initial HTML and stays visible until the island resolves, so any fallback with visible content will flash. The previous aria-hidden placeholder avoided that flash by carrying nothing, which is exactly the bug this fixes. The two bullets pull against each other.

This is untested against a real signed-in session because /auth/* is still a scaffold. Worth deciding before that lands: accept the flash, or find a mitigation. Everything else in the acceptance list is met.

Closes #154

With JavaScript disabled the header had no "Sign in" and no "Sign up". `secondary-navigation.astro` rendered `<UserMenu server:defer>` with an `aria-hidden` placeholder holding two empty spans, so the served HTML carried no links at all. The same hole opened with JavaScript on whenever the `/_server-islands/UserMenu` request failed. The island is kept. Pages set `public` cache headers and the deferred island is what keeps a signed-in user's menu out of a shared cache. Fix: the fallback renders `UserMenu` itself with a new `anonymous` prop that forces the signed-out branch before `Astro.locals.user` is read. No new component, no duplicated markup, and the old hand-tuned placeholder CSS is deleted. Net 45 lines removed, 9 added. Verified against the served HTML, which is the only evidence that counts here: - `/` carries `href="/auth/login/"` "Logga in" and `href="/signup/"` "Skapa konto" inside `<nav class="user-menu" slot="fallback">`. - `/en/` carries `/en/auth/login/` "Sign in" and `/en/signup/` "Sign up". - `/docs/faq/` carries the Swedish pair. - `cache-control` unchanged: `public, max-age=300, s-maxage=3600` on `/`, `public, max-age=86400, s-maxage=86400` on `/docs/faq/`. The body under those headers now only ever contains anonymous links. - Both the fallback `<nav>` and the resolved `<nav>` carry the same `data-astro-cid` scope, so the reserved box is generated by the identical component and CSS rather than approximated. `user-menu-fallback` no longer appears in the response. `pnpm lint`, `pnpm check` and `pnpm test` (361 tests) pass. ## One acceptance bullet is not met, and it may not be reachable The issue asks for "no anonymous links flash first" for a signed-in user with JavaScript enabled. A `server:defer` fallback is in the initial HTML and stays visible until the island resolves, so any fallback with visible content will flash. The previous `aria-hidden` placeholder avoided that flash by carrying nothing, which is exactly the bug this fixes. The two bullets pull against each other. This is untested against a real signed-in session because `/auth/*` is still a scaffold. Worth deciding before that lands: accept the flash, or find a mitigation. Everything else in the acceptance list is met. Closes #154

supernaut lade till 1 incheckning

2026-09-20 22:30:54 +00:00

fix(nav): keep sign-in and sign-up in the header without javascript

ci / ci (pull_request) Successful in 1m20s

Detaljer

3e994a3b0a

the server-island fallback for the user menu was an aria-hidden
placeholder with no links, so the header had no way to sign in or
sign up before javascript ran, or if the island request failed.

add an anonymous mode to UserMenu and use it as the fallback content
instead. it reuses the same nav.user-menu markup and styling as the
resolved menu, so the header height stays correct without a separate
placeholder, and the anonymous links are safe under the pages'
shared-cache headers.

supernaut tvångsskickade work/154 från 3e994a3b0a

ci / ci (pull_request) Successful in 1m20s

Detaljer

till 5533e1d672

ci / ci (pull_request) Successful in 1m25s

Detaljer

2026-09-21 06:50:55 +00:00

Jämför

supernaut sammanfogade incheckning 245016952f till main

2026-09-21 08:16:20 +00:00

supernaut tog bort grenen work/154

2026-09-21 08:16:21 +00:00