@geekity/cms 0.21.0 → 0.22.0

package/admin/pages/documents/list.njk

@@ -1,112 +1,103 @@
 {# The listing behind /admin/posts and /admin/pages. One template for both:
    `kind` says which, and whether the table has a date column and taxonomy
-   ones.
-
-   There is no `pages/posts/` or `pages/categories/` for the same reason.
-   Posts, Pages, Categories and Tags are four menu entries over three
-   templates — this listing, the editor beside it and the taxonomy screen —
-   because a post and a page differ by a `kind`, not by a screen. A folder per
-   menu entry would mean either a second copy of each template or a re-export
-   that exists only to make the directory look like the menu, so the folder is
-   named after what the screens are about instead. #}
+   ones. `pages/documents/` is named after what its screens are about rather
+   than after the menu, because Posts, Pages, Categories and Tags are four
+   menu entries over three templates. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button, buttonLink %}
+{% from "components/pagination.njk" import pagination %}
+{% from "components/table.njk" import table, row, heading, cell, rowToggle %}
+{% from "components/tabs.njk" import tabs %}
 
 {% block title %}{{ kind.plural }}{% endblock %}
 
 {% block content %}
-  <h1>{{ kind.plural }} <a class="admin-button admin-button-small" href="{{ newUrl }}">Add new</a></h1>
+  <div class="mb-6 flex flex-wrap items-center gap-4">
+    <h1 class="text-2xl font-bold">{{ kind.plural }}</h1>
+    {{ buttonLink('Add new', newUrl, color='primary') }}
+  </div>
 
-  <ul class="admin-filters">
-    {% for entry in filters %}
-      <li>
-        <a href="{{ entry.url }}"{% if entry.current %} aria-current="true"{% endif %}>{{ entry.label }}</a>
-      </li>
-    {% endfor %}
-  </ul>
+  <div class="mb-4 max-w-full overflow-x-auto contain-inline-size">
+    {{ tabs(filters, 'Show ' + (kind.plural | lower)) }}
+  </div>
 
   {% if documents.length %}
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">{{ kind.plural }}</caption>
+    {% call table(kind.plural) %}
       <thead>
         <tr>
           <th scope="col">Title</th>
-          <th scope="col">Author</th>
+          {{ heading('Author') }}
           {% if kind.tagged %}
-            <th scope="col">Tags</th>
+            {{ heading('Tags') }}
           {% endif %}
           {% if kind.categorised %}
-            <th scope="col">Categories</th>
+            {{ heading('Categories') }}
           {% endif %}
           {% if kind.dated %}
-            <th scope="col">Date</th>
+            {{ heading('Date') }}
           {% else %}
-            <th scope="col">Updated</th>
+            {{ heading('Updated') }}
           {% endif %}
-          <th scope="col">Status</th>
-          <th scope="col">Actions</th>
+          {{ heading('Status') }}
         </tr>
       </thead>
       <tbody>
         {% for document in documents %}
-          <tr>
-            <td><a href="{{ document.editUrl }}">{{ document.title }}</a>{% if document.role %} &mdash; <span class="admin-page-role">{{ document.role }}</span>{% endif %}</td>
-            <td>{{ document.author }}</td>
+          {% call row() %}
+            <td>
+              <a class="link link-hover font-medium" href="{{ document.editUrl }}">{{ document.title }}</a>{% if document.role %} &mdash; {{ document.role }}{% endif %}
+              <div class="-ms-2 mt-1 flex items-center gap-1 whitespace-nowrap transition-opacity lg:[@media(hover:hover)]:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
+                {{ buttonLink('Edit', document.editUrl, style='ghost', size='xs') }}
+                <form method="post" action="{{ document.editUrl }}">
+                  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                  <input type="hidden" name="return" value="{{ returnUrl }}" />
+                  {% if document.trashed %}
+                    {{ button('Restore', type='submit', name='action', value='restore', style='ghost', size='xs') }}
+                  {% else %}
+                    {{ button('Move to trash', type='submit', name='action', value='trash', style='ghost', size='xs') }}
+                  {% endif %}
+                </form>
+                {% if document.viewUrl %}
+                  {{ buttonLink('View', document.viewUrl, style='ghost', size='xs') }}
+                {% endif %}
+              </div>
+              {{ rowToggle(document.title) }}
+            </td>
+            {% call cell('Author', nowrap=true) %}{{ document.author }}{% endcall %}
             {% if kind.tagged %}
-              <td>{{ document.tags }}</td>
+              {% call cell('Tags') %}{{ document.tags }}{% endcall %}
             {% endif %}
             {% if kind.categorised %}
-              <td>{{ document.categories }}</td>
+              {% call cell('Categories') %}{{ document.categories }}{% endcall %}
             {% endif %}
             {% if kind.dated %}
-              <td>{{ document.date | date('html') }}</td>
+              {% call cell('Date', nowrap=true) %}{{ document.date | date('html') }}{% endcall %}
             {% else %}
-              <td>{{ document.updated | date('html') }}</td>
+              {% call cell('Updated', nowrap=true) %}{{ document.updated | date('html') }}{% endcall %}
             {% endif %}
-            <td>
+            {% call cell('Status') %}
               {% if document.trashed %}
-                <span class="admin-status admin-status-trashed">Trash</span>
+                {{ status('trashed', 'Trash') }}
               {% elif document.draft %}
-                <span class="admin-status admin-status-draft">Draft</span>
+                {{ status('draft', 'Draft') }}
               {% elif document.scheduled %}
-                <span class="admin-status admin-status-scheduled">Scheduled</span>
+                {{ status('scheduled', 'Scheduled') }}
               {% elif document.hidden %}
-                <span class="admin-status admin-status-draft">Hidden</span>
+                {{ status('hidden', 'Hidden') }}
               {% else %}
-                <span class="admin-status">Published</span>
+                {{ status('published', 'Published') }}
               {% endif %}
-            </td>
-            <td class="admin-actions">
-              <a href="{{ document.editUrl }}">Edit</a>
-              <form method="post" action="{{ document.editUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="return" value="{{ returnUrl }}" />
-                {% if document.trashed %}
-                  <button type="submit" name="action" value="restore">Restore</button>
-                {% else %}
-                  <button type="submit" name="action" value="trash">Move to trash</button>
-                {% endif %}
-              </form>
-              {% if document.viewUrl %}
-                <a href="{{ document.viewUrl }}">View</a>
-              {% endif %}
-            </td>
-          </tr>
+            {% endcall %}
+          {% endcall %}
         {% endfor %}
       </tbody>
-    </table>
+    {% endcall %}
 
-    {% if previousUrl or nextUrl %}
-      <nav class="admin-pagination" aria-label="Pages">
-        {% if previousUrl %}
-          <a rel="prev" href="{{ previousUrl }}">Newer</a>
-        {% endif %}
-        <span>Page {{ page }}</span>
-        {% if nextUrl %}
-          <a rel="next" href="{{ nextUrl }}">Older</a>
-        {% endif %}
-      </nav>
-    {% endif %}
+    <div class="mt-4">
+      {{ pagination(page, previousUrl=previousUrl, nextUrl=nextUrl) }}
+    </div>
   {% else %}
-    <p class="admin-empty">Nothing here.</p>
+    <p>Nothing here.</p>
   {% endif %}
 {% endblock %}

package/admin/pages/documents/syndication.njk

@@ -1,13 +1,19 @@
 {# /admin/syndication: the services a post can be sent to, which is
    content/_data/syndicationTargets.json itself.
 
-   One panel per entry the file holds, in file order, the broken ones too:
-   an entry that declares nothing says why, so it can be fixed or removed here.
-   Each panel saves or removes its own entry, and the Add form at the bottom
-   appends one. A file that is not a JSON list is shown with its problem and
-   no forms, because saving over it would lose what it holds. #}
+   A table of every entry the file holds, in file order, the broken ones too,
+   each marked offered or ignored; then one card per entry that saves or
+   removes it, and the Add card that appends one. An entry that declares
+   nothing says why, so it can be fixed or removed here. A file that is not a
+   JSON list is shown with its problem and no forms, because saving over it
+   would lose what it holds. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/alert.njk" import alert %}
+{% from "components/badge.njk" import status %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
+{% from "components/table.njk" import table %}
 
 {% block title %}{{ heading }}{% endblock %}
 
@@ -30,23 +36,25 @@
 {% 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 fields marked below and try again.') %}
-      {% for panel in panels.concat([adding]) %}
-        {% if panel.key == refusedKey %}
-          {{ field.problem(panel.key + '-id', panel.problems.id) }}
-          {{ field.problem(panel.key + '-name', panel.problems.name) }}
-          {{ field.problem(panel.key + '-url', panel.problems.url) }}
-          {{ field.problem(panel.key + '-tag', panel.problems.tag) }}
-          {{ field.problem(panel.key + '-languages', panel.problems.languages) }}
-        {% endif %}
-      {% endfor %}
-    {% endcall %}
+    <div class="max-w-2xl">
+      {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
+        {% for panel in panels.concat([adding]) %}
+          {% if panel.key == refusedKey %}
+            {{ field.problem(panel.key + '-id', panel.problems.id) }}
+            {{ field.problem(panel.key + '-name', panel.problems.name) }}
+            {{ field.problem(panel.key + '-url', panel.problems.url) }}
+            {{ field.problem(panel.key + '-tag', panel.problems.tag) }}
+            {{ field.problem(panel.key + '-languages', panel.problems.languages) }}
+          {% endif %}
+        {% endfor %}
+      {% endcall %}
+    </div>
   {% endif %}
 
-  <p class="admin-hint">
+  <p class="mb-6 max-w-prose text-sm">
     Services such as IndieNews and Bridgy Publish copy a post when it links to them and sends
     them a webmention. Each target listed here gets a checkbox in the post editor and is offered
     to Micropub clients. They are kept in <code>content/{{ file }}</code>, which this screen reads
@@ -54,57 +62,87 @@
   </p>
 
   {% if fileProblem %}
-    <div class="admin-error" role="alert">
-      <p>{{ fileProblem }} No target is offered until it is fixed. Fix or remove the file by hand;
-        this screen will not save over it, because that would lose what it holds.</p>
+    <div class="max-w-2xl">
+      {% call alert(color='error') %}
+        <p>{{ fileProblem }} No target is offered until it is fixed. Fix or remove the file by hand;
+          this screen will not save over it, because that would lose what it holds.</p>
+      {% endcall %}
     </div>
   {% else %}
-    <h2>Targets</h2>
-
     {% if panels.length %}
-      <ul class="admin-menu-boxes">
+      <div class="mb-8">
+        {% call table('Targets') %}
+          <thead>
+            <tr>
+              <th scope="col">Name</th>
+              <th scope="col">Id</th>
+              <th scope="col">URL</th>
+              <th scope="col">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for panel in panels %}
+              <tr>
+                <td><a class="link link-hover font-medium" href="#{{ panel.key }}">{{ panel.form.name or ('Entry ' + (panel.index + 1)) }}</a></td>
+                <td><code>{{ panel.form.id }}</code></td>
+                <td class="break-all">{{ panel.form.url }}</td>
+                <td>
+                  {% if panel.fileProblems.length %}
+                    {{ status('failed', 'Ignored') }}
+                  {% else %}
+                    {{ status('accepted', 'Offered') }}
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        {% endcall %}
+      </div>
+
+      <div class="grid max-w-2xl grid-cols-1 gap-6">
         {% for panel in panels %}
-          <li class="admin-menu-box">
-            <h3>{{ panel.form.name or ('Entry ' + (panel.index + 1)) }}</h3>
-            {% if panel.fileProblems.length %}
-              {% for problem in panel.fileProblems %}
-                <p class="admin-field-error">This entry is ignored. {{ problem }}</p>
-              {% endfor %}
-            {% else %}
-              <p class="admin-menu-name"><code>{{ panel.form.id }}</code></p>
-            {% endif %}
+          <div id="{{ panel.key }}">
+            {% call card(title=(panel.form.name or ('Entry ' + (panel.index + 1)))) %}
+              {% if panel.fileProblems.length %}
+                {% for problem in panel.fileProblems %}
+                  <p>This entry is ignored. {{ problem }}</p>
+                {% endfor %}
+              {% else %}
+                <p><code>{{ panel.form.id }}</code></p>
+              {% endif %}
 
-            <form method="post" action="{{ saveUrl }}">
-              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-              <input type="hidden" name="{{ fields.entry }}" value="{{ panel.index }}" />
-              <input type="hidden" name="{{ fields.was }}" value="{{ panel.was }}" />
-              {{ boxes(panel, fields) }}
-              <p class="admin-menu-buttons">
-                <button type="submit">Save target</button>
-              </p>
-            </form>
+              <form method="post" action="{{ saveUrl }}">
+                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                <input type="hidden" name="{{ fields.entry }}" value="{{ panel.index }}" />
+                <input type="hidden" name="{{ fields.was }}" value="{{ panel.was }}" />
+                {{ boxes(panel, fields) }}
+                <div class="mt-4">{{ button('Save target', type='submit', color='primary') }}</div>
+              </form>
 
-            <form class="admin-menu-delete" method="post" action="{{ deleteUrl }}">
-              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-              <input type="hidden" name="{{ fields.entry }}" value="{{ panel.index }}" />
-              <input type="hidden" name="{{ fields.was }}" value="{{ panel.was }}" />
-              <button type="submit">Remove this target</button>
-            </form>
-          </li>
+              <form method="post" action="{{ deleteUrl }}">
+                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                <input type="hidden" name="{{ fields.entry }}" value="{{ panel.index }}" />
+                <input type="hidden" name="{{ fields.was }}" value="{{ panel.was }}" />
+                {% call cardActions() %}
+                  {{ button('Remove this target', type='submit', color='error', style='ghost') }}
+                {% endcall %}
+              </form>
+            {% endcall %}
+          </div>
         {% endfor %}
-      </ul>
+      </div>
     {% else %}
-      <p class="admin-hint">This site declares no targets, so the editor offers none.</p>
+      <p class="mb-8">This site declares no targets, so the editor offers none.</p>
     {% endif %}
 
-    <h2>Add a target</h2>
-
-    <form class="admin-menu-add" method="post" action="{{ addUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      {{ boxes(adding, fields) }}
-      <p class="admin-menu-buttons">
-        <button type="submit">Add target</button>
-      </p>
-    </form>
+    <div class="mt-8 max-w-2xl">
+      {% call card(title='Add a target') %}
+        <form method="post" action="{{ addUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          {{ boxes(adding, fields) }}
+          <div class="mt-4">{{ button('Add target', type='submit', color='primary') }}</div>
+        </form>
+      {% endcall %}
+    </div>
   {% endif %}
 {% endblock %}

package/admin/pages/documents/taxonomy.njk

@@ -1,48 +1,51 @@
 {# /admin/tags and /admin/categories: every term in use, what carries it, and
-   the three things that can be done to it — rename, merge and delete. One
+   the three things that can be done to it: rename, merge and delete. One
    template for both taxonomies; `kind` says which. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/alert.njk" import alert %}
+{% 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>
 
   {# Above the table rather than under the field it came from: a refusal may be
      about a term the table no longer has a row for. #}
   {% if problems.to %}
-    <p class="admin-error">{{ problems.to }}</p>
+    <div class="mb-6 max-w-2xl">
+      {% call alert(color='error') %}<span id="taxonomy-problem">{{ problems.to }}</span>{% endcall %}
+    </div>
   {% endif %}
 
   {% if confirm %}
-    <form class="admin-settings" method="post" action="{{ renameUrl }}">
+    <form class="mb-6 max-w-2xl" method="post" action="{{ renameUrl }}">
       <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
       <input type="hidden" name="{{ fields.term }}" value="{{ confirm.term }}" />
       <input type="hidden" name="{{ fields.to }}" value="{{ confirm.to }}" />
       <input type="hidden" name="{{ fields.confirm }}" value="1" />
-
-      <h2>Merge “{{ confirm.term }}” into “{{ confirm.to }}”?</h2>
-
-      <p>
-        There is already a {{ label }} called “{{ confirm.to }}”, on
-        {{ confirm.targetFiles }} {% if confirm.targetFiles == 1 %}file{% else %}files{% endif %}.
-        Renaming “{{ confirm.term }}” merges the
-        {{ confirm.files }} {% if confirm.files == 1 %}file{% else %}files{% endif %} carrying it
-        into that one. A file that already carries both keeps it once.
-      </p>
-
-      <p class="admin-settings-buttons">
-        <button type="submit">Merge them</button>
-        <a href="{{ listUrl }}">Cancel</a>
-      </p>
+      {% call card(title='Merge “' + confirm.term + '” into “' + confirm.to + '”?', style='border') %}
+        <p>
+          There is already a {{ label }} called “{{ confirm.to }}”, on
+          {{ confirm.targetFiles }} {% if confirm.targetFiles == 1 %}file{% else %}files{% endif %}.
+          Renaming “{{ confirm.term }}” merges the
+          {{ confirm.files }} {% if confirm.files == 1 %}file{% else %}files{% endif %} carrying it
+          into that one. A file that already carries both keeps it once.
+        </p>
+        {% call cardActions() %}
+          {{ buttonLink('Cancel', listUrl, style='ghost') }}
+          {{ button('Merge them', type='submit', color='primary') }}
+        {% endcall %}
+      {% endcall %}
     </form>
   {% endif %}
 
   {% if terms.length == 0 %}
     <p>Nothing carries a {{ label }} yet.</p>
   {% else %}
-    <table class="admin-list">
-      <caption class="admin-visually-hidden">{{ heading }}</caption>
+    {% call table(heading) %}
       <thead>
         <tr>
           <th scope="col">{{ kind.singular | capitalize }}</th>
@@ -54,42 +57,43 @@
       </thead>
       <tbody>
         {% for entry in terms %}
+          {% set refused = problems.to and form.term == entry.term %}
           <tr>
-            <td><a href="{{ entry.archiveUrl }}">{{ entry.term }}</a></td>
+            <td><a class="link link-hover font-medium" href="{{ entry.archiveUrl }}">{{ entry.term }}</a></td>
             <td>{{ entry.published }}</td>
             <td>{{ entry.total }}</td>
             <td>
-              <form class="admin-inline" method="post" action="{{ renameUrl }}">
+              <form class="flex items-center gap-2" method="post" action="{{ renameUrl }}">
                 <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
                 <input type="hidden" name="{{ fields.term }}" value="{{ entry.term }}" />
-                <label class="admin-visually-hidden" for="rename-{{ loop.index }}">
-                  Rename {{ entry.term }} to
-                </label>
+                <label class="sr-only" for="rename-{{ loop.index }}">Rename {{ entry.term }} to</label>
                 <input
                   id="rename-{{ loop.index }}"
                   name="{{ fields.to }}"
                   type="text"
                   value="{% if form.term == entry.term %}{{ form.to }}{% endif %}"
                   required
+                  class="input input-sm w-40"
+                  {% if refused %}aria-invalid="true" aria-describedby="taxonomy-problem"{% endif %}
                 />
-                <button type="submit">Rename</button>
+                {{ button('Rename', type='submit', size='sm') }}
               </form>
             </td>
-            <td class="admin-actions">
+            <td>
               <form method="post" action="{{ deleteUrl }}">
                 <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
                 <input type="hidden" name="{{ fields.term }}" value="{{ entry.term }}" />
-                <button type="submit">Delete</button>
+                {{ button('Delete', type='submit', style='ghost', size='xs') }}
               </form>
             </td>
           </tr>
         {% endfor %}
       </tbody>
-    </table>
+    {% endcall %}
 
-    <p class="admin-hint">
+    <p class="mt-4 max-w-prose text-sm">
       Renaming, merging and deleting rewrite the front matter of every file carrying the
-      {{ label }} — drafts, scheduled posts and the trash included — and tell the feeds and the
+      {{ label }} (drafts, scheduled posts and the trash included) and tell the feeds and the
       fediverse about each published post that changed. The Files column is how many that is.
     </p>
   {% endif %}

package/admin/pages/error.njk

@@ -1,11 +1,14 @@
+{# The page an admin request that threw answers with. It extends the bare
+   layout rather than the shell because the shell reads the session, the menu
+   and the site, and any of those may be what failed. #}
 {% extends "layouts/base.njk" %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Something went wrong{% endblock %}
 
 {% block content %}
-  {# The page an admin request that threw answers with. It extends the bare
-     layout rather than the shell because the shell reads the session, the
-     menu and the site, and any of those may be what failed. #}
-  <h1>Something went wrong</h1>
-  <p>This screen could not be shown because of a problem on the server. The error has been logged. Try again in a moment, or go back to the <a href="{{ adminUrl }}">dashboard</a>.</p>
+  {% call card() %}
+    <h1 class="card-title text-2xl">Something went wrong</h1>
+    <p>This screen could not be shown because of a problem on the server. The error has been logged. Try again in a moment, or go back to the <a class="link" href="{{ adminUrl }}">dashboard</a>.</p>
+  {% endcall %}
 {% endblock %}