@geekity/cms 0.40.0 → 0.42.0

package/themes/default/layouts/base.njk

@@ -87,23 +87,19 @@
 {% endif %}
 {% set breadcrumbs = [{ "name": "Home", "url": "/" }].concat(crumbs) if crumbs.length else [] %}
 <!doctype html>
-<html lang="{{ site.language | default("en") }}">
+<html lang="{{ site.language | default("en") }}"{% if theme.scheme %} data-scheme="{{ theme.scheme.name }}" data-mode="{{ theme.mode }}"{% endif %}>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    {#
-      The colours the theme's `theme.json` declares (TASK-146). The colour
-      scheme goes before the stylesheet, so a reader in dark mode gets a dark
-      canvas while the stylesheet is still on its way rather than a white
-      flash. The theme colour tints the browser around the page, one per
-      scheme, and is the page's own background so the two meet without a seam.
-    #}
-    {% if theme.colorScheme %}
-    <meta name="color-scheme" content="{{ theme.colorScheme }}">
+    {% set colorModes = (["light", "dark"] if theme.mode == "system" else [theme.mode]) if theme.scheme else ["light", "dark"] %}
+    {% set themeColor = theme.scheme.themeColor if theme.scheme else theme.themeColor %}
+    {% set colorScheme = colorModes | join(" ") if theme.scheme else theme.colorScheme %}
+    {% if colorScheme %}
+    <meta name="color-scheme" content="{{ colorScheme }}">
     {% endif %}
-    {% for scheme in ["light", "dark"] %}
-    {% if theme.themeColor[scheme] %}
-    <meta name="theme-color" content="{{ theme.themeColor[scheme] }}" media="(prefers-color-scheme: {{ scheme }})">
+    {% for mode in colorModes %}
+    {% if themeColor[mode] %}
+    <meta name="theme-color" content="{{ themeColor[mode] }}"{% if colorModes.length > 1 %} media="(prefers-color-scheme: {{ mode }})"{% endif %}>
     {% endif %}
     {% endfor %}
     <title>{% block title %}{% if pageTitle %}{{ pageTitle }} &middot; {% endif %}{{ site.title }}{% endblock %}</title>
@@ -114,6 +110,18 @@
     {% endif %}
     <link rel="canonical" href="{{ canonicalUrl }}">
     <link rel="stylesheet" href="{{ "style.css" | asset }}">
+    {% if fonts %}
+    {% for href in fonts.stylesheets %}
+    <link rel="stylesheet" href="{{ href | url }}">
+    {% endfor %}
+    <style{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>
+      :root {
+        {% for font in fonts.properties %}
+        {{ font.property }}: {{ font.value | safe }};
+        {% endfor %}
+      }
+    </style>
+    {% endif %}
     {% block speculationRules %}
     {#
       Prefetch the page behind a link the reader is about to follow: a hover
@@ -159,6 +167,9 @@
     {% if activityStreams %}
     <link rel="alternate" type="application/activity+json" href="{{ activityStreams }}">
     {% endif %}
+    {% if capsuleUrl %}
+    <link rel="alternate" type="text/gemini" href="{{ capsuleUrl }}">
+    {% endif %}
     {% endblock %}
     {% if webmention %}
     <link rel="webmention" href="{{ webmention | url }}">
@@ -283,7 +294,9 @@
       <header class="global-header">
         {% if atRoot %}
         <h1 class="main-heading">
-          <a href="{{ "/" | url }}">{{ site.title }}</a>
+          <a href="{{ "/" | url }}">
+            {%- if headerIcon %}<img class="site-icon" src="{{ headerIcon | url }}" alt="" width="48" height="48">{% endif -%}
+            {{ site.title }}</a>
         </h1>
         {% if site.tagline %}
         <p class="site-tagline">{{ site.tagline }}</p>
@@ -291,7 +304,9 @@
         {% else %}
         {#- The solo author's own archive claims the homepage back, so the
             two URLs are provably one person (TASK-180). -#}
-        <a class="header-link-home"{% if isAuthorArchive and soloAuthor.url == author.url %} rel="me"{% endif %} href="{{ "/" | url }}">{{ site.title }}</a>
+        <a class="header-link-home"{% if isAuthorArchive and soloAuthor.url == author.url %} rel="me"{% endif %} href="{{ "/" | url }}">
+          {%- if headerIcon %}<img class="site-icon" src="{{ headerIcon | url }}" alt="" width="24" height="24">{% endif -%}
+          {{ site.title }}</a>
         {% endif %}
         {{ nav.list(menus.primary, "Site") }}
       </header>
@@ -304,7 +319,7 @@
 
       {% block footer %}
       <footer>
-        <p>&copy; {{ "now" | date("year") }}, {{ soloAuthor.name or site.title }}{% if license %} &middot; <a rel="license" href="{{ license.url }}">{{ license.name }}</a>{% endif %} &middot; Published with Geekity</p>
+        <p>&copy; {{ "now" | date("year") }}, {{ soloAuthor.name or site.title }}{% if license %} &middot; <a rel="license" href="{{ license.url }}">{{ license.name }}</a>{% endif %} &middot; Published with Geekity CMS</p>
         {#
           The footer menu: the `footer` area this theme declares in its
           `theme.json`, which a site fills in on the Navigation screen, and the

package/themes/default/layouts/page.njk

@@ -3,10 +3,6 @@
   TASK-83): the same `blog-post h-entry` a post is, with the same Published
   line inside the `e-content` and the same bio under a rule.
 
-  Two front matter keys add to it: `contact: true` puts the contact form under
-  the words, and `archive: true` puts every post the site has published under
-  them, month by month (TASK-85).
-
   What a page does not have: an IndieNews link, since it is not a post
   anybody syndicates; neighbours, since it is in no archive; and taxonomy,
   since only posts are filed. The bio credits `siteAuthor` — a page is by
@@ -53,6 +49,10 @@
   {% include "partials/archive.njk" %}
   {% endif %}
 
+  {% if contactForm %}
+  {% include "partials/contact-form.njk" %}
+  {% endif %}
+
   {#- The rule and the footer are the bio's own: a site whose author setting
       names nobody with an account here ends the page at its words. -#}
   {% if bioAuthor %}
@@ -72,8 +72,4 @@
 {% include "partials/comment-form.njk" %}
 {% endif %}
 
-{# Only a page whose front matter says `contact: true` has one (TASK-56). #}
-{% if contactForm %}
-{% include "partials/contact-form.njk" %}
-{% endif %}
 {% endblock %}

package/themes/default/partials/bio.njk

@@ -68,7 +68,7 @@
       {%- else %}
       <strong class="p-name">{{ bioAuthor.name }}</strong>
       {%- endif %}
-      {%- if bioAuthor.jobTitle %}, a <span class="p-job-title">{{ bioAuthor.jobTitle }}</span>{% endif %}
+      {%- if bioAuthor.jobTitle %}, <span class="p-job-title">{{ bioAuthor.jobTitle }}</span>{% endif %}
       {%- if bioAuthor.location %} from <span class="p-locality">{{ bioAuthor.location }}</span>{% endif %}.
     </p>
 

package/themes/default/partials/contact-form.njk

@@ -1,5 +1,5 @@
 {#
-  The form under a page whose front matter says `contact: true`.
+  The form on a page whose front matter says `contact: true`.
 
   `contactForm` is on the context only when the page asked for one, so a layout
   asks `{% if contactForm %}` and nothing else. A site replaces this whole

package/themes/default/partials/markdown-footer.md.njk

@@ -27,7 +27,9 @@
   under its list item. `commentForm` and `contactForm` are each the `url` of
   the form on the HTML page, printed as it is, since a form needs HTML;
   `commentForm` is absent while comments are closed. `webmention` is there
-  when the site takes webmentions.
+  when the site takes webmentions. `capsuleUrl` is this page's gemini:// URL
+  while the site serves Gemini, and is never set when this is written as
+  gemtext.
   `thread` is on a comment's own page, as the header describes it: its
   `comment.replies` are threaded as a conversation's are, and `onPostUrl` is the
   comment on the post's page.
@@ -135,6 +137,12 @@ Or reply from your own site and send a [webmention](https://indieweb.org/Webment
 
 [Send a message on the web page]({{ contactForm.url }})
 
+{% endif %}
+{% if capsuleUrl %}
+## Gemini
+
+[Read this page over Gemini]({{ capsuleUrl }})
+
 {% endif %}
 {% if feeds.length %}
 ## Feeds

package/themes/default/src/style.css

@@ -4,11 +4,12 @@
  * The source. `pnpm build` compiles it with Tailwind v4 to `static/style.css`,
  * which is what a page loads and what the package ships; that file is a build
  * product and gitignored. Nothing about Tailwind reaches a reader: no script,
- * no CDN, no web font, one stylesheet.
+ * no CDN, one stylesheet. A site may choose Google Fonts for headings and
+ * body; the site serves their files itself, so nothing third-party loads.
  *
  * One warm column at 42rem, serif throughout, sans reserved for small labels.
  * Only an article has a headline; every other kind of post is its words under
- * a small-caps kicker that names the kind. Dark mode follows the system.
+ * a small-caps kicker that names the kind.
  *
  * The look lives here, on the theme's semantic class names, through `@apply`:
  * the templates carry no utility classes, so a site theme that has CSS for the
@@ -19,18 +20,39 @@
  * "Colours" in docs/theme/page-shell.md). `src/web/theme-colors.test.ts` reads
  * them out of the compiled file and computes the WCAG 2.2 ratio of every pair
  * the design puts on screen: every run of text at 7:1, every border a reader
- * relies on at 3:1, in both schemes. `--color-rule` is the one exception, a
- * decorative hairline nothing a reader needs is drawn with.
+ * relies on at 3:1, in every scheme and both modes. `--color-rule` is the one
+ * exception, a decorative hairline nothing a reader needs is drawn with.
  */
 @import 'tailwindcss' source(none);
 @source '../layouts';
 @source '../partials';
 
+@custom-variant dark {
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode='light']) {
+      @slot;
+    }
+  }
+
+  &[data-mode='dark'] {
+    @slot;
+  }
+}
+
 :root {
-  /* Light and dark are both drawn below, so a browser may paint its own form
-     controls, scrollbars and spellcheck marks to match. */
   color-scheme: light dark;
+}
+
+:root[data-mode='light'] {
+  color-scheme: light;
+}
+
+:root[data-mode='dark'] {
+  color-scheme: dark;
+}
 
+:root,
+:root[data-scheme='paper'] {
   /* `body` is the paper and `text` the ink. `muted` is every small line of
      sans and every quote; `primary` is links, the kind a kicker names and the
      citation rule; `secondary` is tags and the focus outline. `rule` is a
@@ -72,10 +94,8 @@
   --color-code-meta: #6d453c; /* base0F, stock #a3685a */
   --color-code-added-background: #dcedd3;
   --color-code-removed-background: #f5d8d6;
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
+  @variant dark {
     --color-body: #171412;
     --color-text: #ece6de;
     --color-muted: #b2aaa0;
@@ -108,6 +128,286 @@
   }
 }
 
+:root[data-scheme='slate'] {
+  --color-body: #f4f7fb;
+  --color-text: #161b20;
+  --color-muted: #4b4f54;
+  --color-primary: #0f4e94;
+  --color-secondary: #59447b;
+  --color-rule: #dadee3;
+  --color-edge: #82868a;
+  --color-base: #edf1f6;
+  --color-base-2: #f3f2f5;
+  --color-base-3: #ffffff;
+  --color-code-background: #edf1f6;
+  --color-code-text: #161b20;
+  --color-error: #9d121d;
+  --color-code-comment: #4e4e4e;
+  --color-code-tag: #514e4f;
+  --color-code-name: #991c21;
+  --color-code-literal: #7c3e03;
+  --color-code-class: #614c02;
+  --color-code-string: #405603;
+  --color-code-support: #045858;
+  --color-code-function: #1f4f8a;
+  --color-code-keyword: #6b3a7f;
+  --color-code-meta: #6d443a;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+
+  @variant dark {
+    --color-body: #12161c;
+    --color-text: #e3e8f0;
+    --color-muted: #a3adba;
+    --color-primary: #80b7fe;
+    --color-secondary: #b7a2e0;
+    --color-rule: #212831;
+    --color-edge: #676e77;
+    --color-base: #181f27;
+    --color-base-2: #1e1d22;
+    --color-base-3: #21272f;
+    --color-code-background: #181f27;
+    --color-code-text: #e3e8f0;
+    --color-error: #ff8a83;
+    --color-code-comment: #acacac;
+    --color-code-tag: #adabab;
+    --color-code-name: #ff8a83;
+    --color-code-literal: #f29551;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5bbaba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd98e4;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme='forest'] {
+  --color-body: #f5f7ed;
+  --color-text: #1a1b15;
+  --color-muted: #4d4f42;
+  --color-primary: #035b27;
+  --color-secondary: #734301;
+  --color-rule: #dcdfd0;
+  --color-edge: #84867b;
+  --color-base: #eff1e4;
+  --color-base-2: #eef3ef;
+  --color-base-3: #ffffff;
+  --color-code-background: #eff1e4;
+  --color-code-text: #1a1b15;
+  --color-error: #9c111c;
+  --color-code-comment: #4e4e4e;
+  --color-code-tag: #504d4e;
+  --color-code-name: #991b21;
+  --color-code-literal: #7b3d02;
+  --color-code-class: #604b01;
+  --color-code-string: #3f5501;
+  --color-code-support: #025757;
+  --color-code-function: #1e4e89;
+  --color-code-keyword: #6a3a7f;
+  --color-code-meta: #6c4339;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+
+  @variant dark {
+    --color-body: #0f1912;
+    --color-text: #e2eae4;
+    --color-muted: #9db1a3;
+    --color-primary: #75c687;
+    --color-secondary: #daa168;
+    --color-rule: #1c2c22;
+    --color-edge: #627166;
+    --color-base: #142219;
+    --color-base-2: #182020;
+    --color-base-3: #1c2a21;
+    --color-code-background: #142219;
+    --color-code-text: #e2eae4;
+    --color-error: #fe8c84;
+    --color-code-comment: #acacac;
+    --color-code-tag: #aeacac;
+    --color-code-name: #fe8c84;
+    --color-code-literal: #f39651;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5cbbba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd99e5;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme='plum'] {
+  --color-body: #fbf3fa;
+  --color-text: #1e191d;
+  --color-muted: #544b53;
+  --color-primary: #822973;
+  --color-secondary: #3f488b;
+  --color-rule: #e4d9e2;
+  --color-edge: #8a8289;
+  --color-base: #f6ecf5;
+  --color-base-2: #f6f0f1;
+  --color-base-3: #ffffff;
+  --color-code-background: #f6ecf5;
+  --color-code-text: #1e191d;
+  --color-error: #9c111c;
+  --color-code-comment: #4d4d4d;
+  --color-code-tag: #504d4e;
+  --color-code-name: #981b20;
+  --color-code-literal: #7b3d02;
+  --color-code-class: #604b01;
+  --color-code-string: #3f5501;
+  --color-code-support: #025757;
+  --color-code-function: #1e4e89;
+  --color-code-keyword: #6a397e;
+  --color-code-meta: #6c4339;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+
+  @variant dark {
+    --color-body: #1b121d;
+    --color-text: #ece5ed;
+    --color-muted: #b7a5bc;
+    --color-primary: #f493e0;
+    --color-secondary: #98a6f2;
+    --color-rule: #302233;
+    --color-edge: #766879;
+    --color-base: #251928;
+    --color-base-2: #251b1e;
+    --color-base-3: #2e2131;
+    --color-code-background: #251928;
+    --color-code-text: #ece5ed;
+    --color-error: #ff8880;
+    --color-code-comment: #ababab;
+    --color-code-tag: #acaaab;
+    --color-code-name: #ff8880;
+    --color-code-literal: #f1944f;
+    --color-code-class: #cba63a;
+    --color-code-string: #94b74c;
+    --color-code-support: #5ab9b8;
+    --color-code-function: #7aadef;
+    --color-code-keyword: #cb97e3;
+    --color-code-meta: #d0a093;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme='ocean'] {
+  --color-body: #eef9fb;
+  --color-text: #141c1d;
+  --color-muted: #435153;
+  --color-primary: #04585c;
+  --color-secondary: #184f90;
+  --color-rule: #d2e1e3;
+  --color-edge: #7c888a;
+  --color-base: #e5f4f6;
+  --color-base-2: #eff3f7;
+  --color-base-3: #ffffff;
+  --color-code-background: #e5f4f6;
+  --color-code-text: #141c1d;
+  --color-error: #9e131d;
+  --color-code-comment: #4f4f4f;
+  --color-code-tag: #514e4f;
+  --color-code-name: #991c21;
+  --color-code-literal: #7d3e00;
+  --color-code-class: #624c03;
+  --color-code-string: #405603;
+  --color-code-support: #045858;
+  --color-code-function: #1f4f8a;
+  --color-code-keyword: #6b3b80;
+  --color-code-meta: #6d443a;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+
+  @variant dark {
+    --color-body: #08191f;
+    --color-text: #e0eaee;
+    --color-muted: #91b1be;
+    --color-primary: #57c5cb;
+    --color-secondary: #77aff7;
+    --color-rule: #122b35;
+    --color-edge: #59717a;
+    --color-base: #0a212a;
+    --color-base-2: #1a1e26;
+    --color-base-3: #122a33;
+    --color-code-background: #0a212a;
+    --color-code-text: #e0eaee;
+    --color-error: #ff8a83;
+    --color-code-comment: #acacac;
+    --color-code-tag: #adabab;
+    --color-code-name: #ff8a83;
+    --color-code-literal: #f29551;
+    --color-code-class: #cca83c;
+    --color-code-string: #95b84d;
+    --color-code-support: #5bbaba;
+    --color-code-function: #7caff1;
+    --color-code-keyword: #cd98e4;
+    --color-code-meta: #d1a195;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
+:root[data-scheme='ink'] {
+  --color-body: #ffffff;
+  --color-text: #030303;
+  --color-muted: #3f3f3f;
+  --color-primary: #1b388a;
+  --color-secondary: #3f3f3f;
+  --color-rule: #e6e6e6;
+  --color-edge: #737373;
+  --color-base: #f9f9f9;
+  --color-base-2: #fbfbfb;
+  --color-base-3: #ffffff;
+  --color-code-background: #f9f9f9;
+  --color-code-text: #030303;
+  --color-error: #840111;
+  --color-code-comment: #3f3f3f;
+  --color-code-tag: #3f3e3f;
+  --color-code-name: #6c2927;
+  --color-code-literal: #61320b;
+  --color-code-class: #4e3d02;
+  --color-code-string: #334408;
+  --color-code-support: #114646;
+  --color-code-function: #264061;
+  --color-code-keyword: #4f345b;
+  --color-code-meta: #513933;
+  --color-code-added-background: #d6f0d6;
+  --color-code-removed-background: #fedbda;
+
+  @variant dark {
+    --color-body: #0d0d0d;
+    --color-text: #f5f5f5;
+    --color-muted: #c2c2c2;
+    --color-primary: #aec8fe;
+    --color-secondary: #c2c2c2;
+    --color-rule: #1e1e1e;
+    --color-edge: #7f7f7f;
+    --color-base: #151515;
+    --color-base-2: #151515;
+    --color-base-3: #1d1d1d;
+    --color-code-background: #151515;
+    --color-code-text: #f5f5f5;
+    --color-error: #ffaaa2;
+    --color-code-comment: #c2c2c2;
+    --color-code-tag: #c1c0c0;
+    --color-code-name: #fcaba4;
+    --color-code-literal: #edb48d;
+    --color-code-class: #d4bf86;
+    --color-code-string: #b1c88c;
+    --color-code-support: #96cac9;
+    --color-code-function: #a4c3eb;
+    --color-code-keyword: #d4b5e3;
+    --color-code-meta: #d8bab2;
+    --color-code-added-background: #213622;
+    --color-code-removed-background: #442727;
+  }
+}
+
 /* Tailwind's utilities, drawn from the tokens above rather than its own
    palette, which is cleared so a utility can only name a colour of this
    design. `inline` puts the `var()` in the utility, so the scheme the custom
@@ -124,7 +424,8 @@
   --color-surface: var(--color-base);
   --color-code: var(--color-code-background);
   --color-error: var(--color-error);
-  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --font-heading: var(--font-heading);
+  --font-body: var(--font-body);
   --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 }
@@ -162,6 +463,12 @@
 }
 
 @layer base {
+  :root {
+    --font-heading:
+      'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+    --font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  }
+
   /* `scrollbar-gutter` keeps the scrollbar's room whether or not the page is
      long enough to scroll, so moving between a short page and a long one does
      not shift the column sideways. */
@@ -173,7 +480,7 @@
   }
 
   body {
-    @apply bg-paper font-serif leading-relaxed text-ink antialiased;
+    @apply bg-paper font-body leading-relaxed text-ink antialiased;
   }
 
   h1,
@@ -182,7 +489,7 @@
   h4,
   h5,
   h6 {
-    @apply font-bold tracking-tight;
+    @apply font-heading font-bold tracking-tight;
     text-wrap: balance;
   }
 
@@ -285,7 +592,11 @@
   }
 
   .header-link-home {
-    @apply target text-lg font-bold;
+    @apply target font-heading text-lg font-bold;
+  }
+
+  .site-icon {
+    @apply me-[0.3em] inline-block size-[1em] rounded-[0.18em] align-[-0.12em];
   }
 
   .site-tagline {
@@ -923,7 +1234,7 @@
   }
 
   .backlinks-title {
-    @apply mb-2 text-[0.72rem] font-normal tracking-[0.14em] text-muted uppercase;
+    @apply mb-2 font-sans text-[0.72rem] font-normal tracking-[0.14em] text-muted uppercase;
   }
 
   .backlinks ol {
@@ -1161,7 +1472,7 @@
   }
 
   :is(.comment-respond, .search-form) :is(input:not([type='checkbox'], [type='hidden']), textarea) {
-    @apply block w-full rounded-md border border-edge bg-surface px-3 py-2 font-serif text-base text-ink;
+    @apply block w-full rounded-md border border-edge bg-surface px-3 py-2 font-body text-base text-ink;
   }
 
   /* A field the reader has left invalid, or one a refused submission marked,