@geekity/cms 0.40.0 → 0.42.0

package/admin/components/blocks.njk

@@ -166,7 +166,7 @@
           <text class="fill-base-content/70" x="24" y="{{ day.y }}" text-anchor="end" font-size="9">{{ day.label }}</text>
         {% endfor %}
         {% for cell in view.cells %}
-          <rect class="{% if cell.level == 0 %}fill-base-content/10{% elif cell.level == 1 %}fill-primary/25{% elif cell.level == 2 %}fill-primary/50{% elif cell.level == 3 %}fill-primary/75{% else %}fill-primary{% endif %}" x="{{ cell.x }}" y="{{ cell.y }}" width="{{ view.cell }}" height="{{ view.cell }}" rx="2"><title>{{ cell.title }}</title></rect>
+          <rect class="{% if cell.level == 0 %}fill-base-content/10{% elif cell.level == 1 %}fill-primary/25{% elif cell.level == 2 %}fill-primary/50{% elif cell.level == 3 %}fill-primary/75{% else %}fill-primary{% endif %}{% if cell.marked %} stroke-base-content{% endif %}"{% if cell.marked %} stroke-width="1.5"{% endif %} x="{{ cell.x }}" y="{{ cell.y }}" width="{{ view.cell }}" height="{{ view.cell }}" rx="2"><title>{{ cell.title }}</title></rect>
         {% endfor %}
       </svg>
     </div>
@@ -180,6 +180,12 @@
         <rect class="fill-primary" x="56" y="0" width="12" height="12" rx="2" />
       </svg>
       <span>More</span>
+      {% if view.mark %}
+        <svg class="ml-3 size-3" viewBox="0 0 12 12">
+          <rect class="fill-base-content/10 stroke-base-content" stroke-width="1.5" x="0.75" y="0.75" width="10.5" height="10.5" rx="2" />
+        </svg>
+        <span>{{ view.mark }}</span>
+      {% endif %}
     </div>
     {{ numbers(view) }}
   </div>
@@ -243,6 +249,14 @@
     {{ bars(view) }}
   {% elif view.kind == 'calendar' %}
     {{ calendar(view) }}
+  {% elif view.kind == 'progress' %}
+    <div class="grid gap-1">
+      <div class="flex flex-wrap justify-between gap-x-3 text-sm">
+        <span>{{ view.label }}</span>
+        <span class="tabular-nums">{{ view.value }} of {{ view.max }} · <span class="font-semibold">{{ view.percent }}</span></span>
+      </div>
+      <progress class="progress progress-primary w-full" value="{{ view.filled }}" max="{{ view.limit }}" aria-label="{{ view.label }}">{{ view.percent }}</progress>
+    </div>
   {% else %}
     {% if view.caption %}<p class="text-sm font-semibold">{{ view.caption }}</p>{% endif %}
     <p class="text-sm text-base-content/70">No data to show.</p>

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 %}
@@ -481,6 +502,7 @@
         {% endif %}
 
         {{ field.textarea('editor-body', 'body', (editorKind.body if editorKind else 'Body'), value=form.body, rows=(8 if editorKind and editorKind.sections | length else 20)) }}
+        <p id="editor-words" class="text-sm text-base-content/70 tabular-nums"{% if words.today is defined %} data-words-today="{{ words.today }}"{% endif %}>{{ words.label }}</p>
 
         {# Everything the editor's own script needs, on the element it hangs
            off. With JavaScript off this is one button that posts the form to
@@ -494,6 +516,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/settings/reading.njk

@@ -161,4 +161,18 @@
   {% endset %}
   {{ field.checkbox('settings-index-now', fields.index_now, 'Submit changes to IndexNow',
        checked=form.index_now, hintHtml=indexNowHint) }}
+
+  {% set geminiHint %}
+    Serves the site as a Gemini capsule at <code>gemini://</code> with a self-signed
+    certificate the site generates once and keeps. Gemini clients remember the
+    certificate on their first visit, so a new one makes every visitor's client warn.
+    {% if geminiCertificate and geminiCertificate.ok %}
+      <span class="block mt-1">SHA-256 fingerprint:
+        <code class="break-all">{{ geminiCertificate.certificate.fingerprint256 }}</code></span>
+    {% elif geminiCertificate %}
+      <span class="block mt-1 text-error">{{ geminiCertificate.problem }}</span>
+    {% endif %}
+  {% endset %}
+  {{ field.checkbox('settings-gemini', fields.gemini, 'Serve over Gemini',
+       checked=form.gemini, hintHtml=geminiHint) }}
 {% endblock %}

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/pages/users/writing-goals.njk

@@ -0,0 +1,64 @@
+{% extends "layouts/shell.njk" %}
+{% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
+
+{% block title %}Writing goals{% endblock %}
+
+{% block content %}
+  <h1 class="mb-6 text-2xl font-bold">Writing goals</h1>
+
+  <div class="flex max-w-2xl flex-col gap-6">
+  {% if hasProblems %}
+    {% call field.summary('Nothing was saved. Fix the fields marked below and save again.') %}
+      {{ field.problem('goal-words', problems.words) }}
+      {{ field.problem('goal-period', problems.period) }}
+      {{ field.problem('streak-daily-words', problems.dailyWords) }}
+      {{ field.problem('streak-misses-allowed', problems.missesAllowed) }}
+    {% endcall %}
+  {% endif %}
+
+  {% call card() %}
+  <form method="post" action="{{ formUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+    <p class="text-sm">
+      The site counts the words you write in the editor whether or not you
+      track a goal. Tracking shows your progress and your streak on the
+      dashboard. Turning it off keeps your goal for when you turn it on again.
+    </p>
+
+    {{ field.checkbox('writing-tracking', fields.tracking, 'Track writing goals', checked=form.tracking,
+         hint=('Save to set your goal.' if not form.tracking else '')) }}
+
+    {% if form.tracking or hasProblems %}
+      <h2 class="mt-4 font-semibold">Goal</h2>
+      {{ field.text('goal-words', fields.words, 'Words', form.words, type='number', min='1', step='1',
+           inputmode='numeric', error=problems.words) }}
+      {% call field.select('goal-period', fields.period, 'Every', error=problems.period) %}
+        {% for period in periods %}
+          <option value="{{ period.value }}"{% if period.chosen %} selected{% endif %}>{{ period.label }}</option>
+        {% endfor %}
+      {% endcall %}
+
+      <h2 class="mt-4 font-semibold">Streak</h2>
+      {% set dailyHint %}
+        A day keeps your streak when you write at least this many words. Leave
+        it empty to use your goal's daily pace{% if paceWords %} ({{ paceWords }} words){% endif %}.
+      {% endset %}
+      {{ field.text('streak-daily-words', fields.dailyWords, 'Words a day', form.dailyWords, type='number',
+           min='1', step='1', inputmode='numeric', error=problems.dailyWords, hintHtml=dailyHint) }}
+      {% set missesHint %}
+        How many missed days in a row your streak survives, from 0 to {{ maxMissesAllowed }}.
+        With 1, missing a day is fine and missing two in a row ends it.
+      {% endset %}
+      {{ field.text('streak-misses-allowed', fields.missesAllowed, 'Missed days allowed', form.missesAllowed,
+           type='number', min='0', step='1', inputmode='numeric', error=problems.missesAllowed,
+           hintHtml=missesHint) }}
+    {% endif %}
+
+    <div class="mt-4">{{ button('Save writing goals', type='submit', color='primary') }}</div>
+  </form>
+  {% endcall %}
+  </div>
+{% endblock %}

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;
+}