feat(polish): phase 10 — search, accessibility, SEO and a real CSP
All checks were successful
PR checks / checks (pull_request) Successful in 9m36s
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>
This commit is contained in:
@@ -9,7 +9,9 @@ import Base from '../layouts/Base.astro';
|
||||
---
|
||||
|
||||
<Base title="Page not found" description="That page does not exist on this site.">
|
||||
<section class="page notfound">
|
||||
<!-- The one page `Base`'s `data-pagefind-body` should not reach (D47): a search result
|
||||
reading "That page does not exist" would be a small cruelty. -->
|
||||
<section class="page notfound" data-pagefind-ignore>
|
||||
<p class="eyebrow">404</p>
|
||||
<h1>That page does not exist</h1>
|
||||
<p class="prose">
|
||||
|
||||
@@ -596,9 +596,13 @@ const formToken = issueFormToken();
|
||||
|
||||
.beta-form__consent input {
|
||||
flex: none;
|
||||
margin-top: 0.2rem;
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
/* 24px exactly — WCAG 2.2 SC 2.5.8's minimum target size, which this box missed at
|
||||
1.05rem (17px). It is the only control on the site a person has to hit precisely,
|
||||
and it is on the page a phone is most likely to arrive at, so the phase 10 walk
|
||||
measuring it at 17x17 on a 390px viewport was worth acting on rather than
|
||||
explaining away. */
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
accent-color: var(--portal);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import StructuredData from '../components/StructuredData.astro';
|
||||
import { brand } from '../lib/brand.mjs';
|
||||
|
||||
import Hero from '../components/home/Hero.astro';
|
||||
@@ -27,6 +28,8 @@ import GetStarted from '../components/home/GetStarted.astro';
|
||||
---
|
||||
|
||||
<Base title={`${brand.siteName} — ${brand.tagline}`} description={brand.tagline} bareTitle>
|
||||
<StructuredData slot="head" />
|
||||
|
||||
<Hero />
|
||||
<DataPath />
|
||||
<WhatItLooksLike />
|
||||
|
||||
40
src/pages/robots.txt.ts
Normal file
40
src/pages/robots.txt.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
/**
|
||||
* `/robots.txt` (D49, phase 10).
|
||||
*
|
||||
* The site had a sitemap covering all fifty URLs — Starlight bundles `@astrojs/sitemap`, so
|
||||
* it has been written on every build since phase 1 — and nothing that pointed at it. A
|
||||
* crawler finds a sitemap two ways: submitted by hand in a search console, or named here.
|
||||
* There is no search console for this project (D9's no-analytics posture extends to not
|
||||
* having accounts with anyone), so this file is the only way it is ever found.
|
||||
*
|
||||
* **Everything is allowed.** The site has no authenticated surface at all (§6), so there is
|
||||
* no private area to keep out of an index, and the two exclusions worth arguing about were
|
||||
* both rejected:
|
||||
*
|
||||
* - `/brand/*` is derived images and a stylesheet. Nothing links them as pages and they
|
||||
* carry no text; disallowing them would only stop an image crawler fetching the OG card
|
||||
* that exists to be fetched.
|
||||
* - `/beta/` is a live page a person is meant to find. It is the closed test's front door
|
||||
* and the nearest real deadline this project has — hiding it from search to keep the
|
||||
* signup list small would be solving a problem nobody has.
|
||||
*
|
||||
* The 404 page is excluded from the *search index* instead (`data-pagefind-ignore`), which
|
||||
* is the right layer for it: it is never a URL a crawler is given.
|
||||
*
|
||||
* Written as a route rather than a file in `public/` so the sitemap URL is derived from
|
||||
* `site` in `astro.config.mjs`. A hand-written copy would be one more place the domain is
|
||||
* spelled out, and the first thing to go stale if it ever changes.
|
||||
*/
|
||||
export const GET: APIRoute = ({ site }) =>
|
||||
new Response(
|
||||
[
|
||||
'User-agent: *',
|
||||
'Allow: /',
|
||||
'',
|
||||
`Sitemap: ${new URL('sitemap-index.xml', site)}`,
|
||||
'',
|
||||
].join('\n'),
|
||||
{ headers: { 'Content-Type': 'text/plain; charset=utf-8' } }
|
||||
);
|
||||
Reference in New Issue
Block a user