@geekity/cms 0.36.1 → 0.38.0

package/admin/components/admin-bar.njk

@@ -6,7 +6,6 @@
    - `barScheme`, `adminColorScheme` of the user's admin theme; `auto` puts no
      data-scheme on the host.
    - `cspNonce`, on the admin only.
-   - `assetPrefix`, where static/admin-bar.js is served from.
 
    WordPress's "Howdy," menu, greeting the way this site's owner does. A
    popover rather than a script: the browser opens and closes it, shuts it on
@@ -45,4 +44,4 @@ html { margin-top: var(--geekity-admin-bar-height) !important; }
     </div>
   {% endif %}
 </nav>
-<script src="{{ assetPrefix }}admin-bar.js" defer></script></template></geekity-admin-bar>
+<script src="{{ adminAsset('admin-bar.js') }}" defer></script></template></geekity-admin-bar>

package/admin/components/blocks.njk

@@ -0,0 +1,250 @@
+{% from "components/table.njk" import table %}
+
+{% set SERIES = [
+  { dash: 'none', marker: 'circle' },
+  { dash: '6 4', marker: 'square' },
+  { dash: '2 3', marker: 'triangle' },
+  { dash: '10 3 2 3', marker: 'diamond' }
+] %}
+
+{% set TINTS = {
+  '0': 'fill-primary stroke-primary',
+  '1': 'fill-secondary stroke-secondary',
+  '2': 'fill-accent stroke-accent',
+  '3': 'fill-info stroke-info'
+} %}
+
+{% set TONES = { better: 'text-success', worse: 'text-error', 'none': '' } %}
+
+{% macro text(parts) -%}
+  {%- for part in parts -%}
+    {%- if part.code is defined -%}<code>{{ part.code }}</code>{%- else -%}{{ part }}{%- endif -%}
+  {%- endfor -%}
+{%- endmacro %}
+
+{% macro marker(shape, x, y) -%}
+  {%- if shape == 'circle' -%}
+    <circle class="stroke-base-100" stroke-width="2" cx="{{ x }}" cy="{{ y }}" r="4" />
+  {%- elif shape == 'square' -%}
+    <rect class="stroke-base-100" stroke-width="2" x="{{ x - 4 }}" y="{{ y - 4 }}" width="8" height="8" />
+  {%- elif shape == 'triangle' -%}
+    <polygon class="stroke-base-100" stroke-width="2" points="{{ x }},{{ y - 5 }} {{ x + 5 }},{{ y + 4 }} {{ x - 5 }},{{ y + 4 }}" />
+  {%- else -%}
+    <polygon class="stroke-base-100" stroke-width="2" points="{{ x }},{{ y - 5 }} {{ x + 5 }},{{ y }} {{ x }},{{ y + 5 }} {{ x - 5 }},{{ y }}" />
+  {%- endif -%}
+{%- endmacro %}
+
+{% macro textures(id, count) -%}
+  <defs>
+    {% if count > 1 %}
+      <pattern id="{{ id }}-texture-1" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+        <line class="stroke-base-100" x1="0" y1="0" x2="0" y2="6" stroke-width="2" />
+      </pattern>
+    {% endif %}
+    {% if count > 2 %}
+      <pattern id="{{ id }}-texture-2" width="5" height="5" patternUnits="userSpaceOnUse">
+        <circle class="fill-base-100" cx="2.5" cy="2.5" r="1.25" />
+      </pattern>
+    {% endif %}
+    {% if count > 3 %}
+      <pattern id="{{ id }}-texture-3" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
+        <line class="stroke-base-100" x1="0" y1="0" x2="0" y2="6" stroke-width="2" />
+      </pattern>
+    {% endif %}
+  </defs>
+{%- endmacro %}
+
+{% macro numbers(view) -%}
+  {% if view.rows.length %}
+    <details class="text-sm">
+      <summary class="cursor-pointer text-base-content/70">Show the numbers</summary>
+      {% call table(view.description, inCard=true) %}
+        <thead>
+          <tr>{% for column in view.columns %}<th scope="col">{{ column }}</th>{% endfor %}</tr>
+        </thead>
+        <tbody>
+          {% for row in view.rows %}
+            <tr><th scope="row">{{ row.heading }}</th>{% for cell in row.cells %}<td>{{ cell }}</td>{% endfor %}</tr>
+          {% endfor %}
+        </tbody>
+      {% endcall %}
+    </details>
+  {% endif %}
+{%- endmacro %}
+
+{% macro timeSeries(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    {% if view.series.length > 1 %}
+      <ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm" aria-hidden="true">
+        {% for entry in view.series %}
+          {% set look = SERIES[loop.index0] %}
+          <li class="flex items-center gap-2">
+            <svg class="h-3 w-7" viewBox="0 0 28 12">
+              <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">
+                <line x1="0" y1="6" x2="28" y2="6" stroke-width="2" stroke-dasharray="{{ look.dash }}" />
+                {{ marker(look.marker, 14, 6) }}
+              </g>
+            </svg>
+            <span>{{ entry.name }}</span></li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" class="h-auto w-full max-w-xl">
+      {% for tick in view.yTicks %}
+        <line class="{{ 'stroke-base-content/30' if loop.first else 'stroke-base-content/10' }}" x1="{{ view.plot.left }}" x2="{{ view.plot.right }}" y1="{{ tick.y }}" y2="{{ tick.y }}" stroke-width="1" />
+        <text class="fill-base-content/70" x="{{ view.plot.left - 6 }}" y="{{ tick.y + 4 }}" text-anchor="end" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for tick in view.xTicks %}
+        <text class="fill-base-content/70" x="{{ tick.x }}" y="{{ view.height - 8 }}" text-anchor="middle" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for entry in view.series %}
+        {% set look = SERIES[loop.index0] %}
+        <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">
+          <path class="fill-none" stroke-dasharray="{{ look.dash }}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" d="{{ entry.path }}" />
+        </g>
+      {% endfor %}
+      {% for entry in view.series %}
+        {% set look = SERIES[loop.index0] %}
+        <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}">{{ marker(look.marker, entry.end.x, entry.end.y) }}</g>
+      {% endfor %}
+      {% for band in view.bands %}
+        <rect class="fill-transparent" x="{{ band.x }}" y="{{ view.plot.top }}" width="{{ band.width }}" height="{{ view.plot.bottom - view.plot.top }}" pointer-events="all"><title>{{ band.title }}</title></rect>
+      {% endfor %}
+    </svg>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro bars(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    {% if view.series.length > 1 %}
+      <ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm" aria-hidden="true">
+        {% for name in view.series %}
+          <li class="flex items-center gap-2">
+            <svg class="size-3" viewBox="0 0 12 12">
+              <g class="{{ TINTS | modifier(loop.index0 | string) | trim }}"><rect width="12" height="12" rx="2" /></g>
+              {% if not loop.first %}<rect width="12" height="12" rx="2" fill="url(#{{ view.id }}-texture-{{ loop.index0 }})" />{% endif %}
+            </svg>
+            <span>{{ name }}</span></li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" class="h-auto w-full max-w-xl">
+      {{ textures(view.id, view.series.length) }}
+      {% for tick in view.yTicks %}
+        <line class="{{ 'stroke-base-content/30' if loop.first else 'stroke-base-content/10' }}" x1="{{ view.plot.left }}" x2="{{ view.plot.right }}" y1="{{ tick.y }}" y2="{{ tick.y }}" stroke-width="1" />
+        <text class="fill-base-content/70" x="{{ view.plot.left - 6 }}" y="{{ tick.y + 4 }}" text-anchor="end" font-size="12">{{ tick.label }}</text>
+      {% endfor %}
+      {% for bar in view.bars %}
+        {% for segment in bar.segments %}
+          <g class="{{ TINTS | modifier(segment.series | string) | trim }}"><rect x="{{ segment.x }}" y="{{ segment.y }}" width="{{ segment.width }}" height="{{ segment.height }}"><title>{{ segment.title }}</title></rect></g>
+          {% if segment.series > 0 %}<rect x="{{ segment.x }}" y="{{ segment.y }}" width="{{ segment.width }}" height="{{ segment.height }}" fill="url(#{{ view.id }}-texture-{{ segment.series }})" pointer-events="none" />{% endif %}
+        {% endfor %}
+        {% if bar.total %}
+          <text class="fill-base-content font-semibold" x="{{ bar.centerX }}" y="{{ bar.total.y }}" text-anchor="middle" font-size="11">{{ bar.total.text }}</text>
+        {% endif %}
+        {% if bar.tick %}
+          <text class="fill-base-content/70" x="{{ bar.centerX }}" y="{{ view.height - 8 }}" text-anchor="middle" font-size="12">{{ bar.tick }}</text>
+        {% endif %}
+      {% endfor %}
+    </svg>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro calendar(view) -%}
+  <div class="grid gap-3">
+    <p id="{{ view.id }}" class="sr-only">{{ view.description }}</p>
+    <div class="flex flex-row-reverse overflow-x-auto">
+      <svg role="img" aria-labelledby="{{ view.id }}" viewBox="0 0 {{ view.width }} {{ view.height }}" width="{{ view.width * 1.25 }}" height="{{ view.height * 1.25 }}" class="mr-auto h-auto{% if view.width * 1.25 > 640 %} max-w-full min-w-160{% endif %} shrink-0">
+        {% for month in view.months %}
+          <text class="fill-base-content/70" x="{{ month.x }}" y="11" text-anchor="start" font-size="10">{{ month.label }}</text>
+        {% endfor %}
+        {% for day in view.weekdays %}
+          <text class="fill-base-content/70" x="24" y="{{ day.y }}" text-anchor="end" font-size="9">{{ day.label }}</text>
+        {% endfor %}
+        {% for cell in view.cells %}
+          <rect class="{% if cell.level == 0 %}fill-base-content/10{% elif cell.level == 1 %}fill-primary/25{% elif cell.level == 2 %}fill-primary/50{% elif cell.level == 3 %}fill-primary/75{% else %}fill-primary{% endif %}" x="{{ cell.x }}" y="{{ cell.y }}" width="{{ view.cell }}" height="{{ view.cell }}" rx="2"><title>{{ cell.title }}</title></rect>
+        {% endfor %}
+      </svg>
+    </div>
+    <div class="flex items-center gap-1 text-xs text-base-content/70" aria-hidden="true">
+      <span>Less</span>
+      <svg class="h-3 w-[4.25rem]" viewBox="0 0 68 12">
+        <rect class="fill-base-content/10" x="0" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/25" x="14" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/50" x="28" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary/75" x="42" y="0" width="12" height="12" rx="2" />
+        <rect class="fill-primary" x="56" y="0" width="12" height="12" rx="2" />
+      </svg>
+      <span>More</span>
+    </div>
+    {{ numbers(view) }}
+  </div>
+{%- endmacro %}
+
+{% macro block(data) -%}
+  {% set view = data | drawn %}
+  {% if view.kind == 'paragraph' %}
+    <p class="text-sm">{{ text(view.parts) }}</p>
+  {% elif view.kind == 'table' %}
+    {% call table(view.table.caption, inCard=true) %}
+      <thead>
+        <tr>
+          {% for column in view.table.columns %}<th scope="col">{{ column }}</th>{% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in view.table.rows %}
+          <tr>
+            {% for cell in row %}
+              {% if cell.time is defined %}
+                <td class="whitespace-nowrap">{% if cell.time %}{{ cell.time | date('readable') }}{% else %}Never{% endif %}</td>
+              {% elif cell.text is defined %}
+                <td class="wrap-anywhere">{% if cell.href %}<a class="link" href="{{ cell.href }}">{{ cell.text }}</a>{% else %}{{ cell.text }}{% endif %}</td>
+              {% else %}
+                <td class="wrap-anywhere">{{ text([cell]) }}</td>
+              {% endif %}
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+    {% endcall %}
+  {% elif view.kind == 'stats' %}
+    <div class="stats flex flex-wrap gap-px bg-base-content/10 shadow">
+      {% for stat in view.stats %}
+        <div class="stat w-auto flex-auto border-0 bg-base-100">
+          <div class="stat-title">{{ stat.label }}</div>
+          <div class="stat-value">{{ stat.value }}</div>
+          {% if stat.change %}
+            <div class="stat-desc{{ TONES | modifier(stat.change.tone) }}">{% if stat.change.arrow %}<span aria-hidden="true">{{ stat.change.arrow }}</span> {% endif %}{{ stat.change.text }}</div>
+          {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+  {% elif view.kind == 'timeSeries' %}
+    {{ timeSeries(view) }}
+  {% elif view.kind == 'ranked' %}
+    <ol aria-label="{{ view.caption }}" class="grid gap-3 text-sm">
+      {% for item in view.items %}
+        <li class="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1">
+          <span class="truncate">{% if item.href %}<a class="link" href="{{ item.href }}">{{ item.label }}</a>{% else %}{{ item.label }}{% endif %}</span>
+          <span class="tabular-nums">{{ item.value }}</span>
+          <svg class="col-span-2 h-1.5 w-full" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true">
+            <rect class="fill-base-content/10" width="100" height="6" />
+            <rect class="fill-primary" width="{{ item.widthPercent }}" height="6" />
+          </svg>
+        </li>
+      {% endfor %}
+    </ol>
+  {% elif view.kind == 'bars' %}
+    {{ bars(view) }}
+  {% elif view.kind == 'calendar' %}
+    {{ calendar(view) }}
+  {% else %}
+    {% if view.caption %}<p class="text-sm font-semibold">{{ view.caption }}</p>{% endif %}
+    <p class="text-sm text-base-content/70">No data to show.</p>
+  {% endif %}
+{%- endmacro %}

package/admin/components/card.njk

@@ -15,17 +15,21 @@
 
      size   xs, sm, md, lg, xl
      style  border, dash
+     tone   warning, a warning-coloured border for a card that flags a problem
 
    A value outside its set is a render error.
 
    `{% call cardActions() %}…{% endcall %}`, inside a card's body, is the row
-   of buttons at its foot: `<div class="card-actions justify-end">`. #}
+   of buttons at its foot: `<div class="card-actions mt-2 justify-end">`. The
+   margin is there because card-body's gap spaces only its own children, and
+   the row usually sits inside a form, under the last field. #}
 
 {% set SIZES = { xs: 'card-xs', sm: 'card-sm', md: 'card-md', lg: 'card-lg', xl: 'card-xl' } %}
 {% set STYLES = { border: 'card-border', dash: 'card-dash' } %}
+{% set TONES = { warning: 'border-2 border-warning' } %}
 
-{% macro card(title='', size=none, style=none) -%}
-<div class="card bg-base-100 shadow-sm{{ SIZES | modifier(size) }}{{ STYLES | modifier(style) }}">
+{% macro card(title='', size=none, style=none, tone=none) -%}
+<div class="card bg-base-100 shadow-sm{{ SIZES | modifier(size) }}{{ STYLES | modifier(style) }}{{ TONES | modifier(tone) }}">
   <div class="card-body">
     {% if title %}
     <h2 class="card-title">{{ title }}</h2>
@@ -36,5 +40,5 @@
 {%- endmacro %}
 
 {% macro cardActions() -%}
-<div class="card-actions justify-end">{{ caller() }}</div>
+<div class="card-actions mt-2 justify-end">{{ caller() }}</div>
 {%- endmacro %}

package/admin/layouts/base.njk

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{% block title %}Admin{% endblock %}{% if site.title %} · {{ site.title }}{% endif %}</title>
     <meta name="robots" content="noindex, nofollow" />
-    <link rel="stylesheet" href="{{ assetPrefix }}admin.css" />
+    <link rel="stylesheet" href="{{ adminAsset('admin.css') }}" />
   </head>
   <body class="min-h-screen bg-base-200 text-base-content">
     {# First on every screen, so a keyboard gets past the bar and the menu in

package/admin/pages/comments/all.njk

@@ -31,7 +31,7 @@
   {% else %}
     <ul class="mb-6 flex max-w-3xl flex-col gap-4">
       {% for row in rows %}
-        <li>
+        <li id="comment-{{ row.id }}">
           {% call card() %}
             <p class="flex flex-wrap items-center gap-x-3 gap-y-1">
               <span class="font-semibold">{{ row.author }}</span>

package/admin/pages/dashboard/home.njk

@@ -1,11 +1,23 @@
 {% extends "layouts/shell.njk" %}
 {% from "components/stat.njk" import stats, stat %}
 {% from "components/card.njk" import card %}
-{% from "components/table.njk" import table %}
-{% from "components/badge.njk" import status %}
+{% from "components/badge.njk" import badge %}
+{% from "components/blocks.njk" import block %}
+{% from "components/tabs.njk" import tabs %}
 
 {% block title %}Dashboard{% endblock %}
 
+{% macro widgetCard(widget, tone=none) -%}
+  {% call card(title=widget.title, tone=tone) %}
+    {% if widget.status == 'stale' %}
+      <p class="text-sm">{{ badge('Stale', color='warning') }} The latest load failed. These figures are from {{ widget.loadedAt }}.</p>
+    {% elif widget.status == 'unavailable' %}
+      <p>These stats are unavailable right now.</p>
+    {% endif %}
+    {% for data in widget.blocks %}{{ block(data) }}{% endfor %}
+  {% endcall %}
+{%- endmacro %}
+
 {% block content %}
   <h1 class="mb-6 text-2xl font-bold">Dashboard</h1>
 
@@ -27,34 +39,23 @@
     </div>
   </section>
 
-  {% call card(title='Recent posts') %}
-    {% if recent.length %}
-      {% call table('Recent posts', inCard=true) %}
-        <thead>
-          <tr>
-            <th scope="col">Title</th>
-            <th scope="col">Date</th>
-            <th scope="col">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for post in recent %}
-            <tr>
-              <td><a class="link link-hover" href="{{ post.editUrl }}">{{ post.title }}</a></td>
-              <td class="whitespace-nowrap">{{ post.date | date('html') }}</td>
-              <td>
-                {% if post.draft %}
-                  {{ status('draft', 'Draft') }}
-                {% else %}
-                  {{ status('published', 'Published') }}
-                {% endif %}
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      {% endcall %}
-    {% else %}
-      <p>Nothing written yet.</p>
-    {% endif %}
-  {% endcall %}
+  {% for widget in alerts %}
+    <section class="mb-8">{{ widgetCard(widget, tone='warning') }}</section>
+  {% endfor %}
+
+  {% if widgets.length %}
+    <div class="@container">
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+        <h2 class="text-lg font-semibold">Activity</h2>
+        {{ tabs(periods, 'Period', size='sm') }}
+      </div>
+      <div class="grid grid-cols-1 gap-6 @3xl:grid-cols-2">
+        {% for widget in widgets %}
+          <div class="min-w-0{% if widget.width == 'full' %} @3xl:col-span-2{% endif %}">
+            {{ widgetCard(widget) }}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
 {% endblock %}

package/admin/pages/documents/editor.njk

@@ -674,21 +674,21 @@
   <script
     type="module"
     id="editor-script"
-    src="{{ assetPrefix }}editor.js"
+    src="{{ adminAsset('editor.js') }}"
     nonce="{{ cspNonce }}"
   ></script>
 
   {# The slug and permalink auto-fill, in a file of its own so the policy never
      has to allow an inline script. #}
-  <script defer src="{{ assetPrefix }}slug.js"></script>
-  <script defer src="{{ assetPrefix }}upload-drop.js"></script>
+  <script defer src="{{ adminAsset('slug.js') }}"></script>
+  <script defer src="{{ adminAsset('upload-drop.js') }}"></script>
   {% if kind.type == 'post' %}
-    <script defer src="{{ assetPrefix }}location.js"></script>
+    <script defer src="{{ adminAsset('location.js') }}"></script>
   {% endif %}
   {% if editorActions | length %}
-    <script defer src="{{ assetPrefix }}editor-actions.js"></script>
+    <script defer src="{{ adminAsset('editor-actions.js') }}"></script>
   {% endif %}
   {% if sections and sections.shown.review %}
-    <script defer src="{{ assetPrefix }}item-lookup.js"></script>
+    <script defer src="{{ adminAsset('item-lookup.js') }}"></script>
   {% endif %}
 {% endblock %}

package/admin/pages/federation/followers.njk

@@ -226,7 +226,7 @@
     {% endcall %}
   </section>
 
-  <section>
+  <section id="delivery">
     <h2 class="mb-3 text-lg font-semibold">Delivery</h2>
     {% if posts.length %}
       {% call table('Delivery') %}
@@ -295,5 +295,5 @@
       <p>No post has been announced to the fediverse yet.</p>
     {% endif %}
   </section>
-  <script defer src="{{ assetPrefix }}job-status.js"></script>
+  <script defer src="{{ adminAsset('job-status.js') }}"></script>
 {% endblock %}

package/admin/pages/media/file.njk

@@ -139,5 +139,5 @@
     </div>
   </div>
 
-  <script defer src="{{ assetPrefix }}copy.js"></script>
+  <script defer src="{{ adminAsset('copy.js') }}"></script>
 {% endblock %}

package/admin/pages/media/library.njk

@@ -130,8 +130,8 @@
     </p>
   {% endif %}
 
-  <script defer src="{{ assetPrefix }}copy.js"></script>
-  <script defer src="{{ assetPrefix }}upload-drop.js"></script>
-  <script defer src="{{ assetPrefix }}media.js"></script>
-  <script defer src="{{ assetPrefix }}job-status.js"></script>
+  <script defer src="{{ adminAsset('copy.js') }}"></script>
+  <script defer src="{{ adminAsset('upload-drop.js') }}"></script>
+  <script defer src="{{ adminAsset('media.js') }}"></script>
+  <script defer src="{{ adminAsset('job-status.js') }}"></script>
 {% endblock %}

package/admin/pages/plugins/add.njk

@@ -0,0 +1,46 @@
+{# /admin/plugins/add: install a plugin from the npm registry (TASK-466).
+
+   Reached from the Add plugin button on the Plugins screen. A refused or
+   failed install comes back here with what was typed still in the boxes. #}
+{% extends "layouts/shell.njk" %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
+{% import "components/fields.njk" as fields %}
+
+{% block title %}Add plugin{% endblock %}
+
+{% block content %}
+  <h1 class="mb-6 text-2xl font-bold">Add plugin</h1>
+
+  <div class="flex max-w-2xl flex-col gap-6">
+    {% call card() %}
+      <p class="text-sm">
+        A plugin runs as the site, with access to everything under <code>data/</code>,
+        the accounts and keys and other plugins' secrets. Add only plugins you trust.
+      </p>
+      {% if problems.package or problems.password %}
+        {% call fields.summary('Nothing was installed. Fix the fields marked below and try again.') %}
+          {{ fields.problem('plugin-package', problems.package) }}
+          {{ fields.problem('plugin-add-password', problems.password) }}
+        {% endcall %}
+      {% endif %}
+      <form id="plugin-add" method="post" action="{{ addUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        {{ fields.text('plugin-package', 'package', 'Package', value=package,
+             hint='An npm package name, such as @geekity/plugin-llm.', error=problems.package,
+             required=true,
+             spellcheck='false', autocomplete='off') }}
+        {{ fields.text('plugin-version', 'version', 'Version (optional)', value=version,
+             hint='A version, a range or a dist-tag. Empty takes latest.', spellcheck='false',
+             autocomplete='off') }}
+        {{ fields.password('plugin-add-password', 'password', 'Your password',
+             error=problems.password, autocomplete='current-password', required=true) }}
+        {% call cardActions() %}
+          {{ button('Add plugin', type='submit', color='primary') }}
+        {% endcall %}
+      </form>
+    {% endcall %}
+
+    <p class="text-sm"><a class="link" href="{{ backUrl }}">Back to Plugins</a></p>
+  </div>
+{% endblock %}

package/admin/pages/plugins/installed.njk

@@ -8,16 +8,17 @@
    (TASK-288). #}
 {% extends "layouts/shell.njk" %}
 {% from "components/badge.njk" import status %}
-{% from "components/button.njk" import button %}
+{% from "components/button.njk" import button, buttonLink %}
 {% from "components/card.njk" import card, cardActions %}
-{% from "components/button.njk" import buttonLink %}
-{% import "components/fields.njk" as fields %}
 {% from "components/table.njk" import table %}
 
 {% block title %}Plugins{% endblock %}
 
 {% block content %}
-  <h1 class="mb-6 text-2xl font-bold">Plugins</h1>
+  <div class="mb-6 flex flex-wrap items-center gap-4">
+    <h1 class="text-2xl font-bold">Plugins</h1>
+    {% if installer == 'on' %}{{ buttonLink('Add plugin', addUrl, color='primary') }}{% endif %}
+  </div>
 
   {% if reloaded %}
     <div role="status" class="alert alert-success mb-6"><span>Plugins reloaded.</span></div>
@@ -55,34 +56,6 @@
 
   {% if installer == 'on' %}
     <div class="mb-8 grid grid-cols-1 items-start gap-6 xl:grid-cols-2">
-      {% call card(title="Add plugin") %}
-        <p class="text-sm">
-          A plugin runs as the site, with access to everything under <code>data/</code>,
-          the accounts and keys and other plugins' secrets. Add only plugins you trust.
-        </p>
-        {% if addProblems.package or addProblems.password %}
-          {% call fields.summary('Nothing was installed. Fix the fields marked below and try again.') %}
-            {{ fields.problem('plugin-package', addProblems.package) }}
-            {{ fields.problem('plugin-add-password', addProblems.password) }}
-          {% endcall %}
-        {% endif %}
-        <form id="plugin-add" method="post" action="{{ add.url }}">
-          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-          {{ fields.text('plugin-package', 'package', 'Package', value=add.package,
-               hint='An npm package name, such as @geekity/plugin-llm.', error=addProblems.package,
-               required=true,
-               spellcheck='false', autocomplete='off') }}
-          {{ fields.text('plugin-version', 'version', 'Version (optional)', value=add.version,
-               hint='A version, a range or a dist-tag. Empty takes latest.', spellcheck='false',
-               autocomplete='off') }}
-          {{ fields.password('plugin-add-password', 'password', 'Your password',
-               error=addProblems.password, autocomplete='current-password', required=true) }}
-          {% call cardActions() %}
-            {{ button('Add plugin', type='submit', color='primary') }}
-          {% endcall %}
-        </form>
-      {% endcall %}
-
       {% call card(title="Updates") %}
         <p class="text-sm">
           {% if checkedAt %}Last checked {{ checkedAt }}.{% else %}Not checked since this server started.{% endif %}

package/admin/pages/plugins/screen.njk

@@ -1,18 +1,13 @@
 {# /admin/plugins/<package name>: a plugin's own screen (decision-33). The
-   plugin hands over cards of paragraphs and tables as data and this draws
-   them, so a plugin writes no markup and everything it says is escaped. #}
+   plugin hands over cards of blocks as data (components/blocks.njk) and this
+   draws them, so a plugin writes no markup and everything it says is
+   escaped. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
 {% from "components/setting-fields.njk" import settingFields %}
 {% from "components/button.njk" import button %}
 {% from "components/card.njk" import card, cardActions %}
-{% from "components/table.njk" import table %}
-
-{% macro text(parts) -%}
-  {%- for part in parts -%}
-    {%- if part.code is defined -%}<code>{{ part.code }}</code>{%- else -%}{{ part }}{%- endif -%}
-  {%- endfor -%}
-{%- endmacro %}
+{% from "components/blocks.njk" import block %}
 
 {% block title %}{{ title }}{% endblock %}
 
@@ -56,32 +51,7 @@
 
     {% for entry in cards %}
       {% call card(title=entry.title) %}
-        {% for block in entry.blocks %}
-          {% if block.table %}
-            {% call table(block.table.caption, inCard=true) %}
-              <thead>
-                <tr>
-                  {% for column in block.table.columns %}<th scope="col">{{ column }}</th>{% endfor %}
-                </tr>
-              </thead>
-              <tbody>
-                {% for row in block.table.rows %}
-                  <tr>
-                    {% for cell in row %}
-                      {% if cell.time is defined %}
-                        <td class="whitespace-nowrap">{% if cell.time %}{{ cell.time | date('readable') }}{% else %}Never{% endif %}</td>
-                      {% else %}
-                        <td>{{ text([cell]) }}</td>
-                      {% endif %}
-                    {% endfor %}
-                  </tr>
-                {% endfor %}
-              </tbody>
-            {% endcall %}
-          {% else %}
-            <p class="text-sm">{{ text(block.paragraph) }}</p>
-          {% endif %}
-        {% endfor %}
+        {% for data in entry.blocks %}{{ block(data) }}{% endfor %}
       {% endcall %}
     {% endfor %}
   </div>

package/admin/pages/settings/general.njk

@@ -54,7 +54,7 @@
   {{ field.text('settings-icon', fields.icon, 'Site icon', form.icon,
        error=problems.icon, hintHtml=iconHint) }}
   {{ uploadControl('field', 'settings-icon', uploadsUrl, images=true) }}
-  <script defer src="{{ assetPrefix }}upload-drop.js"></script>
+  <script defer src="{{ adminAsset('upload-drop.js') }}"></script>
 
   <div class="flex items-center gap-4">
     {% if iconPreview %}

package/admin/pages/tools/export.njk

@@ -88,5 +88,5 @@
       {% endif %}
     </div>
   </div>
-  <script defer src="{{ assetPrefix }}job-status.js"></script>
+  <script defer src="{{ adminAsset('job-status.js') }}"></script>
 {% endblock %}