@geekity/cms 0.10.0 → 0.12.0

package/themes/default/layouts/post.njk

@@ -1,16 +1,22 @@
 {#
-  One post, as the source design's `content-essay.php` draws it (decision-16,
-  TASK-83): `article.blog-post.h-entry`, the title as its `p-name`, the body
-  and the Published line together in one `section.e-content`, then a rule and a
-  footer holding the bio. The neighbouring posts, the conversation and the
-  comment form follow the entry.
+  One post, in the Paper design (doc-9): `article.blog-post.h-entry` opening on
+  a kicker that names its kind (Article, Note, Reply) and the categories it is
+  filed under.
+
+  An article, and a reply with a title, has the only headline: the title as its
+  `p-name` and the author's `description` under it as the deck, a
+  `p-summary`. A post with no title opens on its words, set larger. A reply
+  cites what it answers above its words, or above its header when it has one.
+  Then the Published line, the tags, a rule and the bio. The neighbouring posts,
+  the conversation and the comment form follow the entry.
 
   The Published line is inside the `e-content` on purpose. It is what the
-  source theme does, and it is what makes a reader who copies the words out
+  source design does, and it is what makes a reader who copies the words out
   take the date and the permalink with them.
 #}
 {% extends "layouts/base.njk" %}
 {% import "partials/tags.njk" as taxonomy with context %}
+{% import "partials/kicker.njk" as kicker 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
@@ -24,16 +30,30 @@
 {% set entryUrl = page.url or url %}
 <article class="blog-post h-entry">
   {#- A post with no name of its own (a note, or a reply without a title) is
-      its words, so it opens on them rather than on an empty heading. -#}
+      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,
+      hidden from sight. It is no `p-name`: a parser would take that as a
+      title and read the note as an article. -#}
   {% if named %}
-  <header>
-    <h1 class="p-name">{{ title }}</h1>
-  </header>
-  {% endif %}
-
   {#- A reply cites the post it answers, whose URL is also the link its
       webmention points a receiver at. -#}
   {% include "partials/reply-context.njk" %}
+  <header class="post-header">
+    {{ kicker.line(postType | capitalize, false, false, categories) }}
+    <h1 class="p-name">{{ title }}</h1>
+    {% if description %}
+    <p class="post-deck p-summary">{{ description }}</p>
+    {% endif %}
+  </header>
+  {% else %}
+  <h1 class="screen-reader-text">
+    {{- "Reply" if postType == "reply" else "Note" }}
+    {%- if bioAuthor.name %} by {{ bioAuthor.name }}{% endif %}
+    {%- if date %}, {{ date | date }}{% endif -%}
+  </h1>
+  {{ kicker.line(postType | capitalize, false, false, categories) }}
+  {% include "partials/reply-context.njk" %}
+  {% endif %}
 
   <section class="e-content">
     {{ content | safe }}
@@ -49,16 +69,14 @@
       {#- 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 %}<br>{% 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 }}</time>
       {%- endif -%}
     </p>
   </section>
 
-  {# What it is filed under, inside the entry so that each link is a
-     `p-category` of it: the categories first, then the tags. #}
-  {{ taxonomy.categories(categories) }}
+  {# The tags, inside the entry so that each link is a `p-category` of it. The
+     categories are in the kicker. #}
   {{ taxonomy.list(tags) }}
-
   {#- The rule and the footer are the bio's own: a post nobody is credited with
       ends at its words rather than at an empty box. -#}
   {% if bioAuthor %}
@@ -69,17 +87,17 @@
   {% endif %}
 </article>
 
-{# The post either side of this one. Each is on the context only when there is
-   one, so the ends of the archive draw one arrow and a site of a single post
-   draws none. #}
+{# The post either side of this one, as two cards. Each is on the context only
+   when there is one, so the ends of the archive draw one card and a site of a
+   single post draws none. #}
 {% if previous or next %}
-<nav class="blog-post-nav">
+<nav class="blog-post-nav" aria-label="Neighbouring posts">
   <ul>
     {% if previous %}
-    <li><a rel="prev" href="{{ previous.url | url }}">&larr; {{ previous.title }}</a></li>
+    <li><a rel="prev" href="{{ previous.url | url }}"><span class="blog-post-nav-label">Previous</span> {{ previous.title }}</a></li>
     {% endif %}
     {% if next %}
-    <li><a rel="next" href="{{ next.url | url }}">{{ next.title }} &rarr;</a></li>
+    <li><a rel="next" href="{{ next.url | url }}"><span class="blog-post-nav-label">Next</span> {{ next.title }}</a></li>
     {% endif %}
   </ul>
 </nav>

package/themes/default/layouts/search.njk

@@ -20,6 +20,7 @@
     <meta name="robots" content="noindex">
 {% endblock %}
 
+{% import "partials/kicker.njk" as kicker with context %}
 {% block content %}
 <h1 class="page-title">Search</h1>
 {% include "partials/search-form.njk" %}
@@ -37,6 +38,7 @@
 <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) }}
     {#- 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 %}">
@@ -45,11 +47,6 @@
     {% if post.snippet %}
     <p class="search-snippet">{{ post.snippet | safe }}</p>
     {% endif %}
-    {% if post.date %}
-    <p class="feed-meta">
-      <time class="feed-date dt-published" datetime="{{ post.date | date("iso") }}">{{ post.date | date }}</time>
-    </p>
-    {% endif %}
   </article>
   {% endfor %}
 </div>

package/themes/default/layouts/tag.njk

@@ -9,8 +9,14 @@
 {{ feeds.feedLinks(tagRoot, site.title + ": " + tag) }}
 {% endblock %}
 
+{% import "partials/kicker.njk" as kicker with context %}
 {% block content %}
-<h1 class="page-title">Tagged &ldquo;{{ tag }}&rdquo;</h1>
+{# The archive's header: the kicker says what kind of archive, the heading
+   whose. #}
+<header class="archive-header">
+  {{ kicker.line("Tag") }}
+  <h1 class="page-title">{{ tag }}</h1>
+</header>
 {% include "partials/post-list.njk" %}
 {% include "partials/pagination.njk" %}
 {% endblock %}

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

@@ -24,13 +24,37 @@
 #}
 <section class="comment-respond" id="respond">
   <h2 class="comment-reply-title">Leave a comment</h2>
+  {#- A site that takes webmentions says so here, where somebody deciding how
+      to answer is looking. -#}
+  {% if webmention %}
+  <p class="comment-help">Or reply from your own site and send a <a href="https://indieweb.org/Webmention">webmention</a>.</p>
+  {% endif %}
 
   {% if commentNotice %}
   <p class="comment-notice" role="status">{{ commentNotice }}</p>
   {% endif %}
 
-  {% if commentForm.error %}
-  <p class="comment-error" role="alert">{{ commentForm.error }}</p>
+  {#
+    A refused submission leads with this: what went wrong, and a link to each
+    field to put right. It is an alert and takes focus on load, so a screen
+    reader hears it at once and a keyboard starts from it, with no script. A
+    field it links to is marked `aria-invalid` and names its message with
+    `aria-describedby`, so the message is read with the field.
+  #}
+  {% set problems = commentForm.problems %}
+  {% if commentForm.error or problems.name or problems.email or problems.url or problems.body %}
+  <div class="comment-error" role="alert" tabindex="-1" autofocus aria-labelledby="comment-error-heading">
+    <h3 id="comment-error-heading">{{ commentForm.error or 'Your comment was not posted. Fix the fields marked below.' }}</h3>
+    {% if problems.name or problems.email or problems.url or problems.body %}
+    <ul>
+      {% for key in ['name', 'email', 'url', 'body'] %}
+      {% if problems[key] %}
+      <li><a href="#comment-{{ key }}">{{ problems[key] }}</a></li>
+      {% endif %}
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </div>
   {% endif %}
 
   <form method="post" action="{{ commentForm.action }}">
@@ -81,36 +105,39 @@
       <input id="comment-website" name="{{ commentForm.fields.trap }}" type="text" tabindex="-1" autocomplete="off" value="" />
     </div>
 
+    {#- Name and email side by side on a wide screen. -#}
+    <div class="field-row">
     <p class="comment-field">
       <label for="comment-name">Name</label>
-      <input id="comment-name" name="{{ commentForm.fields.name }}" type="text" value="{{ commentForm.values.name }}" maxlength="{{ commentForm.nameLength }}" autocomplete="name" required />
-      {% if commentForm.problems.name %}
-      <span class="comment-field-error">{{ commentForm.problems.name }}</span>
+      <input id="comment-name" name="{{ commentForm.fields.name }}" type="text" value="{{ commentForm.values.name }}" maxlength="{{ commentForm.nameLength }}" autocomplete="name" required{% if problems.name %} aria-invalid="true" aria-describedby="comment-name-error"{% endif %} />
+      {% if problems.name %}
+      <span class="comment-field-error" id="comment-name-error">{{ problems.name }}</span>
       {% endif %}
     </p>
 
     <p class="comment-field">
       <label for="comment-email">Email <span class="comment-optional">(optional, never shown)</span></label>
-      <input id="comment-email" name="{{ commentForm.fields.email }}" type="email" value="{{ commentForm.values.email }}" autocomplete="email" />
-      {% if commentForm.problems.email %}
-      <span class="comment-field-error">{{ commentForm.problems.email }}</span>
+      <input id="comment-email" name="{{ commentForm.fields.email }}" type="email" value="{{ commentForm.values.email }}" autocomplete="email"{% if problems.email %} aria-invalid="true" aria-describedby="comment-email-error"{% endif %} />
+      {% if problems.email %}
+      <span class="comment-field-error" id="comment-email-error">{{ problems.email }}</span>
       {% endif %}
     </p>
+    </div>
 
     <p class="comment-field">
       <label for="comment-url">Your site <span class="comment-optional">(optional)</span></label>
-      <input id="comment-url" name="{{ commentForm.fields.url }}" type="text" inputmode="url" value="{{ commentForm.values.url }}" autocomplete="url" />
-      {% if commentForm.problems.url %}
-      <span class="comment-field-error">{{ commentForm.problems.url }}</span>
+      <input id="comment-url" name="{{ commentForm.fields.url }}" type="text" inputmode="url" value="{{ commentForm.values.url }}" autocomplete="url"{% if problems.url %} aria-invalid="true" aria-describedby="comment-url-error"{% endif %} />
+      {% if problems.url %}
+      <span class="comment-field-error" id="comment-url-error">{{ problems.url }}</span>
       {% endif %}
     </p>
     {% endif %}
 
     <p class="comment-field">
       <label for="comment-body">Comment</label>
-      <textarea id="comment-body" name="{{ commentForm.fields.body }}" rows="6" maxlength="{{ commentForm.bodyLength }}" required>{{ commentForm.values.body }}</textarea>
-      {% if commentForm.problems.body %}
-      <span class="comment-field-error">{{ commentForm.problems.body }}</span>
+      <textarea id="comment-body" name="{{ commentForm.fields.body }}" rows="6" maxlength="{{ commentForm.bodyLength }}" required{% if problems.body %} aria-invalid="true" aria-describedby="comment-body-error"{% endif %}>{{ commentForm.values.body }}</textarea>
+      {% if problems.body %}
+      <span class="comment-field-error" id="comment-body-error">{{ problems.body }}</span>
       {% endif %}
       <span class="comment-hint">Markdown works. Links are marked <code>nofollow ugc</code>; HTML is not.</span>
     </p>

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

@@ -29,8 +29,26 @@
   {% else %}
   <h2 class="contact-form-title">Send a message</h2>
 
-  {% if contactForm.error %}
-  <p class="contact-error" role="alert">{{ contactForm.error }}</p>
+  {#
+    A refused submission leads with this, as the comment form does: what went
+    wrong, and a link to each field to put right. It is an alert and takes
+    focus on load; a field it links to is marked `aria-invalid` and names its
+    message with `aria-describedby`.
+  #}
+  {% set problems = contactForm.problems %}
+  {% if contactForm.error or problems.name or problems.email or problems.subject or problems.message %}
+  <div class="contact-error" role="alert" tabindex="-1" autofocus aria-labelledby="contact-error-heading">
+    <h3 id="contact-error-heading">{{ contactForm.error or 'Your message was not sent. Fix the fields marked below.' }}</h3>
+    {% if problems.name or problems.email or problems.subject or problems.message %}
+    <ul>
+      {% for key in ['name', 'email', 'subject', 'message'] %}
+      {% if problems[key] %}
+      <li><a href="#contact-{{ key }}">{{ problems[key] }}</a></li>
+      {% endif %}
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </div>
   {% endif %}
 
   <form method="post" action="{{ contactForm.action }}">
@@ -47,36 +65,39 @@
       <input id="contact-website" name="{{ contactForm.fields.trap }}" type="text" tabindex="-1" autocomplete="off" value="" />
     </div>
 
+    {#- Name and email side by side on a wide screen. -#}
+    <div class="field-row">
     <p class="contact-field">
       <label for="contact-name">Name</label>
-      <input id="contact-name" name="{{ contactForm.fields.name }}" type="text" value="{{ contactForm.values.name }}" maxlength="{{ contactForm.nameLength }}" autocomplete="name" required />
-      {% if contactForm.problems.name %}
-      <span class="contact-field-error">{{ contactForm.problems.name }}</span>
+      <input id="contact-name" name="{{ contactForm.fields.name }}" type="text" value="{{ contactForm.values.name }}" maxlength="{{ contactForm.nameLength }}" autocomplete="name" required{% if problems.name %} aria-invalid="true" aria-describedby="contact-name-error"{% endif %} />
+      {% if problems.name %}
+      <span class="contact-field-error" id="contact-name-error">{{ problems.name }}</span>
       {% endif %}
     </p>
 
     <p class="contact-field">
       <label for="contact-email">Email</label>
-      <input id="contact-email" name="{{ contactForm.fields.email }}" type="email" value="{{ contactForm.values.email }}" autocomplete="email" required />
-      {% if contactForm.problems.email %}
-      <span class="contact-field-error">{{ contactForm.problems.email }}</span>
+      <input id="contact-email" name="{{ contactForm.fields.email }}" type="email" value="{{ contactForm.values.email }}" autocomplete="email" required{% if problems.email %} aria-invalid="true" aria-describedby="contact-email-error"{% endif %} />
+      {% if problems.email %}
+      <span class="contact-field-error" id="contact-email-error">{{ problems.email }}</span>
       {% endif %}
       <span class="contact-hint">So there is somewhere to reply to. It is never shown on the site.</span>
     </p>
+    </div>
 
     <p class="contact-field">
       <label for="contact-subject">Subject <span class="contact-optional">(optional)</span></label>
-      <input id="contact-subject" name="{{ contactForm.fields.subject }}" type="text" value="{{ contactForm.values.subject }}" maxlength="{{ contactForm.subjectLength }}" />
-      {% if contactForm.problems.subject %}
-      <span class="contact-field-error">{{ contactForm.problems.subject }}</span>
+      <input id="contact-subject" name="{{ contactForm.fields.subject }}" type="text" value="{{ contactForm.values.subject }}" maxlength="{{ contactForm.subjectLength }}"{% if problems.subject %} aria-invalid="true" aria-describedby="contact-subject-error"{% endif %} />
+      {% if problems.subject %}
+      <span class="contact-field-error" id="contact-subject-error">{{ problems.subject }}</span>
       {% endif %}
     </p>
 
     <p class="contact-field">
       <label for="contact-message">Message</label>
-      <textarea id="contact-message" name="{{ contactForm.fields.message }}" rows="8" maxlength="{{ contactForm.messageLength }}" required>{{ contactForm.values.message }}</textarea>
-      {% if contactForm.problems.message %}
-      <span class="contact-field-error">{{ contactForm.problems.message }}</span>
+      <textarea id="contact-message" name="{{ contactForm.fields.message }}" rows="8" maxlength="{{ contactForm.messageLength }}" required{% if problems.message %} aria-invalid="true" aria-describedby="contact-message-error"{% endif %}>{{ contactForm.values.message }}</textarea>
+      {% if problems.message %}
+      <span class="contact-field-error" id="contact-message-error">{{ problems.message }}</span>
       {% endif %}
     </p>
 

package/themes/default/partials/conversation.njk

@@ -42,7 +42,7 @@
 {% macro group(items, label, kind, icon, source=false) %}
 {% if items.length %}
 <div class="reaction-group {{ kind }}">
-  <h2 class="reaction-title">{{ label }} ({{ items.length }})</h2>
+  <h2 class="reaction-title">{{ label }} <span class="reaction-count">{{ items.length }}</span></h2>
   <div class="facepile">
     {%- for item in items %}{{ face(item, icon, (item.url or item.author.url) if source else (item.author.url or item.url)) }}{% endfor %}
   </div>
@@ -61,6 +61,8 @@
       <div class="comment-author vcard p-author h-card">
         {%- if reply.author.avatar %}
         <img class="avatar u-photo" src="{{ reply.author.avatar }}" alt="" width="40" height="40" loading="lazy">
+        {%- else %}
+        <span class="comment-avatar-empty" aria-hidden="true">{{ reply.author.name | first | upper }}</span>
         {%- endif %}
         <b class="fn p-name">{% if reply.author.url %}<a class="url u-url" href="{{ reply.author.url }}" rel="nofollow ugc noopener noreferrer">{{ reply.author.name }}</a>{% else %}{{ reply.author.name }}{% endif %}</b>
       </div>
@@ -70,6 +72,11 @@
         {%- else %}
         <time class="dt-published" datetime="{{ reply.published | date("iso") }}">{{ reply.published | date }}</time>
         {%- endif %}
+        {%- if reply.source == "webmention" %}
+        <span class="comment-source">via webmention</span>
+        {%- elif reply.source == "activitypub" %}
+        <span class="comment-source">via the fediverse</span>
+        {%- endif %}
       </div>
     </footer>
     <div class="comment-content e-content">
@@ -111,8 +118,8 @@
 
 {#
   And the thread. The title counts the whole of it rather than the top level,
-  which is what `counts.replies` is, and names the post the way the source
-  theme does.
+  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).
 
   "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
@@ -123,7 +130,7 @@
 {% if conversation.replies.length %}
 <div id="comments" class="comments-area">
   <h2 class="comments-title">
-    {%- if conversation.counts.replies == 1 %}One comment{% else %}{{ conversation.counts.replies }} comments{% endif %} on &ldquo;<span>{{ title }}</span>&rdquo;
+    {%- if conversation.counts.replies == 1 %}One reply{% else %}{{ conversation.counts.replies }} replies{% endif -%}
   </h2>
 
   <ol class="comment-list">

package/themes/default/partials/kicker.njk

@@ -0,0 +1,34 @@
+{#
+  The kicker: what an entry is, said once, small, above it (doc-9). The kind
+  word first, then the date, then the categories, each after a middle dot the
+  screen reader skips.
+
+  Import it with the context, because the category links read the archive
+  base off `site`:
+
+    {% import "partials/kicker.njk" as kicker with context %}
+    {{ kicker.line("Note", post.date, post.url) }}
+
+  `kind` is the word printed: Article, Note or Reply for a post (its
+  `postType`, capitalised), Page for a page, and whatever names an archive or
+  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.
+#}
+{% macro line(kind, date=false, href=false, categories=[], label="") %}
+<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>
+  {%- elif date %}
+  <span class="kicker-dot" aria-hidden="true">·</span>
+  <time class="feed-date dt-published" datetime="{{ date | date("iso") }}">{{ date | date }}</time>
+  {%- endif %}
+  {%- for category in categories %}
+  <span class="kicker-dot" aria-hidden="true">·</span>
+  <a href="{{ ("/" + (site.categoryBase or "category") + "/" + (category | urlencode) + "/") | url }}" class="p-category" rel="category">{{ category }}</a>
+  {%- endfor %}
+</p>
+{% endmacro %}

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

@@ -1,21 +1,23 @@
 {#
-  The feed a listing is made of: `h-feed` of `h-entry` items, as the source
-  design lists them (decision-16).
+  The feed a listing is made of: `h-feed` of `h-entry` items (doc-9).
 
-  Expects `posts`. A note, which has no title, is printed whole as its
-  `e-content`, with its date as the link to it. Every other entry prints its
-  title as a linked `p-name`, its `summary` — the very line the feeds publish —
-  as a `p-summary` cut to about 280 characters, a Continue reading link, its
-  publish date and the categories it is filed under. Tags are deliberately not here: an entry's tags belong
-  under the entry, and a feed of twenty posts listing everyone's would be a
-  wall of links rather than a list of writing.
+  Expects `posts`. Every entry opens on a kicker naming its kind and its date.
+  An article is the only entry with a headline: its title as a linked
+  `p-name`, its `summary` (the very line the feeds publish) as a `p-summary`
+  cut to about 280 characters, and a Continue reading link, with the
+  categories it is filed under in its kicker. A note, which has no title, is
+  printed whole as its `e-content`, and its date in the kicker is the link to
+  it. A reply is a note that first cites what it answers, and a reply with a
+  title is an article that does. Tags are deliberately not here: an entry's
+  tags belong under the entry, and a feed of twenty posts listing everyone's
+  would be a wall of links rather than a list of writing.
 
   `feedHeading` is the heading level, which belongs to the layout rather than
   to the list: a listing is a page of entries and heads each one at 2, and a
   front page whose feed sits under a heading of its own sets 3 so the outline
   never skips a level.
 #}
-{% import "partials/tags.njk" as taxonomy with context %}
+{% import "partials/kicker.njk" as kicker with context %}
 {% set feedTitleTag = "h" + (feedHeading | default(2)) %}
 {% if posts.length %}
 <div class="feed h-feed">
@@ -24,43 +26,35 @@
   <hr class="feed-separator">
   {% endif %}
   <article class="feed-item h-entry">
-    <div class="feed-content">
-      {% if post.inReplyTo %}
-      <p class="feed-reply small">In reply to <a class="u-in-reply-to" href="{{ post.inReplyTo }}">{{ post.inReplyTo }}</a></p>
-      {% endif %}
-      {% if not post.named %}
-      <div class="feed-excerpt e-content">{{ post.content | safe }}</div>
-      {% else %}
-      <{{ feedTitleTag }} class="feed-title p-name">
-        <a href="{{ post.url | url }}" class="u-url">{{ post.title }}</a>
-      </{{ feedTitleTag }}>
-      {% if post.summary %}
-      <div class="feed-excerpt p-summary">
-        {#- `truncate` cuts at the last space before the length and adds an
-            ellipsis, so a description short enough is printed whole and a long
-            one never breaks a word. -#}
-        <p>{{ post.summary | truncate(280) }}</p>
-      </div>
-      {% endif %}
-      <p class="feed-more">
-        <a href="{{ post.url | url }}" aria-label="Continue reading: {{ post.title }}">Continue reading<span aria-hidden="true"> &rarr;</span></a>
-      </p>
-      {% endif %}
-      <div class="feed-meta">
-        {% if not post.named %}
-        <p>
-          <a href="{{ post.url | url }}" class="u-url">{% if post.date %}<time class="feed-date dt-published" datetime="{{ post.date | date("iso") }}">{{ post.date | date }}</time>{% else %}{{ post.label }}{% endif %}</a>
-        </p>
-        {% elif post.date %}
-        <p>
-          <time class="feed-date dt-published" datetime="{{ post.date | date("iso") }}">
-            {{ post.date | date }}
-          </time>
-        </p>
-        {% endif %}
-        {{ taxonomy.categories(post.categories) }}
-      </div>
+    {% if post.named %}
+    {{ kicker.line(post.postType | capitalize, post.date, false, post.categories) }}
+    {% else %}
+    {{ kicker.line(post.postType | capitalize, post.date, post.url, [], post.label) }}
+    {% 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 %}
+    {% include "partials/reply-context.njk" %}
+    {% endif %}
+    {% if not post.named %}
+    <div class="feed-excerpt e-content">{{ post.content | safe }}</div>
+    {% else %}
+    <{{ feedTitleTag }} class="feed-title p-name">
+      <a href="{{ post.url | url }}" class="u-url">{{ post.title }}</a>
+    </{{ feedTitleTag }}>
+    {% if post.summary %}
+    <div class="feed-excerpt p-summary">
+      {#- `truncate` cuts at the last space before the length and adds an
+          ellipsis, so a description short enough is printed whole and a long
+          one never breaks a word. -#}
+      <p>{{ post.summary | truncate(280) }}</p>
     </div>
+    {% endif %}
+    <p class="feed-more">
+      <a href="{{ post.url | url }}" aria-label="Continue reading: {{ post.title }}">Continue reading<span aria-hidden="true"> &rarr;</span></a>
+    </p>
+    {% endif %}
   </article>
   {% endfor %}
 </div>

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

@@ -3,15 +3,22 @@
   `u-in-reply-to h-cite` that always carries the target's URL, so a parser
   reads what this post answers even when nothing more is known about it.
 
+  Drawn as the citation block (doc-9): a rule on the start side, a sans line
+  naming the target, and its words as an italic quote. An entry includes it
+  with `inReplyTo` and `replyContext` on the context; a feed sets both from
+  the entry it is printing.
+
   `replyContext` is what the target said about itself when the reply was saved
   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`.
+  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.
 #}
 {% if inReplyTo %}
-<div class="reply-context u-in-reply-to h-cite">
-  <p class="small">In reply to
+<div class="reply-context cite u-in-reply-to h-cite">
+  <p class="cite-line small">In reply to
     {%- if replyContext.name %} <a class="u-url p-name" href="{{ inReplyTo }}">{{ replyContext.name }}</a>
+    {%- elif replyContext.author %} <a class="u-url" href="{{ inReplyTo }}">a post</a>
     {%- else %} <a class="u-url" href="{{ inReplyTo }}">{{ inReplyTo }}</a>
     {%- endif %}
     {%- if replyContext.author %} by <span class="p-author h-card">
@@ -19,11 +26,11 @@
       {%- else %}<span class="p-name">{{ replyContext.author.name }}</span>{% endif -%}
     </span>
     {%- endif %}
-    {%- if replyContext.published %} on <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 }}</time>
     {%- endif -%}
   </p>
   {% if replyContext.text %}
-  <blockquote class="p-content">{{ replyContext.text }}</blockquote>
+  <blockquote class="cite-quote p-content">{{ replyContext.text }}</blockquote>
   {% endif %}
 </div>
 {% endif %}