@geekity/cms 0.21.0 → 0.23.0

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

@@ -5,86 +5,92 @@
    that disagrees with the files is not something the site complains about, so
    the only way to notice is to be shown what it holds. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/card.njk" import card, cardActions %}
+{% from "components/table.njk" import table %}
 
 {% block title %}{{ heading }}{% endblock %}
 
 {% block content %}
-  <h1>{{ heading }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
 
-  <p>
-    Everything in <code>data/geekity.db</code> is a reading of the files under
-    <code>{{ contentDir }}</code>, so it can always be read again. Rebuild it after
-    editing content outside the admin &mdash; over ssh, or with a
-    <code>git pull</code> while the site was down &mdash; or when what is listed here
-    disagrees with what is on disk.
-  </p>
+  <div class="flex max-w-2xl flex-col gap-6">
+    <p class="max-w-prose">
+      Everything in <code>data/geekity.db</code> is a reading of the files under
+      <code>{{ contentDir }}</code>, so it can always be read again. Rebuild it after
+      editing content outside the admin &mdash; over ssh, or with a
+      <code>git pull</code> while the site was down &mdash; or when what is listed here
+      disagrees with what is on disk.
+    </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>
-        <th scope="col">Count</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">Documents</th>
-        <td>{{ indexed.documents }}</td>
-      </tr>
-      <tr>
-        <th scope="row">Followers</th>
-        <td>{{ indexed.followers }}</td>
-      </tr>
-      <tr>
-        <th scope="row">Inbox activities</th>
-        <td>{{ indexed.activities }}</td>
-      </tr>
-      <tr>
-        <th scope="row">Comments</th>
-        <td>{{ indexed.comments }}</td>
-      </tr>
-    </tbody>
-  </table>
+    {% call card(title='What the index holds') %}
+      {% call table('What the index holds', inCard=true) %}
+        <thead>
+          <tr>
+            <th scope="col">Kind</th>
+            <th scope="col">Count</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">Documents</th>
+            <td>{{ indexed.documents }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Followers</th>
+            <td>{{ indexed.followers }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Inbox activities</th>
+            <td>{{ indexed.activities }}</td>
+          </tr>
+          <tr>
+            <th scope="row">Comments</th>
+            <td>{{ indexed.comments }}</td>
+          </tr>
+        </tbody>
+      {% endcall %}
 
-  {% if confirm %}
-    {# Offered rather than done, the way a merge is on the taxonomy screens.
-       The window in the middle is the whole reason: for as long as the scan
-       runs the site answers 404 for documents whose files are perfectly fine,
-       and that is not a thing to discover afterwards. #}
-    <form class="admin-settings" method="post" action="{{ rebuildUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <input type="hidden" name="{{ fields.confirm }}" value="1" />
+      {% if not confirm %}
+        <form method="post" action="{{ rebuildUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          {% call cardActions() %}
+            {{ button('Rebuild the index', type='submit', color='primary') }}
+          {% endcall %}
+        </form>
+      {% endif %}
+    {% endcall %}
 
-      <h2>Rebuild the index now?</h2>
+    {% if confirm %}
+      {# Offered rather than done, the way a merge is on the taxonomy screens.
+         The window in the middle is the whole reason: for as long as the scan
+         runs the site answers 404 for documents whose files are perfectly fine,
+         and that is not a thing to discover afterwards. #}
+      {% call card(title='Rebuild the index now?', style='border') %}
+        <p>
+          The index is emptied and every file read again. Until the scan finishes, this
+          site answers <strong>404</strong> for its posts and pages &mdash; under a second
+          on a small site, longer on a large one &mdash; and it is serving the whole time.
+          Nothing is deleted and nothing is sent: you stay signed in, the delivery log and
+          the relays are kept, and no follower, feed or linked page is told about a post
+          the scan re-indexes.
+        </p>
+        <form method="post" action="{{ rebuildUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <input type="hidden" name="{{ fields.confirm }}" value="1" />
+          {% call cardActions() %}
+            {{ buttonLink('Cancel', toolsUrl, style='ghost') }}
+            {{ button('Rebuild it', type='submit', color='warning') }}
+          {% endcall %}
+        </form>
+      {% endcall %}
+    {% endif %}
 
-      <p>
-        The index is emptied and every file read again. Until the scan finishes, this
-        site answers <strong>404</strong> for its posts and pages &mdash; under a second
-        on a small site, longer on a large one &mdash; and it is serving the whole time.
-        Nothing is deleted and nothing is sent: you stay signed in, the delivery log and
-        the relays are kept, and no follower, feed or linked page is told about a post
-        the scan re-indexes.
-      </p>
-
-      <p class="admin-settings-buttons">
-        <button type="submit">Rebuild it</button>
-        <a href="{{ toolsUrl }}">Cancel</a>
-      </p>
-    </form>
-  {% else %}
-    <form class="admin-settings" method="post" action="{{ rebuildUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <p class="admin-settings-buttons">
-        <button type="submit">Rebuild the index</button>
-      </p>
-    </form>
-  {% endif %}
-
-  <p class="admin-hint">
-    This runs on the site as it is: nothing is deleted, no connection is swapped and
-    nobody is signed out. <code>geekity rebuild</code> at the command line is the other
-    door, and it is for the one case this screen cannot be: a database this version
-    refuses to open, where there is no site running to press a button in.
-  </p>
+    <p class="max-w-prose text-sm">
+      This runs on the site as it is: nothing is deleted, no connection is swapped and
+      nobody is signed out. <code>geekity rebuild</code> at the command line is the other
+      door, and it is for the one case this screen cannot be: a database this version
+      refuses to open, where there is no site running to press a button in.
+    </p>
+  </div>
 {% endblock %}

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

@@ -2,71 +2,77 @@
    (TASK-135). Looking is a step of its own because erasing cannot be undone. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block title %}{{ heading }}{% endblock %}
 
 {% block content %}
-  <h1>{{ heading }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
 
-  <p>
-    When somebody asks for what this site holds about them to be erased, type
-    the email address they commented or wrote in under. Their comments stay in
-    their threads, with their words and their moderation status, signed
-    <strong>{{ erasedName }}</strong> and with their email, website and address
-    hash removed. Their contact messages are deleted, and the address comes off
-    the list of people who asked not to be emailed about replies.
-  </p>
+  <div class="flex max-w-2xl flex-col gap-6">
+    <p class="max-w-prose">
+      When somebody asks for what this site holds about them to be erased, type
+      the email address they commented or wrote in under. Their comments stay in
+      their threads, with their words and their moderation status, signed
+      <strong>{{ erasedName }}</strong> and with their email, website and address
+      hash removed. Their contact messages are deleted, and the address comes off
+      the list of people who asked not to be emailed about replies.
+    </p>
 
-  {% if found %}
-    <form class="admin-settings" method="post" action="{{ actionUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <input type="hidden" name="{{ fields.email }}" value="{{ email }}" />
-      <input type="hidden" name="{{ fields.confirm }}" value="1" />
+    {% if found %}
+      {% call card(title='What this site holds for ' + email) %}
+        <form method="post" action="{{ actionUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <input type="hidden" name="{{ fields.email }}" value="{{ email }}" />
+          <input type="hidden" name="{{ fields.confirm }}" value="1" />
 
-      <h2>What this site holds for {{ email }}</h2>
+          <ul class="list-disc ps-5">
+            <li>{{ found.comments }}</li>
+            <li>{{ found.messages }}</li>
+            <li>
+              {% if found.optedOut %}On{% else %}Not on{% endif %} the list of addresses not
+              to email about replies
+            </li>
+          </ul>
 
-      <ul>
-        <li>{{ found.comments }}</li>
-        <li>{{ found.messages }}</li>
-        <li>
-          {% if found.optedOut %}On{% else %}Not on{% endif %} the list of addresses not
-          to email about replies
-        </li>
-      </ul>
-
-      {% if found.anything %}
-        <p>
-          Erasing cannot be undone. A copy of a comment file in git history or in a
-          backup keeps what it held; this changes the site as it is now.
-        </p>
-        <p class="admin-settings-buttons">
-          <button type="submit">Erase it</button>
-          <a href="{{ actionUrl }}">Cancel</a>
-        </p>
-      {% else %}
-        <p>There is nothing to erase for that address.</p>
-        <p class="admin-settings-buttons"><a href="{{ actionUrl }}">Look for another</a></p>
+          {% if found.anything %}
+            <p class="mt-4">
+              Erasing cannot be undone. A copy of a comment file in git history or in a
+              backup keeps what it held; this changes the site as it is now.
+            </p>
+            {% call cardActions() %}
+              {{ buttonLink('Cancel', actionUrl, style='ghost') }}
+              {{ button('Erase it', type='submit', color='error') }}
+            {% endcall %}
+          {% else %}
+            <p class="mt-4">There is nothing to erase for that address.</p>
+            {% call cardActions() %}
+              {{ buttonLink('Look for another', actionUrl) }}
+            {% endcall %}
+          {% endif %}
+        </form>
+      {% endcall %}
+    {% else %}
+      {% if problem %}
+        {% call field.summary('Nothing was looked up.') %}
+          {{ field.problem('personal-data-email', problem) }}
+        {% endcall %}
       {% endif %}
-    </form>
-  {% else %}
-    {% if problem %}
-      {% call field.summary('Nothing was looked up.') %}
-        {{ field.problem('personal-data-email', problem) }}
+      {% call card(title='Look up an address') %}
+        <form method="post" action="{{ actionUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          {{ field.text('personal-data-email', fields.email, 'Email address', email,
+               type='email', error=problem) }}
+          <div class="mt-2">{{ button('Look for it', type='submit', color='primary') }}</div>
+        </form>
       {% 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,
-           type='email', error=problem) }}
-      <p class="admin-settings-buttons">
-        <button type="submit">Look for it</button>
-      </p>
-    </form>
-  {% endif %}
 
-  <p class="admin-hint">
-    Comments are found by the email they carry, so a comment whose email the
-    retention sweep has already removed, a webmention and a fediverse reply are
-    not found here. Delete those one by one from the Comments screen.
-  </p>
+    <p class="max-w-prose text-sm">
+      Comments are found by the email they carry, so a comment whose email the
+      retention sweep has already removed, a webmention and a fediverse reply are
+      not found here. Delete those one by one from the Comments screen.
+    </p>
+  </div>
 {% endblock %}

package/admin/pages/users/activity-entry.njk

@@ -1,15 +1,16 @@
 {# /admin/users/activity/:id: one request an app made, in full (TASK-221). #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import status %}
+{% from "components/table.njk" import table %}
 
 {% block title %}{{ entry.endpoint }} {{ entry.action }}{% endblock %}
 
 {% block content %}
-  <h1>{{ entry.endpoint }} {{ entry.action }}</h1>
+  <h1 class="mb-2 text-2xl font-bold">{{ entry.endpoint }} {{ entry.action }}</h1>
 
-  <p><a href="{{ listUrl }}">All app activity</a></p>
+  <p class="mb-6"><a class="link" href="{{ listUrl }}">All app activity</a></p>
 
-  <table class="admin-list">
-    <caption class="admin-visually-hidden">The request</caption>
+  {% call table('The request') %}
     <tbody>
       <tr><th scope="row">When</th><td><time datetime="{{ entry.when.iso }}">{{ entry.when.text }}</time></td></tr>
       <tr><th scope="row">App</th><td>{{ entry.app or "Unknown" }}</td></tr>
@@ -20,7 +21,7 @@
       <tr>
         <th scope="row">Result</th>
         <td>
-          {% if entry.failed %}<span class="admin-status admin-status-failed">Refused</span>{% endif %}
+          {% if entry.failed %}{{ status('failed', 'Refused') }}{% endif %}
           {{ entry.status }}
         </td>
       </tr>
@@ -31,12 +32,11 @@
         <tr><th scope="row">Why</th><td>{{ entry.errorDescription }}</td></tr>
       {% endif %}
     </tbody>
-  </table>
+  {% endcall %}
 
-  <h2>What it sent</h2>
+  <h2 class="mt-10 mb-3 text-lg font-semibold">What it sent</h2>
   {% if carried | length %}
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">The fields the request carried</caption>
+    {% call table('The fields the request carried') %}
       <thead>
         <tr>
           <th scope="col">Field</th>
@@ -47,12 +47,12 @@
         {% for field in carried %}
           <tr>
             <td>{{ field.name }}</td>
-            <td>{% if field.note %}<span class="admin-status">{{ field.value }}</span>{% else %}{{ field.value }}{% endif %}</td>
+            <td>{% if field.note %}<em>{{ field.value }}</em>{% else %}{{ field.value }}{% endif %}</td>
           </tr>
         {% endfor %}
       </tbody>
-    </table>
+    {% endcall %}
   {% else %}
-    <p class="admin-empty">No fields were read from this request.</p>
+    <p>No fields were read from this request.</p>
   {% endif %}
 {% endblock %}

package/admin/pages/users/activity.njk

@@ -2,34 +2,28 @@
    endpoints, newest first (TASK-221). A failure is marked in words as well
    as colour, and each row links to the request in full. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import status %}
+{% from "components/table.njk" import table %}
+{% from "components/tabs.njk" import tabs as tabsNav %}
 
 {% block title %}App activity{% endblock %}
 
 {% block content %}
-  <h1>App activity</h1>
+  <h1 class="mb-6 text-2xl font-bold">App activity</h1>
 
-  <p class="admin-hint">
+  <p class="mb-4 max-w-prose text-sm">
     The last requests apps made to sign in with your site and to post to it:
     the authorization and token endpoints, Micropub and its media endpoint.
     When an app will not connect or post, its request is here with the reason
     it was refused. No token, code, password or cookie is kept.
   </p>
 
-  <nav class="admin-filters" aria-label="Which requests">
-    <ul>
-      {% for tab in tabs %}
-        <li>
-          <a href="{{ tab.url }}"{% if tab.current %} aria-current="page"{% endif %}>
-            {{ tab.label }} ({{ tab.count }})
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
+  <div class="mb-4 max-w-full overflow-x-auto contain-inline-size">
+    {{ tabsNav(tabs, 'Which requests') }}
+  </div>
 
   {% if rows | length %}
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">Recent app requests, newest first</caption>
+    {% call table('Recent app requests, newest first') %}
       <thead>
         <tr>
           <th scope="col">When</th>
@@ -43,14 +37,14 @@
       <tbody>
         {% for row in rows %}
           <tr>
-            <td><a href="{{ row.url }}"><time datetime="{{ row.when.iso }}">{{ row.when.text }}</time></a></td>
+            <td class="whitespace-nowrap"><a class="link link-hover" href="{{ row.url }}"><time datetime="{{ row.when.iso }}">{{ row.when.text }}</time></a></td>
             <td>{{ row.endpoint }}</td>
             <td>{{ row.action }}</td>
             <td>{{ row.app or "Unknown" }}</td>
             <td>{{ row.user or "Unknown" }}</td>
             <td>
               {% if row.failed %}
-                <span class="admin-status admin-status-failed">Refused</span>
+                {{ status('failed', 'Refused') }}
                 {{ row.status }}{% if row.error %} {{ row.error }}{% endif %}
               {% else %}
                 {{ row.status }}
@@ -59,8 +53,8 @@
           </tr>
         {% endfor %}
       </tbody>
-    </table>
+    {% endcall %}
   {% else %}
-    <p class="admin-empty">Nothing here.</p>
+    <p>Nothing here.</p>
   {% endif %}
 {% endblock %}