@rathnasgala/theme 0.0.6 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "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.6",
+    "version": "0.0.9",
     "availableDesignThemes": [
       "editorial"
     ],
@@ -11,20 +11,21 @@
   "files": {
     ".gitignore": "b5fa24e10155097a0d372926fd2e59e6072e7cc2cb6399bbfb4beb8b33ea315b",
     ".gala/publish.yml.template": "73080241d89bd09964b797a8bcc8e18471412e11bc873efad76305b60f497d08",
-    "eleventy.config.js": "24f25bd69108f17c80d85807f1bbf6851a44b77dfdddc8d8e234b85462cb2e04",
+    "eleventy.config.js": "efe587447e3dc374a220c7fa037fdf2fffc02d09ba43a4d2b96d6c6aae0e3325",
     "package.json": "cccea6fc4edf4b4b653bd5cfc0901ab20dd92ac8975408fb01ae3670005da641",
     "package-lock.json": "c97a6a2f794aef083a39a8d2628eccc4a3c484e1c6225899b77ec1fb7c466d9e",
     "lib/build-manifest.js": "88949f0112d683ca809bb67ca969e15634792423559a67bc79a534cd807e5535",
-    "lib/site-config.js": "59579cc3253529c7201002ab40435eeaeb4359ca82ddbb473a026bc317f62fcb",
+    "lib/site-config.js": "ab7cc170dc30c74ea5ef08b8ff6a82f9820998ae4190a06d64375dfd7d515864",
     "lib/performance-budget.js": "124c43494c092a956accec46d1463ea063ed73363d0db01f24aaea987459d683",
     "lib/engagement-snapshot.js": "298c11b1ab135a3a98a4e31b6320ab60dfd7fda6a9d9053df37d86282a5a6687",
     "lib/publication-state.js": "1b59c29a18bbb1193bddea898dac3a4fb832c7bc4751263be086f3d64392dea0",
-    "lib/render-markdown.js": "c7dac7e3599af445830825e76e285166e85835163caa8bef2c3a970a307ac750",
+    "lib/render-markdown.js": "40e6d6743b76de6c16d138475f188a4263967530c370d8b26a363f4df58c2caf",
     "lib/seo.js": "107de8804931945b8e73894877fc394d6b535a9d0d969a4ba5b68f2e136e0a17",
-    "lib/share-targets.js": "5820466526ab2dcd2cd1689c163117c34df0a675dfa92e28e853f690423299b3",
-    "lib/provider-fixtures/share-intents.v1.json": "2535cee63962f38691cb7b8c47d2414bf9cacbcee5cadba0bec0172e7b3961e4",
+    "lib/share-targets.js": "458aff86fab2b62a364442cd8c612565c6e0b53eef2f20cb6237cc562b1e0731",
+    "lib/provider-fixtures/embeds.v1.json": "5f26909fb433135321ddf7fdd14e45aeb702805c88f5676941166c5735143ee2",
+    "lib/provider-fixtures/share-intents.v1.json": "66a8eedfcff711253ee45ceb94b53f7d5a6be3ddbbb3d1f0d4e31a114326cc0a",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
-    "src/_includes/layouts/base.njk": "47ad79e1ce9520caacb4e564f3257335efc8889c242b2064ce2ed27c98d2cfcc",
+    "src/_includes/layouts/base.njk": "a37a0dfe534412bcade43719b2e2d6338463110105f84f3887e21ecc27e44b6c",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
     "src/_includes/components/ui.njk": "3a0eeb0f7b8f0ea46ed39d4c53b810a33b997766cbae540ef063c8ecdf641809",
     "src/_data/buildManifest.js": "628163305984e0d3537e27b0d4050f5ba5ead12a834878266d2ce8004ffe1b1e",
@@ -33,14 +34,19 @@
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
     "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
     "src/assets/theme-mode.js": "3797c84dbaa090b5b21427a31928b5dd97f13d04d99833f5e1e74c6b50e01dcc",
-    "src/assets/interactions.js": "611e54376f03d9cd8abd55ef4fcbebe917a174c673dd15fcb3c4073cc6e79836",
+    "src/assets/interactions.js": "7b9db09494518813189c17e92e5b9621b8b17a455c895d8670452fdfa0ead557",
+    "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
+    "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
+    "src/assets/embed-x.svg": "0ae74edc6790ec7e933067fe5392bce756e93fa7ad71caacf1c1ca99fa4ec9b6",
+    "src/assets/embed-youtube.svg": "10d192f2b14b67664fea88c8cf246321d20190def51d59fad5762e552219b067",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
-    "src/assets/theme.css": "8cad6e82e0017e7b62a5355f0386d854fb62e774c520b3ce25aaea5b19b4fa61",
+    "src/assets/theme.css": "66f4793e857af61cbee63d847418aac03ce948361025d78853ec4d05e0117f43",
+    "src/contact.njk": "f4d74d038781e15af0acef571901c91e7753a2e21b6bef617429585698839a34",
     "src/index.njk": "5c313f0fcdad3ddbfb79376bc9671b3f37539ef70c14bdbbd26d6e2e6de250e8",
     "src/feed.11ty.js": "009bd2384e08e02a9405683bab1653bab3aeaec16accb0fd01ba69b24c777da9",
     "src/languages.11ty.js": "399559199c65570d7d5efd88e20254838e316f81c06d7b28ec34990e963db915",
-    "src/posts.11ty.js": "2f9d738075eab68961d7c8fe9286b61f12c2c677f7dad9d4858927ef51b66ff8",
+    "src/posts.11ty.js": "89c0e4742a67cd03f9fd13c8c8d4ca56375d97628b3cb439af7f9c92c240104a",
     "src/redirects.11ty.js": "3c163246a59f5364861db6a6f05ae88afc938a5379d86cf42776d8d49b0031f3",
     "src/search-index.11ty.js": "700dc2a2be0ef20de3a828a4612fcf7a082691eade29c6e1d75f09c24b6c6024",
     "src/search.njk": "63f2e8aeebb63c90da2e375eece639ce096cad1eff7f28628cafc46faf7ceee6",

package/payload/eleventy.config.js

@@ -23,6 +23,8 @@ async function verifiedMediaSource(postSource, mediaSource) {
 
 export default async function (eleventyConfig) {
   const [manifest, site] = await Promise.all([readBuildManifest(), loadSiteConfiguration()]);
+  const attributionTier = process.env.GALA_ATTRIBUTION_TIER === 'PAID' ? 'PAID' : 'FREE';
+  eleventyConfig.addGlobalData('attributionTier', attributionTier);
   eleventyConfig.setLibrary('md', markdownLibrary);
   eleventyConfig.addPassthroughCopy({ static: '/' });
   eleventyConfig.addPassthroughCopy({ 'src/assets': 'assets' });

package/payload/lib/provider-fixtures/embeds.v1.json

@@ -0,0 +1,48 @@
+{
+  "schemaVersion": 1,
+  "providers": [
+    {
+      "id": "youtube",
+      "source": "https://support.google.com/youtube/answer/171780",
+      "verifiedOn": "2026-08-14",
+      "status": "verified-iframe",
+      "patterns": [
+        "^https://(?:www\\.)?youtube\\.com/watch\\?v=([A-Za-z0-9_-]{11})(?:&[^\\s]*)?$",
+        "^https://youtu\\.be/([A-Za-z0-9_-]{11})(?:\\?[^\\s]*)?$"
+      ],
+      "activationTemplate": "https://www.youtube-nocookie.com/embed/{1}",
+      "label": "Watch on YouTube"
+    },
+    {
+      "id": "codepen",
+      "source": "https://blog.codepen.io/documentation/embedded-pens/",
+      "verifiedOn": "2026-08-14",
+      "status": "verified-iframe",
+      "patterns": [
+        "^https://codepen\\.io/([A-Za-z0-9_-]+)/pen/([A-Za-z0-9_-]+)/?$"
+      ],
+      "activationTemplate": "https://codepen.io/{1}/embed/{2}",
+      "label": "Run on CodePen"
+    },
+    {
+      "id": "gist",
+      "source": "https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists",
+      "verifiedOn": "2026-08-14",
+      "status": "verified-script-only",
+      "patterns": [
+        "^https://gist\\.github\\.com/([A-Za-z0-9_-]+)/([0-9a-fA-F]+)(?:#[A-Za-z0-9_-]+)?$"
+      ],
+      "labelTemplate": "View Gist by {1}"
+    },
+    {
+      "id": "x",
+      "source": "https://help.x.com/en/using-x/how-to-embed-a-post",
+      "verifiedOn": "2026-08-14",
+      "status": "verified-script-only",
+      "patterns": [
+        "^https://x\\.com/([A-Za-z0-9_]{1,15})/status/([0-9]+)$"
+      ],
+      "label": "View post on X"
+    }
+  ]
+}

package/payload/lib/provider-fixtures/share-intents.v1.json

@@ -3,10 +3,10 @@
   "providers": {
     "bluesky": { "source": "https://docs.bsky.app/docs/advanced-guides/intent-links", "verifiedOn": "2026-08-13", "status": "verified", "template": "https://bsky.app/intent/compose?text={text}" },
     "x": { "source": "https://developer.x.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent", "verifiedOn": "2026-08-13", "status": "verified", "template": "https://twitter.com/intent/tweet?text={text}&url={url}" },
-    "linkedin": { "source": "https://www.linkedin.com/help/linkedin/answer/a522735", "status": "blocked-public-intent-contract-unverified" },
-    "reddit": { "source": "https://www.reddit.com/dev/api/#POST_api_submit", "status": "blocked-public-intent-contract-unverified" },
+    "linkedin": { "source": "https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin", "verifiedOn": "2026-08-14", "status": "verified", "template": "https://www.linkedin.com/sharing/share-offsite/?url={url}", "verification": "live redirect retained the encoded target URL" },
+    "reddit": { "source": "https://www.reddit.com/r/bugs/comments/1cobgwm/simple_reddit_share_links_on_external_sites_no/", "checkedOn": "2026-08-14", "status": "blocked-public-intent-contract-unverified", "reason": "the public submit URL loads, but desktop title and URL prefill are not a stable provider contract" },
     "hacker-news": { "source": "https://news.ycombinator.com/bookmarklet.html", "verifiedOn": "2026-08-13", "status": "verified", "template": "https://news.ycombinator.com/submitlink?u={url}&t={title}" },
-    "whatsapp": { "source": "https://faq.whatsapp.com/5913398998672934", "status": "blocked-public-intent-contract-unverified" },
+    "whatsapp": { "source": "https://faq.whatsapp.com/5913398998672934", "verifiedOn": "2026-08-14", "status": "verified", "template": "https://wa.me/?text={text}", "verification": "live redirect retained the encoded message text" },
     "email": { "source": "https://www.rfc-editor.org/rfc/rfc6068", "verifiedOn": "2026-08-13", "status": "verified", "template": "mailto:?subject={title}&body={text}" },
     "mastodon": { "source": "https://docs.joinmastodon.org/user/external/#share", "verifiedOn": "2026-08-13", "status": "verified", "template": "https://{instance}/share?text={text}", "requiresInstance": true }
   }

package/payload/lib/render-markdown.js

@@ -4,6 +4,12 @@ import sanitizeHtml from 'sanitize-html';
 import { createHighlighter } from 'shiki';
 import GithubSlugger from 'github-slugger';
 import { randomBytes } from 'node:crypto';
+import { readFileSync } from 'node:fs';
+
+const embedFixture = JSON.parse(readFileSync(
+  new URL('./provider-fixtures/embeds.v1.json', import.meta.url),
+  'utf8'
+));
 
 const SHIKI_THEMES = Object.freeze({ light: 'github-light', dark: 'github-dark' });
 const SHIKI_LANGUAGES = Object.freeze([
@@ -67,10 +73,115 @@ function headingAnchors(markdown) {
   });
 }
 
+function fixtureEmbed(url, environment) {
+  for (const provider of embedFixture.providers) {
+    for (const pattern of provider.patterns) {
+      const match = new RegExp(pattern).exec(url);
+      if (!match) continue;
+      const replaceCaptures = (template) => template.replace(/\{([1-9])}/g,
+        (_placeholder, index) => match[Number(index)] ?? '');
+      return {
+        provider: provider.id,
+        source: url,
+        label: provider.label ?? replaceCaptures(provider.labelTemplate),
+        activation: provider.status === 'verified-iframe'
+          ? replaceCaptures(provider.activationTemplate)
+          : null
+      };
+    }
+  }
+  environment.galaWarnings ??= [];
+  environment.galaWarnings.push(`Unsupported embed provider: ${url}`);
+  return null;
+}
+
+function safeEmbedLink(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'https:' && parsed.username === '' && parsed.password === '';
+  } catch {
+    return false;
+  }
+}
+
+function embedFacade(embed) {
+  const provider = markdown.utils.escapeHtml(embed.provider);
+  const source = markdown.utils.escapeHtml(embed.source);
+  const label = markdown.utils.escapeHtml(embed.label);
+  if (embed.activation == null) {
+    return `<figure class="gala-embed gala-embed--${provider}"><span class="gala-embed__icon" aria-hidden="true"></span><a href="${source}" rel="noopener noreferrer">${label}</a></figure>`;
+  }
+  const activation = markdown.utils.escapeHtml(embed.activation);
+  return `<figure class="gala-embed gala-embed--${provider}" data-gala-embed="${provider}"><span class="gala-embed__icon" aria-hidden="true"></span><button type="button" data-gala-embed-load="${provider}" data-gala-embed-src="${activation}">${label}</button><figcaption><a href="${source}" rel="noopener noreferrer">Open directly on ${provider === 'youtube' ? 'YouTube' : 'CodePen'}</a></figcaption></figure>`;
+}
+
+function embeds(markdown) {
+  markdown.block.ruler.before('paragraph', 'gala_embed', (state, startLine, _endLine, silent) => {
+    const start = state.bMarks[startLine] + state.tShift[startLine];
+    const end = state.eMarks[startLine];
+    const match = state.src.slice(start, end).match(/^\{%\s+embed\s+(https:\/\/\S+)\s+%}$/);
+    if (!match) return false;
+    if (silent) return true;
+    const resolved = fixtureEmbed(match[1], state.env);
+    if (resolved == null) {
+      const token = state.push('paragraph_open', 'p', 1);
+      token.map = [startLine, startLine + 1];
+      const inline = state.push('inline', '', 0);
+      inline.content = safeEmbedLink(match[1])
+        ? `[${match[1]}](${match[1]})`
+        : `\`${match[1].replaceAll('`', '\\`')}\``;
+      inline.children = [];
+      state.push('paragraph_close', 'p', -1);
+    } else {
+      const placeholder = randomBytes(18).toString('hex');
+      state.env.galaEmbeds ??= new Map();
+      state.env.galaEmbeds.set(placeholder, embedFacade(resolved));
+      const token = state.push('html_block', '', 0);
+      token.content = `<div class="gala-embed-placeholder" data-embed-token="${placeholder}"></div>`;
+      token.map = [startLine, startLine + 1];
+    }
+    state.line = startLine + 1;
+    return true;
+  });
+}
+
+function rejectRawHtmlMedia(markdown) {
+  markdown.core.ruler.after('inline', 'gala_reject_raw_html_media', (state) => {
+    const media = /<(?:img|audio|video|source|picture)\b/i;
+    for (const token of state.tokens) {
+      if ((token.type === 'html_block' || token.type === 'html_inline') && media.test(token.content)) {
+        throw new TypeError('Raw HTML media is not allowed; use Markdown image syntax');
+      }
+      for (const child of token.children ?? []) {
+        if (child.type === 'html_inline' && media.test(child.content)) {
+          throw new TypeError('Raw HTML media is not allowed; use Markdown image syntax');
+        }
+      }
+    }
+  });
+}
+
 const markdown = new MarkdownIt({ html: true, linkify: true, typographer: false })
   .use(footnote)
   .use(admonitions)
-  .use(headingAnchors);
+  .use(headingAnchors)
+  .use(embeds)
+  .use(rejectRawHtmlMedia);
+
+const defaultImage = markdown.renderer.rules.image
+  ?? ((tokens, index, options, _environment, self) => self.renderToken(tokens, index, options));
+markdown.renderer.rules.image = (tokens, index, options, environment, self) => {
+  const token = randomBytes(18).toString('hex');
+  const image = defaultImage(tokens, index, options, environment, self);
+  environment.galaImages ??= new Map();
+  environment.galaImages.set(token, sanitizeHtml(image, {
+    allowedTags: ['img'],
+    allowedAttributes: { img: ['src', 'alt', 'title'] },
+    allowedSchemesByTag: { img: ['https'] },
+    allowProtocolRelative: false
+  }));
+  return `<span class="gala-image-placeholder" data-image-token="${token}"></span>`;
+};
 
 const defaultFence = markdown.renderer.rules.fence.bind(markdown.renderer.rules);
 markdown.renderer.rules.fence = (tokens, index, options, environment, self) => {
@@ -93,7 +204,7 @@ markdown.renderer.rules.fence = (tokens, index, options, environment, self) => {
 const sanitizeOptions = {
   allowedTags: [
     'a', 'abbr', 'aside', 'blockquote', 'br', 'code', 'del', 'div', 'em',
-    'figcaption', 'figure', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'img',
+    'figcaption', 'figure', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr',
     'li', 'mark', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table',
     'tbody', 'td', 'th', 'thead', 'tr', 'ul'
   ],
@@ -101,17 +212,16 @@ const sanitizeOptions = {
     a: ['href', 'title', 'rel'],
     aside: ['class', 'role'],
     code: ['class'],
-    div: ['class', 'id', 'data-highlight-token'],
+    div: ['class', 'id', 'data-highlight-token', 'data-embed-token'],
     h1: ['id'],
     h2: ['id'],
     h3: ['id'],
     h4: ['id'],
     h5: ['id'],
     h6: ['id'],
-    img: ['src', 'alt', 'title', 'width', 'height', 'loading', 'decoding'],
     li: ['id'],
     ol: ['class'],
-    span: ['class'],
+    span: ['class', 'data-image-token'],
     sup: ['class'],
     td: ['colspan', 'rowspan'],
     th: ['colspan', 'rowspan', 'scope']
@@ -121,17 +231,14 @@ const sanitizeOptions = {
       'admonition', 'admonition-note', 'admonition-tip', 'admonition-important',
       'admonition-warning', 'admonition-caution'
     ],
-    div: ['gala-highlight-placeholder'],
+    div: ['gala-highlight-placeholder', 'gala-embed-placeholder'],
     code: [/^language-[a-z0-9_-]+$/],
     ol: ['footnotes-list'],
-    span: ['footnote-backref'],
+    span: ['footnote-backref', 'gala-image-placeholder'],
     sup: ['footnote-ref']
   },
   allowedSchemes: ['https', 'mailto'],
-  allowedSchemesByTag: {
-    a: ['https', 'mailto'],
-    img: ['https']
-  },
+  allowedSchemesByTag: { a: ['https', 'mailto'] },
   allowProtocolRelative: false,
   enforceHtmlBoundary: true
 };
@@ -140,6 +247,9 @@ function render(source, inline, suppliedEnvironment) {
   const environment = suppliedEnvironment ?? {};
   environment.galaHighlights = [];
   environment.galaHighlightTokens = [];
+  environment.galaEmbeds = new Map();
+  environment.galaImages = new Map();
+  environment.galaWarnings = [];
   const unsafe = inline
     ? markdown.renderInline(source, environment)
     : markdown.render(source, environment);
@@ -150,6 +260,18 @@ function render(source, inline, suppliedEnvironment) {
       environment.galaHighlights[index]
     );
   }
+  for (const [token, facade] of environment.galaEmbeds) {
+    safe = safe.replace(
+      `<div class="gala-embed-placeholder" data-embed-token="${token}"></div>`,
+      facade
+    );
+  }
+  for (const [token, image] of environment.galaImages) {
+    safe = safe.replace(
+      `<span class="gala-image-placeholder" data-image-token="${token}"></span>`,
+      image
+    );
+  }
   return safe;
 }
 
@@ -162,7 +284,11 @@ export function renderMarkdownDocument(source) {
   if (typeof source !== 'string') throw new TypeError('Markdown source must be a string');
   const environment = {};
   const html = render(source, false, environment);
-  return Object.freeze({ html, tableOfContents: Object.freeze(environment.galaToc ?? []) });
+  return Object.freeze({
+    html,
+    tableOfContents: Object.freeze(environment.galaToc ?? []),
+    warnings: Object.freeze(environment.galaWarnings ?? [])
+  });
 }
 
 export const markdownLibrary = Object.assign(Object.create(markdown), {

package/payload/lib/share-targets.js

@@ -8,6 +8,8 @@ const fixture = JSON.parse(readFileSync(
 const LABELS = Object.freeze({
   bluesky: 'Bluesky',
   x: 'X',
+  linkedin: 'LinkedIn',
+  whatsapp: 'WhatsApp',
   'hacker-news': 'Hacker News',
   email: 'Email',
   mastodon: 'Mastodon'
@@ -30,7 +32,7 @@ function resolveProvider(provider, title, canonical, socialProfiles) {
     const profile = requireHttpsUrl(socialProfiles.mastodon, 'sharing.socialProfiles.mastodon');
     instance = profile.host;
   }
-  const text = provider === 'bluesky' || provider === 'mastodon'
+  const text = provider === 'bluesky' || provider === 'mastodon' || provider === 'whatsapp'
     ? `${title}\n${canonical.href}`
     : provider === 'email' ? canonical.href : title;
   const replacements = {

package/payload/lib/site-config.js

@@ -7,6 +7,22 @@ const BUDGET_KEYS = Object.freeze([
   'managedCssBytes',
   'ordinaryHtmlBytes'
 ]);
+const DESIGN_VALUES = Object.freeze({
+  layout: Object.freeze(['article-first', 'portfolio']),
+  palette: Object.freeze(['default', 'ocean'])
+});
+const CONTACT_KEYS = Object.freeze([
+  'enabled', 'websiteEnabled', 'phoneEnabled'
+]);
+
+function validateImplementedDesign(config) {
+  if (config?.design == null) return;
+  for (const [field, allowed] of Object.entries(DESIGN_VALUES)) {
+    if (!allowed.includes(config.design[field])) {
+      throw new TypeError(`Unsupported design.${field}: ${config.design[field]}`);
+    }
+  }
+}
 
 export function validatePerformanceBudgets(value) {
   if (value == null || Array.isArray(value) || typeof value !== 'object') {
@@ -40,6 +56,23 @@ export function validateStatistics(value) {
   return Object.freeze({ publicViewCounts: value.publicViewCounts === true });
 }
 
+export function validateContact(value) {
+  if (value == null) return Object.freeze({ enabled: false, websiteEnabled: false, phoneEnabled: false });
+  if (Array.isArray(value) || typeof value !== 'object') throw new TypeError('contact must be a mapping');
+  const unknown = Object.keys(value).filter((key) => !CONTACT_KEYS.includes(key));
+  if (unknown.length > 0) throw new TypeError(`Unsupported contact option: ${unknown.join(', ')}`);
+  for (const field of ['enabled', 'websiteEnabled', 'phoneEnabled']) {
+    if (value[field] != null && typeof value[field] !== 'boolean') {
+      throw new TypeError(`contact.${field} must be a boolean`);
+    }
+  }
+  return Object.freeze({
+    enabled: value.enabled === true,
+    websiteEnabled: value.websiteEnabled === true,
+    phoneEnabled: value.phoneEnabled === true
+  });
+}
+
 export async function loadSiteConfiguration({
   root = process.cwd(),
   configPath = process.env.GALA_CONFIG_PATH ?? 'site.config.yml'
@@ -58,7 +91,9 @@ export async function loadSiteConfiguration({
     throw new TypeError('site configuration must be a regular file');
   }
   const config = parse(await readFile(file, 'utf8'));
+  validateImplementedDesign(config);
   validatePerformanceBudgets(config?.performance?.budgets);
   config.statistics = validateStatistics(config.statistics);
+  config.contact = validateContact(config.contact);
   return config;
 }

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

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-palette="{{ site.design.palette }}" data-mode="system">
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette }}" data-mode="system">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -35,6 +35,9 @@
         <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
       </a>
       <nav class="gala-site-header__actions" aria-label="Site controls">
+        {% if site.contact.enabled %}<a class="gala-icon-control" href="{{ '/contact/' | url }}" aria-label="Contact author" title="Contact">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M3 5h18v14H3V5Zm2 2v.4l7 5 7-5V7H5Zm14 10V9.8l-7 5-7-5V17h14Z"/></svg>
+        </a>{% endif %}
         <button class="gala-icon-control" type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light." title="Appearance">
           <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18V3Zm0 2v14a7 7 0 0 1 0-14Z"/></svg>
           <span class="gala-visually-hidden" data-theme-mode-label>Theme: system</span>
@@ -51,6 +54,10 @@
       </nav>
     </header>
     <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 %}
+    </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>
@@ -84,7 +91,7 @@
     <dialog id="gala-account-dialog" class="gala-dialog gala-account-dialog" aria-labelledby="gala-account-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close account">Close</button></form>
       <h2 id="gala-account-title">Gala account</h2>
-      <iframe data-gala-session-frame title="Gala account and sign in" 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" 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/assets/embed-codepen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="CodePen"><path d="m12 1 10 6.5v9L12 23 2 16.5v-9zm0 3.4L6.2 8.2 12 12l5.8-3.8zm-7 6.2v3l4.5-1.5zm14 0-4.5 1.5 4.5 1.5zM6.2 15.8l5.8 3.8 5.8-3.8-5.8-3.7z" fill="currentColor"/></svg>

package/payload/src/assets/embed-gist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="GitHub Gist"><path d="M7 4 2 12l5 8h3l-5-8 5-8zm10 0-5 8 5 8h3l-5-8 5-8z" fill="currentColor"/></svg>

package/payload/src/assets/embed-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="X"><path d="M3 2h5.4l4.7 6.3L18.5 2H21l-6.7 8.2L22 22h-5.4l-5.2-7L5.5 22H3l7.2-8.9zm4.1 2 10.5 16h1.3L8.4 4z" fill="currentColor"/></svg>

package/payload/src/assets/embed-youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="YouTube"><rect x="1" y="4" width="22" height="16" rx="4" fill="#f00"/><path d="m10 8 6 4-6 4z" fill="#fff"/></svg>

package/payload/src/assets/interactions.js

@@ -8,6 +8,26 @@ function selectableFallback(control) {
 }
 
 document.addEventListener('click', async (event) => {
+  const embed = event.target.closest('[data-gala-embed-load]');
+  if (embed) {
+    const container = embed.closest('[data-gala-embed]');
+    const source = embed.dataset.galaEmbedSrc;
+    const provider = embed.dataset.galaEmbedLoad;
+    if (!container || !source || !['youtube', 'codepen'].includes(provider)) return;
+    const frame = document.createElement('iframe');
+    frame.src = source;
+    frame.title = provider === 'youtube' ? 'YouTube video' : 'CodePen example';
+    frame.loading = 'eager';
+    frame.referrerPolicy = 'strict-origin-when-cross-origin';
+    frame.setAttribute('sandbox', 'allow-forms allow-popups allow-presentation allow-same-origin allow-scripts');
+    frame.setAttribute('allow', provider === 'youtube'
+      ? 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share'
+      : 'fullscreen');
+    frame.setAttribute('allowfullscreen', '');
+    container.replaceChildren(frame);
+    return;
+  }
+
   const dialogControl = event.target.closest('[data-open-dialog]');
   if (dialogControl) {
     const dialog = document.getElementById(dialogControl.dataset.openDialog);
@@ -374,8 +394,9 @@ function engagementErrorMessage(code) {
   if (code === 'AUTHENTICATION_REQUIRED' || code === 'INVALID_BEARER_TOKEN'
       || code === 'REAUTHENTICATION_REQUIRED') return 'Sign in again to continue.';
   if (code === 'ENGAGEMENT_RATE_LIMITED') return 'You are posting too quickly; try again shortly.';
+  if (code === 'CONTACT_RATE_LIMITED') return 'You are sending too quickly; try again later.';
   if (code === 'RESOURCE_NOT_FOUND') return 'That item is no longer available.';
-  if (code === 'INVALID_ENGAGEMENT_WRITE' || code === 'INVALID_REQUEST') return 'Check your entry and try again.';
+  if (code === 'INVALID_ENGAGEMENT_WRITE' || code === 'INVALID_CONTACT_SUBMISSION' || code === 'INVALID_REQUEST') return 'Check your entry and try again.';
   if (code === 'ACCESS_DENIED') return 'That action is not available for this account.';
   if (code === 'IDEMPOTENCY_CONFLICT' || code === 'ENGAGEMENT_STATE_CONFLICT') return 'The item changed; reload and try again.';
   return 'The action could not be completed. Try again.';
@@ -392,6 +413,33 @@ function sendEngagementWrite(operation, payload) {
   });
 }
 
+document.addEventListener('submit', async (event) => {
+  const form = event.target.closest('[data-contact-form] form');
+  if (!form) return;
+  event.preventDefault();
+  const region = form.closest('[data-contact-form]');
+  const status = region.querySelector('[data-contact-status]');
+  if (!sessionUser) {
+    status.textContent = 'Sign in with the account button before sending.';
+    return;
+  }
+  const data = new FormData(form);
+  try {
+    status.textContent = 'Sending…';
+    await sendEngagementWrite('contact.submit', {
+      siteId: region.dataset.siteId,
+      subject: data.get('subject'),
+      message: data.get('message'),
+      website: data.get('website') || null,
+      phone: data.get('phone') || null
+    });
+    form.reset();
+    status.textContent = 'Message sent.';
+  } catch (error) {
+    status.textContent = engagementErrorMessage(error.message);
+  }
+});
+
 async function mutateEngagement(region, operation, payload) {
   const status = region.querySelector('[data-engagement-status]');
   try {

package/payload/src/assets/theme.css

@@ -30,6 +30,32 @@
   --gala-color-border: #aaa;
 }
 
+:root[data-palette='ocean'] {
+  --gala-color-background: light-dark(#f7fbff, #071b2d);
+  --gala-color-text: light-dark(#102a43, #e8f4ff);
+  --gala-color-surface: light-dark(#d9eaf7, #102f49);
+  --gala-color-accent: light-dark(#005ea8, #78c8ff);
+  --gala-color-border: light-dark(#526d82, #8aa8bf);
+}
+
+:root[data-palette='ocean'][data-mode='light'] {
+  --gala-color-background: #f7fbff;
+  --gala-color-text: #102a43;
+  --gala-color-surface: #d9eaf7;
+  --gala-color-accent: #005ea8;
+  --gala-color-border: #526d82;
+}
+
+:root[data-palette='ocean'][data-mode='dark'] {
+  --gala-color-background: #071b2d;
+  --gala-color-text: #e8f4ff;
+  --gala-color-surface: #102f49;
+  --gala-color-accent: #78c8ff;
+  --gala-color-border: #8aa8bf;
+}
+
+:root[data-layout='portfolio'] { --gala-content-width: 82rem; }
+
 body {
   margin: 0;
   padding: var(--gala-space-page);
@@ -126,6 +152,8 @@ button:focus-visible {
 .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; }
+[data-layout='portfolio'] .gala-card-index { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
+[data-layout='portfolio'] .gala-card { padding: clamp(1.25rem, 3vw, 2rem); }
 .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; }
@@ -164,6 +192,33 @@ button:focus-visible {
 .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-embed {
+  display: grid;
+  place-items: center;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  inline-size: 100%;
+  margin-inline: 0;
+  padding: 1rem;
+  overflow: hidden;
+  background: var(--gala-color-surface);
+  border: 0.125rem solid var(--gala-color-border);
+  border-radius: var(--gala-radius-control);
+}
+.gala-embed--youtube { aspect-ratio: 16 / 9; }
+.gala-embed--codepen { min-block-size: 25rem; }
+.gala-embed--gist,
+.gala-embed--x { min-block-size: 8rem; }
+.gala-embed iframe { inline-size: 100%; block-size: 100%; border: 0; }
+.gala-embed__icon {
+  inline-size: 2rem;
+  block-size: 2rem;
+  background: center / contain no-repeat;
+}
+.gala-embed--youtube .gala-embed__icon { background-image: url('./embed-youtube.svg'); }
+.gala-embed--codepen .gala-embed__icon { background-image: url('./embed-codepen.svg'); }
+.gala-embed--gist .gala-embed__icon { background-image: url('./embed-gist.svg'); }
+.gala-embed--x .gala-embed__icon { background-image: url('./embed-x.svg'); }
 .shiki,
 .shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
 :root[data-mode='dark'] .shiki,
@@ -173,6 +228,11 @@ button:focus-visible {
   :root[data-mode='system'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
 }
 .gala-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.gala-contact form { display: grid; gap: 1rem; max-inline-size: 42rem; }
+.gala-contact label { display: grid; gap: .35rem; }
+.gala-contact input,
+.gala-contact textarea { font: inherit; padding: .65rem; }
+.gala-contact textarea { min-block-size: 12rem; resize: vertical; }
 
 @keyframes gala-spin { to { transform: rotate(1turn); } }
 

package/payload/src/contact.njk

@@ -0,0 +1,22 @@
+---
+layout: layouts/base.njk
+title: Contact
+permalink: /contact/index.html
+eleventyExcludeFromCollections: true
+---
+{% if site.contact.enabled %}
+<article class="gala-contact" data-contact-form data-site-id="{{ site.site.id | escape }}">
+  <h1>Contact</h1>
+  <p>Sign in with your Gala account to send a private message to the author.</p>
+  <form>
+    <label>Subject <input name="subject" maxlength="200" required></label>
+    <label>Message <textarea name="message" maxlength="5000" required></textarea></label>
+    {% if site.contact.websiteEnabled %}<label>Website (optional) <input name="website" type="url" maxlength="2048" autocomplete="url"></label>{% endif %}
+    {% if site.contact.phoneEnabled %}<label>Phone (optional) <input name="phone" type="tel" maxlength="32" autocomplete="tel"></label>{% endif %}
+    <button type="submit">Send message</button>
+  </form>
+  <p data-contact-status role="status" aria-live="polite"></p>
+</article>
+{% else %}
+<h1>Contact</h1><p>This site is not accepting contact messages.</p>
+{% endif %}

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

@@ -52,6 +52,9 @@ function renderedDocument(post) {
   let document = renderedDocuments.get(post);
   if (!document) {
     document = renderMarkdownDocument(post.body);
+    for (const warning of document.warnings) {
+      console.warn(`${post.source}: warning: ${warning}`);
+    }
     renderedDocuments.set(post, document);
   }
   return document;