datalog-theme 0.7.0 → 0.9.0

data/_includes/components/comments-thread.html

@@ -0,0 +1,90 @@
+{%- comment -%}
+---
+optional: []
+---
+The comments thread of the `api` provider (lib/datalog/plugins/comments.rb
+renders it through the datalog_comments tag; assets/js/comments/thread.js
+fills it): the discussion under an article, read from and written to the
+site's own backend through the dynamic services (docs/dynamic-services.md).
+Reads `page.datalog_comments` (the plugin's resolved settings: `replies`,
+`moderation`, `endpoint`) and `page.url`, which keys the thread.
+{%- endcomment -%}
+{%- assign settings = page.datalog_comments -%}
+{%- capture labels_json -%}
+{
+  "loading": {{ 'comments.loading' | t | jsonify }},
+  "empty": {{ 'comments.empty' | t | jsonify }},
+  "retry": {{ 'comments.retry' | t | jsonify }},
+  "reply": {{ 'comments.reply' | t | jsonify }},
+  "replying_to": {{ 'comments.replying_to' | t | jsonify }},
+  "anonymous": {{ 'comments.anonymous' | t | jsonify }},
+  "pending": {{ 'comments.pending' | t | jsonify }},
+  "sending": {{ 'comments.sending' | t | jsonify }},
+  "posted": {{ 'comments.posted' | t | jsonify }},
+  "posted_pending": {{ 'comments.posted_pending' | t | jsonify }},
+  "name_required": {{ 'comments.name_required' | t | jsonify }},
+  "email_invalid": {{ 'comments.email_invalid' | t | jsonify }},
+  "url_invalid": {{ 'comments.url_invalid' | t | jsonify }},
+  "body_short": {{ 'comments.body_short' | 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 -%}
+<div class="comments-thread" id="comments" data-comments-thread data-comments-path="{{ page.url }}" data-comments-replies="{% if settings.replies == false %}false{% else %}true{% endif %}"{% if settings.endpoint and settings.endpoint != '' %} data-comments-endpoint="{{ settings.endpoint }}"{% endif %} data-state="idle">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-comments-labels>{{ labels_json | strip }}</script>
+  <p class="comments-thread__status" data-comments-status role="status" aria-live="polite">{% t 'comments.loading' %}</p>
+  <noscript><p class="comments-thread__noscript">{% t 'comments.noscript' %}</p></noscript>
+  <ol class="comments-thread__list" data-comments-list hidden></ol>
+  <form class="service-form comments-form" id="comments-form" data-comments-form data-state="idle" aria-busy="false" aria-labelledby="comments-form-heading" novalidate>
+    <h3 class="comments-form__heading" id="comments-form-heading">{% t 'comments.form_heading' %}</h3>
+    <p class="comments-form__replying" data-comments-replying hidden>
+      <span data-comments-replying-to></span>
+      <button type="button" class="post-tool" data-comments-cancel-reply>{% t 'comments.cancel_reply' %}</button>
+    </p>
+    <fieldset class="service-form__fields">
+      <legend class="visually-hidden">{% t 'comments.form_heading' %}</legend>
+      <div class="service-form__row">
+        <div class="service-form__field">
+          <label for="comments-name">{% t 'comments.name' %}</label>
+          <input id="comments-name" name="name" type="text" required autocomplete="name">
+          <p class="service-form__error" data-error-for="name" hidden></p>
+        </div>
+        <div class="service-form__field">
+          <label for="comments-email">{% t 'comments.email' %}</label>
+          <input id="comments-email" name="email" type="email" autocomplete="email" aria-describedby="comments-email-hint">
+          <p class="service-form__hint" id="comments-email-hint">{% t 'comments.email_hint' %}</p>
+          <p class="service-form__error" data-error-for="email" hidden></p>
+        </div>
+      </div>
+      <div class="service-form__field">
+        <label for="comments-url">{% t 'comments.url' %}</label>
+        <input id="comments-url" name="url" type="url" autocomplete="url">
+        <p class="service-form__error" data-error-for="url" hidden></p>
+      </div>
+      <div class="service-form__field">
+        <label for="comments-body">{% t 'comments.body' %}</label>
+        <textarea id="comments-body" name="body" rows="5" required></textarea>
+        <p class="service-form__error" data-error-for="body" hidden></p>
+      </div>
+      <input type="hidden" name="parent_id" value="">
+      <div class="service-form__trap" aria-hidden="true">
+        <label for="comments-website">Website</label>
+        <input id="comments-website" name="website" type="text" tabindex="-1" autocomplete="off">
+      </div>
+    </fieldset>
+    {%- if settings.moderation != false %}
+    <p class="service-form__privacy">{% t 'comments.moderated' %}</p>
+    {%- else %}
+    <p class="service-form__privacy">{% t 'comments.privacy' %}</p>
+    {%- endif %}
+    <div class="service-form__actions">
+      <button type="submit" class="post-tool">{% t 'comments.send' %}</button>
+    </div>
+    <p class="service-form__status" data-form-status role="status" aria-live="polite" hidden></p>
+  </form>
+</div>

data/_includes/components/contact-form.html

@@ -0,0 +1,120 @@
+{%- comment -%}
+---
+optional: []
+---
+The contact and collaboration form (assets/js/contact/form.js): a structured
+message to the author, research collaboration, consulting, speaking,
+mentoring, a reproducibility question, a media request or anything else,
+sent to the site's dynamic services (docs/dynamic-services.md). Rendered by
+the page layout when the page says `contact_form: true`, or included
+anywhere. Without a backend offering the feature it falls back to the
+site's email address, so the page is never empty. Categories come from
+`contact.categories`, their labels and prompts from `contact.categories.*`
+and `contact.prompts.*` in _data/i18n; `contact.prompts` in _config.yml
+overrides a prompt.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign contact = site.contact -%}
+{%- if contact.enabled != false -%}
+{%- assign mail = site.contact_email | default: site.author.email -%}
+{%- if services.base_url and services.base_url != '' and services.features.contact != false -%}
+{%- assign categories = contact.categories -%}
+{%- if categories == nil or categories.size == 0 -%}
+  {%- assign categories = "research-collaboration,consulting,speaking,mentoring,reproducibility,media,other" | split: "," -%}
+{%- endif -%}
+{%- capture labels_json -%}
+{
+  "pending": {{ 'contact.pending' | t | jsonify }},
+  "success": {{ 'contact.success' | t | jsonify }},
+  "name_required": {{ 'contact.name_required' | t | jsonify }},
+  "email_invalid": {{ 'contact.email_invalid' | t | jsonify }},
+  "subject_required": {{ 'contact.subject_required' | t | jsonify }},
+  "message_short": {{ 'contact.message_short' | 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 -%}
+{%- capture prompts_json -%}
+{
+  {%- for category in categories -%}
+  {%- assign prompt = nil -%}
+  {%- if contact.prompts -%}{%- assign prompt = contact.prompts[category] -%}{%- endif -%}
+  {%- unless prompt -%}
+    {%- assign prompt_key = "contact.prompts." | append: category -%}
+    {%- assign prompt = prompt_key | t -%}
+    {%- if prompt == prompt_key -%}{%- assign prompt = nil -%}{%- endif -%}
+  {%- endunless -%}
+  {%- if prompt -%}{{ category | jsonify }}: {{ prompt | jsonify }},{%- endif -%}
+  {%- endfor -%}
+  "": ""
+}
+{%- endcapture -%}
+{%- assign privacy = contact.privacy_notice | default: nil -%}
+{%- unless privacy -%}{%- assign privacy = 'contact.privacy' | t -%}{%- endunless -%}
+<section class="contact-form" id="contact" data-contact-form data-source-url="{{ page.url | absolute_url }}">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-contact-labels>{{ labels_json | strip }}</script>
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-contact-prompts>{{ prompts_json | strip }}</script>
+  <form class="service-form contact-form__form" id="contact-form" data-state="idle" aria-busy="false" novalidate>
+    <p class="service-form__intro">{% t 'contact.intro' %}</p>
+    <fieldset class="service-form__fields">
+      <legend class="visually-hidden">{% t 'contact.legend' %}</legend>
+      <div class="service-form__field">
+        <label for="contact-category">{% t 'contact.category' %}</label>
+        <select id="contact-category" name="category">
+          {%- for category in categories %}
+          {%- assign category_key = "contact.categories." | append: category %}
+          <option value="{{ category | escape }}">{{ category_key | t }}</option>
+          {%- endfor %}
+        </select>
+      </div>
+      <div class="service-form__row">
+        <div class="service-form__field">
+          <label for="contact-name">{% t 'contact.name' %}</label>
+          <input id="contact-name" name="name" type="text" required autocomplete="name">
+          <p class="service-form__error" data-error-for="name" hidden></p>
+        </div>
+        <div class="service-form__field">
+          <label for="contact-email">{% t 'contact.email' %}</label>
+          <input id="contact-email" name="email" type="email" required autocomplete="email">
+          <p class="service-form__error" data-error-for="email" hidden></p>
+        </div>
+      </div>
+      <div class="service-form__field">
+        <label for="contact-affiliation">{% t 'contact.affiliation' %}</label>
+        <input id="contact-affiliation" name="affiliation" type="text" autocomplete="organization">
+      </div>
+      <div class="service-form__field">
+        <label for="contact-subject">{% t 'contact.subject' %}</label>
+        <input id="contact-subject" name="subject" type="text" required>
+        <p class="service-form__error" data-error-for="subject" hidden></p>
+      </div>
+      <div class="service-form__field">
+        <label for="contact-message">{% t 'contact.message' %}</label>
+        <textarea id="contact-message" name="message" rows="7" required minlength="20" aria-describedby="contact-message-hint"></textarea>
+        <p class="service-form__hint" id="contact-message-hint" data-contact-hint>{% t 'contact.message_hint' %}</p>
+        <p class="service-form__error" data-error-for="message" hidden></p>
+      </div>
+      <div class="service-form__trap" aria-hidden="true">
+        <label for="contact-website">Website</label>
+        <input id="contact-website" name="website" type="text" tabindex="-1" autocomplete="off">
+      </div>
+    </fieldset>
+    <p class="service-form__privacy">{{ privacy }}{% if contact.retention %} {{ contact.retention }}{% endif %}</p>
+    <div class="service-form__actions">
+      <button type="submit" class="post-tool">{% t 'contact.send' %}</button>
+    </div>
+    <p class="service-form__status" data-form-status role="status" aria-live="polite" hidden></p>
+  </form>
+</section>
+{%- elsif mail -%}
+{%- capture mail_link -%}<a href="mailto:{{ mail }}">{{ mail }}</a>{%- endcapture -%}
+<section class="contact-form contact-form--fallback" id="contact">
+  <p class="contact-form__fallback">{% t 'contact.fallback' email: mail_link %}</p>
+</section>
+{%- endif -%}
+{%- endif -%}

data/_includes/components/correction-report.html

@@ -0,0 +1,82 @@
+{%- comment -%}
+---
+optional: []
+---
+"Report an error or suggest a correction" (assets/js/corrections/form.js):
+structured feedback about an article, apart from comments, sent to the
+site's dynamic services (docs/dynamic-services.md) and never shown on the
+page. Renders only when the site has a backend with the corrections feature
+on, `corrections.enabled` is not false, and the page does not say
+`corrections: false`. The categories come from `corrections.categories`,
+their labels from `corrections.categories.*` in _data/i18n.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign corrections = site.corrections -%}
+{%- if services.base_url and services.base_url != '' and services.features.corrections != false and corrections.enabled != false and page.corrections != false -%}
+{%- assign categories = corrections.categories -%}
+{%- if categories == nil or categories.size == 0 -%}
+  {%- assign categories = "mathematical-error,factual-error,citation,code,reproducibility,typo,accessibility,other" | split: "," -%}
+{%- endif -%}
+{%- capture labels_json -%}
+{
+  "pending": {{ 'corrections.pending' | t | jsonify }},
+  "success": {{ 'corrections.success' | t | jsonify }},
+  "message_short": {{ 'corrections.message_short' | t | jsonify }},
+  "email_invalid": {{ 'corrections.email_invalid' | 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 -%}
+<details class="correction-report" id="correction-report" data-correction-report data-article-url="{{ page.url | absolute_url }}" data-article-title="{{ page.title | escape }}">
+  <summary class="correction-report__summary">{% t 'corrections.summary' %}</summary>
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-correction-labels>{{ labels_json | strip }}</script>
+  <form class="service-form correction-report__form" id="correction-report-form" data-state="idle" aria-busy="false" novalidate>
+    <p class="service-form__intro">{% t 'corrections.intro' %}</p>
+    <p class="service-form__quote" data-correction-quote hidden></p>
+    <fieldset class="service-form__fields">
+      <legend class="visually-hidden">{% t 'corrections.summary' %}</legend>
+      <div class="service-form__field">
+        <label for="correction-category">{% t 'corrections.category' %}</label>
+        <select id="correction-category" name="category">
+          {%- for category in categories %}
+          {%- assign category_key = "corrections.categories." | append: category %}
+          <option value="{{ category | escape }}">{{ category_key | t }}</option>
+          {%- endfor %}
+        </select>
+      </div>
+      <div class="service-form__field">
+        <label for="correction-section">{% t 'corrections.section' %}</label>
+        <select id="correction-section" name="section">
+          <option value="">{% t 'corrections.section_any' %}</option>
+        </select>
+      </div>
+      <div class="service-form__field">
+        <label for="correction-message">{% t 'corrections.message' %}</label>
+        <textarea id="correction-message" name="message" rows="5" required minlength="20" aria-describedby="correction-message-hint"></textarea>
+        <p class="service-form__hint" id="correction-message-hint">{% t 'corrections.message_hint' %}</p>
+        <p class="service-form__error" data-error-for="message" hidden></p>
+      </div>
+      <div class="service-form__field">
+        <label for="correction-email">{% t 'corrections.contact_email' %}</label>
+        <input id="correction-email" name="contact_email" type="email" autocomplete="email" aria-describedby="correction-email-hint">
+        <p class="service-form__hint" id="correction-email-hint">{% t 'corrections.contact_hint' %}</p>
+        <p class="service-form__error" data-error-for="contact_email" hidden></p>
+      </div>
+      <input type="hidden" name="quote" value="">
+      <div class="service-form__trap" aria-hidden="true">
+        <label for="correction-website">Website</label>
+        <input id="correction-website" name="website" type="text" tabindex="-1" autocomplete="off">
+      </div>
+    </fieldset>
+    <div class="service-form__actions">
+      <button type="submit" class="post-tool">{% t 'corrections.send' %}</button>
+    </div>
+    <p class="service-form__status" data-form-status role="status" aria-live="polite" hidden></p>
+  </form>
+</details>
+{%- endif -%}

data/_includes/components/enhanced-code-block.html

@@ -104,7 +104,7 @@ Parameters:
     </div>
   </div>
 
-  <pre class="enhanced-code-block__pre{% if show_line_numbers %} enhanced-code-block__pre--numbered{% endif %}"><code id="{{ code_id }}" class="language-{{ language }}" data-code-content>{{ code_content }}</code></pre>
+  <pre class="highlight enhanced-code-block__pre{% if show_line_numbers %} enhanced-code-block__pre--numbered{% endif %}" tabindex="0"><code id="{{ code_id }}" class="language-{{ language }}" data-code-content>{{ code_content | rouge_highlight: language }}</code></pre>
 
   {%- comment -%} Feedback message {%- endcomment -%}
   <div class="enhanced-code-block__feedback" data-feedback role="status" aria-live="polite"></div>

data/_includes/components/enhanced-toc.html

@@ -27,7 +27,8 @@ Parameters:
 {%- endcapture -%}
 
 {%- if toc_markup contains '<li' -%}
-<aside class="enhanced-toc{% if collapsible %} enhanced-toc--collapsible{% endif %}"
+{%- comment -%} A <nav>: doc-toc refines the navigation landmark, and is not a role an <aside> may carry. {%- endcomment -%}
+<nav class="enhanced-toc{% if collapsible %} enhanced-toc--collapsible{% endif %}"
        data-toc-enhanced
        aria-label="{{ toc_heading }}"
        role="doc-toc">
@@ -87,7 +88,7 @@ Parameters:
       <span data-progress-percent>0</span>% complete
     </span>
   </div>
-</aside>
+</nav>
 
 <script>
   (function() {
@@ -154,7 +155,8 @@ Parameters:
         }
       }
 
-      // Smooth scroll for TOC links
+      // Scroll to TOC targets. The stylesheet's scroll-behavior decides whether
+      // the scroll is smooth, so reduced-motion preferences are respected.
       tocLinks.forEach(link => {
         link.addEventListener('click', function(e) {
           const targetId = this.getAttribute('href');
@@ -163,10 +165,7 @@ Parameters:
             const targetElement = document.querySelector(targetId);
             if (targetElement) {
               const offsetTop = targetElement.offsetTop - 80; // Account for sticky header
-              window.scrollTo({
-                top: offsetTop,
-                behavior: 'smooth'
-              });
+              window.scrollTo({ top: offsetTop });
               // Update URL without jumping
               if (history.pushState) {
                 history.pushState(null, null, targetId);

data/_includes/components/license-link.html

@@ -0,0 +1,13 @@
+{%- comment -%}
+---
+required:
+  - license
+---
+A licence's name (from the page_license or page_code_license filter), linked
+with rel="license" when the licence has a URL.
+{%- endcomment -%}
+{%- if include.license.url -%}
+<a class="license-link" rel="license" href="{{ include.license.url | escape }}">{{ include.license.name | escape }}</a>
+{%- else -%}
+<span class="license-link">{{ include.license.name | escape }}</span>
+{%- endif -%}

data/_includes/components/license-notice.html

@@ -0,0 +1,28 @@
+{%- comment -%}
+---
+required:
+  - page
+---
+The reuse terms of an article: its copyright holder and year, the licence of
+its text and figures and, when it differs, of its code samples
+(_plugins/licenses.rb). Renders nothing for a page without a licence.
+{%- endcomment -%}
+{%- assign content_license = include.page | page_license -%}
+{%- assign code_license = include.page | page_code_license -%}
+{%- if content_license or code_license -%}
+{%- capture content_link -%}{% include components/license-link.html license=content_license %}{%- endcapture -%}
+{%- capture code_link -%}{% include components/license-link.html license=code_license %}{%- endcapture -%}
+{%- assign content_link = content_link | strip -%}
+{%- assign code_link = code_link | strip -%}
+<p class="content-license">
+  {%- if content_license and content_license.holder %}
+  <span class="content-license__holder">©{% if content_license.year %} {{ content_license.year }}{% endif %} {{ content_license.holder | escape }}.</span>
+  {%- endif %}
+  {%- if content_license %}
+  {% if content_license.reserved %}{% t 'post.license.reserved' %}{% else %}{% t 'post.license.content' license: content_link %}{% endif %}
+  {%- endif %}
+  {%- if code_license %}
+  {% t 'post.license.code' license: code_link %}
+  {%- endif %}
+</p>
+{%- endif -%}

data/_includes/components/moderation-inbox.html

@@ -0,0 +1,139 @@
+{%- comment -%}
+---
+optional: []
+---
+The moderation inbox (assets/js/moderation/inbox.js, docs/moderation.md):
+what the self-hosted features received, comments awaiting approval or
+flagged as spam, correction reports, abuse reports, with the actions a
+moderator can take. Rendered by the page layout when the page says
+`moderation_inbox: true`, and only when `moderation.enabled` is true and
+there is a moderation API to talk to (`moderation.endpoint`, or the
+dynamic services' base_url).
+
+This markup is a shell and protects nothing: a static site cannot hold an
+admin secret. Every request is authenticated and authorized by the service
+or the identity-aware proxy in front of it; the settings here (an address,
+a fetch credentials mode, a sign-in link) are public.
+{%- endcomment -%}
+{%- assign moderation = site.moderation -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign endpoint = moderation.endpoint | default: '' -%}
+{%- assign has_api = false -%}
+{%- if endpoint != '' -%}{%- assign has_api = true -%}{%- endif -%}
+{%- if services.base_url and services.base_url != '' and services.features.moderation != false -%}{%- assign has_api = true -%}{%- endif -%}
+{%- if moderation.enabled == true and has_api -%}
+{%- assign categories = site.corrections.categories -%}
+{%- if categories == nil or categories.size == 0 -%}
+  {%- assign categories = "mathematical-error,factual-error,citation,code,reproducibility,typo,accessibility,other" | split: "," -%}
+{%- endif -%}
+{%- assign statuses = "pending,approved,spam,hidden,deleted,new,reviewed,accepted,rejected,resolved,open,dismissed" | split: "," -%}
+{%- assign actions = "approve,spam,hide,delete,reviewed,accept,reject,resolve,dismiss" | split: "," -%}
+{%- assign types = "comment,correction,abuse" | split: "," -%}
+{%- capture labels_json -%}
+{
+  "loading": {{ 'moderation.loading' | t | jsonify }},
+  "empty": {{ 'moderation.empty' | t | jsonify }},
+  "working": {{ 'moderation.working' | t | jsonify }},
+  "done": {{ 'moderation.done' | t | jsonify }},
+  "unauthorized": {{ 'moderation.unauthorized' | t | jsonify }},
+  "forbidden": {{ 'moderation.forbidden' | t | jsonify }},
+  "link_required": {{ 'moderation.link_required' | t | jsonify }},
+  "note": {{ 'moderation.note' | t | jsonify }},
+  "link": {{ 'moderation.link' | t | jsonify }},
+  "in_reply_to": {{ 'moderation.in_reply_to' | t | jsonify }},
+  "types": {
+    {%- for type in types -%}{%- assign key = "moderation.types." | append: type -%}
+    {{ type | jsonify }}: {{ key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  },
+  "statuses": {
+    {%- for status in statuses -%}{%- assign key = "moderation.statuses." | append: status -%}
+    {{ status | jsonify }}: {{ key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  },
+  "actions": {
+    {%- for action in actions -%}{%- assign key = "moderation.actions." | append: action -%}
+    {{ action | jsonify }}: {{ key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  },
+  "categories": {
+    {%- for category in categories -%}{%- assign key = "corrections.categories." | append: category -%}
+    {{ category | jsonify }}: {{ key | t | jsonify }}{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  },
+  "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="moderation" id="moderation" data-moderation-inbox data-moderation-site="{{ '' | absolute_url }}"{% if endpoint != '' %} data-moderation-endpoint="{{ endpoint }}"{% endif %} data-moderation-credentials="{{ moderation.credentials | default: 'include' }}" data-state="idle" aria-busy="false">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-moderation-labels>{{ labels_json | strip }}</script>
+  <p class="moderation__boundary">{% t 'moderation.boundary' %}</p>
+  <form class="service-form moderation__filters" id="moderation-filters" data-moderation-filters>
+    <fieldset class="service-form__fields moderation__filter-grid">
+      <legend class="visually-hidden">{% t 'moderation.filters' %}</legend>
+      <div class="service-form__field">
+        <label for="moderation-type">{% t 'moderation.type' %}</label>
+        <select id="moderation-type" name="type">
+          <option value="">{% t 'moderation.any_type' %}</option>
+          {%- for type in types %}{%- assign key = "moderation.types." | append: type %}
+          <option value="{{ type }}">{{ key | t }}</option>
+          {%- endfor %}
+        </select>
+      </div>
+      <div class="service-form__field">
+        <label for="moderation-status">{% t 'moderation.status' %}</label>
+        <select id="moderation-status" name="status">
+          <option value="">{% t 'moderation.queue' %}</option>
+          {%- for status in statuses %}{%- assign key = "moderation.statuses." | append: status %}
+          <option value="{{ status }}">{{ key | t }}</option>
+          {%- endfor %}
+        </select>
+      </div>
+      <div class="service-form__field">
+        <label for="moderation-category">{% t 'moderation.category' %}</label>
+        <select id="moderation-category" name="category">
+          <option value="">{% t 'moderation.any_category' %}</option>
+          {%- for category in categories %}{%- assign key = "corrections.categories." | append: category %}
+          <option value="{{ category | escape }}">{{ key | t }}</option>
+          {%- endfor %}
+        </select>
+      </div>
+      <div class="service-form__field">
+        <label for="moderation-path">{% t 'moderation.path' %}</label>
+        <input id="moderation-path" name="path" type="text" autocomplete="off">
+      </div>
+      <div class="service-form__field">
+        <label for="moderation-since">{% t 'moderation.since' %}</label>
+        <input id="moderation-since" name="since" type="date">
+      </div>
+      <div class="service-form__field">
+        <label for="moderation-search">{% t 'moderation.search' %}</label>
+        <input id="moderation-search" name="q" type="search" autocomplete="off">
+      </div>
+    </fieldset>
+    <div class="service-form__actions">
+      <button type="submit" class="post-tool">{% t 'moderation.apply' %}</button>
+      <button type="reset" class="post-tool">{% t 'moderation.reset' %}</button>
+    </div>
+  </form>
+  <p class="moderation__status" data-moderation-status role="status" aria-live="polite" hidden></p>
+  <p class="moderation__sign-in" data-moderation-sign-in hidden>
+    {%- if moderation.sign_in_url and moderation.sign_in_url != '' %}
+    <a href="{{ moderation.sign_in_url }}" rel="noopener">{% t 'moderation.sign_in' %}</a>
+    {%- else %}
+    {% t 'moderation.sign_in_hint' %}
+    {%- endif %}
+  </p>
+  <ol class="moderation__list" data-moderation-list></ol>
+  <button type="button" class="post-tool moderation__more" data-moderation-more hidden>{% t 'moderation.more' %}</button>
+</section>
+{%- else -%}
+<section class="moderation" id="moderation">
+  <p class="moderation__boundary">{% t 'moderation.unavailable' %}</p>
+</section>
+{%- endif -%}

data/_includes/components/reactions.html

@@ -0,0 +1,49 @@
+{%- comment -%}
+---
+optional: []
+---
+"Was this useful?" (assets/js/reactions/widget.js): a small set of
+reactions a reader can give an article without writing a comment, read
+from and sent to the site's dynamic services (docs/dynamic-services.md).
+Renders only when the site has a backend with the reactions feature on,
+`reactions.enabled` is not false, and the page does not say
+`reactions: false`. The set comes from `reactions.types`, the labels from
+`reactions.types.*` in _data/i18n. The counts on the buttons are filled by
+the script from the service's answer, never here.
+{%- endcomment -%}
+{%- assign services = site.dynamic_services -%}
+{%- assign reactions = site.reactions -%}
+{%- if services.base_url and services.base_url != '' and services.features.reactions != false and reactions.enabled != false and page.reactions != false -%}
+{%- assign types = reactions.types -%}
+{%- if types == nil or types.size == 0 -%}
+  {%- assign types = "useful,clear,interesting,needs-clarification" | split: "," -%}
+{%- endif -%}
+{%- capture labels_json -%}
+{
+  "sending": {{ 'reactions.sending' | t | jsonify }},
+  "thanks": {{ 'reactions.thanks' | t | jsonify }},
+  "already": {{ 'reactions.already' | 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="reactions" id="reactions" data-reactions data-reactions-path="{{ page.url }}" data-reactions-counts="{% if reactions.counts == false %}false{% else %}true{% endif %}" data-state="idle" aria-busy="false" aria-labelledby="reactions-prompt">
+  <script type="application/json" nonce="{{ page.csp_nonce }}" data-reactions-labels>{{ labels_json | strip }}</script>
+  <p class="reactions__prompt" id="reactions-prompt">{% t 'reactions.prompt' %}</p>
+  <div class="reactions__choices" role="group" aria-labelledby="reactions-prompt">
+    {%- for type in types %}
+    {%- assign type_key = "reactions.types." | append: type %}
+    <button type="button" class="reactions__choice post-tool" data-reaction="{{ type | escape }}" aria-pressed="false">
+      <span class="reactions__label">{{ type_key | t }}</span>
+      <span class="reactions__count" data-reaction-count hidden></span>
+    </button>
+    {%- endfor %}
+  </div>
+  <p class="reactions__status" data-reactions-status role="status" aria-live="polite" hidden></p>
+</section>
+{%- endif -%}

data/_includes/components/reading-list.html

@@ -0,0 +1,31 @@
+{%- comment -%}
+---
+optional: []
+---
+The articles a reader saved, with their reading progress and highlights, on
+a page of the site (assets/js/reading-state/ui.js): `{% include
+components/reading-list.html %}` on a page, named in
+theme_options.reading_state.list_url so posts link to it. Filled from this
+browser's storage; nothing comes from a server.
+{%- endcomment -%}
+{%- capture progress_label %}{% t 'post.reading_state.progress' %}{% endcapture -%}
+{%- capture highlights_label %}{% t 'post.reading_state.highlights_count' %}{% endcapture -%}
+{%- capture saved_label %}{% t 'post.reading_state.saved' %}{% endcapture -%}
+{%- capture remove_label %}{% t 'post.reading_state.remove' %}{% 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_all %}{% t 'post.reading_state.erased_all' %}{% endcapture -%}
+<div class="reading-list" data-reading-list data-progress-label="{{ progress_label | strip | escape }}" data-highlights-label="{{ highlights_label | strip | escape }}" data-saved-label="{{ saved_label | strip | escape }}" data-remove-label="{{ remove_label | strip | escape }}">
+  <p class="reading-notes__intro">{% t 'post.reading_state.intro' %}</p>
+  <p class="reading-notes__unavailable" data-reading-unavailable hidden>{% t 'post.reading_state.unavailable' %}</p>
+  <p class="reading-list__empty" data-reading-list-empty>{% t 'post.reading_state.list_empty' %}</p>
+  <ul class="reading-list__items" data-reading-list-items></ul>
+  <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-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>
+</div>