@geekity/cms 0.3.0 → 0.5.0

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

@@ -0,0 +1,88 @@
+{#
+  The form under a page whose front matter says `contact: true`.
+
+  `contactForm` is on the context only when the page asked for one, so a layout
+  asks `{% if contactForm %}` and nothing else. A site replaces this whole
+  section with a `partials/contact-form.njk` of its own in the theme it wears;
+  the shape it is handed is documented in the theme README under "The contact
+  form".
+
+  Where the message goes is deliberately not here and not anywhere a template
+  can reach: the address is read when a submission arrives, so it cannot end up
+  in the HTML however this file is rewritten.
+
+  It wears `comment-respond`, which is the source design's name for a form
+  under an entry, because it is the same kind of form as the comment one and
+  the two are better off sharing a set of rules than keeping two that drift.
+
+  It works with JavaScript switched off, and there is no script on it.
+#}
+<section class="comment-respond contact-form" id="contact">
+  {% if contactNotice %}
+  {#
+    The thank-you the redirect after a submission landed on. The form is not
+    drawn again underneath it: the message has gone, and offering the fields
+    back would invite a second copy of it.
+  #}
+  <h2 class="contact-form-title">Thank you</h2>
+  <p class="contact-notice" role="status">{{ contactNotice }}</p>
+  {% else %}
+  <h2 class="contact-form-title">Send a message</h2>
+
+  {% if contactForm.error %}
+  <p class="contact-error" role="alert">{{ contactForm.error }}</p>
+  {% endif %}
+
+  <form method="post" action="{{ contactForm.action }}">
+    <input type="hidden" name="{{ contactForm.fields.page }}" value="{{ contactForm.page }}" />
+    <input type="hidden" name="{{ contactForm.fields.loaded }}" value="{{ contactForm.loaded }}" />
+
+    {#
+      The honeypot. Hidden from sight and from assistive technology, out of the
+      tab order, and told not to autofill: a person never sees it and never
+      fills it in, so anything that does is not a person.
+    #}
+    <div class="contact-trap" aria-hidden="true">
+      <label for="contact-website">Website</label>
+      <input id="contact-website" name="{{ contactForm.fields.trap }}" type="text" tabindex="-1" autocomplete="off" value="" />
+    </div>
+
+    <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>
+      {% 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>
+      {% endif %}
+      <span class="contact-hint">So there is somewhere to reply to. It is never shown on the site.</span>
+    </p>
+
+    <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>
+      {% 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>
+      {% endif %}
+    </p>
+
+    <p class="form-submit">
+      <button type="submit">Send message</button>
+    </p>
+  </form>
+  {% endif %}
+</section>

package/themes/default/partials/conversation.njk

@@ -0,0 +1,139 @@
+{#
+  What has been said about a post: likes, boosts and mentions as facepiles
+  grouped by kind, and the replies as a thread, in the source design's markup
+  (decision-16, TASK-84).
+
+  Rendered from `layouts/post.njk` with the `conversation` on the context,
+  which is only there when there is something in it, so a post nobody has
+  answered renders none of this. A site replaces the whole section with a
+  `partials/conversation.njk` of its own in the theme it wears; the shape it is
+  handed is documented in the theme README under "The conversation".
+
+  The macros come first because Nunjucks defines one where it stands rather
+  than hoisting it, and the two sections below call them.
+#}
+{#
+  One face in a facepile: somebody's avatar, linked to wherever they are.
+
+  Without an avatar there is nothing to recognise them by, so the emoji badge
+  of their kind stands in and their name is printed beside it — which is what
+  a mention from a site with no `h-card` photo, and a like from an actor
+  nobody here follows, look like.
+#}
+{% macro face(item, icon, href) %}
+{%- set name = item.author.name -%}
+{%- if href %}<a class="u-url" href="{{ href }}" title="{{ name }}" rel="nofollow noopener noreferrer">{% else %}<span title="{{ name }}">{% endif %}
+{%- if item.author.avatar -%}
+<img class="avatar u-photo" src="{{ item.author.avatar }}" alt="{{ name }}" width="32" height="32" loading="lazy">
+{%- else -%}
+<span class="reaction-icon" aria-hidden="true">{{ icon }}</span><span class="reaction-name">{{ name }}</span>
+{%- endif -%}
+{%- if href %}</a>{% else %}</span>{% endif %}
+{%- endmacro %}
+
+{#
+  One kind of reaction: a title carrying the label and how many there are, and
+  the people behind them as a facepile. Nothing at all for a kind nothing has.
+
+  `source` says where a face links. A like or a boost is a person, so it links
+  to them; a mention is a page that wrote about this one, and the page is the
+  thing worth reading, so it links there and falls back to its author.
+#}
+{% macro group(items, label, kind, icon, source=false) %}
+{% if items.length %}
+<div class="reaction-group {{ kind }}">
+  <h2 class="reaction-title">{{ label }} ({{ items.length }})</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>
+</div>
+{% 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">
+        {%- 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 %}
+      </div>
+    </footer>
+    <div class="comment-content e-content">
+      {{ 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 }}#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 %}
+
+{#
+  The reactions, above the thread. A like and a boost come from the fediverse
+  and a `repost` from a webmention; the CMS has already put a repost among the
+  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 %}
+<div class="reactions-section">
+  {{- group(conversation.likes, "Likes", "p-like", "❤️") }}
+  {{- group(conversation.boosts, "Boosts", "p-repost", "🔁") }}
+  {{- group(conversation.mentions, "Mentions", "p-mention", "🔗", true) }}
+</div>
+{% endif %}
+
+{#
+  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.
+
+  "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
+  `commentForm` says: the CMS puts the form on the context only while the site
+  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 %}
+<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;
+  </h2>
+
+  <ol class="comment-list">
+    {% for reply in conversation.replies %}
+    {{ comment(reply) }}
+    {% endfor %}
+  </ol>
+
+  {% if not commentForm %}
+  <p class="no-comments">Comments are closed.</p>
+  {% endif %}
+</div>
+{% endif %}

package/themes/default/partials/feeds.njk

@@ -0,0 +1,26 @@
+{#
+  The `rel="alternate"` links for one listing's three feeds.
+
+  `root` is any listing URL ending in `/` — `/`, a tag archive, a category
+  archive — and `title` is what a reader should call the feed. RSS comes first
+  because it is what most subscribers hold.
+
+  Import it with `{% import "partials/feeds.njk" as feeds %}`; the arguments
+  carry everything, so it needs no context.
+#}
+{#
+  The `rel="alternate"` link for one comments feed.
+
+  `feed` is the feed's own URL — `/comments/feed/`, or a post's — because a
+  comments feed is RSS 2.0 and nothing else, so there is no set of three to
+  build from a root.
+#}
+{% macro commentsFeedLink(feed, title) %}
+    <link rel="alternate" type="application/rss+xml" title="{{ title }}" href="{{ feed | url }}">
+{%- endmacro %}
+
+{% macro feedLinks(root, title) %}
+    <link rel="alternate" type="application/rss+xml" title="{{ title }}" href="{{ (root + "feed/") | url }}">
+    <link rel="alternate" type="application/atom+xml" title="{{ title }}" href="{{ (root + "feed/atom/") | url }}">
+    <link rel="alternate" type="application/feed+json" title="{{ title }}" href="{{ (root + "feed/json/") | url }}">
+{%- endmacro %}

package/themes/default/partials/jsonld.njk

@@ -0,0 +1,120 @@
+{#
+  One schema.org graph for this page, as JSON-LD (decision-16).
+
+  All the structured data the theme emits is here, and there is no Microdata
+  anywhere: the visible markup carries microformats2 for the IndieWeb and this
+  file carries schema.org for everybody else, so neither has to be threaded
+  through the other's attributes. The CMS core knows nothing about schema.org —
+  a site that wants a different graph overrides this one file.
+
+  Everything is built from the context the visible markup uses, so what a
+  reader sees and what a consumer parses cannot drift. The Person is
+  `siteAuthor`: the site's own author on a page about nobody in particular, the
+  writer on a post, the archive's user on an author archive. Identity comes
+  from a user profile, so a name that answers to no account here has no Person
+  at all, and the author and publisher references go with it.
+
+  How it is printed: every value goes through `dump`, which is JSON.stringify,
+  with every `<` escaped to its `\u003C` form so nothing in a title or a
+  summary can close the script element. Each node opens with `@type`, which is
+  never optional, so every member after it can be written with a leading comma
+  and stay valid JSON however much of the page is missing. The nodes themselves
+  are collected and joined, so the comma between two of them is never a
+  question of which of them happened to be printed.
+#}
+{%- macro member(name, value) -%}
+{%- if value %}, {{ name | dump | safe }}: {{ value | dump | replace("<", "\\u003C") | safe }}{% endif -%}
+{%- endmacro -%}
+{#- Who the page is by, and the id everything else points at. A `siteAuthor`
+    with no `url` is a byline naming somebody with no account here: there is
+    nothing to identify them by, so no Person is printed. -#}
+{% set personUrl = siteAuthor.url | absoluteUrl if siteAuthor.url else "" %}
+{% set personId = personUrl + "#person" if personUrl else "" %}
+{% set home = "/" | absoluteUrl %}
+{#- What the author, publisher and mainEntity members hold: a reference to the
+    Person rather than a second copy of them. -#}
+{% set person = { "@id": personId } if personId else "" %}
+{#- `sameAs` is everywhere else this person is: the profile links they listed,
+    and their actor id, which asserts that the schema.org Person and the
+    fediverse actor are one identity — decision-14 makes their archive URL the
+    actor id. -#}
+{% set sameAs = [] %}
+{% 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 %}
+    {
+      "@type": "WebSite"
+      {{- member("@id", home + "#website") }}
+      {{- member("name", site.title) }}
+      {{- member("description", site.tagline) }}
+      {{- member("url", home) }}
+      {#- The site's search (TASK-22), so a client that understands a
+          SearchAction can offer a box that searches this site. The template
+          is the search page's own URL with the words in `q`, which is what
+          the form in the footer sends. #}
+      {{- member("potentialAction", {
+        "@type": "SearchAction",
+        "target": {
+          "@type": "EntryPoint",
+          "urlTemplate": ("/search/" | absoluteUrl) + "?q={search_term_string}"
+        },
+        "query-input": "required name=search_term_string"
+      }) }}
+      {{- member("publisher", person) }}
+    }{% endset %}
+{% set _ = nodes.push(website) %}
+{% if personId %}
+{% set profile %}
+    {
+      "@type": "Person"
+      {{- member("@id", personId) }}
+      {{- member("name", siteAuthor.name) }}
+      {{- member("url", personUrl) }}
+      {{- member("image", siteAuthor.avatar | absoluteUrl if siteAuthor.avatar else "") }}
+      {{- member("description", siteAuthor.bio) }}
+      {{- member("jobTitle", siteAuthor.jobTitle) }}
+      {{- member("address", address) }}
+      {{- member("sameAs", sameAs if sameAs.length else "") }}
+    }{% endset %}
+{% set _ = nodes.push(profile) %}
+{% endif %}
+{% if isProfilePage %}
+{% set profilePage %}
+    {
+      "@type": "ProfilePage"
+      {{- member("@id", (author.url | absoluteUrl) + "#profilepage") }}
+      {{- member("url", author.url | absoluteUrl) }}
+      {{- member("name", author.name) }}
+      {{- member("mainEntity", person) }}
+    }{% endset %}
+{% set _ = nodes.push(profilePage) %}
+{% elif isEntry %}
+{% set entry %}
+    {
+      "@type": {{ entryType | dump | safe }}
+      {{- member("headline", title) }}
+      {{- member("url", metaUrl) }}
+      {{- member("mainEntityOfPage", metaUrl) }}
+      {{- 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", metaImage | absoluteUrl if metaImage else "") }}
+      {{- member("author", person) }}
+      {{- member("publisher", person) }}
+    }{% endset %}
+{% set _ = nodes.push(entry) %}
+{% endif %}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+{{ nodes.join(",\n") | safe }}
+  ]
+}
+</script>

package/themes/default/partials/menu.njk

@@ -0,0 +1,32 @@
+{#
+  One menu, drawn.
+
+  The CMS puts every menu the site stores on the context as `menus`, keyed by
+  the name it is stored under, each item already knowing whether it is the page
+  being looked at (TASK-107). This theme declares two of those names in its
+  `theme.json` — `primary` and `footer` — and draws each through this macro, so
+  the markup of a menu is written once:
+
+    {% import "partials/menu.njk" as nav %}
+    {{ nav.list(menus.footer, "Footer") }}
+
+  Nothing is printed for a menu with nothing in it: an area a site has not
+  filled in is an area with no nav element, not an empty list.
+
+  `label` is the `aria-label`, which is what tells a reader on a screen reader
+  which of a page's menus this one is. Two navs with no labels are two navs
+  called "navigation".
+
+  An item marked `me` carries `rel="me"`, which is how Mastodon and the rest of
+  the IndieWeb verify that the site and the profile it links belong to the same
+  person: the profile links back, and the pair is the proof.
+#}
+{% macro list(items, label) %}{% if items.length %}
+<nav class="site-nav" aria-label="{{ label }}">
+  <ul class="hlist">
+    {% for item in items %}
+    <li><a href="{{ item.url | url }}"{% if item.me %} rel="me"{% endif %}{% if item.current %} class="is-current" aria-current="page"{% endif %}>{{ item.label }}</a></li>
+    {% endfor %}
+  </ul>
+</nav>
+{% endif %}{% endmacro %}

package/themes/default/partials/pagination.njk

@@ -1,14 +1,20 @@
-{# Previous/next pager. Expects `pagination`. Renders nothing on a one-page listing. #}
+{#
+  Previous/next pager. Expects `pagination`. Renders nothing on a one-page
+  listing.
+
+  Two arrows and two words, as the source design pages (decision-16).
+  `previous` is the page before this one, which on a listing newest-first is
+  the newer posts, and `next` the page after it. The arrows are
+  `aria-hidden`: a screen reader announcing "left arrow Previous" reads the
+  decoration twice.
+#}
 {% if pagination.totalPages > 1 %}
 <nav class="pagination" aria-label="Pagination">
   {% if pagination.href.previous %}
-  <a class="pagination-previous" rel="prev" href="{{ pagination.href.previous | url }}">Newer</a>
+  <a class="pagination-previous" rel="prev" href="{{ pagination.href.previous | url }}"><span aria-hidden="true">&larr;</span> Previous</a>
   {% endif %}
-  <span class="pagination-position">
-    Page {{ pagination.pageNumber + 1 }} of {{ pagination.totalPages }}
-  </span>
   {% if pagination.href.next %}
-  <a class="pagination-next" rel="next" href="{{ pagination.href.next | url }}">Older</a>
+  <a class="pagination-next" rel="next" href="{{ pagination.href.next | url }}">Next <span aria-hidden="true">&rarr;</span></a>
   {% endif %}
 </nav>
 {% endif %}

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

@@ -1,24 +1,57 @@
-{# A list of documents, newest first. Expects `posts`. #}
-{% import "partials/tags.njk" as taxonomy %}
+{#
+  The feed a listing is made of: `h-feed` of `h-entry` items, as the source
+  design lists them (decision-16).
+
+  Expects `posts`. Each 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.
+
+  `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 %}
+{% set feedTitleTag = "h" + (feedHeading | default(2)) %}
 {% if posts.length %}
-<ol class="post-list">
+<div class="feed h-feed">
   {% for post in posts %}
-  <li class="post-list-item">
-    <article class="post-summary">
-      <h2 class="post-summary-title"><a href="{{ post.url | url }}">{{ post.title }}</a></h2>
-      {% if post.date %}
-      <p class="post-meta">
-        <time datetime="{{ post.date | date("html") }}">{{ post.date | date }}</time>
-      </p>
-      {% endif %}
-      {% if post.description %}
-      <p class="post-summary-description">{{ post.description }}</p>
+  {% if not loop.first %}
+  <hr class="feed-separator">
+  {% endif %}
+  <article class="feed-item h-entry">
+    <div class="feed-content">
+      <{{ 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 %}
-      {{ taxonomy.list(post.tags) }}
-    </article>
-  </li>
+      <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>
+      <div class="feed-meta">
+        {% if 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>
+    </div>
+  </article>
   {% endfor %}
-</ol>
+</div>
 {% else %}
-<p class="empty">Nothing published yet.</p>
+<p class="empty">No posts found.</p>
 {% endif %}

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

@@ -0,0 +1,22 @@
+{#
+  The site's search box (TASK-22): a plain GET form, so a search is a URL a
+  reader can bookmark or share and the box needs no JavaScript.
+
+  `layouts/search.njk` is the only thing that includes it (TASK-105): the box
+  was in the footer of every page as well, and search is a menu item now —
+  a `Search | /search/` line like any other — so the page about searching is
+  where the box is.
+
+  Expects nothing. `query`, when the page has one, goes back in the box, so the
+  results page shows what was searched for. The label is read out rather than
+  shown, because the button beside the box already says what it is for, and it
+  wraps the field rather than naming an id, so the form can appear more than
+  once on a page without two elements sharing one.
+#}
+<form class="search-form" role="search" action="{{ "/search/" | url }}" method="get">
+  <label>
+    <span class="screen-reader-text">Search this site</span>
+    <input type="search" name="q" value="{{ query }}" placeholder="Search" maxlength="256" required>
+  </label>
+  <button type="submit">Search</button>
+</form>

package/themes/default/partials/tags.njk

@@ -1,12 +1,33 @@
-{# Macros for taxonomy links. Import as `{% import "partials/tags.njk" as taxonomy %}`. #}
+{# Macros for taxonomy links. Import as
+   `{% import "partials/tags.njk" as taxonomy with context %}` — the macros read
+   the archive bases off `site`, and an import without the context cannot see
+   it. #}
 
-{# A list of tag links. Renders nothing when the list is empty. #}
+{# A list of tag links, under whatever base the site serves its archives at
+   (`site.tagBase`, `tag` by default). The same paragraph of `p-category`
+   links the categories are — under an entry the two read as one line of what
+   it is filed under, categories first — with `rel="tag"`, which is what a
+   parser reads a tag by. Renders nothing when the list is empty. #}
 {% macro list(tags) %}
 {% if tags and tags.length %}
-<ul class="tag-list">
+<p class="post-categories">
   {% for tag in tags %}
-  <li><a class="tag" href="{{ ("/tags/" + (tag | urlencode) + "/") | url }}">{{ tag }}</a></li>
+  <a href="{{ ("/" + (site.tagBase or "tag") + "/" + (tag | urlencode) + "/") | url }}" class="p-category" rel="tag">{{ tag }}</a>
   {% endfor %}
-</ul>
+</p>
+{% endif %}
+{% endmacro %}
+
+{# The same for categories, which are the second taxonomy and archive under
+   `site.categoryBase` (`category` by default). One paragraph of `p-category`
+   links, which is what the design prints in a feed item's meta line and under
+   an entry. Renders nothing when the list is empty. #}
+{% macro categories(categories) %}
+{% if categories and categories.length %}
+<p class="post-categories">
+  {% for category in categories %}
+  <a href="{{ ("/" + (site.categoryBase or "category") + "/" + (category | urlencode) + "/") | url }}" class="p-category" rel="category">{{ category }}</a>
+  {% endfor %}
+</p>
 {% endif %}
 {% endmacro %}