@geekity/cms 0.21.0 → 0.23.0

package/admin/pages/account/login.njk

@@ -1,29 +1,35 @@
 {% extends "layouts/base.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Log in{% endblock %}
 
 {% block content %}
-  <h1>Log in</h1>
+  {% call card() %}
+    <h1 class="card-title text-2xl">Log in</h1>
 
-  {% if error %}
-    {{ field.summary(error) }}
-  {% endif %}
-
-  <form method="post" action="{{ loginUrl }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-    {% if returnTo %}
-      <input type="hidden" name="return_to" value="{{ returnTo }}" />
+    {% if error %}
+      {{ field.summary(error) }}
     {% endif %}
 
-    {{ field.text('username', 'username', 'Username', username,
-         autocomplete='username', required=true, autofocus=true) }}
+    <form class="flex flex-col gap-2" method="post" action="{{ loginUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      {% if returnTo %}
+        <input type="hidden" name="return_to" value="{{ returnTo }}" />
+      {% endif %}
+
+      {{ field.text('username', 'username', 'Username', username,
+           autocomplete='username', required=true, autofocus=true) }}
 
-    {{ field.password('password', 'password', 'Password',
-         autocomplete='current-password', required=true) }}
+      {{ field.password('password', 'password', 'Password',
+           autocomplete='current-password', required=true) }}
 
-    <button type="submit">Log in</button>
-  </form>
+      <div class="mt-4">
+        {{ button('Log in', type='submit', color='primary', shape='block') }}
+      </div>
+    </form>
 
-  <p class="admin-hint"><a href="{{ forgotUrl }}">Forgotten your password?</a></p>
+    <p class="text-sm"><a class="link" href="{{ forgotUrl }}">Forgotten your password?</a></p>
+  {% endcall %}
 {% endblock %}

package/admin/pages/account/reset.njk

@@ -6,35 +6,44 @@
    passwords. #}
 {% 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 %}
 
 {% block title %}Set a new password{% endblock %}
 
 {% block content %}
-  <h1>Set a new password</h1>
-
-  {% if invalid %}
-    <p class="error">That link is no longer valid. A reset link lasts an hour and works once, and asking for a new password again invalidates the old one.</p>
-    <p><a href="{{ forgotUrl }}">Ask for another one</a></p>
-  {% else %}
-    {% if problem %}
-      {% call field.summary('The password was not set.') %}
-        {{ field.problem('password', problem) }}
+  {% call card() %}
+    <h1 class="card-title text-2xl">Set a new password</h1>
+
+    {% if invalid %}
+      {% call alert(color='error') %}
+        <span>That link is no longer valid. A reset link lasts an hour and works once, and asking for a new password again invalidates the old one.</span>
       {% endcall %}
+      <p><a class="link" href="{{ forgotUrl }}">Ask for another one</a></p>
+    {% else %}
+      {% if problem %}
+        {% call field.summary('The password was not set.') %}
+          {{ field.problem('password', problem) }}
+        {% endcall %}
+      {% endif %}
+
+      <form class="flex flex-col gap-2" method="post" action="{{ resetUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ fields.token }}" value="{{ token }}" />
+
+        {{ field.password('password', fields.password, 'New password', error=problem,
+             autocomplete='new-password', required=true, autofocus=true) }}
+
+        {{ field.password('password_confirmation', fields.passwordConfirmation,
+             'Repeat the password', autocomplete='new-password', required=true) }}
+
+        <p class="text-sm">Every browser signed in as you is signed out, and this link stops working.</p>
+
+        <div class="mt-4">
+          {{ button('Set the password', type='submit', color='primary', shape='block') }}
+        </div>
+      </form>
     {% endif %}
-
-    <form method="post" action="{{ resetUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-      <input type="hidden" name="{{ fields.token }}" value="{{ token }}" />
-
-      {{ field.password('password', fields.password, 'New password', error=problem,
-           autocomplete='new-password', required=true, autofocus=true) }}
-
-      {{ field.password('password_confirmation', fields.passwordConfirmation,
-           'Repeat the password', autocomplete='new-password', required=true) }}
-
-      <p class="admin-hint">Every browser signed in as you is signed out, and this link stops working.</p>
-
-      <button type="submit">Set the password</button>
-    </form>
-  {% endif %}
+  {% endcall %}
 {% endblock %}

package/admin/pages/account/setup.njk

@@ -1,28 +1,34 @@
 {% extends "layouts/base.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Set up{% endblock %}
 
 {% block content %}
-  <h1>Create the first admin</h1>
-  <p>Nobody can sign in to this site yet. Pick a username and a password.</p>
+  {% call card() %}
+    <h1 class="card-title text-2xl">Create the first admin</h1>
+    <p>Nobody can sign in to this site yet. Pick a username and a password.</p>
 
-  {% if error %}
-    {{ field.summary(error) }}
-  {% endif %}
+    {% if error %}
+      {{ field.summary(error) }}
+    {% endif %}
 
-  <form method="post" action="{{ setupUrl }}">
-    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    <form class="flex flex-col gap-2" method="post" action="{{ setupUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
-    {{ field.text('username', 'username', 'Username', username,
-         autocomplete='username', required=true, autofocus=true) }}
+      {{ field.text('username', 'username', 'Username', username,
+           autocomplete='username', required=true, autofocus=true) }}
 
-    {{ field.password('password', 'password', 'Password',
-         autocomplete='new-password', required=true) }}
+      {{ field.password('password', 'password', 'Password',
+           autocomplete='new-password', required=true) }}
 
-    {{ field.password('password_confirmation', 'password_confirmation', 'Repeat the password',
-         autocomplete='new-password', required=true) }}
+      {{ field.password('password_confirmation', 'password_confirmation', 'Repeat the password',
+           autocomplete='new-password', required=true) }}
 
-    <button type="submit">Create admin</button>
-  </form>
+      <div class="mt-4">
+        {{ button('Create admin', type='submit', color='primary', shape='block') }}
+      </div>
+    </form>
+  {% endcall %}
 {% endblock %}

package/admin/pages/appearance/themes.njk

@@ -1,67 +1,73 @@
 {# /admin/appearance/themes: the theme the site is wearing, everything else on
    disk, and the one button that changes it (decision-15).
 
-   The packaged theme comes first because it is the floor the others are laid
-   over rather than a peer in the list: a site theme ships what it changes and
-   inherits the rest. The themes directory is read on every request, so a theme
-   copied in over ssh or pulled down by git is here without a restart. #}
+   One card per theme. The packaged theme comes first because it is the floor
+   the others are laid over rather than a peer in the list: a site theme ships
+   what it changes and inherits the rest. The themes directory is read on
+   every request, so a theme copied in over ssh or pulled down by git is here
+   without a restart. #}
 {% extends "layouts/shell.njk" %}
+{% from "components/badge.njk" import badge, status %}
+{% from "components/button.njk" import button %}
+{% 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>
 
-  <ul class="admin-themes">
+  <ul class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 2xl:grid-cols-3">
     {% for theme in themes %}
-      <li class="admin-theme{% if theme.active %} admin-theme-current{% endif %}">
-        <h2>{{ theme.name }}</h2>
+      <li>
+        {% call card(title=theme.name, style=('border' if theme.active else none)) %}
+          <p class="flex flex-wrap items-center gap-2">
+            <code>{{ theme.id }}</code>
+            {% if theme.active %}
+              {{ status('active', 'Active') }}
+            {% endif %}
+            {% if theme.packaged %}
+              {{ badge('the theme this package ships', style='outline') }}
+            {% endif %}
+          </p>
 
-        {% if theme.active %}
-          <p class="admin-status admin-status-active">Active</p>
-        {% endif %}
-
-        {% if theme.description %}
-          <p class="admin-theme-description">{{ theme.description }}</p>
-        {% endif %}
-
-        <p class="admin-theme-id">
-          <code>{{ theme.id }}</code>
-          {% if theme.packaged %}
-            <span class="admin-status">the theme this package ships</span>
+          {% if theme.description %}
+            <p>{{ theme.description }}</p>
           {% endif %}
-        </p>
 
-        {% if not theme.active %}
-          <form method="post" action="{{ themesUrl }}">
-            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-            <input type="hidden" name="{{ fields.theme }}" value="{{ theme.value }}" />
-            <button type="submit">Activate</button>
-          </form>
-        {% endif %}
+          {% if not theme.active %}
+            <form method="post" action="{{ themesUrl }}">
+              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+              <input type="hidden" name="{{ fields.theme }}" value="{{ theme.value }}" />
+              {% call cardActions() %}
+                {{ button('Activate', type='submit', color='primary') }}
+              {% endcall %}
+            </form>
+          {% endif %}
+        {% endcall %}
       </li>
     {% endfor %}
   </ul>
 
   {% if unreadable.length %}
-    <h2>Not themes</h2>
-
-    <p class="admin-hint">
-      These are directories in <code>{{ themesDir }}</code> that were meant to be themes and are
-      not. They are listed rather than skipped, so a typo in a <code>theme.json</code> is something
-      you can see rather than a theme that quietly stopped appearing. None of them can be
-      activated.
-    </p>
-
-    <ul class="admin-broken-themes">
-      {% for entry in unreadable %}
-        <li class="admin-broken-theme"><code>{{ entry.id }}</code> — {{ entry.reason }}</li>
-      {% endfor %}
-    </ul>
+    <div class="mb-8 max-w-2xl">
+      {% call card(title='Not themes') %}
+        <p class="text-sm">
+          These are directories in <code class="break-all">{{ themesDir }}</code> that were meant to be themes and
+          are not. They are listed rather than skipped, so a typo in a <code>theme.json</code> is
+          something you can see rather than a theme that quietly stopped appearing. None of them
+          can be activated.
+        </p>
+        <ul class="list-disc ps-5">
+          {% for entry in unreadable %}
+            <li class="break-all"><code>{{ entry.id }}</code> — {{ entry.reason }}</li>
+          {% endfor %}
+        </ul>
+      {% endcall %}
+    </div>
   {% endif %}
 
-  <p class="admin-hint">
-    A theme is a directory in <code>{{ themesDir }}</code> with a <code>theme.json</code> in it,
+  <p class="max-w-prose text-sm">
+    A theme is a directory in <code class="break-all">{{ themesDir }}</code> with a <code>theme.json</code> in it,
     named by that directory. It is laid over the theme this package ships, one file at a time, so
     it need only carry what it changes. Activating one writes the directory name into
     <code>content/_data/site.json</code>; the next request is already wearing it.

package/admin/pages/comments/all.njk

@@ -1,133 +1,115 @@
-{# /admin/comments: the moderation queue. There is no email in this milestone,
-   so this screen is the notification — which is why the dashboard carries the
-   pending count and why this list opens on Pending.
+{# /admin/comments: the moderation queue, opening on Pending.
 
-   Every button is a form of its own, so the whole screen works with
-   JavaScript switched off. #}
+   One card per comment: who wrote it, where and when, what it says, and a row
+   of buttons, each a form of its own so the screen works with JavaScript
+   switched off. Reply is a collapse holding its own form, folded until it is
+   opened. #}
 {% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
+{% from "components/badge.njk" import badge, status as statusBadge %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
+{% from "components/collapse.njk" import collapse %}
+{% from "components/pagination.njk" import pagination %}
+{% from "components/tabs.njk" import tabs as tabsNav %}
 
 {% block title %}{{ heading }}{% endblock %}
 
+{% macro rowFields(row, fields, status, csrfToken) %}
+  <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+  <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
+  <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
+{% endmacro %}
+
 {% block content %}
-  <h1>{{ heading }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
 
-  <nav class="admin-filters" aria-label="Comment status">
-    <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-6">{{ tabsNav(tabs, 'Comment status') }}</div>
 
   {% if rows.length == 0 %}
-    <p class="admin-empty">Nothing here.</p>
+    <p class="mb-6">Nothing here.</p>
   {% else %}
-    <ul class="admin-comments">
+    <ul class="mb-6 flex max-w-3xl flex-col gap-4">
       {% for row in rows %}
-        <li class="admin-comment">
-          <div class="admin-comment-meta">
-            <span class="admin-comment-author">{{ row.author }}</span>
-            {% if row.url %}
-              <a class="admin-comment-site" href="{{ row.url }}" rel="nofollow ugc noopener noreferrer">{{ row.url }}</a>
-            {% endif %}
-            {% if row.email %}
-              <span class="admin-comment-email">{{ row.email }}</span>
-            {% endif %}
-            <span class="admin-status admin-status-{{ row.status }}">{{ row.status }}</span>
-            {% if row.source != 'comment' %}
-              <span class="admin-status">{{ row.source }}</span>
-            {% endif %}
-          </div>
+        <li>
+          {% call card() %}
+            <p class="flex flex-wrap items-center gap-x-3 gap-y-1">
+              <span class="font-semibold">{{ row.author }}</span>
+              {% if row.url %}
+                <a class="link break-all" href="{{ row.url }}" rel="nofollow ugc noopener noreferrer">{{ row.url }}</a>
+              {% endif %}
+              {% if row.email %}
+                <span class="break-all">{{ row.email }}</span>
+              {% endif %}
+              {{ statusBadge(row.status, row.status | capitalize) }}
+              {% if row.source != 'comment' %}
+                {{ badge(row.source | capitalize, style='outline') }}
+              {% endif %}
+            </p>
 
-          <p class="admin-comment-where">
-            <time>{{ row.submitted }}</time>
-            on
-            {% if row.editUrl %}
-              <a href="{{ row.editUrl }}">{{ row.post }}</a>
-            {% else %}
-              {{ row.post }}
-            {% endif %}
-            {% if row.postUrl %}
-              &middot; <a href="{{ row.postUrl }}#comment-{{ row.id }}">View</a>
-            {% endif %}
-            {% if row.inReplyTo %}
-              &middot; a reply to another comment
-            {% endif %}
-            {% if row.address %}
-              &middot; <code title="A salted hash of the address it came from">{{ row.address }}</code>
-            {% endif %}
-            {% if row.removed %}
-              &middot; {{ row.removed }}
-            {% endif %}
-          </p>
+            <p class="text-sm">
+              <time>{{ row.submitted }}</time>
+              on
+              {% if row.editUrl %}
+                <a class="link" href="{{ row.editUrl }}">{{ row.post }}</a>
+              {% else %}
+                {{ row.post }}
+              {% endif %}
+              {% if row.postUrl %}
+                &middot; <a class="link" href="{{ row.postUrl }}#comment-{{ row.id }}">View</a>
+              {% endif %}
+              {% if row.inReplyTo %}
+                &middot; a reply to another comment
+              {% endif %}
+              {% if row.address %}
+                &middot; <code title="A salted hash of the address it came from">{{ row.address }}</code>
+              {% endif %}
+              {% if row.removed %}
+                &middot; {{ row.removed }}
+              {% endif %}
+            </p>
 
-          <div class="admin-comment-body">{{ row.html | safe }}</div>
+            <div class="space-y-2 break-words">{{ row.html | safe }}</div>
 
-          <div class="admin-actions">
-            {% if row.status != 'approved' %}
+            <div class="flex flex-wrap gap-1">
+              {% if row.status != 'approved' %}
+                <form method="post" action="{{ moderateUrl }}">
+                  {{ rowFields(row, fields, status, csrfToken) }}
+                  {{ button('Approve', type='submit', style='ghost', size='xs', name=fields.action, value='approve') }}
+                </form>
+              {% endif %}
+              {% if row.status != 'spam' %}
+                <form method="post" action="{{ moderateUrl }}">
+                  {{ rowFields(row, fields, status, csrfToken) }}
+                  {{ button('Spam', type='submit', style='ghost', size='xs', name=fields.action, value='spam') }}
+                </form>
+              {% endif %}
               <form method="post" action="{{ moderateUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
-                <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
-                <button type="submit" name="{{ fields.action }}" value="approve">Approve</button>
+                {{ rowFields(row, fields, status, csrfToken) }}
+                {{ button('Delete', type='submit', color='error', style='ghost', size='xs', name=fields.action, value='delete') }}
               </form>
-            {% endif %}
+            </div>
 
-            {% if row.status != 'spam' %}
-              <form method="post" action="{{ moderateUrl }}">
-                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-                <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
-                <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
-                <button type="submit" name="{{ fields.action }}" value="spam">Spam</button>
+            {% call collapse('Reply') %}
+              <form method="post" action="{{ replyUrl }}">
+                {{ rowFields(row, fields, status, csrfToken) }}
+                {% set replyLabel %}Reply to {{ row.author }}{% endset %}
+                {{ field.textarea('reply-' + loop.index, fields.body, replyLabel, rows='4', required=true,
+                     hint='Markdown, rendered the same way a visitor’s comment is. It is posted approved, under this one.') }}
+                <div class="mt-2">{{ button('Post reply', type='submit', color='primary') }}</div>
               </form>
-            {% endif %}
-
-            <form method="post" action="{{ moderateUrl }}">
-              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-              <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
-              <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
-              <button type="submit" name="{{ fields.action }}" value="delete">Delete</button>
-            </form>
-          </div>
-
-          <details class="admin-comment-reply">
-            <summary>Reply</summary>
-            <form method="post" action="{{ replyUrl }}">
-              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-              <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
-              <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
-              <label class="admin-visually-hidden" for="reply-{{ loop.index }}">
-                Reply to {{ row.author }}
-              </label>
-              <textarea id="reply-{{ loop.index }}" name="{{ fields.body }}" rows="4" required></textarea>
-              <p class="admin-hint">Markdown, rendered the same way a visitor’s comment is. It is posted approved, under this one.</p>
-              <p class="admin-settings-buttons">
-                <button type="submit">Post reply</button>
-              </p>
-            </form>
-          </details>
+            {% endcall %}
+          {% endcall %}
         </li>
       {% endfor %}
     </ul>
 
-    {% if previousUrl or nextUrl %}
-      <nav class="admin-pagination" aria-label="Pages">
-        {% if previousUrl %}
-          <a rel="prev" href="{{ previousUrl }}">Newer</a>
-        {% endif %}
-        <span>Page {{ page }} of {{ pages }}</span>
-        {% if nextUrl %}
-          <a rel="next" href="{{ nextUrl }}">Older</a>
-        {% endif %}
-      </nav>
-    {% endif %}
+    <div class="mb-6">
+      {{ pagination(page, pages=pages, previousUrl=previousUrl, nextUrl=nextUrl) }}
+    </div>
   {% endif %}
 
-  <p class="admin-hint">
+  <p class="max-w-prose text-sm">
     Comments live as one JSON file per post under <code>content/_data/comments/</code>, so they
     are in git beside the posts and an Eleventy build of the same directory shows them. Everything
     here rewrites that file; the database is only an index of it. Spam is kept rather than deleted,

package/admin/pages/dashboard/home.njk

@@ -1,72 +1,60 @@
 {% 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 %}
 
 {% block title %}Dashboard{% endblock %}
 
 {% block content %}
-  <h1>Dashboard</h1>
+  <h1 class="mb-6 text-2xl font-bold">Dashboard</h1>
 
-  <div class="admin-panels">
-    <section class="admin-panel">
-      <h2>At a glance</h2>
-      <dl class="admin-counts">
-        <div>
-          <dt>Published posts</dt>
-          <dd>{{ counts.posts }}</dd>
-        </div>
-        <div>
-          <dt>Drafts</dt>
-          <dd>{{ counts.drafts }}</dd>
-        </div>
-        <div>
-          <dt>Pages</dt>
-          <dd>{{ counts.pages }}</dd>
-        </div>
-        <div>
-          <dt>Followers</dt>
-          <dd><a href="{{ federationUrl }}">{{ followers }}</a></dd>
-        </div>
-        <div>
-          <dt>Comments waiting</dt>
-          <dd><a href="{{ commentsUrl }}?status=pending">{{ pendingComments }}</a></dd>
-        </div>
-        <div>
-          <dt>Messages unread</dt>
-          <dd><a href="{{ messagesUrl }}">{{ unreadMessages }}</a></dd>
-        </div>
-      </dl>
-    </section>
+  {% set glance = [
+    { label: 'Published posts', value: counts.posts },
+    { label: 'Drafts', value: counts.drafts },
+    { label: 'Pages', value: counts.pages },
+    { label: 'Followers', value: followers, href: federationUrl },
+    { label: 'Comments waiting', value: pendingComments, href: commentsUrl + '?status=pending' },
+    { label: 'Messages unread', value: unreadMessages, href: messagesUrl }
+  ] %}
 
-    <section class="admin-panel">
-      <h2>Recent posts</h2>
-      {% if recent.length %}
-        <table class="admin-list">
-          <caption class="admin-visually-hidden">Recent posts</caption>
-          <thead>
+  <section class="@container mb-8">
+    <h2 class="mb-3 text-lg font-semibold">At a glance</h2>
+    <div class="grid grid-cols-2 gap-4 @2xl:grid-cols-3 @5xl:grid-cols-6">
+      {% for count in glance %}
+        {% call stats() %}{{ stat(count.label, count.value, href=count.href) }}{% endcall %}
+      {% endfor %}
+    </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>
-              <th scope="col">Title</th>
-              <th scope="col">Date</th>
-              <th scope="col">Status</th>
+              <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>
-          </thead>
-          <tbody>
-            {% for post in recent %}
-              <tr>
-                <td><a href="{{ post.editUrl }}">{{ post.title }}</a></td>
-                <td>{{ post.date | date('html') }}</td>
-                <td>
-                  {% if post.draft %}
-                    <span class="admin-status admin-status-draft">Draft</span>
-                  {% else %}
-                    <span class="admin-status">Published</span>
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      {% else %}
-        <p class="admin-empty">Nothing written yet.</p>
-      {% endif %}
-    </section>
-  </div>
+          {% endfor %}
+        </tbody>
+      {% endcall %}
+    {% else %}
+      <p>Nothing written yet.</p>
+    {% endif %}
+  {% endcall %}
 {% endblock %}