wtclaude
e71ff4acd4
All checks were successful
PR checks / checks (pull_request) Successful in 9m36s
PLAN.md §13 phase 10, with four decisions of record — D47-D50, taking the count
to fifty. Three were straightforward; the CSP turned into the phase's real work,
because the thing meant to be a configuration flag was broken in a dependency and
broken silently.
D47 — search reaches the marketing pages, and the header gets a box.
Base.astro marks its <main> as a Pagefind body, so all ten join the index the
docs already query, and Search.astro opens it in a <dialog>. Nothing is fetched
until the dialog is opened (the bundle is 120 kB and these pages otherwise ship
almost no JavaScript). Pagefind titles a result from the first <h1>, and these
pages have editorial ones — "The app for a deployment you already use" — so the
index is given the page's short name instead. applyBrand.mjs now re-indexes after
a rewrite, closing a note phase 2 left for this phase.
D48 — the CSP is a real response header, sent by the container. Not a <meta>,
which ignores frame-ancestors, and not advice for someone's reverse proxy, which
puts the strictest promise in §6 outside what this repo tests. Three things
fought it, all the same shape — correct build, broken page, no error:
* Astro does not hash <script is:inline>, and Starlight ships six per docs
page, so the first build with CSP on had a strict header and a dead theme
switcher. The hashes are now generated into src/config/cspHashes.mjs and
checkCsp.mjs verifies every inline block against its own page's policy.
* Expressive Code writes ~3,700 inline style ATTRIBUTES, which cannot be
hashed, hence style-src-attr 'unsafe-inline' — scoped to that directive, so
script-src is untouched.
* @astrojs/node matched a request to a policy with pathname.includes(), a
substring test: /modules/ was served /docs/modules/building-a-module's
policy and rendered with its own stylesheet refused. scripts/serve.mjs keeps
the same _headers.json and matches by equality; test/headers.test.mjs starts
the server and reads the responses, because nothing that reads dist/ can see
this.
D49 — robots.txt allows everything and names the sitemap (there was no way to
find it: no robots.txt, and D9 rules out a search console). D50 — Organization
and SoftwareApplication, no ratings and no docs-wide Article markup.
checkA11y.mjs is the eleventh check: seven structural rules over all fifty pages,
verified by breaking each in turn. The walk at 390/768/1280 found no overflow
anywhere, the CSP violations above, a 17x17 consent checkbox (WCAG 2.2 SC 2.5.8
wants 24), and a skip link that moved the scroll but not the focus.
npm run verify is green: fourteen steps, both test suites, all eleven checks.
Co-Authored-By: Claude <noreply@anthropic.com>
126 lines
5.4 KiB
Plaintext
126 lines
5.4 KiB
Plaintext
---
|
|
import '../styles/tokens.css';
|
|
import '../styles/global.css';
|
|
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import { brand } from '../lib/brand.mjs';
|
|
import { token } from '../lib/tokens.mjs';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
/** Suppress the site name suffix — the homepage sets its own full title. */
|
|
bareTitle?: boolean;
|
|
}
|
|
|
|
const { title, description, bareTitle = false } = Astro.props;
|
|
|
|
const fullTitle = bareTitle ? title : `${title} — ${brand.siteName}`;
|
|
const canonical = new URL(Astro.url.pathname, Astro.site);
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>{fullTitle}</title>
|
|
<meta name="description" content={description} />
|
|
<link rel="canonical" href={canonical} />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content={brand.siteName} />
|
|
<meta property="og:title" content={fullTitle} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:url" content={canonical} />
|
|
<meta property="og:image" content={new URL('/brand/og-image.png', Astro.site)} />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:image:alt" content={`${brand.siteName} — ${brand.tagline}`} />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
<!--
|
|
No analytics, no third-party requests, no cookie banner (D9), and the fonts are
|
|
self-hosted (§11) — so there is nothing here to preconnect to, and §6's
|
|
`default-src 'self'` holds with no exception to argue about. The CSP header itself
|
|
is set at the adapter in phase 10; this comment is here so nobody adds a CDN link
|
|
in the meantime and quietly breaks the promise.
|
|
-->
|
|
<meta name="theme-color" content={token('--bg')} />
|
|
|
|
<!--
|
|
Icons, like every other brand asset, come from the mount (§7). Only `favicon.ico` is
|
|
strictly needed — browsers ask for it at that exact path whether or not a page links
|
|
it, which is why the route derives one rather than 404ing — but naming the PNG and
|
|
the apple-touch icon explicitly means a device picks the size it wants instead of
|
|
downscaling a 48px .ico.
|
|
|
|
None of these files has to exist in `brand-default/`. They are derived on request
|
|
from whichever `logo.png` is in force, so an operator replaces exactly one file.
|
|
-->
|
|
<link rel="icon" href="/brand/favicon.ico" sizes="16x16 32x32 48x48" />
|
|
<link rel="icon" href="/brand/favicon-32.png" type="image/png" sizes="32x32" />
|
|
<link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
|
|
<!--
|
|
Last in the head, and that position is the mechanism (§7). This is the operator's
|
|
stylesheet: it only ever redefines custom properties, and a custom property
|
|
redefined on `:root` wins by being later, not by being more specific. Moving this
|
|
above the site's own stylesheet would silently turn every override into a no-op.
|
|
|
|
The stock copy declares nothing, so this costs one 304 and changes no pixels until
|
|
somebody mounts a real one.
|
|
-->
|
|
<link rel="stylesheet" href="/brand/theme.css" />
|
|
|
|
<slot name="head" />
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip-link" href="#main">Skip to content</a>
|
|
|
|
<div class="site">
|
|
<Header />
|
|
|
|
<!--
|
|
`data-pagefind-body` is what puts the marketing pages into the search index the
|
|
documentation already had (D47). It is on `<main>` and not on `<body>` deliberately:
|
|
the header and footer are on all ten pages, so indexing them would make every page
|
|
a result for "Discord", "Privacy" and the product's own name.
|
|
|
|
Pagefind indexes a page only if it finds this attribute, which is why the docs were
|
|
the whole index before now — Starlight marks its own content and nothing else did.
|
|
|
|
The explicit title is worth the second attribute. Pagefind titles a result from the
|
|
first <h1> it finds, and these pages have EDITORIAL h1s — /app/'s is "The app for a
|
|
deployment you already use", /terms/'s is "Short, and only about what we run". Read
|
|
on the page under an eyebrow that says "Android app" those are right; read as four
|
|
rows in a result list they are unscannable, and the first walk of this search turned
|
|
up exactly that. The page's short name — the one in the nav and the browser tab —
|
|
is what a reader is looking for in a list.
|
|
-->
|
|
<!--
|
|
`tabindex="-1"` is what makes the skip link above actually skip. Following it moves
|
|
the SCROLL to this element, but a container is not focusable, so focus stays where
|
|
it was; Chrome papers over that by moving its sequential-navigation point, and not
|
|
every browser or screen reader does. `-1` makes the element focusable by script and
|
|
fragment only — never by Tab — so the link lands here for everyone and the tab order
|
|
is unchanged. (Negative, so it is not the positive `tabindex` checkA11y refuses.)
|
|
-->
|
|
<main
|
|
id="main"
|
|
tabindex="-1"
|
|
data-pagefind-body
|
|
data-pagefind-meta={`title:${bareTitle ? brand.siteName : title}`}
|
|
>
|
|
<slot />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
</body>
|
|
</html>
|