@rathnasgala/theme 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "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.12",
+    "version": "0.0.13",
     "availableDesignThemes": [
       "editorial"
     ],
@@ -25,16 +25,16 @@
     "lib/provider-fixtures/embeds.v1.json": "5f26909fb433135321ddf7fdd14e45aeb702805c88f5676941166c5735143ee2",
     "lib/provider-fixtures/share-intents.v1.json": "66a8eedfcff711253ee45ceb94b53f7d5a6be3ddbbb3d1f0d4e31a114326cc0a",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
-    "src/_includes/layouts/base.njk": "1bd300b68db1786b593ae5ef4325d68f21a5c79a78ac1cb3aba09fdba57bec9d",
+    "src/_includes/layouts/base.njk": "d132b0a920e3dd9b60543394da4498b4d25b3821bdaaea0b3a5da55e9200b663",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
-    "src/_includes/components/ui.njk": "de062ca818759edb53dc5e94ab839ac9453fda1fe458c61c04d9d89ef880c6af",
+    "src/_includes/components/ui.njk": "b95eca21eb78182989c114f8d03342769553470672e7402e1330e9070c293ff5",
     "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": "3cd88a919bde8b894fe8509be8db1b07ddd9459df8b31dac83bf9b0215cd73df",
+    "src/assets/interactions.js": "fafa38854663f840fb4eb206d3ca06a836abf36bedb035a4e8ac211805709f09",
     "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
     "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
     "src/assets/embed-x.svg": "0ae74edc6790ec7e933067fe5392bce756e93fa7ad71caacf1c1ca99fa4ec9b6",

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

@@ -21,7 +21,16 @@
      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 %}
+      {# 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. #}
+      {% for reaction in [
+        { value: 'like', label: 'Like' },
+        { value: 'insightful', label: 'Insightful' },
+        { value: 'celebrate', label: 'Celebrate' },
+        { 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 %}
     </div>
     <button type="button" data-follow-article aria-pressed="false">Follow article</button>
     <form data-comment-create>

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

@@ -56,11 +56,14 @@
     <main id="main-content">{{ content | safe }}</main>
     <footer class="gala-page-footer">
       <p>&copy; {{ site.site.name }}</p>
-      {# Which footer the click came from, which language it was read in, and whose site it was.
-         site.id is the identifier available to a built page and resolves to its owner. #}
+      {# 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. #}
       {% set galaLinkPlacement = 'article-footer' if post else 'site-footer' %}
       {% set galaLinkLanguage = post.language or site.site.defaultLanguage %}
-      {% if attributionTier != 'PAID' %}<p><a href="https://gala67.com/?utm_source=gala-site&amp;utm_medium=referral&amp;utm_campaign=built-with-gala&amp;utm_content={{ galaLinkPlacement | urlencode }}&amp;utm_term={{ galaLinkLanguage | urlencode }}&amp;utm_id={{ site.site.id | urlencode }}" rel="external">Built with Gala</a></p>{% endif %}
+      {% 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 %}
     </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>

package/payload/src/assets/interactions.js

@@ -39,7 +39,10 @@ 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 });
+    if (!sessionUser) {
+      return requestSession({ kind: 'reaction', region,
+        selector: `[data-reaction="${reaction.dataset.reaction}"]` });
+    }
     const active = reaction.getAttribute('aria-pressed') !== 'true';
     const saved = await mutateEngagement(region, active ? 'reaction.add' : 'reaction.remove', {
       articleId: region.dataset.articleId,
@@ -54,7 +57,9 @@ 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 });
+    if (!sessionUser) {
+      return requestSession({ kind: 'follow', region, selector: '[data-follow-article]' });
+    }
     const active = follow.getAttribute('aria-pressed') !== 'true';
     const saved = await mutateEngagement(region, active ? 'follow.add' : 'follow.remove', {
       targetType: 'articles', targetId: region.dataset.articleId
@@ -358,7 +363,13 @@ function recordView(region) {
 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 });
+  if (!field) return;
+  const region = field.closest('[data-engagement-url]');
+  const form = field.closest('[data-comment-create], [data-comment-editor]');
+  if (!region || !form) return;
+  requestSession({ kind: 'comment', region,
+    selector: `${form.matches('[data-comment-create]') ? '[data-comment-create]' : '[data-comment-editor]'} textarea`,
+    field });
 });
 
 document.addEventListener('submit', async (event) => {
@@ -371,7 +382,9 @@ document.addEventListener('submit', async (event) => {
   const body = form.elements.body?.value;
   if (!region || typeof body !== 'string' || body.trim() === '') return;
   if (!sessionUser) {
-    return requestSession({ kind: 'comment', element: form.querySelector('textarea') });
+    return requestSession({ kind: 'comment', region,
+      selector: `${create ? '[data-comment-create]' : '[data-comment-editor]'} textarea`,
+      field: form.querySelector('textarea') });
   }
   if (create) {
     const saved = await mutateEngagement(region, 'comment.create', {
@@ -407,13 +420,14 @@ const pendingEngagementWrites = new Map();
 let pendingIntent = null;
 
 function requestSession(intent) {
-  const field = intent.element;
+  const field = intent.field;
   pendingIntent = {
     kind: intent.kind,
-    element: field,
+    region: intent.region,
+    selector: intent.selector,
     // 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
+    draft: field ? field.value : null,
+    caret: field ? field.selectionStart : null
   };
   // One window, not three. Asking used to open a modal, containing a frame, containing a
   // button, that opened a popup. The popup is the only part that has to exist, because it is
@@ -424,7 +438,7 @@ function requestSession(intent) {
   const source = new URL(frame.getAttribute('src'), window.location.href);
   const signIn = new URL('/v1/widget/session/sign-in', source.origin);
   signIn.searchParams.set('siteId', source.searchParams.get('siteId') ?? '');
-  if (field && typeof field.blur === 'function') field.blur();
+  if (field) field.blur();
   if (!window.open(signIn, 'gala-sign-in', 'popup,width=520,height=680')) {
     pendingIntent = null;
     if (status) status.textContent = 'Allow pop-ups for this site to sign in, then try again.';
@@ -434,14 +448,19 @@ function requestSession(intent) {
 /** 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;
+  // The sign-in window is still closing at the moment the session arrives, so focus set now
+  // would be handed straight back to it. Wait until this page actually holds focus.
+  if (!document.hasFocus()) return;
+  // Re-found rather than remembered: signing in re-renders the engagement region, so a node
+  // captured before the interruption may no longer be the one on the page.
+  const element = intent.region?.querySelector(intent.selector);
+  if (!element) return;
+  pendingIntent = null;
   if (intent.kind === 'comment') {
-    if ('value' in element && intent.draft != null && element.value === '') element.value = intent.draft;
+    if (intent.draft != null && element.value === '') element.value = intent.draft;
     element.focus();
-    if (intent.caret != null && 'setSelectionRange' in element) {
+    if (intent.caret != null && typeof element.setSelectionRange === 'function') {
       element.setSelectionRange(intent.caret, intent.caret);
     }
     return;
@@ -451,6 +470,12 @@ function resumeIntent() {
   element.click();
 }
 
+// Signing in happens in another window, so the moment this one is focused again is the moment
+// the reader is back and the interrupted action can be finished.
+window.addEventListener('focus', () => {
+  if (sessionUser && pendingIntent) resumeIntent();
+});
+
 document.querySelectorAll('[data-engagement-url]').forEach((region) => {
   refreshEngagement(region);
   recordView(region);