wtclaude
de9d25bbe7
All checks were successful
PR checks / checks (pull_request) Successful in 1m26s
The checks were green before this phase started and are green now. What found anything was the part no script does: fifty pages at three widths in a real browser, a signup walked against its store, and a full brand mount applied and restarted. D51 — the chrome and the head follow the mount; the consent sentence does not. With a complete brand.json mounted, forty-nine pages came back rebranded and /beta did not. applyBrand.mjs rewrites files in dist/client and /beta renders per request, so its HTML never exists as a file to rewrite; liveBrand() was there for exactly that and was used for betaOptInUrl alone. Everything around the form — title, OG tags, header lockup, footer Source and Discord links — came from the shared chrome, and the shared chrome was baked. renderBrand() picks by Astro.isPrerendered, in one place, so the other forty-nine keep taking the value the boot rewrite will replace. CONSENT_TEXT stays a constant: it is stored verbatim in a person's row, so following a mounted name would change the recorded text of a consent already given. D52 — the documentation half gets phase 10's skip-link fix. Starlight's skip link targets the page <h1>, which is no more focusable than the <main> phase 10 fixed, so following it moved the viewport and not the focus on forty pages. A PageTitle override adds tabindex="-1". D53 — no twelfth check. The external-link sweep (73 of 74 alive) and the brand-mount walk stay throwaway scripts: one would make the build depend on other people's uptime and the other needs Chrome on the runner. Also recorded and deliberately not fixed: Starlight's heading anchor links measure under 24px at 390, and are exempt under SC 2.5.8's Equivalent clause because the mobile table of contents links to every one of the same anchors. npm run verify green — fourteen steps, both suites, all eleven checks. Co-Authored-By: Claude <noreply@anthropic.com>
75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
---
|
|
import Search from './Search.astro';
|
|
import { renderBrand } from '../lib/brand.mjs';
|
|
|
|
/**
|
|
* The marketing header. The docs get Starlight's own header, themed to match in
|
|
* `src/styles/starlight.css` — one site, two chromes, the same lockup.
|
|
*
|
|
* The mark is the product's real emblem (D11), served from the brand mount rather than
|
|
* imported: the same artwork as the website's own logo and the Android launcher icon, so
|
|
* the three surfaces read as one product. Phase 1's placeholder glyph is gone.
|
|
*
|
|
* It is an `<img>`, not an inline SVG, and that costs something worth naming. The emblem is
|
|
* raster illustration, so a mounted `theme.css` cannot recolour it the way it recolours
|
|
* everything else — replacing the mark means replacing `logo.png`. That is the trade D11
|
|
* makes: a mark that already carries recognition, against a simpler one that would follow
|
|
* the palette.
|
|
*
|
|
* The nav names the routes §10 specifies. Phase 3 onwards fills them in; a link added
|
|
* here before its page exists fails `checkLinks.mjs`, which is the order we want.
|
|
*/
|
|
const { pathname } = Astro.url;
|
|
|
|
// `/beta` renders per request, so the lockup name it gets must read the mount rather than
|
|
// the value baked at build time. See `renderBrand` in src/lib/brand.mjs (phase 11).
|
|
const brand = renderBrand(Astro);
|
|
|
|
const links = [
|
|
{ href: '/features/', label: 'Features' },
|
|
{ href: '/docs/', label: 'Docs' },
|
|
{ href: '/app/', label: 'App' },
|
|
{ href: '/community/', label: 'Community' },
|
|
];
|
|
|
|
const isCurrent = (href: string) =>
|
|
href === '/' ? pathname === '/' : pathname.startsWith(href);
|
|
---
|
|
|
|
<header class="site-header">
|
|
<div class="page site-header__inner">
|
|
<a class="brand-lockup" href="/">
|
|
<img
|
|
class="brand-lockup__mark"
|
|
src="/brand/logo-40.webp"
|
|
srcset="/brand/logo-40.webp 1x, /brand/logo-80.webp 2x, /brand/logo-120.webp 3x"
|
|
width="40"
|
|
height="40"
|
|
alt=""
|
|
fetchpriority="high"
|
|
/>
|
|
<span class="brand-lockup__name">{brand.siteName}</span>
|
|
</a>
|
|
|
|
<nav class="site-nav" aria-label="Primary">
|
|
{
|
|
links.map((link) => (
|
|
<a href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
|
|
{link.label}
|
|
</a>
|
|
))
|
|
}
|
|
</nav>
|
|
|
|
<Search />
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
/* `alt=""` above is deliberate: the mark sits beside the site name in the same link, so
|
|
announcing it would make a screen reader say the product's name twice. */
|
|
.brand-lockup__mark {
|
|
display: block;
|
|
}
|
|
</style>
|