@geekity/cms 0.21.0 → 0.23.0

package/admin/pages/federation/followers.njk

@@ -1,46 +1,51 @@
 {# /admin/federation: who this site's people are to the fediverse, who follows
    each of them, what arrived in the inbox, and how what went out landed. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
+{% from "components/table.njk" import table %}
 
 {% block title %}Federation{% endblock %}
 
+{% set AVATAR_SIZES = { large: 'w-24', small: 'w-8' } %}
+{% macro avatar(url, size) %}
+  {% if url %}
+    <div class="avatar shrink-0">
+      <div class="rounded-full{{ AVATAR_SIZES | modifier(size) }}">
+        <img class="object-cover" src="{{ url }}" alt="" width="{{ 96 if size == 'large' else 32 }}" height="{{ 96 if size == 'large' else 32 }}" loading="lazy" />
+      </div>
+    </div>
+  {% else %}
+    <div class="avatar avatar-placeholder shrink-0" aria-hidden="true">
+      <div class="rounded-full bg-base-300{{ AVATAR_SIZES | modifier(size) }}"></div>
+    </div>
+  {% endif %}
+{% endmacro %}
+
 {% block content %}
-  <h1>Federation</h1>
+  <h1 class="mb-6 text-2xl font-bold">Federation</h1>
 
-  {% if actors.length %}
+  <div class="mb-10 grid grid-cols-1 gap-6">
     {% for actor in actors %}
-      <section class="admin-panel admin-actor">
-        <h2>{{ actor.handle }}</h2>
-        <div class="admin-actor-identity">
-          {% if actor.avatarUrl %}
-            <img class="admin-avatar admin-avatar-large" src="{{ actor.avatarUrl }}" alt="" width="96" height="96" />
-          {% else %}
-            <span class="admin-avatar admin-avatar-large admin-avatar-blank" aria-hidden="true"></span>
-          {% endif %}
-          <p class="admin-actor-handle">{{ actor.name }}</p>
+      {% call card(title=actor.handle) %}
+        <div class="flex items-center gap-4">
+          {{ avatar(actor.avatarUrl, 'large') }}
+          <p class="text-lg">{{ actor.name }}</p>
         </div>
-        <dl class="admin-actor-fields">
-          <div>
-            <dt>Summary</dt>
-            <dd>{% if actor.summary %}{{ actor.summary }}{% else %}<span class="admin-empty">None set.</span>{% endif %}</dd>
-          </div>
-          <div>
-            <dt>Actor</dt>
-            <dd><a href="{{ actor.actorId }}">{{ actor.actorId }}</a></dd>
-          </div>
-          <div>
-            <dt>Profile</dt>
-            <dd><a href="{{ actor.url }}">{{ actor.url }}</a></dd>
-          </div>
-          <div>
-            <dt>Followers</dt>
-            <dd>{{ actor.followerCount }}</dd>
-          </div>
+        <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
+          <dt>Summary</dt>
+          <dd>{{ actor.summary or 'None set.' }}</dd>
+          <dt>Actor</dt>
+          <dd><a class="link break-all" href="{{ actor.actorId }}">{{ actor.actorId }}</a></dd>
+          <dt>Profile</dt>
+          <dd><a class="link break-all" href="{{ actor.url }}">{{ actor.url }}</a></dd>
+          <dt>Followers</dt>
+          <dd>{{ actor.followerCount }}</dd>
         </dl>
 
         {% if actor.followers.length %}
-          <table class="admin-list">
-            <caption>Followers of {{ actor.handle }}</caption>
+          {% call table('Followers of ' + actor.handle, inCard=true) %}
             <thead>
               <tr>
                 <th scope="col">Follower</th>
@@ -51,37 +56,33 @@
             <tbody>
               {% for follower in actor.followers %}
                 <tr>
-                  <td class="admin-follower">
-                    {% if follower.iconUrl %}
-                      <img class="admin-avatar" src="{{ follower.iconUrl }}" alt="" width="32" height="32" loading="lazy" />
-                    {% else %}
-                      <span class="admin-avatar admin-avatar-blank" aria-hidden="true"></span>
-                    {% endif %}
-                    <a href="{{ follower.url }}">{{ follower.name }}</a>
+                  <td>
+                    <div class="flex items-center gap-2">
+                      {{ avatar(follower.iconUrl, 'small') }}
+                      <a class="link link-hover" href="{{ follower.url }}">{{ follower.name }}</a>
+                    </div>
                   </td>
                   <td>{{ follower.handle }}</td>
-                  <td>{{ follower.followedAt | date('html') }}</td>
+                  <td class="whitespace-nowrap">{{ follower.followedAt | date('html') }}</td>
                 </tr>
               {% endfor %}
             </tbody>
-          </table>
+          {% endcall %}
         {% else %}
-          <p class="admin-empty">Nobody follows {{ actor.name }} yet.</p>
+          <p>Nobody follows {{ actor.name }} yet.</p>
         {% endif %}
-      </section>
+      {% endcall %}
+    {% else %}
+      {% call card(title='Actors') %}
+        <p>The site has no users, so it has no actors.</p>
+      {% endcall %}
     {% endfor %}
-  {% else %}
-    <section class="admin-panel admin-actor">
-      <h2>Actors</h2>
-      <p class="admin-empty">The site has no users, so it has no actors.</p>
-    </section>
-  {% endif %}
+  </div>
 
-  <section class="admin-panel">
-    <h2>Relays</h2>
+  <section class="mb-10">
+    <h2 class="mb-3 text-lg font-semibold">Relays</h2>
     {% if relays.length %}
-      <table class="admin-list">
-        <caption class="admin-visually-hidden">Relays</caption>
+      {% call table('Relays') %}
         <thead>
           <tr>
             <th scope="col">Relay</th>
@@ -96,87 +97,80 @@
             <tr>
               <td>
                 {% if relay.actorId %}
-                  <a href="{{ relay.actorId }}">{{ relay.inboxId }}</a>
+                  <a class="link link-hover" href="{{ relay.actorId }}">{{ relay.inboxId }}</a>
                 {% else %}
                   {{ relay.inboxId }}
                 {% endif %}
                 {% if relay.reason %}
-                  <p class="admin-hint">{{ relay.reason }}</p>
+                  <p class="text-sm">{{ relay.reason }}</p>
                 {% endif %}
               </td>
-              <td>
-                {% if relay.state == 'rejected' %}
-                  <span class="admin-status admin-status-failed">{{ relay.stateLabel }}</span>
-                {% else %}
-                  {{ relay.stateLabel }}
-                {% endif %}
-              </td>
-              <td>{{ relay.updatedAt | date('html') }}</td>
+              <td>{{ status(relay.state, relay.stateLabel) }}</td>
+              <td class="whitespace-nowrap">{{ relay.updatedAt | date('html') }}</td>
               <td>
                 {% if relay.lastDelivery %}
                   {{ relay.lastDelivery.activityType }} {{ relay.lastDelivery.status }}
-                  <span class="admin-inbox-when">{{ relay.lastDelivery.attemptedAt | date('html') }}</span>
+                  <span class="whitespace-nowrap text-sm">{{ relay.lastDelivery.attemptedAt | date('html') }}</span>
                   {% if relay.lastDelivery.error %}
-                    <p class="admin-hint">{{ relay.lastDelivery.error }}</p>
+                    <p class="text-sm">{{ relay.lastDelivery.error }}</p>
                   {% endif %}
                 {% else %}
-                  <span class="admin-empty">Nothing yet.</span>
+                  Nothing yet.
                 {% endif %}
               </td>
-              <td class="admin-actions">
+              <td>
                 {% if relay.retriable %}
                   <form method="post" action="{{ relayRetryUrl }}">
                     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
                     <input type="hidden" name="{{ fields.relay }}" value="{{ relay.inboxId }}" />
-                    <button type="submit">Retry</button>
+                    {{ button('Retry', type='submit', style='ghost', size='xs') }}
                   </form>
                 {% endif %}
               </td>
             </tr>
           {% endfor %}
         </tbody>
-      </table>
-      <p class="admin-hint">
+      {% endcall %}
+      <p class="mt-4 max-w-prose text-sm">
         A relay boosts every public post it is sent on to instances nobody here
         follows. The list lives on the Settings screen; Retry sends the follow
         again to one that is still waiting.
       </p>
     {% else %}
-      <p class="admin-empty">The site subscribes to no relay. Add one on the Settings screen.</p>
+      <p>The site subscribes to no relay. Add one on the Settings screen.</p>
     {% endif %}
   </section>
 
-  <section class="admin-panel">
-    <h2>Recent activity</h2>
+  <section class="mb-10">
+    <h2 class="mb-3 text-lg font-semibold">Recent activity</h2>
     {% if inbox.length %}
-      <ul class="admin-inbox">
+      <ul class="space-y-1">
         {% for entry in inbox %}
           <li>
-            <span class="admin-inbox-actor"><a href="{{ entry.actorId }}">{{ entry.actorLabel }}</a></span>
+            <a class="link link-hover font-medium" href="{{ entry.actorId }}">{{ entry.actorLabel }}</a>
             {% if entry.remoteUrl %}
-              <a href="{{ entry.remoteUrl }}">{{ entry.action }}</a>
+              <a class="link" href="{{ entry.remoteUrl }}">{{ entry.action }}</a>
             {% else %}
               {{ entry.action }}
             {% endif %}
             {% if entry.post %}
-              <a href="{{ entry.post.editUrl }}">{{ entry.post.title }}</a>
+              <a class="link" href="{{ entry.post.editUrl }}">{{ entry.post.title }}</a>
             {% else %}
-              <span class="admin-empty">something of ours</span>
+              <em>something of ours</em>
             {% endif %}
-            <span class="admin-inbox-when">{{ entry.receivedAt | date('html') }}</span>
+            <span class="whitespace-nowrap text-sm">{{ entry.receivedAt | date('html') }}</span>
           </li>
         {% endfor %}
       </ul>
     {% else %}
-      <p class="admin-empty">Nothing has arrived yet: no likes, boosts or replies.</p>
+      <p>Nothing has arrived yet: no likes, boosts or replies.</p>
     {% endif %}
   </section>
 
-  <section class="admin-panel">
-    <h2>Delivery</h2>
+  <section>
+    <h2 class="mb-3 text-lg font-semibold">Delivery</h2>
     {% if posts.length %}
-      <table class="admin-list">
-        <caption class="admin-visually-hidden">Delivery</caption>
+      {% call table('Delivery') %}
         <thead>
           <tr>
             <th scope="col">Post</th>
@@ -193,47 +187,47 @@
           {% for row in posts %}
             <tr>
               <td>
-                <a href="{{ row.post.editUrl }}">{{ row.post.title }}</a>
-                {% if row.trashed %}<p class="admin-hint">In the trash.</p>{% endif %}
+                <a class="link link-hover font-medium" href="{{ row.post.editUrl }}">{{ row.post.title }}</a>
+                {% if row.trashed %}<p class="text-sm">In the trash.</p>{% endif %}
               </td>
-              <td>{% if row.author %}@{{ row.author }}{% else %}<span class="admin-empty">—</span>{% endif %}</td>
+              <td>{% if row.author %}@{{ row.author }}{% else %}—{% endif %}</td>
               {% if row.lastActivity %}
-                <td>{{ row.lastActivity.activityType }} <span class="admin-inbox-when">{{ row.lastActivity.attemptedAt | date('html') }}</span></td>
+                <td>{{ row.lastActivity.activityType }} <span class="whitespace-nowrap text-sm">{{ row.lastActivity.attemptedAt | date('html') }}</span></td>
                 <td>{{ row.lastActivity.counts.sent }}</td>
                 <td>{{ row.lastActivity.counts.queued }}</td>
-                <td>{% if row.lastActivity.counts.failed %}<span class="admin-status admin-status-failed">{{ row.lastActivity.counts.failed }}</span>{% else %}0{% endif %}</td>
+                <td class="whitespace-nowrap">{% if row.lastActivity.counts.failed %}{{ status('failed', row.lastActivity.counts.failed + ' failed') }}{% else %}0{% endif %}</td>
               {% else %}
-                <td><span class="admin-empty">Nothing recorded.</span></td>
+                <td>Nothing recorded.</td>
                 <td>—</td>
                 <td>—</td>
                 <td>—</td>
               {% endif %}
               <td>
                 {% if row.webmentions.sent or row.webmentions["none"] or row.webmentions.failed %}
-                  {{ row.webmentions.sent }} told{% if row.webmentions["none"] %}, {{ row.webmentions["none"] }} take none{% endif %}{% if row.webmentions.failed %}, <span class="admin-status admin-status-failed">{{ row.webmentions.failed }} failed</span>{% endif %}
+                  {{ row.webmentions.sent }} told{% if row.webmentions["none"] %}, {{ row.webmentions["none"] }} take none{% endif %}{% if row.webmentions.failed %}, {{ status('failed', row.webmentions.failed + ' failed') }}{% endif %}
                 {% else %}
-                  <span class="admin-empty">—</span>
+                  —
                 {% endif %}
                 {% if row.syndication.length %}
-                  <ul class="admin-syndication">
+                  <ul>
                     {% for target in row.syndication %}
-                      <li>{{ target.name }}: {% if target.status == "failed" %}<span class="admin-status admin-status-failed">failed</span>{% if target.error %} ({{ target.error }}){% endif %}{% elif target.status == "none" %}takes none{% elif target.status %}sent{% else %}not sent yet{% endif %}{% if target.copy %}, <a href="{{ target.copy }}">copy</a>{% endif %}</li>
+                      <li>{{ target.name }}: {% if target.status == "failed" %}{{ status('failed', 'failed') }}{% if target.error %} ({{ target.error }}){% endif %}{% elif target.status == "none" %}takes none{% elif target.status %}sent{% else %}not sent yet{% endif %}{% if target.copy %}, <a class="link" href="{{ target.copy }}">copy</a>{% endif %}</li>
                     {% endfor %}
                   </ul>
                 {% endif %}
               </td>
-              <td class="admin-actions">
+              <td>
                 <form method="post" action="{{ resendUrl }}">
                   <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
                   <input type="hidden" name="{{ fields.slug }}" value="{{ row.slug }}" />
-                  <button type="submit">Resend</button>
+                  {{ button('Resend', type='submit', style='ghost', size='xs') }}
                 </form>
               </td>
             </tr>
           {% endfor %}
         </tbody>
-      </table>
-      <p class="admin-hint">
+      {% endcall %}
+      <p class="mt-4 max-w-prose text-sm">
         Resending builds the post again from its file and sends it to every one
         of its author's followers and every accepted relay the site has now, and tells every
         page the post links to at the same time: an update for a
@@ -242,7 +236,7 @@
         recorded against them.
       </p>
     {% else %}
-      <p class="admin-empty">No post has been announced to the fediverse yet.</p>
+      <p>No post has been announced to the fediverse yet.</p>
     {% endif %}
   </section>
 {% endblock %}

package/admin/pages/federation/settings.njk

@@ -6,6 +6,8 @@
    a user's profile now (decision-14). #}
 {% 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-relays', problems.relays) }}
@@ -22,7 +24,7 @@
   {{ field.textarea('settings-relays', fields.relays, 'Relays', form.relays,
        error=problems.relays, hint=relaysHint, rows='3', spellcheck='false', autofocus=true) }}
 
-  <h2>WordPress</h2>
+  <h2 class="mt-6 text-lg font-semibold">WordPress</h2>
 
   {% set wordpressHint %}
     Answer the inbox and collection paths the WordPress ActivityPub plugin
@@ -41,12 +43,9 @@
   {# When each compatibility path was last asked for. It is the whole reason
      the instants are recorded: once every follower's server has refetched the
      actor, nothing asks any more and the switch can go off. #}
-  <section class="admin-settings admin-wordpress-panel">
-    <h2>WordPress paths</h2>
-
+  {% call card(title='WordPress paths') %}
     {% if wordpressRoutes.length %}
-      <table class="admin-table">
-        <caption class="admin-visually-hidden">WordPress paths</caption>
+      {% call table('WordPress paths', inCard=true) %}
         <thead>
           <tr><th scope="col">Path</th><th scope="col">For</th><th scope="col">Last asked for</th></tr>
         </thead>
@@ -55,7 +54,7 @@
             <tr>
               <td><code>{{ route.path }}</code></td>
               <td>{{ route.username or 'every user' }}</td>
-              <td>
+              <td class="whitespace-nowrap">
                 {% if route.lastRequestedAt %}
                   {{ route.lastRequestedAt | date('readable') }}
                 {% else %}
@@ -65,18 +64,18 @@
             </tr>
           {% endfor %}
         </tbody>
-      </table>
-      <p class="admin-hint">
+      {% endcall %}
+      <p class="text-sm">
         Once every one of these has been quiet for long enough that every
         follower's server has refetched the actor, turn the switch off: these
         paths are a cache other servers hold, not this site's identity, and the
         CMS carries them only until the caches have moved on.
       </p>
     {% else %}
-      <p class="admin-hint">
+      <p class="text-sm">
         No user carries a WordPress actor id, so the switch would serve nothing.
         The <code>geekity import wordpress-actor</code> command sets one.
       </p>
     {% endif %}
-  </section>
+  {% endcall %}
 {% endblock %}

package/admin/pages/indieauth/consent.njk

@@ -1,55 +1,71 @@
 {# The IndieAuth consent screen (TASK-158): an app wants to know who the
-   signed-in person is. A bare page like the login form, because the person
-   arrived from another site and has one thing to decide here. #}
+   signed-in person is. One card in the bare column, like the login form,
+   because the person arrived from another site and has one thing to decide
+   here. #}
 {% extends "layouts/base.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/alert.njk" import alert %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
 
 {% block title %}Sign in to {{ client.name }}{% endblock %}
 
 {% block content %}
-  {# A data: URI the server fetched, never the client's URL (TASK-190). #}
-  {% if client.logo %}
-    <img class="admin-consent-logo" src="{{ client.logo }}" alt="" width="64" height="64" />
-  {% endif %}
-  <h1>Sign in to {{ client.name }}?</h1>
-
-  <dl class="admin-consent">
-    <dt>App</dt>
-    <dd>{{ client.name }}{% if client.named %} <span class="admin-hint">({{ client.id }})</span>{% endif %}</dd>
-    <dt>Sends you back to</dt>
-    <dd>{{ redirectHost }}</dd>
-    <dt>Signs you in as</dt>
-    <dd>{{ identity }}</dd>
-    {% if resource %}
-      <dt>For use at</dt>
-      <dd>{{ resource }}</dd>
+  {% call card() %}
+    {# A data: URI the server fetched, never the client's URL (TASK-190). #}
+    {% if client.logo %}
+      <div class="avatar">
+        <div class="w-16 rounded-box">
+          <img class="object-cover" src="{{ client.logo }}" alt="" width="64" height="64" />
+        </div>
+      </div>
     {% endif %}
-  </dl>
-
-  {% if withoutPkce %}
-    <p class="admin-hint">This app does not use PKCE, which protects a sign-in if the code it is handed is intercepted. It is let in only because it is on your list of apps allowed without PKCE, under Users &gt; Connected apps.</p>
-  {% endif %}
-
-  {% if loopback %}
-    <p class="admin-hint">This app runs on your own computer or network. Approve only if you started this sign-in yourself.</p>
-  {% endif %}
-
-  <form method="post" action="{{ consentUrl }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    <input type="hidden" name="request" value="{{ pending }}" />
-
-    {% if scopes | length %}
-      <fieldset>
-        <legend>It also asks for</legend>
-        {% for scope in scopes %}
-          {{ field.checkbox('scope-' ~ scope.name, 'scope', scope.label, checked=true, value=scope.name) }}
-        {% endfor %}
-      </fieldset>
-    {% else %}
-      <p>It asks only who you are.</p>
+    <h1 class="card-title text-2xl break-all">Sign in to {{ client.name }}?</h1>
+
+    <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
+      <dt class="font-semibold">App</dt>
+      <dd class="break-all">{{ client.name }}{% if client.named %} <span class="text-sm">({{ client.id }})</span>{% endif %}</dd>
+      <dt class="font-semibold">Sends you back to</dt>
+      <dd class="break-all">{{ redirectHost }}</dd>
+      <dt class="font-semibold">Signs you in as</dt>
+      <dd class="break-all">{{ identity }}</dd>
+      {% if resource %}
+        <dt class="font-semibold">For use at</dt>
+        <dd class="break-all">{{ resource }}</dd>
+      {% endif %}
+    </dl>
+
+    {% if withoutPkce %}
+      {% call alert(color='warning', style='soft') %}
+        <p>This app does not use PKCE, which protects a sign-in if the code it is handed is intercepted. It is let in only because it is on your list of apps allowed without PKCE, under Users &gt; Connected apps.</p>
+      {% endcall %}
+    {% endif %}
+
+    {% if loopback %}
+      {% call alert(color='info', style='soft', polite=true) %}
+        <p>This app runs on your own computer or network. Approve only if you started this sign-in yourself.</p>
+      {% endcall %}
     {% endif %}
 
-    <button type="submit" name="decision" value="approve">Approve</button>
-    <button type="submit" name="decision" value="deny">Deny</button>
-  </form>
+    <form method="post" action="{{ consentUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      <input type="hidden" name="request" value="{{ pending }}" />
+
+      {% if scopes | length %}
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">It also asks for</legend>
+          {% for scope in scopes %}
+            {{ field.checkbox('scope-' ~ scope.name, 'scope', scope.label, checked=true, value=scope.name) }}
+          {% endfor %}
+        </fieldset>
+      {% else %}
+        <p>It asks only who you are.</p>
+      {% endif %}
+
+      {% call cardActions() %}
+        {{ button('Approve', type='submit', color='primary', name='decision', value='approve') }}
+        {{ button('Deny', type='submit', style='ghost', name='decision', value='deny') }}
+      {% endcall %}
+    </form>
+  {% endcall %}
 {% endblock %}

package/admin/pages/indieauth/refused.njk

@@ -1,11 +1,14 @@
 {# A sign-in request that cannot go ahead (TASK-158). Shown rather than
    redirected, because the fault is in the address it would redirect to. #}
 {% extends "layouts/base.njk" %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Sign-in refused{% endblock %}
 
 {% block content %}
-  <h1>This sign-in cannot go ahead</h1>
-  <p>{{ message }}</p>
-  <p>Go back to the app and try again. If it keeps happening, the app may be set up wrongly.</p>
+  {% call card() %}
+    <h1 class="card-title text-2xl">This sign-in cannot go ahead</h1>
+    <p>{{ message }}</p>
+    <p>Go back to the app and try again. If it keeps happening, the app may be set up wrongly.</p>
+  {% endcall %}
 {% endblock %}