@geekity/cms 0.34.0 → 0.36.1

package/admin/components/job-status.njk

@@ -8,38 +8,43 @@
      failed       the error, in an alert
      interrupted  that restarts or crashes cut it off and it will not run again
 
-   While it is queued or running, `refreshUrl` is offered as a link to look
-   again: the page does not reload itself. `verb` and `unit` word the
-   progress. The error and every word passed in are escaped. #}
+   While it is queued or running, the box names `refreshUrl` in
+   `data-job-refresh`. A page that loads static/job-status.js has it fetch
+   that page every few seconds and swap in its box with the same
+   `data-job-status` until the job ends. It swaps the closest
+   `data-job-region` around the box instead when there is one, so a page can
+   redraw the controls it hides while the job runs. Without JavaScript,
+   `refreshUrl` is a Check again link. `verb` and `unit` word the progress.
+   The error and every word passed in are escaped. #}
 {% from "components/alert.njk" import alert %}
 {% from "components/badge.njk" import status %}
 {% from "components/button.njk" import buttonLink %}
 
 {% macro jobStatus(job, refreshUrl, verb='Done', unit='items') -%}
-<div class="flex flex-col gap-3">
+<div class="flex flex-col gap-3" data-job-status="{{ job.name }}" data-job-state="{{ job.state }}" data-job-label="{{ job.label }}"{% if job.active %} data-job-refresh="{{ refreshUrl }}"{% endif %}>
   <p class="flex flex-wrap items-center gap-2">
     {{ status(job.state, job.label) }}
     <span class="text-sm"><time datetime="{{ job.at }}">{{ job.at | date('readable') }}</time></span>
   </p>
   {% if job.state == 'queued' %}
-    <p>Waiting for the worker to start it.{% if job.requeued %} A restart cut off the last try, so it is queued again as try {{ job.attempt }}.{% endif %}</p>
+    <p data-job-message>Waiting for the worker to start it.{% if job.requeued %} A restart cut off the last try, so it is queued again as try {{ job.attempt }}.{% endif %}</p>
   {% elif job.state == 'running' %}
     {% if job.progress and job.progress.total %}
       <progress class="progress progress-primary w-full max-w-md" value="{{ job.progress.done }}" max="{{ job.progress.total }}" aria-label="{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}"></progress>
-      <p>{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}.{% if job.progress.note %} {{ job.progress.note }}{% endif %}</p>
+      <p data-job-message>{{ verb }} {{ job.progress.done }} of {{ job.progress.total }} {{ unit }}.{% if job.progress.note %} {{ job.progress.note }}{% endif %}</p>
     {% else %}
       <progress class="progress progress-primary w-full max-w-md" aria-label="Starting"></progress>
-      <p>Starting.</p>
+      <p data-job-message>Starting.</p>
     {% endif %}
   {% elif job.state == 'finished' %}
     {% if caller %}{{ caller() }}{% endif %}
   {% elif job.state == 'failed' %}
-    {% call alert(color='error', style='soft') %}<span>{{ job.error }}</span>{% endcall %}
+    {% call alert(color='error', style='soft') %}<span data-job-message>{{ job.error }}</span>{% endcall %}
   {% elif job.state == 'interrupted' %}
-    <p>Restarts or crashes cut it off {{ job.attempt }} times, so it is not run again on its own.</p>
+    <p data-job-message>Restarts or crashes cut it off {{ job.attempt }} times, so it is not run again on its own.</p>
   {% endif %}
   {% if job.active %}
-    <div>{{ buttonLink('Check again', refreshUrl, style='outline') }}</div>
+    <div data-job-check-again>{{ buttonLink('Check again', refreshUrl, style='outline') }}</div>
   {% endif %}
 </div>
 {%- endmacro %}

package/admin/components/upload.njk

@@ -0,0 +1,26 @@
+{# An upload in place: a file picker beside a box, grid or menu that wants a
+   file, so nobody has to leave a post for the media library and come back
+   with an address (TASK-439).
+
+   `uploadControl(kind, target, url)` emits a `hidden` block that
+   `static/upload-drop.js` reveals, so a page with no script shows nothing that
+   does nothing. The script posts each file to `url` and hands the answer to
+   the `kind`'s handler, which fills the element whose id is `target`:
+
+     photos   adds a ticked tile to the photo grid; `name` is the prefix of
+              the grid's checkbox names
+     field    sets the text box's value; `preview` names an <img> to show it
+     select   adds the file to the menu and chooses it
+     library  reloads the page once the files have landed
+
+   Dropping files on the target, or on the field around it, does the same.
+   `images` asks the server to refuse anything that is not an image. #}
+
+{% macro uploadControl(kind, target, url, images=false, accept='', name='', preview='') -%}
+<div class="mt-1 flex flex-wrap items-center gap-2" data-upload-drop="{{ kind }}" data-upload-url="{{ url }}" data-upload-target="{{ target }}"{% if images %} data-upload-images{% endif %}{% if name %} data-upload-name="{{ name }}"{% endif %}{% if preview %} data-upload-preview="{{ preview }}"{% endif %} hidden>
+  <label class="text-xs" for="{{ target }}-upload">Upload</label>
+  <input id="{{ target }}-upload" type="file" class="file-input file-input-xs w-auto max-w-full"{% if images %} accept="image/*"{% elif accept %} accept="{{ accept }}"{% endif %}{% if kind == 'photos' or kind == 'library' %} multiple{% endif %} data-upload-input />
+  <span class="text-xs text-base-content/70">or drop {% if kind == 'photos' or kind == 'library' %}files{% else %}a file{% endif %} here</span>
+  <p class="w-full text-xs empty:hidden" role="status" aria-live="polite" data-upload-status></p>
+</div>
+{%- endmacro %}

package/admin/pages/documents/chooser.njk

@@ -0,0 +1,30 @@
+{% extends "layouts/shell.njk" %}
+
+{% block title %}New post{% endblock %}
+
+{% block content %}
+  <h1 class="mb-6 text-2xl font-bold">What are you posting?</h1>
+
+  <ul class="grid max-w-5xl gap-3 sm:grid-cols-2 lg:grid-cols-3">
+    {% for kind in kinds %}
+      <li>
+        <a class="card card-sm h-full bg-base-100 shadow-sm transition hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-base-content{% if kind.page %} card-dash{% endif %}" href="{{ kind.url }}">
+          <div class="card-body flex-row items-start gap-3">
+            <span class="rounded-field bg-primary/10 p-2 text-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="size-6" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="{{ kind.icon }}"/></svg>
+            </span>
+            <div>
+              <h2 class="card-title text-base">{{ kind.label }}</h2>
+              <p class="text-sm opacity-70">{{ kind.blurb }}</p>
+            </div>
+          </div>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+
+  <p class="mt-6 max-w-prose text-sm opacity-70">
+    Micropub apps keep posting whatever properties they like. A post with properties from more than
+    one kind opens on the kind it reads as, with the rest under Also on this post.
+  </p>
+{% endblock %}