@geekity/cms 0.23.0 → 0.25.0

package/admin/pages/plugins/screen.njk

@@ -0,0 +1,129 @@
+{# /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.
+
+   A plugin with settings gets a form here too (TASK-283). A label or hint
+   from a plugin is escaped before the field macros, which print theirs as
+   markup. A secret is never printed: the form says whether it is set and
+   where, and names the environment variable that would set it. #}
+{% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
+{% 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 %}
+
+{% macro text(parts) -%}
+  {%- for part in parts -%}
+    {%- if part.code is defined -%}<code>{{ part.code }}</code>{%- else -%}{{ part }}{%- endif -%}
+  {%- endfor -%}
+{%- endmacro %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+  <h1 class="mb-6 text-2xl font-bold">{{ title }}</h1>
+
+  {% if problems.length %}
+    {% call field.summary('Nothing was saved. Fix the fields marked below.') %}
+      {% for setting in problems %}{{ field.problem(setting.id, setting.error) }}{% endfor %}
+    {% endcall %}
+  {% endif %}
+
+  <div class="grid max-w-5xl grid-cols-1 gap-6">
+    {% if settings.length or actions.length %}
+      {% call card(title='Settings' if settings.length else 'Actions') %}
+        {% if settings.length %}
+          <form method="post" action="{{ postUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="{{ actionField }}" value="{{ saveAction }}" />
+            {% for setting in settings %}
+              {% set label = setting.label | escape %}
+              {% set error = setting.error or setting.stored %}
+              {% if setting.type == 'secret' %}
+                {% set hint %}{% if setting.hint %}{{ setting.hint }} {% endif %}{% if setting.source == 'environment' %}Set by the environment variable <code>{{ setting.variable }}</code>. Change it there.{% elif setting.source == 'file' %}Set in <code>{{ secretsFile }}</code>. Leave the box blank to keep it. The environment variable <code>{{ setting.variable }}</code> would win over it.{% else %}Not set. Or set the environment variable <code>{{ setting.variable }}</code>.{% endif %}{% endset %}
+                {% if setting.source == 'environment' %}
+                  <div class="fieldset">
+                    <p class="fieldset-legend">{{ label }} {{ status('connected', 'Set') }}</p>
+                    <p class="label block whitespace-normal">{{ hint | safe }}</p>
+                  </div>
+                {% else %}
+                  {{ field.password(setting.id, setting.name,
+                       label ~ ' ' ~ (status('connected', 'Set') if setting.source == 'file' else status('missing', 'Not set')),
+                       hint=hint, error=setting.error, autocomplete='off', spellcheck='false',
+                       placeholder=('Leave blank to keep it' if setting.source == 'file' else '')) }}
+                  {% if setting.source == 'file' %}
+                    {{ field.checkbox(setting.id ~ '-forget', setting.forgetName, 'Forget the stored ' ~ label) }}
+                  {% endif %}
+                {% endif %}
+              {% else %}
+                {% set hint %}{{ setting.hint }}{% endset %}
+                {% if setting.type == 'checkbox' %}
+                  {{ field.checkbox(setting.id, setting.name, label, checked=setting.checked,
+                       hint=hint, error=error) }}
+                {% elif setting.type == 'select' %}
+                  {% call field.select(setting.id, setting.name, label, hint=hint, error=error) %}
+                    {% for option in setting.options %}
+                      <option value="{{ option.value }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
+                    {% endfor %}
+                  {% endcall %}
+                {% else %}
+                  {{ field.text(setting.id, setting.name, label, setting.value, hint=hint, error=error,
+                       inputmode=('url' if setting.type == 'url' else ''), spellcheck='false') }}
+                {% endif %}
+              {% endif %}
+            {% endfor %}
+            <div class="mt-2">{{ button('Save settings', type='submit', color='primary') }}</div>
+          </form>
+        {% endif %}
+
+        {% for action in actions %}
+          <form method="post" action="{{ postUrl }}">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="{{ actionField }}" value="{{ action.id }}" />
+            {{ button(action.label, type='submit') }}
+          </form>
+        {% endfor %}
+
+        {% if settings.length %}
+          <p class="text-sm">
+            Settings other than secrets are kept under this plugin's key in
+            <code>content/_data/site.json</code>. Secrets are kept in
+            <code>{{ secretsFile }}</code> at mode <code>0600</code> and are never shown here.
+          </p>
+        {% endif %}
+      {% endcall %}
+    {% endif %}
+
+    {% 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 %}
+      {% endcall %}
+    {% endfor %}
+  </div>
+{% endblock %}

package/admin/static/admin.css

@@ -44,6 +44,7 @@
     --container-md: 28rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
+    --container-5xl: 64rem;
     --text-xs: .75rem;
     --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
@@ -1572,11 +1573,122 @@
 @layer components;
 
 @layer utilities {
-  .\@container {
-    container-type: inline-size;
-  }
-
   @layer daisyui.l1.l2.l3 {
+    .range {
+      appearance: none;
+      webkit-appearance: none;
+      --range-thumb: var(--color-base-100);
+      --range-thumb-size: calc(var(--size-selector, .25rem) * 6);
+      --range-progress: currentColor;
+      --range-fill: 1;
+      --range-p: .25rem;
+      --range-bg: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .range {
+        --range-bg: color-mix(in oklab, currentColor 10%, #0000);
+      }
+    }
+
+    .range {
+      --range-fill-x: calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2));
+      --range-fill-y: 0;
+      --range-fill-spread: calc(100cqw * var(--range-fill));
+      cursor: pointer;
+      vertical-align: middle;
+      --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--range-thumb-size);
+      background-color: #0000;
+      border: none;
+      overflow: hidden;
+      container-type: inline-size;
+    }
+
+    [dir="rtl"] .range {
+      --range-dir: -1;
+    }
+
+    .range:focus {
+      outline: none;
+    }
+
+    .range:focus-visible {
+      outline-offset: 2px;
+      outline: 2px solid;
+    }
+
+    .range::-webkit-slider-runnable-track {
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      width: 100%;
+      height: calc(var(--range-thumb-size) * .5);
+    }
+
+    @media (forced-colors: active) {
+      .range::-webkit-slider-runnable-track {
+        border: 1px solid;
+      }
+
+      .range::-moz-range-track {
+        border: 1px solid;
+      }
+    }
+
+    .range::-moz-range-track {
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      width: 100%;
+      height: calc(var(--range-thumb-size) * .5);
+    }
+
+    .range::-webkit-slider-thumb {
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: var(--range-thumb);
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      appearance: none;
+      webkit-appearance: none;
+      color: var(--range-progress);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread);
+      position: relative;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .range::-webkit-slider-thumb {
+        box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread);
+      }
+    }
+
+    .range::-moz-range-thumb {
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      color: var(--range-progress);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread);
+      background-color: currentColor;
+      position: relative;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .range::-moz-range-thumb {
+        box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread);
+      }
+    }
+
+    .range:disabled {
+      cursor: not-allowed;
+      opacity: .3;
+    }
+
     :where(.drawer-side) {
       overflow: hidden;
     }
@@ -4257,6 +4369,10 @@
     }
   }
 
+  .\@container {
+    container-type: inline-size;
+  }
+
   @layer daisyui.l1.l2 {
     .drawer-open > .drawer-side {
       overflow-y: auto;
@@ -6432,6 +6548,10 @@
     margin-top: calc(var(--spacing) * -1);
   }
 
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
   .mt-1 {
     margin-top: var(--spacing);
   }
@@ -6583,6 +6703,10 @@
     max-width: var(--container-3xl);
   }
 
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+
   .max-w-full {
     max-width: 100%;
   }
@@ -6884,6 +7008,10 @@
     white-space: pre-line;
   }
 
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
   .text-base-content, .text-base-content\/70 {
     color: var(--color-base-content);
   }
@@ -7261,6 +7389,10 @@
   }
 
   @media (min-width: 80rem) {
+    .xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .xl\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
       grid-template-columns: minmax(0, 1fr) 20rem;
     }

package/admin/static/editor-actions.js

@@ -0,0 +1,192 @@
+/* The buttons running plugins put beside the editor's title, description and
+   tags (decision-33). Each posts the form as it stands to its plugin's
+   endpoint, which answers { ok, value }, { ok, choices } or { ok: false,
+   message }, and shows the suggestion with Accept and Dismiss. Choices come
+   only beside the tags field, each drawn from the page's template row with a
+   box to tick, and Accept adds the ticked ones. Accept fills the field and saves
+   nothing; a save is still only the form's own buttons.
+
+   A file rather than an inline script, loaded from the admin's own origin
+   like slug.js, so the admin's policy stays `script-src 'self'` and
+   `connect-src 'self'`. Plain ES5-shaped browser JavaScript, served as it is
+   written. */
+(function () {
+  function plainForm(form) {
+    var fields = new URLSearchParams();
+    new FormData(form).forEach(function (value, name) {
+      if (typeof value === 'string') fields.append(name, value);
+    });
+    return fields;
+  }
+
+  function tagsOf(value) {
+    return value
+      .split(',')
+      .map(function (tag) {
+        return tag.trim();
+      })
+      .filter(function (tag) {
+        return tag !== '';
+      });
+  }
+
+  /* A tags suggestion adds what the field does not already hold; a title or
+     description suggestion replaces the field. */
+  function accepted(field, value) {
+    if (field.id !== 'editor-tags') return value;
+    var held = tagsOf(field.value);
+    var known = held.map(function (tag) {
+      return tag.toLowerCase();
+    });
+    tagsOf(value).forEach(function (tag) {
+      if (known.indexOf(tag.toLowerCase()) === -1) {
+        held.push(tag);
+        known.push(tag.toLowerCase());
+      }
+    });
+    return held.join(', ');
+  }
+
+  function enhance(block, field) {
+    var url = block.getAttribute('data-editor-action');
+    var press = block.querySelector('button');
+    var status = block.querySelector('[role="status"]');
+    var suggestion = block.querySelector('[role="group"]');
+    var text = suggestion && suggestion.querySelector('p');
+    var list = suggestion && suggestion.querySelector('[data-editor-choices]');
+    var row = block.querySelector('template[data-editor-choice]');
+    if (!url || !press || !status || !text || !list || !row) return;
+    var buttons = suggestion.querySelectorAll('button');
+    var accept = buttons[0];
+    var dismiss = buttons[1];
+    var pending = null;
+    var offered = '';
+
+    function say(message, failed) {
+      status.textContent = message;
+      status.classList.toggle('text-error', failed === true);
+    }
+
+    function close() {
+      suggestion.hidden = true;
+      offered = '';
+      list.replaceChildren();
+    }
+
+    function drawChoices(choices) {
+      choices.forEach(function (choice) {
+        var item = row.content.firstElementChild.cloneNode(true);
+        var badge = item.querySelector('.badge');
+        item.querySelector('input').value = String(choice.value);
+        item.querySelector('[data-choice-value]').textContent = String(choice.value);
+        badge.textContent = choice.badge ? String(choice.badge) : '';
+        badge.hidden = !choice.badge;
+        item.querySelector('[data-choice-note]').textContent = choice.note
+          ? String(choice.note)
+          : '';
+        list.appendChild(item);
+      });
+    }
+
+    function ticked() {
+      var values = [];
+      list.querySelectorAll('input:checked').forEach(function (box) {
+        values.push(box.value);
+      });
+      return values.join(', ');
+    }
+
+    press.hidden = false;
+    press.addEventListener('click', function () {
+      if (pending) pending.abort();
+      var controller = new AbortController();
+      pending = controller;
+      close();
+      press.disabled = true;
+      say('Asking for a suggestion…');
+
+      fetch(url, {
+        method: 'POST',
+        body: plainForm(field.form),
+        credentials: 'same-origin',
+        headers: { accept: 'application/json' },
+        signal: controller.signal,
+      })
+        .then(function (response) {
+          var type = response.headers.get('content-type') || '';
+          if (type.indexOf('application/json') === -1) {
+            throw new Error(
+              response.status === 403
+                ? 'The site refused the request because this page is out of date. Copy your changes somewhere safe, then reload the page.'
+                : response.redirected
+                  ? 'You are signed out. Sign in again in another tab, then try again.'
+                  : 'The site answered ' + response.status + ' instead of a suggestion.',
+            );
+          }
+          return response.json();
+        })
+        .then(function (answer) {
+          if (answer.ok && Array.isArray(answer.choices)) {
+            if (answer.choices.length === 0) {
+              say('There was nothing to suggest.');
+              return;
+            }
+            text.hidden = true;
+            drawChoices(answer.choices);
+            list.hidden = false;
+            suggestion.hidden = false;
+            say('');
+            list.querySelector('input').focus();
+            return;
+          }
+          if (answer.ok) {
+            offered = String(answer.value);
+            text.textContent = offered;
+            text.hidden = false;
+            list.hidden = true;
+            suggestion.hidden = false;
+            say('');
+            accept.focus();
+            return;
+          }
+          say(String(answer.message), true);
+          if (answer.withdrawn) press.hidden = true;
+        })
+        .catch(function (error) {
+          if (controller.signal.aborted) return;
+          say(
+            error instanceof TypeError
+              ? 'The site could not be reached. Check the connection and try again.'
+              : error.message,
+            true,
+          );
+        })
+        .then(function () {
+          if (pending === controller) pending = null;
+          press.disabled = false;
+        });
+    });
+
+    accept.addEventListener('click', function () {
+      field.value = accepted(field, list.hidden ? offered : ticked());
+      field.dispatchEvent(new Event('input', { bubbles: true }));
+      close();
+      say('');
+      field.focus();
+    });
+
+    dismiss.addEventListener('click', function () {
+      close();
+      say('');
+      press.focus();
+    });
+  }
+
+  var groups = document.querySelectorAll('[data-editor-actions]');
+  for (var i = 0; i < groups.length; i++) {
+    var field = document.getElementById(groups[i].getAttribute('data-editor-actions'));
+    if (!field || !field.form) continue;
+    var blocks = groups[i].querySelectorAll('[data-editor-action]');
+    for (var j = 0; j < blocks.length; j++) enhance(blocks[j], field);
+  }
+})();