@geekity/cms 0.39.0 → 0.41.0

package/admin/pages/appearance/look.njk

@@ -0,0 +1,135 @@
+{% extends "layouts/shell.njk" %}
+{% from "components/alert.njk" import alert %}
+{% from "components/badge.njk" import badge %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card, cardActions %}
+{% import "components/fields.njk" as field %}
+
+{% macro swatch(mode, colours) -%}
+<span class="flex flex-col gap-1" aria-hidden="true">
+  <svg data-mode="{{ mode }}" viewBox="0 0 96 56" class="h-auto w-full" focusable="false">
+    <rect x="0.5" y="0.5" width="95" height="55" rx="6" fill="{{ colours.page }}" stroke="currentColor" stroke-opacity="0.3" />
+    <text x="10" y="35" font-size="20" font-weight="700" fill="{{ colours.text }}">Aa</text>
+    <circle cx="58" cy="28" r="9" fill="{{ colours.accent }}" />
+    <circle cx="80" cy="28" r="9" fill="{{ colours.secondary }}" />
+  </svg>
+  <span class="text-xs">{{ 'Light' if mode == 'light' else 'Dark' }}</span>
+</span>
+{%- endmacro %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{% block content %}
+  <h1 class="mb-6 text-2xl font-bold">{{ heading }}</h1>
+
+  <div class="flex max-w-5xl flex-col gap-6">
+    {% call card(title='Colours') %}
+      {% if problems %}
+        {% call alert(color='error') %}
+          <p>Nothing was changed. {{ problems | join(' ') }}</p>
+        {% endcall %}
+      {% endif %}
+
+      <form method="post" action="{{ coloursUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+        {% if schemes.length %}
+          <fieldset class="fieldset">
+            <legend class="fieldset-legend">Colour scheme</legend>
+            <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+              {% for scheme in schemes %}
+                <li>
+                  <label data-scheme-card class="card card-border cursor-pointer bg-base-100 has-checked:border-2 has-checked:border-primary">
+                    <span class="card-body gap-3 p-4">
+                      <span class="flex flex-wrap items-center gap-2">
+                        <input type="radio" class="radio radio-sm" name="{{ fields.scheme }}" value="{{ scheme.name }}"{% if scheme.chosen %} checked{% endif %} />
+                        <span class="font-semibold">{{ scheme.label }}</span>
+                        {% if scheme.name == savedScheme %}{{ badge('In use', color='primary', style='soft') }}{% endif %}
+                      </span>
+                      {% if scheme.light and scheme.dark %}
+                        <span class="grid grid-cols-2 gap-2">
+                          {{ swatch('light', scheme.light) }}
+                          {{ swatch('dark', scheme.dark) }}
+                        </span>
+                      {% endif %}
+                    </span>
+                  </label>
+                </li>
+              {% endfor %}
+            </ul>
+            <p class="label whitespace-normal">Each swatch shows the page, the text, the accent and the secondary colour.</p>
+          </fieldset>
+        {% else %}
+          <p>This theme has one palette, so there is no colour scheme to choose.</p>
+        {% endif %}
+
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend">Mode</legend>
+          {% for mode in modes %}
+            <label class="label cursor-pointer justify-start gap-2">
+              <input type="radio" class="radio radio-sm" name="{{ fields.mode }}" value="{{ mode.value }}"{% if mode.chosen %} checked{% endif %} />
+              <span class="text-base-content">{{ mode.label }}</span>
+            </label>
+          {% endfor %}
+          <p class="label whitespace-normal">
+            {% if schemes.length %}
+              Follow the system draws light or dark as each reader's device is set.
+            {% else %}
+              The theme's stylesheet decides light and dark; the mode applies once the theme declares colour schemes.
+            {% endif %}
+          </p>
+        </fieldset>
+
+        {% call cardActions() %}
+          {{ button('Save colours', type='submit', color='primary') }}
+        {% endcall %}
+      </form>
+    {% endcall %}
+
+    {% call card(title='Fonts') %}
+      {% if fonts.length %}
+        {% for font in fonts %}{% if font.sample %}
+          <link rel="stylesheet" href="{{ font.sample.href }}" />
+        {% endif %}{% endfor %}
+        <style nonce="{{ cspNonce }}">
+          {% for font in fonts %}
+          [data-font-sample="{{ font.role }}"] { font-family: {% if font.sample %}"{{ font.sample.family }}", {% endif %}{{ font.fallback | safe }}; }
+          {% endfor %}
+        </style>
+
+        {% if fontProblems %}
+          {% call field.summary('The fonts were not saved. Fix the fields marked below.') %}
+            {% for font in fonts %}
+              {{ field.problem('font-' + font.role + ('-custom' if font.customChosen else ''), font.problem) }}
+            {% endfor %}
+          {% endcall %}
+        {% endif %}
+
+        <form method="post" action="{{ fontsUrl }}">
+          <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {% for font in fonts %}
+              <fieldset class="fieldset" data-font-role="{{ font.role }}">
+                <legend class="fieldset-legend">{{ font.label }}</legend>
+                <p data-font-sample="{{ font.role }}" class="text-xl">The quick brown fox jumps over the lazy dog.</p>
+                {% call field.select('font-' + font.role, font.fields.select, 'Font', error=(font.problem if not font.customChosen else '')) %}
+                  {% for option in font.options %}
+                    <option value="{{ option.value }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
+                  {% endfor %}
+                {% endcall %}
+                {{ field.text('font-' + font.role + '-custom', font.fields.custom, 'Custom Google Fonts family', value=font.custom, error=(font.problem if font.customChosen else ''), hint='Used when Custom… is chosen. Type the family as Google Fonts names it, such as Bitter.', spellcheck='false', autocomplete='off') }}
+              </fieldset>
+            {% endfor %}
+          </div>
+          <p class="label mt-2 block whitespace-normal">Saving downloads each family from Google Fonts to this site, so readers load it from here. Body text needs regular, italic and bold; headings need bold.</p>
+
+          {% call cardActions() %}
+            {{ button('Save fonts', type='submit', color='primary') }}
+          {% endcall %}
+        </form>
+      {% else %}
+        <p>This theme declares no fonts to choose.</p>
+      {% endif %}
+    {% endcall %}
+  </div>
+{% endblock %}

package/admin/pages/dashboard/home.njk

@@ -36,6 +36,8 @@
           {% for key in widget.shown %}<input type="hidden" name="shown" value="{{ key }}" />{% endfor %}
           {{ button('↑', type='submit', name='action', value='earlier', style='ghost', size='xs', shape='square', ariaLabel='Move ' + widget.title + ' earlier', disabled=widget.first) }}
           {{ button('↓', type='submit', name='action', value='later', style='ghost', size='xs', shape='square', ariaLabel='Move ' + widget.title + ' later', disabled=widget.last) }}
+          {{ button('←', type='submit', name='action', value='left', style='ghost', size='xs', shape='square', ariaLabel='Move ' + widget.title + ' to the left column', hidden=widget.side == 'left') }}
+          {{ button('→', type='submit', name='action', value='right', style='ghost', size='xs', shape='square', ariaLabel='Move ' + widget.title + ' to the right column', hidden=widget.side == 'right') }}
           {% if widget.collapsed %}
             {{ button('+', type='submit', name='action', value='expand', style='ghost', size='xs', shape='square', ariaLabel='Expand ' + widget.title) }}
           {% else %}
@@ -107,9 +109,13 @@
         </div>
       </div>
       <div class="grid grid-cols-1 gap-6 @3xl:grid-cols-2" data-dashboard-cards data-layout-url="{{ layoutUrl }}">
-        {% for widget in widgets %}
-          <div class="min-w-0{% if widget.width == 'full' %} @3xl:col-span-2{% endif %}" data-dashboard-card="{{ widget.key }}">
-            {{ arrangedCard(widget) }}
+        {% for column in columns %}
+          <div class="flex min-w-0 flex-col gap-6 @3xl:min-h-24" data-dashboard-column="{{ column.side }}">
+            {% for widget in column.cards %}
+              <div class="min-w-0" data-dashboard-card="{{ widget.key }}">
+                {{ arrangedCard(widget) }}
+              </div>
+            {% endfor %}
           </div>
         {% endfor %}
       </div>

package/admin/pages/documents/conflict.njk

@@ -4,7 +4,7 @@
    saved last. #}
 {% extends "layouts/shell.njk" %}
 
-{% block title %}Conflicting edit{% endblock %}
+{% block title %}{% if restoring %}Restore unsaved changes{% else %}Conflicting edit{% endif %}{% endblock %}
 
 {% import "components/fields.njk" as field %}
 {% from "components/alert.njk" import alert %}
@@ -12,16 +12,29 @@
 {% from "components/card.njk" import card %}
 
 {% block content %}
-  <h1 class="mb-6 text-2xl font-bold">This {{ kind.singular }} changed while you were editing it</h1>
+  {% if restoring %}
+    <h1 class="mb-6 text-2xl font-bold">This {{ kind.singular }} changed since your unsaved changes</h1>
 
-  <div class="mb-6">
-    {% call alert(color='error', style='soft', polite=true) %}
-      <span>
-        Nothing has been saved. The file on disk is not the one this form was filled in
-        from — somebody else, or something else, has written to it.
-      </span>
-    {% endcall %}
-  </div>
+    <div class="mb-6">
+      {% call alert(color='warning', style='soft', polite=true) %}
+        <span>
+          Nothing has been saved. The file on disk has been written to since your
+          unsaved changes were made from it. Read both versions before you choose.
+        </span>
+      {% endcall %}
+    </div>
+  {% else %}
+    <h1 class="mb-6 text-2xl font-bold">This {{ kind.singular }} changed while you were editing it</h1>
+
+    <div class="mb-6">
+      {% call alert(color='error', style='soft', polite=true) %}
+        <span>
+          Nothing has been saved. The file on disk is not the one this form was filled in
+          from — somebody else, or something else, has written to it.
+        </span>
+      {% endcall %}
+    </div>
+  {% endif %}
 
   <div class="grid gap-6 lg:grid-cols-2">
     {% call card(title='Your version') %}
@@ -32,6 +45,17 @@
     {% endcall %}
   </div>
 
+  {% if restoring %}
+    <div class="mt-6 flex flex-wrap items-center gap-2">
+      <form method="post" action="{{ restoring.discardUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="autosave" value="{{ restoring.key }}" />
+        <input type="hidden" name="return" value="{{ editUrl }}" />
+        {{ button('Discard mine and edit the file on disk', type='submit', style='soft') }}
+      </form>
+      {{ buttonLink('Edit mine over the file', restoring.rebaseUrl, color='primary') }}
+    </div>
+  {% else %}
   {# Everything the refused form carried, with the hash the file has now. One
      click is then a deliberate overwrite of a version its author has read. #}
   <form class="mt-6 flex flex-wrap items-center gap-2" method="post" action="{{ saveUrl }}">
@@ -52,4 +76,5 @@
     {{ buttonLink('Discard mine and edit the file on disk', editUrl, style='soft') }}
     {{ button('Keep mine and overwrite the file', type='submit', name='action', value=action, color='error') }}
   </form>
+  {% endif %}
 {% endblock %}

package/admin/pages/documents/editor.njk

@@ -453,12 +453,33 @@
     </div>
   {% endif %}
 
+  {% if resume %}
+    <div class="my-6" id="autosave-resume" data-saved-at="{{ resume.savedAt }}">
+      {% call alert(color='warning', direction='responsive', labelledby='autosave-resume-message') %}
+        <p id="autosave-resume-message">
+          Unsaved changes from <time datetime="{{ resume.savedAt }}">{{ resume.at }}</time>.
+          {% if resume.changedSince %}This {{ resume.noun }} has changed since. Restore shows both versions side by side.{% endif %}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          {{ buttonLink('Restore', resume.restoreUrl, color='primary', size='sm') }}
+          <form method="post" action="{{ resume.discardUrl }}" id="autosave-resume-discard">
+            <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+            <input type="hidden" name="autosave" value="{{ resume.key }}" />
+            <input type="hidden" name="return" value="{{ resume.returnUrl }}" />
+            {{ button('Discard', type='submit', style='soft', size='sm') }}
+          </form>
+        </div>
+      {% endcall %}
+    </div>
+  {% endif %}
+
   <form class="group/editor grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]" id="editor-form" method="post" action="{{ saveUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
     {# The hash of the file this form was filled in from. A save whose hash no
        longer matches what is on disk is refused rather than overwriting
        somebody else's edit (doc-1). #}
     <input type="hidden" name="hash" value="{{ form.hash }}" />
+    <input type="hidden" name="autosave" value="{{ autosaveKey }}" />
     {# Which layout the preview renders through. The save handler ignores it. #}
     <input type="hidden" name="type" value="{{ kind.type }}" />
     {% if editorKind %}
@@ -494,6 +515,13 @@
           data-preview-url="{{ previewUrl }}"
           data-upload-url="{{ uploadsUrl }}"
           data-kind="{{ kind.type }}"
+          data-autosave-url="{{ autosaveUrl }}"
+          data-autosave-user="{{ autosaveUser }}"
+          data-autosave-discard-url="{{ autosaveDiscardUrl }}"
+          data-autosave-timezone="{{ autosaveTimezone }}"
+          {% if autosaveCopySavedAt %}data-autosave-copy-saved-at="{{ autosaveCopySavedAt }}"{% endif %}
+          {% if autosaveFileTime %}data-autosave-file-time="{{ autosaveFileTime }}"{% endif %}
+          {% if clearedAutosaves and clearedAutosaves.length %}data-autosave-cleared="{{ clearedAutosaves | dump }}"{% endif %}
         >
           {{ button('Preview', type='submit', id='editor-preview-fallback', style='soft', formaction=previewUrl, formtarget='_blank', formnovalidate=true) }}
         </div>

package/admin/pages/documents/list.njk

@@ -22,7 +22,50 @@
     {{ tabs(filters, 'Show ' + (kind.plural | lower)) }}
   </div>
 
-  {% if documents.length %}
+  {% if unsaved %}
+    {% if unsaved.length %}
+      {% call table('Unsaved ' + (kind.plural | lower)) %}
+        <thead>
+          <tr>
+            <th scope="col">Title</th>
+            {{ heading('Kind') }}
+            {{ heading('Of') }}
+            {{ heading('Saved') }}
+          </tr>
+        </thead>
+        <tbody>
+          {% for copy in unsaved %}
+            {% call row() %}
+              <td>
+                {% if copy.resumeUrl %}
+                  <a class="link link-hover font-medium" href="{{ copy.resumeUrl }}">{{ copy.label }}</a>
+                {% else %}
+                  <span class="font-medium">{{ copy.label }}</span>
+                {% endif %}
+                <div class="-ms-2 mt-1 flex items-center gap-1 whitespace-nowrap">
+                  {% if copy.resumeUrl %}
+                    {{ buttonLink('Resume', copy.resumeUrl, style='ghost', size='xs') }}
+                  {% endif %}
+                  <form method="post" action="{{ discardUrl }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                    <input type="hidden" name="autosave" value="{{ copy.key }}" />
+                    <input type="hidden" name="return" value="{{ returnUrl }}" />
+                    {{ button('Discard', type='submit', style='ghost', size='xs', ariaLabel='Discard the unsaved changes to ' + copy.label) }}
+                  </form>
+                </div>
+                {{ rowToggle(copy.label) }}
+              </td>
+              {% call cell('Kind', nowrap=true) %}{{ copy.kind }}{% endcall %}
+              {% call cell('Of') %}{{ copy.of }}{% endcall %}
+              {% call cell('Saved', nowrap=true) %}<time datetime="{{ copy.savedAt }}">{{ copy.at }}</time>{% endcall %}
+            {% endcall %}
+          {% endfor %}
+        </tbody>
+      {% endcall %}
+    {% else %}
+      <p>No unsaved changes.</p>
+    {% endif %}
+  {% elif documents.length %}
     {% call table(kind.plural) %}
       <thead>
         <tr>

package/admin/pages/settings/general.njk

@@ -83,6 +83,10 @@
     </p>
   </div>
 
+  {{ field.checkbox('settings-header-icon', fields.header_icon,
+       'Show the icon before the site title in the header', checked=form.header_icon,
+       hint='The default theme shows it at the size of the title on every page, once the site has an icon.') }}
+
   {% set licenseHint %}What readers may do with your posts. The footer links it, and the structured data and the feeds declare it. A post can name its own with <code>license</code> in its front matter.{% endset %}
   {% call field.select('settings-license', fields.license, 'License', error=problems.license, hintHtml=licenseHint) %}
     <option value=""{% if not form.license %} selected{% endif %}>No license (all rights reserved)</option>

package/admin/pages/users/edit.njk

@@ -124,7 +124,7 @@
       Every link here is published with <code>rel="me"</code> whether or not
       you type it: it is how Mastodon verifies a profile field that points back
       at this site, and how IndieAuth knows these are yours. Nothing else in
-      Geekity needs it.
+      Geekity CMS needs it.
     {% endset %}
     {{ field.textarea('profile-links', fields.links, 'Links', account.profile.links, rows='4',
          hintHtml=linksHint, error=profileProblems.links) }}

package/admin/src/admin.css

@@ -175,3 +175,35 @@
 #editor-surface .cm-md-mark {
   color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
 }
+
+html.editor-focus #editor-surface .cm-editor {
+  height: auto;
+  min-height: 60dvh;
+  border-color: transparent;
+  background-color: transparent;
+  font-size: 1.0625rem;
+}
+
+html.editor-focus #editor-surface .cm-editor.cm-focused {
+  outline: none;
+}
+
+html.editor-focus #editor-surface .cm-scroller {
+  line-height: 1.8;
+}
+
+html.editor-focus #editor-surface .cm-content {
+  padding-block: 0;
+}
+
+html.editor-focus #editor-surface .cm-line {
+  padding-inline: 0;
+}
+
+html.editor-focus #editor-surface .cm-gutters {
+  display: none;
+}
+
+html.editor-focus #editor-surface .cm-activeLine {
+  background-color: transparent;
+}