@rathnasgala/theme 0.0.20 → 2.0.2

package/payload/src/_includes/components/ui.njk

@@ -10,19 +10,21 @@
 {% macro loading(label='Loading') %}<div class="gala-loading" role="status"><span class="gala-loading__indicator" aria-hidden="true"></span><span class="gala-visually-hidden">{{ label }}</span></div>{% endmacro %}
 {% macro pagination(previous='', next='') %}<nav class="gala-pagination" aria-label="Pagination">{% if previous %}<a href="{{ previous }}" rel="prev">Previous</a>{% endif %}{% if next %}<a href="{{ next }}" rel="next">Next</a>{% endif %}</nav>{% endmacro %}
 {% macro search(action='/search/') %}<form class="gala-search" action="{{ action }}" role="search"><label for="gala-search-query">Search</label><input id="gala-search-query" name="q" type="search" autocomplete="off"><button type="submit">Search</button></form>{% endmacro %}
-{% macro tableOfContents(items) %}<nav class="gala-toc" aria-label="Table of contents"><ol>{% for item in items %}<li><a href="#{{ item.id }}">{{ item.text }}</a></li>{% endfor %}</ol></nav>{% endmacro %}
+{% macro tableOfContents(items) %}<details class="gala-toc" open><summary>On this page</summary><nav aria-label="Table of contents"><ol>{% for item in items %}<li><a href="#{{ item.id }}">{{ item.text }}</a></li>{% endfor %}</ol></nav></details>{% endmacro %}
 {% macro shareControl(canonicalUrl, targets=[]) %}<section class="gala-share" aria-label="Share this article"><button type="button" data-copy-url="{{ canonicalUrl | escape }}" aria-label="Copy canonical URL">Copy link</button><output class="gala-share__status" aria-live="polite"></output><input class="gala-share__fallback" value="{{ canonicalUrl | escape }}" readonly aria-label="Canonical URL">{% if targets.length %}<ul>{% for target in targets %}<li><a href="{{ target.url | escape }}" rel="noopener noreferrer" aria-label="Share on {{ target.label | escape }}">{{ target.label }}</a></li>{% endfor %}</ul>{% endif %}</section>{% endmacro %}
 {% macro languageSwitcher(links, currentLanguage) %}{% if links.length > 2 %}<label>Preferred language <select data-language-preference data-navigate-on-selection>{% for link in links %}{% if link.hreflang != "x-default" %}<option value="{{ link.hreflang | escape }}" data-url="{{ link.href | escape }}"{% if link.hreflang == currentLanguage %} selected{% endif %}>{{ link.hreflang }}</option>{% endif %}{% endfor %}</select></label>{% endif %}{% endmacro %}
-{% macro engagementSummary(articleId, engagement, apiBaseUrl) %}
-<section class="gala-engagement" aria-label="Engagement" data-article-id="{{ articleId | escape }}" data-engagement-url="{{ apiBaseUrl | escape }}/v1/articles/{{ articleId | escape }}/engagement">
-  {% if engagement.available %}<dl data-engagement-snapshot><div><dt>Reactions</dt><dd>{{ engagement.reactions }}</dd></div><div><dt>Comments</dt><dd>{{ engagement.comments }}</dd></div><div><dt>Views</dt><dd>{{ engagement.views }}</dd></div></dl>{% else %}<p class="gala-engagement__placeholder" role="status">Loading engagement data.</p>{% endif %}
-  <div data-engagement-live></div>
-  {# Readers see what they can do before they are asked who they are. Signing in is requested
-     at the moment of intent, and the intent is replayed once they are back. #}
-  <section class="gala-engagement-actions" aria-label="Reader actions" data-engagement-actions>
-    <div class="gala-reaction-actions" role="group" aria-label="React to this article">
-      {# The six the platform actually stores (io.gala.api.engagement.ReactionType). Offering
-         any other name renders a button that can only ever fail on the way to the API. #}
+{% macro reactionIcon(value) %}<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">{% if value == 'like' %}<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>{% elif value == 'insightful' %}<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6M10 22h4"/>{% elif value == 'celebrate' %}<path d="M5.8 11.3 2 22l10.7-3.79M4 3h.01M22 8h.01M15 2h.01M22 20h.01"/><path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10M22 13l-.82-.33c-.86-.34-1.82.2-1.98 1.11-.11.7-.72 1.22-1.43 1.22H17M11 2l.33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"/><path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"/>{% elif value == 'funny' %}<path d="M15 10V9M16.472 15a6 6 0 0 1-8.943 0M9 10V9"/><circle cx="12" cy="12" r="10"/>{% elif value == 'mind-blown' %}<path d="M12 18V5M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5M17.997 5.125a4 4 0 0 1 2.526 5.77M18 18a4 4 0 0 0 2-7.464M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517M6 18a4 4 0 0 1-2-7.464M6.003 5.125a4 4 0 0 0-2.526 5.77"/>{% else %}<path d="M11 14h2a2 2 0 0 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m14.45 13.39 5.05-4.694C20.196 8 21 6.85 21 5.75a2.75 2.75 0 0 0-4.797-1.837.276.276 0 0 1-.406 0A2.75 2.75 0 0 0 11 5.75c0 1.2.802 2.248 1.5 2.946L16 11.95M2 15l6 6"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a1 1 0 0 0-2.75-2.91"/>{% endif %}</svg>{% endmacro %}
+{% macro actionRail(canonicalUrl, engagement) %}
+  <aside class="gala-action-rail" aria-label="Reader actions">
+    <dl class="gala-action-stats" data-action-stats aria-label="Article statistics">
+      {% set reactionCount = engagement.reactions if engagement.available else 0 %}{% set commentCount = engagement.comments if engagement.available else 0 %}{% set viewCount = engagement.views if engagement.available else 0 %}
+      <div title="{{ reactionCount }} reactions"><dt><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.5 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z"/></svg><span class="gala-visually-hidden">Reactions</span></dt><dd data-engagement-stat="reactions" data-stat-label="Reactions">{{ reactionCount if reactionCount >= 1000 else '&lt;1K' | safe }}</dd></div>
+      <div title="{{ commentCount }} comments"><dt><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"/></svg><span class="gala-visually-hidden">Comments</span></dt><dd data-engagement-stat="comments" data-stat-label="Comments">{{ commentCount if commentCount >= 1000 else '&lt;1K' | safe }}</dd></div>
+      <div title="{{ viewCount }} views"><dt><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg><span class="gala-visually-hidden">Views</span></dt><dd data-engagement-stat="views" data-stat-label="Views">{{ viewCount if viewCount >= 1000 else '&lt;1K' | safe }}</dd></div>
+    </dl>
+    <span class="gala-action-rail__separator gala-action-rail__separator--stats" aria-hidden="true"></span>
+    <div class="gala-action-group gala-action-group--reactions" role="group" aria-label="React to this article">
+      <div class="gala-reaction-actions">
       {% for reaction in [
         { value: 'like', label: 'Like' },
         { value: 'insightful', label: 'Insightful' },
@@ -30,16 +32,35 @@
         { value: 'funny', label: 'Funny' },
         { value: 'mind-blown', label: 'Mind blown' },
         { value: 'thank-you', label: 'Thank you' }
-      ] %}<button type="button" data-reaction="{{ reaction.value }}" aria-pressed="false">{{ reaction.label }}</button>{% endfor %}
+      ] %}<button type="button" data-reaction="{{ reaction.value }}" aria-label="{{ reaction.label }}" title="{{ reaction.label }}" aria-pressed="false">{{ reactionIcon(reaction.value) }}</button>{% endfor %}
+      </div>
+    </div>
+    <span class="gala-action-rail__separator" aria-hidden="true"></span>
+    <div class="gala-action-group gala-action-group--utilities" role="group" aria-label="Reader utilities">
+      <div class="gala-utility-actions">
+      <button type="button" data-follow-article aria-label="Follow article" title="Follow article" aria-pressed="false"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/></svg><span class="gala-visually-hidden" data-follow-label>Follow article</span></button>
+      <a href="#comments" aria-label="Comments" title="Comments"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"/></svg></a>
+      <div class="gala-share" aria-label="Share this article">
+      <button type="button" data-copy-url="{{ canonicalUrl | escape }}" aria-label="Copy link" title="Copy link"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
+      <button type="button" data-native-share="{{ canonicalUrl | escape }}" aria-label="Share" title="Share"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></svg></button>
+      <output class="gala-share__status gala-visually-hidden" aria-live="polite"></output>
+      <input class="gala-share__fallback" value="{{ canonicalUrl | escape }}" readonly aria-label="Canonical URL">
+      </div>
+      </div>
     </div>
-    <button type="button" data-follow-article aria-pressed="false">Follow article</button>
-  </section>
+  </aside>
+{% endmacro %}
+{% macro conversation(engagement) %}
+  <div id="conversation" class="gala-conversation" aria-label="Article conversation">
+  <header class="gala-conversation__header"><h2>Conversation</h2></header>
+  {# Readers see what they can do before they are asked who they are. Signing in is requested
+     at the moment of intent, and the intent is replayed once they are back. #}
   {# The conversation is an island: it owns its own state, because a thread five deep with a page
      cursor, an open reply form and an edit in progress is state, and hand-written DOM kept losing
      track of it. Nothing here is needed by a search engine — comments have always arrived from the
      API after load — so rendering them on the client costs nothing the article cares about. #}
-  <div data-gala-comments></div>
-  <output data-engagement-status aria-live="polite"></output>
-</section>
+  <div id="comments" data-gala-comments></div>
+  <output class="gala-conversation__status" data-engagement-status aria-live="polite">Loading comments…</output>
+  </div>
 {% endmacro %}
 {% macro pageFooter(siteName, links=[]) %}<footer class="gala-page-footer"><p>&copy; {{ siteName }}</p>{% if links.length %}<nav aria-label="Footer"><ul>{% for link in links %}<li><a href="{{ link.url }}">{{ link.label }}</a></li>{% endfor %}</ul></nav>{% endif %}</footer>{% endmacro %}

package/payload/src/_includes/layouts/base.njk

@@ -1,9 +1,10 @@
 <!doctype html>
-<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}"{% if site.accent %} style="--gala-accent-light: {{ site.accent.light }}; --gala-accent-dark: {{ site.accent.dark }}"{% endif %}>
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout | default('article-first') }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script>(function(){try{var m=localStorage.getItem('gala-color-mode');if(m==='light'||m==='dark'||m==='system')document.documentElement.dataset.mode=m}catch(e){}})();</script>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-{{ themeBootstrap | sha256Csp }}'{% if seo %} 'sha256-{{ seo.structuredDataJson | sha256Csp }}'{% endif %}; style-src 'self'; img-src 'self' data: https:; connect-src 'self' {{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}; frame-src {{ site.platform.apiBaseUrl or 'https://api.gala67.com' }} https://www.youtube-nocookie.com https://codepen.io; form-action 'self'; upgrade-insecure-requests">
+    <script>{{ themeBootstrap | safe }}</script>
     <title>{{ post.frontmatter.title or title }} · {{ site.site.name }}</title>
     {% if post %}<link rel="canonical" href="{{ post.canonicalUrl }}">{% endif %}
     {% for alternate in hreflangLinks %}<link rel="alternate" hreflang="{{ alternate.hreflang }}" href="{{ alternate.href }}">{% endfor %}
@@ -23,20 +24,17 @@
     {% endif %}
     {% if post.publicationState == "tombstoned" %}<meta name="robots" content="noindex">{% endif %}
     <link rel="stylesheet" href="{{ '/assets/theme.css' | url }}">
+    <link rel="stylesheet" href="{{ '/assets/accent.css' | url }}">
     <link rel="stylesheet" href="{{ '/custom.css' | url }}">
-    <script src="{{ '/assets/theme-mode.js' | url }}" defer></script>
-    <script src="{{ '/assets/preferences.js' | url }}" defer></script>
     <link rel="icon" href="{{ '/assets/favicon.svg' | url }}" type="image/svg+xml">
-    <script src="{{ '/assets/interactions.js' | url }}" defer></script>
-    <script type="module" src="{{ '/assets/engagement-comments.js' | url }}"></script>
-    <script src="{{ '/assets/search.js' | url }}" defer></script>
+    <script src="{{ '/assets/reader.js' | url }}" defer></script>
   </head>
-  <body>
+  <body{% if post %} class="gala-page--article"{% endif %}>
+    <a class="gala-skip-link" href="#main-content">Skip to content</a>
     <header class="gala-site-header">
-      <a class="gala-icon-control" href="{{ '/' | url }}" aria-label="Home" title="Home">
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.2 12 3.5l9 6.7"/><path d="M5.4 8.9V19a1.4 1.4 0 0 0 1.4 1.4h3.1v-5.1h4.2v5.1h3.1A1.4 1.4 0 0 0 18.6 19V8.9"/></svg>
-      </a>
+      <a class="gala-site-name" href="{{ '/' | url }}" aria-label="Home">{{ site.site.name }}</a>
       <nav class="gala-site-header__actions" aria-label="Site controls">
+        {% if post %}<a class="gala-header-link" href="#article">Article</a><a class="gala-header-link" href="#conversation">Conversation</a>{% endif %}
         {% if site.contact.enabled %}<a class="gala-icon-control" href="{{ '/contact/' | url }}" aria-label="Contact author" title="Contact">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.4" width="18" height="13.2" rx="2.2"/><path d="m3.9 7.3 7.2 5.1a1.6 1.6 0 0 0 1.8 0l7.2-5.1"/></svg>
         </a>{% endif %}
@@ -50,14 +48,25 @@
         <button class="gala-icon-control" type="button" data-open-dialog="gala-search-dialog" aria-label="Search" title="Search">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20.3 20.3-4.4-4.4"/></svg>
         </button>
-        <button class="gala-icon-control" type="button" data-open-dialog="gala-account-dialog" data-user-control aria-label="Sign in or view account" title="Account">
+        <button class="gala-account-control" type="button" data-open-dialog="gala-account-dialog" data-user-control aria-label="Sign in or view account" title="Account">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 20.4v-1.7a3.9 3.9 0 0 0-3.9-3.9H8.9A3.9 3.9 0 0 0 5 18.7v1.7"/><circle cx="12" cy="7.6" r="3.9"/></svg>
+          <span data-user-label>Sign in</span>
         </button>
       </nav>
     </header>
     <main id="main-content">{{ content | safe }}</main>
     <footer class="gala-page-footer">
-      <p>&copy; {{ site.site.name }}</p>
+      <section class="gala-page-footer__identity" aria-label="Publication author">
+        {% if site.site.authorProfile.avatarUrl %}<img src="{{ site.site.authorProfile.avatarUrl | escape }}" alt="" width="40" height="40">{% endif %}
+        <div class="gala-page-footer__details">
+          <p class="gala-page-footer__line">
+            {% if site.site.authorProfile.profileUrl %}<a class="gala-page-footer__author" href="{{ site.site.authorProfile.profileUrl | escape }}" rel="author">{{ site.site.authorProfile.displayName }}</a>{% else %}<strong class="gala-page-footer__author">{{ site.site.authorProfile.displayName }}</strong>{% endif %}
+            {% if site.site.publisher.name %}<span>Published by {% if site.site.publisher.url %}<a href="{{ site.site.publisher.url | escape }}" rel="publisher">{{ site.site.publisher.name }}</a>{% else %}{{ site.site.publisher.name }}{% endif %}</span>{% endif %}
+            <span>&copy; {{ site.site.name }}</span>
+          </p>
+          {% if site.site.authorProfile.bio %}<p class="gala-page-footer__bio">{{ site.site.authorProfile.bio }}</p>{% endif %}
+        </div>
+      </section>
       {# Which repository sent the traffic, which footer the click came from, which language it
          was read in, and which author owns it. Sites registered before these managed values
          existed fall back rather than emitting the literal placeholder. #}
@@ -65,21 +74,20 @@
       {% set galaLinkLanguage = post.language or site.site.defaultLanguage %}
       {% set galaLinkSource = site.site.repository if site.site.repository and site.site.repository != 'unavailable' else 'gala-site' %}
       {% set galaLinkOwner = site.site.ownerId if site.site.ownerId and site.site.ownerId != 'unavailable' else site.site.id %}
-      {% if attributionTier != 'PAID' %}<p><a href="https://gala67.com/?utm_source={{ galaLinkSource | urlencode }}&amp;utm_medium=referral&amp;utm_campaign=built-with-gala&amp;utm_content={{ galaLinkPlacement | urlencode }}&amp;utm_term={{ galaLinkLanguage | urlencode }}&amp;utm_id={{ galaLinkOwner | urlencode }}" rel="external">Built with Gala</a></p>{% endif %}
+      <nav aria-label="Publication footer"><ul>
+        {% if attributionTier != 'PAID' %}<li><a href="https://gala67.com/?utm_source={{ galaLinkSource | urlencode }}&amp;utm_medium=referral&amp;utm_campaign=powered-by-gala&amp;utm_content={{ galaLinkPlacement | urlencode }}&amp;utm_term={{ galaLinkLanguage | urlencode }}&amp;utm_id={{ galaLinkOwner | urlencode }}" rel="external">Powered by Gala</a></li>{% endif %}
+        <li><a href="https://app.gala67.com/s/terms" rel="external">Terms</a></li>
+        <li><a href="https://app.gala67.com/s/privacy" rel="external">Privacy</a></li>
+      </ul></nav>
     </footer>
     <dialog id="gala-settings-dialog" class="gala-dialog" aria-labelledby="gala-settings-title">
-      <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close settings">Close</button></form>
-      <h2 id="gala-settings-title">Reader settings</h2>
-      <section aria-labelledby="gala-dialog-language-setting">
-        <h3 id="gala-dialog-language-setting">Language preference</h3>
-        <label>Preferred language
-          <select data-language-preference>{% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}</select>
-        </label>
-      </section>
+      <header class="gala-dialog__header"><h2 id="gala-settings-title">Reader settings</h2><form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close settings">Close</button></form></header>
+      <label>Preferred language
+        <select data-language-preference>{% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}</select>
+      </label>
     </dialog>
     <dialog id="gala-search-dialog" class="gala-dialog" aria-labelledby="gala-search-title">
-      <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close search">Close</button></form>
-      <h2 id="gala-search-title">Search</h2>
+      <header class="gala-dialog__header"><h2 id="gala-search-title">Search</h2><form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close search">Close</button></form></header>
       <section data-gala-search data-index-url="{{ '/search-index.json' | url }}">
         <form class="gala-search" action="{{ '/search/' | url }}" role="search">
           <label for="gala-dialog-search-query">Search published posts</label>
@@ -89,13 +97,12 @@
         <p data-search-status role="status" aria-live="polite">Enter a search term.</p>
         <ol class="gala-search-results" data-search-results></ol>
       </section>
-      <p><a href="{{ '/search/' | url }}">Open search page</a></p>
     </dialog>
     {% if site.site.id and site.site.id != "unavailable" %}
     <dialog id="gala-account-dialog" class="gala-dialog gala-account-dialog" aria-labelledby="gala-account-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close account">Close</button></form>
       <h2 id="gala-account-title" class="gala-visually-hidden">Gala account</h2>
-      <iframe data-gala-session-frame title="Gala account and sign in" allow="identity-credentials-get" src="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/widget/session?siteId={{ site.site.id | escape }}"></iframe>
+      <iframe data-gala-session-frame title="Gala account and sign in" loading="lazy" allow="identity-credentials-get" src="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/widget/session?siteId={{ site.site.id | escape }}"></iframe>
     </dialog>
     {% endif %}
   </body>

package/payload/src/_includes/layouts/post.njk

@@ -1,12 +1,16 @@
 ---
 layout: layouts/base.njk
 ---
-{% from "components/ui.njk" import engagementSummary, languageSwitcher, shareControl, tableOfContents %}
-<article>
-  {% if post.publicationState == "published" %}<h1>{{ post.frontmatter.title }}</h1>{% endif %}
+{% from "components/ui.njk" import actionRail, conversation, languageSwitcher, tableOfContents %}
+<article id="article" class="gala-article">
+  {% if post.publicationState == "published" %}<progress class="gala-reading-progress" data-reading-progress max="1" value="0" aria-label="Reading progress"></progress><header class="gala-article-header"><p class="gala-eyebrow">Published {{ post.frontmatter.publishAfterDate }} · {{ post.language }} · {{ readingMinutes }} min read</p><h1>{{ post.frontmatter.title }}</h1>{% set byline = post.frontmatter.author or site.site.author %}{% if byline and byline != "unavailable" and byline != "New Gala Site" and byline != site.site.name %}<p class="gala-byline">By {{ byline }}</p>{% endif %}</header>{% endif %}
   {% if post.publicationState == "published" %}{{ languageSwitcher(hreflangLinks, post.language) }}{% endif %}
-  {% if postTableOfContents.length %}{{ tableOfContents(postTableOfContents) }}{% endif %}
-  {{ content | safe }}
-  {% if post.publicationState == "published" %}{{ engagementSummary(post.id, engagement, site.platform.apiBaseUrl or "https://api.gala67.com") }}{% endif %}
-  {% if post.publicationState == "published" %}{{ shareControl(post.canonicalUrl, shareTargets) }}{% endif %}
+  {% if post.publicationState == "published" %}<section class="gala-engagement" data-article-id="{{ post.id | escape }}" data-engagement-url="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/articles/{{ post.id | escape }}/engagement">{% endif %}
+    <div class="gala-reading-layout">
+      {% if postTableOfContents.length %}{{ tableOfContents(postTableOfContents) }}{% else %}<span></span>{% endif %}
+      <div class="gala-markdown">{{ content | safe }}</div>
+      {% if post.publicationState == "published" %}<div class="gala-article-boundary"><strong>Reader interactions</strong></div><span class="gala-action-dock" data-action-dock aria-hidden="true"></span>{{ actionRail(post.canonicalUrl, engagement) }}{% endif %}
+    </div>
+    {% if post.publicationState == "published" %}{{ conversation(engagement) }}{% endif %}
+  {% if post.publicationState == "published" %}</section>{% endif %}
 </article>

package/payload/src/accent.11ty.js

@@ -0,0 +1,10 @@
+export default class AccentStylesheet {
+  data() {
+    return { permalink: '/assets/accent.css', eleventyExcludeFromCollections: true };
+  }
+
+  render({ site }) {
+    if (!site.accent) return '';
+    return `:root{--gala-accent-light:${site.accent.light};--gala-accent-dark:${site.accent.dark}}\n`;
+  }
+}