@geekity/cms 0.12.0 → 0.13.0

package/themes/default/layouts/base.njk

@@ -23,6 +23,8 @@
                       adds to it.
     alternates        <link rel="alternate"> tags, where the feeds go
     header            the site header, with the site menu
+    breadcrumbs       the trail at the top of <main>; empty it to print none
+                      (the JSON-LD keeps its BreadcrumbList)
     content           the page body
     footer            the site footer
     scripts           scripts at the end of <body>
@@ -38,8 +40,10 @@
 
     `metaDescription` is the page's own description, else the entry's summary
     — the very line the feeds publish — else the site's tagline. `metaImage` is
-    the picture the front matter names, else the site's avatar; with neither,
-    nothing is printed rather than an empty tag. `isEntry` is a rendered post
+    `shareImage.url`: the picture the front matter names, else the site's
+    avatar; with neither, nothing is printed rather than an empty tag. The CMS
+    works out `shareImage` because its alt text and its size live in files a
+    template cannot read. `isEntry` is a rendered post
     or page, which is what Open Graph calls an article: a listing has
     `pagination`, and the posts page is a listing carrying a page's front
     matter, so it is a website like every other listing. -#}
@@ -48,13 +52,51 @@
 {% set pageTitle = title or label %}
 {% set metaTitle = pageTitle or site.title %}
 {% set metaUrl = (page.url or "/") | absoluteUrl %}
-{% set metaImage = image or site.avatar %}
+{% set metaImage = shareImage.url if shareImage else "" %}
 {% set isEntry = (type == "post" or type == "page") and not pagination %}
+{#- An author archive is the only page that is about a person: a listing whose
+    `author` is whose page this is, rather than the posts page's writer. -#}
+{% set isAuthorArchive = pagination and author.url and url and (author.url in url) %}
+{#- Where this page sits, as `{ name, url }` from the front page down to it
+    (TASK-150): a post under its first category, and an archive under the
+    front page, with a crumb of its own past page one. The visible breadcrumb
+    and the JSON-LD both print this list, so they cannot say different things.
+    Every other page has no hierarchy worth showing and an empty trail. -#}
+{% set crumbs = [] %}
+{% if pagination and category %}
+{% set _ = crumbs.push({ "name": category, "url": "/" + (site.categoryBase or "category") + "/" + (category | urlencode) + "/" }) %}
+{% elif pagination and tag %}
+{% set _ = crumbs.push({ "name": tag, "url": "/" + (site.tagBase or "tag") + "/" + (tag | urlencode) + "/" }) %}
+{% elif isAuthorArchive %}
+{% set _ = crumbs.push({ "name": author.name, "url": author.url }) %}
+{% elif type == "post" and isEntry and categories.length %}
+{% set _ = crumbs.push({ "name": categories[0], "url": "/" + (site.categoryBase or "category") + "/" + (categories[0] | urlencode) + "/" }) %}
+{% set _ = crumbs.push({ "name": pageTitle, "url": page.url or url }) %}
+{% endif %}
+{% if crumbs.length and pagination.pageNumber > 0 %}
+{% set _ = crumbs.push({ "name": "Page " + (pagination.pageNumber + 1), "url": page.url or url }) %}
+{% endif %}
+{% set breadcrumbs = [{ "name": "Home", "url": "/" }].concat(crumbs) if crumbs.length else [] %}
 <!doctype html>
 <html lang="{{ site.language | default("en") }}">
   <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 }}">
+    {% endif %}
+    {% for scheme in ["light", "dark"] %}
+    {% if theme.themeColor[scheme] %}
+    <meta name="theme-color" content="{{ theme.themeColor[scheme] }}" media="(prefers-color-scheme: {{ scheme }})">
+    {% endif %}
+    {% endfor %}
     <title>{% block title %}{% if pageTitle %}{{ pageTitle }} &middot; {% endif %}{{ site.title }}{% endblock %}</title>
     {% if metaDescription %}
     <meta name="description" content="{{ metaDescription }}">
@@ -110,13 +152,23 @@
     {% if webmention %}
     <link rel="webmention" href="{{ webmention | url }}">
     {% endif %}
+    {#- The site's index for language models (TASK-149), from the front page,
+        which is where a tool that found the site looks for it. #}
+    {% if llmsTxt and atRoot %}
+    <link rel="describedby" type="text/markdown" href="{{ llmsTxt | url }}">
+    {% endif %}
     {% block head %}
     {#
       What a link to this page looks like when somebody posts it: the same
       title, description and picture to Open Graph and to a Twitter card,
-      which is the pair every reader of this markup understands. The card is
-      always `summary` — a small square picture beside the words — because the
-      picture is usually the site's avatar rather than a wide photograph.
+      which is the pair every reader of this markup understands. The image
+      always carries its alt text, and its size when the CMS knows it. The
+      card is `summary_large_image` only for a picture wide enough to fill
+      one, and `summary` — a small picture beside the words — for the site's
+      avatar and anything else.
+
+      An entry is an article, with its times, its author and its tags: the
+      author is their profile here when they have one, else their name.
     #}
     <meta property="og:title" content="{{ metaTitle }}">
     {% if metaDescription %}
@@ -125,25 +177,49 @@
     <meta property="og:url" content="{{ metaUrl }}">
     <meta property="og:type" content="{% if isEntry %}article{% else %}website{% endif %}">
     <meta property="og:site_name" content="{{ site.title }}">
-    {% if metaImage %}
-    <meta property="og:image" content="{{ metaImage | absoluteUrl }}">
+    {% if shareImage %}
+    <meta property="og:image" content="{{ shareImage.url | absoluteUrl }}">
+    <meta property="og:image:alt" content="{{ shareImage.alt }}">
+    {% if shareImage.size %}
+    <meta property="og:image:width" content="{{ shareImage.size.width }}">
+    <meta property="og:image:height" content="{{ shareImage.size.height }}">
+    {% endif %}
+    {% endif %}
+    {% if isEntry %}
+    {% if date %}
+    <meta property="article:published_time" content="{{ date | date("iso") }}">
+    {% endif %}
+    {% if updated or date %}
+    <meta property="article:modified_time" content="{{ (updated or date) | date("iso") }}">
+    {% endif %}
+    {% if siteAuthor.url %}
+    <meta property="article:author" content="{{ siteAuthor.url | absoluteUrl }}">
+    {% elif siteAuthor.name or author.name or author or site.author %}
+    <meta property="article:author" content="{{ siteAuthor.name or author.name or author or site.author }}">
+    {% endif %}
+    {% for tag in tags %}
+    <meta property="article:tag" content="{{ tag }}">
+    {% endfor %}
     {% endif %}
-    <meta name="twitter:card" content="summary">
+    <meta name="twitter:card" content="{{ shareImage.card if shareImage else "summary" }}">
     <meta name="twitter:title" content="{{ metaTitle }}">
     {% if metaDescription %}
     <meta name="twitter:description" content="{{ metaDescription }}">
     {% endif %}
-    {% if metaImage %}
-    <meta name="twitter:image" content="{{ metaImage | absoluteUrl }}">
+    {% if shareImage %}
+    <meta name="twitter:image" content="{{ shareImage.url | absoluteUrl }}">
+    <meta name="twitter:image:alt" content="{{ shareImage.alt }}">
     {% endif %}
     {#
-      The site's icons, derived from its avatar. `icons` is empty — and these
-      lines print nothing — until a site has one, so a site with no avatar
-      links no icon rather than three that answer 404.
+      The site's icons, derived from its `icon` setting, else its avatar.
+      `icons` is empty — and these lines print nothing — until a site has one,
+      so a site with neither links no icon rather than links that answer 404.
+      An SVG icon has every size, so it carries no `sizes`.
     #}
     {% for icon in icons %}
-    <link rel="{{ icon.rel }}" type="image/png" sizes="{{ icon.sizes }}" href="{{ icon.href | url }}">
+    <link rel="{{ icon.rel }}" type="{{ icon.type }}"{% if icon.sizes %} sizes="{{ icon.sizes }}"{% endif %} href="{{ icon.href | url }}">
     {% endfor %}
+    <link rel="manifest" href="{{ "/manifest.webmanifest" | url }}">
     {% include "partials/jsonld.njk" %}
     {% endblock %}
   </head>
@@ -170,13 +246,16 @@
         <p class="site-tagline">{{ site.tagline }}</p>
         {% endif %}
         {% else %}
-        <a class="header-link-home" href="{{ "/" | url }}">{{ site.title }}</a>
+        {#- 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>
         {% endif %}
         {{ nav.list(menus.primary, "Site") }}
       </header>
       {% endblock %}
 
       <main id="main">
+        {% block breadcrumbs %}{% include "partials/breadcrumbs.njk" %}{% endblock %}
         {% block content %}{% endblock %}
       </main>
 

package/themes/default/layouts/front-page.njk

@@ -10,13 +10,18 @@
   over the same feed a listing is made of, headed at 3 so the outline never
   skips a level, then the line of links, then the bio.
 
+  The bio is the site's author's on a solo author blog, with the `rel="me"`
+  claims that make this page their identity (TASK-180). On any other site it is
+  whoever the page is by, and it claims nothing: the homepage speaks for nobody.
+
   A theme that wants a different front page replaces this file; a site that
   wants no front page of its own sets no homepage, and `/` is the listing.
 #}
 {% extends "layouts/base.njk" %}
 
 {#- Who the bio credits: the person the site's author setting names. -#}
-{% set bioAuthor = siteAuthor %}
+{% set bioAuthor = soloAuthor or siteAuthor %}
+{% set bioRelMe = true if soloAuthor else false %}
 
 {% block content %}
 <div class="page-body e-content">

package/themes/default/layouts/home.njk

@@ -22,4 +22,14 @@
 {% endif %}
 {% include "partials/post-list.njk" %}
 {% include "partials/pagination.njk" %}
+{#- On a solo author blog the homepage speaks for the site's author, so it
+    ends with their card, as the front page does (TASK-180). Any other
+    listing, and the homepage of any other site, is nobody's. -#}
+{% if atRoot and soloAuthor %}
+{% set bioAuthor = soloAuthor %}
+<hr>
+<footer>
+  {% include "partials/bio.njk" %}
+</footer>
+{% endif %}
 {% endblock %}

package/themes/default/layouts/page.njk

@@ -14,6 +14,7 @@
 #}
 {% extends "layouts/base.njk" %}
 {% import "partials/kicker.njk" as kicker with context %}
+{% import "partials/lang.njk" as language with context %}
 
 {#- Who the bio credits, and what tells `layouts/base.njk` the site menu is in
     the bio rather than in the page footer. -#}
@@ -21,7 +22,7 @@
 
 {% block content %}
 {% set entryUrl = page.url or url %}
-<article class="blog-post h-entry">
+<article class="blog-post h-entry"{{ language.attr(lang) }}>
   <header class="post-header">
     {{ kicker.line("Page") }}
     <h1 class="p-name">{{ title }}</h1>
@@ -35,10 +36,10 @@
         deciding twice whether there is anything to say. -#}
     <p class="page-meta">
       {%- if date %}
-      <a href="{{ entryUrl | url }}" class="u-url"><time class="small dt-published" datetime="{{ date | date("iso") }}">Published {{ date | date }}</time></a>
+      <a href="{{ entryUrl | url }}" class="u-url"><time class="small dt-published" datetime="{{ date | date("iso") }}">Published {{ date | date("readable", none, lang) }}</time></a>
       {%- endif %}
       {%- if updated and (not date or (updated | date("html")) != (date | date("html"))) %}
-      {% if date %}<span aria-hidden="true">·</span> {% endif %}<time class="small dt-updated" datetime="{{ updated | date("iso") }}">Updated {{ updated | date }}</time>
+      {% if date %}<span aria-hidden="true">·</span> {% endif %}<time class="small dt-updated" datetime="{{ updated | date("iso") }}">Updated {{ updated | date("readable", none, lang) }}</time>
       {%- endif -%}
     </p>
   </section>

package/themes/default/layouts/post.njk

@@ -17,6 +17,7 @@
 {% extends "layouts/base.njk" %}
 {% import "partials/tags.njk" as taxonomy with context %}
 {% import "partials/kicker.njk" as kicker with context %}
+{% import "partials/lang.njk" as language with context %}
 
 {#- Who the bio credits: the person the file names, and otherwise whoever the
     site is by, which is what the source theme's bio reads. A post naming
@@ -28,7 +29,7 @@
 
 {% block content %}
 {% set entryUrl = page.url or url %}
-<article class="blog-post h-entry">
+<article class="blog-post h-entry"{{ language.attr(lang) }}>
   {#- A post with no name of its own (a note, or a reply without a title) is
       its words, so it opens on them in sight. Its page still needs one h1 to
       navigate by, so it gets one that says what it is, who wrote it and when,
@@ -49,7 +50,7 @@
   <h1 class="screen-reader-text">
     {{- "Reply" if postType == "reply" else "Note" }}
     {%- if bioAuthor.name %} by {{ bioAuthor.name }}{% endif %}
-    {%- if date %}, {{ date | date }}{% endif -%}
+    {%- if date %}, {{ date | date("readable", none, lang) }}{% endif -%}
   </h1>
   {{ kicker.line(postType | capitalize, false, false, categories) }}
   {% include "partials/reply-context.njk" %}
@@ -64,12 +65,12 @@
       <a class="u-category small" href="https://news.indieweb.org/en">#indienews</a>
       {%- endif %}
       {%- if date %}
-      <a href="{{ entryUrl | url }}" class="u-url"><time class="small dt-published" datetime="{{ date | date("iso") }}">Published {{ date | date }}</time></a>
+      <a href="{{ entryUrl | url }}" class="u-url"><time class="small dt-published" datetime="{{ date | date("iso") }}">Published {{ date | date("readable", none, lang) }}</time></a>
       {%- endif %}
       {#- Updated only when it is a different day in the site's own timezone:
           a typo fixed an hour after publishing is not news. -#}
       {%- if updated and (not date or (updated | date("html")) != (date | date("html"))) %}
-      {% if date %}<span aria-hidden="true">·</span> {% endif %}<time class="small dt-updated" datetime="{{ updated | date("iso") }}">Updated {{ updated | date }}</time>
+      {% if date %}<span aria-hidden="true">·</span> {% endif %}<time class="small dt-updated" datetime="{{ updated | date("iso") }}">Updated {{ updated | date("readable", none, lang) }}</time>
       {%- endif -%}
     </p>
   </section>

package/themes/default/layouts/search.njk

@@ -21,6 +21,7 @@
 {% endblock %}
 
 {% import "partials/kicker.njk" as kicker with context %}
+{% import "partials/lang.njk" as language with context %}
 {% block content %}
 <h1 class="page-title">Search</h1>
 {% include "partials/search-form.njk" %}
@@ -28,17 +29,15 @@
 <p class="search-summary" role="status">
   {%- if pagination.total == 0 -%}
   Nothing found for &ldquo;{{ query }}&rdquo;.
-  {%- elif pagination.total == 1 -%}
-  One result for &ldquo;{{ query }}&rdquo;.
   {%- else -%}
-  {{ pagination.total }} results for &ldquo;{{ query }}&rdquo;.
+  {{ pagination.total | plural({ one: "One result", other: "# results" }, "en") }} for &ldquo;{{ query }}&rdquo;.
   {%- endif -%}
 </p>
 {% if posts.length %}
 <div class="search-results">
   {% for post in posts %}
-  <article class="search-result h-entry">
-    {{ kicker.line(("Page" if post.type == "page" else post.postType) | capitalize, post.date) }}
+  <article class="search-result h-entry"{{ language.attr(post.lang) }}>
+    {{ kicker.line(("Page" if post.type == "page" else post.postType) | capitalize, post.date, lang=post.lang) }}
     {#- A post with no name of its own has none to claim, so its first words
         link it without being marked up as one. -#}
     <h2 class="feed-title{% if post.named %} p-name{% endif %}">

package/themes/default/partials/archive.njk

@@ -14,7 +14,9 @@
   rather than an index.
 #}
 {% if archiveMonths.length %}
-<section class="archive">
+{#- The month headings are in the site's locale, so a page in another
+    language hands the section back to the site's language. -#}
+<section class="archive"{% if lang and lang != (site.language | default("en")) %} lang="{{ site.language | default("en") }}"{% endif %}>
   {% for group in archiveMonths %}
   <h2>{{ group.month }}</h2>
   <ol class="list-none">

package/themes/default/partials/bio.njk

@@ -33,6 +33,11 @@
   Links box typed it — followed by whatever else that line carried, so this
   prints one attribute rather than one of its own beside one of theirs.
 
+  `bioRelMe` set to `false` keeps the card and drops its claims: the name is
+  linked `rel="author"` alone and `me` comes off every profile link. The
+  homepage of a site that is not a solo author blog sets it (TASK-180), because
+  that page speaks for nobody even when it shows the site author's card.
+
   The `p-note` and the `rel="me"` links are printed wherever the card is, which
   is what `bioProfile` used to ask for on an author archive alone. An entry
   left that switch unset because the page footer carried the site's identity
@@ -40,6 +45,7 @@
   wrote rather than one page further on.
 #}
 {% if bioAuthor %}
+{%- set bioClaims = bioRelMe !== false %}
 <div class="bio p-author h-card">
   {%- if bioAuthor.avatar %}
   <div class="bio-avatar">
@@ -51,7 +57,7 @@
     <p>
       {{ bioLead | default("Written by") }}
       {%- if bioAuthor.url %}
-      <a class="u-url p-name" rel="author me" href="{{ bioAuthor.url | url }}">{{ bioAuthor.name }}</a>
+      <a class="u-url p-name" rel="author{% if bioClaims %} me{% endif %}" href="{{ bioAuthor.url | url }}">{{ bioAuthor.name }}</a>
       {%- else %}
       <strong class="p-name">{{ bioAuthor.name }}</strong>
       {%- endif %}
@@ -66,7 +72,8 @@
     {%- if bioAuthor.links.length %}
     <ul class="hlist bio-links">
       {%- for link in bioAuthor.links %}
-      <li><a class="u-url" rel="{{ link.rel }}" href="{{ link.href }}">{{ link.label }}</a></li>
+      {%- set linkRel = link.rel if bioClaims else (link.rel.split(" ") | reject("equalto", "me") | join(" ")) %}
+      <li><a class="u-url"{% if linkRel %} rel="{{ linkRel }}"{% endif %} href="{{ link.href }}">{{ link.label }}</a></li>
       {%- endfor %}
     </ul>
     {%- endif %}

package/themes/default/partials/breadcrumbs.njk

@@ -0,0 +1,20 @@
+{#
+  The trail from the front page down to this one (TASK-150), printed from
+  `breadcrumbs`, the list `layouts/base.njk` builds and `partials/jsonld.njk`
+  prints as a BreadcrumbList. Every crumb but the last is a link; the last is
+  the page the reader is on, so it is text marked as the current page. The
+  separators are decoration and a screen reader skips them: the list already
+  says there are steps.
+#}
+{% if breadcrumbs.length %}
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol class="hlist">
+    {% for crumb in breadcrumbs %}
+    <li>
+      {%- if not loop.first %}<span class="breadcrumbs-sep" aria-hidden="true">›</span>{% endif -%}
+      {%- if loop.last %}<span aria-current="page">{{ crumb.name }}</span>{% else %}<a href="{{ crumb.url | url }}">{{ crumb.name }}</a>{% endif -%}
+    </li>
+    {% endfor %}
+  </ol>
+</nav>
+{% endif %}

package/themes/default/partials/conversation.njk

@@ -120,6 +120,9 @@
   And the thread. The title counts the whole of it rather than the top level,
   which is what `counts.replies` is. It does not quote the post's title: the
   post is the page it sits under, and a note has no title to quote (TASK-186).
+  The count goes through `plural` with "en" because the words are English: a
+  theme that translates them drops the "en" and gives the forms its language
+  has, so the site's locale picks between them.
 
   "Comments are closed." is printed under a post that has been answered and is
   no longer taking comments. That a post is closed is what the absence of
@@ -130,7 +133,7 @@
 {% if conversation.replies.length %}
 <div id="comments" class="comments-area">
   <h2 class="comments-title">
-    {%- if conversation.counts.replies == 1 %}One reply{% else %}{{ conversation.counts.replies }} replies{% endif -%}
+    {{- conversation.counts.replies | plural({ one: "One reply", other: "# replies" }, "en") -}}
   </h2>
 
   <ol class="comment-list">

package/themes/default/partials/jsonld.njk

@@ -42,9 +42,6 @@
 {% for link in siteAuthor.links %}{% set _ = sameAs.push(link.href) %}{% endfor %}
 {% if personUrl %}{% set _ = sameAs.push(personUrl) %}{% endif %}
 {% set address = { "@type": "PostalAddress", "addressLocality": siteAuthor.location } if siteAuthor.location else "" %}
-{#- An author archive is the only page that is about a person: a listing whose
-    `author` is whose page this is. -#}
-{% set isProfilePage = pagination and author.url and url and (author.url in url) %}
 {% set entryType = "BlogPosting" if type == "post" else "Article" %}
 {% set nodes = [] %}
 {% set website %}
@@ -67,6 +64,9 @@
         "query-input": "required name=search_term_string"
       }) }}
       {{- member("publisher", person) }}
+      {#- What the site is about, on the homepage of a solo author blog
+          (TASK-180): the site's author, and nobody on any other site. #}
+      {{- member("about", { "@id": (soloAuthor.url | absoluteUrl) + "#person" } if atRoot and soloAuthor.url else "") }}
     }{% endset %}
 {% set _ = nodes.push(website) %}
 {% if personId %}
@@ -84,7 +84,7 @@
     }{% endset %}
 {% set _ = nodes.push(profile) %}
 {% endif %}
-{% if isProfilePage %}
+{% if isAuthorArchive %}
 {% set profilePage %}
     {
       "@type": "ProfilePage"
@@ -110,6 +110,21 @@
     }{% endset %}
 {% set _ = nodes.push(entry) %}
 {% endif %}
+{#- Where the page sits, from the trail `layouts/base.njk` builds and the
+    visible breadcrumb prints (TASK-150). -#}
+{% if breadcrumbs.length %}
+{% set trail = [] %}
+{% for crumb in breadcrumbs %}
+{% set _ = trail.push({ "@type": "ListItem", "position": loop.index, "name": crumb.name, "item": crumb.url | absoluteUrl }) %}
+{% endfor %}
+{% set breadcrumbList %}
+    {
+      "@type": "BreadcrumbList"
+      {{- member("@id", metaUrl + "#breadcrumb") }}
+      {{- member("itemListElement", trail) }}
+    }{% endset %}
+{% set _ = nodes.push(breadcrumbList) %}
+{% endif %}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",

package/themes/default/partials/kicker.njk

@@ -14,17 +14,19 @@
   an error page. `date` is the entry's `dt-published`, printed long. With
   `href` the date is the entry's `u-url`, which is how a feed links an entry
   that has no title to link; an entry with no date links `label` instead.
-  `categories` are printed as `p-category` links.
+  `categories` are printed as `p-category` links. `lang` is the entry's own
+  language when it names one, so its date is written in that language rather
+  than the site's (TASK-189); a listing passes `lang=post.lang`.
 #}
-{% macro line(kind, date=false, href=false, categories=[], label="") %}
+{% macro line(kind, date=false, href=false, categories=[], label="", lang=false) %}
 <p class="kicker">
   <span class="kicker-kind">{{ kind }}</span>
   {%- if href %}
   <span class="kicker-dot" aria-hidden="true">·</span>
-  <a href="{{ href | url }}" class="u-url">{% if date %}<time class="feed-date dt-published" datetime="{{ date | date("iso") }}">{{ date | date }}</time>{% else %}{{ label }}{% endif %}</a>
+  <a href="{{ href | url }}" class="u-url">{% if date %}<time class="feed-date dt-published" datetime="{{ date | date("iso") }}">{{ date | date("readable", none, lang) }}</time>{% else %}{{ label }}{% endif %}</a>
   {%- elif date %}
   <span class="kicker-dot" aria-hidden="true">·</span>
-  <time class="feed-date dt-published" datetime="{{ date | date("iso") }}">{{ date | date }}</time>
+  <time class="feed-date dt-published" datetime="{{ date | date("iso") }}">{{ date | date("readable", none, lang) }}</time>
   {%- endif %}
   {%- for category in categories %}
   <span class="kicker-dot" aria-hidden="true">·</span>

package/themes/default/partials/lang.njk

@@ -0,0 +1,7 @@
+{#- The `lang` attribute of an article written in a language other than the
+    site's (TASK-154), with its leading space, and nothing for one in the
+    site's own: the `<html lang>` already names that. Imported with context,
+    since the site's language is what it compares against. -#}
+{% macro attr(tag) -%}
+{%- if tag and tag != (site.language | default("en")) %} lang="{{ tag }}"{% endif -%}
+{%- endmacro %}

package/themes/default/partials/post-list.njk

@@ -18,6 +18,7 @@
   never skips a level.
 #}
 {% import "partials/kicker.njk" as kicker with context %}
+{% import "partials/lang.njk" as language with context %}
 {% set feedTitleTag = "h" + (feedHeading | default(2)) %}
 {% if posts.length %}
 <div class="feed h-feed">
@@ -25,16 +26,17 @@
   {% if not loop.first %}
   <hr class="feed-separator">
   {% endif %}
-  <article class="feed-item h-entry">
+  <article class="feed-item h-entry"{{ language.attr(post.lang) }}>
     {% if post.named %}
-    {{ kicker.line(post.postType | capitalize, post.date, false, post.categories) }}
+    {{ kicker.line(post.postType | capitalize, post.date, false, post.categories, lang=post.lang) }}
     {% else %}
-    {{ kicker.line(post.postType | capitalize, post.date, post.url, [], post.label) }}
+    {{ kicker.line(post.postType | capitalize, post.date, post.url, [], post.label, lang=post.lang) }}
     {% endif %}
     {#- What a reply answers, from the same partial an entry cites it with. -#}
     {% if post.inReplyTo %}
     {% set inReplyTo = post.inReplyTo %}
     {% set replyContext = post.replyContext %}
+    {% set lang = post.lang %}
     {% include "partials/reply-context.njk" %}
     {% endif %}
     {% if not post.named %}

package/themes/default/partials/reply-context.njk

@@ -12,7 +12,9 @@
   or synced: its name, a short excerpt, its author and its date, each only when
   it said so. It is somebody else's words, so every piece is printed through
   autoescaping and none of it with `safe`. With a name, the name is the link;
-  with only an author, "a post" is; with neither, the bare URL.
+  with only an author, "a post" is; with neither, the bare URL. Its date is
+  written in `lang`, the language of the entry it sits in (TASK-189), so a
+  listing sets `lang` from each entry as it sets `replyContext`.
 #}
 {% if inReplyTo %}
 <div class="reply-context cite u-in-reply-to h-cite">
@@ -26,7 +28,7 @@
       {%- else %}<span class="p-name">{{ replyContext.author.name }}</span>{% endif -%}
     </span>
     {%- endif %}
-    {%- if replyContext.published %}, <time class="dt-published" datetime="{{ replyContext.published | date("iso") }}">{{ replyContext.published | date }}</time>
+    {%- if replyContext.published %}, <time class="dt-published" datetime="{{ replyContext.published | date("iso") }}">{{ replyContext.published | date("readable", none, lang) }}</time>
     {%- endif -%}
   </p>
   {% if replyContext.text %}

package/themes/default/src/style.css

@@ -323,6 +323,20 @@
     @apply font-semibold text-accent;
   }
 
+  /* The breadcrumb: where the page sits, on one quiet line above it. The
+     crumbs are links like the kicker's; the last is the page itself. */
+  .breadcrumbs ol {
+    @apply mb-6 gap-x-2 font-sans text-sm text-muted;
+  }
+
+  .breadcrumbs a {
+    @apply target quiet-link text-muted;
+  }
+
+  .breadcrumbs-sep {
+    @apply me-2;
+  }
+
   /* Titles: what heads a listing, an archive, search and an error page. */
   .page-title {
     @apply mt-1 mb-8 text-4xl leading-[1.08] sm:text-[2.75rem];

package/themes/default/static/style.css

@@ -687,6 +687,59 @@
     color: var(--color-primary);
   }
 
+  .breadcrumbs ol {
+    margin-bottom: calc(var(--spacing) * 6);
+    column-gap: calc(var(--spacing) * 2);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+  }
+
+  .breadcrumbs a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .breadcrumbs a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .breadcrumbs a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    .breadcrumbs a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .breadcrumbs a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .breadcrumbs a {
+    color: var(--color-muted);
+  }
+
+  .breadcrumbs-sep {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+
   .page-title {
     margin-top: var(--spacing);
     margin-bottom: calc(var(--spacing) * 8);

package/themes/default/theme.json

@@ -2,6 +2,8 @@
   "name": "Default",
   "kind": "site",
   "description": "The theme that ships with Geekity: Nunjucks and one stylesheet compiled from Tailwind, in the Paper design, and the layer every other theme is laid over.",
+  "colorScheme": "light dark",
+  "themeColor": { "light": "#faf7f2", "dark": "#171412" },
   "areas": [
     { "name": "primary", "label": "Site menu" },
     { "name": "footer", "label": "Footer links" }