@geekity/cms 0.9.0 → 0.11.0

package/admin/pages/media/library.njk

@@ -60,9 +60,11 @@
     <p class="admin-empty">Nothing has been uploaded yet.</p>
   {% else %}
     <table class="admin-list admin-media">
+      <caption class="admin-visually-hidden">{{ heading }}</caption>
       <thead>
         <tr>
           <th scope="col">File</th>
+          <th scope="col">Alt text</th>
           <th scope="col">Uploaded</th>
           <th scope="col">Size</th>
           <th scope="col">Link</th>
@@ -83,6 +85,43 @@
               {% endif %}
               <a href="{{ file.url }}">{{ file.path }}</a>
             </td>
+            <td class="admin-media-alt">
+              {% if file.image %}
+                <form method="post" action="{{ altUrl }}">
+                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                  <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+                  <input type="hidden" name="{{ fields.page }}" value="{{ page }}" />
+                  <label class="admin-visually-hidden" for="media-alt-{{ loop.index }}">
+                    Alt text for {{ file.name }}
+                  </label>
+                  <input
+                    id="media-alt-{{ loop.index }}"
+                    name="{{ fields.alt }}"
+                    type="text"
+                    value="{% if file.alt and file.alt.kind == 'described' %}{{ file.alt.text }}{% endif %}"
+                    aria-describedby="media-alt-state-{{ loop.index }}"
+                  />
+                  <span class="admin-check">
+                    <input
+                      id="media-decorative-{{ loop.index }}"
+                      name="{{ fields.decorative }}"
+                      type="checkbox"
+                      value="1"
+                      {% if file.alt and file.alt.kind == 'decorative' %}checked{% endif %}
+                    />
+                    <label for="media-decorative-{{ loop.index }}">Decorative</label>
+                  </span>
+                  <button type="submit">Save</button>
+                  <span id="media-alt-state-{{ loop.index }}" class="admin-status{% if not file.alt %} admin-status-missing{% endif %}">
+                    {%- if not file.alt %}Missing: describe it, or mark it decorative
+                    {%- elif file.alt.kind == 'decorative' %}Decorative: inserted with an empty alt
+                    {%- else %}Offered when it is inserted{% endif -%}
+                  </span>
+                </form>
+              {% else %}
+                <span class="admin-status">Not an image</span>
+              {% endif %}
+            </td>
             <td>{{ file.modified | date('html') }}</td>
             <td>{{ file.bytes }}</td>
             <td class="admin-media-links">

package/admin/pages/navigation/menus.njk

@@ -60,7 +60,12 @@
   <h1>{{ heading }}</h1>
 
   {% if hasProblems %}
-    <p class="admin-field-error">Nothing was saved. See below.</p>
+    {% call field.summary('Nothing was saved. Fix the box marked below and try again.') %}
+      {% for menu in areas.concat(others) %}
+        {{ field.problem('menu-' + menu.name, menu.problem) }}
+      {% endfor %}
+      {{ field.problem('menu-name', nameProblem) }}
+    {% endcall %}
   {% endif %}
 
   <h2>Where {{ themeName }} puts a menu</h2>

package/admin/pages/settings/discussion.njk

@@ -13,6 +13,13 @@
   {%- endif -%}
 {% endmacro %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-comments-close', problems.commentsCloseAfterDays) }}
+  {{ field.problem('settings-comment-email-retention', problems.commentEmailRetentionDays) }}
+  {{ field.problem('settings-address-hash-retention', problems.addressHashRetentionDays) }}
+  {{ field.problem('settings-contact-message-retention', problems.contactMessageRetentionDays) }}
+{% endblock %}
+
 {% block settingsFields %}
   <h2>Comments</h2>
 

package/admin/pages/settings/email.njk

@@ -3,6 +3,16 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-mail-provider', problems.mailProvider) }}
+  {{ field.problem('settings-mail-from-address', problems.mailFromAddress) }}
+  {{ field.problem('settings-mail-reply-to', problems.mailReplyTo) }}
+  {{ field.problem('settings-contact-email', problems.contactEmail) }}
+  {{ field.problem('settings-security-contacts', problems.securityContacts) }}
+  {{ field.problem('settings-security-policy', problems.securityPolicy) }}
+  {{ field.problem('settings-security-languages', problems.securityLanguages) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set providerHint %}
     The key or password each one needs is a credential and is saved below,

package/admin/pages/settings/general.njk

@@ -2,6 +2,13 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-title', problems.title) }}
+  {{ field.problem('settings-base-url', problems.baseUrl) }}
+  {{ field.problem('settings-timezone', problems.timezone) }}
+  {{ field.problem('settings-language', problems.language) }}
+{% endblock %}
+
 {% block settingsFields %}
   {{ field.text('settings-title', fields.title, 'Title', form.title,
        error=problems.title, required=true, autofocus=true) }}

package/admin/pages/settings/permalinks.njk

@@ -3,6 +3,11 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-tag-base', problems.tagBase) }}
+  {{ field.problem('settings-category-base', problems.categoryBase) }}
+{% endblock %}
+
 {% block settingsFields %}
   {% set tagBaseHint %}The tag archives live at <code>/{{ form.tagBase }}/{tag}/</code>. One path segment, no slashes.{% endset %}
   {{ field.text('settings-tag-base', fields.tagBase, 'Tag base', form.tagBase,
@@ -22,6 +27,7 @@
 
     {% if taxonomyRedirects.length %}
       <table class="admin-list">
+        <caption class="admin-visually-hidden">Archive redirects</caption>
         <thead>
           <tr><th scope="col">Taxonomy</th><th scope="col">Was</th><th scope="col">Is now</th></tr>
         </thead>

package/admin/pages/settings/reading.njk

@@ -4,6 +4,13 @@
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
 
+{% block settingsProblems %}
+  {{ field.problem('settings-homepage', problems.homepage) }}
+  {{ field.problem('settings-posts-page', problems.postsPage) }}
+  {{ field.problem('settings-posts-per-page', problems.postsPerPage) }}
+  {{ field.problem('settings-notify-server', problems.notifyServer) }}
+{% endblock %}
+
 {% block settingsFields %}
   {# WordPress's "Your homepage displays": the empty option is Your latest
      posts, so the choice and the page it needs are one control rather than a

package/admin/pages/tools/content-index.njk

@@ -20,6 +20,7 @@
   </p>
 
   <table class="admin-list">
+    <caption class="admin-visually-hidden">What the index holds</caption>
     <thead>
       <tr>
         <th scope="col">What the index holds</th>

package/admin/pages/tools/personal-data.njk

@@ -49,6 +49,11 @@
       {% endif %}
     </form>
   {% else %}
+    {% if problem %}
+      {% call field.summary('Nothing was looked up.') %}
+        {{ field.problem('personal-data-email', problem) }}
+      {% endcall %}
+    {% endif %}
     <form class="admin-settings" method="post" action="{{ actionUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
       {{ field.text('personal-data-email', fields.email, 'Email address', email,

package/admin/pages/users/edit.njk

@@ -80,10 +80,9 @@
     </p>
 
     {% if profileProblems.links %}
-      <p class="admin-error">
-        Nothing was saved. Fix the Links box below and save again; every other
-        box here still holds what you typed.
-      </p>
+      {% call field.summary('Nothing was saved. Fix the Links box below and save again; every other box here still holds what you typed.') %}
+        {{ field.problem('profile-links', profileProblems.links) }}
+      {% endcall %}
     {% endif %}
 
     {{ field.text('profile-display-name', fields.displayName, 'Display name',
@@ -219,7 +218,10 @@
       <h2>Change your password</h2>
 
       {% if passwordProblems.currentPassword or passwordProblems.newPassword %}
-        <p class="admin-error">Your password was not changed. Fix the fields marked below and try again.</p>
+        {% call field.summary('Your password was not changed. Fix the fields marked below and try again.') %}
+          {{ field.problem('current-password', passwordProblems.currentPassword) }}
+          {{ field.problem('new-password', passwordProblems.newPassword) }}
+        {% endcall %}
       {% endif %}
 
       {{ field.password('current-password', fields.currentPassword, 'Current password',

package/admin/pages/users/list.njk

@@ -13,6 +13,7 @@
   <h1>Users <a class="admin-button admin-button-small" href="{{ addUserUrl }}">Add new</a></h1>
 
   <table class="admin-list">
+    <caption class="admin-visually-hidden">Users</caption>
     <thead>
       <tr>
         <th scope="col">Username</th>

package/admin/pages/users/new.njk

@@ -16,7 +16,11 @@
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
     {% if addProblems.username or addProblems.password or addProblems.email %}
-      <p class="admin-error">Nobody was added. Fix the fields marked below and try again.</p>
+      {% call field.summary('Nobody was added. Fix the fields marked below and try again.') %}
+        {{ field.problem('add-username', addProblems.username) }}
+        {{ field.problem('add-email', addProblems.email) }}
+        {{ field.problem('add-password', addProblems.password) }}
+      {% endcall %}
     {% endif %}
 
     {{ field.text('add-username', fields.username, 'Username', addForm.username,

package/admin/static/admin-bar.css

@@ -0,0 +1,153 @@
+/*
+ * The admin bar: the dark strip across the top of every admin screen, and of
+ * every public page a signed-in user reads (TASK-183).
+ *
+ * Self-contained, because on the public site it is inlined into the bar's
+ * shadow root, under a host reset to `all: initial`: nothing here may lean on
+ * admin.css or on whatever theme the site wears. Sizes are in pixels for the
+ * same reason, since a `rem` is the theme's root font size. The colours are
+ * declared on `:host` there and on `:root` in the admin, where admin.css
+ * reads them too.
+ */
+
+:root,
+:host {
+  --admin-bar: #1d2327;
+  --admin-nav: #2c3338;
+  --admin-nav-text: #f0f0f1;
+  --admin-focus-on-dark: #fff;
+}
+
+.admin-bar,
+.admin-bar * {
+  box-sizing: border-box;
+}
+
+/* Site name on the left, the shortcuts beside it, who you are on the right. */
+
+.admin-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 16px;
+  padding: 0 16px;
+  min-height: 40px;
+  background: var(--admin-bar);
+  color: var(--admin-nav-text);
+  font:
+    14px/40px -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  anchor-name: --admin-bar;
+}
+
+.admin-bar a {
+  color: var(--admin-nav-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.admin-bar a:hover,
+.admin-bar a:focus {
+  color: #72aee6;
+}
+
+/* The ring where the keyboard is, white on the dark bar. Here rather than in
+   admin.css because on the public site this is the only stylesheet the bar
+   has. */
+
+.admin-bar :focus-visible {
+  outline: 2px solid var(--admin-focus-on-dark);
+  outline-offset: 2px;
+}
+
+.admin-bar-site {
+  font-weight: 600;
+}
+
+.admin-bar-spacer {
+  flex: 1;
+}
+
+.admin-bar-account {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--admin-nav-text);
+  font: inherit;
+  text-align: right;
+  cursor: pointer;
+  anchor-name: --admin-account;
+}
+
+/* On a phone the bar wraps, and the greeting keeps to the right of its line
+   so the menu under it opens inside the screen. */
+
+.admin-bar-spacer + .admin-bar-account {
+  margin-left: auto;
+}
+
+.admin-bar-account:hover,
+.admin-bar-account:focus-visible,
+.admin-bar-account:popover-open {
+  color: #72aee6;
+}
+
+.admin-bar-account::after {
+  content: ' \25BE' / '';
+}
+
+/* The menu is in the top layer, so it is placed rather than laid out: under
+   the greeting where anchor positioning exists, at the bar's right edge
+   where it does not. */
+
+.admin-account-menu {
+  inset: 40px 0 auto auto;
+  margin: 0;
+  min-width: 160px;
+  padding: 4px 0;
+  border: 0;
+  background: var(--admin-nav);
+  color: var(--admin-nav-text);
+  line-height: 1.6;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
+}
+
+@supports (top: anchor(--admin-bar bottom)) {
+  .admin-account-menu {
+    inset: anchor(--admin-bar bottom) anchor(--admin-account right) auto auto;
+  }
+}
+
+.admin-account-menu a,
+.admin-account-menu button[type='submit'] {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 8px 16px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: var(--admin-nav-text);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* A menu entry fills the menu's width, so its ring is drawn inside it. */
+
+.admin-bar .admin-account-menu :focus-visible {
+  outline-offset: -2px;
+}
+
+.admin-account-menu a:hover,
+.admin-account-menu a:focus-visible,
+.admin-account-menu button[type='submit']:hover,
+.admin-account-menu button[type='submit']:focus-visible {
+  background: var(--admin-bar);
+  color: #72aee6;
+}

package/admin/static/admin.css

@@ -8,10 +8,10 @@
  */
 
 :root {
-  --admin-bar: #1d2327;
-  --admin-nav: #2c3338;
-  --admin-nav-text: #f0f0f1;
+  /* --admin-bar, --admin-nav and --admin-nav-text are in admin-bar.css. */
   --admin-nav-current: #2271b1;
+  --admin-nav-open: #1d2327;
+  --admin-nav-children: #32373c;
   --admin-field: #f0f0f1;
   --admin-surface: #fff;
   --admin-border: #c3c4c7;
@@ -20,7 +20,12 @@
   --admin-link: #2271b1;
   --admin-notice: #00a32a;
   --admin-error: #d63638;
+  --admin-warning: #dba617;
   --admin-unread: #f0f6fc;
+  /* The focus ring on the light field and surfaces; --admin-focus-on-dark,
+     for the bar and the menu column, is in admin-bar.css. Both are held to 3:1
+     against what they are drawn on by src/admin/keyboard.test.ts. */
+  --admin-focus: #2271b1;
   --admin-nav-width: 11rem;
 }
 
@@ -44,103 +49,33 @@ a {
   color: var(--admin-link);
 }
 
-/* The top bar: site name on the left, who you are on the right. */
+/* Every control says where the keyboard is, in one colour that holds 3:1
+   against the field and the surfaces, rather than the browser's own ring,
+   which is faint on grey. Set off by 2px so it is drawn on the background
+   around the control, whatever colour the control itself is. */
 
-.admin-bar {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0 1rem;
-  min-height: 2.5rem;
-  background: var(--admin-bar);
-  color: var(--admin-nav-text);
-  anchor-name: --admin-bar;
-}
-
-.admin-bar a {
-  color: var(--admin-nav-text);
-  text-decoration: none;
-  white-space: nowrap;
+:focus-visible {
+  outline: 2px solid var(--admin-focus);
+  outline-offset: 2px;
 }
 
-.admin-bar a:hover,
-.admin-bar a:focus {
-  color: #72aee6;
-}
+/* Hidden until a keyboard reaches it, then drawn over the bar. */
 
-.admin-bar-site {
+.admin-skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: 0.6rem 0.9rem;
+  background: var(--admin-surface);
+  color: var(--admin-link);
   font-weight: 600;
+  transform: translateY(-120%);
 }
 
-.admin-bar-spacer {
-  flex: 1;
-}
-
-.admin-bar-account {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--admin-nav-text);
-  font: inherit;
-  text-align: right;
-  cursor: pointer;
-  anchor-name: --admin-account;
-}
-
-.admin-bar-account:hover,
-.admin-bar-account:focus-visible,
-.admin-bar-account:popover-open {
-  color: #72aee6;
-}
-
-.admin-bar-account::after {
-  content: ' \25BE' / '';
-}
-
-/* The menu is in the top layer, so it is placed rather than laid out: under
-   the greeting where anchor positioning exists, at the bar's right edge
-   where it does not. */
-
-.admin-account-menu {
-  inset: 2.5rem 0 auto auto;
-  margin: 0;
-  min-width: 10rem;
-  padding: 0.25rem 0;
-  border: 0;
-  background: var(--admin-nav);
-  color: var(--admin-nav-text);
-  box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
-}
-
-@supports (top: anchor(--admin-bar bottom)) {
-  .admin-account-menu {
-    inset: anchor(--admin-bar bottom) anchor(--admin-account right) auto auto;
-  }
-}
-
-.admin-account-menu a,
-.admin-account-menu button[type='submit'] {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  margin: 0;
-  padding: 0.5rem 1rem;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  color: var(--admin-nav-text);
-  font: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.admin-account-menu a:hover,
-.admin-account-menu a:focus-visible,
-.admin-account-menu button[type='submit']:hover,
-.admin-account-menu button[type='submit']:focus-visible {
-  background: var(--admin-bar);
-  color: #72aee6;
+.admin-skip-link:focus {
+  transform: none;
+  outline-offset: -4px;
 }
 
 /* The shell: navigation column beside the screen itself. */
@@ -170,11 +105,18 @@ a {
 }
 
 .admin-nav a:hover,
-.admin-nav a:focus {
+.admin-nav a:focus-visible {
   background: var(--admin-bar);
   color: #72aee6;
 }
 
+/* Each entry fills the column, so its ring is drawn inside it. */
+
+.admin-nav a:focus-visible {
+  outline-color: var(--admin-focus-on-dark);
+  outline-offset: -2px;
+}
+
 .admin-nav a[aria-current='page'] {
   background: var(--admin-nav-current);
   color: #fff;
@@ -193,12 +135,12 @@ a {
 }
 
 .admin-nav-open > .admin-nav-heading {
-  background: #1d2327;
+  background: var(--admin-nav-open);
   color: #fff;
 }
 
 .admin-nav-children {
-  background: #32373c;
+  background: var(--admin-nav-children);
   font-size: 0.95em;
 }
 
@@ -283,6 +225,12 @@ h2 {
   border-left-color: var(--admin-error);
 }
 
+/* Done, but with something still to fix: a post published with an image
+   nobody has described. */
+.admin-flash-warning {
+  border-left-color: var(--admin-warning);
+}
+
 /* Panels, the box every group of things on the dashboard sits in. */
 
 .admin-panels {
@@ -336,6 +284,12 @@ h2 {
   border-collapse: collapse;
 }
 
+.admin-list caption:not(.admin-visually-hidden) {
+  padding: 0.4rem 0;
+  text-align: left;
+  font-weight: 600;
+}
+
 .admin-list th {
   text-align: left;
   color: var(--admin-muted);
@@ -430,6 +384,25 @@ button[type='submit']:hover,
   border-left: 4px solid var(--admin-error);
 }
 
+/* A refused form's summary: what went wrong as its heading, and a link to
+   each field to put right. It takes focus on load, so the outline says
+   where the keyboard now is. */
+
+.admin-error-summary h2 {
+  margin: 0;
+  font-size: 1em;
+}
+
+.admin-error-summary ul {
+  margin: 0.4rem 0 0;
+  padding-left: 1.25rem;
+}
+
+.admin-error-summary:focus {
+  outline: 2px solid var(--admin-error);
+  outline-offset: 2px;
+}
+
 .admin-note {
   color: var(--admin-muted);
 }
@@ -994,6 +967,32 @@ button[type='submit']:hover,
   min-width: 18rem;
 }
 
+/* An image's alt text, edited in its row. The state underneath says what
+   inserting it will do, and a missing one reads as a problem. */
+
+.admin-media-alt {
+  min-width: 16rem;
+}
+
+.admin-media-alt form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem 0.6rem;
+}
+
+.admin-media-alt input[type='text'] {
+  flex: 1 1 100%;
+}
+
+.admin-media-alt .admin-status {
+  flex: 1 1 100%;
+}
+
+.admin-status-missing {
+  color: var(--admin-error);
+}
+
 /* The copy control: a readonly field that works on its own, and a button that
    copy.js reveals. The field is monospaced because what is in it is a URL or a
    line of Markdown, and both are read character by character. */

package/dist/admin/comments.js

@@ -208,7 +208,8 @@ function removedNote(redacted) {
 }
 /** The files and the index this request writes through. */
 function recordsOf(c) {
-    return { admin: c.var.admin, contentDir: c.var.config.contentDir };
+    const { contentDir, dataDir } = c.var.config;
+    return { admin: c.var.admin, contentDir, dataDir };
 }
 /** One stored comment as the screen shows it. */
 function commentRow(c, comment) {