datalog-theme 0.7.0 → 0.9.0

data/_includes/components/reading-mode-toggle.html

@@ -0,0 +1,65 @@
+{%- comment -%}
+---
+optional: []
+---
+The reading-mode control of a post: a button that hides the site's chrome
+and the panels around the article (`body.reading-mode`, styled in
+_sass/_print.scss) and leaves the article with its metadata, its table of
+contents and the way back. Nothing is duplicated: the same article is shown
+with less around it. Escape leaves the mode. `theme_options.reading_mode.enabled:
+false` removes the control; `remember: true` keeps the choice in localStorage
+from one page to the next.
+{%- endcomment -%}
+{%- assign reading_mode = site.theme_options.reading_mode -%}
+{%- unless reading_mode.enabled == false -%}
+{%- capture reading_enter %}{% t 'post.reading_mode.enter' %}{% endcapture -%}
+{%- capture reading_exit %}{% t 'post.reading_mode.exit' %}{% endcapture -%}
+<div class="reading-mode-bar">
+  <button type="button" class="post-tool reading-mode-toggle" data-reading-mode-toggle aria-pressed="false" aria-describedby="reading-mode-hint"
+          data-label-enter="{{ reading_enter | strip | escape }}" data-label-exit="{{ reading_exit | strip | escape }}"{% if reading_mode.remember %} data-reading-mode-remember{% endif %}>
+    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z"></path>
+      <path d="M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z"></path>
+    </svg>
+    <span data-reading-mode-label>{{ reading_enter | strip }}</span>
+  </button>
+  <span class="visually-hidden" id="reading-mode-hint">{% t 'post.reading_mode.hint' %}</span>
+</div>
+<script nonce="{{ page.csp_nonce }}">
+  // Reading mode: a class on the body, the button's state and label, Escape to
+  // leave, and the choice remembered only when the site asks for it.
+  (function () {
+    var toggle = document.querySelector('[data-reading-mode-toggle]');
+    if (!toggle) return;
+    var label = toggle.querySelector('[data-reading-mode-label]');
+    var remember = toggle.hasAttribute('data-reading-mode-remember');
+    var key = 'datalog-reading-mode';
+
+    function apply(on) {
+      document.body.classList.toggle('reading-mode', on);
+      toggle.setAttribute('aria-pressed', on ? 'true' : 'false');
+      label.textContent = toggle.getAttribute(on ? 'data-label-exit' : 'data-label-enter');
+      if (!remember) return;
+      try {
+        if (on) localStorage.setItem(key, 'on');
+        else localStorage.removeItem(key);
+      } catch (error) {}
+    }
+
+    toggle.addEventListener('click', function () {
+      apply(!document.body.classList.contains('reading-mode'));
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && document.body.classList.contains('reading-mode')) {
+        apply(false);
+        toggle.focus();
+      }
+    });
+    if (remember) {
+      try {
+        if (localStorage.getItem(key) === 'on') apply(true);
+      } catch (error) {}
+    }
+  })();
+</script>
+{%- endunless -%}

data/_includes/components/reading-state-bookmark.html

@@ -0,0 +1,27 @@
+{%- comment -%}
+---
+optional: []
+---
+The "Save for later" button of a post (assets/js/reading-state/ui.js): a
+bookmark kept in this browser, and a link to the saved articles when the
+site has a page for them (theme_options.reading_state.list_url). Renders
+nothing when reading state or bookmarks are off.
+{%- endcomment -%}
+{%- assign reading_state = site.theme_options.reading_state -%}
+{%- unless reading_state.enabled == false or reading_state.bookmarks == false -%}
+{%- capture label_save %}{% t 'post.reading_state.save' %}{% endcapture -%}
+{%- capture label_saved %}{% t 'post.reading_state.saved' %}{% endcapture -%}
+{%- capture label_unavailable %}{% t 'post.reading_state.unavailable' %}{% endcapture -%}
+<button type="button" class="post-tool bookmark-toggle" data-bookmark-toggle aria-pressed="false"
+        data-article="{{ page.url | relative_url }}" data-title="{{ page.title | escape }}"
+        data-label-save="{{ label_save | strip | escape }}" data-label-saved="{{ label_saved | strip | escape }}"
+        data-unavailable="{{ label_unavailable | strip | escape }}">
+  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+  </svg>
+  <span data-bookmark-label>{{ label_save | strip }}</span>
+</button>
+{%- if reading_state.list_url %}
+<a class="post-tool post-tool--link" href="{{ reading_state.list_url | relative_url }}">{% t 'post.reading_state.saved_list' %}</a>
+{%- endif %}
+{%- endunless -%}

data/_includes/components/reading-state-panel.html

@@ -0,0 +1,71 @@
+{%- comment -%}
+---
+optional: []
+---
+A post's reading state (assets/js/reading-state/ui.js): the "resume where
+you left off" prompt, the toolbar that appears over a selection, the panel
+of private highlights and notes, and the controls to export, import and
+erase the reader's data. Everything stays in this browser. The markup is
+inert until the reading-state bundle runs; a browser without storage sees
+the message and disabled controls. Renders nothing when reading state is
+off; without progress or highlights, only the data controls remain.
+{%- endcomment -%}
+{%- assign reading_state = site.theme_options.reading_state -%}
+{%- unless reading_state.enabled == false -%}
+{%- assign want_progress = true -%}{%- if reading_state.progress == false -%}{%- assign want_progress = false -%}{%- endif -%}
+{%- assign want_highlights = true -%}{%- if reading_state.highlights == false -%}{%- assign want_highlights = false -%}{%- endif -%}
+{%- capture progress_label %}{% t 'post.reading_state.progress' %}{% endcapture -%}
+{%- capture erase_confirm %}{% t 'post.reading_state.erase_confirm' %}{% endcapture -%}
+{%- capture imported %}{% t 'post.reading_state.imported' %}{% endcapture -%}
+{%- capture import_failed %}{% t 'post.reading_state.import_failed' %}{% endcapture -%}
+{%- capture exported %}{% t 'post.reading_state.exported' %}{% endcapture -%}
+{%- capture erased_article %}{% t 'post.reading_state.erased_article' %}{% endcapture -%}
+{%- capture erased_all %}{% t 'post.reading_state.erased_all' %}{% endcapture -%}
+<div class="reading-state" data-reading-state data-article="{{ page.url | relative_url }}" data-title="{{ page.title | escape }}" data-progress="{{ want_progress }}" data-highlights="{{ want_highlights }}">
+  {%- if want_progress %}
+  <div class="reading-resume" data-reading-resume data-progress-label="{{ progress_label | strip | escape }}" role="region" aria-labelledby="reading-resume-heading" hidden>
+    <p class="reading-resume__text"><strong id="reading-resume-heading">{% t 'post.reading_state.resume' %}</strong> <span data-reading-resume-detail></span></p>
+    <div class="reading-resume__actions">
+      <button type="button" class="post-tool" data-reading-resume-go>{% t 'post.reading_state.resume_button' %}</button>
+      <button type="button" class="post-tool" data-reading-resume-dismiss>{% t 'post.reading_state.dismiss' %}</button>
+    </div>
+  </div>
+  {%- endif %}
+  {%- if want_highlights %}
+  <div class="reading-toolbar" data-reading-toolbar role="toolbar" aria-label="{% t 'post.reading_state.highlight' %}" hidden>
+    <button type="button" data-reading-highlight>{% t 'post.reading_state.highlight' %}</button>
+    <button type="button" data-reading-note>{% t 'post.reading_state.note' %}</button>
+  </div>
+  {%- endif %}
+  <section class="reading-notes" aria-labelledby="reading-notes-heading" data-reading-panel>
+    <h2 id="reading-notes-heading" class="reading-notes__heading">{% if want_highlights %}{% t 'post.reading_state.highlights_heading' %}{% else %}{% t 'post.reading_state.data_heading' %}{% endif %}</h2>
+    <p class="reading-notes__intro">{% t 'post.reading_state.intro' %}{% if want_highlights %} {% t 'post.reading_state.shortcuts' %}{% endif %}</p>
+    <p class="reading-notes__unavailable" data-reading-unavailable hidden>{% t 'post.reading_state.unavailable' %}</p>
+    {%- if want_highlights %}
+    <p class="reading-notes__empty" data-reading-empty>{% t 'post.reading_state.empty' %}</p>
+    <ul class="reading-notes__list" data-reading-list-items></ul>
+    <template data-reading-item-template>
+      <li class="reading-note" data-annotation>
+        <blockquote class="reading-note__quote" data-annotation-quote></blockquote>
+        <p class="reading-note__meta"><span data-annotation-section></span> <span class="reading-note__lost" data-annotation-lost hidden>{% t 'post.reading_state.lost' %}</span></p>
+        <label class="reading-note__label"><span>{% t 'post.reading_state.note_label' %}</span><textarea rows="2" data-annotation-note></textarea></label>
+        <div class="reading-note__actions">
+          <button type="button" class="post-tool" data-annotation-go>{% t 'post.reading_state.go_to' %}</button>
+          <button type="button" class="post-tool" data-annotation-remove>{% t 'post.reading_state.remove' %}</button>
+        </div>
+      </li>
+    </template>
+    {%- endif %}
+    <details class="reading-data">
+      <summary>{% t 'post.reading_state.data_heading' %}</summary>
+      <div class="reading-data__actions">
+        <button type="button" class="post-tool" data-reading-export data-done="{{ exported | strip | escape }}">{% t 'post.reading_state.export' %}</button>
+        <label class="post-tool reading-data__import">{% t 'post.reading_state.import' %}<input type="file" accept="application/json,.json" data-reading-import data-done="{{ imported | strip | escape }}" data-failed="{{ import_failed | strip | escape }}"></label>
+        <button type="button" class="post-tool" data-reading-erase-article data-done="{{ erased_article | strip | escape }}">{% t 'post.reading_state.erase_article' %}</button>
+        <button type="button" class="post-tool" data-reading-erase-all data-confirm="{{ erase_confirm | strip | escape }}" data-done="{{ erased_all | strip | escape }}">{% t 'post.reading_state.erase_all' %}</button>
+      </div>
+      <p class="reading-data__status" data-reading-status aria-live="polite"></p>
+    </details>
+  </section>
+</div>
+{%- endunless -%}

data/_includes/components/reproducibility.html

@@ -0,0 +1,61 @@
+{%- comment -%}
+---
+required:
+  - page
+---
+"Reproduce this analysis": the code, data, notebook, environment and results
+behind an article (`reproducibility` in front matter, read by the
+page_reproducibility filter, _plugins/reproducibility.rb). Shows the
+artifacts given, each with its identifiers, and renders nothing without one.
+Site paths already carry the baseurl.
+{%- endcomment -%}
+{%- assign reproduce = include.page | page_reproducibility -%}
+{%- if reproduce -%}
+<section class="reproduce" aria-labelledby="reproduce-heading">
+  <h2 id="reproduce-heading" class="reproduce__heading">{% t 'post.reproduce.heading' %}</h2>
+  <p class="reproduce__intro">{% t 'post.reproduce.intro' %}</p>
+  <dl class="reproduce__list">
+    {%- for artifact in reproduce.artifacts %}
+    {%- assign kind_key = 'post.reproduce.' | append: artifact.kind %}
+    <div class="reproduce__item reproduce__item--{{ artifact.kind }}">
+      <dt>{{ kind_key | t }}</dt>
+      <dd>
+        {%- if artifact.url %}
+        <a class="reproduce__link" href="{{ artifact.url | escape }}"{% if artifact.external %} rel="external noopener"{% endif %}>{{ artifact.label | escape }}</a>
+        {%- endif %}
+        {%- if artifact.ref %}
+        {%- capture ref_text -%}
+          {%- if artifact.ref_url -%}
+          <a href="{{ artifact.ref_url | escape }}" rel="external noopener"><code>{{ artifact.ref | escape }}</code></a>
+          {%- else -%}
+          <code>{{ artifact.ref | escape }}</code>
+          {%- endif -%}
+        {%- endcapture %}
+        <span class="reproduce__detail">{% t 'post.reproduce.ref' ref: ref_text %}</span>
+        {%- endif %}
+        {%- if artifact.version %}
+        {%- assign version_text = artifact.version | escape %}
+        <span class="reproduce__detail">{% t 'post.reproduce.version' version: version_text %}</span>
+        {%- endif %}
+        {%- if artifact.doi %}
+        <span class="reproduce__detail">DOI {{ artifact.doi | escape }}</span>
+        {%- endif %}
+        {%- if artifact.file %}
+        {%- if artifact.file_url %}
+        <a class="reproduce__link" href="{{ artifact.file_url | escape }}"{% if artifact.file_url contains '://' %} rel="external noopener"{% endif %}><code>{{ artifact.file | escape }}</code></a>
+        {%- else %}
+        <code>{{ artifact.file | escape }}</code>
+        {%- endif %}
+        {%- endif %}
+        {%- if artifact.container %}
+        <span class="reproduce__detail">{% t 'post.reproduce.container' %} <code>{{ artifact.container | escape }}</code></span>
+        {%- endif %}
+        {%- if artifact.archive %}
+        <a class="reproduce__link" href="{{ artifact.archive | escape }}" rel="external noopener">{% t 'post.reproduce.archive' %}: {{ artifact.archive_label | escape }}</a>
+        {%- endif %}
+      </dd>
+    </div>
+    {%- endfor %}
+  </dl>
+</section>
+{%- endif -%}

data/_includes/components/responsive-image.html

@@ -2,7 +2,7 @@
 {% assign alt_text = include.alt | to_s %}
 {% if image_src == '' or alt_text == '' %}
   {% comment %}Missing required parameters{% endcomment %}
-  {% assign fallback_loading = include.loading | default: site.config.datalog_image_config.lazy_loading | default: 'lazy' %}
+  {% assign fallback_loading = include.loading | default: site.datalog_image_config.lazy_loading | default: 'lazy' %}
   <img src="{{ image_src }}" alt="{{ alt_text }}" loading="{{ fallback_loading }}" decoding="async" />
 {% else %}
   {% assign baseurl = site.baseurl | default: '' %}
@@ -22,8 +22,8 @@
     {% assign normalized_src = normalized_src | replace: '//', '/' %}
     {% assign responsive_entry = manifest[normalized_src] %}
   {% endif %}
-  {% assign requested_sizes = include.sizes | default: site.config.datalog_image_config.default_sizes | default: '100vw' %}
-  {% assign loading_mode = include.loading | default: site.config.datalog_image_config.lazy_loading | default: 'lazy' %}
+  {% assign requested_sizes = include.sizes | default: site.datalog_image_config.default_sizes | default: '100vw' %}
+  {% assign loading_mode = include.loading | default: site.datalog_image_config.lazy_loading | default: 'lazy' %}
   {% if responsive_entry %}
     <picture>
       {% for source in responsive_entry.sources %}

data/_includes/components/revision-history.html

@@ -0,0 +1,39 @@
+{%- comment -%}
+---
+required:
+  - page
+optional:
+  - date_format
+---
+The revision history of an article (`revisions`, sorted newest first by
+_plugins/revisions.rb), after its body, ending with the publication date.
+Renders nothing for a page without revisions.
+{%- endcomment -%}
+{%- assign revisions = include.page.revisions -%}
+{%- if revisions and revisions.size > 0 -%}
+<section class="revision-history" id="revision-history" aria-labelledby="revision-history-heading">
+  <h2 id="revision-history-heading">{% t 'post.revisions.heading' %}</h2>
+  <ul class="revision-history__list">
+    {%- for revision in revisions -%}
+    {%- assign type_key = 'post.revisions.types.' | append: revision.type -%}
+    <li class="revision-history__item revision-history__item--{{ revision.type }}">
+      <time class="revision-history__date" datetime="{{ revision.date | date: '%Y-%m-%d' }}">{% include helpers/date-format.html date=revision.date format=include.date_format %}</time>
+      <span class="revision-history__type">{{ type_key | t }}</span>
+      <span class="revision-history__summary">{{ revision.summary | escape }}
+        {%- if revision.details_url -%}
+        {%- assign details_url = revision.details_url -%}
+        {%- unless details_url contains '://' -%}{%- assign details_url = details_url | relative_url -%}{%- endunless %}
+        <a class="revision-history__details" href="{{ details_url | escape }}">{% t 'post.revisions.details' %}</a>
+        {%- endif -%}
+      </span>
+    </li>
+    {%- endfor -%}
+    {%- if include.page.date -%}
+    <li class="revision-history__item revision-history__item--published">
+      <time class="revision-history__date" datetime="{{ include.page.date | date: '%Y-%m-%d' }}">{% include helpers/date-format.html date=include.page.date format=include.date_format %}</time>
+      <span class="revision-history__type">{% t 'post.revisions.types.published' %}</span>
+    </li>
+    {%- endif -%}
+  </ul>
+</section>
+{%- endif -%}

data/_includes/components/revision-notice.html

@@ -0,0 +1,35 @@
+{%- comment -%}
+---
+required:
+  - page
+optional:
+  - date_format
+---
+The newest correction or update of an article (`revision_notice`, set from
+`revisions` by _plugins/revisions.rb), announced under the metadata with a
+link to the full history. Renders nothing without one, or with
+`revision_notice: false` in front matter.
+{%- endcomment -%}
+{%- assign revision = include.page.revision_notice -%}
+{%- if revision -%}
+{%- capture revision_date -%}{% include helpers/date-format.html date=revision.date format=include.date_format %}{%- endcapture -%}
+{%- assign revision_date = revision_date | strip -%}
+<aside class="revision-notice revision-notice--{{ revision.type }}" aria-labelledby="revision-notice-lead">
+  <p class="revision-notice__text">
+    <strong id="revision-notice-lead" class="revision-notice__lead">
+      {%- if revision.type == 'correction' -%}
+        {% t 'post.revisions.corrected_on' date: revision_date %}
+      {%- else -%}
+        {% t 'post.revisions.updated_on' date: revision_date %}
+      {%- endif -%}
+    </strong>
+    {{ revision.summary | escape }}
+    {%- if revision.details_url -%}
+    {%- assign details_url = revision.details_url -%}
+    {%- unless details_url contains '://' -%}{%- assign details_url = details_url | relative_url -%}{%- endunless %}
+    <a class="revision-notice__details" href="{{ details_url | escape }}">{% t 'post.revisions.details' %}</a>
+    {%- endif %}
+    <a class="revision-notice__history" href="#revision-history">{% t 'post.revisions.history_link' %}</a>
+  </p>
+</aside>
+{%- endif -%}

data/_includes/components/series-nav.html

@@ -0,0 +1,64 @@
+{%- comment -%}
+---
+required:
+  - page
+optional:
+  - compact
+---
+Navigation within an article series (`series` in front matter, resolved by
+_plugins/series.rb): the series title, "Part k of n", every part in order
+with the current one marked, and the previous and next parts. With
+`compact: true`, the previous and next parts alone, for the end of the
+article. Renders nothing for a page that is not part of a series.
+{%- endcomment -%}
+{%- assign series = include.page.series -%}
+{%- if series.id -%}
+{%- capture part_of -%}{% t 'post.series.part_of' part: series.position total: series.count %}{%- endcapture -%}
+{%- capture nav_label -%}{% t 'post.series.nav_label' title: series.title %}{%- endcapture -%}
+{%- capture series_links -%}
+{%- if series.previous or series.next %}
+  <div class="series-nav__links">
+    {%- if series.previous %}
+    <a class="series-nav__link series-nav__link--previous" rel="prev" href="{{ series.previous.url | relative_url }}">
+      <span class="series-nav__link-label">{% t 'post.series.previous' %}</span>
+      <span class="series-nav__link-title">{{ series.previous.title | escape }}</span>
+    </a>
+    {%- endif %}
+    {%- if series.next %}
+    <a class="series-nav__link series-nav__link--next" rel="next" href="{{ series.next.url | relative_url }}">
+      <span class="series-nav__link-label">{% t 'post.series.next' %}</span>
+      <span class="series-nav__link-title">{{ series.next.title | escape }}</span>
+    </a>
+    {%- endif %}
+  </div>
+{%- endif %}
+{%- endcapture -%}
+{%- if include.compact -%}
+{%- if series.previous or series.next -%}
+<nav class="series-nav series-nav--compact" aria-label="{{ nav_label | strip | escape }}">
+  <p class="series-nav__context">{{ series.title | escape }} · {{ part_of | strip }}</p>
+  {{- series_links }}
+</nav>
+{%- endif -%}
+{%- else -%}
+<nav class="series-nav" aria-labelledby="series-nav-heading">
+  <p class="series-nav__heading" id="series-nav-heading">
+    <span class="series-nav__label">{% t 'post.series.label' %}</span>
+    <span class="series-nav__title">{{ series.title | escape }}</span>
+    <span class="series-nav__position">{{ part_of | strip }}</span>
+  </p>
+  {%- if series.description %}
+  <p class="series-nav__description">{{ series.description | escape }}</p>
+  {%- endif %}
+  <progress class="series-nav__progress" value="{{ series.position }}" max="{{ series.count }}" aria-hidden="true"></progress>
+  <ol class="series-nav__list">
+    {%- for part in series.parts %}
+    <li class="series-nav__part{% if part.current %} series-nav__part--current{% endif %}">
+      <a href="{{ part.url | relative_url }}"{% if part.current %} aria-current="page"{% endif %}>{{ part.title | escape }}</a>
+    </li>
+    {%- endfor %}
+  </ol>
+  {{- series_links }}
+</nav>
+{%- endif -%}
+{%- endif -%}

data/_includes/components/subscribe-form.html

@@ -0,0 +1,88 @@
+{%- comment -%}
+---
+optional:
+  - where
+---
+The newsletter subscribe form (assets/js/subscriptions/form.js): an email
+address and, when `subscriptions.topics` lists any, what to receive, sent
+to the site's dynamic services (docs/dynamic-services.md). Renders only
+when the site has a backend with the subscriptions feature on and
+`subscriptions.enabled` is not false; the footer and the post layout
+include it where `subscriptions.placement` says. `where` ("footer",
+"post" or "page", the default) keeps the ids apart when a page carries
+more than one, and picks the heading level.
+
+The footer is an include_cached, rendered once per language and reused on
+every page, so the footer form carries nothing of the page: the script
+reads the page's address from its canonical link and its language from
+<html lang>. For the same reason the block has no accessible name of its
+own, which would make two same-named landmarks on a post.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign subscriptions = site.subscriptions -%}
+{%- if services.base_url and services.base_url != '' and services.features.subscriptions != false and subscriptions.enabled != false -%}
+{%- assign where = include.where | default: 'page' -%}
+{%- assign topics = subscriptions.topics -%}
+{%- assign privacy_url = subscriptions.privacy_url | default: nil -%}
+{%- capture labels_json -%}
+{
+  "sending": {{ 'subscriptions.sending' | t | jsonify }},
+  "pending": {{ 'subscriptions.pending' | t | jsonify }},
+  "confirmed": {{ 'subscriptions.confirmed' | t | jsonify }},
+  "duplicate": {{ 'subscriptions.duplicate' | t | jsonify }},
+  "email_invalid": {{ 'subscriptions.email_invalid' | t | jsonify }},
+  "topics_required": {{ 'subscriptions.topics_required' | t | jsonify }},
+  "errors": {
+    {%- assign kinds = "disabled,unsupported,version,timeout,network,malformed,unauthorized,forbidden,not_found,conflict,invalid,rate_limited,server,http,aborted,reference" | split: "," -%}
+    {%- for kind in kinds -%}
+    {%- assign kind_key = "dynamic_services.errors." | append: kind -%}
+    {{ kind | jsonify }}: {{ kind_key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  }
+}
+{%- endcapture -%}
+<section class="subscribe subscribe--{{ where }}" data-subscribe{% unless where == 'footer' %} data-subscribe-source="{{ page.url | absolute_url }}" data-subscribe-locale="{{ page.lang | default: site.lang | default: 'en' }}"{% endunless %} data-subscribe-double-opt-in="{% if subscriptions.double_opt_in == false %}false{% else %}true{% endif %}">
+  <script type="application/json" data-subscribe-labels>{{ labels_json | strip }}</script>
+  {%- if where == 'footer' %}
+  <h3 class="subscribe__heading" id="subscribe-heading-{{ where }}">{% t 'footer.subscribe_title' %}</h3>
+  {%- else %}
+  <h2 class="subscribe__heading" id="subscribe-heading-{{ where }}">{% t 'footer.subscribe_title' %}</h2>
+  {%- endif %}
+  <p class="subscribe__description">{% t 'footer.subscribe_description' %}</p>
+  <form class="service-form subscribe__form" id="subscribe-form-{{ where }}" data-state="idle" aria-busy="false" novalidate>
+    <fieldset class="service-form__fields">
+      <legend class="visually-hidden">{% t 'footer.subscribe_title' %}</legend>
+      <div class="service-form__field">
+        <label for="subscribe-email-{{ where }}">{% t 'footer.newsletter_label' %}</label>
+        <input id="subscribe-email-{{ where }}" name="email" type="email" required autocomplete="email">
+        <p class="service-form__error" data-error-for="email" hidden></p>
+      </div>
+      {%- if topics and topics.size > 0 %}
+      <fieldset class="subscribe__topics">
+        <legend>{% t 'subscriptions.topics_legend' %}</legend>
+        {%- for topic in topics %}
+        {%- assign topic_key = "subscriptions.topics." | append: topic %}
+        <label class="subscribe__topic" for="subscribe-topic-{{ where }}-{{ topic | slugify }}">
+          <input id="subscribe-topic-{{ where }}-{{ topic | slugify }}" type="checkbox" name="topics" value="{{ topic | escape }}" checked>
+          {{ topic_key | t }}
+        </label>
+        {%- endfor %}
+        <p class="service-form__error" data-error-for="topics" hidden></p>
+      </fieldset>
+      {%- endif %}
+      <div class="service-form__trap" aria-hidden="true">
+        <label for="subscribe-website-{{ where }}">Website</label>
+        <input id="subscribe-website-{{ where }}" name="website" type="text" tabindex="-1" autocomplete="off">
+      </div>
+    </fieldset>
+    <p class="service-form__privacy">
+      {%- if subscriptions.double_opt_in == false %}{% t 'subscriptions.consent' %}{% else %}{% t 'subscriptions.consent_double' %}{% endif %}
+      {%- if privacy_url %} <a href="{{ privacy_url | relative_url }}">{% t 'subscriptions.privacy_link' %}</a>{% endif -%}
+    </p>
+    <div class="service-form__actions">
+      <button type="submit" class="post-tool">{% t 'footer.newsletter_button' %}</button>
+    </div>
+    <p class="service-form__status" data-form-status role="status" aria-live="polite" hidden></p>
+  </form>
+</section>
+{%- endif -%}

data/_includes/components/subscription-manage.html

@@ -0,0 +1,68 @@
+{%- comment -%}
+---
+optional: []
+---
+The page the newsletter's emails link to (assets/js/subscriptions/manage.js):
+`?confirm=<token>` confirms a subscription, `?unsubscribe=<token>` ends one
+after a press of the button, `?manage=<token>` changes its topics. Rendered
+by the page layout when the page says `subscription_manage: true`. Without
+a backend offering the feature it says so, since a link in an old email
+may still lead here.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign subscriptions = site.subscriptions -%}
+{%- if services.base_url and services.base_url != '' and services.features.subscriptions != false and subscriptions.enabled != false -%}
+{%- assign topics = subscriptions.topics -%}
+{%- capture labels_json -%}
+{
+  "confirming": {{ 'subscriptions.manage.confirming' | t | jsonify }},
+  "confirmed": {{ 'subscriptions.manage.confirmed' | t | jsonify }},
+  "invalid_link": {{ 'subscriptions.manage.invalid_link' | t | jsonify }},
+  "unsubscribing": {{ 'subscriptions.manage.unsubscribing' | t | jsonify }},
+  "unsubscribed": {{ 'subscriptions.manage.unsubscribed' | t | jsonify }},
+  "loading": {{ 'subscriptions.manage.loading' | t | jsonify }},
+  "saving": {{ 'subscriptions.manage.saving' | t | jsonify }},
+  "saved": {{ 'subscriptions.manage.saved' | t | jsonify }},
+  "errors": {
+    {%- assign kinds = "disabled,unsupported,version,timeout,network,malformed,unauthorized,forbidden,not_found,conflict,invalid,rate_limited,server,http,aborted,reference" | split: "," -%}
+    {%- for kind in kinds -%}
+    {%- assign kind_key = "dynamic_services.errors." | append: kind -%}
+    {{ kind | jsonify }}: {{ kind_key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  }
+}
+{%- endcapture -%}
+<section class="subscription-manage" id="subscription-manage" data-subscription-manage data-state="idle" aria-busy="false">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-manage-labels>{{ labels_json | strip }}</script>
+  <p class="subscription-manage__status" data-manage-status role="status" aria-live="polite" hidden></p>
+  <p class="subscription-manage__idle" data-manage-idle>{% t 'subscriptions.manage.idle' %}</p>
+  <div class="subscription-manage__panel" data-manage-unsubscribe-panel hidden>
+    <p>{% t 'subscriptions.manage.unsubscribe_question' %}</p>
+    <button type="button" class="post-tool" data-manage-unsubscribe>{% t 'subscriptions.manage.unsubscribe' %}</button>
+  </div>
+  <form class="service-form subscription-manage__panel" id="subscription-preferences" data-manage-preferences hidden novalidate>
+    {%- if topics and topics.size > 0 %}
+    <fieldset class="subscribe__topics">
+      <legend>{% t 'subscriptions.manage.preferences' %}</legend>
+      {%- for topic in topics %}
+      {%- assign topic_key = "subscriptions.topics." | append: topic %}
+      <label class="subscribe__topic" for="manage-topic-{{ topic | slugify }}">
+        <input id="manage-topic-{{ topic | slugify }}" type="checkbox" name="topics" value="{{ topic | escape }}">
+        {{ topic_key | t }}
+      </label>
+      {%- endfor %}
+    </fieldset>
+    {%- endif %}
+    <div class="service-form__actions">
+      {%- if topics and topics.size > 0 %}
+      <button type="submit" class="post-tool">{% t 'subscriptions.manage.save' %}</button>
+      {%- endif %}
+      <button type="button" class="post-tool" data-manage-unsubscribe>{% t 'subscriptions.manage.unsubscribe' %}</button>
+    </div>
+  </form>
+</section>
+{%- else -%}
+<section class="subscription-manage" id="subscription-manage">
+  <p class="subscription-manage__idle">{% t 'subscriptions.manage.unavailable' %}</p>
+</section>
+{%- endif -%}

data/_includes/components/webmentions.html

@@ -0,0 +1,48 @@
+{%- comment -%}
+---
+optional: []
+---
+"Mentioned elsewhere" (assets/js/webmentions/list.js): the links, replies
+and reposts other websites sent about this article, read through the
+site's dynamic services (docs/dynamic-services.md) from what the
+Webmention receiver verified. Apart from the comments, which are hosted
+here. Renders only when the site has a backend with the webmentions
+feature on, `webmentions.enabled` is not false, and the page does not say
+`webmentions: false`. The kinds shown come from `webmentions.types`.
+The receiver itself is advertised by meta/webmention-discovery.html.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign webmentions = site.webmentions -%}
+{%- if services.base_url and services.base_url != '' and services.features.webmentions != false and webmentions.enabled != false and page.webmentions != false -%}
+{%- assign types = webmentions.types -%}
+{%- if types == nil or types.size == 0 -%}
+  {%- assign types = "mention,reply" | split: "," -%}
+{%- endif -%}
+{%- capture labels_json -%}
+{
+  "loading": {{ 'webmentions.loading' | t | jsonify }},
+  "empty": {{ 'webmentions.empty' | t | jsonify }},
+  "retry": {{ 'webmentions.retry' | t | jsonify }},
+  "types": {
+    "mention": {{ 'webmentions.types.mention' | t | jsonify }},
+    "reply": {{ 'webmentions.types.reply' | t | jsonify }},
+    "repost": {{ 'webmentions.types.repost' | t | jsonify }},
+    "like": {{ 'webmentions.types.like' | t | jsonify }}
+  },
+  "errors": {
+    {%- assign kinds = "disabled,unsupported,version,timeout,network,malformed,unauthorized,forbidden,not_found,conflict,invalid,rate_limited,server,http,aborted,reference" | split: "," -%}
+    {%- for kind in kinds -%}
+    {%- assign kind_key = "dynamic_services.errors." | append: kind -%}
+    {{ kind | jsonify }}: {{ kind_key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  }
+}
+{%- endcapture -%}
+<section class="webmentions" id="webmentions" data-webmentions data-webmentions-target="{{ page.url | absolute_url }}" data-webmentions-types="{{ types | join: ',' }}" data-state="idle" aria-labelledby="webmentions-heading">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-webmentions-labels>{{ labels_json | strip }}</script>
+  <h2 class="webmentions__heading" id="webmentions-heading">{% t 'webmentions.heading' %}</h2>
+  <p class="webmentions__intro">{% t 'webmentions.intro' %}</p>
+  <p class="webmentions__status" data-webmentions-status role="status" aria-live="polite">{% t 'webmentions.loading' %}</p>
+  <ul class="webmentions__list" data-webmentions-list hidden></ul>
+</section>
+{%- endif -%}