@rathnasgala/theme 0.0.1 → 0.0.5

package/payload/package.json

@@ -6,16 +6,19 @@
   "scripts": {
     "build": "eleventy",
     "test": "node --test",
-    "lint": "node --check eleventy.config.js && node --check lib/build-manifest.js && node --check lib/engagement-snapshot.js && node --check lib/publication-state.js && node --check lib/render-markdown.js && node --check lib/seo.js && node --check lib/site-config.js && node --check src/_data/buildManifest.js && node --check src/_data/engagementSnapshot.js && node --check src/_data/feedLinks.js && node --check src/_data/languages.js && node --check src/_data/site.js && node --check src/assets/interactions.js && node --check src/assets/preferences.js && node --check src/assets/search.js && node --check src/assets/theme-mode.js && node --check src/feed.11ty.js && node --check src/languages.11ty.js && node --check src/posts.11ty.js && node --check src/redirects.11ty.js && node --check src/search-index.11ty.js && node --check src/sitemap.11ty.js && node --check test/build-manifest.test.js && node --check test/component-contract.test.js && node --check test/config.test.js && node --check test/eleventy-manifest-build.test.js && node --check test/engagement-snapshot.test.js && node --check test/feed.test.js && node --check test/fixtures/xss-payloads.js && node --check test/managed-files.test.js && node --check test/preferences.test.js && node --check test/publication-state.test.js && node --check test/render-markdown.test.js && node --check test/search.test.js && node --check test/seo.test.js && node --check test/supporting-surfaces.test.js && node --check test/theme-contract.test.js && node --check test/theme-contrast.test.js && node --check test/theme-mode.test.js"
+    "lint": "node --check eleventy.config.js && node --check lib/build-manifest.js && node --check lib/engagement-snapshot.js && node --check lib/performance-budget.js && node --check lib/publication-state.js && node --check lib/render-markdown.js && node --check lib/seo.js && node --check lib/share-targets.js && node --check lib/site-config.js && node --check scripts/push.js && node --check src/_data/buildManifest.js && node --check src/_data/engagementSnapshot.js && node --check src/_data/feedLinks.js && node --check src/_data/languages.js && node --check src/_data/site.js && node --check src/assets/interactions.js && node --check src/assets/preferences.js && node --check src/assets/search.js && node --check src/assets/theme-mode.js && node --check src/feed.11ty.js && node --check src/languages.11ty.js && node --check src/posts.11ty.js && node --check src/redirects.11ty.js && node --check src/search-index.11ty.js && node --check src/sitemap.11ty.js && node --check test/build-manifest.test.js && node --check test/component-contract.test.js && node --check test/config.test.js && node --check test/eleventy-manifest-build.test.js && node --check test/engagement-client.test.js && node --check test/engagement-snapshot.test.js && node --check test/feed.test.js && node --check test/fixtures/xss-payloads.js && node --check test/managed-files.test.js && node --check test/performance-budget.test.js && node --check test/preferences.test.js && node --check test/publication-state.test.js && node --check test/render-markdown.test.js && node --check test/search.test.js && node --check test/seo.test.js && node --check test/share-targets.test.js && node --check test/supporting-surfaces.test.js && node --check test/theme-contract.test.js && node --check test/theme-contrast.test.js && node --check test/theme-mode.test.js && node --check test/theme-release-workflow.test.js",
+    "push": "node scripts/push.js"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "devDependencies": {
     "@11ty/eleventy": "3.1.6",
+    "github-slugger": "2.0.0",
     "markdown-it": "15.0.0",
     "markdown-it-footnote": "4.0.0",
     "sanitize-html": "2.17.6",
+    "shiki": "4.4.3",
     "yaml": "2.9.0"
   }
 }

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

@@ -13,5 +13,24 @@
 {% 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 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) %}<section class="gala-engagement" aria-label="Engagement" data-article-id="{{ articleId | escape }}">{% 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">Engagement data unavailable.</p>{% endif %}<output data-engagement-status aria-live="polite"></output></section>{% 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>
+  <section class="gala-engagement-actions" aria-label="Reader actions" data-engagement-actions hidden>
+    <div class="gala-reaction-actions" role="group" aria-label="React to this article">
+      {% for reaction in ['like', 'love', 'insightful', 'curious', 'celebrate', 'support'] %}<button type="button" data-reaction="{{ reaction }}" aria-pressed="false">{{ reaction | capitalize }}</button>{% endfor %}
+    </div>
+    <button type="button" data-follow-article aria-pressed="false">Follow article</button>
+    <form data-comment-create>
+      <label>Comment<textarea name="body" maxlength="5000" required></textarea></label>
+      <p data-comment-reply-context hidden></p>
+      <button type="submit">Post comment</button>
+      <button type="button" data-cancel-reply hidden>Cancel reply</button>
+    </form>
+  </section>
+  <p data-engagement-sign-in>Sign in from the account menu to comment, react, or follow.</p>
+  <output data-engagement-status aria-live="polite"></output>
+</section>
+{% 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

@@ -27,14 +27,65 @@
     <script src="{{ '/assets/theme-mode.js' | url }}" defer></script>
     <script src="{{ '/assets/preferences.js' | url }}" defer></script>
     <script src="{{ '/assets/interactions.js' | url }}" defer></script>
-    {% if searchPage %}<script src="{{ '/assets/search.js' | url }}" defer></script>{% endif %}
+    <script src="{{ '/assets/search.js' | url }}" defer></script>
   </head>
   <body>
-    <header>
-      <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light.">Theme: system</button>
-      <a href="{{ '/settings/' | url }}">Settings</a>
-      <a href="{{ '/search/' | url }}">Search</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"><path d="M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
+      </a>
+      <nav class="gala-site-header__actions" aria-label="Site controls">
+        <button class="gala-icon-control" type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light." title="Appearance">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18V3Zm0 2v14a7 7 0 0 1 0-14Z"/></svg>
+          <span class="gala-visually-hidden" data-theme-mode-label>Theme: system</span>
+        </button>
+        <button class="gala-icon-control" type="button" data-open-dialog="gala-settings-dialog" aria-label="Settings" title="Settings">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M10.6 2h2.8l.7 2.2 1.5.9 2.3-.5 1.4 2.4-1.6 1.7v1.7l1.6 1.7-1.4 2.4-2.3-.5-1.5.9-.7 2.2h-2.8l-.7-2.2-1.5-.9-2.3.5-1.4-2.4 1.6-1.7V8.7L4.7 7l1.4-2.4 2.3.5 1.5-.9.7-2.2Zm1.4 6.5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>
+        </button>
+        <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"><path d="M10.5 3a7.5 7.5 0 1 0 4.7 13.3l4.8 4.8 1.4-1.4-4.8-4.8A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"/></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">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm0 11c-5 0-8 2.5-8 5.5V21h16v-1.5C20 16.5 17 14 12 14Z"/></svg>
+        </button>
+      </nav>
     </header>
     <main id="main-content">{{ content | safe }}</main>
+    <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-theme-setting">
+        <h3 id="gala-dialog-theme-setting">Appearance</h3>
+        <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light."><span data-theme-mode-label>Theme: system</span></button>
+      </section>
+      <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>
+      <p><a href="{{ '/settings/' | url }}">Open settings page</a></p>
+    </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>
+      <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>
+          <input id="gala-dialog-search-query" name="q" type="search" autocomplete="off">
+          <button type="submit">Search</button>
+        </form>
+        <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">Gala account</h2>
+      <iframe data-gala-session-frame title="Gala account and sign in" src="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/widget/session?siteId={{ site.site.id | escape }}"></iframe>
+    </dialog>
+    {% endif %}
   </body>
 </html>

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

@@ -1,11 +1,12 @@
 ---
 layout: layouts/base.njk
 ---
-{% from "components/ui.njk" import engagementSummary, languageSwitcher, shareControl %}
+{% from "components/ui.njk" import engagementSummary, languageSwitcher, shareControl, tableOfContents %}
 <article>
   {% if post.publicationState == "published" %}<h1>{{ post.frontmatter.title }}</h1>{% 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) }}{% endif %}
-  {% if post.publicationState == "published" %}{{ shareControl(post.canonicalUrl) }}{% endif %}
+  {% 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 %}
 </article>

package/payload/src/assets/interactions.js

@@ -8,6 +8,96 @@ function selectableFallback(control) {
 }
 
 document.addEventListener('click', async (event) => {
+  const dialogControl = event.target.closest('[data-open-dialog]');
+  if (dialogControl) {
+    const dialog = document.getElementById(dialogControl.dataset.openDialog);
+    if (dialog instanceof HTMLDialogElement) dialog.showModal();
+    return;
+  }
+
+  const reaction = event.target.closest('[data-reaction]');
+  if (reaction) {
+    const region = reaction.closest('[data-engagement-url]');
+    if (!region) return;
+    const active = reaction.getAttribute('aria-pressed') !== 'true';
+    const saved = await mutateEngagement(region, active ? 'reaction.add' : 'reaction.remove', {
+      articleId: region.dataset.articleId,
+      reaction: reaction.dataset.reaction
+    });
+    if (!saved) return;
+    reaction.setAttribute('aria-pressed', String(active));
+    return;
+  }
+
+  const follow = event.target.closest('[data-follow-article]');
+  if (follow) {
+    const region = follow.closest('[data-engagement-url]');
+    if (!region) return;
+    const active = follow.getAttribute('aria-pressed') !== 'true';
+    const saved = await mutateEngagement(region, active ? 'follow.add' : 'follow.remove', {
+      targetType: 'articles', targetId: region.dataset.articleId
+    });
+    if (!saved) return;
+    follow.setAttribute('aria-pressed', String(active));
+    follow.textContent = active ? 'Unfollow article' : 'Follow article';
+    return;
+  }
+
+  const reply = event.target.closest('[data-reply-comment]');
+  if (reply) {
+    const region = reply.closest('[data-engagement-url]');
+    const form = region?.querySelector('[data-comment-create]');
+    if (!form) return;
+    form.dataset.parentCommentId = reply.dataset.replyComment;
+    const context = form.querySelector('[data-comment-reply-context]');
+    if (context) {
+      context.hidden = false;
+      context.textContent = `Replying to ${reply.dataset.replyAuthor || 'comment'}.`;
+    }
+    const cancel = form.querySelector('[data-cancel-reply]');
+    if (cancel) cancel.hidden = false;
+    form.querySelector('textarea')?.focus();
+    return;
+  }
+
+  const cancelReply = event.target.closest('[data-cancel-reply]');
+  if (cancelReply) {
+    clearReply(cancelReply.closest('[data-comment-create]'));
+    return;
+  }
+
+  const edit = event.target.closest('[data-edit-comment]');
+  if (edit) {
+    showCommentEditor(edit);
+    return;
+  }
+
+  const cancelEdit = event.target.closest('[data-cancel-comment-edit]');
+  if (cancelEdit) {
+    cancelEdit.closest('[data-comment-editor]')?.remove();
+    return;
+  }
+
+  const remove = event.target.closest('[data-delete-comment]');
+  if (remove) {
+    const region = remove.closest('[data-engagement-url]');
+    if (!region) return;
+    await mutateEngagement(region, 'comment.delete', {
+      articleId: region.dataset.articleId,
+      commentId: remove.dataset.deleteComment
+    });
+    return;
+  }
+
+  const moreComments = event.target.closest('[data-comments-cursor]');
+  if (moreComments) {
+    const region = moreComments.closest('[data-engagement-url]');
+    if (!region) return;
+    moreComments.disabled = true;
+    await refreshEngagement(region, moreComments.dataset.commentsCursor, true);
+    return;
+  }
+
   const share = event.target.closest('[data-copy-url]');
   if (share) {
     const value = share.dataset.copyUrl;
@@ -52,3 +142,297 @@ codeBlocks.forEach((pre) => {
   control.setAttribute('aria-label', 'Copy code block');
   wrapper.prepend(control);
 });
+
+function textElement(name, text, className) {
+  const element = document.createElement(name);
+  element.textContent = text;
+  if (className) element.className = className;
+  return element;
+}
+
+function engagementCounts(data) {
+  const reactionTotal = Object.values(data.reactions ?? {})
+    .reduce((total, count) => total + (Number.isSafeInteger(count) ? count : 0), 0);
+  return [
+    ['Reactions', reactionTotal],
+    ['Comments', Number.isSafeInteger(data.comments?.totalCount) ? data.comments.totalCount : 0],
+    ['Views', Number.isSafeInteger(data.views?.count) ? data.views.count : 0]
+  ];
+}
+
+function commentList(items, currentUser) {
+  const roots = document.createElement('ol');
+  roots.className = 'gala-comments';
+  const nodes = new Map();
+  for (const comment of items) {
+    const item = document.createElement('li');
+    item.dataset.commentId = comment.commentId;
+    const author = comment.author?.displayName ?? '[deleted]';
+    item.append(textElement('strong', author));
+    const body = textElement('p', comment.deleted ? '[deleted]' : comment.body);
+    body.dataset.commentBody = '';
+    item.append(body);
+    if (!comment.deleted && currentUser) {
+      const actions = document.createElement('div');
+      actions.className = 'gala-comment-actions';
+      const reply = textElement('button', 'Reply');
+      reply.type = 'button';
+      reply.dataset.replyComment = comment.commentId;
+      reply.dataset.replyAuthor = author;
+      actions.append(reply);
+      if (comment.author?.userId === currentUser.id) {
+        const edit = textElement('button', 'Edit');
+        edit.type = 'button';
+        edit.dataset.editComment = comment.commentId;
+        const remove = textElement('button', 'Delete');
+        remove.type = 'button';
+        remove.dataset.deleteComment = comment.commentId;
+        actions.append(edit, remove);
+      }
+      item.append(actions);
+    }
+    nodes.set(comment.commentId, item);
+  }
+  for (const comment of items) {
+    const item = nodes.get(comment.commentId);
+    const parent = comment.parentCommentId ? nodes.get(comment.parentCommentId) : null;
+    if (!parent) {
+      roots.append(item);
+      continue;
+    }
+    let replies = parent.querySelector(':scope > ol');
+    if (!replies) {
+      replies = document.createElement('ol');
+      replies.className = 'gala-comment-replies';
+      parent.append(replies);
+    }
+    replies.append(item);
+  }
+  return roots;
+}
+
+function renderEngagement(region, payload, appendComments = false) {
+  const data = payload?.data;
+  if (!data || typeof data !== 'object') throw new TypeError('Engagement data is invalid');
+  const live = region.querySelector('[data-engagement-live]');
+  if (!live) return;
+  if (!appendComments) live.replaceChildren();
+
+  if (!appendComments && data.profile) {
+    const profile = document.createElement('section');
+    profile.className = 'gala-engagement-profile';
+    profile.setAttribute('aria-label', 'Author profile');
+    profile.append(textElement('h2', data.profile.displayName));
+    if (data.profile.username) profile.append(textElement('p', `@${data.profile.username}`));
+    if (Number.isSafeInteger(data.profile.followerCount)) {
+      profile.append(textElement('p', `${data.profile.followerCount} followers`));
+    }
+    live.append(profile);
+  }
+
+  if (!appendComments) {
+    const summary = document.createElement('dl');
+    for (const [label, value] of engagementCounts(data)) {
+      const item = document.createElement('div');
+      item.append(textElement('dt', label), textElement('dd', String(value)));
+      summary.append(item);
+    }
+    live.append(summary);
+  }
+
+  if (Array.isArray(data.comments?.items) && data.comments.items.length > 0) {
+    live.append(commentList(data.comments.items, sessionUser));
+  }
+  live.querySelector('[data-comments-cursor]')?.remove();
+  if (data.comments?.nextCursor) {
+    const more = textElement('button', 'Load more comments');
+    more.type = 'button';
+    more.dataset.commentsCursor = data.comments.nextCursor;
+    live.append(more);
+  }
+  region.querySelector('[data-engagement-snapshot]')?.remove();
+  region.querySelector('.gala-engagement__placeholder')?.remove();
+}
+
+function clearReply(form) {
+  if (!form) return;
+  delete form.dataset.parentCommentId;
+  const context = form.querySelector('[data-comment-reply-context]');
+  if (context) {
+    context.hidden = true;
+    context.textContent = '';
+  }
+  const cancel = form.querySelector('[data-cancel-reply]');
+  if (cancel) cancel.hidden = true;
+}
+
+function showCommentEditor(control) {
+  const item = control.closest('[data-comment-id]');
+  if (!item || item.querySelector('[data-comment-editor]')) return;
+  const form = document.createElement('form');
+  form.dataset.commentEditor = control.dataset.editComment;
+  const textarea = document.createElement('textarea');
+  textarea.name = 'body';
+  textarea.maxLength = 5000;
+  textarea.required = true;
+  textarea.value = item.querySelector('[data-comment-body]')?.textContent ?? '';
+  const save = textElement('button', 'Save');
+  save.type = 'submit';
+  const cancel = textElement('button', 'Cancel');
+  cancel.type = 'button';
+  cancel.dataset.cancelCommentEdit = '';
+  form.append(textarea, save, cancel);
+  item.append(form);
+  textarea.focus();
+}
+
+async function refreshEngagement(region, commentsCursor = '', appendComments = false) {
+  const status = region.querySelector('[data-engagement-status]');
+  try {
+    const requestUrl = new URL(region.dataset.engagementUrl);
+    if (commentsCursor) requestUrl.searchParams.set('commentsCursor', commentsCursor);
+    const response = await fetch(requestUrl, {
+      headers: { Accept: 'application/json' },
+      credentials: 'omit'
+    });
+    if (!response.ok) throw new Error(`Engagement returned HTTP ${response.status}`);
+    const payload = await response.json();
+    renderEngagement(region, payload, appendComments);
+    if (status) status.textContent = payload.errors?.length
+      ? 'Some engagement data is temporarily unavailable.' : '';
+  } catch {
+    if (status) status.textContent = 'Live engagement data is temporarily unavailable.';
+  }
+}
+
+function viewCampaign() {
+  const query = new URL(window.location.href).searchParams;
+  const campaign = {};
+  for (const name of ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term']) {
+    const value = query.get(name);
+    if (value && [...value].length <= 128) campaign[name] = value;
+  }
+  return campaign;
+}
+
+function recordView(region) {
+  const requestUrl = new URL(region.dataset.engagementUrl);
+  requestUrl.pathname = requestUrl.pathname.replace(/\/engagement$/, '/views');
+  fetch(requestUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      language: document.documentElement.lang || undefined,
+      referrer: document.referrer || undefined,
+      campaign: viewCampaign()
+    }),
+    credentials: 'omit',
+    keepalive: true
+  }).catch(() => {});
+}
+
+document.addEventListener('submit', async (event) => {
+  const create = event.target.closest('[data-comment-create]');
+  const editor = event.target.closest('[data-comment-editor]');
+  if (!create && !editor) return;
+  event.preventDefault();
+  const form = create ?? editor;
+  const region = form.closest('[data-engagement-url]');
+  const body = form.elements.body?.value;
+  if (!region || typeof body !== 'string' || body.trim() === '') return;
+  if (create) {
+    const saved = await mutateEngagement(region, 'comment.create', {
+      articleId: region.dataset.articleId,
+      parentCommentId: create.dataset.parentCommentId || null,
+      body
+    });
+    if (!saved) return;
+    create.reset();
+    clearReply(create);
+  } else {
+    const saved = await mutateEngagement(region, 'comment.edit', {
+      articleId: region.dataset.articleId,
+      commentId: editor.dataset.commentEditor,
+      body
+    });
+    if (!saved) return;
+    editor.remove();
+  }
+});
+
+let sessionUser = null;
+const pendingEngagementWrites = new Map();
+
+document.querySelectorAll('[data-engagement-url]').forEach((region) => {
+  refreshEngagement(region);
+  recordView(region);
+});
+
+const sessionFrame = document.querySelector('[data-gala-session-frame]');
+
+function engagementErrorMessage(code) {
+  if (code === 'AUTHENTICATION_REQUIRED' || code === 'INVALID_BEARER_TOKEN'
+      || code === 'REAUTHENTICATION_REQUIRED') return 'Sign in again to continue.';
+  if (code === 'ENGAGEMENT_RATE_LIMITED') return 'You are posting too quickly; try again shortly.';
+  if (code === 'RESOURCE_NOT_FOUND') return 'That item is no longer available.';
+  if (code === 'INVALID_ENGAGEMENT_WRITE' || code === 'INVALID_REQUEST') return 'Check your entry and try again.';
+  if (code === 'ACCESS_DENIED') return 'That action is not available for this account.';
+  if (code === 'IDEMPOTENCY_CONFLICT' || code === 'ENGAGEMENT_STATE_CONFLICT') return 'The item changed; reload and try again.';
+  return 'The action could not be completed. Try again.';
+}
+
+function sendEngagementWrite(operation, payload) {
+  if (!sessionFrame || !sessionUser) return Promise.reject(new Error('AUTHENTICATION_REQUIRED'));
+  const requestId = crypto.randomUUID();
+  return new Promise((resolve, reject) => {
+    pendingEngagementWrites.set(requestId, { resolve, reject });
+    sessionFrame.contentWindow.postMessage({
+      type: 'gala-engagement-write', requestId, operation, payload
+    }, new URL(sessionFrame.src).origin);
+  });
+}
+
+async function mutateEngagement(region, operation, payload) {
+  const status = region.querySelector('[data-engagement-status]');
+  try {
+    if (status) status.textContent = 'Saving…';
+    await sendEngagementWrite(operation, payload);
+    if (status) status.textContent = 'Saved.';
+    await refreshEngagement(region);
+    return true;
+  } catch (error) {
+    if (status) status.textContent = engagementErrorMessage(error.message);
+    return false;
+  }
+}
+
+if (sessionFrame) {
+  const sessionOrigin = new URL(sessionFrame.src).origin;
+  window.addEventListener('message', (event) => {
+    if (event.origin !== sessionOrigin || event.source !== sessionFrame.contentWindow) return;
+    if (event.data?.type === 'gala-engagement-result') {
+      const pending = pendingEngagementWrites.get(event.data.requestId);
+      if (!pending) return;
+      pendingEngagementWrites.delete(event.data.requestId);
+      if (event.data.ok === true) pending.resolve(event.data.result);
+      else pending.reject(new Error(event.data.error?.code || 'ENGAGEMENT_WRITE_FAILED'));
+      return;
+    }
+    if (event.data?.type !== 'gala-session') return;
+    sessionUser = event.data.user && typeof event.data.user.id === 'string' ? event.data.user : null;
+    const control = document.querySelector('[data-user-control]');
+    const displayName = sessionUser?.displayName;
+    if (control) {
+      control.setAttribute('aria-label', displayName
+        ? `Account: ${displayName}` : 'Sign in or view account');
+      control.title = displayName ? `Account: ${displayName}` : 'Account';
+    }
+    document.querySelectorAll('[data-engagement-url]').forEach((region) => {
+      const actions = region.querySelector('[data-engagement-actions]');
+      const signIn = region.querySelector('[data-engagement-sign-in]');
+      if (actions) actions.hidden = !sessionUser;
+      if (signIn) signIn.hidden = Boolean(sessionUser);
+      refreshEngagement(region);
+    });
+  });
+}

package/payload/src/assets/search.js

@@ -1,6 +1,4 @@
-const search = document.querySelector('[data-gala-search]');
-
-if (search) {
+document.querySelectorAll('[data-gala-search]').forEach((search) => {
   const form = search.querySelector('form');
   const query = form?.elements.namedItem('q');
   const status = search.querySelector('[data-search-status]');
@@ -78,4 +76,4 @@ if (search) {
   const initial = new URLSearchParams(window.location.search).get('q') ?? '';
   if (query) query.value = initial;
   run(initial);
-}
+});

package/payload/src/assets/theme-mode.js

@@ -14,7 +14,9 @@ function applyMode(mode) {
   document.documentElement.dataset.mode = mode;
   const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length];
   document.querySelectorAll('[data-theme-mode-toggle]').forEach((control) => {
-    control.textContent = `Theme: ${mode}`;
+    const label = control.querySelector?.('[data-theme-mode-label]');
+    if (label) label.textContent = `Theme: ${mode}`;
+    else control.textContent = `Theme: ${mode}`;
     control.setAttribute('aria-label', `Color mode: ${mode}. Activate for ${next}.`);
   });
 }

package/payload/src/assets/theme.css

@@ -38,6 +38,45 @@ body {
   font-family: var(--gala-font-body);
 }
 
+.gala-site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-inline-size: var(--gala-content-width);
+  margin-inline: auto;
+  margin-block-end: 1.5rem;
+}
+
+.gala-site-header__actions { display: flex; gap: 0.5rem; }
+.gala-icon-control {
+  display: inline-grid;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  box-sizing: border-box;
+  padding: 0.6rem;
+  place-items: center;
+  color: inherit;
+  border: 0.125rem solid transparent;
+  border-radius: 50%;
+}
+.gala-icon-control:hover { background: var(--gala-color-surface); }
+.gala-icon-control:focus-visible { outline: 0.1875rem solid currentcolor; outline-offset: 0.1875rem; }
+.gala-icon-control svg { inline-size: 100%; block-size: 100%; fill: currentcolor; }
+
+.gala-dialog {
+  inline-size: min(42rem, calc(100% - 2rem));
+  max-block-size: calc(100% - 2rem);
+  box-sizing: border-box;
+  padding: 1.5rem;
+  color: var(--gala-color-text);
+  background: var(--gala-color-background);
+  border: 0.125rem solid var(--gala-color-border);
+  border-radius: var(--gala-radius-control);
+}
+.gala-dialog::backdrop { background: rgb(0 0 0 / 65%); }
+.gala-dialog__close { float: inline-end; }
+.gala-account-dialog iframe { inline-size: 100%; min-block-size: 22rem; border: 0; }
+
 main,
 .gala-page-footer {
   max-inline-size: var(--gala-content-width);
@@ -107,11 +146,32 @@ button:focus-visible {
 .gala-engagement dl > div { display: grid; gap: 0.25rem; }
 .gala-engagement dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
 .gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
+.gala-engagement-profile { margin-block: 1.5rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-engagement-profile > * { margin-block: 0 0.5rem; }
+.gala-comments { display: grid; gap: 1rem; padding-inline-start: 1.5rem; }
+.gala-comments li { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-engagement-actions { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
+.gala-engagement-actions[hidden] { display: none; }
+.gala-reaction-actions,
+.gala-comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.gala-engagement-actions form,
+[data-comment-editor] { display: grid; gap: 0.5rem; max-inline-size: 42rem; }
+.gala-engagement-actions label { display: grid; gap: 0.5rem; }
+.gala-engagement-actions textarea,
+[data-comment-editor] textarea { min-block-size: 7rem; padding: 0.75rem; font: inherit; }
 .gala-page-footer { margin-block-start: 4rem; padding-block-start: 1rem; border-block-start: 0.125rem solid var(--gala-color-border); }
 .gala-error-page { min-block-size: 60vh; display: grid; align-content: center; justify-items: start; }
 .gala-code-block { position: relative; }
 .gala-code-block > button { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; background: var(--gala-color-background); }
 .gala-code-block pre { overflow: auto; padding: 3.5rem 1rem 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.shiki,
+.shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
+:root[data-mode='dark'] .shiki,
+:root[data-mode='dark'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
+@media (prefers-color-scheme: dark) {
+  :root[data-mode='system'] .shiki,
+  :root[data-mode='system'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
+}
 .gala-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 
 @keyframes gala-spin { to { transform: rotate(1turn); } }