@geekity/cms 0.21.0 → 0.22.0

package/admin/pages/navigation/menus.njk

@@ -2,88 +2,100 @@
 
    Two lists, and a menu is in exactly one of them. First the areas the active
    theme declares, in the theme's own order and under the theme's own labels,
-   each a box to type links into — an area the site has never filled in is an
-   empty box rather than a missing one. Then every other menu the site stores,
-   under a heading that says this theme renders them nowhere, each with a
-   Delete, which is the only way a menu is removed. #}
+   each a card with a box to type links into: an area the site has never
+   filled in is an empty box rather than a missing one. Then every other menu
+   the site stores, under a heading that says this theme renders them nowhere,
+   each with a Delete, which is the only way a menu is removed. Each save, add
+   and delete is a form of its own, so a refused one loses nothing typed into
+   another. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import badge %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block title %}{{ heading }}{% endblock %}
 
-{# One menu: its heading, the box its items are typed into, and the button
-   that saves it. `extra` is whatever else belongs under the box — the Delete
-   form, on a menu nothing renders. #}
-{% macro box(menu, fields, url, csrfToken, extra='') %}
-  <li class="admin-menu-box">
-    <h3>{{ menu.label }}</h3>
-
-    <p class="admin-menu-name">
-      <code>menus.{{ menu.name }}</code>
-      {% if menu.stored %}
-        <span class="admin-status">{{ menu.count }} item{% if menu.count != 1 %}s{% endif %}</span>
-      {% else %}
-        <span class="admin-status">empty — nothing has been typed here yet</span>
-      {% endif %}
-    </p>
-
-    <form method="post" action="{{ url }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
-      {% set itemsHint %}
-        One item per line, written <code>Label | URL</code> &mdash; for example
-        <code>About | /about/</code> or
-        <code>Mastodon | https://example.social/@me</code>. They are the whole of
-        this menu, in this order: nothing else puts a link in it. A page serving
-        as the front page goes in as <code>Home | /</code>, where a reader lands.
-        End a line with the
-        <code>rel</code> values the link carries, a word each &mdash;
-        <code>Mastodon | https://example.social/@me | me</code>,
-        <code>A source | https://example.com/thing | nofollow noopener</code>.
-        <code>me</code> marks <strong>a profile that is you</strong>, which is
-        how Mastodon and the rest of the IndieWeb verify that the site and the
-        profile it links are the same person; the rest are whatever HTML link
-        types you want on it.
-      {% endset %}
-      {{ field.textarea('menu-' + menu.name, fields.items, 'Items', menu.items,
-           error=menu.problem, hint=itemsHint, rows='5', spellcheck='false') }}
-      <p class="admin-menu-buttons">
-        <button type="submit">Save menu</button>
+{# One menu: its card, the box its items are typed into, and the button that
+   saves it. `kept` adds the Delete form, on a menu nothing renders. #}
+{% macro box(menu, fields, url, deleteUrl, csrfToken, kept=false) %}
+  <li>
+    {% call card(title=menu.label) %}
+      <p class="flex flex-wrap items-center gap-2">
+        <code>menus.{{ menu.name }}</code>
+        {% if menu.stored %}
+          {{ badge(menu.count + (' item' if menu.count == 1 else ' items'), style='outline') }}
+        {% else %}
+          {{ badge('empty — nothing has been typed here yet', style='ghost') }}
+        {% endif %}
       </p>
-    </form>
 
-    {{ extra | safe }}
+      <form method="post" action="{{ url }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
+        {% set itemsHint %}
+          One item per line, written <code>Label | URL</code> &mdash; for example
+          <code>About | /about/</code> or
+          <code>Mastodon | https://example.social/@me</code>. They are the whole of
+          this menu, in this order: nothing else puts a link in it. A page serving
+          as the front page goes in as <code>Home | /</code>, where a reader lands.
+          End a line with the
+          <code>rel</code> values the link carries, a word each &mdash;
+          <code>Mastodon | https://example.social/@me | me</code>,
+          <code>A source | https://example.com/thing | nofollow noopener</code>.
+          <code>me</code> marks <strong>a profile that is you</strong>, which is
+          how Mastodon and the rest of the IndieWeb verify that the site and the
+          profile it links are the same person; the rest are whatever HTML link
+          types you want on it.
+        {% endset %}
+        {{ field.textarea('menu-' + menu.name, fields.items, 'Items', menu.items,
+             error=menu.problem, hint=itemsHint, rows='5', spellcheck='false') }}
+        <div class="mt-2">{{ button('Save menu', type='submit', color='primary') }}</div>
+      </form>
+
+      {% if kept %}
+        <form method="post" action="{{ deleteUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
+          {% call cardActions() %}
+            {{ button('Delete this menu', type='submit', color='error', style='ghost') }}
+          {% endcall %}
+        </form>
+      {% endif %}
+    {% endcall %}
   </li>
 {% endmacro %}
 
 {% block content %}
-  <h1>{{ heading }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
 
   {% if hasProblems %}
-    {% 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 %}
+    <div class="mb-6 max-w-2xl">
+      {% 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 %}
+    </div>
   {% endif %}
 
-  <h2>Where {{ themeName }} puts a menu</h2>
+  <h2 class="mb-3 text-lg font-semibold">Where {{ themeName }} puts a menu</h2>
 
   {% if areas.length %}
-    <p class="admin-hint">
+    <p class="mb-4 max-w-prose text-sm">
       These are the areas the active theme declares in its <code>theme.json</code>, in the order it
       declares them. A theme renders a menu by asking for it by name, and an area with nothing in it
       renders nothing at all.
     </p>
 
-    <ul class="admin-menu-boxes">
+    <ul class="mb-10 grid max-w-2xl grid-cols-1 gap-6">
       {% for menu in areas %}
-        {{ box(menu, fields, navigationUrl, csrfToken) }}
+        {{ box(menu, fields, navigationUrl, deleteUrl, csrfToken) }}
       {% endfor %}
     </ul>
   {% else %}
-    <p class="admin-hint">
+    <p class="mb-10 max-w-prose text-sm">
       {{ themeName }} declares no areas, so it asks for no menu by name. A theme declares them as an
       <code>areas</code> list in its <code>theme.json</code>, each entry a <code>name</code> &mdash;
       the name the template loops over as <code>menus.&lt;name&gt;</code> &mdash; and a
@@ -93,45 +105,38 @@
   {% endif %}
 
   {% if others.length %}
-    <h2>Kept, rendered nowhere</h2>
+    <h2 class="mb-3 text-lg font-semibold">Kept, rendered nowhere</h2>
 
-    <p class="admin-hint">
+    <p class="mb-4 max-w-prose text-sm">
       This site stores these menus and {{ themeName }} renders none of them: no template loops over
       those names, so nothing on the public site shows them. They are kept, because that is how the
       menu a theme will use gets written before the site switches to it. Delete is the only way one
       is removed.
     </p>
 
-    <ul class="admin-menu-boxes">
+    <ul class="mb-10 grid max-w-2xl grid-cols-1 gap-6">
       {% for menu in others %}
-        {% set remove %}
-          <form class="admin-menu-delete" method="post" action="{{ deleteUrl }}">
-            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-            <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
-            <button type="submit">Delete this menu</button>
-          </form>
-        {% endset %}
-        {{ box(menu, fields, navigationUrl, csrfToken, remove) }}
+        {{ box(menu, fields, navigationUrl, deleteUrl, csrfToken, kept=true) }}
       {% endfor %}
     </ul>
   {% endif %}
 
-  <h2>Add a menu</h2>
-
-  <form class="admin-menu-add" method="post" action="{{ addUrl }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    {% set nameHint %}
-      The name a theme asks for the menu by: lower-case letters, digits and
-      underscores, starting with a letter. It is written after the dot &mdash;
-      <code>{% raw %}{% for item in menus.footer %}{% endraw %}</code> &mdash; which is why a dash
-      is not allowed in one. A name this theme declares puts the menu in its place above; any other
-      name is a menu kept and rendered nowhere, which is how you fill one in before switching to the
-      theme that will use it.
-    {% endset %}
-    {{ field.text('menu-name', fields.name, 'Name', newName,
-         error=nameProblem, hint=nameHint, spellcheck='false', required=true) }}
-    <p class="admin-menu-buttons">
-      <button type="submit">Add menu</button>
-    </p>
-  </form>
+  <div class="max-w-2xl">
+    {% call card(title='Add a menu') %}
+      <form method="post" action="{{ addUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        {% set nameHint %}
+          The name a theme asks for the menu by: lower-case letters, digits and
+          underscores, starting with a letter. It is written after the dot &mdash;
+          <code>{% raw %}{% for item in menus.footer %}{% endraw %}</code> &mdash; which is why a dash
+          is not allowed in one. A name this theme declares puts the menu in its place above; any other
+          name is a menu kept and rendered nowhere, which is how you fill one in before switching to the
+          theme that will use it.
+        {% endset %}
+        {{ field.text('menu-name', fields.name, 'Name', newName,
+             error=nameProblem, hint=nameHint, spellcheck='false', required=true) }}
+        <div class="mt-2">{{ button('Add menu', type='submit', color='primary') }}</div>
+      </form>
+    {% endcall %}
+  </div>
 {% endblock %}

package/admin/pages/placeholder.njk

@@ -1,14 +1,19 @@
+{# A screen a later task builds. It exists so the navigation goes somewhere
+   and the guard covers it from the start.
+
+   It sits at the top of `pages/` rather than inside one of the section
+   folders because it is not any one section's screen: it stands in for
+   whichever section has nothing built yet, and the route heads it. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/card.njk" import card %}
 
 {% block title %}{{ heading }}{% endblock %}
 
 {% block content %}
-  {# A screen a later task builds. It exists so the navigation goes somewhere
-     and the guard covers it from the start.
-
-     It sits at the top of `pages/` rather than inside one of the section
-     folders because it is not any one section's screen: it stands in for
-     whichever section has nothing built yet, and the route heads it. #}
-  <h1>{{ heading }}{% if slug %}: {{ slug }}{% endif %}</h1>
-  <p class="admin-note">This screen is not built yet.</p>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}{% if slug %}: {{ slug }}{% endif %}</h1>
+  <div class="max-w-2xl">
+    {% call card() %}
+      <p>This screen is not built yet.</p>
+    {% endcall %}
+  </div>
 {% endblock %}

package/admin/pages/settings/discussion.njk

@@ -1,6 +1,9 @@
 {# /admin/settings/discussion: comments, webmentions, and what checks them. #}
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {# What a retention field says about the period as it stands: kept forever at
    0, removed after so many days otherwise. Nothing for a value the form is
@@ -21,7 +24,7 @@
 {% endblock %}
 
 {% block settingsFields %}
-  <h2>Comments</h2>
+  <h2 class="mt-2 text-lg font-semibold">Comments</h2>
 
   {% set commentsHint %}
     Clear this and no post shows a comment form and every submission is
@@ -41,7 +44,7 @@
        form.commentsCloseAfterDays, type='number', min='0', step='1',
        error=problems.commentsCloseAfterDays, hint=closeHint) }}
 
-  <h2>Webmentions</h2>
+  <h2 class="mt-6 text-lg font-semibold">Webmentions</h2>
 
   {% set sendHint %}
     When a post is published or edited, every external page it links to is
@@ -60,9 +63,9 @@
   {{ field.checkbox('settings-webmentions-receive', fields.webmentionsReceive,
        'Accept webmentions sent here', checked=form.webmentionsReceive, hint=receiveHint) }}
 
-  <h2>Keeping personal data</h2>
+  <h2 class="mt-6 text-lg font-semibold">Keeping personal data</h2>
 
-  <p class="admin-hint">
+  <p class="max-w-prose text-sm">
     How long the site keeps what commenters and people writing through the
     contact form hand it, in days from when it arrived; <code>0</code> keeps
     it forever. A site that has never set these keeps everything, so upgrading
@@ -107,21 +110,19 @@
   {# Akismet is its own pair of forms for the reason the avatar is: the key is
      a credential in data/akismet.json rather than a setting in site.json, and
      a key Akismet will not take must not lose an edit to the fields above. #}
-  <section class="admin-settings admin-akismet-panel">
-    <h2>Spam checking</h2>
-
-    <p class="admin-akismet-state admin-akismet-{{ akismetState }}">
+  {% call card(title='Spam checking') %}
+    <p>
       {% if akismetState == 'valid' %}
-        <strong>Connected</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+        {{ status('connected', 'Connected') }} Key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
       {% elif akismetState == 'invalid' %}
-        <strong>Akismet does not recognise this key</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+        {{ status('rejected', 'Not recognised') }} Akismet does not recognise this key: key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
       {% elif akismetState == 'unchecked' %}
-        <strong>Akismet could not be reached</strong> to check key {{ akismetKeyHint }}.
+        {{ status('unreachable', 'Not checked') }} Akismet could not be reached to check key {{ akismetKeyHint }}.
       {% else %}
-        <strong>Not connected</strong> &mdash; this site has no key.
+        {{ status('disconnected', 'Not connected') }} This site has no key.
       {% endif %}
     </p>
-    <p class="admin-hint">{{ akismetHint }}</p>
+    <p class="text-sm">{{ akismetHint }}</p>
 
     <form method="post" action="{{ akismetUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
@@ -132,28 +133,28 @@
       {% endif %}
       {{ field.password('settings-akismet-key', akismetFields.key, 'Akismet API key',
            autocomplete='off', spellcheck='false', placeholder=akismetPlaceholder) }}
-      <p class="admin-settings-buttons">
-        <button type="submit">{% if akismetPresent %}Replace key{% else %}Save key{% endif %}</button>
-      </p>
+      <div class="mt-2">
+        {{ button('Replace key' if akismetPresent else 'Save key', type='submit', color='primary') }}
+      </div>
     </form>
 
-    {% if akismetPresent %}
-      <form method="post" action="{{ akismetUrl }}">
-        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-        <input type="hidden" name="{{ akismetFields.action }}" value="{{ akismetRemove }}" />
-        <p class="admin-settings-buttons">
-          <button type="submit">Remove key</button>
-        </p>
-      </form>
-    {% endif %}
-
-    <p class="admin-hint">
-      A key from <a href="https://akismet.com/">akismet.com</a> turns on spam
+    <p class="text-sm">
+      A key from <a class="link" href="https://akismet.com/">akismet.com</a> turns on spam
       checking for native comments and incoming webmentions. It is checked with
       Akismet when it is saved and kept in <code>data/akismet.json</code>, never
       in <code>site.json</code> and never on the public site. Marking something
       spam or not spam on the Comments screen tells Akismet, which is the only
       way it learns. Fediverse replies are never sent to it.
     </p>
-  </section>
+
+    {% if akismetPresent %}
+      <form method="post" action="{{ akismetUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ akismetFields.action }}" value="{{ akismetRemove }}" />
+        {% call cardActions() %}
+          {{ button('Remove key', type='submit', color='error', style='ghost') }}
+        {% endcall %}
+      </form>
+    {% endif %}
+  {% endcall %}
 {% endblock %}

package/admin/pages/settings/email.njk

@@ -2,6 +2,9 @@
    to it goes. #}
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block settingsProblems %}
   {{ field.problem('settings-mail-provider', problems.mailProvider) }}
@@ -50,7 +53,7 @@
   {{ field.text('settings-contact-email', fields.contactEmail, 'Contact address',
        form.contactEmail, error=problems.contactEmail, hint=contactHint, inputmode='email') }}
 
-  <h2>Security contact</h2>
+  <h2 class="mt-6 text-lg font-semibold">Security contact</h2>
 
   {% set securityContactsHint %}
     Where somebody who finds a vulnerability in this site should report it, one per line:
@@ -76,19 +79,18 @@
      key is: an API key and an SMTP password belong in data/mail.json, not in
      the public site.json, and a mistyped one must not lose an edit to the
      From line. #}
-  <section class="admin-settings admin-mail-panel">
-    <h2>Mail credentials</h2>
+  {% call card(title='Mail credentials') %}
 
-    <p class="admin-mail-state admin-mail-{{ mailProvider }}">
+    <p>
       {% if mailConfigured %}
-        <strong>Configured</strong> &mdash; sending through {{ mailProvider }}.
+        {{ status('connected', 'Configured') }} Sending through {{ mailProvider }}.
       {% elif mailProvider == 'none' %}
-        <strong>Not sending</strong> &mdash; no provider is chosen.
+        {{ status('disconnected', 'Not sending') }} No provider is chosen.
       {% else %}
-        <strong>Not configured</strong> &mdash; {{ mailProvider }} is chosen but has no credential.
+        {{ status('missing', 'Not configured') }} {{ mailProvider }} is chosen but has no credential.
       {% endif %}
     </p>
-    <p class="admin-hint">{{ mailHint }}</p>
+    <p class="text-sm">{{ mailHint }}</p>
 
     {# One provider's boxes, never both. A site sending through Brevo has no
        use for an SMTP port and a site sending through SMTP has none for an API
@@ -103,14 +105,14 @@
        would reasonably call this broken. Doing it the other way round would
        take JavaScript, and no other admin screen needs any. #}
     {% if mailProvider == 'none' %}
-      <p class="admin-hint">
+      <p class="text-sm">
         No provider is <em>saved</em>, so there is no credential to give and no
         box here to give it in. Choose one under <strong>Provider</strong> above
         and press <strong>Save settings</strong> &mdash; picking it in the select
         alone changes nothing &mdash; and the boxes it needs appear here.
       </p>
     {% else %}
-      <p class="admin-hint">
+      <p class="text-sm">
         These are the boxes
         <strong>{% if mailProvider == 'brevo' %}Brevo{% else %}SMTP{% endif %}</strong>
         needs, and they follow the provider this site has <em>saved</em> &mdash; not
@@ -122,9 +124,9 @@
         <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
         {% if mailProvider == 'brevo' %}
-          <h3>Brevo</h3>
+          <h3 class="font-semibold">Brevo</h3>
           {% if mailBrevoPresent %}
-            <p class="admin-hint">A key is stored, ending {{ mailBrevoKeyHint }}.</p>
+            <p class="text-sm">A key is stored, ending {{ mailBrevoKeyHint }}.</p>
             {% set brevoPlaceholder = 'Leave blank to keep the stored key' %}
           {% else %}
             {% set brevoPlaceholder = 'Paste your key' %}
@@ -132,7 +134,7 @@
           {{ field.password('settings-mail-brevo-key', mailFields.brevoApiKey, 'API key',
                autocomplete='off', spellcheck='false', placeholder=brevoPlaceholder) }}
         {% else %}
-          <h3>SMTP</h3>
+          <h3 class="font-semibold">SMTP</h3>
           {{ field.text('settings-mail-smtp-host', mailFields.smtpHost, 'Host', mailSmtp.host,
                autocomplete='off') }}
 
@@ -159,9 +161,7 @@
                autocomplete='off', spellcheck='false', placeholder=smtpPlaceholder) }}
         {% endif %}
 
-        <p class="admin-settings-buttons">
-          <button type="submit">Save credentials</button>
-        </p>
+        <div class="mt-2">{{ button('Save credentials', type='submit', color='primary') }}</div>
       </form>
     {% endif %}
 
@@ -173,22 +173,22 @@
     {% set brevoStoredElsewhere = mailBrevoPresent and mailProvider != 'brevo' %}
     {% set smtpStoredElsewhere = mailSmtpPresent and mailProvider != 'smtp' %}
     {% if brevoStoredElsewhere or smtpStoredElsewhere %}
-      <h3>Also stored</h3>
+      <h3 class="font-semibold">Also stored</h3>
 
       {% if brevoStoredElsewhere %}
-        <p class="admin-field-static">
+        <p>
           A <strong>Brevo</strong> API key, ending {{ mailBrevoKeyHint }}.
         </p>
       {% endif %}
       {% if smtpStoredElsewhere %}
-        <p class="admin-field-static">
+        <p>
           An <strong>SMTP</strong> server:
           {% if mailSmtp.user %}{{ mailSmtp.user }} at {% endif %}{{ mailSmtp.host }}
           port {{ mailSmtp.port }}{% if mailSmtp.hasPassword %}, with a password{% endif %}.
         </p>
       {% endif %}
 
-      <p class="admin-hint">
+      <p class="text-sm">
         Kept in <code>data/mail.json</code> and used by nothing while
         {% if mailProvider == 'none' %}no provider is chosen{% else %}{% if mailProvider == 'brevo' %}Brevo{% else %}SMTP{% endif %} is the chosen provider{% endif %}.
         Choose that provider above to edit it, or press
@@ -201,9 +201,9 @@
       <form method="post" action="{{ mailUrl }}">
         <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
         <input type="hidden" name="{{ mailFields.action }}" value="{{ mailRemove }}" />
-        <p class="admin-settings-buttons">
-          <button type="submit">Remove credentials</button>
-        </p>
+        {% call cardActions() %}
+          {{ button('Remove credentials', type='submit', color='error', style='ghost') }}
+        {% endcall %}
       </form>
     {% endif %}
 
@@ -216,18 +216,16 @@
         <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
         {{ field.text('settings-mail-test-to', mailTestFields.to, 'Send a test message to', '',
              inputmode='email', placeholder='you@example.com') }}
-        <p class="admin-settings-buttons">
-          <button type="submit">Send test email</button>
-        </p>
+        <div class="mt-2">{{ button('Send test email', type='submit') }}</div>
       </form>
     {% endif %}
 
-    <p class="admin-hint">
+    <p class="text-sm">
       Neither the API key nor the SMTP password is ever printed back into this
       page. Both are kept in <code>data/mail.json</code> at mode
       <code>0600</code>, beside the password hashes and the actor's private
       keys, and never in <code>site.json</code>, which is public and in git.
       Leaving a secret blank keeps the one already stored.
     </p>
-  </section>
+  {% endcall %}
 {% endblock %}

package/admin/pages/settings/general.njk

@@ -50,13 +50,19 @@
   {{ field.text('settings-icon', fields.icon, 'Site icon', form.icon,
        error=problems.icon, hint=iconHint) }}
 
-  <div class="admin-avatar-current">
+  <div class="flex items-center gap-4">
     {% if iconPreview %}
-      <img class="admin-icon-preview" src="{{ iconPreview }}" alt="The current site icon" width="96" height="96" />
+      <div class="avatar shrink-0">
+        <div class="w-24 rounded-box">
+          <img class="object-cover" src="{{ iconPreview }}" alt="The current site icon" width="96" height="96" />
+        </div>
+      </div>
     {% else %}
-      <span class="admin-icon-preview admin-avatar-blank"></span>
+      <div class="avatar avatar-placeholder shrink-0" aria-hidden="true">
+        <div class="w-24 rounded-box bg-base-300"></div>
+      </div>
     {% endif %}
-    <p class="admin-hint">
+    <p class="text-sm">
       {% if iconUnderived and not imageOptimization %}
         Image optimization is off, so no icons are derived and the site links none.
       {% elif iconUnderived %}

package/admin/pages/settings/permalinks.njk

@@ -2,6 +2,8 @@
    used to. #}
 {% extends "layouts/settings-page.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/card.njk" import card %}
+{% from "components/table.njk" import table %}
 
 {% block settingsProblems %}
   {{ field.problem('settings-tag-base', problems.tagBase) }}
@@ -22,12 +24,9 @@
   {# The recorded renames are a record of what happened rather than a
      preference: the taxonomy screens write them as a term is renamed or merged,
      and this page is where the URLs they are about are decided. #}
-  <section class="admin-settings admin-redirects-panel">
-    <h2>Archive redirects</h2>
-
+  {% call card(title='Archive redirects') %}
     {% if taxonomyRedirects.length %}
-      <table class="admin-list">
-        <caption class="admin-visually-hidden">Archive redirects</caption>
+      {% call table('Archive redirects', inCard=true) %}
         <thead>
           <tr><th scope="col">Taxonomy</th><th scope="col">Was</th><th scope="col">Is now</th></tr>
         </thead>
@@ -40,17 +39,17 @@
             </tr>
           {% endfor %}
         </tbody>
-      </table>
-      <p class="admin-hint">
+      {% endcall %}
+      <p class="text-sm">
         Every one of these answers with a permanent redirect to the archive the
         term lives at now, so a link somebody published still arrives.
       </p>
     {% else %}
-      <p class="admin-hint">
+      <p class="text-sm">
         Nothing has moved yet. Renaming or merging a term on the Tags or
         Categories screen records the archive URL it used to have here, and the
         site answers that URL with a permanent redirect from then on.
       </p>
     {% endif %}
-  </section>
+  {% endcall %}
 {% endblock %}

package/admin/pages/settings/privacy.njk

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block settingsFields %}
-  <h2>Location</h2>
+  <h2 class="mt-2 text-lg font-semibold">Location</h2>
 
   {% set locationHint %}
     A Micropub app such as Quill can send where a post was written, and the
@@ -26,9 +26,9 @@
     {% endfor %}
   {% endcall %}
 
-  <h2>Uploads</h2>
+  <h2 class="mt-6 text-lg font-semibold">Uploads</h2>
 
-  <p class="admin-hint">
+  <p class="max-w-prose text-sm">
     Location and camera metadata is always removed from pictures and videos as
     they are uploaded, whatever is chosen above. Files uploaded before this
     version keep theirs until <code>geekity strip-metadata</code> is run over

package/admin/pages/settings/reading.njk

@@ -24,7 +24,7 @@
      radio and a select that can disagree with each other. #}
   {% set homepageGone %}
     {% if homepageMissing %}
-      <p class="admin-field-error">
+      <p>
         The homepage was <code>{{ form.homepage }}</code>, which is no longer published,
         so the site is showing its latest posts. Publish that page again to have it back,
         or pick another.
@@ -45,7 +45,7 @@
 
   {% set postsPageGone %}
     {% if postsPageMissing %}
-      <p class="admin-field-error">
+      <p>
         The posts page was <code>{{ form.postsPage }}</code>, which is no longer published,
         so the listing has no page of its own.
       </p>
@@ -100,7 +100,7 @@
 
   {# TASK-148. What /robots.txt tells crawlers beyond keeping them out of the
      admin, which it does whatever is set here. #}
-  <h2>Crawlers</h2>
+  <h2 class="mt-6 text-lg font-semibold">Crawlers</h2>
 
   {% set aiHint %}
     Training crawlers gather pages to train AI models. Retrieval crawlers fetch a