@lettercamp/cli 0.1.10 → 0.1.12

package/renderer/src/lib/font-fallbacks.js

@@ -193,4 +193,40 @@ export const fontFallbacks = {
             { "weight": 600, "local": ["Arial Bold", "Arial-BoldMT"], "sizeAdjust": "97.2956%", "ascentOverride": "101.1351%", "descentOverride": "32.4783%", "lineGapOverride": "0.0000%" },
             { "weight": 700, "local": ["Arial Bold", "Arial-BoldMT"], "sizeAdjust": "99.5874%", "ascentOverride": "98.8077%", "descentOverride": "31.7309%", "lineGapOverride": "0.0000%" },
         ] },
+    "Geist Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+        ] },
+    "JetBrains Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Fira Code": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Roboto Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+        ] },
+    "IBM Plex Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Source Code Pro": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+        ] },
 };

package/renderer/src/lib/fonts.js

@@ -1,11 +1,14 @@
 // Generated from lettercamp/lib/font-resources.ts.
 import { fontFallbacks } from "./font-fallbacks.js";
-export function fontResources(typography = {}) {
+import { fontCatalog } from "./font-catalog.js";
+export function fontResources(typography = {}, headingWeight = 500) {
     const quote = (value) => '"' + Array.from(String(value), char => /[a-zA-Z0-9 -]/.test(char) ? char : '\\' + char.codePointAt(0).toString(16) + ' ').join('') + '"';
     const google = new Set();
+    const resolved = new Set();
+    const preloads = new Set();
     const custom = new Map();
     const faces = [];
-    const resolve = (input) => {
+    const resolve = (input, criticalWeight) => {
         const value = input && typeof input === "object" ? input : undefined;
         if (value && typeof value.url === 'string' && !(typeof value.google === 'string' && value.google.trim())) {
             try {
@@ -24,25 +27,45 @@ export function fontResources(typography = {}) {
             catch { /* Invalid custom URLs use the default family. */ }
         }
         const family = value && typeof value.google === 'string' && value.google.trim() ? value.google.trim() : 'Inter';
+        const catalog = Object.hasOwn(fontCatalog, family) ? fontCatalog[family] : undefined;
+        if (catalog) {
+            if (!resolved.has(family))
+                for (const face of catalog.faces) {
+                    faces.push('@font-face{font-family:' + quote(family) + ';src:url(' + quote(face.url) + ') format("woff2");font-weight:' + face.weight
+                        + ';font-style:normal;font-display:swap;unicode-range:' + face.unicodeRange + ';}');
+                }
+            // Prioritize only the title and body Latin files. Other subsets load on demand.
+            const distance = (weight) => {
+                const [min, max = min] = weight.split(' ').map(Number);
+                return Math.max(min - criticalWeight, criticalWeight - max, 0);
+            };
+            const critical = catalog.faces.filter(face => face.subset === 'latin').sort((a, b) => distance(a.weight) - distance(b.weight))[0];
+            if (critical)
+                preloads.add(critical.url);
+        }
+        else {
+            // Preserve support for existing CLI settings naming fonts outside our picker.
+            google.add(family);
+        }
         const fallback = Object.hasOwn(fontFallbacks, family) ? fontFallbacks[family] : undefined;
         if (fallback) {
             const alias = family + ' Fallback';
-            if (!google.has(family))
+            if (!resolved.has(family))
                 for (const face of fallback.faces) {
                     faces.push('@font-face{font-family:' + quote(alias) + ';src:' + face.local.map(name => 'local(' + quote(name) + ')').join(',')
                         + ';font-weight:' + face.weight + ';font-style:normal;size-adjust:' + face.sizeAdjust
                         + ';ascent-override:' + face.ascentOverride + ';descent-override:' + face.descentOverride + ';line-gap-override:' + face.lineGapOverride + ';}');
                 }
-            google.add(family);
+            resolved.add(family);
             return quote(family) + ', ' + quote(alias) + ', ' + fallback.generic;
         }
-        google.add(family);
+        resolved.add(family);
         return quote(family) + ', Arial, Helvetica, sans-serif';
     };
-    const headingFamily = resolve(typography.headingFont);
-    const bodyFamily = resolve(typography.bodyFont);
+    const headingFamily = resolve(typography.headingFont, headingWeight);
+    const bodyFamily = resolve(typography.bodyFont, 400);
     return {
-        headingFamily, bodyFamily, css: faces.join('\n'),
+        headingFamily, bodyFamily, css: faces.join('\n'), preloads: [...preloads],
         googleUrl: google.size ? 'https://fonts.googleapis.com/css2?' + [...google].map(family => 'family=' + encodeURIComponent(family) + ':wght@' + (Object.hasOwn(fontFallbacks, family) ? fontFallbacks[family].faces.map(face => face.weight).join(';') : '400;500;600;700')).join('&') + '&display=swap' : null,
     };
 }

package/renderer/src/lib/image-widths.ts

@@ -7,7 +7,4 @@ export const imageWidthStyles = `
 .publication-post .article-hero-image:not([data-image-width="regular"]):not([data-image-width="full"]) { width: min(100%, calc(var(--post-content-width) + 128px)); max-width: none; }
 .publication-post .article-hero-image[data-image-width="full"] { width: 100%; max-width: none; }
 .publication-post .article-hero-image[data-image-width="regular"] { width: min(100%, var(--cover-image-width, var(--post-content-width)), var(--post-content-width)); max-width: none; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) { display: block; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-intro { max-width: var(--post-content-width); margin-inline: auto; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-hero-image { margin-top: 32px; }
 `;

package/renderer/src/lib/key-takeaways.ts

@@ -0,0 +1,25 @@
+// Generated from lettercamp/lib/key-takeaways.ts.
+// Shared by the page editor, draft preview, and published renderer.
+export const keyTakeawaysStyles = `
+[data-lettercamp-key-takeaways] {
+  box-sizing: border-box; margin-block: 24px; padding: 20px 24px;
+  border-radius: 8px; background: var(--site-surface, #fafafa); color: inherit;
+  font: inherit; overflow-wrap: anywhere;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 10px; padding: 0;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] :is(ul, ol) {
+  margin: 0; padding: 0 0 0 1.4em;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] li {
+  margin: 6px 0; padding: 0 0 0 .2em;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] p { margin: 0; padding: 0; min-height: 0; }
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > p:first-child { margin-bottom: 10px; }
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :last-child,
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :last-child > li:last-child { margin-bottom: 0; }
+@media (max-width: 600px) {
+  [data-lettercamp-key-takeaways] { padding: 16px 18px; }
+}
+`;

package/renderer/src/lib/post-search.ts

@@ -0,0 +1,194 @@
+export const postSearchScript = String.raw`(() => {
+  const trigger = document.querySelector('.post-search-trigger');
+  const dialog = document.querySelector('#post-search-dialog');
+  const data = document.querySelector('[data-post-search-index]');
+  if (!trigger || !dialog || !data || typeof dialog.showModal !== 'function') return;
+  const opener = trigger.querySelector('input');
+  const input = dialog.querySelector('input');
+  const results = dialog.querySelector('.post-search-results');
+  const status = dialog.querySelector('.post-search-status');
+  const empty = dialog.querySelector('.post-search-empty');
+  const limit = 20;
+  let posts;
+  const normalized = [];
+  let generation = 0;
+  let timer;
+  let restoringFocus = false;
+  const normalize = text => text.normalize('NFKD').replace(/\p{M}/gu, '').toLowerCase().replace(/\s+/g, ' ').trim();
+  const element = (tag, className, text) => {
+    const node = document.createElement(tag);
+    node.className = className;
+    node.textContent = text;
+    return node;
+  };
+  function highlighted(className, text, terms) {
+    const node = element('span', className, '');
+    if (!terms.length) { node.textContent = text; return node; }
+    // Map folded characters back to authored text, including accents and
+    // ligatures. Only the displayed titles/excerpts need this small offset map.
+    let folded = '';
+    let offset = 0;
+    const starts = [], ends = [];
+    for (const character of text) {
+      const end = offset + character.length;
+      const value = character.normalize('NFKD').replace(/\p{M}/gu, '').replace(/\s/g, ' ');
+      if (!value && ends.length) ends[ends.length - 1] = end;
+      for (const unit of value) {
+        if (unit === ' ' && folded.endsWith(' ')) { ends[ends.length - 1] = end; continue; }
+        folded += unit;
+        for (let i = 0; i < unit.length; i++) { starts.push(offset); ends.push(end); }
+      }
+      offset = end;
+    }
+    folded = folded.toLowerCase();
+    const ranges = [];
+    for (const term of new Set([normalize(input.value), ...terms])) {
+      let start = folded.indexOf(term);
+      while (start >= 0) {
+        ranges.push([starts[start], ends[start + term.length - 1]]);
+        start = folded.indexOf(term, start + term.length);
+      }
+    }
+    ranges.sort((a, b) => a[0] - b[0] || b[1] - a[1]);
+    const merged = [];
+    for (const range of ranges) {
+      const previous = merged.at(-1);
+      if (previous && range[0] <= previous[1]) previous[1] = Math.max(previous[1], range[1]);
+      else merged.push(range);
+    }
+    let cursor = 0;
+    for (const [start, end] of merged) {
+      node.append(document.createTextNode(text.slice(cursor, start)), element('mark', 'post-search-match', text.slice(start, end)));
+      cursor = end;
+    }
+    node.append(document.createTextNode(text.slice(cursor)));
+    return node;
+  }
+  const snippet = (post, terms, entry) => {
+    const text = post.text || post.summary;
+    const folded = post.text ? entry.text : entry.summary;
+    const match = terms.map(term => folded.indexOf(term)).filter(index => index >= 0);
+    const start = match.length ? Math.max(0, Math.min(...match) - 55) : 0;
+    // Normalization can change character offsets slightly; excerpts are just
+    // context, so keep the original authored text rather than folded text.
+    return (start ? '…' : '') + text.slice(start, start + 180) + (text.length > start + 180 ? '…' : '');
+  };
+  function render(matches, count, terms) {
+    const fragment = document.createDocumentFragment();
+    for (const { index } of matches) {
+      const post = posts[index];
+      const row = document.createElement('li');
+      const link = element('a', 'post-search-result', '');
+      link.href = post.href;
+      link.append(highlighted('post-search-title', post.title, terms));
+      const meta = [post.category, post.date].filter(Boolean).join(' · ');
+      if (meta) link.append(element('span', 'post-search-meta', meta));
+      const excerpt = terms.length ? snippet(post, terms, normalized[index]) : post.summary;
+      if (excerpt) link.append(highlighted('post-search-excerpt', excerpt, terms));
+      row.append(link);
+      fragment.append(row);
+    }
+    results.replaceChildren(fragment);
+    results.scrollTop = 0;
+    results.removeAttribute('aria-busy');
+    empty.hidden = count > 0;
+    empty.textContent = posts.length ? 'No articles found. Try a different word or title.' : 'No articles here yet.';
+    status.textContent = !terms.length ? 'Recent articles' : count > limit
+      ? 'Showing ' + limit + ' of ' + count + ' matching articles. Keep typing to narrow your search.'
+      : count + (count === 1 ? ' article found' : ' articles found');
+  }
+  function search() {
+    clearTimeout(timer);
+    const current = ++generation;
+    const query = normalize(input.value);
+    const terms = [...new Set(query.split(' ').filter(Boolean))];
+    if (!terms.length) {
+      render(posts.slice(0, 8).map((_, index) => ({ index })), posts.length, terms);
+      return;
+    }
+    // Clear stale links immediately so Enter never opens an old query's result.
+    results.replaceChildren();
+    results.setAttribute('aria-busy', 'true');
+    empty.hidden = true;
+    status.textContent = 'Searching…';
+    let cursor = 0;
+    let count = 0;
+    const best = [];
+    function step() {
+      if (current !== generation || !dialog.open) return;
+      const deadline = performance.now() + 6;
+      while (cursor < posts.length) {
+        const index = cursor++;
+        const post = posts[index];
+        const entry = normalized[index] ??= {
+          title: normalize(post.title),
+          summary: normalize(post.summary), text: normalize(post.text),
+        };
+        if (terms.every(term => entry.title.includes(term) || entry.summary.includes(term) || entry.text.includes(term))) {
+          count++;
+          const score = (entry.title === query ? 1000 : entry.title.startsWith(query) ? 500 : entry.title.includes(query) ? 250 : 0)
+            + terms.reduce((sum, term) => sum + (entry.title.includes(term) ? 10 : 0), 0);
+          const position = best.findIndex(item => score > item.score);
+          if (position >= 0) best.splice(position, 0, { index, score });
+          else if (best.length < limit) best.push({ index, score });
+          if (best.length > limit) best.pop();
+        }
+        // Yield between chunks for large publications. A newer query cancels
+        // this work; only the best 20 matches ever become DOM nodes.
+        if (performance.now() >= deadline) break;
+      }
+      if (cursor < posts.length) timer = setTimeout(step, 0);
+      else render(best, count, terms);
+    }
+    timer = setTimeout(step, 0);
+  }
+  function open() {
+    if (restoringFocus || dialog.open) return;
+    if (!posts) {
+      posts = JSON.parse(data.textContent);
+      data.textContent = '';
+    }
+    dialog.showModal();
+    input.focus({ preventScroll: true });
+    search();
+  }
+  function close() {
+    restoringFocus = true;
+    ++generation;
+    clearTimeout(timer);
+    dialog.close();
+    opener.focus({ preventScroll: true });
+    // Native dialog focus restoration must not immediately reopen the search.
+    queueMicrotask(() => { restoringFocus = false; });
+  }
+  opener.addEventListener('focus', open);
+  opener.addEventListener('click', open);
+  opener.addEventListener('keydown', event => {
+    if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); open(); }
+  });
+  input.addEventListener('input', event => { if (!event.isComposing) search(); });
+  input.addEventListener('compositionend', search);
+  dialog.querySelector('.post-search-close').addEventListener('click', close);
+  dialog.addEventListener('cancel', event => { event.preventDefault(); close(); });
+  let backdropDown = false;
+  dialog.addEventListener('pointerdown', event => { backdropDown = event.target === dialog; });
+  dialog.addEventListener('click', event => {
+    if (event.target === dialog && backdropDown) close();
+  });
+  dialog.addEventListener('keydown', event => {
+    if (event.isComposing) return;
+    const links = [...results.querySelectorAll('a')];
+    const index = links.indexOf(document.activeElement);
+    if (event.key === 'ArrowDown' && (event.target === input || index >= 0)) {
+      event.preventDefault();
+      (links[Math.min(index + 1, links.length - 1)] || input).focus();
+    } else if (event.key === 'ArrowUp' && (event.target === input || index >= 0)) {
+      event.preventDefault();
+      (index === -1 ? links.at(-1) || input : links[index - 1] || input).focus();
+    } else if (event.key === 'Enter' && event.target === input) {
+      event.preventDefault();
+      links[0]?.click();
+    }
+  });
+  trigger.hidden = false;
+})();`;

package/renderer/src/lib/post-share.ts

@@ -31,6 +31,16 @@ export const postShareScript = `
   const ensureTrigger = () => {
     const byline = document.querySelector('.publication-post .byline');
     if (byline && !byline.querySelector('.post-share-button')) byline.insertAdjacentHTML('beforeend', triggerMarkup);
+    const intro = document.querySelector('.publication-post .article-intro');
+    if (!intro) return;
+    let row = intro.querySelector('.article-meta-row');
+    if (!row) {
+      row = document.createElement('div'); row.className = 'article-meta-row';
+      const category = intro.querySelector('.article-category');
+      if (category) row.append(category);
+      intro.prepend(row);
+    }
+    if (!row.querySelector('.post-share-button')) row.insertAdjacentHTML('beforeend', triggerMarkup);
   };
   const action = (tag, name, label, graphic) => '<' + tag + ' class="post-share-action" data-share="' + name + '"' + (tag === 'button' ? ' type="button"' : '') + '><span class="post-share-action-icon">' + graphic + '</span><span data-label>' + label + '</span></' + tag + '>';
   const external = (link, href) => {

package/renderer/src/lib/related-posts.ts

@@ -0,0 +1,50 @@
+// Generated from lettercamp/lib/related-posts.ts.
+type RelatedPost = { href: string; title?: unknown; description?: unknown; category?: unknown; draft?: unknown };
+
+// Shared by the static renderer and editor preview. Keep this function self-contained
+// so the preview bridge can embed it without shipping a separate client bundle.
+export function createRelatedPostSelector<T extends RelatedPost>(posts: T[], language = "en") {
+  const stopWords: Record<string, string> = {
+    en: "a an and are as at be been but by for from has have how in is it its of on or our that the their this to was we were what when which who will with you your",
+    es: "a al con de del el en es esta este la las lo los o para por que se su sus un una y",
+    fr: "a au aux avec ce ces dans de des du elle en est et il la le les leur ou par pas pour que qui se son sur un une",
+    de: "am an auf aus bei das dem den der des die ein eine einer es für im in ist mit oder sich sind und von zu zum zur",
+    it: "a al alla che con da dal dei del della di e è gli i il in la le lo o per si su un una",
+    pt: "a ao as com da das de do dos e em é na nas no nos o os ou para por que se sua um uma",
+  };
+  const ignored = new Set((stopWords[language.toLowerCase().split("-")[0]] ?? "").split(" "));
+  const segmenter = new Intl.Segmenter(language, { granularity: "word" });
+  const text = {
+    normalize(value: unknown) {
+      return typeof value === "string" ? value.normalize("NFKC").toLocaleLowerCase(language).trim() : "";
+    },
+    prepare(post: T) {
+      const words = new Map<string, number>();
+      for (const [value, weight] of [[post.description, 1], [post.title, 3]] as const) {
+        for (const part of segmenter.segment(text.normalize(value))) {
+          if (part.isWordLike && !ignored.has(part.segment)) words.set(part.segment, weight);
+        }
+      }
+      return { post, words, weight: [...words.values()].reduce((sum, weight) => sum + weight, 0), category: text.normalize(post.category) };
+    },
+    hash(value: string) {
+      let result = 2166136261;
+      for (let index = 0; index < value.length; index++) result = Math.imul(result ^ value.charCodeAt(index), 16777619);
+      return result >>> 0;
+    },
+  };
+  const candidates = [...new Map(posts.filter(post => post.draft !== true).map(post => [post.href, post])).values()].map(text.prepare);
+  const byHref = new Map(candidates.map(candidate => [candidate.post.href, candidate]));
+  return (current: T): T[] => {
+    const existing = byHref.get(current.href);
+    const source = existing?.post === current ? existing : text.prepare(current);
+    return candidates.filter(candidate => candidate.post.href !== current.href).map(candidate => {
+      let overlap = 0;
+      for (const [word, weight] of source.words) overlap += Math.min(weight, candidate.words.get(word) ?? 0);
+      const union = source.weight + candidate.weight - overlap;
+      const score = (union ? 75 * overlap / union : 0) + (source.category && source.category === candidate.category ? 25 : 0);
+      return { post: candidate.post, score, tie: text.hash(current.href + "\n" + candidate.post.href) };
+    }).sort((a, b) => b.score - a.score || a.tie - b.tie || (a.post.href < b.post.href ? -1 : a.post.href > b.post.href ? 1 : 0))
+      .slice(0, 3).map(candidate => candidate.post);
+  };
+}

package/renderer/src/lib/site-colors.ts

@@ -0,0 +1,42 @@
+// Generated from lettercamp/lib/site-colors.ts.
+// Shared by published sites and live previews. Keep this function self-contained:
+// the preview bridge embeds it in the publication iframe.
+export function siteColors(design?: { backgroundColor?: unknown; accentColor?: unknown }): Record<string, string> {
+  const [background, accent] = [design?.backgroundColor, design?.accentColor].map((value, index) =>
+    typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : index === 0 ? "#ffffff" : "");
+  const [text, accentText] = [background, accent || background].map(color => {
+    const linear = [1, 3, 5].map(offset => {
+      const channel = parseInt(color.slice(offset, offset + 2), 16) / 255;
+      return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+    return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "#000000" : "#ffffff";
+  });
+  const base = [1, 3, 5].map(offset => parseInt(background.slice(offset, offset + 2), 16));
+  const target = text === "#000000" ? 0 : 255;
+  // Reference grays on white. Retain each shade's distance along the
+  // background-to-foreground scale; e.g. 250 preserves #fafafa on white.
+  const shades: Record<string, number> = {
+    "surface": 250,
+    "surface-hover": 245,
+    "surface-active": 238,
+    "border": 240,
+    "border-strong": 221,
+    "text-strong": 65,
+    "text-secondary": 111,
+    "text-muted": 134,
+    "text-faint": 180,
+  };
+  const colors: Record<string, string> = {
+    "color-scheme": target === 255 ? "dark" : "light",
+    "--site-background": background,
+    "--site-foreground": text,
+    "--site-accent": accent || "inherit",
+    "--site-accent-text": accent ? accentText : "inherit",
+    "--site-code-tint": target === 255 ? "45%" : "0%",
+  };
+  for (const [name, gray] of Object.entries(shades)) {
+    colors[`--site-${name}`] = "#" + base.map(channel => Math.round(channel + (target - channel) * (1 - gray / 255)).toString(16).padStart(2, "0")).join("");
+  }
+  return colors;
+}

package/renderer/src/lib/table-styles.ts

@@ -1,12 +1,12 @@
 // Generated from lettercamp/lib/table-styles.ts.
 // Shared by the editable table, safe preview, and published renderer.
 export const tableStyles = `
-[data-lettercamp-table] { position: relative; margin-block: 24px 32px; color: #303034; font: inherit; }
+[data-lettercamp-table] { position: relative; margin-block: 24px 32px; color: var(--site-text-strong, #303034); font: inherit; }
 [data-lettercamp-table] > table { width: 100%; border-collapse: collapse; table-layout: fixed; border-spacing: 0; font: inherit; color: inherit; }
-[data-lettercamp-table] > table > tbody > tr > :is(td, th) { position: relative; border: 1px solid #f0f0f0; padding: 0; min-width: 0; vertical-align: top; font: inherit; text-align: left; }
+[data-lettercamp-table] > table > tbody > tr > :is(td, th) { position: relative; border: 1px solid var(--site-border, #f0f0f0); padding: 0; min-width: 0; vertical-align: top; font: inherit; text-align: left; }
 [data-lettercamp-table] [data-table-content] { display: block; box-sizing: border-box; min-height: calc(1.8em + 16px); padding: 8px 12px; line-height: inherit; overflow-wrap: anywhere; white-space: pre-wrap; outline: none; }
 [data-lettercamp-table] [data-table-cell-height] [data-table-content] { height: var(--table-cell-height); min-height: 0; overflow: auto; }
 [data-lettercamp-table] :is(td, th) > p, [data-lettercamp-table] [data-table-content] > p { margin: 0; padding: 0; min-height: 0; }
-[data-lettercamp-table] [data-table-content] code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; padding: .18em .35em; background: #f3f3f3; border-radius: 3px; }
+[data-lettercamp-table] [data-table-content] code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; padding: .18em .35em; background: var(--site-surface-hover, #f3f3f3); border-radius: 3px; }
 [data-lettercamp-table] [data-table-content] a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
 `;

package/renderer/src/pages/[...slug].astro

@@ -1,20 +1,27 @@
 ---
 import SiteLayout from '../layouts/SiteLayout.astro';
 import AuthorByline from '../components/AuthorByline.astro';
-import { pageSlug, postDate, getCategories } from '../lib/posts.js';
+import RelatedPosts from '../components/RelatedPosts.astro';
+import { pageSlug, postDate, getCategories, getPosts } from '../lib/posts.js';
+import { createRelatedPostSelector } from '../lib/related-posts';
+import { sitePath } from '../lib/urls.js';
 import site from '../site.js';
 import { readContentWidthEm } from '../lib/post-layout';
 import { pages } from '../content.js';
 import { postShareButton } from '../lib/post-share';
 
 export function getStaticPaths() {
+  const posts = getPosts(site.language, site.timeZone);
+  const selectRelated = createRelatedPostSelector(posts, site.language);
+  const byHref = new Map(posts.map(post => [post.href, post]));
   return Object.entries(pages).map(([filename, page]) => {
     const slug = pageSlug(filename);
-    return { params: { slug }, props: { page } };
+    const href = sitePath(`/${slug.split('/').map(encodeURIComponent).join('/')}/`);
+    return { params: { slug }, props: { page, relatedPosts: selectRelated(byHref.get(href)) } };
   });
 }
 
-const { page } = Astro.props;
+const { page, relatedPosts } = Astro.props;
 const { Content, frontmatter = {} } = page;
 const coverImage = frontmatter.image ?? frontmatter.ogImage;
 const coverImageWidth = Number(frontmatter.coverImageWidth ?? (frontmatter.image ? frontmatter.imageWidth : undefined));
@@ -35,9 +42,12 @@ const coverWidth = /^[0-9]+$/.test(String(frontmatter.coverWidth)) && Number(fro
     data-post-cover={postLayout.showCover === false ? 'hidden' : 'visible'} data-post-toc={postLayout.showTableOfContents === false ? 'hidden' : 'visible'}>
     <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>
       <div class="article-intro">
+        <div class="article-meta-row">
         {category && <p class="article-category">
           <a href={categoryHref}>{category}</a>
         </p>}
+          <Fragment set:html={postShareButton} />
+        </div>
         <h1>{frontmatter.title ?? site.name}</h1>
         {frontmatter.description && <p class="description">{frontmatter.description}</p>}
         <div class="byline">
@@ -62,5 +72,6 @@ const coverWidth = /^[0-9]+$/.test(String(frontmatter.coverWidth)) && Number(fro
       </aside>}
       <div class="prose"><Content /></div>
     </div>
+    <RelatedPosts posts={relatedPosts} site={site} />
   </article>
 </SiteLayout>

package/renderer/src/styles/post-search.css

@@ -0,0 +1,37 @@
+.post-search-trigger { position: relative; flex: 0 1 240px; min-width: 180px; margin-left: auto; }
+.post-search-trigger svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--site-text-muted); pointer-events: none; }
+.post-search-trigger input { width: 100%; height: 36px; padding: 0 14px 0 38px; border: 1px solid var(--site-border-strong); border-radius: 999px; background: var(--site-background); color: var(--site-foreground); font: 400 var(--text-label)/1.5 var(--font-family); cursor: text; }
+.post-search-trigger input::placeholder, .post-search-header input::placeholder { color: var(--site-text-secondary); opacity: 1; }
+.post-search-trigger input:focus-visible { outline: 2px solid var(--site-foreground); outline-offset: 3px; }
+html:has(.post-search-dialog[open]) { overflow: hidden; }
+.post-search-dialog { position: fixed; inset: 0; width: min(620px, calc(100vw - 32px)); max-width: none; max-height: min(440px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-background); color: var(--site-foreground); box-shadow: 0 20px 80px #0003; font: 400 var(--text-label)/1.5 var(--font-family); }
+.post-search-dialog[open] { display: flex; flex-direction: column; }
+.post-search-dialog::backdrop { background: color-mix(in srgb, var(--site-background) 65%, transparent); backdrop-filter: blur(3px); }
+.post-search-header { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--site-border); }
+.post-search-header > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--site-text-secondary); }
+.post-search-header input { min-width: 0; width: 100%; padding: 2px 0; border: 0; outline: none; background: transparent; color: inherit; font: 400 max(16px, var(--text-small))/1.5 var(--font-family); }
+.post-search-header:focus-within { border-bottom-color: var(--site-border-strong); }
+.post-search-close { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; padding: 4px; border: 0; background: transparent; color: var(--site-text-secondary); }
+.post-search-close:hover { color: var(--site-foreground); }
+.post-search-close svg { width: 20px; height: 20px; }
+.post-search-status { flex-shrink: 0; margin: 0; padding: 8px 16px 4px; color: var(--site-text-secondary); font-size: var(--text-meta); }
+.post-search-results { flex: 0 1 auto; min-height: 0; margin: 0; padding: 0 6px 6px; overflow: auto; overscroll-behavior: contain; list-style: none; }
+.post-search-result { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
+.post-search-result:is(:hover, :focus-visible) { outline: none; background: var(--site-surface-active); border-radius: 8px; }
+.post-search-title { font-size: var(--text-label); font-weight: 500; }
+.post-search-meta { color: var(--site-text-secondary); font-size: var(--text-meta); }
+.post-search-excerpt { font-size: var(--text-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--site-text-secondary); }
+.post-search-empty { margin: 0; padding: 20px 16px; color: var(--site-text-secondary); text-align: center; }
+.post-search-results:empty { flex: 0; }
+@media (max-width: 640px) {
+  .post-search-trigger { flex-basis: 100%; min-width: 0; }
+  .post-search-dialog { width: calc(100vw - 24px); max-height: min(440px, calc(100dvh - 24px)); }
+  .post-search-header { padding: 10px 12px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .post-search-dialog[open] { animation: post-search-enter 140ms ease-out; }
+  @keyframes post-search-enter { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
+}
+
+.post-search-match { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--site-foreground) 7%, transparent); color: var(--site-foreground); font-weight: 600; }
+html[data-site-accent] .post-search-match { background: color-mix(in srgb, var(--site-accent) 25%, transparent); }