@rathnasgala/theme 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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": "2.0.1",
+    "version": "2.0.2",
     "availableDesignThemes": [
       "editorial",
       "modern",
@@ -18,56 +18,58 @@
     ".gala/publish.yml.template": "73080241d89bd09964b797a8bcc8e18471412e11bc873efad76305b60f497d08",
     ".gitignore": "b5fa24e10155097a0d372926fd2e59e6072e7cc2cb6399bbfb4beb8b33ea315b",
     "eleventy.config.js": "0b72076f2f884a3a4a5b2ea4a124e0c1308c735526275bb847a3d6ebd082a186",
+    "lib/accent.js": "e6c921e0a3afe094b18709e3e40baa06692017fa6576d84b1ec6b7d788da8dd0",
     "lib/build-manifest.js": "88949f0112d683ca809bb67ca969e15634792423559a67bc79a534cd807e5535",
     "lib/engagement-snapshot.js": "298c11b1ab135a3a98a4e31b6320ab60dfd7fda6a9d9053df37d86282a5a6687",
     "lib/performance-budget.js": "c279622dfde237cd6e3c64775c91d770a0e1f54f5f94257ccc95d9a44de2c4c9",
     "lib/provider-fixtures/embeds.v1.json": "5f26909fb433135321ddf7fdd14e45aeb702805c88f5676941166c5735143ee2",
     "lib/provider-fixtures/share-intents.v1.json": "66a8eedfcff711253ee45ceb94b53f7d5a6be3ddbbb3d1f0d4e31a114326cc0a",
     "lib/publication-state.js": "1b59c29a18bbb1193bddea898dac3a4fb832c7bc4751263be086f3d64392dea0",
-    "lib/render-markdown.js": "40e6d6743b76de6c16d138475f188a4263967530c370d8b26a363f4df58c2caf",
-    "lib/seo.js": "107de8804931945b8e73894877fc394d6b535a9d0d969a4ba5b68f2e136e0a17",
+    "lib/render-markdown.js": "275b7da721aef1f68cda515673153471c0d597061e8fdf867c5f2b32c98b91db",
+    "lib/seo.js": "19cf1d67d5b711b8d3a533f207f267e770ee46fd4a4e6561c5f7fd4e9c1989ff",
     "lib/share-targets.js": "458aff86fab2b62a364442cd8c612565c6e0b53eef2f20cb6237cc562b1e0731",
-    "lib/site-config.js": "450b532049c9bc1b3dc44c4879e74c33b39c7b9a3e5267b15df98991a2255a20",
+    "lib/site-config.js": "679c0eaea066bbe7569bf0211696868106dd1d3bf6118fcfb7aeb75962055384",
     "package-lock.json": "dc11470b1ad897c58d91745f23ff25711c593e62972ec9fb83f4e10fd77e1ecd",
     "package.json": "1b3b70f6e94391d309625cb8cef503ee92ecd282bec587643b535ae7a14c24c0",
-    "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
+    "scripts/build-reader.js": "743194c8dc9cfb9b6631db1732b5f36a92e3a4f905a2965c71d56e1ef50c2e45",
+    "scripts/lint.js": "c4bb3c961686043fa8c79bed546758ef09d44441421d8209fec9d69f74171025",
     "src/_data/buildManifest.js": "628163305984e0d3537e27b0d4050f5ba5ead12a834878266d2ce8004ffe1b1e",
     "src/_data/engagementSnapshot.js": "9217dacebfaf008f7a0ad67ff4e8d1fa8fba609a9dc7e3430c78c5b32024da0e",
     "src/_data/feedLinks.js": "06c93352ebd888acb431a1c9a8be6ecff757895468e9f2d336761038751c2d5e",
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
-    "src/_data/site.js": "6f9b754876ab7cfa93f02a38be2962edce8245423c354426a1465513caec7911",
-    "src/_includes/components/ui.njk": "94042d32664ab4a7a426c0155b43200c87ad1472cba19dcc605e43830967a8b7",
-    "src/_includes/layouts/base.njk": "5da6243e6f5242c233808601f299b5ef3aa82fd2a332f89e271c0c886b8d2bcd",
-    "src/_includes/layouts/post.njk": "ba46fbf621fb0134137536897408eff0c4caaacace726f6ca18d0f40c101effc",
+    "src/_data/site.js": "432be73b49c20f088c304a2f7d7cd85906a747e0f3b381a4b395c5c44d68bb57",
+    "src/_includes/components/ui.njk": "0634c206c2db0507f77686635e3b406e1d8878011fd7eac64563df8499fe8f60",
+    "src/_includes/layouts/base.njk": "28043f394af8e2e3b09b6218ed3de2a506535fd5d59e67225c0fbd4431f967ff",
+    "src/_includes/layouts/post.njk": "579421054d8b547cb974a87114a96bb90cc2792b1436eb90c1f620589b2bfbfa",
+    "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
+    "src/accent.11ty.js": "52e7d3eb731c5f4649c14c4745f65da026c25b58cf462d075b8ef363f0e487dc",
     "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/engagement-comments.js": "4b12de4d05f479b8f98ccf2da07bb39fe279291842637bdb052cdaa7794761a2",
+    "src/assets/engagement-comments.js": "eda0fee471c7e42ee01a25b8aa14ed6ae9690d52b3fbb34027d97534ab62998b",
     "src/assets/engagement-transport.js": "d4108cded823f859e7a8d6e36716162422ceaf5e4b94a57ed9bd7941d5096216",
     "src/assets/favicon.svg": "8615e3d96fe37ae9ed14afb1886e7c0e690eef5b10be66ca91cccfd085a74bb6",
-    "src/assets/interactions.js": "a3290243edd874ff0a20864ea9c3883b5c00a5dae1dd5eabe83ef8dc7d0e0f9f",
+    "src/assets/interactions.js": "d7ac42be1c3453fb5a7bc1b7de52bca2bc7322e60ef235ce4953f5382a3550c5",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
+    "src/assets/reader.js": "96018c305177c5cbea77b4958ccba7800be82ace513f47fc811bdd41fb8eee63",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
     "src/assets/theme-mode.js": "944b29db11a577961a60ddcfa52f07ef2411f3f3631bea85bd79be16428c08be",
-    "src/assets/theme.css": "c3e6f8367c824ff129f318113e51f8db3c9cb584c472f9be6ea8710804c8d433",
+    "src/assets/theme.css": "43adf073599bf660534b26c7096c0fe5c25b12589d6dcb760d2d06fe2a477be4",
+    "src/client/reader.js": "5a61d629517c5315b3cb14dbae6cee226ba828e95132100f2ad36e614c57470a",
     "src/cname.11ty.js": "206fc224df91c569e18312158e7f69803061f2952513f501ada54bd06c4f8006",
     "src/contact.njk": "f4d74d038781e15af0acef571901c91e7753a2e21b6bef617429585698839a34",
     "src/feed.11ty.js": "009bd2384e08e02a9405683bab1653bab3aeaec16accb0fd01ba69b24c777da9",
     "src/index.njk": "5c313f0fcdad3ddbfb79376bc9671b3f37539ef70c14bdbbd26d6e2e6de250e8",
     "src/languages.11ty.js": "399559199c65570d7d5efd88e20254838e316f81c06d7b28ec34990e963db915",
-    "src/posts.11ty.js": "89c0e4742a67cd03f9fd13c8c8d4ca56375d97628b3cb439af7f9c92c240104a",
+    "src/posts.11ty.js": "c0bdc81183f5849670d100ceb97ecad0d1eb05f0de3eea34a0ce7427fd2e7e2a",
     "src/redirects.11ty.js": "3c163246a59f5364861db6a6f05ae88afc938a5379d86cf42776d8d49b0031f3",
     "src/search-index.11ty.js": "700dc2a2be0ef20de3a828a4612fcf7a082691eade29c6e1d75f09c24b6c6024",
     "src/search.njk": "63f2e8aeebb63c90da2e375eece639ce096cad1eff7f28628cafc46faf7ceee6",
     "src/sitemap.11ty.js": "4f233e94fb4a913ad5659116518432ed264984a7b622eba3558c77b4ec6435dc",
-    "static/robots.txt": "16ceb5ee3e0dc13aa9adf31a3ebbe45a1d965b8c2b9f72eaf84e5911e140ed95",
-    "scripts/build-reader.js": "743194c8dc9cfb9b6631db1732b5f36a92e3a4f905a2965c71d56e1ef50c2e45",
-    "src/client/reader.js": "5a61d629517c5315b3cb14dbae6cee226ba828e95132100f2ad36e614c57470a",
-    "src/assets/reader.js": "cb53c4702bae396c708b6763352843868447ca9838bbf2ee451bb81c7c0b5b6c",
-    "scripts/lint.js": "c4bb3c961686043fa8c79bed546758ef09d44441421d8209fec9d69f74171025",
-    "src/styles/theme.css": "5ba8ccced10ceecd4ead7e60980d6d2f792eb9abff1748484d1a3de0273d2dc8",
-    "src/accent.11ty.js": "52e7d3eb731c5f4649c14c4745f65da026c25b58cf462d075b8ef363f0e487dc"
+    "src/styles/theme.css": "14496b8c692ea81427386125dc92822e1f06eadab30844380f77ca710c2ff7ef",
+    "static/favicon.ico": "ad3cb0b02f0164f3af6280d0bfe712879d55cec0e9a7a567f658aaddca5a55a2",
+    "static/robots.txt": "16ceb5ee3e0dc13aa9adf31a3ebbe45a1d965b8c2b9f72eaf84e5911e140ed95"
   },
   "artifactSources": {
     ".gitignore": ".gala/artifact-files/gitignore"

package/payload/lib/accent.js

@@ -0,0 +1,105 @@
+/**
+ * A writer picks one colour; this makes it work in both modes.
+ *
+ * Offering a handful of named presets was not picking a colour, and an unconstrained colour picker
+ * is worse: most colours a person likes fail contrast against one ground or the other, and a
+ * writer cannot see that until the site is deployed. So the seed is treated as a *hue* the writer
+ * chose, and the lightness is moved — as little as possible — until the result is readable on the
+ * background it will actually sit on.
+ *
+ * The maths is OKLab, so a hue keeps its identity while its lightness changes. Doing this in sRGB
+ * shifts the colour itself, and a writer who picked a warm red gets back a different red.
+ */
+
+const LIGHT_GROUND = '#fdfcfb';
+const DARK_GROUND = '#131211';
+/** WCAG AA for body-sized text, which is what a link is. */
+const REQUIRED = 4.5;
+
+export function parseHex(value) {
+  if (typeof value !== 'string') return null;
+  const hex = value.trim().replace(/^#/, '');
+  const full = hex.length === 3 ? [...hex].map((digit) => digit + digit).join('') : hex;
+  if (!/^[0-9a-f]{6}$/i.test(full)) return null;
+  return [0, 2, 4].map((offset) => Number.parseInt(full.slice(offset, offset + 2), 16));
+}
+
+const toLinear = (channel) => {
+  const value = channel / 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+};
+
+const toSrgb = (value) => {
+  const channel = value <= 0.0031308 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - 0.055;
+  return Math.min(255, Math.max(0, Math.round(channel * 255)));
+};
+
+export function relativeLuminance([red, green, blue]) {
+  return 0.2126 * toLinear(red) + 0.7152 * toLinear(green) + 0.0722 * toLinear(blue);
+}
+
+export function contrast(a, b) {
+  const [high, low] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+  return (high + 0.05) / (low + 0.05);
+}
+
+function rgbToOklab([red, green, blue]) {
+  const [r, g, b] = [red, green, blue].map(toLinear);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ];
+}
+
+function oklabToRgb([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.2914855480 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
+  ].map(toSrgb);
+}
+
+const hex = ([red, green, blue]) =>
+  `#${[red, green, blue].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+
+/**
+ * The writer's colour, moved along its own lightness until it is readable on `ground`.
+ *
+ * Searched from the seed outwards in both directions so the answer is the nearest readable
+ * version of what they chose, rather than always darker or always lighter.
+ */
+function readableOn(seed, ground) {
+  const groundRgb = parseHex(ground);
+  if (contrast(seed, groundRgb) >= REQUIRED) return hex(seed);
+
+  const [lightness, a, b] = rgbToOklab(seed);
+  let nearest = null;
+  for (let step = 0.01; step <= 1; step += 0.01) {
+    for (const direction of [-1, 1]) {
+      const candidate = lightness + direction * step;
+      if (candidate < 0 || candidate > 1) continue;
+      const rgb = oklabToRgb([candidate, a, b]);
+      if (contrast(rgb, groundRgb) >= REQUIRED) { nearest = rgb; break; }
+    }
+    if (nearest) break;
+  }
+  // Only reachable for a ground no colour can meet, which neither of ours is.
+  return hex(nearest ?? seed);
+}
+
+/**
+ * The two values the page needs: one readable on the light ground, one on the dark.
+ * Returns null for anything that is not a colour, so the caller falls back to the look's own.
+ */
+export function accentPair(seed) {
+  const rgb = parseHex(seed);
+  if (!rgb) return null;
+  return { light: readableOn(rgb, LIGHT_GROUND), dark: readableOn(rgb, DARK_GROUND) };
+}

package/payload/lib/render-markdown.js

@@ -195,7 +195,7 @@ markdown.renderer.rules.fence = (tokens, index, options, environment, self) => {
     lang: language,
     themes: SHIKI_THEMES,
     defaultColor: false
-  }));
+  }).replaceAll(/ style="[^"]*"/g, ''));
   const tokensByIndex = environment.galaHighlightTokens ??= [];
   tokensByIndex.push(token);
   return `<div class="gala-highlight-placeholder" data-highlight-token="${token}"></div>`;

package/payload/lib/seo.js

@@ -134,9 +134,12 @@ export function postSeo({ post, site, renderedHtml }) {
     ? fallbackDescription(renderedHtml)
     : authoredDescription;
   const siteName = requiredText(site.site?.name, 'site name');
-  const author = [post.frontmatter?.author, site.site?.author, siteName]
+  const configuredAuthor = site.site?.authorProfile?.displayName || site.site?.author;
+  const author = [post.frontmatter?.author, configuredAuthor, siteName]
     .find((value) => typeof value === 'string' && value.trim() !== '')
     .trim();
+  const authorProfile = author === configuredAuthor ? site.site?.authorProfile : null;
+  const publisherProfile = site.site?.publisher;
   const pageUrl = absoluteHttpsUrl(post.pageUrl, 'page URL').toString();
   const selectedCanonical = canonicalUrl({ pageUrl, canonicalOverride: post.canonicalUrl });
   const language = Intl.getCanonicalLocales(requiredText(post.language, 'post language'))[0];
@@ -168,8 +171,19 @@ export function postSeo({ post, site, renderedHtml }) {
     datePublished,
     dateModified,
     inLanguage: language,
-    author: { '@type': 'Person', name: author },
-    publisher: { '@type': 'Organization', name: siteName },
+    author: {
+      '@type': 'Person',
+      name: author,
+      ...(authorProfile?.profileUrl ? { url: authorProfile.profileUrl } : {}),
+      ...(authorProfile?.avatarUrl ? { image: authorProfile.avatarUrl } : {})
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: publisherProfile?.name || siteName,
+      ...(publisherProfile?.url ? { url: publisherProfile.url } : {}),
+      ...(publisherProfile?.logoUrl
+        ? { logo: { '@type': 'ImageObject', url: publisherProfile.logoUrl } } : {})
+    },
     ...(imageUrl == null ? {} : { image: imageUrl })
   };
   const breadcrumbList = {

package/payload/lib/site-config.js

@@ -24,6 +24,8 @@ const LEGACY_DESIGN_VALUES = Object.freeze({
 const CONTACT_KEYS = Object.freeze([
   'enabled', 'websiteEnabled', 'phoneEnabled'
 ]);
+const PROFILE_KEYS = Object.freeze(['displayName', 'bio', 'avatarUrl', 'profileUrl']);
+const PUBLISHER_KEYS = Object.freeze(['name', 'url', 'logoUrl']);
 
 /*
  * `layout` and `palette` have always been required. The rest were added later and are optional:
@@ -104,6 +106,60 @@ export function validateContact(value) {
   });
 }
 
+function profileText(value, field, maximum) {
+  if (value == null || value === 'unavailable') return '';
+  if (typeof value !== 'string') throw new TypeError(`${field} must be a string`);
+  const normalized = value.trim();
+  if ([...normalized].length > maximum) {
+    throw new TypeError(`${field} must contain at most ${maximum} characters`);
+  }
+  return normalized;
+}
+
+function profileUrl(value, field) {
+  const normalized = profileText(value, field, 2048);
+  if (normalized === '') return '';
+  let parsed;
+  try { parsed = new URL(normalized); } catch { throw new TypeError(`${field} must be an HTTPS URL`); }
+  if (parsed.protocol !== 'https:' || parsed.username !== '' || parsed.password !== '') {
+    throw new TypeError(`${field} must be a credential-free HTTPS URL`);
+  }
+  return normalized;
+}
+
+export function validateProfile(site) {
+  const legacyAuthor = profileText(site?.author, 'site.author', 120);
+  const author = site?.authorProfile;
+  const publisher = site?.publisher;
+  if (author != null && (Array.isArray(author) || typeof author !== 'object')) {
+    throw new TypeError('site.authorProfile must be a mapping');
+  }
+  if (publisher != null && (Array.isArray(publisher) || typeof publisher !== 'object')) {
+    throw new TypeError('site.publisher must be a mapping');
+  }
+  const unknownAuthor = Object.keys(author ?? {}).filter((key) => !PROFILE_KEYS.includes(key));
+  const unknownPublisher = Object.keys(publisher ?? {}).filter((key) => !PUBLISHER_KEYS.includes(key));
+  if (unknownAuthor.length) throw new TypeError(`Unsupported author profile field: ${unknownAuthor.join(', ')}`);
+  if (unknownPublisher.length) throw new TypeError(`Unsupported publisher field: ${unknownPublisher.join(', ')}`);
+  const normalized = Object.freeze({
+    author: Object.freeze({
+      displayName: profileText(author?.displayName, 'site.authorProfile.displayName', 120) || legacyAuthor,
+      bio: profileText(author?.bio, 'site.authorProfile.bio', 500),
+      avatarUrl: profileUrl(author?.avatarUrl, 'site.authorProfile.avatarUrl'),
+      profileUrl: profileUrl(author?.profileUrl, 'site.authorProfile.profileUrl')
+    }),
+    publisher: Object.freeze({
+      name: profileText(publisher?.name, 'site.publisher.name', 120),
+      url: profileUrl(publisher?.url, 'site.publisher.url'),
+      logoUrl: profileUrl(publisher?.logoUrl, 'site.publisher.logoUrl')
+    })
+  });
+  if (!normalized.publisher.name && (normalized.publisher.url || normalized.publisher.logoUrl)) {
+    throw new TypeError('site.publisher.name is required when publisher URLs are set');
+  }
+  return normalized;
+}
+
 export async function loadSiteConfiguration({
   root = process.cwd(),
   configPath = process.env.GALA_CONFIG_PATH ?? 'site.config.yml'
@@ -126,5 +182,11 @@ export async function loadSiteConfiguration({
   validatePerformanceBudgets(config?.performance?.budgets);
   config.statistics = validateStatistics(config.statistics);
   config.contact = validateContact(config.contact);
+  const profile = validateProfile(config.site);
+  config.site = {
+    ...(config.site ?? {}),
+    authorProfile: profile.author,
+    publisher: profile.publisher
+  };
   return config;
 }

package/payload/src/_data/site.js

@@ -3,6 +3,22 @@ import { loadSiteConfiguration } from '../../lib/site-config.js';
 
 export default async function siteConfiguration() {
   const configuration = await loadSiteConfiguration();
+  const repositoryOwner = configuration?.site?.repository?.split('/')[0];
+  const author = configuration?.site?.authorProfile?.displayName || configuration?.site?.author;
+  const name = configuration?.site?.name;
+  const fallback = author && author !== 'unavailable'
+    ? author
+    : repositoryOwner && repositoryOwner !== 'unavailable' ? repositoryOwner : 'Publication';
+  configuration.site = {
+    ...configuration.site,
+    name: name && name !== 'unavailable' && name !== 'New Gala Site' ? name : fallback,
+    author: author && author !== 'unavailable' && author !== 'New Gala Site' ? author : undefined,
+    authorProfile: {
+      ...configuration.site.authorProfile,
+      displayName: author && author !== 'unavailable' && author !== 'New Gala Site'
+        ? author : fallback
+    }
+  };
   /*
    * The writer picks one colour; the page needs two, because the same colour cannot be readable on
    * both a light and a dark ground. Derived here rather than in CSS so the contrast is exact — a

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

@@ -10,45 +10,57 @@
 {% 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, canonicalUrl, engagement, apiBaseUrl) %}
-<section id="conversation" class="gala-engagement" aria-label="Article conversation" data-article-id="{{ articleId | escape }}" data-engagement-url="{{ apiBaseUrl | escape }}/v1/articles/{{ articleId | escape }}/engagement">
+{% 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">
-    <div class="gala-reaction-actions" role="group" aria-label="React to this article">
+    <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', icon: '♥' },
-        { value: 'insightful', label: 'Insightful', icon: '✦' },
-        { value: 'celebrate', label: 'Celebrate', icon: '★' },
-        { value: 'funny', label: 'Funny', icon: '☺' },
-        { value: 'mind-blown', label: 'Mind blown', icon: '◉' },
-        { value: 'thank-you', label: 'Thank you', icon: '✓' }
-      ] %}<button type="button" data-reaction="{{ reaction.value }}" aria-label="{{ reaction.label }}" title="{{ reaction.label }}" aria-pressed="false"><span aria-hidden="true">{{ reaction.icon }}</span></button>{% endfor %}
+        { 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-label="{{ reaction.label }}" title="{{ reaction.label }}" aria-pressed="false">{{ reactionIcon(reaction.value) }}</button>{% endfor %}
+      </div>
     </div>
-    <button type="button" data-follow-article aria-label="Follow article" title="Follow article" aria-pressed="false"><span aria-hidden="true">＋</span><span class="gala-visually-hidden" data-follow-label>Follow article</span></button>
-    <div class="gala-share" aria-label="Share this article">
-      <button type="button" data-copy-url="{{ canonicalUrl | escape }}" aria-label="Copy link" title="Copy link">Copy</button>
-      <button type="button" data-native-share="{{ canonicalUrl | escape }}" aria-label="Share" title="Share">Share</button>
-      <a href="https://x.com/intent/post?url={{ canonicalUrl | urlencode }}" rel="noopener noreferrer" aria-label="Share on X" title="Share on X">X</a>
-      <a href="https://wa.me/?text={{ canonicalUrl | urlencode }}" rel="noopener noreferrer" aria-label="Share on WhatsApp" title="Share on WhatsApp">WA</a>
+    <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>
   </aside>
-  <div class="gala-conversation">
-  <header class="gala-conversation__header"><p class="gala-eyebrow">Discussion</p><h2>Continue the conversation</h2></header>
-  {% 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>
+{% 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>
+  <div id="comments" data-gala-comments></div>
+  <output class="gala-conversation__status" data-engagement-status aria-live="polite">Loading comments…</output>
   </div>
-</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

@@ -29,7 +29,7 @@
     <link rel="icon" href="{{ '/assets/favicon.svg' | url }}" type="image/svg+xml">
     <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-site-name" href="{{ '/' | url }}" aria-label="Home">{{ site.site.name }}</a>
@@ -56,7 +56,17 @@
     </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. #}
@@ -64,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>
@@ -88,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,11 +1,16 @@
 ---
 layout: layouts/base.njk
 ---
-{% from "components/ui.njk" import engagementSummary, languageSwitcher, tableOfContents %}
+{% from "components/ui.njk" import actionRail, conversation, languageSwitcher, tableOfContents %}
 <article id="article" class="gala-article">
-  {% if post.publicationState == "published" %}<header class="gala-article-header"><p class="gala-eyebrow">Published {{ post.frontmatter.publishAfterDate }} · {{ post.language }}</p><h1>{{ post.frontmatter.title }}</h1><p class="gala-byline">By {{ post.frontmatter.author or site.site.author or site.site.name }}</p></header>{% endif %}
+  {% 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 %}
-  <div class="gala-markdown">{{ content | safe }}</div>
-  {% if post.publicationState == "published" %}{{ engagementSummary(post.id, post.canonicalUrl, engagement, site.platform.apiBaseUrl or "https://api.gala67.com") }}{% 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>