@geekity/cms 0.14.0 → 0.16.0

package/themes/default/README.md

@@ -25,6 +25,7 @@ themes/default/
     tags.njk          macros for tag and category links
     kicker.njk        the line above an entry naming its kind and date
     reply-context.njk the citation of what a reply answers
+    citations.njk     the citation of what a like, repost or bookmark cites
     bio.njk           who an entry is by, as an h-card
     menu.njk          one named menu, as a nav of links
     feeds.njk         macros for the feed links in <head>
@@ -207,7 +208,8 @@ it sits beside the link home. See [Navigation](#navigation).
 **The footer** prints the copyright with the current year and the site
 author's display name, `soloAuthor.name`, or the site title on a site with
 several authors,
-`Published with Geekity`, and then `menus.footer` — the `footer` area this
+then the page's license, when it has one, as `<a rel="license">` with its name,
+then `Published with Geekity`, and then `menus.footer` — the `footer` area this
 theme declares, and the whole of what the footer links. A site that wants its
 feed there types an `RSS | /feed/` line into it, the way the starter site does.
 Nothing in the footer is read off an account: it used to hold one `rel="me"`
@@ -216,7 +218,9 @@ presented as the site's. An empty or missing footer menu prints no list at all,
 and the copyright line stands on its own. The year is
 `{{ "now" | date("year") }}` — `now` is the one word the `date` filter reads
 rather than parses — so it is the year at the moment the page is rendered, in
-the site's own timezone.
+the site's own timezone. The license is `license`: a post's own from its
+`license` front matter, else the site's from Settings > General, and nothing
+on a site with none.
 
 **The breadcrumb** opens `<main>` on a page with a place in the site's
 hierarchy (TASK-150): a post filed under a category, and a category, tag or
@@ -230,8 +234,8 @@ two cannot disagree. Every other page has an empty trail and prints nothing. A
 site that wants no visible breadcrumb empties the `breadcrumbs` block, and the
 `BreadcrumbList` stays in the graph.
 
-Webrings, badges, a licence notice and anything else that is markup rather than
-a link are deliberately not in the package. They go in a site theme's `footer`
+Webrings, badges and anything else that is markup rather than a link are
+deliberately not in the package. They go in a site theme's `footer`
 block:
 
 ```njk
@@ -331,8 +335,8 @@ is a microformats2 `h-entry`. An article, and a page:
   <section class="e-content">
     <p>The rendered body.</p>
     <p class="entry-meta">
-      <a class="u-category small" href="https://news.indieweb.org/en"
-        >#indienews</a
+      <a class="u-syndication small" href="https://news.indieweb.org/en"
+        >IndieNews</a
       >
       <a href="/2026/09/hello/" class="u-url"
         ><time class="small dt-published" datetime="2026-09-02T09:00:00.000Z"
@@ -343,6 +347,13 @@ is a microformats2 `h-entry`. An article, and a page:
       <time class="small dt-updated" datetime="2026-09-05T09:00:00.000Z"
         >Updated 5 September 2026</time
       >
+      <span aria-hidden="true">·</span>
+      <span class="small"
+        >Also on
+        <a class="u-syndication" href="https://news.indieweb.org/en/…"
+          >news.indieweb.org</a
+        ></span
+      >
     </p>
   </section>
   <p class="post-categories">…tags…</p>
@@ -366,10 +377,11 @@ permalink are part of the words, so a reader, or a fediverse peer reading the
 `e-content`, takes them with the post. The permalink wraps the `dt-published`
 time as a `u-url`, and a `dt-updated` follows it after a middle dot only when
 the update happened on a different day in the site's own timezone; a typo fixed
-an hour later is not news. A post tagged `indienews` opens the line with a
-`u-category` link to <https://news.indieweb.org/en>, which is how IndieNews is
-told the post is for it; a page never prints one, and its line is a
-`p.page-meta` rather than a `p.entry-meta`.
+an hour later is not news. The line opens with a `u-syndication` link to each
+syndication target the post selects (`syndicateTo`, TASK-155), which is what
+IndieNews and Bridgy Publish look for on the page, and ends with the post's
+copies elsewhere (`syndication`) after **Also on**. A page never prints either,
+and its line is a `p.page-meta` rather than a `p.entry-meta`.
 
 **Every post's page has one `h1`.** A post with a name of its own is headed by
 it, as above. A note, or a reply without a title, opens on its words instead,
@@ -382,7 +394,7 @@ who wrote it and when, and then the kicker:
 <p class="kicker"><span class="kicker-kind">Note</span></p>
 ```
 
-It says `Reply` for a reply and leaves out the name or the date the post does
+It says `Reply`, `Like`, `Repost` or `Bookmark` for those and leaves out the name or the date the post does
 not have. It is not a `p-name`: a parser that found one would take the post
 for an article. The headings under it step down one level at a time: the
 conversation and the comment form are `h2`, and a refused form's error summary
@@ -395,17 +407,70 @@ far as they are known, and its excerpt as a `blockquote.cite-quote.p-content`.
 An untitled reply prints it under the kicker; a titled reply prints it above
 its header. The same partial cites a reply in a feed.
 
+**A like, a repost or a bookmark cites what it cites** (TASK-169) with
+`partials/citations.njk`, beside the reply context and drawn the same way: one
+`div.reply-context.cite.h-cite` per entry of `citations`, classed
+`u-repost-of`, `u-like-of` or `u-bookmark-of`, whose `p.cite-line` says
+Reposted, Liked or Bookmarked and links the target as its `u-url`. Its kicker
+and its hidden `h1` say Repost, Like or Bookmark. A listing cites each entry's
+from the same partial.
+
 The tags are printed under the words and inside the article, so that each link
 is a `p-category` of this entry, as one `p.post-categories` from
 `partials/tags.njk`. The stylesheet draws the `#` in front of each, so the
 category a parser reads is the tag and not the hash.
 
+**A post with a recording plays it** (TASK-213), from
+`partials/recording.njk`, between the header and the `e-content`. The main file
+is the browser's own player, `<audio controls>` or `<video controls>` as
+`enclosure.player` says, with `preload="metadata"` so a reader who never presses
+play downloads nothing, and a download link inside it for a browser that plays
+neither. The `<source>` carries `u-audio` or `u-video`, so a microformats parser
+finds the file on the entry. A video whose transcript is WebVTT also gets it as
+a `<track kind="captions">`. Under the player a `figcaption` links the
+transcript, as Captions for VTT or SRT and Transcript otherwise, and lists the
+other versions by their title, else their media type. A post without a
+recording, or whose front matter is missing what a player needs, prints none of
+it.
+
+**A post with photos shows them** (TASK-166), from `partials/photos.njk`, after
+the recording and before the `e-content`, each in a `figure.post-photo`. Each is
+the context's `photo.html`: an `<img class="u-photo">` with its alt text, so a
+microformats parser finds every photo on the entry, and a `<picture>` with the
+upload's resizes when it has them. The alt text is the post's own, else the
+media library's. A listing prints them the same way above each entry, and the
+JSON-LD `BlogPosting` lists each as an `ImageObject` with its absolute `url`
+and its alt text as `caption`. The first photo is the post's share image when
+its front matter names no `image`.
+
+```html
+<figure class="post-recording">
+  <audio controls preload="metadata" aria-label="Recording of Episode twelve">
+    <source
+      class="u-audio"
+      src="/uploads/2026/10/episode-12.mp3"
+      type="audio/mpeg"
+    />
+    <a href="/uploads/2026/10/episode-12.mp3">Download the recording</a>
+  </audio>
+  <figcaption class="post-recording-links">
+    <p><a href="/uploads/2026/10/episode-12.vtt">Captions</a></p>
+    <p id="post-recording-versions">Other versions</p>
+    <ul aria-labelledby="post-recording-versions">
+      <li>
+        <a href="/uploads/2026/10/episode-12.mp4" type="video/mp4">Video</a>
+      </li>
+    </ul>
+  </figcaption>
+</figure>
+```
+
 After the entry a post prints `nav.blog-post-nav`: the `previous` and `next`
 posts as two cards, `rel="prev"` and `rel="next"`, each opening on a
 `span.blog-post-nav-label`, and nothing at all at the ends of the archive; then
 the conversation and the comment form. A page prints the contact form when its
-front matter asked for one. A page has no neighbours, no tags and no IndieNews
-link, because none of those are things a page has.
+front matter asked for one. A page has no neighbours, no tags and no
+syndication links, because none of those are things a page has.
 
 ### The bio
 
@@ -709,17 +774,28 @@ included. `og:url` is the canonical URL. An article also carries
 publish date), `article:author` (the author's profile URL here, else their
 name) and one `article:tag` per tag.
 
-**The picture** is the `image` in the entry's front matter, else `site.avatar`,
-on the context as `shareImage`. A site with neither prints no `og:image` and no
-`twitter:image` rather than an empty one. The picture always carries
-`og:image:alt` and `twitter:image:alt`. For the entry's own picture, the alt
-text is its `imageAlt` front matter, else what the media library says about the
-upload, else the entry's title. For the avatar, it is the media library's text,
-else the site's author. `og:image:width` and `og:image:height` are printed when
-the image's variants have been derived, because the size is read from their
-sidecar rather than from the file. `twitter:card` is `summary_large_image` for a
-picture at least 1200 pixels wide and wider than it is tall. Everything else,
-the avatar included, is `summary`, the small picture beside the words.
+**The picture** is the first of these that the page has, on the context as
+`shareImage`:
+
+1. The `image` in the entry's front matter.
+2. `site.avatar`, which only a hand edit of `site.json` sets.
+3. The profile photo of the person the page is by: the writer of a post or page
+   that names an author, the user of an author archive, and the site's author
+   on a solo-author site's homepage and other pages about nobody in particular.
+4. The site icon, from `icon` in `site.json`.
+
+A page with none of these prints no `og:image` and no `twitter:image` rather
+than an empty one. The picture always carries `og:image:alt` and
+`twitter:image:alt`. The alt text is what the media library says about the
+upload, else words for what it shows. For the entry's own picture, its
+`imageAlt` front matter comes first, and the entry's title last. For the
+avatar, the last resort is the site's author; for a photo, that person's
+display name; for the icon, the site's title. `og:image:width` and
+`og:image:height` are printed when the image's variants have been derived,
+because the size is read from their sidecar rather than from the file.
+`twitter:card` is `summary_large_image` for a picture at least 1200 pixels wide
+and wider than it is tall. Everything else, a square photo included, is
+`summary`, the small picture beside the words.
 
 **The icons** come from the site's `icon` setting in `site.json`, else
 `site.avatar`, through the derived images (decision-10). `icon` exists for a
@@ -778,7 +854,7 @@ IndieWeb. The graph holds:
   `/search/?q={search_term_string}`. On a site whose author is a user, its
   `publisher` and `about` both point at that user's Person, on every page. On
   a site with several authors its `publisher` is the Organization below and it
-  has no `about`.
+  has no `about`. With a site license, `license` is its URL.
 - `Organization`, on a site with several authors only: the site itself, named
   for its title, at `{baseUrl}/#organization`. It publishes the `WebSite` and
   every entry.
@@ -795,8 +871,9 @@ IndieWeb. The graph holds:
   `author`, and the site's `publisher`: the site author's Person, or the
   Organization. A post with no title is headed by the words its `<title>`
   names it by, its `label`, cut on a word boundary to at most 110 characters.
-  A post with no picture of its own, on a site with no avatar, takes its
-  author's photo, else the site's `icon` upload.
+  Its `image` is the picture the Open Graph tags print, so the two always
+  agree (see [The head](#the-head)). Its `license` is the page's license URL,
+  the front matter's over the site's, and absent with none.
 - `BreadcrumbList` wherever the page prints a breadcrumb (see
   [The page shell](#the-page-shell)): one `ListItem` per crumb with its
   `position`, `name` and absolute URL as `item`.
@@ -1055,16 +1132,18 @@ an Eleventy build needs few edits. It is part of the package's semver contract.
 
 Every template gets:
 
-| Key          | What it holds                                                                                                                                                                                           |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `site`       | `content/_data/site.json`, if the site has one, over the defaults `title` and `url`. Any key in the file is readable, so `site.tagline`, `site.author` and anything else a site adds are all available. |
-| `menus`      | Every menu the site stores, by name, marked for this page: `menus.primary`, `menus.footer`, and any other name. See [Navigation](#navigation).                                                          |
-| `siteAuthor` | Who the page is by, as a profile. **Absent** when nobody matches. See [Bylines and author archives](#bylines-and-author-archives).                                                                      |
-| `soloAuthor` | The site author's profile, on every page of a site whose Site author setting names a user. **Absent** on a site with several authors. See [The bio](#the-bio).                                          |
-| `icons`      | The site's icons, as `{ rel, sizes, type, href }`. Empty until the site has an icon or an avatar to derive them from. See [The head](#the-head).                                                        |
-| `theme`      | The colours the theme declares, as `{ colorScheme, themeColor: { light, dark } }`, each absent when no theme declares it. See [The manifest](#the-manifest).                                            |
-| `shareImage` | The picture a shared link shows, as `{ url, alt, size: { width, height }, card }`. `size` is absent when it is not known. **Absent** when there is no picture. See [The head](#the-head).               |
-| `llmsTxt`    | The path of `/llms.txt`, while the site serves it. **Absent** when the site has turned it off. The default theme links it from the front page only.                                                     |
+| Key           | What it holds                                                                                                                                                                                           |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `site`        | `content/_data/site.json`, if the site has one, over the defaults `title` and `url`. Any key in the file is readable, so `site.tagline`, `site.author` and anything else a site adds are all available. |
+| `menus`       | Every menu the site stores, by name, marked for this page: `menus.primary`, `menus.footer`, and any other name. See [Navigation](#navigation).                                                          |
+| `siteAuthor`  | Who the page is by, as a profile. **Absent** when nobody matches. See [Bylines and author archives](#bylines-and-author-archives).                                                                      |
+| `soloAuthor`  | The site author's profile, on every page of a site whose Site author setting names a user. **Absent** on a site with several authors. See [The bio](#the-bio).                                          |
+| `icons`       | The site's icons, as `{ rel, sizes, type, href }`. Empty until the site has an icon or an avatar to derive them from. See [The head](#the-head).                                                        |
+| `theme`       | The colours the theme declares, as `{ colorScheme, themeColor: { light, dark } }`, each absent when no theme declares it. See [The manifest](#the-manifest).                                            |
+| `shareImage`  | The picture a shared link shows, as `{ url, alt, size: { width, height }, card }`. `size` is absent when it is not known. **Absent** when there is no picture. See [The head](#the-head).               |
+| `llmsTxt`     | The path of `/llms.txt`, while the site serves it. **Absent** when the site has turned it off. The default theme links it from the front page only.                                                     |
+| `license`     | The page's license as `{ name, url }`: the page's `license` front matter, else the site's. **Undefined** with none. It replaces the raw front matter value on the context.                              |
+| `siteLicense` | The site's own license as `{ name, url }`, whatever the page says. **Undefined** with none.                                                                                                             |
 
 A document — one post, one page, or one entry of a listing — adds:
 
@@ -1085,6 +1164,11 @@ A document — one post, one page, or one entry of a listing — adds:
 | `type`                                      | `post` or `page`.                                                                                                 |
 | `permalink`, `slug`, `draft`, `description` | Straight from the front matter.                                                                                   |
 | `lang`                                      | The `lang` front matter as a canonical tag, such as `fr-CA`. Absent when it names none or no tag.                 |
+| `enclosure`                                 | The post's recording, parsed, with `player` (`audio` or `video`) and `transcript.captions`. Absent with none.     |
+| `photos`                                    | The post's photos, each `{ url, alt, html }`; `html` is the `img.u-photo`, responsive. Empty with none.           |
+| `citations`                                 | What it reposts, likes or bookmarks, each `{ property, url }` with `property` the mf2 name. Empty with none.      |
+| `syndicateTo`                               | On a post's page, the syndication targets it selects, each `{ id, name, url }`. Empty with none.                  |
+| `syndication`                               | Its copies elsewhere, each `{ url, label }`: front matter `syndication`, and on its page the copies targets made. |
 | `author`                                    | Who wrote it, as a profile rather than a string. See [Bylines and author archives](#bylines-and-author-archives). |
 | `activityStreams`                           | The post's ActivityPub object id, absolute. Only on a rendered published post.                                    |
 | `previous`                                  | The published post before this one by date, as `{ title, url }`. Absent on the oldest post.                       |

package/themes/default/layouts/base.njk

@@ -40,9 +40,8 @@
 
     `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
-    `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
+    `shareImage.url`; with none, 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
@@ -281,7 +280,7 @@
 
       {% block footer %}
       <footer>
-        <p>&copy; {{ "now" | date("year") }}, {{ soloAuthor.name or site.title }} &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</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/post.njk

@@ -39,6 +39,7 @@
   {#- A reply cites the post it answers, whose URL is also the link its
       webmention points a receiver at. -#}
   {% include "partials/reply-context.njk" %}
+  {% include "partials/citations.njk" %}
   <header class="post-header">
     {{ kicker.line(postType | capitalize, false, false, categories) }}
     <h1 class="p-name">{{ title }}</h1>
@@ -48,22 +49,33 @@
   </header>
   {% else %}
   <h1 class="screen-reader-text">
-    {{- "Reply" if postType == "reply" else "Note" }}
+    {{- postType | capitalize if postType in ["reply", "like", "repost", "bookmark"] else "Note" }}
     {%- if bioAuthor.name %} by {{ bioAuthor.name }}{% endif %}
     {%- if date %}, {{ date | date("readable", none, lang) }}{% endif -%}
   </h1>
   {{ kicker.line(postType | capitalize, false, false, categories) }}
   {% include "partials/reply-context.njk" %}
+  {% include "partials/citations.njk" %}
+  {% endif %}
+
+  {% if enclosure %}
+  {% include "partials/recording.njk" %}
+  {% endif %}
+
+  {% if photos.length %}
+  {% include "partials/photos.njk" %}
   {% endif %}
 
   <section class="e-content">
     {{ content | safe }}
     <p class="entry-meta">
-      {#- A post tagged `indienews` opens the line with the link that submits
-          it there, which is how IndieNews is told the post is for it. -#}
-      {%- if "indienews" in tags %}
-      <a class="u-category small" href="https://news.indieweb.org/en">#indienews</a>
-      {%- endif %}
+      {#- The line opens with a link to each syndication target the post
+          selects (TASK-155). It is inside the h-entry and marked
+          `u-syndication`, the markup IndieNews documents, and a target that
+          is sent a webmention checks the page for it. -#}
+      {%- for target in syndicateTo %}
+      <a class="u-syndication small" href="{{ target.url }}">{{ target.name }}</a>
+      {%- endfor %}
       {%- if date %}
       <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 %}
@@ -71,6 +83,11 @@
           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("readable", none, lang) }}</time>
+      {%- endif %}
+      {#- The post's copies elsewhere: those its targets answered with and
+          those its front matter lists by hand. -#}
+      {%- if syndication.length %}
+      {% if date or updated %} <span aria-hidden="true">·</span> {% endif %}<span class="small">Also on {% for copy in syndication %}<a class="u-syndication" href="{{ copy.url }}">{{ copy.label }}</a>{% if not loop.last %}, {% endif %}{% endfor %}</span>
       {%- endif -%}
     </p>
   </section>

package/themes/default/partials/citations.njk

@@ -0,0 +1,17 @@
+{#
+  What a post reposts, likes or bookmarks (TASK-169), cited the way a reply
+  cites what it answers: each one an embedded `h-cite` under its own mf2
+  property, `u-repost-of`, `u-like-of` or `u-bookmark-of`, that always carries
+  the target's URL, so a parser reads what the post cites and the page its
+  webmention names links to it.
+
+  Drawn as the same citation block as `reply-context.njk` (doc-9). An entry
+  includes it with `citations` on the context, a list of `{ property, url }`;
+  a feed sets it from the entry it is printing.
+#}
+{% set citationVerbs = { "repost-of": "Reposted", "like-of": "Liked", "bookmark-of": "Bookmarked" } %}
+{% for citation in citations %}
+<div class="reply-context cite u-{{ citation.property }} h-cite">
+  <p class="cite-line small">{{ citationVerbs[citation.property] }} <a class="u-url" href="{{ citation.url }}">{{ citation.url }}</a></p>
+</div>
+{% endfor %}

package/themes/default/partials/jsonld.njk

@@ -54,12 +54,19 @@
 {% set entryType = "BlogPosting" if type == "post" else "Article" %}
 {#- A post with no title is headed by the words its <title> names it by,
     within the 110 characters Google reads, cut where a word ends (TASK-201).
-    Its picture is its own, else the site's avatar, else its author's photo,
-    else the site icon: the original upload rather than a derived icon, which
-    at 180 pixels is too small for an article image. A page keeps its title
-    and its own picture. -#}
+    A page keeps its title. -#}
 {% set headline = title or (label | truncate(109, false, "…") if type == "post" else "") %}
-{% set entryImage = metaImage or (siteAuthor.avatar or site.icon if type == "post" else "") %}
+{#- A photo post's image is its photos, each an ImageObject captioned with
+    its alt text, in order (TASK-166); anything else's is the share image. -#}
+{% set entryImage = metaImage | absoluteUrl if metaImage else "" %}
+{% if photos and photos.length %}
+{% set entryImage = [] %}
+{% for photo in photos %}
+{% set imageObject = { "@type": "ImageObject", "url": photo.url | absoluteUrl } %}
+{% if photo.alt %}{% set imageObject = { "@type": "ImageObject", "url": photo.url | absoluteUrl, "caption": photo.alt } %}{% endif %}
+{% set _ = entryImage.push(imageObject) %}
+{% endfor %}
+{% endif %}
 {% set nodes = [] %}
 {% set website %}
     {
@@ -82,6 +89,7 @@
       }) }}
       {{- member("publisher", publisher) }}
       {{- member("about", { "@id": soloId } if soloId else "") }}
+      {{- member("license", siteLicense.url if siteLicense else "") }}
     }{% endset %}
 {% set _ = nodes.push(website) %}
 {% if not soloId %}
@@ -129,9 +137,10 @@
       {{- member("datePublished", date | date("iso") if date else "") }}
       {{- member("dateModified", (updated or date) | date("iso") if (updated or date) else "") }}
       {{- member("description", metaDescription) }}
-      {{- member("image", entryImage | absoluteUrl if entryImage else "") }}
+      {{- member("image", entryImage) }}
       {{- member("author", person) }}
       {{- member("publisher", publisher) }}
+      {{- member("license", license.url if license else "") }}
     }{% endset %}
 {% set _ = nodes.push(entry) %}
 {% endif %}

package/themes/default/partials/photos.njk

@@ -0,0 +1,10 @@
+{#
+  A post's photos (TASK-166), each `photo.html`: an `img.u-photo` with its alt
+  text, so a microformats parser finds every photo on the h-entry, served as a
+  responsive picture when the upload has variants.
+#}
+<div class="post-photos">
+  {% for photo in photos %}
+  <figure class="post-photo">{{ photo.html | safe }}</figure>
+  {% endfor %}
+</div>

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

@@ -39,6 +39,13 @@
     {% set lang = post.lang %}
     {% include "partials/reply-context.njk" %}
     {% endif %}
+    {#- What it reposts, likes or bookmarks, from the partial an entry uses. -#}
+    {% set citations = post.citations %}
+    {% include "partials/citations.njk" %}
+    {% if post.photos.length %}
+    {% set photos = post.photos %}
+    {% include "partials/photos.njk" %}
+    {% endif %}
     {% if not post.named %}
     <div class="feed-excerpt e-content">{{ post.content | safe }}</div>
     {% else %}

package/themes/default/partials/recording.njk

@@ -0,0 +1,41 @@
+{#
+  Timed captions in WebVTT go on a video as a track as well as in the links,
+  since that is the one format a browser shows over the picture. The source
+  carries `u-audio` or `u-video`, so a microformats parser finds the file on
+  the entry.
+
+  The `preload="metadata"` asks for the length and the first frame and no
+  more: a reader who never presses play does not download the episode.
+#}
+{% set recordingLabel = ("Recording of " ~ title) if named else "Recording" %}
+<figure class="post-recording">
+  {% if enclosure.player == "video" %}
+  <video controls preload="metadata" aria-label="{{ recordingLabel }}">
+    <source class="u-video" src="{{ enclosure.url | url }}" type="{{ enclosure.type }}">
+    {% if enclosure.transcript and enclosure.transcript.type == "text/vtt" %}
+    <track kind="captions" src="{{ enclosure.transcript.url | url }}" srclang="{{ lang or (site.language | default("en")) }}" label="Captions" default>
+    {% endif %}
+    <a href="{{ enclosure.url | url }}">Download the video</a>
+  </video>
+  {% else %}
+  <audio controls preload="metadata" aria-label="{{ recordingLabel }}">
+    <source class="u-audio" src="{{ enclosure.url | url }}" type="{{ enclosure.type }}">
+    <a href="{{ enclosure.url | url }}">Download the recording</a>
+  </audio>
+  {% endif %}
+  {% if enclosure.alternates.length or enclosure.transcript %}
+  <figcaption class="post-recording-links">
+    {% if enclosure.transcript %}
+    <p><a href="{{ enclosure.transcript.url | url }}">{{ "Captions" if enclosure.transcript.captions else "Transcript" }}</a></p>
+    {% endif %}
+    {% if enclosure.alternates.length %}
+    <p id="post-recording-versions">Other versions</p>
+    <ul aria-labelledby="post-recording-versions">
+      {% for alternate in enclosure.alternates %}
+      <li><a href="{{ alternate.url | url }}" type="{{ alternate.type }}"{% if alternate.lang %} hreflang="{{ alternate.lang }}"{% endif %}>{{ alternate.title or alternate.type }}</a></li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </figcaption>
+  {% endif %}
+</figure>

package/themes/default/src/style.css

@@ -660,6 +660,31 @@
     @apply text-[1.08rem] leading-[1.65];
   }
 
+  .post-recording {
+    @apply my-8;
+  }
+
+  .post-recording :is(audio, video) {
+    @apply block w-full;
+  }
+
+  .post-recording-links {
+    @apply mt-3 font-sans text-sm text-muted;
+  }
+
+  .post-recording-links ul {
+    @apply mt-1 flex flex-wrap gap-x-4 gap-y-1;
+  }
+
+  /* A post's photos (TASK-166), one under another at the column's width. */
+  .post-photos {
+    @apply my-8 grid gap-4;
+  }
+
+  .post-photo img {
+    @apply block h-auto w-full;
+  }
+
   /* An untitled post is its words, set larger. It is the one entry whose
      heading is the hidden one TASK-144 gave it. */
   .blog-post > .screen-reader-text ~ .e-content {

package/themes/default/static/style.css

@@ -1190,6 +1190,43 @@
     line-height: 1.65;
   }
 
+  .post-recording {
+    margin-block: calc(var(--spacing) * 8);
+  }
+
+  .post-recording :is(audio, video) {
+    width: 100%;
+    display: block;
+  }
+
+  .post-recording-links {
+    margin-top: calc(var(--spacing) * 3);
+    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);
+  }
+
+  .post-recording-links ul {
+    margin-top: var(--spacing);
+    column-gap: calc(var(--spacing) * 4);
+    row-gap: var(--spacing);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .post-photos {
+    margin-block: calc(var(--spacing) * 8);
+    gap: calc(var(--spacing) * 4);
+    display: grid;
+  }
+
+  .post-photo img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
   .blog-post > .screen-reader-text ~ .e-content {
     --tw-leading: 1.55;
     font-size: 1.3rem;
@@ -2124,6 +2161,10 @@
     overflow: hidden;
   }
 
+  .capitalize {
+    text-transform: capitalize;
+  }
+
   .italic {
     font-style: italic;
   }