@rathnasgala/theme 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Managed Gala static-site theme payload",
   "license": "MIT",
   "repository": {

package/payload/.gala/managed-files.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "themePackage": {
     "name": "@rathnasgala/theme",
-    "version": "0.0.9",
+    "version": "0.0.11",
     "availableDesignThemes": [
       "editorial"
     ],
@@ -25,23 +25,23 @@
     "lib/provider-fixtures/embeds.v1.json": "5f26909fb433135321ddf7fdd14e45aeb702805c88f5676941166c5735143ee2",
     "lib/provider-fixtures/share-intents.v1.json": "66a8eedfcff711253ee45ceb94b53f7d5a6be3ddbbb3d1f0d4e31a114326cc0a",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
-    "src/_includes/layouts/base.njk": "a37a0dfe534412bcade43719b2e2d6338463110105f84f3887e21ecc27e44b6c",
+    "src/_includes/layouts/base.njk": "b62dea9dcd5eeefc020e1823ce8afc7d5b0105df56d57fdcacbf414f4edb4dd2",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
-    "src/_includes/components/ui.njk": "3a0eeb0f7b8f0ea46ed39d4c53b810a33b997766cbae540ef063c8ecdf641809",
+    "src/_includes/components/ui.njk": "de062ca818759edb53dc5e94ab839ac9453fda1fe458c61c04d9d89ef880c6af",
     "src/_data/buildManifest.js": "628163305984e0d3537e27b0d4050f5ba5ead12a834878266d2ce8004ffe1b1e",
     "src/_data/engagementSnapshot.js": "9217dacebfaf008f7a0ad67ff4e8d1fa8fba609a9dc7e3430c78c5b32024da0e",
     "src/_data/feedLinks.js": "06c93352ebd888acb431a1c9a8be6ecff757895468e9f2d336761038751c2d5e",
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
     "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
     "src/assets/theme-mode.js": "3797c84dbaa090b5b21427a31928b5dd97f13d04d99833f5e1e74c6b50e01dcc",
-    "src/assets/interactions.js": "7b9db09494518813189c17e92e5b9621b8b17a455c895d8670452fdfa0ead557",
+    "src/assets/interactions.js": "c8ea01683941da3f81536a9c5d33d2e8d09a1f31f6090d33b53b70fa7aad621d",
     "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
     "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
     "src/assets/embed-x.svg": "0ae74edc6790ec7e933067fe5392bce756e93fa7ad71caacf1c1ca99fa4ec9b6",
     "src/assets/embed-youtube.svg": "10d192f2b14b67664fea88c8cf246321d20190def51d59fad5762e552219b067",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
-    "src/assets/theme.css": "66f4793e857af61cbee63d847418aac03ce948361025d78853ec4d05e0117f43",
+    "src/assets/theme.css": "2c835fb79531d7b4a71bc2d41a6deb6e6b3689bf8603d903a3ba93add66c0d60",
     "src/contact.njk": "f4d74d038781e15af0acef571901c91e7753a2e21b6bef617429585698839a34",
     "src/index.njk": "5c313f0fcdad3ddbfb79376bc9671b3f37539ef70c14bdbbd26d6e2e6de250e8",
     "src/feed.11ty.js": "009bd2384e08e02a9405683bab1653bab3aeaec16accb0fd01ba69b24c777da9",

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

@@ -17,7 +17,9 @@
 <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>
+  {# 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">
       {% for reaction in ['like', 'love', 'insightful', 'curious', 'celebrate', 'support'] %}<button type="button" data-reaction="{{ reaction }}" aria-pressed="false">{{ reaction | capitalize }}</button>{% endfor %}
     </div>
@@ -29,7 +31,6 @@
       <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 %}

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

@@ -91,6 +91,7 @@
     <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>
+      <p class="gala-account-dialog__invite" data-account-invite hidden>Takes a couple of clicks to authenticate yourself. No passwords, no spam.</p>
       <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>
     </dialog>
     {% endif %}

package/payload/src/assets/interactions.js

@@ -39,6 +39,7 @@ document.addEventListener('click', async (event) => {
   if (reaction) {
     const region = reaction.closest('[data-engagement-url]');
     if (!region) return;
+    if (!sessionUser) return requestSession({ kind: 'reaction', element: reaction });
     const active = reaction.getAttribute('aria-pressed') !== 'true';
     const saved = await mutateEngagement(region, active ? 'reaction.add' : 'reaction.remove', {
       articleId: region.dataset.articleId,
@@ -53,6 +54,7 @@ document.addEventListener('click', async (event) => {
   if (follow) {
     const region = follow.closest('[data-engagement-url]');
     if (!region) return;
+    if (!sessionUser) return requestSession({ kind: 'follow', element: follow });
     const active = follow.getAttribute('aria-pressed') !== 'true';
     const saved = await mutateEngagement(region, active ? 'follow.add' : 'follow.remove', {
       targetType: 'articles', targetId: region.dataset.articleId
@@ -351,6 +353,14 @@ function recordView(region) {
   }).catch(() => {});
 }
 
+// Asked at the moment of intent: the reader reaches for the comment box, and only then are they
+// asked who they are — never as a wall in front of something they have not decided to do.
+document.addEventListener('focusin', (event) => {
+  if (sessionUser || pendingIntent) return;
+  const field = event.target.closest('[data-comment-create] textarea, [data-comment-editor] textarea');
+  if (field) requestSession({ kind: 'comment', element: field });
+});
+
 document.addEventListener('submit', async (event) => {
   const create = event.target.closest('[data-comment-create]');
   const editor = event.target.closest('[data-comment-editor]');
@@ -360,6 +370,9 @@ document.addEventListener('submit', async (event) => {
   const region = form.closest('[data-engagement-url]');
   const body = form.elements.body?.value;
   if (!region || typeof body !== 'string' || body.trim() === '') return;
+  if (!sessionUser) {
+    return requestSession({ kind: 'comment', element: form.querySelector('textarea') });
+  }
   if (create) {
     const saved = await mutateEngagement(region, 'comment.create', {
       articleId: region.dataset.articleId,
@@ -381,8 +394,55 @@ document.addEventListener('submit', async (event) => {
 });
 
 let sessionUser = null;
+// The reader the current engagement render was built for: null until the frame reports, and
+// null again for a signed-out reader, so an anonymous load never re-requests.
+let renderedSessionUser = null;
 const pendingEngagementWrites = new Map();
 
+/**
+ * What the reader was doing when we had to ask who they are. Signing in is an interruption, so
+ * the interruption has to end exactly where it started: the reaction they pressed gets applied,
+ * and the comment they were typing keeps its text and its caret.
+ */
+let pendingIntent = null;
+
+function requestSession(intent) {
+  const dialog = document.getElementById('gala-account-dialog');
+  const field = intent.element;
+  pendingIntent = {
+    kind: intent.kind,
+    element: field,
+    // Held here rather than left in the DOM, because signing in re-renders the region.
+    draft: field && 'value' in field ? field.value : null,
+    caret: field && 'selectionStart' in field ? field.selectionStart : null
+  };
+  if (!(dialog instanceof HTMLDialogElement)) return;
+  const invite = dialog.querySelector('[data-account-invite]');
+  if (invite) invite.hidden = false;
+  if (field && typeof field.blur === 'function') field.blur();
+  if (!dialog.open) dialog.showModal();
+}
+
+/** Puts the reader back exactly where the sign-in interrupted them. */
+function resumeIntent() {
+  const intent = pendingIntent;
+  pendingIntent = null;
+  if (!intent) return;
+  const element = intent.element;
+  if (!element || !element.isConnected) return;
+  if (intent.kind === 'comment') {
+    if ('value' in element && intent.draft != null && element.value === '') element.value = intent.draft;
+    element.focus();
+    if (intent.caret != null && 'setSelectionRange' in element) {
+      element.setSelectionRange(intent.caret, intent.caret);
+    }
+    return;
+  }
+  // A reaction or follow was a completed decision, so carry it out rather than make them press
+  // the same thing twice.
+  element.click();
+}
+
 document.querySelectorAll('[data-engagement-url]').forEach((region) => {
   refreshEngagement(region);
   recordView(region);
@@ -475,12 +535,21 @@ if (sessionFrame) {
         ? `Account: ${displayName}` : 'Sign in or view account');
       control.title = displayName ? `Account: ${displayName}` : 'Account';
     }
+    // The session frame reports on every page load, signed in or not. Re-reading engagement
+    // then duplicated the request made on load and returned an identical payload for anyone
+    // who was not signed in. Only a change of reader can change what the API answers.
+    const changed = renderedSessionUser !== (sessionUser?.id ?? null);
+    renderedSessionUser = sessionUser?.id ?? null;
     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);
+      if (changed) refreshEngagement(region);
     });
+    // Signed in on the back of an interrupted action: close the interruption and finish it.
+    if (sessionUser && pendingIntent) {
+      const dialog = document.getElementById('gala-account-dialog');
+      const invite = dialog?.querySelector('[data-account-invite]');
+      if (invite) invite.hidden = true;
+      if (dialog instanceof HTMLDialogElement && dialog.open) dialog.close();
+      resumeIntent();
+    }
   });
 }

package/payload/src/assets/theme.css

@@ -180,6 +180,10 @@ button:focus-visible {
 .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; }
+/* Shown only when signing in interrupted something the reader had already decided to do, so it
+   reassures rather than sells. Hidden for anyone who opened the account dialog deliberately. */
+.gala-account-dialog__invite { margin-block: 0 1rem; max-inline-size: 34rem; }
+.gala-account-dialog__invite[hidden] { display: none; }
 .gala-reaction-actions,
 .gala-comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 .gala-engagement-actions form,