@geekity/cms 0.21.0 → 0.22.0

package/admin/pages/documents/editor.njk

@@ -7,48 +7,33 @@
 {% block title %}{{ heading }}{% endblock %}
 
 {% import "components/fields.njk" as field %}
+{% from "components/alert.njk" import alert %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/card.njk" import card, cardActions %}
+{% from "components/collapse.njk" import collapse %}
 
-{# The legend repeats the summary so every box in it is still announced with
-   the name of its group. #}
-{% macro group(name, open, class='admin-editor-group') %}
-<details class="{{ class }}"{% if open %} open{% endif %}>
-  <summary>{{ name }}</summary>
-  <fieldset>
-    <legend class="admin-visually-hidden">{{ name }}</legend>
-{{ caller() }}
-  </fieldset>
-</details>
-{% endmacro %}
-
-{% macro invalid(id, hint='') -%}
-{% if errorField == id %} aria-invalid="true" aria-describedby="{{ id }}-error{% if hint %} {{ hint }}{% endif %}"{% elif hint %} aria-describedby="{{ hint }}"{% endif %}
-{%- endmacro %}
-
-{% macro problem(id) %}
-{% if errorField == id %}<p class="admin-field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
-{% endmacro %}
+{% set ACTION_COLORS = { 'publish': 'primary', 'update': 'primary', 'trash': 'error' } %}
+{% set ACTION_STYLES = { 'trash': 'ghost' } %}
 
 {% macro citedCard(property) %}
-{% set card = citedPreviews[property] %}
-{% if card %}
-<div class="admin-cited-card">
-  <img src="{{ card.picture.src }}" alt="" width="{{ card.picture.width }}" height="{{ card.picture.height }}" loading="lazy">
-  <p class="admin-cited-title">{{ card.name }}</p>
-  <input type="checkbox" id="editor-preview-{{ property }}" name="preview" value="hide"{% if form.previewHidden %} checked{% endif %}>
-  <label class="admin-cited-remove" for="editor-preview-{{ property }}"><span aria-hidden="true">×</span><span class="admin-visually-hidden">Remove the preview of {{ card.name }}</span></label>
-  <p class="admin-cited-removed">Removed. The post shows the plain citation until you select the X again.</p>
-  {%- if card.described %}
-  <label for="editor-cited-alt">Alt text of the reposted image</label>
-  <input id="editor-cited-alt" name="cited-alt" type="text" value="{{ form.citedAlt or form.title }}"{{ invalid('editor-cited-alt', 'editor-cited-alt-hint') }} />
-  {{ problem('editor-cited-alt') }}
-  <p class="admin-hint" id="editor-cited-alt-hint">What the image shows, for readers who cannot see it. It starts as the post’s title.</p>
-  {%- endif %}
-</div>
+{% set cited = citedPreviews[property] %}
+{% if cited %}
+{% call card(size='sm', style='border') %}
+  {# First: Tailwind's `peer-*` variants reach later siblings only. #}
+  <input class="peer sr-only" type="checkbox" id="editor-preview-{{ property }}" name="preview" value="hide"{% if form.previewHidden %} checked{% endif %}>
+  <label class="btn btn-circle btn-xs absolute end-2 top-2 peer-checked:btn-neutral peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-base-content" for="editor-preview-{{ property }}"><span aria-hidden="true">×</span><span class="sr-only">Remove the preview of {{ cited.name }}</span></label>
+  <img class="h-auto max-h-32 w-full rounded-box object-cover peer-checked:opacity-40" src="{{ cited.picture.src }}" alt="" width="{{ cited.picture.width }}" height="{{ cited.picture.height }}" loading="lazy">
+  <p class="break-words pe-8 peer-checked:opacity-40">{{ cited.name }}</p>
+  <p class="label hidden whitespace-normal peer-checked:block">Removed. The post shows the plain citation until you select the X again.</p>
+  {% if cited.described %}
+  {{ field.text('editor-cited-alt', 'cited-alt', 'Alt text of the reposted image', value=(form.citedAlt or form.title), error=(error if errorField == 'editor-cited-alt' else ''), hint='What the image shows, for readers who cannot see it. It starts as the post’s title.', hintId='editor-cited-alt-hint') }}
+  {% endif %}
+{% endcall %}
 {% endif %}
 {% endmacro %}
 
 {% block content %}
-  <h1>{{ heading }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
 
   {% if error and errorField %}
     {% call field.summary('Nothing was saved. Fix the field marked below and try again.') %}
@@ -58,15 +43,22 @@
     {{ field.summary(error) }}
   {% endif %}
 
-  {% if trashed %}
-    <p class="admin-note">This {{ kind.singular }} is in the trash. The public site is not serving it.</p>
-  {% endif %}
-
-  {% if scheduledFor %}
-    <p class="admin-note">Scheduled for {{ scheduledFor }}. The public site starts serving it then, and the followers are told then.</p>
+  {% if trashed or scheduledFor %}
+    <div class="my-6 flex flex-col gap-2">
+      {% if trashed %}
+        {% call alert(color='warning', polite=true) %}
+          <span>This {{ kind.singular }} is in the trash. The public site is not serving it.</span>
+        {% endcall %}
+      {% endif %}
+      {% if scheduledFor %}
+        {% call alert(color='info', polite=true) %}
+          <span>Scheduled for {{ scheduledFor }}. The public site starts serving it then, and the followers are told then.</span>
+        {% endcall %}
+      {% endif %}
+    </div>
   {% endif %}
 
-  <form class="admin-editor" method="post" action="{{ saveUrl }}">
+  <form class="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]" method="post" action="{{ saveUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
     {# The hash of the file this form was filled in from. A save whose hash no
        longer matches what is on disk is refused rather than overwriting
@@ -75,54 +67,42 @@
     {# Which layout the preview renders through. The save handler ignores it. #}
     <input type="hidden" name="type" value="{{ kind.type }}" />
 
-    <div class="admin-editor-main">
-      <label for="editor-title">Title</label>
-      {#- A post may go without one, and is then a note; a page is always named. -#}
-      <input id="editor-title" name="title" type="text" value="{{ form.title }}"{% if kind.type == "page" %} required{% endif %} autofocus{{ invalid('editor-title') }} />
-      {{ problem('editor-title') }}
-      {% if kind.type == "post" %}
-      <p class="admin-hint">Leave it empty to write a note: the post is then its words, and takes its slug from the first of them.</p>
-      {% endif %}
-
-      <label for="editor-body">Body</label>
-      <textarea id="editor-body" name="body" rows="24">{{ form.body }}</textarea>
-
-      {# Everything the editor's own script needs, on the element it hangs off.
-         With JavaScript off this is one button that posts the form to the
-         preview in a new tab, which is a preview. With it on, editor.js takes
-         the button over, puts CodeMirror on the textarea above and adds the
-         tabs and the upload control beside it. #}
-      <div
-        class="admin-editor-tools"
-        id="editor-enhance"
-        data-preview-url="{{ previewUrl }}"
-        data-upload-url="{{ uploadUrl }}"
-        data-kind="{{ kind.type }}"
-      >
-        <button
-          type="submit"
-          id="editor-preview-fallback"
-          class="admin-button-quiet"
-          formaction="{{ previewUrl }}"
-          formtarget="_blank"
-          formnovalidate
-        >Preview</button>
-      </div>
+    <div class="flex min-w-0 flex-col gap-4">
+      {% call card() %}
+        {% set titleHint %}{% if kind.type == "post" %}Leave it empty to write a note: the post is then its words, and takes its slug from the first of them.{% endif %}{% endset %}
+        {#- A post may go without one, and is then a note; a page is always named. -#}
+        {{ field.text('editor-title', 'title', 'Title', value=form.title, required=(kind.type == "page"), autofocus=true, error=(error if errorField == 'editor-title' else ''), hint=titleHint) }}
+
+        {{ field.textarea('editor-body', 'body', 'Body', value=form.body, rows=24) }}
+
+        {# Everything the editor's own script needs, on the element it hangs
+           off. With JavaScript off this is one button that posts the form to
+           the preview in a new tab, which is a preview. With it on, editor.js
+           takes the button over, puts CodeMirror on the textarea above and
+           adds the Write and Preview tabs, the upload control and its status
+           line here. #}
+        <div
+          class="flex flex-wrap items-center gap-2"
+          id="editor-enhance"
+          data-preview-url="{{ previewUrl }}"
+          data-upload-url="{{ uploadUrl }}"
+          data-kind="{{ kind.type }}"
+        >
+          {{ button('Preview', type='submit', id='editor-preview-fallback', style='soft', formaction=previewUrl, formtarget='_blank', formnovalidate=true) }}
+        </div>
+      {% endcall %}
 
       {% if kind.type == "post" %}
-        {% call group('Photos', open.photos) %}
-          <p class="admin-hint">
+        {% call collapse('Photos', open.photos, fields=true) %}
+          <p class="label block whitespace-normal text-xs">
             Each is an image in the media library or an address starting https://. Leave the alt text
             empty to use the media library’s. Empty an address to remove that photo.
           </p>
           {% for row in photoRows %}
             {% set n = loop.index0 %}
-            {% call group('Photo ' + loop.index if row.url else 'Add a photo', row.url, 'admin-editor-group admin-editor-row') %}
-              <label for="editor-photo-url-{{ n }}">Address</label>
-              <input id="editor-photo-url-{{ n }}" name="{{ photoFields.url }}{{ n }}" type="text" value="{{ row.url }}" list="editor-photo-uploads" autocomplete="off"{{ invalid('editor-photo-url-' + n) }} />
-              {{ problem('editor-photo-url-' + n) }}
-              <label for="editor-photo-alt-{{ n }}">Alt text</label>
-              <input id="editor-photo-alt-{{ n }}" name="{{ photoFields.alt }}{{ n }}" type="text" value="{{ row.alt }}"{% if row.libraryAlt %} placeholder="{{ row.libraryAlt }}"{% endif %} />
+            {% call collapse(('Photo ' + loop.index) if row.url else 'Add a photo', row.url, fields=true) %}
+              {{ field.text('editor-photo-url-' + n, photoFields.url + n, 'Address', value=row.url, list='editor-photo-uploads', autocomplete='off', error=(error if errorField == ('editor-photo-url-' + n) else '')) }}
+              {{ field.text('editor-photo-alt-' + n, photoFields.alt + n, 'Alt text', value=row.alt, placeholder=row.libraryAlt) }}
             {% endcall %}
           {% endfor %}
           <datalist id="editor-photo-uploads">
@@ -132,100 +112,61 @@
           </datalist>
         {% endcall %}
 
-        {% call group('Location', open.location) %}
-          <p class="admin-hint">
+        {% call collapse('Location', open.location, fields=true) %}
+          <p class="label block whitespace-normal text-xs">
             Kept in <code>data/locations.json</code>, not in the post’s file. What readers see of it
             is chosen on Settings &gt; Privacy. Empty every box to remove it.
           </p>
-          <button type="button" id="editor-location-here" class="admin-location-here" hidden>Use my location</button>
-          <p id="editor-location-status" class="admin-hint" role="status"></p>
-          <label for="editor-location-geo">Coordinates</label>
-          <input id="editor-location-geo" name="{{ locationFields.geo }}" type="text" value="{{ form.location.geo }}" placeholder="48.85837, 2.29448" autocomplete="off" spellcheck="false"{{ invalid('editor-location-geo', 'editor-location-geo-hint') }} />
-          {{ problem('editor-location-geo') }}
-          <p class="admin-hint" id="editor-location-geo-hint">Latitude, longitude, as decimal degrees. A <code>geo:</code> URI works too.</p>
-          <label for="editor-location-accuracy">Accuracy</label>
-          <input id="editor-location-accuracy" name="{{ locationFields.accuracy }}" type="text" inputmode="numeric" value="{{ form.location.accuracy }}" autocomplete="off"{{ invalid('editor-location-accuracy', 'editor-location-accuracy-hint') }} />
-          {{ problem('editor-location-accuracy') }}
-          <p class="admin-hint" id="editor-location-accuracy-hint">Metres. Leave it empty if you do not know.</p>
-          <label for="editor-location-name">Place</label>
-          <input id="editor-location-name" name="{{ locationFields.name }}" type="text" value="{{ form.location.name }}" />
-          <label for="editor-location-locality">Locality</label>
-          <input id="editor-location-locality" name="{{ locationFields.locality }}" type="text" value="{{ form.location.locality }}" />
-          <label for="editor-location-region">Region</label>
-          <input id="editor-location-region" name="{{ locationFields.region }}" type="text" value="{{ form.location.region }}" />
-          <label for="editor-location-country">Country</label>
-          <input id="editor-location-country" name="{{ locationFields.country }}" type="text" value="{{ form.location.country }}" />
-          <p class="admin-check">
-            <input id="editor-location-checkin" name="{{ locationFields.checkin }}" type="checkbox" value="1"{% if form.location.checkin %} checked{% endif %} aria-describedby="editor-location-checkin-hint" />
-            <label for="editor-location-checkin">A check-in</label>
-          </p>
-          <p class="admin-hint" id="editor-location-checkin-hint">A Micropub app sent it as a checkin, and reads it back as one. Readers see it as any other location.</p>
+          <div>
+            {{ button('Use my location', id='editor-location-here', style='soft', hidden=true) }}
+          </div>
+          <p id="editor-location-status" class="label block whitespace-normal text-xs" role="status"></p>
+          {{ field.text('editor-location-geo', locationFields.geo, 'Coordinates', value=form.location.geo, placeholder='48.85837, 2.29448', autocomplete='off', spellcheck='false', error=(error if errorField == 'editor-location-geo' else ''), hint='Latitude, longitude, as decimal degrees. A <code>geo:</code> URI works too.', hintId='editor-location-geo-hint') }}
+          {{ field.text('editor-location-accuracy', locationFields.accuracy, 'Accuracy', value=form.location.accuracy, inputmode='numeric', autocomplete='off', error=(error if errorField == 'editor-location-accuracy' else ''), hint='Metres. Leave it empty if you do not know.', hintId='editor-location-accuracy-hint') }}
+          {{ field.text('editor-location-name', locationFields.name, 'Place', value=form.location.name) }}
+          {{ field.text('editor-location-locality', locationFields.locality, 'Locality', value=form.location.locality) }}
+          {{ field.text('editor-location-region', locationFields.region, 'Region', value=form.location.region) }}
+          {{ field.text('editor-location-country', locationFields.country, 'Country', value=form.location.country) }}
+          {{ field.checkbox('editor-location-checkin', locationFields.checkin, 'A check-in', checked=form.location.checkin, hint='A Micropub app sent it as a checkin, and reads it back as one. Readers see it as any other location.', hintId='editor-location-checkin-hint') }}
         {% endcall %}
 
-        {% call group('Recording', open.recording) %}
-          <label for="editor-enclosure-url">Audio or video file</label>
-          <select id="editor-enclosure-url" name="{{ enclosureFields.url }}"{{ invalid('editor-enclosure-url', 'editor-enclosure-url-hint') }}>
+        {% call collapse('Recording', open.recording, fields=true) %}
+          {% call field.select('editor-enclosure-url', enclosureFields.url, 'Audio or video file', error=(error if errorField == 'editor-enclosure-url' else ''), hint='Upload the file to the media library first. Feeds carry it as the post’s enclosure and the post page plays it. None removes the recording, its transcript and its other versions.', hintId='editor-enclosure-url-hint') %}
             <option value=""{% if form.enclosure.url == "" %} selected{% endif %}>None</option>
             {% for choice in enclosureChoices.media %}
               <option value="{{ choice.url }}"{% if choice.url == form.enclosure.url %} selected{% endif %}>{{ choice.label }}</option>
             {% endfor %}
-          </select>
-          {{ problem('editor-enclosure-url') }}
-          <p class="admin-hint" id="editor-enclosure-url-hint">
-            Upload the file to the media library first. Feeds carry it as the post’s enclosure and the
-            post page plays it. None removes the recording, its transcript and its other versions.
-          </p>
+          {% endcall %}
 
-          <label for="editor-enclosure-duration">Duration</label>
-          <input id="editor-enclosure-duration" name="{{ enclosureFields.duration }}" type="text" inputmode="numeric" value="{{ form.enclosure.duration }}" autocomplete="off"{{ invalid('editor-enclosure-duration', 'editor-enclosure-duration-hint') }} />
-          {{ problem('editor-enclosure-duration') }}
-          <p class="admin-hint" id="editor-enclosure-duration-hint">Seconds, or 30:34, or 1:02:03. Leave it empty if you do not know.</p>
+          {{ field.text('editor-enclosure-duration', enclosureFields.duration, 'Duration', value=form.enclosure.duration, inputmode='numeric', autocomplete='off', error=(error if errorField == 'editor-enclosure-duration' else ''), hint='Seconds, or 30:34, or 1:02:03. Leave it empty if you do not know.', hintId='editor-enclosure-duration-hint') }}
 
-          <label for="editor-enclosure-transcript">Transcript or captions</label>
-          <input id="editor-enclosure-transcript" name="{{ enclosureFields.transcriptUrl }}" type="text" value="{{ form.enclosure.transcriptUrl }}" list="editor-transcript-uploads" autocomplete="off"{{ invalid('editor-enclosure-transcript', 'editor-enclosure-transcript-hint') }} />
-          {{ problem('editor-enclosure-transcript') }}
+          {{ field.text('editor-enclosure-transcript', enclosureFields.transcriptUrl, 'Transcript or captions', value=form.enclosure.transcriptUrl, list='editor-transcript-uploads', autocomplete='off', error=(error if errorField == 'editor-enclosure-transcript' else ''), hintId='editor-enclosure-transcript-hint') }}
           <datalist id="editor-transcript-uploads">
             {% for url in enclosureChoices.transcripts %}
               <option value="{{ url }}"></option>
             {% endfor %}
           </datalist>
-          <label for="editor-enclosure-transcript-type">Transcript type</label>
-          <select id="editor-enclosure-transcript-type" name="{{ enclosureFields.transcriptType }}"{{ invalid('editor-enclosure-transcript-type', 'editor-enclosure-transcript-hint') }}>
+          {% call field.select('editor-enclosure-transcript-type', enclosureFields.transcriptType, 'Transcript type', error=(error if errorField == 'editor-enclosure-transcript-type' else ''), hint='A .vtt, .srt or .txt file in the media library, or an address starting https://. A linked transcript needs its type.', hintId='editor-enclosure-transcript-hint') %}
             <option value=""{% if form.enclosure.transcriptType == "" %} selected{% endif %}>From the file</option>
             {% for type in transcriptTypes %}
               <option value="{{ type }}"{% if type == form.enclosure.transcriptType %} selected{% endif %}>{{ type }}</option>
             {% endfor %}
-          </select>
-          {{ problem('editor-enclosure-transcript-type') }}
-          <p class="admin-hint" id="editor-enclosure-transcript-hint">
-            A .vtt, .srt or .txt file in the media library, or an address starting https://. A linked
-            transcript needs its type.
-          </p>
+          {% endcall %}
 
-          {% call group('Other versions', open.versions) %}
-            <p class="admin-hint">
+          {% call collapse('Other versions', open.versions, fields=true) %}
+            <p class="label block whitespace-normal text-xs">
               A video of an audio episode, a smaller file, another language. Each is a file in the media
               library or an address starting https://, which needs its type. Empty an address to remove
               that version.
             </p>
             {% for row in alternateRows %}
               {% set n = loop.index0 %}
-              {% call group('Version ' + loop.index if row.url else 'Add a version', row.url, 'admin-editor-group admin-editor-row') %}
-                <label for="editor-alternate-url-{{ n }}">Address</label>
-                <input id="editor-alternate-url-{{ n }}" name="{{ enclosureFields.alternate.url }}{{ n }}" type="text" value="{{ row.url }}" list="editor-media-uploads" autocomplete="off"{{ invalid('editor-alternate-url-' + n) }} />
-                {{ problem('editor-alternate-url-' + n) }}
-                <label for="editor-alternate-type-{{ n }}">Type</label>
-                <input id="editor-alternate-type-{{ n }}" name="{{ enclosureFields.alternate.type }}{{ n }}" type="text" value="{{ row.type }}" placeholder="video/mp4" autocomplete="off" spellcheck="false"{{ invalid('editor-alternate-type-' + n) }} />
-                {{ problem('editor-alternate-type-' + n) }}
-                <label for="editor-alternate-title-{{ n }}">Title</label>
-                <input id="editor-alternate-title-{{ n }}" name="{{ enclosureFields.alternate.title }}{{ n }}" type="text" value="{{ row.title }}" maxlength="32"{{ invalid('editor-alternate-title-' + n) }} />
-                {{ problem('editor-alternate-title-' + n) }}
-                <label for="editor-alternate-height-{{ n }}">Height</label>
-                <input id="editor-alternate-height-{{ n }}" name="{{ enclosureFields.alternate.height }}{{ n }}" type="text" inputmode="numeric" value="{{ row.height }}" autocomplete="off"{{ invalid('editor-alternate-height-' + n) }} />
-                {{ problem('editor-alternate-height-' + n) }}
-                <label for="editor-alternate-lang-{{ n }}">Language</label>
-                <input id="editor-alternate-lang-{{ n }}" name="{{ enclosureFields.alternate.lang }}{{ n }}" type="text" value="{{ row.lang }}" autocomplete="off" spellcheck="false"{{ invalid('editor-alternate-lang-' + n) }} />
-                {{ problem('editor-alternate-lang-' + n) }}
+              {% call collapse(('Version ' + loop.index) if row.url else 'Add a version', row.url, fields=true) %}
+                {{ field.text('editor-alternate-url-' + n, enclosureFields.alternate.url + n, 'Address', value=row.url, list='editor-media-uploads', autocomplete='off', error=(error if errorField == ('editor-alternate-url-' + n) else '')) }}
+                {{ field.text('editor-alternate-type-' + n, enclosureFields.alternate.type + n, 'Type', value=row.type, placeholder='video/mp4', autocomplete='off', spellcheck='false', error=(error if errorField == ('editor-alternate-type-' + n) else '')) }}
+                {{ field.text('editor-alternate-title-' + n, enclosureFields.alternate.title + n, 'Title', value=row.title, maxlength='32', error=(error if errorField == ('editor-alternate-title-' + n) else '')) }}
+                {{ field.text('editor-alternate-height-' + n, enclosureFields.alternate.height + n, 'Height', value=row.height, inputmode='numeric', autocomplete='off', error=(error if errorField == ('editor-alternate-height-' + n) else '')) }}
+                {{ field.text('editor-alternate-lang-' + n, enclosureFields.alternate.lang + n, 'Language', value=row.lang, autocomplete='off', spellcheck='false', error=(error if errorField == ('editor-alternate-lang-' + n) else '')) }}
               {% endcall %}
             {% endfor %}
             <datalist id="editor-media-uploads">
@@ -238,31 +179,29 @@
       {% endif %}
     </div>
 
-    <div class="admin-editor-side">
-      {% call group('Publishing', open.publishing) %}
-        <p class="admin-check">
-          <input id="editor-draft" name="draft" type="checkbox" value="1"{% if form.draft %} checked{% endif %} />
-          <label for="editor-draft">Draft</label>
-        </p>
+    <div class="flex min-w-0 flex-col gap-4">
+      {% call card(size='sm') %}
+        {% call cardActions() %}
+          {% for action in actions %}
+            {{ button(action.label, type='submit', name='action', value=action.value, color=ACTION_COLORS[action.value], style=ACTION_STYLES[action.value]) }}
+          {% endfor %}
+          {% if viewUrl %}
+            {{ buttonLink('View', viewUrl, style='ghost') }}
+          {% endif %}
+        {% endcall %}
+      {% endcall %}
+
+      {% call collapse('Publishing', open.publishing, fields=true) %}
+        {{ field.checkbox('editor-draft', 'draft', 'Draft', checked=form.draft) }}
 
         {% if kind.dated %}
-          <label for="editor-date">Date</label>
-          <input id="editor-date" name="date" type="text" value="{{ form.date }}"{{ invalid('editor-date') }} />
-          {{ problem('editor-date') }}
           {# The file holds a UTC instant; this field is that instant as the
              site's own clock reads it, so the zone has to be on the screen. #}
-          <p class="admin-hint">Wall-clock time in {{ dateZone }}. Stored as UTC.</p>
+          {% set dateHint %}Wall-clock time in {{ dateZone }}. Stored as UTC.{% endset %}
+          {{ field.text('editor-date', 'date', 'Date', value=form.date, error=(error if errorField == 'editor-date' else ''), hint=dateHint) }}
         {% endif %}
 
-        <label for="editor-visibility">Visibility</label>
-        <select id="editor-visibility" name="visibility" aria-describedby="editor-visibility-hint">
-          {% if form.visibility.unrecognized is defined %}
-            <option value="{{ form.visibility.unrecognized }}" selected>{{ form.visibility.unrecognized }} (not recognized)</option>
-          {% endif %}
-          <option value="public"{% if form.visibility == "public" %} selected{% endif %}>Public</option>
-          <option value="unlisted"{% if form.visibility == "unlisted" %} selected{% endif %}>Unlisted</option>
-        </select>
-        <p class="admin-hint" id="editor-visibility-hint">
+        {% set visibilityHint %}
           {% if form.visibility.unrecognized is defined %}
             The front matter says <code>visibility: {{ form.visibility.unrecognized }}</code>, which this
             site does not recognize. The {{ kind.singular }} is hidden until you choose Public or Unlisted:
@@ -271,20 +210,19 @@
           Unlisted writes <code>visibility: unlisted</code> into the front matter. The {{ kind.singular }}
           keeps its page and still goes to your followers, but is left off the home page, archives,
           feeds, the sitemap, search and llms.txt, and asks search engines not to index it.
-        </p>
+        {% endset %}
+        {% call field.select('editor-visibility', 'visibility', 'Visibility', hint=visibilityHint, hintId='editor-visibility-hint') %}
+          {% if form.visibility.unrecognized is defined %}
+            <option value="{{ form.visibility.unrecognized }}" selected>{{ form.visibility.unrecognized }} (not recognized)</option>
+          {% endif %}
+          <option value="public"{% if form.visibility == "public" %} selected{% endif %}>Public</option>
+          <option value="unlisted"{% if form.visibility == "unlisted" %} selected{% endif %}>Unlisted</option>
+        {% endcall %}
 
         {% if kind.type == "post" %}
           {# TASK-207: shown at the top of the author's fediverse profile, from
              the featured collection their actor links. #}
-          <p class="admin-check">
-            <input id="editor-pinned" name="pinned" type="checkbox" value="1"{% if form.pinned %} checked{% endif %}{{ invalid('editor-pinned') }} />
-            <label for="editor-pinned">Pinned</label>
-          </p>
-          {{ problem('editor-pinned') }}
-          <p class="admin-hint">
-            Writes <code>pinned:</code> and the moment you pinned it into the front matter. Pinned posts
-            show first on your fediverse profile, newest pin first, up to five.
-          </p>
+          {{ field.checkbox('editor-pinned', 'pinned', 'Pinned', checked=form.pinned, error=(error if errorField == 'editor-pinned' else ''), hint='Writes <code>pinned:</code> and the moment you pinned it into the front matter. Pinned posts show first on your fediverse profile, newest pin first, up to five.') }}
         {% endif %}
 
         {# Who the front matter says wrote this (TASK-67). A select of the site's
@@ -293,65 +231,47 @@
            and, once the actors land, whose followers hear about it. A file that
            still names somebody who has no account keeps an option of its own, so
            opening the editor cannot silently reattribute it. #}
-        <label for="editor-author">Author</label>
-        <select id="editor-author" name="author">
+        {% call field.select('editor-author', 'author', 'Author') %}
           {% for choice in authors %}
             <option value="{{ choice.value }}"{% if choice.chosen %} selected{% endif %}>{{ choice.label }}</option>
           {% endfor %}
-        </select>
+        {% endcall %}
       {% endcall %}
 
       {% if kind.tagged or kind.categorised %}
-        {% call group('Tags and categories', open.taxonomy) %}
+        {% call collapse('Tags and categories', open.taxonomy, fields=true) %}
           {% if kind.tagged %}
-            <label for="editor-tags">Tags</label>
-            <input id="editor-tags" name="tags" type="text" value="{{ form.tags }}" />
-            <p class="admin-hint">Separated by commas.</p>
+            {{ field.text('editor-tags', 'tags', 'Tags', value=form.tags, hint='Separated by commas.') }}
           {% endif %}
-
           {% if kind.categorised %}
-            <label for="editor-categories">Categories</label>
-            <input id="editor-categories" name="categories" type="text" value="{{ form.categories }}" />
-            <p class="admin-hint">Separated by commas.</p>
+            {{ field.text('editor-categories', 'categories', 'Categories', value=form.categories, hint='Separated by commas.') }}
           {% endif %}
         {% endcall %}
       {% endif %}
 
-      {% call group('Address', open.address) %}
-        <label for="editor-slug">Slug</label>
-        <input id="editor-slug" name="slug" type="text" value="{{ form.slug }}"{{ invalid('editor-slug') }} />
-        {{ problem('editor-slug') }}
-
-        <label for="editor-permalink">Permalink</label>
-        <input id="editor-permalink" name="permalink" type="text" value="{{ form.permalink }}" />
-        <p class="admin-hint">Leave it empty to let the {{ kind.singular }} take the URL its slug implies.</p>
+      {% call collapse('Address', open.address, fields=true) %}
+        {{ field.text('editor-slug', 'slug', 'Slug', value=form.slug, error=(error if errorField == 'editor-slug' else '')) }}
+        {% set permalinkHint %}Leave it empty to let the {{ kind.singular }} take the URL its slug implies.{% endset %}
+        {{ field.text('editor-permalink', 'permalink', 'Permalink', value=form.permalink, hint=permalinkHint) }}
       {% endcall %}
 
       {% if kind.type == "post" %}
-        {% call group('Responding to', open.responding) %}
+        {% call collapse('Responding to', open.responding, fields=true) %}
           {#- The mf2 `in-reply-to`: a URL here makes the post a reply, threads
               it in the fediverse and sends that page a webmention. -#}
-          <label for="editor-in-reply-to">In reply to</label>
-          <input id="editor-in-reply-to" name="in-reply-to" type="url" value="{{ form.inReplyTo }}"{{ invalid('editor-in-reply-to') }} />
-          {{ problem('editor-in-reply-to') }}
+          {{ field.text('editor-in-reply-to', 'in-reply-to', 'In reply to', value=form.inReplyTo, type='url', error=(error if errorField == 'editor-in-reply-to' else '')) }}
           {{ citedCard('in-reply-to') }}
-          <p class="admin-hint">The address of the post this one answers. Leave it empty for a post that answers nobody.</p>
+          <p class="label block whitespace-normal text-xs">The address of the post this one answers. Leave it empty for a post that answers nobody.</p>
 
           {#- The mf2 `like-of`, `repost-of` and `bookmark-of` (TASK-169): each
               cites a page the way a reply does, and sends it a webmention. -#}
-          <label for="editor-like-of">Like of</label>
-          <input id="editor-like-of" name="like-of" type="url" value="{{ form.likeOf }}"{{ invalid('editor-like-of') }} />
-          {{ problem('editor-like-of') }}
+          {{ field.text('editor-like-of', 'like-of', 'Like of', value=form.likeOf, type='url', error=(error if errorField == 'editor-like-of' else '')) }}
           {{ citedCard('like-of') }}
-          <label for="editor-repost-of">Repost of</label>
-          <input id="editor-repost-of" name="repost-of" type="url" value="{{ form.repostOf }}"{{ invalid('editor-repost-of') }} />
-          {{ problem('editor-repost-of') }}
+          {{ field.text('editor-repost-of', 'repost-of', 'Repost of', value=form.repostOf, type='url', error=(error if errorField == 'editor-repost-of' else '')) }}
           {{ citedCard('repost-of') }}
-          <label for="editor-bookmark-of">Bookmark of</label>
-          <input id="editor-bookmark-of" name="bookmark-of" type="url" value="{{ form.bookmarkOf }}"{{ invalid('editor-bookmark-of') }} />
-          {{ problem('editor-bookmark-of') }}
+          {{ field.text('editor-bookmark-of', 'bookmark-of', 'Bookmark of', value=form.bookmarkOf, type='url', error=(error if errorField == 'editor-bookmark-of' else '')) }}
           {{ citedCard('bookmark-of') }}
-          <p class="admin-hint">The address of a post this one likes, reposts or bookmarks. Leave them empty for a post that cites nothing.</p>
+          <p class="label block whitespace-normal text-xs">The address of a post this one likes, reposts or bookmarks. Leave them empty for a post that cites nothing.</p>
           {% if form.previewHidden and not (citedPreviews | length) %}
           <input type="hidden" name="preview" value="hide">
           {% endif %}
@@ -360,9 +280,8 @@
           {% endif %}
         {% endcall %}
 
-        {% call group('Read', open.read) %}
-          <label for="editor-read-status">Read status</label>
-          <select id="editor-read-status" name="{{ readFields.status }}"{{ invalid('editor-read-status') }}>
+        {% call collapse('Read', open.read, fields=true) %}
+          {% call field.select('editor-read-status', readFields.status, 'Read status', error=(error if errorField == 'editor-read-status' else '')) %}
             <option value=""{% if form.readStatus == "" %} selected{% endif %}>Not a read post</option>
             {% for status in readStatuses %}
               <option value="{{ status.value }}"{% if form.readStatus == status.value %} selected{% endif %}>{{ status.label }}</option>
@@ -370,47 +289,33 @@
             {% if unrecognizedReadStatus %}
               <option value="{{ unrecognizedReadStatus }}" selected>{{ unrecognizedReadStatus }} (not recognized)</option>
             {% endif %}
-          </select>
-          {{ problem('editor-read-status') }}
-          <label for="editor-read-of-name">Title</label>
-          <input id="editor-read-of-name" name="{{ readFields.name }}" type="text" value="{{ form.readOf.name }}"{{ invalid('editor-read-of-name') }} />
-          {{ problem('editor-read-of-name') }}
-          <label for="editor-read-of-author">Author</label>
-          <input id="editor-read-of-author" name="{{ readFields.author }}" type="text" value="{{ form.readOf.author }}" />
-          <label for="editor-read-of-uid">Identifier</label>
-          <input id="editor-read-of-uid" name="{{ readFields.uid }}" type="text" value="{{ form.readOf.uid }}" placeholder="isbn:9780441478125" autocomplete="off" spellcheck="false" />
-          <label for="editor-read-of-url">Address</label>
-          <input id="editor-read-of-url" name="{{ readFields.url }}" type="url" value="{{ form.readOf.url }}"{{ invalid('editor-read-of-url') }} />
-          {{ problem('editor-read-of-url') }}
-          <p class="admin-hint">A book or paper this post says its author read. An identifier is an ISBN or a DOI, written isbn:… or doi:…. Choose Not a read post and empty every box to remove it. A read is described by what it says, so leave its Description empty.</p>
+          {% endcall %}
+          {{ field.text('editor-read-of-name', readFields.name, 'Title', value=form.readOf.name, error=(error if errorField == 'editor-read-of-name' else '')) }}
+          {{ field.text('editor-read-of-author', readFields.author, 'Author', value=form.readOf.author) }}
+          {{ field.text('editor-read-of-uid', readFields.uid, 'Identifier', value=form.readOf.uid, placeholder='isbn:9780441478125', autocomplete='off', spellcheck='false') }}
+          {{ field.text('editor-read-of-url', readFields.url, 'Address', value=form.readOf.url, type='url', error=(error if errorField == 'editor-read-of-url' else '')) }}
+          <p class="label block whitespace-normal text-xs">A book or paper this post says its author read. An identifier is an ISBN or a DOI, written isbn:… or doi:…. Choose Not a read post and empty every box to remove it. A read is described by what it says, so leave its Description empty.</p>
         {% endcall %}
       {% endif %}
 
-      {% call group('Summary and language', open.summary) %}
-        <label for="editor-description">Description</label>
-        <input id="editor-description" name="description" type="text" value="{{ form.description }}"{{ invalid('editor-description') }} />
-        {{ problem('editor-description') }}
+      {% call collapse('Summary and language', open.summary, fields=true) %}
+        {{ field.text('editor-description', 'description', 'Description', value=form.description, error=(error if errorField == 'editor-description' else '')) }}
 
         {#- The `lang` front matter (TASK-154): a post or page written in another
             language than the site's says so, for screen readers, translation
             and fediverse language filters. -#}
-        <label for="editor-lang">Language</label>
-        <input id="editor-lang" name="lang" type="text" value="{{ form.lang }}" autocomplete="off" spellcheck="false"{{ invalid('editor-lang', 'editor-lang-hint') }} />
-        {{ problem('editor-lang') }}
-        <p class="admin-hint" id="editor-lang-hint">A language tag, such as fr or pt-BR. Leave it empty for the site’s language, {{ siteLanguage }}.</p>
+        {% set langHint %}A language tag, such as fr or pt-BR. Leave it empty for the site’s language, {{ siteLanguage }}.{% endset %}
+        {{ field.text('editor-lang', 'lang', 'Language', value=form.lang, autocomplete='off', spellcheck='false', error=(error if errorField == 'editor-lang' else ''), hint=langHint, hintId='editor-lang-hint') }}
       {% endcall %}
 
       {% if kind.type == "post" and syndicationTargets.length %}
         {# TASK-155: the targets content/_data/syndicationTargets.json declares.
            A target whose tag the post carries is selected without a tick. #}
-        {% call group('Syndicate to', open.syndication) %}
+        {% call collapse('Syndicate to', open.syndication, fields=true) %}
           {% for target in syndicationTargets %}
-            <p class="admin-check">
-              <input id="editor-{{ target.field }}" name="{{ target.field }}" type="checkbox" value="1"{% if target.checked %} checked{% endif %} />
-              <label for="editor-{{ target.field }}">{{ target.name }}</label>
-            </p>
+            {{ field.checkbox('editor-' + target.field, target.field, target.name | escape, checked=target.checked) }}
           {% endfor %}
-          <p class="admin-hint">
+          <p class="label block whitespace-normal text-xs">
             Writes <code>syndicate-to:</code> into the front matter. The post links to each target and
             sends it a webmention when it is published or updated. A post tagged with a target’s tag is
             sent there without a tick.
@@ -418,55 +323,30 @@
         {% endcall %}
       {% endif %}
 
-      {% call group('Display and discussion', open.display) %}
+      {% call collapse('Display and discussion', open.display, fields=true) %}
         {# What this document says about comments, if anything. Three answers
            rather than two: the site's own rules, always open, always closed. #}
-        <label for="editor-comments">Comments</label>
-        <select id="editor-comments" name="comments">
+        {% call field.select('editor-comments', 'comments', 'Comments', hint='Writes <code>comments: true</code> or <code>comments: false</code> into the front matter, which beats the site’s switch and its closing window in both directions. Fediverse replies are shown either way.') %}
           <option value="{{ commentSettings.site }}"{% if form.comments == commentSettings.site %} selected{% endif %}>Follow the site settings</option>
           <option value="{{ commentSettings.open }}"{% if form.comments == commentSettings.open %} selected{% endif %}>Open</option>
           <option value="{{ commentSettings.closed }}"{% if form.comments == commentSettings.closed %} selected{% endif %}>Closed</option>
-        </select>
-        <p class="admin-hint">
-          Writes <code>comments: true</code> or <code>comments: false</code> into the front matter,
-          which beats the site's switch and its closing window in both directions. Fediverse replies
-          are shown either way.
-        </p>
+        {% endcall %}
 
         {% if kind.excludable %}
           {# doc-2's eleventyExcludeFromCollections: still published and still at
              its URL, but out of every collection a template lists from. #}
-          <p class="admin-check">
-            <input id="editor-exclude" name="exclude" type="checkbox" value="1"{% if form.exclude %} checked{% endif %} />
-            <label for="editor-exclude">Hide from collections</label>
-          </p>
-          <p class="admin-hint">Keeps the {{ kind.singular }} out of listings that gather content, without unpublishing it.</p>
+          {% set excludeHint %}Keeps the {{ kind.singular }} out of listings that gather content, without unpublishing it.{% endset %}
+          {{ field.checkbox('editor-exclude', 'exclude', 'Hide from collections', checked=form.exclude, hint=excludeHint) }}
         {% endif %}
 
         {% if kind.contactable %}
           {# The page offers a contact form under its content (TASK-56). Where a
              message goes is the contact address on the Settings screen; it is
              never on this page or in its HTML. #}
-          <p class="admin-check">
-            <input id="editor-contact" name="contact" type="checkbox" value="1"{% if form.contact %} checked{% endif %} />
-            <label for="editor-contact">Contact form</label>
-          </p>
-          <p class="admin-hint">
-            Writes <code>contact: true</code> into the front matter and puts a name, email, subject
-            and message form under this {{ kind.singular }}. Messages arrive on the Messages screen
-            and are emailed to the contact address on Settings.
-          </p>
+          {% set contactHint %}Writes <code>contact: true</code> into the front matter and puts a name, email, subject and message form under this {{ kind.singular }}. Messages arrive on the Messages screen and are emailed to the contact address on Settings.{% endset %}
+          {{ field.checkbox('editor-contact', 'contact', 'Contact form', checked=form.contact, hint=contactHint) }}
         {% endif %}
       {% endcall %}
-
-      <p class="admin-editor-buttons">
-        {% for button in actions %}
-          <button type="submit" name="action" value="{{ button.value }}">{{ button.label }}</button>
-        {% endfor %}
-        {% if viewUrl %}
-          <a class="admin-button admin-button-quiet" href="{{ viewUrl }}">View</a>
-        {% endif %}
-      </p>
     </div>
   </form>