@geekity/cms 0.28.0 → 0.30.0

package/themes/default/layouts/comment.njk

@@ -0,0 +1,90 @@
+{#
+  A native comment on a page of its own (TASK-318), at `/comment/{key}/`: what
+  another site fetches when it replies to the comment, so the comment is the
+  page's one `h-entry`.
+
+  Above it is the thread it belongs to, from the post down, as nested
+  `u-in-reply-to h-cite`s: the comment cites its parent, which cites its own,
+  down to the post. A parser reads the chain a person reads, and the deepest
+  cite, printed first, is the post. An ancestor a reader may not see is in
+  `ancestors` as nothing, and stands in the chain with no author or words.
+  Below are its replies, cited in it with `p-comment`, then a link to the
+  whole thread on the post.
+
+  The context: `comment` is one entry of the thread as `partials/comment.njk`
+  prints it; `ancestors` is the chain from the top-level comment down to the
+  parent; `post` is the post as a listing entry is; `threadUrl` is the
+  comment's anchor on the post. The page is noindex and on no list.
+#}
+{% extends "layouts/base.njk" %}
+{% import "partials/comment.njk" as thread with context %}
+
+{% macro cited(index) %}
+{% if index < 0 %}
+{% set by = post.author or siteAuthor %}
+<div class="comment-step u-in-reply-to h-cite">
+  <p class="cite-line">
+    <a class="u-url p-name" href="{{ post.url | url }}">{{ post.label }}</a>
+    {%- if by %} by <span class="p-author h-card">{% if by.url %}<a class="u-url p-name" href="{{ by.url }}">{{ by.name }}</a>{% else %}<span class="p-name">{{ by.name }}</span>{% endif %}</span>{% endif %}
+    {%- if post.date %}, <time class="dt-published" datetime="{{ post.date | date("iso") }}">{{ post.date | date }}</time>{% endif %}
+  </p>
+  {% if post.summary %}
+  <blockquote class="cite-quote p-summary">{{ post.summary }}</blockquote>
+  {% endif %}
+</div>
+{% else %}
+{% set step = ancestors[index] %}
+<div class="comment-step u-in-reply-to h-cite">
+  {{ cited(index - 1) }}
+  {% if step %}
+  <p class="cite-line">
+    <span class="p-author h-card">{% if step.author.url %}<a class="u-url p-name" href="{{ step.author.url }}"{% if not step.author.username %} rel="nofollow ugc noopener noreferrer"{% endif %}>{{ step.author.name }}</a>{% else %}<span class="p-name">{{ step.author.name }}</span>{% endif %}</span>,
+    {%- if step.url %}
+    <a class="u-url" href="{{ step.url }}"{% if step.source != "comment" %} rel="nofollow noopener noreferrer"{% endif %}><time class="dt-published" datetime="{{ step.published | date("iso") }}">{{ step.published | date }}</time></a>
+    {%- else %}
+    <time class="dt-published" datetime="{{ step.published | date("iso") }}">{{ step.published | date }}</time>
+    {%- endif %}
+  </p>
+  <div class="cite-quote e-content">{{ step.content | safe }}</div>
+  {% else %}
+  <p class="cite-line comment-withheld">{{ thread.withheld() }}</p>
+  {% endif %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% block content %}
+<article class="comment-page h-entry comment-{{ comment.source }}">
+  <h1 class="screen-reader-text">Comment by {{ comment.author.name }} on {{ post.label }}</h1>
+  <div class="cite comment-thread">
+    {{ cited(ancestors.length - 1) }}
+  </div>
+  <div class="comment-body">
+    <header class="comment-meta">
+      <div class="comment-author p-author h-card">
+        {%- if comment.author.avatar %}
+        <img class="avatar u-photo" src="{{ comment.author.avatar }}" alt="" width="40" height="40">
+        {%- else %}
+        <span class="comment-avatar-empty" aria-hidden="true">{{ comment.author.name | first | upper }}</span>
+        {%- endif %}
+        <b class="p-name">{% if comment.author.url %}<a class="u-url" href="{{ comment.author.url }}"{% if not comment.author.username %} rel="nofollow ugc noopener noreferrer"{% endif %}>{{ comment.author.name }}</a>{% else %}{{ comment.author.name }}{% endif %}</b>
+      </div>
+      <div class="comment-metadata">
+        <a class="u-url" href="{{ comment.url }}"><time class="dt-published" datetime="{{ comment.published | date("iso") }}">{{ comment.published | date }}</time></a>
+      </div>
+    </header>
+    <div class="comment-content e-content">{{ comment.content | safe }}</div>
+  </div>
+  {% if comment.replies.length %}
+  <section class="comments-area">
+    <h2 class="comments-title">Replies</h2>
+    <ol class="comment-list">
+      {% for reply in comment.replies %}
+      {{ thread.comment(reply, "p-comment h-cite") }}
+      {% endfor %}
+    </ol>
+  </section>
+  {% endif %}
+</article>
+<p class="comment-back"><a href="{{ threadUrl | url }}">The whole conversation on {{ post.label }}</a></p>
+{% endblock %}

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

@@ -1,60 +1,22 @@
 {#
-  The front page: the page the Reading setting names, read at `/`, as the
-  source design's `front-page.php` draws it (decision-16, TASK-85).
+  The front page: the page the Reading setting names, read at `/`.
 
-  A site's own words, then what it has been writing. The words are the page's
-  rendered body and nothing else — no title, because `layouts/base.njk` heads
-  the root path with the site title and a second `h1` under it would be one
-  heading too many, and no Published line, because a front page is read as the
-  site rather than as a page somebody wrote on a Tuesday. Then `Recent Posts`
-  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.
+  A site that wants more on its front page overrides this file in its own
+  theme. `newestPosts(count)` lists the newest published posts as listing
+  entries and `postsPage` names the page carrying the listing; the theme README
+  has an example. On a solo author site the base layout keeps the homepage's
+  `rel="me"` claims in the head whatever this file prints (decision-45).
 #}
 {% extends "layouts/base.njk" %}
 
-{#- Who the bio credits: the person the site's author setting names. -#}
-{% set bioAuthor = soloAuthor or siteAuthor %}
-{% set bioRelMe = true if soloAuthor else false %}
-{% set bioHome = "/" | absoluteUrl if soloAuthor else "" %}
-
 {% block content %}
+{% if title %}
+<h2 class="section-title">{{ title }}</h2>
+{% endif %}
 <div class="page-body e-content">
   {{ content | safe }}
 </div>
 
-<h2 class="section-title">Recent Posts</h2>
-{#- The feed a listing prints, over the posts the CMS decided were recent:
-    this month's writing when there is enough of it and the five newest
-    otherwise. `feedHeading` is 3 because the `h2` above is what they sit
-    under. -#}
-{% set posts = recentPosts %}
-{% set feedHeading = 3 %}
-{% include "partials/post-list.njk" %}
-
-{#- Where to go next. The posts page is here only when the site has one — on a
-    site without one there is no second URL for the archive, and a link to one
-    would be a link to nothing. Search is always here (TASK-22). -#}
-<p class="front-links">
-  {% if postsPage %}
-  <a href="{{ postsPage.url | url }}">{{ postsPage.title }}<span aria-hidden="true"> &rarr;</span></a>
-  {% endif %}
-  <a href="{{ "/search/" | url }}">Search<span aria-hidden="true"> &rarr;</span></a>
-</p>
-
-{% if bioAuthor %}
-<hr>
-<footer>
-  {% include "partials/bio.njk" %}
-</footer>
-{% endif %}
-
 {# A homepage may ask for a contact form like any other page (TASK-56). #}
 {% if contactForm %}
 {% include "partials/contact-form.njk" %}

package/themes/default/layouts/page.njk

@@ -61,6 +61,8 @@
   {% endif %}
 </article>
 
+{% include "partials/backlinks.njk" %}
+
 {% if conversation %}
 {% include "partials/conversation.njk" %}
 {% endif %}

package/themes/default/layouts/post.njk

@@ -9,8 +9,9 @@
   `p-summary`. A post with no title opens on its words, set larger. What a
   reply answers, and what a like, repost or bookmark cites, opens a post with
   no title and follows the header of one with a title, before its words.
-  Then the Published line, the tags, a rule and the bio. The neighbouring posts,
-  the conversation and the comment form follow the entry.
+  Then the Published line, the tags, a rule and the bio. The site's own posts
+  that link to it, 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 design does, and it is what makes a reader who copies the words out
@@ -118,8 +119,18 @@
     {% include "partials/bio.njk" %}
   </footer>
   {% endif %}
+  {#- A reply post's replies are inside its entry as `p-comment h-cite`s, so
+      the page it answers reads them there when it is sent a salmention
+      (TASK-320). The likes and boosts stay below: their links are not the
+      entry's. -#}
+  {% if conversation and postType == "reply" %}
+  {% set conversationPart = "replies" %}
+  {% include "partials/conversation.njk" %}
+  {% endif %}
 </article>
 
+{% include "partials/backlinks.njk" %}
+
 {# 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. #}
@@ -138,6 +149,7 @@
 
 {# Only a post that has been replied to, liked or boosted has one of these. #}
 {% if conversation %}
+{% set conversationPart = "reactions" if postType == "reply" else "all" %}
 {% include "partials/conversation.njk" %}
 {% endif %}
 

package/themes/default/partials/backlinks.njk

@@ -0,0 +1,19 @@
+{#
+  The site's own posts and pages that link to this one (TASK-322), newest
+  first: what a link between two of its posts is instead of a webmention, so
+  it is listed apart from the conversation rather than counted in it.
+
+  `backlinks` is always a list, each entry `{ title, url, date }`, with no
+  `date` for a page that has none. An empty list prints nothing, so a layout
+  includes this unconditionally.
+#}
+{% if backlinks.length %}
+<section class="backlinks" aria-labelledby="backlinks-title">
+  <h2 id="backlinks-title" class="backlinks-title">Linked from</h2>
+  <ol>
+    {% for link in backlinks %}
+    <li><a href="{{ link.url | url }}">{{ link.title }}</a>{% if link.date %} <time datetime="{{ link.date | date("iso") }}">{{ link.date | date("readable") }}</time>{% endif %}</li>
+    {% endfor %}
+  </ol>
+</section>
+{% endif %}

package/themes/default/partials/cited-page.njk

@@ -8,7 +8,8 @@
 
   `url` is the cited page, always its `u-url`. `context` is what the page said
   about itself, from the reply contexts file. With a name, the name is the
-  link; with only an author, "a post" is; a URL that is itself an image
+  link; a comment on this site (`context.comment`, TASK-326) is "a comment";
+  with only an author, "a post" is; a URL that is itself an image
   (`context.image`, TASK-255) is "an image from" its host; anything else is "a
   page on" its host, never the bare URL, which can run to hundreds of
   characters. The author follows as an `h-card`.
@@ -42,6 +43,7 @@
 {%- if named %} <span class="p-name"><a class="u-url" href="{{ url }}">{{ title.slice(0, cut) }}</a>{{ byline.slice(0, 4) }}{{ card(context.author, byline.slice(4)) }}</span>
 {%- else %}
   {%- if context.name %} <a class="u-url p-name" href="{{ url }}">{{ context.name }}</a>
+  {%- elif context.comment %} <a class="u-url" href="{{ url }}">a comment</a>
   {%- elif context.author %} <a class="u-url" href="{{ url }}">a post</a>
   {%- elif context.image %} <a class="u-url" href="{{ url }}">an image from {{ url | host }}</a>
   {%- else %} <a class="u-url" href="{{ url }}">a page on {{ url | host }}</a>

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

@@ -87,6 +87,16 @@
     <p class="comment-signed-in">
       Commenting as <a href="{{ commentForm.signedInAs.url }}">{{ commentForm.signedInAs.name }}</a>.
     </p>
+
+    {#
+      What is posted here is a reply post (TASK-300). Unticked it is Unlisted:
+      its own page and the thread, and no listing or feed. Ticked it is Public.
+      It reaches whoever it answers either way.
+    #}
+    <p class="comment-check">
+      <input id="comment-listed" name="{{ commentForm.fields.listed }}" type="checkbox" value="1"{% if commentForm.values.listed %} checked{% endif %} />
+      <label for="comment-listed">Include in posts and feeds</label>
+    </p>
     {% else %}
     {#
       When this form was drawn, which is what the minimum submit time is

package/themes/default/partials/comment.njk

@@ -0,0 +1,79 @@
+{#
+  One reply and everything under it. A macro rather than an include so it can
+  call itself: a reply that answers a reply is the same thing one level in.
+
+  `classes` is the reply's microformat. Under a post each reply is an
+  `h-entry` of its own. On a comment's own page (TASK-318) the comment is the
+  page's one entry, so its replies are `p-comment h-cite` inside it.
+
+  A `withheld` entry (TASK-325) is a comment a reader may not see that has
+  visible replies under it. It keeps its anchor and prints `withheld()` in
+  place of an author and words, as a comment's own page does for an ancestor,
+  and is no microformat of its own.
+#}
+{% macro withheld() %}This comment is no longer shown.{% endmacro %}
+
+{% macro comment(reply, classes="h-entry") %}
+{% if reply.withheld %}
+<li id="comment-{{ reply.key }}" class="comment comment-placeholder">
+  <p class="comment-withheld">{{ withheld() }}</p>
+  <ol class="children">
+    {% for child in reply.replies %}
+    {{ comment(child, classes) }}
+    {% endfor %}
+  </ol>
+</li>
+{% else %}
+<li id="comment-{{ reply.key }}" class="comment {{ classes }} comment-{{ reply.source }}">
+  <article class="comment-body">
+    <footer class="comment-meta">
+      <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 }}"{% if not reply.author.username %} rel="nofollow ugc noopener noreferrer"{% endif %}>{{ reply.author.name }}</a>{% else %}{{ reply.author.name }}{% endif %}</b>
+      </div>
+      <div class="comment-metadata">
+        {%- if reply.url %}
+        <a class="u-url" href="{{ reply.url }}"{% if reply.source != "comment" and reply.source != "post" %} rel="nofollow noopener noreferrer"{% endif %}><time class="dt-published" datetime="{{ reply.published | date("iso") }}">{{ reply.published | date }}</time></a>
+        {%- 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">
+      {%- if reply.rsvp %}
+      <p class="comment-rsvp"><data class="p-rsvp" value="{{ reply.rsvp.value }}">{{ reply.rsvp.label }}</data></p>
+      {%- endif %}
+      {{ reply.content | safe }}
+    </div>
+    {#
+      Answering a comment on this site needs no JavaScript: the link carries
+      the comment's key to the form, which puts it in a hidden field. Somebody
+      signed in can answer anything in the thread, and their answer is a reply
+      post that reaches a webmention's page or a fediverse reply's author
+      (TASK-300). A visitor answers comments written here only: a fediverse
+      reply is answered on the server that holds it, and a webmention on the
+      page that sent it.
+    #}
+    {% if commentForm and (reply.source == "comment" or commentForm.signedInAs) %}
+    <div class="reply"><a class="comment-reply-link" href="{{ page.url }}?reply_to={{ reply.key }}#respond">Reply</a></div>
+    {% endif %}
+  </article>
+  {% if reply.replies.length %}
+  <ol class="children">
+    {% for child in reply.replies %}
+    {{ comment(child, classes) }}
+    {% endfor %}
+  </ol>
+  {% endif %}
+</li>
+{% endif %}
+{% endmacro %}

package/themes/default/partials/conversation.njk

@@ -11,9 +11,16 @@
   the shape it is handed is documented in the theme README under "The
   conversation".
 
+  `conversationPart` is `reactions` or `replies` for one half of it, which is
+  how a reply post prints its replies inside its entry (TASK-320), and the
+  whole of it otherwise.
+
   The macros come first because Nunjucks defines one where it stands rather
-  than hoisting it, and the two sections below call them.
+  than hoisting it, and the two sections below call them. One reply and
+  everything under it is `partials/comment.njk`, which a comment's own page
+  prints its replies with too.
 #}
+{% import "partials/comment.njk" as thread with context %}
 {#
   One face in a facepile: somebody's avatar, linked to wherever they are.
 
@@ -52,60 +59,6 @@
 {% endif %}
 {% endmacro %}
 
-{#
-  One reply and everything under it. A macro rather than an include so it can
-  call itself: a reply that answers a reply is the same thing one level in.
-#}
-{% macro comment(reply) %}
-<li id="comment-{{ reply.id }}" class="comment h-entry comment-{{ reply.source }}">
-  <article class="comment-body">
-    <footer class="comment-meta">
-      <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>
-      <div class="comment-metadata">
-        {%- if reply.url %}
-        <a class="u-url" href="{{ reply.url }}"{% if reply.source != "comment" %} rel="nofollow noopener noreferrer"{% endif %}><time class="dt-published" datetime="{{ reply.published | date("iso") }}">{{ reply.published | date }}</time></a>
-        {%- 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">
-      {%- if reply.rsvp %}
-      <p class="comment-rsvp"><data class="p-rsvp" value="{{ reply.rsvp.value }}">{{ reply.rsvp.label }}</data></p>
-      {%- endif %}
-      {{ reply.content | safe }}
-    </div>
-    {#
-      Answering a comment on this site needs no JavaScript: the link carries
-      the comment's id to the form, which puts it in a hidden field. A
-      fediverse reply is answered on the server that holds it, and a webmention
-      is answered on the page that sent it, so neither gets such a link.
-    #}
-    {% if commentForm and reply.source == "comment" %}
-    <div class="reply"><a class="comment-reply-link" href="{{ page.url }}?reply_to={{ reply.id | urlencode }}#respond">Reply</a></div>
-    {% endif %}
-  </article>
-  {% if reply.replies.length %}
-  <ol class="children">
-    {% for child in reply.replies %}
-    {{ comment(child) }}
-    {% endfor %}
-  </ol>
-  {% endif %}
-</li>
-{% endmacro %}
 
 {#
   Who is coming to an event (TASK-200): each answer it was given, by a
@@ -114,7 +67,9 @@
   first. A post that is no event has no groups.
 #}
 {% set rsvpIcons = { yes: "✅", maybe: "🤔", interested: "⭐", no: "❌" } %}
-{% if conversation.rsvps.length %}
+{% set showReactions = conversationPart != "replies" %}
+{% set showReplies = conversationPart != "reactions" %}
+{% if showReactions and conversation.rsvps.length %}
 <div class="reactions-section rsvps-section">
   {%- for answer in conversation.rsvps %}
   {{- group(answer.people, answer.label, "rsvp-" + answer.value, rsvpIcons[answer.value]) }}
@@ -128,7 +83,7 @@
   boosts, which is why there are three groups and not four. `p-like`,
   `p-repost` and `p-mention` are the source theme's classes for them.
 #}
-{% if conversation.likes.length or conversation.boosts.length or conversation.mentions.length %}
+{% if showReactions and (conversation.likes.length or conversation.boosts.length or conversation.mentions.length) %}
 <div class="reactions-section">
   {{- group(conversation.likes, "Likes", "p-like", "❤️") }}
   {{- group(conversation.boosts, "Boosts", "p-repost", "🔁") }}
@@ -150,7 +105,7 @@
   switch, the closing window and the post's own front matter all agree it is
   open, so there is nothing else for a theme to work out.
 #}
-{% if conversation.replies.length %}
+{% if showReplies and conversation.replies.length %}
 <div id="comments" class="comments-area">
   <h2 class="comments-title">
     {{- conversation.counts.replies | plural({ one: "One reply", other: "# replies" }, "en") -}}
@@ -158,7 +113,7 @@
 
   <ol class="comment-list">
     {% for reply in conversation.replies %}
-    {{ comment(reply) }}
+    {{ thread.comment(reply, "p-comment h-cite" if conversationPart == "replies" else "h-entry") }}
     {% endfor %}
   </ol>
 

package/themes/default/src/style.css

@@ -873,6 +873,26 @@
     @apply target;
   }
 
+  .backlinks {
+    @apply mt-12 font-sans text-sm;
+  }
+
+  .backlinks-title {
+    @apply mb-2 text-[0.72rem] font-normal tracking-[0.14em] text-muted uppercase;
+  }
+
+  .backlinks ol {
+    @apply list-none space-y-1 p-0;
+  }
+
+  .backlinks a {
+    @apply target;
+  }
+
+  .backlinks time {
+    @apply ms-1 text-muted;
+  }
+
   /* Pagination: two words, the newer at the start and the older at the end. */
   .pagination {
     @apply mt-12 flex flex-wrap gap-4 font-sans text-sm;
@@ -1027,6 +1047,28 @@
     @apply mt-8 font-sans text-sm text-muted italic;
   }
 
+  /* A comment's own page (TASK-318): the thread above it as one citation,
+     each step drawn flat although each is nested in the next. */
+  .comment-thread {
+    @apply mb-8;
+  }
+
+  .comment-step > .comment-step {
+    @apply mb-4;
+  }
+
+  .comment-withheld {
+    @apply italic;
+  }
+
+  .comment-page .comments-area {
+    @apply mt-10;
+  }
+
+  .comment-back {
+    @apply mt-10 font-sans text-sm;
+  }
+
   /* The comment form under an open post and the contact form on a page that
      asked for one, which wears the same class. */
   .comment-respond {

package/themes/default/static/style.css

@@ -1619,6 +1619,50 @@
     display: inline-flex;
   }
 
+  .backlinks {
+    margin-top: calc(var(--spacing) * 12);
+    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));
+  }
+
+  .backlinks-title {
+    margin-bottom: calc(var(--spacing) * 2);
+    --tw-font-weight: var(--font-weight-normal);
+    font-size: .72rem;
+    font-weight: var(--font-weight-normal);
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+    color: var(--color-muted);
+    text-transform: uppercase;
+  }
+
+  .backlinks ol {
+    list-style-type: none;
+  }
+
+  :where(.backlinks ol > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  .backlinks ol {
+    padding: 0;
+  }
+
+  .backlinks a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
+
+  .backlinks time {
+    color: var(--color-muted);
+    margin-inline-start: var(--spacing);
+  }
+
   .pagination {
     margin-top: calc(var(--spacing) * 12);
     gap: calc(var(--spacing) * 4);
@@ -2028,6 +2072,29 @@
     font-style: italic;
   }
 
+  .comment-thread {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
+  .comment-step > .comment-step {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
+  .comment-withheld {
+    font-style: italic;
+  }
+
+  .comment-page .comments-area {
+    margin-top: calc(var(--spacing) * 10);
+  }
+
+  .comment-back {
+    margin-top: calc(var(--spacing) * 10);
+    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));
+  }
+
   .comment-respond {
     margin-top: calc(var(--spacing) * 12);
     border-top-style: var(--tw-border-style);