@rathnasgala/theme 0.0.1

package/payload/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@gala/site-template",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "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"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "3.1.6",
+    "markdown-it": "15.0.0",
+    "markdown-it-footnote": "4.0.0",
+    "sanitize-html": "2.17.6",
+    "yaml": "2.9.0"
+  }
+}

package/payload/src/404.njk

@@ -0,0 +1,12 @@
+---
+layout: layouts/base.njk
+title: Page not found
+permalink: /404.html
+eleventyExcludeFromCollections: true
+---
+<section class="gala-error-page">
+  <p class="gala-badge">404</p>
+  <h1>Page not found</h1>
+  <p>The page may have moved or no longer exists.</p>
+  <a class="gala-button" href="{{ '/' | url }}">Return home</a>
+</section>

package/payload/src/_data/buildManifest.js

@@ -0,0 +1,3 @@
+import { readBuildManifest } from '../../lib/build-manifest.js';
+
+export default await readBuildManifest();

package/payload/src/_data/engagementSnapshot.js

@@ -0,0 +1,5 @@
+import { readEngagementSnapshot } from '../../lib/engagement-snapshot.js';
+
+export default await readEngagementSnapshot(
+  new URL('../../.engagement-snapshot.json', import.meta.url)
+);

package/payload/src/_data/feedLinks.js

@@ -0,0 +1,15 @@
+import { siteUrl } from '../../lib/seo.js';
+import { loadSiteConfiguration } from '../../lib/site-config.js';
+import languages from './languages.js';
+
+const site = await loadSiteConfiguration();
+
+export default languages.map((language) => Object.freeze({
+  language,
+  title: `${site.site.name} — ${language}`,
+  href: siteUrl({
+    canonicalBaseUrl: site.hosting.canonicalBaseUrl,
+    pathPrefix: site.hosting.pathPrefix ?? '/',
+    relativePath: `/feed/${language}.xml`
+  })
+}));

package/payload/src/_data/languages.js

@@ -0,0 +1,10 @@
+import buildManifest from './buildManifest.js';
+import { loadSiteConfiguration } from '../../lib/site-config.js';
+
+const site = await loadSiteConfiguration();
+const languages = new Set([site.site.defaultLanguage]);
+for (const post of buildManifest.posts) {
+  if (post.publicationState === 'published') languages.add(post.language);
+}
+
+export default [...languages].sort((left, right) => left.localeCompare(right));

package/payload/src/_data/site.js

@@ -0,0 +1,5 @@
+import { loadSiteConfiguration } from '../../lib/site-config.js';
+
+export default async function siteConfiguration() {
+  return loadSiteConfiguration();
+}

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

@@ -0,0 +1,17 @@
+{% macro button(label, type='button') %}<button class="gala-button" type="{{ type }}">{{ label }}</button>{% endmacro %}
+{% macro badge(label) %}<span class="gala-badge">{{ label }}</span>{% endmacro %}
+{% macro tagChip(label, href) %}<a class="gala-tag-chip" href="{{ href }}">{{ label }}</a>{% endmacro %}
+{% macro sectionHeading(title, description='') %}<header class="gala-section-heading"><h2>{{ title }}</h2>{% if description %}<p>{{ description }}</p>{% endif %}</header>{% endmacro %}
+{% macro hero(title, description='', image='', imageAlt='') %}<header class="gala-hero">{% if image %}<img class="gala-hero__image" src="{{ image }}" alt="{{ imageAlt }}">{% endif %}<div class="gala-hero__text"><h1>{{ title }}</h1>{% if description %}<p>{{ description }}</p>{% endif %}</div></header>{% endmacro %}
+{% macro pageContent(content) %}<article class="gala-page-content">{{ content | safe }}</article>{% endmacro %}
+{% macro authorProfile(name, bio='', avatar='', links=[]) %}<section class="gala-author-profile" aria-label="Author profile">{% if avatar %}<img src="{{ avatar }}" alt="" width="80" height="80">{% endif %}<div><h2>{{ name }}</h2>{% if bio %}<p>{{ bio }}</p>{% endif %}{% if links.length %}<ul class="gala-social-links">{% for link in links %}<li><a href="{{ link.url }}" rel="me">{{ link.label }}</a></li>{% endfor %}</ul>{% endif %}</div></section>{% endmacro %}
+{% macro cardIndex(posts) %}<ol class="gala-card-index">{% for post in posts %}{% if post.publicationState == "published" %}<li><article class="gala-card" lang="{{ post.language | escape }}"><h2><a href="{{ post.relativeUrl | url }}">{{ post.frontmatter.title }}</a></h2>{% if post.frontmatter.description %}<p>{{ post.frontmatter.description }}</p>{% endif %}</article></li>{% endif %}{% endfor %}</ol>{% endmacro %}
+{% macro statsGraph(label, points) %}<figure class="gala-stats-graph"><svg role="img" aria-label="{{ label }}" viewBox="0 0 100 40" preserveAspectRatio="none"><polyline points="{{ points }}" vector-effect="non-scaling-stroke"></polyline></svg><figcaption>{{ label }}</figcaption></figure>{% endmacro %}
+{% 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 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 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

@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-palette="{{ site.design.palette }}" data-mode="system">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>(function(){try{var m=localStorage.getItem('gala-color-mode');if(m==='light'||m==='dark'||m==='system')document.documentElement.dataset.mode=m}catch(e){}})();</script>
+    <title>{{ post.frontmatter.title or title }} · {{ site.site.name }}</title>
+    {% if post %}<link rel="canonical" href="{{ post.canonicalUrl }}">{% endif %}
+    {% for alternate in hreflangLinks %}<link rel="alternate" hreflang="{{ alternate.hreflang }}" href="{{ alternate.href }}">{% endfor %}
+    {% for feed in feedLinks %}<link rel="alternate" type="application/atom+xml" hreflang="{{ feed.language }}" title="{{ feed.title }}" href="{{ feed.href }}">{% endfor %}
+    {% if seo %}
+    <meta name="description" content="{{ seo.description }}">
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="{{ seo.title }}">
+    <meta property="og:description" content="{{ seo.description }}">
+    <meta property="og:url" content="{{ seo.canonicalUrl }}">
+    {% if seo.imageUrl %}<meta property="og:image" content="{{ seo.imageUrl }}">{% endif %}
+    <meta name="twitter:card" content="{{ seo.twitterCard }}">
+    <meta name="twitter:title" content="{{ seo.title }}">
+    <meta name="twitter:description" content="{{ seo.description }}">
+    {% if seo.imageUrl %}<meta name="twitter:image" content="{{ seo.imageUrl }}">{% endif %}
+    <script type="application/ld+json">{{ seo.structuredDataJson | safe }}</script>
+    {% endif %}
+    {% if post.publicationState == "tombstoned" %}<meta name="robots" content="noindex">{% endif %}
+    <link rel="stylesheet" href="{{ '/assets/theme.css' | url }}">
+    <link rel="stylesheet" href="{{ '/custom.css' | url }}">
+    <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 %}
+  </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>
+    <main id="main-content">{{ content | safe }}</main>
+  </body>
+</html>

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

@@ -0,0 +1,11 @@
+---
+layout: layouts/base.njk
+---
+{% from "components/ui.njk" import engagementSummary, languageSwitcher, shareControl %}
+<article>
+  {% if post.publicationState == "published" %}<h1>{{ post.frontmatter.title }}</h1>{% endif %}
+  {% if post.publicationState == "published" %}{{ languageSwitcher(hreflangLinks, post.language) }}{% endif %}
+  {{ content | safe }}
+  {% if post.publicationState == "published" %}{{ engagementSummary(post.id, engagement) }}{% endif %}
+  {% if post.publicationState == "published" %}{{ shareControl(post.canonicalUrl) }}{% endif %}
+</article>

package/payload/src/assets/interactions.js

@@ -0,0 +1,54 @@
+function selectableFallback(control) {
+  const region = control.closest('.gala-share');
+  const fallback = region?.querySelector('.gala-share__fallback');
+  fallback?.focus();
+  fallback?.select();
+  const status = region?.querySelector('.gala-share__status');
+  if (status) status.textContent = 'Select and copy the URL shown.';
+}
+
+document.addEventListener('click', async (event) => {
+  const share = event.target.closest('[data-copy-url]');
+  if (share) {
+    const value = share.dataset.copyUrl;
+    if (!window.isSecureContext || !navigator.clipboard?.writeText) {
+      selectableFallback(share);
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      const status = share.closest('.gala-share')?.querySelector('.gala-share__status');
+      if (status) status.textContent = 'Link copied.';
+    } catch {
+      selectableFallback(share);
+    }
+    return;
+  }
+
+  const copy = event.target.closest('[data-copy-code]');
+  if (!copy) return;
+  const code = copy.closest('.gala-code-block')?.querySelector('code');
+  if (!code || !navigator.clipboard?.writeText || !window.isSecureContext) return;
+  try {
+    await navigator.clipboard.writeText(code.textContent);
+    copy.textContent = 'Copied';
+  } catch {
+    copy.textContent = 'Select code to copy';
+  }
+});
+
+const codeBlocks = new Set(
+  [...document.querySelectorAll('pre code')].map((code) => code.closest('pre')).filter(Boolean)
+);
+codeBlocks.forEach((pre) => {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'gala-code-block';
+  pre.before(wrapper);
+  wrapper.append(pre);
+  const control = document.createElement('button');
+  control.type = 'button';
+  control.dataset.copyCode = '';
+  control.textContent = 'Copy code';
+  control.setAttribute('aria-label', 'Copy code block');
+  wrapper.prepend(control);
+});

package/payload/src/assets/preferences.js

@@ -0,0 +1,30 @@
+const LANGUAGE_STORAGE_KEY = 'gala-language-preference';
+
+function storedLanguage() {
+  try {
+    return localStorage.getItem(LANGUAGE_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function optionFor(control, language) {
+  return [...control.options].find((option) => option.value === language);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const stored = storedLanguage();
+  document.querySelectorAll('[data-language-preference]').forEach((control) => {
+    if (stored != null && optionFor(control, stored) != null) control.value = stored;
+    control.addEventListener('change', () => {
+      try {
+        localStorage.setItem(LANGUAGE_STORAGE_KEY, control.value);
+      } catch {
+        // Selection and explicit navigation still work when storage is unavailable.
+      }
+      if (!control.hasAttribute('data-navigate-on-selection')) return;
+      const selected = optionFor(control, control.value);
+      if (selected?.dataset.url) window.location.assign(selected.dataset.url);
+    });
+  });
+});

package/payload/src/assets/search.js

@@ -0,0 +1,81 @@
+const search = document.querySelector('[data-gala-search]');
+
+if (search) {
+  const form = search.querySelector('form');
+  const query = form?.elements.namedItem('q');
+  const status = search.querySelector('[data-search-status]');
+  const results = search.querySelector('[data-search-results]');
+  const indexUrl = search.dataset.indexUrl;
+  let index;
+
+  const normalize = (value) => String(value ?? '').normalize('NFKC').toLocaleLowerCase();
+
+  function render(entries, term) {
+    results.replaceChildren();
+    for (const entry of entries) {
+      const item = document.createElement('li');
+      const article = document.createElement('article');
+      const heading = document.createElement('h2');
+      const link = document.createElement('a');
+      link.href = entry.url;
+      link.lang = entry.language;
+      link.textContent = entry.title;
+      heading.append(link);
+      article.append(heading);
+      if (entry.description) {
+        const description = document.createElement('p');
+        description.textContent = entry.description;
+        article.append(description);
+      }
+      item.append(article);
+      results.append(item);
+    }
+    status.textContent = `${entries.length} result${entries.length === 1 ? '' : 's'} for “${term}”.`;
+  }
+
+  async function run(rawTerm) {
+    const term = rawTerm.trim();
+    if (term === '') {
+      results.replaceChildren();
+      status.textContent = 'Enter a search term.';
+      return;
+    }
+    status.textContent = 'Searching…';
+    try {
+      index ??= fetch(indexUrl, { headers: { Accept: 'application/json' } }).then(async (response) => {
+        if (!response.ok) throw new Error(`Search index returned HTTP ${response.status}`);
+        const payload = await response.json();
+        if (payload?.schemaVersion !== 1 || !Array.isArray(payload.entries)) {
+          throw new TypeError('Search index schema is unsupported');
+        }
+        return payload.entries;
+      });
+      const needle = normalize(term);
+      const matches = (await index).filter((entry) => normalize([
+        entry.title,
+        entry.description,
+        entry.language,
+        ...(Array.isArray(entry.tags) ? entry.tags : []),
+        entry.body
+      ].join('\n')).includes(needle));
+      render(matches, term);
+    } catch {
+      results.replaceChildren();
+      status.textContent = 'Search is temporarily unavailable.';
+    }
+  }
+
+  form?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const term = query.value;
+    const location = new URL(window.location.href);
+    if (term.trim() === '') location.searchParams.delete('q');
+    else location.searchParams.set('q', term);
+    window.history.replaceState(null, '', location);
+    run(term);
+  });
+
+  const initial = new URLSearchParams(window.location.search).get('q') ?? '';
+  if (query) query.value = initial;
+  run(initial);
+}

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

@@ -0,0 +1,35 @@
+const MODES = ['system', 'light', 'dark'];
+const STORAGE_KEY = 'gala-color-mode';
+
+function storedMode() {
+  try {
+    const mode = localStorage.getItem(STORAGE_KEY);
+    return MODES.includes(mode) ? mode : 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+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}`;
+    control.setAttribute('aria-label', `Color mode: ${mode}. Activate for ${next}.`);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  applyMode(storedMode());
+  document.querySelectorAll('[data-theme-mode-toggle]').forEach((control) => {
+    control.addEventListener('click', () => {
+      const next = MODES[(MODES.indexOf(document.documentElement.dataset.mode) + 1) % MODES.length];
+      try {
+        localStorage.setItem(STORAGE_KEY, next);
+      } catch {
+        // The selected mode still applies for this page when storage is unavailable.
+      }
+      applyMode(next);
+    });
+  });
+});

package/payload/src/assets/theme.css

@@ -0,0 +1,125 @@
+:root {
+  color-scheme: light dark;
+  --gala-color-background: light-dark(#fff, #111);
+  --gala-color-text: light-dark(#181818, #f5f5f5);
+  --gala-space-page: clamp(1rem, 4vw, 4rem);
+  --gala-radius-control: 0.5rem;
+  --gala-color-surface: light-dark(#f4f4f4, #1d1d1d);
+  --gala-color-accent: light-dark(#174ea6, #8ab4f8);
+  --gala-color-border: light-dark(#6b6b6b, #aaa);
+  --gala-font-body: system-ui, sans-serif;
+  --gala-content-width: 70rem;
+  --gala-widget-min-block-size: 8rem;
+}
+
+:root[data-mode='light'] {
+  color-scheme: light;
+  --gala-color-background: #fff;
+  --gala-color-text: #181818;
+  --gala-color-surface: #f4f4f4;
+  --gala-color-accent: #174ea6;
+  --gala-color-border: #6b6b6b;
+}
+
+:root[data-mode='dark'] {
+  color-scheme: dark;
+  --gala-color-background: #111;
+  --gala-color-text: #f5f5f5;
+  --gala-color-surface: #1d1d1d;
+  --gala-color-accent: #8ab4f8;
+  --gala-color-border: #aaa;
+}
+
+body {
+  margin: 0;
+  padding: var(--gala-space-page);
+  color: var(--gala-color-text);
+  background: var(--gala-color-background);
+  font-family: var(--gala-font-body);
+}
+
+main,
+.gala-page-footer {
+  max-inline-size: var(--gala-content-width);
+  margin-inline: auto;
+}
+
+a { color: var(--gala-color-accent); }
+
+button {
+  min-block-size: 2.75rem;
+  padding-inline: 1rem;
+  color: inherit;
+  background: transparent;
+  border: 0.125rem solid currentcolor;
+  border-radius: var(--gala-radius-control);
+  font: inherit;
+  cursor: pointer;
+}
+
+button:focus-visible {
+  outline: 0.1875rem solid currentcolor;
+  outline-offset: 0.1875rem;
+}
+
+.gala-button,
+.gala-badge,
+.gala-tag-chip {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.75rem;
+  border: 0.125rem solid var(--gala-color-border);
+  border-radius: var(--gala-radius-control);
+}
+
+.gala-badge,
+.gala-tag-chip { padding-inline: 0.75rem; }
+.gala-tag-chip { text-decoration: none; }
+.gala-section-heading { margin-block: 3rem 1rem; }
+.gala-section-heading > :where(h2, p) { margin-block: 0 0.5rem; }
+.gala-hero { display: grid; gap: 1.5rem; align-items: center; }
+.gala-hero__image { inline-size: 100%; block-size: auto; border-radius: var(--gala-radius-control); }
+.gala-page-content { max-inline-size: 70ch; }
+.gala-page-content :where(img, video) { max-inline-size: 100%; block-size: auto; }
+.gala-author-profile { display: flex; gap: 1rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-author-profile img { border-radius: 50%; object-fit: cover; }
+.gala-social-links,
+.gala-page-footer ul,
+.gala-share ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }
+.gala-card-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
+.gala-card { block-size: 100%; box-sizing: border-box; padding: 1.25rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-stats-graph { min-block-size: var(--gala-widget-min-block-size); margin-inline: 0; }
+.gala-stats-graph svg { inline-size: 100%; block-size: 8rem; }
+.gala-stats-graph polyline { fill: none; stroke: var(--gala-color-accent); stroke-width: 2; }
+.gala-loading { display: grid; min-block-size: var(--gala-widget-min-block-size); place-items: center; }
+.gala-loading__indicator { inline-size: 2rem; block-size: 2rem; border: 0.25rem solid var(--gala-color-border); border-block-start-color: var(--gala-color-accent); border-radius: 50%; animation: gala-spin 0.8s linear infinite; }
+.gala-pagination { display: flex; justify-content: space-between; gap: 1rem; }
+.gala-search { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
+.gala-search label { grid-column: 1 / -1; }
+.gala-search input { min-block-size: 2.75rem; font: inherit; }
+.gala-search-results { display: grid; gap: 1rem; padding: 0; list-style: none; }
+.gala-search-results article { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+.gala-search-results h2 { margin-block-start: 0; }
+.gala-toc { padding: 1rem; background: var(--gala-color-surface); }
+.gala-share__fallback { inline-size: min(100%, 36rem); }
+.gala-engagement { min-block-size: var(--gala-widget-min-block-size); }
+.gala-engagement dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
+.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-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); }
+.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); } }
+
+@media (min-width: 48rem) {
+  .gala-hero { grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition { navigation: auto; }
+}

package/payload/src/feed.11ty.js

@@ -0,0 +1,46 @@
+import { markdownLibrary } from '../lib/render-markdown.js';
+import { renderAtomFeed, siteUrl, sortFeedPosts } from '../lib/seo.js';
+
+function feedUpdated() {
+  const configured = process.env.GALA_BUILD_INSTANT;
+  const instant = configured == null ? new Date() : new Date(configured);
+  if (Number.isNaN(instant.getTime())) throw new TypeError('GALA_BUILD_INSTANT must be an ISO instant');
+  return instant.toISOString();
+}
+
+export default class LanguageFeeds {
+  data() {
+    return {
+      pagination: { data: 'languages', size: 1, alias: 'language' },
+      permalink: ({ language }) => `/feed/${language}.xml`,
+      eleventyExcludeFromCollections: true
+    };
+  }
+
+  render({ buildManifest, language, site }) {
+    const posts = sortFeedPosts(buildManifest.posts.filter(
+      (post) => post.publicationState === 'published' && post.language === language
+    )).slice(0, 20);
+    const selfUrl = siteUrl({
+      canonicalBaseUrl: site.hosting.canonicalBaseUrl,
+      pathPrefix: site.hosting.pathPrefix ?? '/',
+      relativePath: `/feed/${language}.xml`
+    });
+    return renderAtomFeed({
+      id: selfUrl,
+      title: `${site.site.name} — ${language}`,
+      author: typeof site.site.author === 'string' && site.site.author.trim() !== ''
+        ? site.site.author.trim()
+        : site.site.name,
+      updated: feedUpdated(),
+      selfUrl,
+      entries: posts.map((post) => ({
+        id: `urn:gala:article:${post.id}:${post.language}`,
+        title: post.frontmatter.title,
+        updated: `${post.frontmatter.publishAfterDate}T00:00:00.000Z`,
+        url: post.canonicalUrl,
+        html: markdownLibrary.render(post.body)
+      }))
+    });
+  }
+}

package/payload/src/index.njk

@@ -0,0 +1,8 @@
+---
+layout: layouts/base.njk
+title: Home
+permalink: /index.html
+---
+{% from "components/ui.njk" import cardIndex %}
+<h1>{{ site.site.name }}</h1>
+{{ cardIndex(buildManifest.posts) }}

package/payload/src/languages.11ty.js

@@ -0,0 +1,38 @@
+import { siteUrl } from '../lib/seo.js';
+
+function html(value) {
+  return String(value)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export default class LanguageIndexes {
+  data() {
+    return {
+      pagination: { data: 'languages', size: 1, alias: 'language' },
+      layout: 'layouts/base.njk',
+      permalink: ({ language }) => `/${language}/index.html`,
+      eleventyComputed: {
+        title: ({ language }) => language
+      }
+    };
+  }
+
+  render({ buildManifest, language, site }) {
+    const posts = buildManifest.posts.filter(
+      (post) => post.publicationState === 'published' && post.language === language
+    );
+    const items = posts.map((post) => {
+      const href = siteUrl({
+        canonicalBaseUrl: site.hosting.canonicalBaseUrl,
+        pathPrefix: site.hosting.pathPrefix ?? '/',
+        relativePath: post.relativeUrl
+      });
+      return `<li><a href="${html(href)}">${html(post.frontmatter.title)}</a></li>`;
+    }).join('');
+    return `<h1>${html(site.site.name)} — ${html(language)}</h1><ol>${items}</ol>`;
+  }
+}

package/payload/src/posts.11ty.js

@@ -0,0 +1,35 @@
+import { markdownLibrary } from '../lib/render-markdown.js';
+import { articleHreflang, postSeo } from '../lib/seo.js';
+import { engagementFor } from '../lib/engagement-snapshot.js';
+
+export default class ValidatedPostPages {
+  data() {
+    return {
+      pagination: {
+        data: 'buildManifest.posts',
+        size: 1,
+        alias: 'post'
+      },
+      layout: 'layouts/post.njk',
+      permalink: ({ post }) => `${post.relativeUrl}index.html`,
+      eleventyComputed: {
+        hreflangLinks: ({ buildManifest, post, site }) => {
+          if (buildManifest?.posts == null || post?.source == null
+              || site?.site?.defaultLanguage == null) return [];
+          return articleHreflang(buildManifest.posts, site).get(post.source) ?? [];
+        },
+        engagement: ({ engagementSnapshot, post }) => engagementFor(engagementSnapshot, post.id),
+        seo: ({ post, site }) => post?.publicationState === 'published'
+          ? postSeo({ post, site, renderedHtml: markdownLibrary.render(post.body) })
+          : null
+      }
+    };
+  }
+
+  render({ post }) {
+    if (post.publicationState === 'tombstoned') {
+      return `<p>POST deleted on ${post.frontmatter.deleteDate}</p>`;
+    }
+    return markdownLibrary.render(post.body);
+  }
+}