@lettercamp/cli 0.1.7 → 0.1.9

package/renderer/src/lib/mobile-navigation.ts

@@ -0,0 +1,76 @@
+// Delegated events also handle header controls rebuilt by the design preview.
+export const mobileNavigationScript = `
+(() => {
+  const mobile = matchMedia('(max-width: 600px)');
+  let active;
+  let restore;
+  const close = (focus = false) => {
+    if (!active) return;
+    const menu = active;
+    active = null;
+    menu.open = false;
+    const toggle = menu.querySelector('summary');
+    toggle.setAttribute('aria-label', 'Open menu');
+    toggle.setAttribute('aria-expanded', 'false');
+    restore?.();
+    restore = null;
+    if (focus && toggle.isConnected) toggle.focus({ preventScroll: true });
+  };
+  const position = () => {
+    if (!active) return;
+    const header = active.closest('.site-header');
+    header.style.setProperty('--mobile-menu-top', Math.max(0, header.getBoundingClientRect().bottom) + 'px');
+  };
+  document.addEventListener('toggle', event => {
+    const menu = event.target;
+    if (!(menu instanceof HTMLDetailsElement) || !menu.matches('.mobile-navigation')) return;
+    if (!menu.open) { if (active === menu) close(); return; }
+    if (!mobile.matches) { menu.open = false; return; }
+    if (active === menu) return;
+    close();
+    active = menu;
+    const header = menu.closest('.site-header');
+    const toggle = menu.querySelector('summary');
+    toggle.setAttribute('aria-label', 'Close menu');
+    toggle.setAttribute('aria-expanded', 'true');
+    const body = document.body;
+    const root = document.documentElement;
+    const overflow = body.style.overflow;
+    const rootOverflow = root.style.overflow;
+    const padding = body.style.paddingRight;
+    const scrollbar = innerWidth - root.clientWidth;
+    if (scrollbar > 0) body.style.paddingRight = (parseFloat(getComputedStyle(body).paddingRight) + scrollbar) + 'px';
+    body.style.overflow = root.style.overflow = 'hidden';
+    const background = [...body.children].filter(node => node instanceof HTMLElement && !node.contains(header) && !['SCRIPT', 'STYLE'].includes(node.tagName));
+    const inert = background.map(node => node.inert);
+    background.forEach(node => { node.inert = true; });
+    restore = () => {
+      body.style.overflow = overflow;
+      root.style.overflow = rootOverflow;
+      body.style.paddingRight = padding;
+      background.forEach((node, index) => { node.inert = inert[index]; });
+      header.style.removeProperty('--mobile-menu-top');
+    };
+    position();
+  }, true);
+  document.addEventListener('keydown', event => {
+    if (!active) return;
+    if (event.key === 'Escape') { event.preventDefault(); close(true); return; }
+    if (event.key !== 'Tab') return;
+    const header = active.closest('.site-header');
+    const items = [...header.querySelectorAll('a[href], summary, button:not(:disabled)')].filter(node => node.getClientRects().length);
+    const first = items[0], last = items[items.length - 1];
+    if (event.shiftKey && (document.activeElement === first || !header.contains(document.activeElement))) {
+      event.preventDefault(); last?.focus();
+    } else if (!event.shiftKey && (document.activeElement === last || !header.contains(document.activeElement))) {
+      event.preventDefault(); first?.focus();
+    }
+  });
+  document.addEventListener('click', event => {
+    if (active && event.target instanceof Element && event.target.closest('.site-header a[href]')) close();
+  }, true);
+  document.addEventListener('lettercamp:header-update', () => close());
+  window.addEventListener('pagehide', () => close());
+  window.addEventListener('resize', () => { if (!mobile.matches) close(); else position(); });
+})();
+`;

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

@@ -0,0 +1,6 @@
+// Generated from lettercamp/lib/post-layout.ts.
+export function readContentWidthEm(layout: { contentWidthEm?: unknown } = {}) {
+  const width = layout.contentWidthEm;
+  if (typeof width === "number" && Number.isFinite(width) && width > 0) return width;
+  return 40;
+}

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

@@ -0,0 +1,264 @@
+const shareIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V3m-5 5 5-5 5 5M5 13v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7"/></svg>';
+export const postShareButton = `<button type="button" class="post-share-button" aria-haspopup="dialog">${shareIcon}<span>Share</span></button>`;
+
+// Read metadata when opening so the editor's live preview always shares the current post.
+export const postShareScript = `
+(() => {
+  const triggerMarkup = ${JSON.stringify(postShareButton)};
+  const icon = paths => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + paths + '</svg>';
+  const icons = {
+    link: icon('<path d="m10 13 4-4m-6 6-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0m2 3 1-1a4 4 0 0 1 6 6l-4 4a4 4 0 0 1-6 0" transform="translate(1 1)"/>'),
+    x: icon('<path d="m4 3 16 18h-5L4 3h5l11 18M20 3l-6.5 7.3M4 21l6.5-7.3"/>'),
+    email: icon('<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 6 9 7 9-7"/>'),
+    summarize: icon('<path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z"/>'),
+    close: icon('<path d="m6 6 12 12M6 18 18 6"/>'),
+    arrow: icon('<path d="M7 17 17 7M7 7h10v10"/>'),
+    more: icon('<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>'),
+  };
+  let dialog;
+  let trigger;
+  let copyGeneration = 0;
+  let sharedPost;
+  let menuTracking;
+  const meta = name => document.querySelector('meta[property="' + name + '"]')?.content || '';
+  const httpUrl = value => {
+    if (!value) return '';
+    try {
+      const url = new URL(value, location.href);
+      return ['https:', 'http:'].includes(url.protocol) ? url.href : '';
+    } catch { return ''; }
+  };
+  const ensureTrigger = () => {
+    const byline = document.querySelector('.publication-post .byline');
+    if (byline && !byline.querySelector('.post-share-button')) byline.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) => {
+    link.href = href;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+  };
+  const createDialog = () => {
+    dialog = document.createElement('dialog');
+    dialog.className = 'post-share-dialog';
+    dialog.id = 'post-share-dialog';
+    dialog.setAttribute('aria-labelledby', 'post-share-heading');
+    dialog.innerHTML = '<div class="post-share-heading"><h2 id="post-share-heading">Share this post</h2><button type="button" class="post-share-close" aria-label="Close share dialog" autofocus>' + icons.close + '</button></div>' +
+      '<div class="post-share-preview" role="group" aria-label="Link preview"><img class="post-share-image" alt="" hidden><div class="post-share-preview-copy"><p class="post-share-domain"></p><h3></h3><p class="post-share-description"></p></div></div>' +
+      '<div class="post-share-actions">' + action('button', 'copy', 'Copy link', icons.link) + action('a', 'x', 'X', icons.x) + action('a', 'email', 'Email', icons.email) + action('button', 'summarize', 'Summarize', icons.summarize) + action('button', 'more', 'More', icons.more) + '</div>' +
+      '<div id="post-share-menu" class="post-share-menu" popover="auto" role="menu" aria-label="More sharing options"></div>' +
+      '<section id="post-share-summaries" class="post-share-summaries" aria-labelledby="post-share-summary-heading" hidden><h3 id="post-share-summary-heading">Summarize with AI</h3><p>Choose an app to open a ready-to-use prompt.</p><div class="post-share-providers"></div></section>' +
+      '<p class="post-share-status" role="status" aria-live="polite"></p><div class="post-share-copy-fallback" hidden><label for="post-share-url">Post link</label><input id="post-share-url" readonly></div>';
+    const moreButton = dialog.querySelector('[data-share="more"]');
+    const menu = dialog.querySelector('.post-share-menu');
+    moreButton.setAttribute('aria-haspopup', 'menu');
+    moreButton.setAttribute('aria-expanded', 'false');
+    moreButton.setAttribute('aria-controls', menu.id);
+    moreButton.setAttribute('popovertarget', menu.id);
+    const closeMenu = (restoreFocus = false) => {
+      if (!menu.matches(':popover-open')) return;
+      menu.hidePopover();
+      moreButton.setAttribute('aria-expanded', 'false');
+      menuTracking?.abort();
+      if (restoreFocus) moreButton.focus({ preventScroll: true });
+    };
+    const positionMenu = () => {
+      const anchor = moreButton.getBoundingClientRect();
+      const viewport = window.visualViewport;
+      const left = viewport?.offsetLeft || 0;
+      const top = viewport?.offsetTop || 0;
+      const width = viewport?.width || innerWidth;
+      const height = viewport?.height || innerHeight;
+      const above = anchor.top - top - 20;
+      const below = top + height - anchor.bottom - 20;
+      const upwards = above >= Math.min(menu.scrollHeight, 360) || above > below;
+      menu.style.maxHeight = Math.max(44, upwards ? above : below) + 'px';
+      menu.style.left = Math.max(left + 12, Math.min(anchor.right - menu.offsetWidth, left + width - menu.offsetWidth - 12)) + 'px';
+      menu.style.top = Math.max(top + 12, upwards ? anchor.top - menu.offsetHeight - 8 : anchor.bottom + 8) + 'px';
+    };
+    const openMenu = (last = false) => {
+      if (menu.matches(':popover-open')) return;
+      menu.showPopover();
+      moreButton.setAttribute('aria-expanded', 'true');
+      positionMenu();
+      const items = menu.querySelectorAll('[role="menuitem"]');
+      (last ? items[items.length - 1] : items[0])?.focus({ preventScroll: true });
+      menuTracking?.abort();
+      menuTracking = new AbortController();
+      const signal = menuTracking.signal;
+      window.addEventListener('resize', positionMenu, { signal, passive: true });
+      dialog.addEventListener('scroll', positionMenu, { signal, passive: true });
+      window.visualViewport?.addEventListener('resize', positionMenu, { signal, passive: true });
+      window.visualViewport?.addEventListener('scroll', positionMenu, { signal, passive: true });
+    };
+    moreButton.addEventListener('click', event => {
+      event.preventDefault();
+      menu.matches(':popover-open') ? closeMenu(true) : openMenu();
+    });
+    moreButton.addEventListener('keydown', event => {
+      if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
+      event.preventDefault(); openMenu(event.key === 'ArrowUp');
+    });
+    menu.addEventListener('toggle', event => {
+      if (event.newState !== 'closed') return;
+      moreButton.setAttribute('aria-expanded', 'false');
+      menuTracking?.abort();
+    });
+    menu.addEventListener('keydown', event => {
+      if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeMenu(true); return; }
+      if (event.key === 'Tab') { event.preventDefault(); event.stopPropagation(); closeMenu(true); return; }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault();
+      const items = [...menu.querySelectorAll('[role="menuitem"]')];
+      const index = items.indexOf(document.activeElement);
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+      items[next]?.focus();
+    });
+    menu.addEventListener('click', async event => {
+      const item = event.target instanceof Element ? event.target.closest('[role="menuitem"]') : null;
+      if (!item) return;
+      closeMenu(true);
+      if (item.dataset.share !== 'native') return;
+      try { await navigator.share(sharedPost); }
+      catch (error) {
+        if (error.name !== 'AbortError' && dialog.open) dialog.querySelector('.post-share-status').textContent = 'Device sharing is unavailable. Try another option or copy the link.';
+      }
+    });
+    const summaryButton = dialog.querySelector('[data-share="summarize"]');
+    summaryButton.setAttribute('aria-expanded', 'false');
+    summaryButton.setAttribute('aria-controls', 'post-share-summaries');
+    summaryButton.addEventListener('click', () => {
+      const section = dialog.querySelector('.post-share-summaries');
+      section.hidden = !section.hidden;
+      summaryButton.setAttribute('aria-expanded', String(!section.hidden));
+      if (!section.hidden) section.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    });
+    dialog.querySelector('.post-share-close').addEventListener('click', () => dialog.close());
+    dialog.addEventListener('keydown', event => {
+      if (event.key !== 'Tab') return;
+      const controls = [...dialog.querySelectorAll('button, a[href], input')].filter(node => !node.disabled && node.getClientRects().length);
+      const first = controls[0];
+      const last = controls[controls.length - 1];
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+    });
+    let backdropPress = false;
+    dialog.addEventListener('pointerdown', event => { backdropPress = event.target === dialog; });
+    dialog.addEventListener('click', event => {
+      if (event.target !== dialog || !backdropPress) return;
+      const bounds = dialog.getBoundingClientRect();
+      if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) dialog.close();
+    });
+    dialog.addEventListener('close', () => {
+      closeMenu();
+      copyGeneration++;
+      trigger?.setAttribute('aria-expanded', 'false');
+      if (trigger?.isConnected) trigger.focus({ preventScroll: true });
+    });
+    dialog.querySelector('.post-share-image').addEventListener('error', event => { event.target.hidden = true; });
+    dialog.querySelector('[data-share="copy"]').addEventListener('click', async () => {
+      const generation = ++copyGeneration;
+      const url = dialog.querySelector('#post-share-url').value;
+      try {
+        await navigator.clipboard.writeText(url);
+        if (!dialog.open || generation !== copyGeneration) return;
+        dialog.querySelector('[data-share="copy"] [data-label]').textContent = 'Copied!';
+        dialog.querySelector('.post-share-status').textContent = 'Link copied to clipboard.';
+        dialog.querySelector('.post-share-copy-fallback').hidden = true;
+      } catch {
+        if (!dialog.open || generation !== copyGeneration) return;
+        dialog.querySelector('.post-share-status').textContent = 'Select and copy the link below.';
+        dialog.querySelector('.post-share-copy-fallback').hidden = false;
+        const field = dialog.querySelector('#post-share-url');
+        field.focus(); field.select();
+      }
+    });
+    document.body.append(dialog);
+  };
+  document.addEventListener('click', event => {
+    const button = event.target instanceof Element ? event.target.closest('.post-share-button') : null;
+    if (!button) return;
+    if (!dialog) createDialog();
+    if (dialog.open) return;
+    trigger = button;
+    copyGeneration++;
+    const url = new URL(httpUrl(document.querySelector('link[rel="canonical"]')?.href || location.href));
+    url.search = ''; url.hash = '';
+    const title = meta('og:title') || document.title;
+    const description = meta('og:description');
+    const previewUrl = new URL(httpUrl(meta('og:url')) || url.href);
+    dialog.querySelector('.post-share-domain').textContent = previewUrl.hostname;
+    dialog.querySelector('.post-share-preview h3').textContent = title;
+    dialog.querySelector('.post-share-description').textContent = description;
+    const image = dialog.querySelector('.post-share-image');
+    const imageUrl = httpUrl(meta('og:image'));
+    image.alt = meta('og:image:alt');
+    image.hidden = !imageUrl;
+    if (imageUrl) image.src = imageUrl; else image.removeAttribute('src');
+    const x = new URL('https://x.com/intent/post');
+    x.searchParams.set('text', title); x.searchParams.set('url', url.href);
+    external(dialog.querySelector('[data-share="x"]'), x.href);
+    dialog.querySelector('[data-share="email"]').href = 'mailto:?subject=' + encodeURIComponent(title) + '&body=' + encodeURIComponent(title + '\\n\\n' + url.href);
+    sharedPost = { title, url: url.href };
+    const menu = dialog.querySelector('.post-share-menu');
+    menu.replaceChildren();
+    for (const [name, base, parameters] of [
+      ['Facebook', 'https://www.facebook.com/sharer/sharer.php', { u: url.href }],
+      ['LinkedIn', 'https://www.linkedin.com/sharing/share-offsite/', { url: url.href }],
+      ['WhatsApp', 'https://wa.me/', { text: title + '\\n' + url.href }],
+      ['Telegram', 'https://t.me/share/url', { url: url.href, text: title }],
+      ['Reddit', 'https://www.reddit.com/submit', { url: url.href, title }],
+      ['Bluesky', 'https://bsky.app/intent/compose', { text: title + '\\n' + url.href }],
+      ['Threads', 'https://www.threads.net/intent/post', { text: title + '\\n' + url.href }],
+    ]) {
+      const href = new URL(base);
+      for (const [key, value] of Object.entries(parameters)) href.searchParams.set(key, value);
+      const link = document.createElement('a');
+      link.className = 'post-share-menu-item';
+      link.setAttribute('role', 'menuitem');
+      link.tabIndex = -1;
+      link.textContent = name;
+      link.insertAdjacentHTML('beforeend', icons.arrow);
+      external(link, href.href);
+      menu.append(link);
+    }
+    if (typeof navigator.share === 'function') {
+      const native = document.createElement('button');
+      native.type = 'button';
+      native.className = 'post-share-menu-item';
+      native.dataset.share = 'native';
+      native.setAttribute('role', 'menuitem');
+      native.tabIndex = -1;
+      native.textContent = 'Share via…';
+      native.insertAdjacentHTML('beforeend', icons.more);
+      menu.append(native);
+    }
+    const prompt = 'Read and summarize this article: ' + url.href + '\\n\\nTitle: ' + title + '\\n\\nGive a concise overview, the key takeaways, and any important caveats. Link to the original article. If you cannot access the article, say so and ask me to paste the text; do not guess its contents.';
+    const providers = dialog.querySelector('.post-share-providers');
+    providers.replaceChildren();
+    for (const [name, base, parameter] of [['ChatGPT', 'https://chatgpt.com/', 'q'], ['Claude', 'https://claude.ai/new', 'q'], ['Perplexity', 'https://www.perplexity.ai/search', 'q']]) {
+      const href = new URL(base); href.searchParams.set(parameter, prompt);
+      const link = document.createElement('a');
+      link.className = 'post-share-provider';
+      link.textContent = name;
+      link.insertAdjacentHTML('beforeend', icons.arrow);
+      link.setAttribute('aria-label', 'Summarize with ' + name + ' (opens in a new tab)');
+      external(link, href.href); providers.append(link);
+    }
+    dialog.querySelector('#post-share-url').value = url.href;
+    dialog.querySelector('.post-share-status').textContent = '';
+    dialog.querySelector('.post-share-copy-fallback').hidden = true;
+    dialog.querySelector('[data-share="copy"] [data-label]').textContent = 'Copy link';
+    dialog.querySelector('.post-share-summaries').hidden = true;
+    dialog.querySelector('[data-share="summarize"]').setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-controls', dialog.id);
+    trigger.setAttribute('aria-expanded', 'true');
+    dialog.showModal();
+  });
+  ensureTrigger();
+  document.addEventListener('lettercamp:post-updated', () => {
+    if (dialog?.open) dialog.close();
+    ensureTrigger();
+  });
+})();
+`;

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

@@ -0,0 +1,69 @@
+// A string lets both the static renderer and preview inject the same standalone script.
+export const postTocScript = `
+(() => {
+  let cleanup = () => {};
+  const mount = () => {
+    cleanup();
+    const sidebar = document.querySelector('.article-sidebar');
+    const nav = sidebar?.querySelector('.article-toc');
+    if (!sidebar || !nav) return;
+    sidebar.querySelector('.toc-trigger')?.remove();
+    const links = [...nav.querySelectorAll('a[href^="#"]')];
+    if (!links.length) return;
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'toc-trigger';
+    trigger.setAttribute('aria-label', 'Table of contents');
+    trigger.setAttribute('aria-controls', 'post-contents');
+    trigger.setAttribute('aria-expanded', 'false');
+    nav.id = 'post-contents';
+    nav.querySelector('h2').textContent = 'Contents';
+    const markers = links.map(() => {
+      const marker = document.createElement('span');
+      marker.setAttribute('aria-hidden', 'true');
+      trigger.append(marker);
+      return marker;
+    });
+    sidebar.prepend(trigger);
+    sidebar.setAttribute('data-floating-toc', '');
+    const setOpen = open => {
+      sidebar.toggleAttribute('data-toc-open', open);
+      trigger.setAttribute('aria-expanded', String(open));
+    };
+    sidebar.addEventListener('pointerenter', event => { if (event.pointerType === 'mouse') setOpen(true); }, { signal });
+    sidebar.addEventListener('pointerleave', () => { if (!sidebar.contains(document.activeElement)) setOpen(false); }, { signal });
+    sidebar.addEventListener('focusin', () => setOpen(true), { signal });
+    sidebar.addEventListener('focusout', event => { if (!sidebar.contains(event.relatedTarget)) setOpen(false); }, { signal });
+    trigger.addEventListener('click', () => setOpen(true), { signal });
+    document.addEventListener('pointerdown', event => { if (!sidebar.contains(event.target)) setOpen(false); }, { signal });
+    sidebar.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault(); trigger.focus(); setOpen(false);
+    }, { signal });
+    nav.addEventListener('click', event => {
+      if (event.target.closest('a')) { trigger.focus(); setOpen(false); }
+    }, { signal });
+    const headings = links.map(link => document.getElementById(decodeURIComponent(link.hash.slice(1))));
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      let active = -1;
+      headings.forEach((heading, index) => { if (heading && heading.getBoundingClientRect().top <= 120) active = index; });
+      links.forEach((link, index) => {
+        if (index === active) link.setAttribute('aria-current', 'location');
+        else link.removeAttribute('aria-current');
+        markers[index].toggleAttribute('data-active', index === active);
+      });
+    };
+    const schedule = () => { if (!frame) frame = requestAnimationFrame(update); };
+    window.addEventListener('scroll', schedule, { passive: true, signal });
+    window.addEventListener('resize', schedule, { passive: true, signal });
+    update();
+    cleanup = () => { controller.abort(); cancelAnimationFrame(frame); setOpen(false); };
+  };
+  document.addEventListener('lettercamp:post-updated', mount);
+  mount();
+})();
+`;

package/renderer/src/lib/posts.js

@@ -1,21 +1,29 @@
+import { sitePath } from './urls.js';
 import { pages, contentPrefix } from '../content.js';
+import { categoryRoutes } from './category-routes.js';
+
+export function getCategories() {
+  return categoryRoutes(getPosts().map(post => post.category)).map(category => ({ ...category, href: sitePath(category.href) }));
+}
 
 export function pageSlug(filename) {
   return filename.slice(contentPrefix.length).replace(/\.(md|mdx)$/, '');
 }
 
-export function postDate(value, language = 'en') {
+export function postDate(value, language = 'en', timeZone = 'UTC') {
   if (!value) return { iso: '', label: '', timestamp: -Infinity };
   const date = value instanceof Date ? value : new Date(String(value));
   if (Number.isNaN(date.valueOf())) return { iso: '', label: '', timestamp: -Infinity };
+  // A calendar date has no time zone; shifting midnight changes its intended day.
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(String(value));
   return {
-    iso: date.toISOString().slice(0, 10),
-    label: new Intl.DateTimeFormat(language, { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(date),
+    iso: dateOnly ? String(value) : date.toISOString(),
+    label: new Intl.DateTimeFormat(language, { month: 'short', day: 'numeric', year: 'numeric', timeZone: dateOnly ? 'UTC' : timeZone }).format(date),
     timestamp: date.valueOf(),
   };
 }
 
-export function getPosts(language = 'en') {
+export function getPosts(language = 'en', timeZone = 'UTC') {
   return Object.entries(pages)
     .map(([filename, page]) => {
       const frontmatter = page.frontmatter ?? {};
@@ -24,8 +32,8 @@ export function getPosts(language = 'en') {
         ...frontmatter,
         title: frontmatter.title ?? slug,
         category: typeof frontmatter.category === 'string' ? frontmatter.category.trim() : '',
-        href: `/${slug.split('/').map(encodeURIComponent).join('/')}/`,
-        date: postDate(frontmatter.date, language),
+        href: sitePath(`/${slug.split('/').map(encodeURIComponent).join('/')}/`),
+        date: postDate(frontmatter.date, language, timeZone),
       };
     })
     .sort((a, b) => b.date.timestamp - a.date.timestamp || a.href.localeCompare(b.href));

package/renderer/src/lib/publication-url.js

@@ -0,0 +1,14 @@
+// Generated from lettercamp/lib/publication-url.ts.
+// Publication paths are relative to the blog; absolute URLs can link to the parent website.
+export function publicationBasePath(url) {
+    return new URL(url).pathname.replace(/\/+$/, "");
+}
+export function publicationPath(path, basePath = "") {
+    if (typeof path !== "string" || !path.startsWith("/") || path.startsWith("//"))
+        return path;
+    const base = basePath.replace(/\/+$/, "");
+    return base + path;
+}
+export function publicationUrl(path, siteUrl) {
+    return new URL(publicationPath(path, publicationBasePath(siteUrl)), siteUrl);
+}

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

@@ -0,0 +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] > 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] [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] a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
+`;

package/renderer/src/lib/urls.js

@@ -0,0 +1,3 @@
+import { publicationPath } from './publication-url.js';
+export const basePath = import.meta.env.BASE_URL.replace(/\/+$/, '');
+export const sitePath = path => publicationPath(path, basePath);

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

@@ -1,9 +1,11 @@
 ---
 import SiteLayout from '../layouts/SiteLayout.astro';
 import AuthorByline from '../components/AuthorByline.astro';
-import { pageSlug, postDate } from '../lib/posts.js';
+import { pageSlug, postDate, getCategories } from '../lib/posts.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() {
   return Object.entries(pages).map(([filename, page]) => {
@@ -15,28 +17,36 @@ export function getStaticPaths() {
 const { page } = Astro.props;
 const { Content, frontmatter = {} } = page;
 const coverImage = frontmatter.image ?? frontmatter.ogImage;
+const coverImageWidth = Number(frontmatter.coverImageWidth ?? (frontmatter.image ? frontmatter.imageWidth : undefined));
+const coverImageHeight = Number(frontmatter.coverImageHeight ?? (frontmatter.image ? frontmatter.imageHeight : undefined));
+const coverSizeKnown = Number.isFinite(coverImageWidth) && coverImageWidth > 0 && Number.isFinite(coverImageHeight) && coverImageHeight > 0;
 const headings = (page.getHeadings?.() ?? []).filter(({ depth }) => depth === 2 || depth === 3);
 const category = typeof frontmatter.category === 'string' ? frontmatter.category.trim() : '';
-const date = postDate(frontmatter.date, site.language);
-const postLayout = site.postLayout ?? {};
+const categoryHref = getCategories().find(item => item.name === category)?.href;
+const date = postDate(frontmatter.date, site.language, site.timeZone);
+const postLayout = site.post ?? {};
+const coverWidthMode = ['regular', 'wide', 'full'].includes(frontmatter.coverWidthMode) ? frontmatter.coverWidthMode : 'wide';
+const coverWidth = /^[0-9]+$/.test(String(frontmatter.coverWidth)) && Number(frontmatter.coverWidth) > 0 ? `${frontmatter.coverWidth}px` : undefined;
 ---
 
 <SiteLayout site={site} page={frontmatter} article>
-  <article class="publication publication-post" data-post-width={postLayout.contentWidth ?? 'standard'} data-post-hero={postLayout.heroLayout ?? 'split'}
+  <article class="publication publication-post" style={{ '--post-content-width': `calc(var(--text-base) * ${readContentWidthEm(postLayout)})` }} data-post-hero={postLayout.heroLayout ?? 'stacked'}
+    data-reading-minutes={frontmatter.readingMinutes}
     data-post-cover={postLayout.showCover === false ? 'hidden' : 'visible'} data-post-toc={postLayout.showTableOfContents === false ? 'hidden' : 'visible'}>
-    <a class="back-link" href="/">← All posts</a>
     <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>
       <div class="article-intro">
-        <p class="eyebrow">{category ? <a href={`/?category=${encodeURIComponent(category)}`}>{category}</a> : site.name}</p>
+        {category && <p class="article-category">
+          <a href={categoryHref}>{category}</a>
+        </p>}
         <h1>{frontmatter.title ?? site.name}</h1>
         {frontmatter.description && <p class="description">{frontmatter.description}</p>}
         <div class="byline">
-          {date.label && <time datetime={date.iso}>{date.label}</time>}
-          <AuthorByline post={frontmatter} site={site} />
+          <AuthorByline post={frontmatter} site={site} date={date} />
+          <Fragment set:html={postShareButton} />
         </div>
       </div>
-      {coverImage && <figure class="article-hero-image">
-        <img src={coverImage} alt={frontmatter.imageAlt ?? ''} width="1200" height="630" fetchpriority="high" />
+      {coverImage && <figure class="article-hero-image" data-image-width={coverWidthMode} style={{ '--cover-image-width': coverWidth }}>
+        <img src={coverImage} alt={frontmatter.imageAlt ?? ''} width={coverSizeKnown ? coverImageWidth : 1600} height={coverSizeKnown ? coverImageHeight : 900} fetchpriority="high" />
       </figure>}
     </header>
     <div class:list={['article-body', { 'article-body-with-toc': headings.length > 0 }]}>
@@ -45,7 +55,7 @@ const postLayout = site.postLayout ?? {};
           <h2>On this page</h2>
           <ol>
             {headings.map(({ depth, slug, text }) => <li class:list={{ 'toc-subheading': depth === 3 }}>
-              <a href={`#${slug}`}>{text}</a>
+              <a href={`#${slug}`} title={text}><span class="toc-label">{text}</span></a>
             </li>)}
           </ol>
         </nav>

package/renderer/src/pages/category/[tag].astro

@@ -0,0 +1,16 @@
+---
+import SiteLayout from '../../layouts/SiteLayout.astro';
+import BlogHome from '../../components/BlogHome.astro';
+import { getCategories } from '../../lib/posts.js';
+import site from '../../site.js';
+
+export function getStaticPaths() {
+  return getCategories().map(category => ({ params: { tag: category.tag }, props: { category: category.name } }));
+}
+
+const { category } = Astro.props;
+---
+
+<SiteLayout site={site} page={{ title: category }}>
+  <BlogHome site={site} category={category} />
+</SiteLayout>

package/renderer/src/pages/category/index.astro

@@ -0,0 +1,4 @@
+---
+import { sitePath } from '../../lib/urls.js';
+return Astro.redirect(sitePath('/'), 308);
+---

package/renderer/src/pages/index.astro

@@ -2,7 +2,7 @@
 import SiteLayout from '../layouts/SiteLayout.astro';
 import BlogHome from '../components/BlogHome.astro';
 import site from '../site.js';
-const title = site.homeTitle ?? `${site.name} Blog`;
+const title = site.home.title ?? `${site.name} Blog`;
 ---
 
 <SiteLayout site={site} page={{ title }}>