@geekity/cms 0.9.0 → 0.11.0

package/README.md

@@ -283,6 +283,7 @@ directory; absolute ones are used as given.
 | `accessLogAddress` | `false`                               | `GEEKITY_ACCESS_LOG_ADDRESS` | Put the client address on the end of each access-log line. `trustProxy` decides which address that is.                                                                                    |
 | `accessLogWriter`  | stdout                                | —                            | Where the lines go instead. See [The access log](#the-access-log).                                                                                                                        |
 | `maintenance`      | `false`                               | `GEEKITY_MAINTENANCE`        | Keep the site in maintenance mode, answering 503, until a restart without it.                                                                                                             |
+| `compression`      | `true`                                | `GEEKITY_COMPRESSION`        | Compress text responses with brotli or gzip. Turn it off behind a proxy that compresses. See [Compression](#compression).                                                                 |
 | `securityHeaders`  | [see below](#security-headers)        | —                            | Headers every response carries. A string replaces a default or adds a header, `false` removes one.                                                                                        |
 | `onDocumentChange` | none                                  | —                            | Hook run for every change to the index. See [Hooks](#hooks).                                                                                                                              |
 | `onPublish`        | none                                  | —                            | Hook run when a document becomes visible. See [Hooks](#hooks).                                                                                                                            |
@@ -364,6 +365,7 @@ the same directory reads all of it, and everything in it is meant to be public:
 | `data/users.json`                 | Usernames and argon2id password hashes. Mode `0600`.                                                                            |
 | `data/keys/`                      | Each user's actor key pairs as JWK files. Mode `0600`. **Losing these breaks federation.**                                      |
 | `data/comment-salt`               | What hides commenters' addresses in the published comment files. Mode `0600`.                                                   |
+| `data/comments/{slug}.json`       | The emails of that post's commenters, and whether each asked to hear about replies, keyed by comment id. Mode `0600`.           |
 | `data/akismet.json`               | The Akismet key, and what `verify-key` last said about it. Mode `0600`.                                                         |
 | `data/mail.json`                  | The mail credential: a Brevo API key, an SMTP connection, or both. Mode `0600`.                                                 |
 | `data/notification-secret`        | What signs the one-click links in a notification. Mode `0600`. Losing it kills every link already in an inbox and nothing else. |
@@ -979,7 +981,12 @@ comments — id, source, kind, status, author, the Markdown and the HTML it
 rendered to, when it was submitted, a salted hash of the address, and what it
 answers — so they are in git beside the posts, an Eleventy build of the same
 directory shows them, and the `comments` table is an index emptied and read
-back on every boot.
+back on every boot. The commenter's email is not in that file: it is in
+`data/comments/{slug}.json` (mode `0600`), keyed by comment id, because
+everything under `content/` is published and goes into git. A site upgrading
+from a version that kept the email in the comment file has it moved there on
+the next boot, and so does an email somebody types into a comment file by
+hand.
 
 Three settings and one front-matter key decide whether a post is still taking
 them, and they are read in one place so the form and the endpoint can never
@@ -1040,7 +1047,7 @@ on one comment, lasts a week, and is spent the first time it is used.
 
 Commenters get the other half. The form offers "email me when somebody replies
 to this", but only on a site that can actually send mail; ticking it stores
-`notify: true` beside the address that is already in the comment file, and
+`notify: true` beside the commenter's address in `data/comments/{slug}.json`, and
 nothing about either is ever rendered — not on the page, not in the JSON or
 Markdown representations, and not in the comments feeds. When a reply to that
 comment is **approved**, one message goes out with the reply in it and an
@@ -1396,22 +1403,23 @@ This is every piece of personal data the CMS stores, where it is, and how long
 it stays. "Kept" means until somebody deletes it, unless a retention period
 says otherwise.
 
-| What                                                                                                                 | Where                                                             | How long                                                                       |
-| -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| A commenter's name, website and words                                                                                | `content/_data/comments/{slug}.json`, public and in git           | Kept. Erasing on request replaces the name and drops the website.              |
-| A commenter's email, and whether they asked to be told about replies                                                 | `content/_data/comments/{slug}.json`, **never shown**, but in git | `commentEmailRetentionDays`: forever unless set, 180 on a new site.            |
-| A salted hash of the address a comment, webmention or contact message came from (the address itself is never stored) | The comment file, or the contact message file                     | `addressHashRetentionDays`: forever unless set, 30 on a new site.              |
-| A webmention's author name, website, avatar URL and the source page's words                                          | `content/_data/comments/{slug}.json`                              | Kept, as a copy of a page that is public already.                              |
-| A contact message: the sender's name, email, subject and message                                                     | `data/contact/{id}.json`, mode `0600`                             | `contactMessageRetentionDays`: forever unless set, 365 on a new site.          |
-| The addresses that unsubscribed from reply notices                                                                   | `data/comment-optouts.json`, mode `0600`                          | Kept, so the site goes on not writing to them. Erasing on request removes one. |
-| Followers: actor id, handle, display name, avatar URL, profile URL                                                   | `content/_data/federation/{username}/followers.json`, in git      | Until they unfollow.                                                           |
-| Inbound likes, boosts, replies and quotes, with the actor who sent them                                              | `content/_data/federation/inbox/{yyyy}-{mm}.jsonl`, in git        | Kept.                                                                          |
-| What a reply shows of the post it answers: its title, words and author                                               | `content/_data/replyContexts.json`, in git                        | Kept.                                                                          |
-| Remote avatars, shrunk                                                                                               | `data/avatars/`                                                   | Deleted by the avatar sweep once nothing shown names them.                     |
-| Users: username, email, argon2id password hash, profile                                                              | `data/users.json`, mode `0600`                                    | Until the user is deleted.                                                     |
-| An index of all of the above, and sessions, reset tokens and spent link tokens                                       | `data/geekity.db`                                                 | A cache of the files. Sessions and tokens are pruned when they expire.         |
-| Client addresses in the rate limits                                                                                  | Memory                                                            | Until the window passes or the site restarts.                                  |
-| Client addresses in the access log                                                                                   | stdout, and whatever collects it                                  | Only with `accessLogAddress` on. The collector keeps them.                     |
+| What                                                                                                                 | Where                                                         | How long                                                                       |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| A commenter's name, website and words                                                                                | `content/_data/comments/{slug}.json`, public and in git       | Kept. Erasing on request replaces the name and drops the website.              |
+| A commenter's email, and whether they asked to be told about replies                                                 | `data/comments/{slug}.json`, mode `0600`, keyed by comment id | `commentEmailRetentionDays`: forever unless set, 180 on a new site.            |
+| A salted hash of the address a comment, webmention or contact message came from (the address itself is never stored) | The comment file, or the contact message file                 | `addressHashRetentionDays`: forever unless set, 30 on a new site.              |
+| A webmention's author name, website, avatar URL and the source page's words                                          | `content/_data/comments/{slug}.json`                          | Kept, as a copy of a page that is public already.                              |
+| A contact message: the sender's name, email, subject and message                                                     | `data/contact/{id}.json`, mode `0600`                         | `contactMessageRetentionDays`: forever unless set, 365 on a new site.          |
+| The addresses that unsubscribed from reply notices                                                                   | `data/comment-optouts.json`, mode `0600`                      | Kept, so the site goes on not writing to them. Erasing on request removes one. |
+| Followers: actor id, handle, display name, avatar URL, profile URL                                                   | `content/_data/federation/{username}/followers.json`, in git  | Until they unfollow.                                                           |
+| Inbound likes, boosts, replies and quotes, with the actor who sent them                                              | `content/_data/federation/inbox/{yyyy}-{mm}.jsonl`, in git    | Kept.                                                                          |
+| What a reply shows of the post it answers: its title, words and author                                               | `content/_data/replyContexts.json`, in git                    | Kept.                                                                          |
+| Other actors who liked, boosted, answered or quoted: handle, display name, avatar URL, profile URL                   | `data/geekity.db`, fetched from their actor document          | A cache. Refetched weekly while the inbox log names them.                      |
+| Remote avatars, shrunk                                                                                               | `data/avatars/`                                               | Deleted by the avatar sweep once nothing shown names them.                     |
+| Users: username, email, argon2id password hash, profile                                                              | `data/users.json`, mode `0600`                                | Until the user is deleted.                                                     |
+| An index of all of the above, and sessions, reset tokens and spent link tokens                                       | `data/geekity.db`                                             | A cache of the files. Sessions and tokens are pruned when they expire.         |
+| Client addresses in the rate limits                                                                                  | Memory                                                        | Until the window passes or the site restarts.                                  |
+| Client addresses in the access log                                                                                   | stdout, and whatever collects it                              | Only with `accessLogAddress` on. The collector keeps them.                     |
 
 Two services outside the site see personal data when a site turns them on.
 Akismet is sent a commenter's or sender's address, user agent, referrer, name,
@@ -1475,9 +1483,11 @@ skip the queue. Its author is no longer told about replies, and their next
 comment waits for a moderator. A moderation link in an inbox names the comment
 by id, so it goes on working.
 
-The sweep changes the files as they are now. A comment file in git keeps its
-history, so an email committed before it was removed is still in the
-repository's history until that history is rewritten.
+The sweep changes the files as they are now. The emails are in `data/`, which
+is not in git, so removing one removes it. Emails from before they moved out of
+the comment files (TASK-182) were committed with those files, and they stay in
+the repository's history until that history is rewritten, whatever the sweep or
+an erasure does to the files today.
 
 ### Erasing one person's data
 
@@ -1666,6 +1676,7 @@ shadow the login form.
 | `/admin/media`                                   | Everything under `content/uploads`, with the URL, the Markdown and what uses it.    |
 | `/admin/media/upload`                            | `POST` only. Stores one file by the rules the editor's upload enforces.             |
 | `/admin/media/delete`                            | `POST` only. Deletes one upload, asking first when a document points at it.         |
+| `/admin/media/alt`                               | `POST` only. Sets a picture's alt text, or marks it decorative, in `media.json`.    |
 | `/admin/comments`                                | Pending, approved and spam, with approve, spam, delete and reply.                   |
 | `/admin/comments/moderate`                       | `POST` only. Approves one comment, files it as spam, or deletes it.                 |
 | `/admin/comments/reply`                          | `POST` only. Posts an approved reply under the comment it answers.                  |
@@ -1920,8 +1931,9 @@ written by an Eleventy build is on the screen without a restart, and one
 removed the same way is off it. The only question the index is asked is which
 documents mention a URL, which is the one thing a directory cannot answer.
 
-Each row carries the public URL and the ready-made Markdown — `![name](url)`
-for a picture and `[name](url)` for anything else, from the same function the
+Each row carries the public URL and the ready-made Markdown — `![alt](url)`
+for a picture, with its alt text from the library or empty when it has none or
+is decorative, and `[name](url)` for anything else, from the same function the
 editor's upload control pastes from — as readonly text fields, which select and
 copy on their own. `admin/static/copy.js` reveals a Copy button beside each and
 does nothing else, so the screen is complete before it loads and a browser
@@ -1946,7 +1958,17 @@ name a file elsewhere in the content directory.
 content-relative path once the original is gone. The original under
 `content/uploads` is the only source of truth (decision-10) and anything
 generated from it is derived state that must not outlive it; the hook defaults
-to `removeImageVariants`, which takes the file's derived images with it.
+to `removeImageVariants`, which takes the file's derived images with it. The
+file's entry in `content/_data/media.json` goes too.
+
+A picture's row also carries its alt text: a text field, a Decorative checkbox
+that wins over the text, and a line saying which of the two the library holds
+or that it holds neither. The form posts to `/admin/media/alt`, which writes
+`content/_data/media.json` atomically, keeping every other entry. The file is
+the truth (decision-9) and is read on each request, so an entry written by hand
+shows up without a restart. `readAltTexts(contentDir)` and
+`undescribedImages(html, library)` in `src/images/alt-text.ts` are what the
+editor's publish check and the federated `Image` attachments read.
 
 ### Image variants
 
@@ -2240,6 +2262,46 @@ uploads. Four directives say more than that:
   sandboxed `srcdoc` iframe, which inherits this policy, and its one ancestor is
   the admin page itself.
 
+### Compression
+
+Text responses are compressed on the way out: HTML, CSS, JavaScript, feeds,
+JSON, Markdown, SVG, sitemaps and anything else whose media type is `text/*`,
+`+json` or `+xml`. A client that accepts brotli (`br`) gets brotli, at quality
+5 because every page is built per request; one that accepts only gzip gets
+gzip; one that accepts neither gets the plain bytes.
+
+Some responses go out as they are:
+
+- Images, video, WOFF and WOFF2 fonts and other formats that carry their own
+  compression. Encoding them again costs CPU and can make them bigger.
+- Bodies under 1024 bytes, where the saving is smaller than the cost.
+- A response that already has a `Content-Encoding`, or whose `Cache-Control`
+  says `no-transform`.
+- A response that may hold a secret: anything whose `Cache-Control` says
+  `private` or `no-store`, which every page drawn for somebody signed in does,
+  and every admin screen under `/admin`, the setup and login forms included.
+  These carry CSRF tokens next to text a visitor can influence, and compressing
+  them would let an attacker who watches response sizes recover the token a
+  byte at a time (the BREACH attack). Their `Vary` is left as it was. The
+  admin's static files under `/admin/_static/` hold no secret and are
+  compressed. Error pages say `no-store`, so they go out plain too.
+
+Every other text response carries `Vary: Accept-Encoding`, whether it was
+compressed or not, and so does every `304`. A cache in front of the site
+therefore keeps a copy per encoding and never hands brotli to a client that
+cannot decode it.
+
+A compressed response's `ETag` is the plain response's with `W/` in front: the
+bytes differ, but the representation is the same. `If-None-Match` compares
+weakly, so a browser holding the brotli copy and a feed reader holding the gzip
+copy both revalidate to `304`, and each gets back the validator it sent.
+
+`compression: false`, or `GEEKITY_COMPRESSION=false`, turns all of this off.
+Turn it off when a reverse proxy or CDN in front of the site compresses
+responses itself (Caddy's `encode`, nginx's `gzip on`, Cloudflare), so the work
+is done once and the proxy's settings apply. Leave it on when nothing in front
+compresses, as in the Docker deployment the repository documents.
+
 ### security.txt and change-password
 
 `/.well-known/security.txt` ([RFC 9116](https://www.rfc-editor.org/rfc/rfc9116))

package/admin/components/admin-bar.njk

@@ -0,0 +1,26 @@
+{# The admin bar, in the admin and across the top of the public site alike
+   (TASK-126, TASK-183). The site title leads to the dashboard; `barLinks` are
+   the shortcuts beside it, which each place chooses for itself; the account
+   menu ends it.
+
+   WordPress's "Howdy," menu, greeting the way this site's owner does. A
+   popover rather than a script: the browser opens and closes it, shuts it on
+   Escape or a click elsewhere, and tells a screen reader whether it is
+   expanded, all under the admin CSP's script-src 'self'. #}
+<nav class="admin-bar" aria-label="Admin bar">
+  <a class="admin-bar-site" href="{{ adminUrl }}">{{ site.title }}</a>
+  {% for link in barLinks %}
+    <a href="{{ link.url }}">{{ link.label }}</a>
+  {% endfor %}
+  <span class="admin-bar-spacer"></span>
+  {% if me %}
+    <button type="button" class="admin-bar-account" popovertarget="admin-account-menu">Hoopla! {{ me.name }}</button>
+    <div id="admin-account-menu" class="admin-account-menu" popover>
+      <a href="{{ me.url }}">Edit profile</a>
+      <form method="post" action="{{ logoutUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <button type="submit">Log out</button>
+      </form>
+    </div>
+  {% endif %}
+</nav>

package/admin/components/fields.njk

@@ -34,9 +34,9 @@
    with. `errorHtml` is the rare second thing a field has to say — the Reading
    page's "that page is no longer published" — already written as its own
    paragraph. #}
-{% macro _below(hint, error, errorHtml) %}
+{% macro _below(id, hint, error, errorHtml) %}
 {% if error %}
-  <p class="admin-field-error">{{ error }}</p>
+  <p class="admin-field-error" id="{{ id }}-error">{{ error }}</p>
 {% endif %}
 {% if errorHtml %}
 {{ errorHtml | safe }}
@@ -46,6 +46,14 @@
 {% endif %}
 {% endmacro %}
 
+{# What a control says about itself when the form refused it: that it is
+   invalid, and which paragraph says why, so a screen reader reads the message
+   with the field rather than leaving it to be found. `errorHtml` is not named
+   here: it is a standing note about the stored value, not a refusal. #}
+{% macro _invalid(id, error) -%}
+{% if error %} aria-invalid="true" aria-describedby="{{ id }}-error"{% endif %}
+{%- endmacro %}
+
 {# A box somebody types into: text, email, number, or whatever `type` says.
 
    `value` is always written, even empty, so the control's state is on the page
@@ -71,8 +79,8 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %} />
-{{ _below(hint, error, errorHtml) }}
+  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A password box. It carries `value=""` and no way to set one: nothing typed
@@ -93,8 +101,8 @@
   autofocus=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %} />
-{{ _below(hint, error, errorHtml) }}
+  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{{ _invalid(id, error) }} />
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A box of several lines. #}
@@ -114,8 +122,8 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <textarea id="{{ id }}" name="{{ name }}"{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}>{{ value }}</textarea>
-{{ _below(hint, error, errorHtml) }}
+  <textarea id="{{ id }}" name="{{ name }}"{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>{{ value }}</textarea>
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A list to pick from. The options are the call's body, because which of them
@@ -137,10 +145,10 @@
   disabled=false
 ) %}
   <label for="{{ id }}">{{ label | safe }}</label>
-  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}>
+  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>
 {{ caller() }}
   </select>
-{{ _below(hint, error, errorHtml) }}
+{{ _below(id, hint, error, errorHtml) }}
 {%- endmacro %}
 
 {# A switch. The label follows the box rather than heading it, which is what a
@@ -158,8 +166,43 @@
   disabled=false
 ) %}
   <p class="admin-check">
-    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} />
+    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
     <label for="{{ id }}">{{ label | safe }}</label>
   </p>
-{{ _below(hint, error, errorHtml) }}
+{{ _below(id, hint, error, errorHtml) }}
+{%- endmacro %}
+
+{# The top of a refused form: what went wrong, and a link to every field that
+   needs putting right. It is an alert and takes focus when the page loads, so
+   a screen reader hears it at once and a keyboard starts from it, with no
+   script. It comes before the form, so its `autofocus` is the first on the
+   page and wins over any a field carries.
+
+   A form with one thing to say calls it bare, with the message as the heading.
+   A form with fields to fix calls it with a `problem` per field; one given no
+   message writes nothing, so a page lists every field it could fault:
+
+     {% call field.summary('Nothing was saved. Fix the fields marked below.') %}
+       {{ field.problem('settings-title', problems.title) }}
+     {% endcall %}
+
+   Only one form on a page is ever refused at a time, which is why the ids are
+   fixed. #}
+{% macro summary(heading) %}
+{% set problems = (caller() if caller else '') | trim %}
+  <div class="admin-error admin-error-summary" role="alert" tabindex="-1" autofocus aria-labelledby="admin-error-summary-heading">
+    <h2 id="admin-error-summary-heading">{{ heading }}</h2>
+{% if problems %}
+    <ul>
+{{ problems | safe }}
+    </ul>
+{% endif %}
+  </div>
+{%- endmacro %}
+
+{# One field's line in the summary: its message, linking to the field. #}
+{% macro problem(id, message) %}
+{% if message %}
+      <li><a href="#{{ id }}">{{ message }}</a></li>
+{% endif %}
 {%- endmacro %}

package/admin/components/public-admin-bar.njk

@@ -0,0 +1,41 @@
+{# The admin bar as the public site draws it for a signed-in user (TASK-183),
+   put straight after the theme's <body> tag.
+
+   Whatever theme the site wears has never heard of it, so it keeps to a shadow
+   root: no selector of the theme's reaches the markup inside, and the
+   stylesheet inside reaches nothing outside. The stylesheet is inlined rather
+   than linked so the bar is never drawn unstyled; the public site has no
+   content CSP to refuse it.
+
+   The host is fixed to the top of the window, as WordPress's is. In normal
+   flow it sat inside whatever padding or margin the theme gave <body>, so it
+   stopped short of the window's edges. Out of flow, nothing the theme does to
+   <body> moves it, and the inline reset keeps the theme's rules for the host
+   element itself, a `body > *` or a grid on <body>, from restyling it; only an
+   `!important` rule can, which is also how a theme that insists hides it. The
+   page is pushed down from outside, by a stylesheet the CMS puts in <head>
+   (OFFSET_STYLE in src/web/admin-bar.ts) reading --geekity-admin-bar-height.
+
+   The script does two things. It measures the bar and sets that height on
+   <html>, so a bar that wraps to two lines on a phone, or one a theme has
+   hidden, pushes the page down by what it really is. And it gives focus back
+   to the greeting when the menu closes with focus inside it: Chrome does that
+   for a popover in the light DOM, not from inside a shadow root, where the
+   focus is simply lost. A click elsewhere has already moved focus by then,
+   and keeps it. #}
+<geekity-admin-bar style="all: initial; display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 99999"><template shadowrootmode="open"><style>{% include "static/admin-bar.css" %}</style>{% include "components/admin-bar.njk" %}<script>
+(() => {
+  const host = document.querySelector('geekity-admin-bar');
+  const root = host.shadowRoot;
+  new ResizeObserver(() => {
+    const height = host.getBoundingClientRect().height;
+    document.documentElement.style.setProperty('--geekity-admin-bar-height', `${height}px`);
+  }).observe(host);
+  const menu = root.getElementById('admin-account-menu');
+  menu?.addEventListener('beforetoggle', (event) => {
+    if (event.newState === 'closed' && menu.contains(root.activeElement)) {
+      setTimeout(() => root.querySelector('.admin-bar-account').focus());
+    }
+  });
+})();
+</script></template></geekity-admin-bar>

package/admin/layouts/base.njk

@@ -13,12 +13,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{% block title %}Admin{% endblock %}{% if site.title %} · {{ site.title }}{% endif %}</title>
     <meta name="robots" content="noindex, nofollow" />
+    <link rel="stylesheet" href="{{ assetPrefix }}admin-bar.css" />
     <link rel="stylesheet" href="{{ assetPrefix }}admin.css" />
   </head>
   <body>
+    {# First on every screen, so a keyboard gets past the bar and the menu
+       in one key. It moves no focus of its own: a refused form's summary
+       still takes focus on load (TASK-142). #}
+    <a class="admin-skip-link" href="#main">Skip to main content</a>
     {% block chrome %}{% endblock %}
     {% block main %}
-      <main class="admin-plain">
+      <main id="main" class="admin-plain">
         {% include "components/flash.njk" %}
         {% block content %}{% endblock %}
       </main>

package/admin/layouts/settings-page.njk

@@ -1,7 +1,10 @@
 {# What every settings page is: a heading, one form that saves the fields that
    page carries, and whatever panels sit under it. A page fills in the two
-   blocks; nothing about the chrome is written six times. #}
+   blocks, and names in `settingsProblems` each field a save can refuse, so
+   the summary at the top links to it; nothing about the chrome is written six
+   times. #}
 {% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
 
 {% block title %}{{ settingsLabel }} settings{% endblock %}
 
@@ -9,7 +12,9 @@
   <h1>{{ settingsLabel }}</h1>
 
   {% if hasProblems %}
-    <p class="admin-error">Nothing was saved. Fix the fields marked below and try again.</p>
+    {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
+      {% block settingsProblems %}{% endblock %}
+    {% endcall %}
   {% endif %}
 
   <form class="admin-settings" method="post" action="{{ settingsUrl }}">

package/admin/layouts/shell.njk

@@ -3,25 +3,14 @@
 {% extends "layouts/base.njk" %}
 
 {% block chrome %}
-  <header class="admin-bar">
-    <a class="admin-bar-site" href="{{ adminUrl }}">{{ site.title }}</a>
-    <a href="{{ siteUrl }}">View site</a>
-    <span class="admin-bar-spacer"></span>
-    {% if me %}
-      {# WordPress's "Howdy," menu, greeting the way this site's owner does.
-         A popover rather than a script: the browser opens and closes it,
-         shuts it on Escape or a click elsewhere, and tells a screen reader
-         whether it is expanded, all under the CSP's script-src 'self'. #}
-      <button type="button" class="admin-bar-account" popovertarget="admin-account-menu">Hoopla! {{ me.name }}</button>
-      <div id="admin-account-menu" class="admin-account-menu" popover>
-        <a href="{{ me.url }}">Edit profile</a>
-        <form method="post" action="{{ logoutUrl }}">
-          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-          <button type="submit">Log out</button>
-        </form>
-      </div>
-    {% endif %}
-  </header>
+  {# View site, because in here you are not looking at it; + New, as on the
+     public site; and, on the editor of something readers can see, the way to
+     go and look at it. #}
+  {% set barLinks = [{ label: "View site", url: siteUrl }, { label: "+ New", url: newPostUrl }] %}
+  {% if viewUrl and kind %}
+    {% set barLinks = barLinks.concat([{ label: "View " + (kind.singular | capitalize), url: viewUrl }]) %}
+  {% endif %}
+  {% include "components/admin-bar.njk" %}
 {% endblock %}
 
 {% block main %}
@@ -50,7 +39,7 @@
       </ul>
     </nav>
 
-    <main class="admin-main">
+    <main id="main" class="admin-main">
       {% include "components/flash.njk" %}
       {% block content %}{% endblock %}
     </main>

package/admin/pages/account/forgot.njk

@@ -30,7 +30,7 @@
     <p>Type your username or your email address, and a link to set a new password is sent to the address on your account.</p>
 
     {% if error %}
-      <p class="error">{{ error }}</p>
+      {{ field.summary(error) }}
     {% endif %}
 
     <form method="post" action="{{ forgotUrl }}">

package/admin/pages/account/login.njk

@@ -7,7 +7,7 @@
   <h1>Log in</h1>
 
   {% if error %}
-    <p class="error">{{ error }}</p>
+    {{ field.summary(error) }}
   {% endif %}
 
   <form method="post" action="{{ loginUrl }}">

package/admin/pages/account/reset.njk

@@ -17,14 +17,16 @@
     <p><a href="{{ forgotUrl }}">Ask for another one</a></p>
   {% else %}
     {% if problem %}
-      <p class="error">{{ problem }}</p>
+      {% call field.summary('The password was not set.') %}
+        {{ field.problem('password', problem) }}
+      {% endcall %}
     {% endif %}
 
     <form method="post" action="{{ resetUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
       <input type="hidden" name="{{ fields.token }}" value="{{ token }}" />
 
-      {{ field.password('password', fields.password, 'New password',
+      {{ field.password('password', fields.password, 'New password', error=problem,
            autocomplete='new-password', required=true, autofocus=true) }}
 
       {{ field.password('password_confirmation', fields.passwordConfirmation,

package/admin/pages/account/setup.njk

@@ -8,7 +8,7 @@
   <p>Nobody can sign in to this site yet. Pick a username and a password.</p>
 
   {% if error %}
-    <p class="error">{{ error }}</p>
+    {{ field.summary(error) }}
   {% endif %}
 
   <form method="post" action="{{ setupUrl }}">

package/admin/pages/dashboard/home.njk

@@ -40,6 +40,7 @@
       <h2>Recent posts</h2>
       {% if recent.length %}
         <table class="admin-list">
+          <caption class="admin-visually-hidden">Recent posts</caption>
           <thead>
             <tr>
               <th scope="col">Title</th>

package/admin/pages/documents/list.njk

@@ -26,6 +26,7 @@
 
   {% if documents.length %}
     <table class="admin-list">
+      <caption class="admin-visually-hidden">{{ kind.plural }}</caption>
       <thead>
         <tr>
           <th scope="col">Title</th>

package/admin/pages/documents/taxonomy.njk

@@ -42,6 +42,7 @@
     <p>Nothing carries a {{ label }} yet.</p>
   {% else %}
     <table class="admin-list">
+      <caption class="admin-visually-hidden">{{ heading }}</caption>
       <thead>
         <tr>
           <th scope="col">{{ kind.singular | capitalize }}</th>

package/admin/pages/federation/followers.njk

@@ -40,6 +40,7 @@
 
         {% if actor.followers.length %}
           <table class="admin-list">
+            <caption>Followers of {{ actor.handle }}</caption>
             <thead>
               <tr>
                 <th scope="col">Follower</th>
@@ -80,6 +81,7 @@
     <h2>Relays</h2>
     {% if relays.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Relays</caption>
         <thead>
           <tr>
             <th scope="col">Relay</th>
@@ -174,6 +176,7 @@
     <h2>Delivery</h2>
     {% if posts.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Delivery</caption>
         <thead>
           <tr>
             <th scope="col">Post</th>

package/admin/pages/federation/settings.njk

@@ -7,6 +7,10 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-relays', problems.relays) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set relaysHint %}
     One relay inbox per line, such as
@@ -42,6 +46,7 @@
 
     {% if wordpressRoutes.length %}
       <table class="admin-table">
+        <caption class="admin-visually-hidden">WordPress paths</caption>
         <thead>
           <tr><th scope="col">Path</th><th scope="col">For</th><th scope="col">Last asked for</th></tr>
         </thead>