@rathnasgala/theme 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.11",
+  "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.11",
+    "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": "b62dea9dcd5eeefc020e1823ce8afc7d5b0105df56d57fdcacbf414f4edb4dd2",
+    "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": "c8ea01683941da3f81536a9c5d33d2e8d09a1f31f6090d33b53b70fa7aad621d",
+    "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,7 +56,14 @@
     <main id="main-content">{{ content | safe }}</main>
     <footer class="gala-page-footer">
       <p>&copy; {{ site.site.name }}</p>
-      {% if attributionTier != 'PAID' %}<p><a href="https://gala67.com/?utm_source=gala-site&amp;utm_medium=referral" rel="external">Built with Gala</a></p>{% endif %}
+      {# 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 %}
+      {% 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>
@@ -91,7 +98,6 @@
     <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,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,33 +420,47 @@ const pendingEngagementWrites = new Map();
 let pendingIntent = null;
 
 function requestSession(intent) {
-  const dialog = document.getElementById('gala-account-dialog');
-  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
   };
-  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();
+  // 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
+  // the only one running at the top level on the origin the identity providers accept.
+  const frame = document.querySelector('[data-gala-session-frame]');
+  const status = document.querySelector('[data-engagement-status]');
+  if (!frame) return;
+  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) 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.';
+  }
 }
 
 /** 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;
@@ -443,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);
@@ -543,13 +576,7 @@ if (sessionFrame) {
     document.querySelectorAll('[data-engagement-url]').forEach((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();
-    }
+    // Signed in on the back of an interrupted action: finish what they were doing.
+    if (sessionUser && pendingIntent) resumeIntent();
   });
 }