@geekity/cms 0.3.0 → 0.5.0

package/admin/pages/media/library.njk

@@ -0,0 +1,160 @@
+{# /admin/media: everything under content/uploads, what links to it, and the
+   two things that can be done to it. The directory is walked on every request,
+   so a file copied in by hand is here without a restart.
+
+   Everything works with JavaScript switched off. The URL and the Markdown are
+   readonly fields, which select and copy like any other text; copy.js adds a
+   button beside each of them and nothing else. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{% block content %}
+  <h1>{{ heading }}</h1>
+
+  {% if confirm %}
+    <form class="admin-settings" method="post" action="{{ deleteUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      <input type="hidden" name="{{ fields.path }}" value="{{ confirm.path }}" />
+      <input type="hidden" name="{{ fields.confirm }}" value="1" />
+
+      <h2>Delete {{ confirm.url }}?</h2>
+
+      <p>
+        {{ confirm.references.length }}
+        {% if confirm.references.length == 1 %}document still points{% else %}documents still point{% endif %}
+        at it. Deleting the file does not change them, so they will point at nothing.
+      </p>
+
+      <ul class="admin-references">
+        {% for reference in confirm.references %}
+          <li>
+            <a href="{{ reference.editUrl }}">{{ reference.title }}</a>
+            {% if reference.trashed %}<span class="admin-status admin-status-trashed">Trash</span>{% endif %}
+            <code>{{ reference.path }}</code>
+          </li>
+        {% endfor %}
+      </ul>
+
+      <p class="admin-settings-buttons">
+        <button type="submit">Delete it anyway</button>
+        <a href="{{ listUrl }}">Cancel</a>
+      </p>
+    </form>
+  {% endif %}
+
+  <form class="admin-settings admin-media-upload" method="post" action="{{ uploadUrl }}" enctype="multipart/form-data">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    <label for="media-file">Add a file</label>
+    <input id="media-file" name="{{ fields.file }}" type="file" accept="{{ accepts }}" required />
+    <p class="admin-hint">
+      This site accepts {{ accepts | replace(',', ', ') }}, up to {{ maxBytes }} bytes. The same
+      rules the editor’s upload control enforces.
+    </p>
+    <p class="admin-settings-buttons">
+      <button type="submit">Upload</button>
+    </p>
+  </form>
+
+  {% if total == 0 %}
+    <p class="admin-empty">Nothing has been uploaded yet.</p>
+  {% else %}
+    <table class="admin-list admin-media">
+      <thead>
+        <tr>
+          <th scope="col">File</th>
+          <th scope="col">Uploaded</th>
+          <th scope="col">Size</th>
+          <th scope="col">Link</th>
+          <th scope="col">Used by</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for file in files %}
+          <tr>
+            <td class="admin-media-file">
+              {% if file.image %}
+                <a href="{{ file.url }}">
+                  <img class="admin-media-thumbnail" src="{{ file.url }}" alt="" width="60" height="60" />
+                </a>
+              {% else %}
+                <span class="admin-media-icon" aria-hidden="true">{{ file.extension | replace('.', '') | upper }}</span>
+              {% endif %}
+              <a href="{{ file.url }}">{{ file.path }}</a>
+            </td>
+            <td>{{ file.modified | date('html') }}</td>
+            <td>{{ file.bytes }}</td>
+            <td class="admin-media-links">
+              <label class="admin-visually-hidden" for="media-url-{{ loop.index }}">
+                URL of {{ file.name }}
+              </label>
+              <span class="admin-copy">
+                <input id="media-url-{{ loop.index }}" type="text" value="{{ file.url }}" readonly />
+                <button type="button" class="admin-copy-button" data-copy="media-url-{{ loop.index }}" hidden>
+                  Copy
+                </button>
+              </span>
+
+              <label class="admin-visually-hidden" for="media-markdown-{{ loop.index }}">
+                Markdown for {{ file.name }}
+              </label>
+              <span class="admin-copy">
+                <input id="media-markdown-{{ loop.index }}" type="text" value="{{ file.markdown }}" readonly />
+                <button type="button" class="admin-copy-button" data-copy="media-markdown-{{ loop.index }}" hidden>
+                  Copy
+                </button>
+              </span>
+            </td>
+            <td>
+              {% if file.references.length %}
+                <ul class="admin-references">
+                  {% for reference in file.references %}
+                    <li>
+                      <a href="{{ reference.editUrl }}">{{ reference.title }}</a>
+                      {% if reference.trashed %}
+                        <span class="admin-status admin-status-trashed">Trash</span>
+                      {% endif %}
+                    </li>
+                  {% endfor %}
+                </ul>
+              {% else %}
+                <span class="admin-status">Nothing</span>
+              {% endif %}
+            </td>
+            <td class="admin-actions">
+              <form method="post" action="{{ deleteUrl }}">
+                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+                <button type="submit">Delete</button>
+              </form>
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    {% 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 %}
+
+    <p class="admin-hint">
+      The list is the <code>content/uploads</code> directory itself, read afresh on every request,
+      so a file copied in by hand is here without a restart. Deleting one removes the file and
+      whatever was derived from it; it does not touch the documents that link to it, which is why
+      a file something still points at asks first.
+    </p>
+  {% endif %}
+
+  {# The one enhancement on this screen. The fields above are readonly inputs
+     and already copy by hand; this adds a button beside each of them. #}
+  <script defer src="{{ assetPrefix }}copy.js"></script>
+{% endblock %}

package/admin/pages/messages/all.njk

@@ -0,0 +1,110 @@
+{# /admin/messages: what the contact form left behind (TASK-56).
+
+   A message is a file under data/contact/ and nothing else, so the two buttons
+   here are a rewrite and an unlink. Every button is a form of its own, so the
+   whole screen works with JavaScript switched off. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{% block content %}
+  <h1>{{ heading }}</h1>
+
+  <nav class="admin-filters" aria-label="Message 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>
+
+  {% if rows.length == 0 %}
+    <p class="admin-empty">Nothing here.</p>
+  {% else %}
+    <ul class="admin-comments">
+      {% for row in rows %}
+        <li class="admin-comment{% if not row.read %} admin-comment-unread{% endif %}">
+          <div class="admin-comment-meta">
+            <span class="admin-comment-author">{{ row.author }}</span>
+            <a class="admin-comment-email" href="mailto:{{ row.email }}">{{ row.email }}</a>
+            {% if not row.read %}
+              <span class="admin-status admin-status-pending">unread</span>
+            {% endif %}
+            {% if row.status == 'spam' %}
+              <span class="admin-status admin-status-spam">spam</span>
+            {% endif %}
+          </div>
+
+          <p class="admin-comment-where">
+            <time>{{ row.received }}</time>
+            from
+            {% if row.pageUrl %}
+              <a href="{{ row.pageUrl }}">{{ row.page }}</a>
+            {% else %}
+              {{ row.page }}
+            {% endif %}
+            {% if row.address %}
+              &middot; <code title="A salted hash of the address it came from">{{ row.address }}</code>
+            {% endif %}
+          </p>
+
+          {% if row.subject %}
+            <p class="admin-message-subject"><strong>{{ row.subject }}</strong></p>
+          {% endif %}
+
+          {# Printed, never rendered: a contact message is plain text, and
+             nothing a stranger typed is turned into markup here. #}
+          <div class="admin-comment-body admin-message-body">{{ row.message }}</div>
+
+          <div class="admin-actions">
+            <a class="admin-button admin-button-quiet" href="{{ row.replyUrl }}">Reply</a>
+
+            <form method="post" action="{{ readUrl }}">
+              <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 }}" />
+              {% if row.read %}
+                <button type="submit" name="{{ fields.read }}" value="">Mark unread</button>
+              {% else %}
+                <button type="submit" name="{{ fields.read }}" value="1">Mark read</button>
+              {% endif %}
+            </form>
+
+            <form method="post" action="{{ deleteUrl }}">
+              <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">Delete</button>
+            </form>
+          </div>
+        </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 %}
+  {% endif %}
+
+  <p class="admin-hint">
+    A page carrying <code>contact: true</code> in its front matter offers a contact form, and every
+    message it takes is one JSON file under <code>data/contact/</code> &mdash; written before
+    anything is emailed, so a message survives a mail outage and a site with no mail configured
+    still collects them. They are under <code>data/</code> rather than <code>content/</code>
+    because they carry somebody&rsquo;s address and were never meant to be published. Where a
+    message is sent is the contact address on the Settings screen; deleting one here deletes its
+    file.
+  </p>
+{% endblock %}

package/admin/pages/navigation/menus.njk

@@ -0,0 +1,129 @@
+{# /admin/navigation: every menu this site holds, and what renders it.
+
+   Two lists, and a menu is in exactly one of them. First the areas the active
+   theme declares, in the theme's own order and under the theme's own labels,
+   each a box to type links into — an area the site has never filled in is an
+   empty box rather than a missing one. Then every other menu the site stores,
+   under a heading that says this theme renders them nowhere, each with a
+   Delete, which is the only way a menu is removed. #}
+{% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{# One menu: its heading, the box its items are typed into, and the button
+   that saves it. `extra` is whatever else belongs under the box — the Delete
+   form, on a menu nothing renders. #}
+{% macro box(menu, fields, url, csrfToken, extra='') %}
+  <li class="admin-menu-box">
+    <h3>{{ menu.label }}</h3>
+
+    <p class="admin-menu-name">
+      <code>menus.{{ menu.name }}</code>
+      {% if menu.stored %}
+        <span class="admin-status">{{ menu.count }} item{% if menu.count != 1 %}s{% endif %}</span>
+      {% else %}
+        <span class="admin-status">empty — nothing has been typed here yet</span>
+      {% endif %}
+    </p>
+
+    <form method="post" action="{{ url }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
+      {% set itemsHint %}
+        One item per line, written <code>Label | URL</code> &mdash; for example
+        <code>About | /about/</code> or
+        <code>Mastodon | https://example.social/@me</code>. They are the whole of
+        this menu, in this order: nothing else puts a link in it. A page serving
+        as the front page goes in as <code>Home | /</code>, where a reader lands.
+        End a line <code>| me</code> to mark the link
+        <strong>a profile that is you</strong>: it is given
+        <code>rel="me"</code>, which is how Mastodon and the rest of the
+        IndieWeb verify that the site and the profile it links are the same
+        person.
+      {% endset %}
+      {{ field.textarea('menu-' + menu.name, fields.items, 'Items', menu.items,
+           error=menu.problem, hint=itemsHint, rows='5', spellcheck='false') }}
+      <p class="admin-menu-buttons">
+        <button type="submit">Save menu</button>
+      </p>
+    </form>
+
+    {{ extra | safe }}
+  </li>
+{% endmacro %}
+
+{% block content %}
+  <h1>{{ heading }}</h1>
+
+  {% if hasProblems %}
+    <p class="admin-field-error">Nothing was saved. See below.</p>
+  {% endif %}
+
+  <h2>Where {{ themeName }} puts a menu</h2>
+
+  {% if areas.length %}
+    <p class="admin-hint">
+      These are the areas the active theme declares in its <code>theme.json</code>, in the order it
+      declares them. A theme renders a menu by asking for it by name, and an area with nothing in it
+      renders nothing at all.
+    </p>
+
+    <ul class="admin-menu-boxes">
+      {% for menu in areas %}
+        {{ box(menu, fields, navigationUrl, csrfToken) }}
+      {% endfor %}
+    </ul>
+  {% else %}
+    <p class="admin-hint">
+      {{ themeName }} declares no areas, so it asks for no menu by name. A theme declares them as an
+      <code>areas</code> list in its <code>theme.json</code>, each entry a <code>name</code> &mdash;
+      the name the template loops over as <code>menus.&lt;name&gt;</code> &mdash; and a
+      <code>label</code> to head the box here. A menu added below is still stored, ready for the
+      theme that asks for it.
+    </p>
+  {% endif %}
+
+  {% if others.length %}
+    <h2>Kept, rendered nowhere</h2>
+
+    <p class="admin-hint">
+      This site stores these menus and {{ themeName }} renders none of them: no template loops over
+      those names, so nothing on the public site shows them. They are kept, because that is how the
+      menu a theme will use gets written before the site switches to it. Delete is the only way one
+      is removed.
+    </p>
+
+    <ul class="admin-menu-boxes">
+      {% for menu in others %}
+        {% set remove %}
+          <form class="admin-menu-delete" method="post" action="{{ deleteUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="{{ fields.menu }}" value="{{ menu.name }}" />
+            <button type="submit">Delete this menu</button>
+          </form>
+        {% endset %}
+        {{ box(menu, fields, navigationUrl, csrfToken, remove) }}
+      {% endfor %}
+    </ul>
+  {% endif %}
+
+  <h2>Add a menu</h2>
+
+  <form class="admin-menu-add" method="post" action="{{ addUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    {% set nameHint %}
+      The name a theme asks for the menu by: lower-case letters, digits and
+      underscores, starting with a letter. It is written after the dot &mdash;
+      <code>{% raw %}{% for item in menus.footer %}{% endraw %}</code> &mdash; which is why a dash
+      is not allowed in one. A name this theme declares puts the menu in its place above; any other
+      name is a menu kept and rendered nowhere, which is how you fill one in before switching to the
+      theme that will use it.
+    {% endset %}
+    {{ field.text('menu-name', fields.name, 'Name', newName,
+         error=nameProblem, hint=nameHint, spellcheck='false', required=true) }}
+    <p class="admin-menu-buttons">
+      <button type="submit">Add menu</button>
+    </p>
+  </form>
+{% endblock %}

package/admin/{layouts → pages}/placeholder.njk

@@ -4,7 +4,11 @@
 
 {% block content %}
   {# A screen a later task builds. It exists so the navigation goes somewhere
-     and the guard covers it from the start. #}
+     and the guard covers it from the start.
+
+     It sits at the top of `pages/` rather than inside one of the section
+     folders because it is not any one section's screen: it stands in for
+     whichever section has nothing built yet, and the route heads it. #}
   <h1>{{ heading }}{% if slug %}: {{ slug }}{% endif %}</h1>
   <p class="admin-note">This screen is not built yet.</p>
 {% endblock %}

package/admin/pages/settings/discussion.njk

@@ -0,0 +1,99 @@
+{# /admin/settings/discussion: comments, webmentions, and what checks them. #}
+{% extends "layouts/settings-page.njk" %}
+{% import "components/fields.njk" as field %}
+
+{% block settingsFields %}
+  <h2>Comments</h2>
+
+  {% set commentsHint %}
+    Clear this and no post shows a comment form and every submission is
+    refused. Fediverse replies keep arriving and keep being shown either way:
+    a remote server sends those, and nothing here can stop it.
+  {% endset %}
+  {{ field.checkbox('settings-comments', fields.comments, 'Take comments on this site',
+       checked=form.comments, hint=commentsHint) }}
+
+  {% set closeHint %}
+    Days after a post's date that it stops taking comments; <code>0</code>
+    never closes one. A post overrides this for itself with
+    <code>comments: true</code> or <code>comments: false</code>, which the
+    editor offers as a field. Pages are closed unless they say otherwise.
+  {% endset %}
+  {{ field.text('settings-comments-close', fields.commentsCloseAfterDays, 'Close comments after',
+       form.commentsCloseAfterDays, type='number', min='0', step='1',
+       error=problems.commentsCloseAfterDays, hint=closeHint) }}
+
+  <h2>Webmentions</h2>
+
+  {% set sendHint %}
+    When a post is published or edited, every external page it links to is
+    asked whether it takes webmentions and told about the post if it does.
+    The Resend button on the federation screen sends them again.
+  {% endset %}
+  {{ field.checkbox('settings-webmentions-send', fields.webmentionsSend,
+       'Tell the pages a post links to', checked=form.webmentionsSend, hint=sendHint) }}
+
+  {% set receiveHint %}
+    Every post advertises an endpoint, and a page that links to one and says
+    so lands in the comment queue like a comment. Clear this and the endpoint
+    is gone from the pages and answers nothing; what has already arrived
+    stays where it is.
+  {% endset %}
+  {{ field.checkbox('settings-webmentions-receive', fields.webmentionsReceive,
+       'Accept webmentions sent here', checked=form.webmentionsReceive, hint=receiveHint) }}
+{% endblock %}
+
+{% block settingsPanels %}
+  {# Akismet is its own pair of forms for the reason the avatar is: the key is
+     a credential in data/akismet.json rather than a setting in site.json, and
+     a key Akismet will not take must not lose an edit to the fields above. #}
+  <section class="admin-settings admin-akismet-panel">
+    <h2>Spam checking</h2>
+
+    <p class="admin-akismet-state admin-akismet-{{ akismetState }}">
+      {% if akismetState == 'valid' %}
+        <strong>Connected</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+      {% elif akismetState == 'invalid' %}
+        <strong>Akismet does not recognise this key</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+      {% elif akismetState == 'unchecked' %}
+        <strong>Akismet could not be reached</strong> to check key {{ akismetKeyHint }}.
+      {% else %}
+        <strong>Not connected</strong> &mdash; this site has no key.
+      {% endif %}
+    </p>
+    <p class="admin-hint">{{ akismetHint }}</p>
+
+    <form method="post" action="{{ akismetUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      {% if akismetPresent %}
+        {% set akismetPlaceholder = 'Replace the stored key' %}
+      {% else %}
+        {% set akismetPlaceholder = 'Paste your key' %}
+      {% endif %}
+      {{ field.password('settings-akismet-key', akismetFields.key, 'Akismet API key',
+           autocomplete='off', spellcheck='false', placeholder=akismetPlaceholder) }}
+      <p class="admin-settings-buttons">
+        <button type="submit">{% if akismetPresent %}Replace key{% else %}Save key{% endif %}</button>
+      </p>
+    </form>
+
+    {% if akismetPresent %}
+      <form method="post" action="{{ akismetUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ akismetFields.action }}" value="{{ akismetRemove }}" />
+        <p class="admin-settings-buttons">
+          <button type="submit">Remove key</button>
+        </p>
+      </form>
+    {% endif %}
+
+    <p class="admin-hint">
+      A key from <a href="https://akismet.com/">akismet.com</a> turns on spam
+      checking for native comments and incoming webmentions. It is checked with
+      Akismet when it is saved and kept in <code>data/akismet.json</code>, never
+      in <code>site.json</code> and never on the public site. Marking something
+      spam or not spam on the Comments screen tells Akismet, which is the only
+      way it learns. Fediverse replies are never sent to it.
+    </p>
+  </section>
+{% endblock %}