@lettercamp/cli 0.1.6 → 0.1.8

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

@@ -0,0 +1,40 @@
+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', 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: 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', timeZone = 'UTC') {
+  return Object.entries(pages)
+    .map(([filename, page]) => {
+      const frontmatter = page.frontmatter ?? {};
+      const slug = pageSlug(filename);
+      return {
+        ...frontmatter,
+        title: frontmatter.title ?? slug,
+        category: typeof frontmatter.category === 'string' ? frontmatter.category.trim() : '',
+        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. Run pnpm sync:renderer in the app repository.
+// 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. Run pnpm sync:renderer in the app repository.
+// 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,41 +1,66 @@
 ---
 import SiteLayout from '../layouts/SiteLayout.astro';
+import AuthorByline from '../components/AuthorByline.astro';
+import { pageSlug, postDate, getCategories } from '../lib/posts.js';
 import site from '../site.js';
-import { pages, contentPrefix } from '../content.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]) => {
-    const slug = filename.slice(contentPrefix.length).replace(/\.(md|mdx)$/, '')
-      .replace(/(^|\/)index$/, '');
-    return { params: { slug: slug || undefined }, props: { page } };
+    const slug = pageSlug(filename);
+    return { params: { slug }, props: { page } };
   });
 }
 
 const { page } = Astro.props;
 const { Content, frontmatter = {} } = page;
-const home = frontmatter.layout === 'home' || Astro.url.pathname === '/';
-const author = frontmatter.author ?? site.author;
-const date = frontmatter.date ? new Date(`${String(frontmatter.date).slice(0, 10)}T12:00:00Z`) : null;
-const dateLabel = date && !Number.isNaN(date.valueOf())
-  ? new Intl.DateTimeFormat(site.language ?? 'en', { month: 'long', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(date)
-  : null;
+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 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 class:list={['publication', { 'publication-home': home }]}>
-    <header class="article-header">
-      {!home && <a class="back-link" href="/">← All posts</a>}
-      <p class="eyebrow">{home ? 'News, ideas & notes' : site.name}</p>
-      <h1>{frontmatter.title ?? site.name}</h1>
-      {frontmatter.description && <p class="description">{frontmatter.description}</p>}
-      {!home && (author || dateLabel) && <p class="byline">
-        {author && <span>{author}</span>}
-        {dateLabel && <time datetime={String(frontmatter.date).slice(0, 10)}>{dateLabel}</time>}
-      </p>}
+<SiteLayout site={site} page={frontmatter} article>
+  <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'}>
+    <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>
+      <div class="article-intro">
+        {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">
+          <AuthorByline post={frontmatter} site={site} date={date} />
+          <Fragment set:html={postShareButton} />
+        </div>
+      </div>
+      {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>
-    {!home && frontmatter.image && <figure class="cover">
-      <img src={frontmatter.image} alt={frontmatter.imageAlt ?? ''} width="1200" height="630" />
-    </figure>}
-    <div class="prose"><Content /></div>
+    <div class:list={['article-body', { 'article-body-with-toc': headings.length > 0 }]}>
+      {headings.length > 0 && <aside class="article-sidebar">
+        <nav class="article-toc" aria-label="Table of contents">
+          <h2>On this page</h2>
+          <ol>
+            {headings.map(({ depth, slug, text }) => <li class:list={{ 'toc-subheading': depth === 3 }}>
+              <a href={`#${slug}`} title={text}><span class="toc-label">{text}</span></a>
+            </li>)}
+          </ol>
+        </nav>
+      </aside>}
+      <div class="prose"><Content /></div>
+    </div>
   </article>
 </SiteLayout>

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

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

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

@@ -0,0 +1,57 @@
+.byline:has(.post-share-button) { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
+.byline:has(.post-share-button) .post-byline { grid-column: 1; grid-row: 1; min-width: 0; }
+.byline > .post-share-button { grid-column: 2; grid-row: 1; justify-self: end; }
+.post-share-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; margin-left: auto; padding: 5px 11px; border: 0; border-radius: 999px; background: #f5f5f5; color: #555; font-size: 13px; line-height: 1.4; }
+.post-share-button:hover { background: #ededed; color: #111; }
+.post-share-button svg { width: 15px; height: 15px; }
+html:has(.post-share-dialog[open]) { overflow: hidden; }
+.post-share-dialog { position: fixed; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 16px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 14px; background: var(--site-background, #fff); color: #222; box-shadow: 0 20px 80px #0003; font: 13px/1.5 var(--font-family); }
+.post-share-dialog::backdrop { background: #0006; }
+.post-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
+.post-share-heading h2 { margin: 0; font: 600 15px/1.4 var(--font-family); letter-spacing: -.3px; }
+.post-share-close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0; border: 0; background: transparent; color: #777; }
+.post-share-close:hover { color: #111; }
+.post-share-close svg { width: 19px; height: 19px; }
+.post-share-preview { overflow: hidden; border: 1px solid #e5e5e5; border-radius: 8px; background: #f7f7f7; color: #222; font-family: Arial, Helvetica, sans-serif; }
+.post-share-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
+.post-share-preview-copy { padding: 9px 10px; }
+.post-share-domain { margin: 0 0 4px; color: #777; font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.post-share-preview h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font: 600 14px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0; text-wrap: auto; }
+.post-share-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; color: #666; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
+.post-share-description:empty { display: none; }
+.post-share-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
+.post-share-action { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: #555; font-size: 11px; line-height: 1.4; text-decoration: none; }
+.post-share-action-icon { display: grid; place-items: center; width: 100%; height: 40px; border-radius: 10px; background: #00000005; }
+.post-share-action:hover, .post-share-action[aria-expanded='true'] { color: #111; }
+.post-share-action:hover .post-share-action-icon, .post-share-action[aria-expanded='true'] .post-share-action-icon { background: #0000000a; }
+.post-share-action svg { width: 18px; height: 18px; }
+.post-share-menu { position: fixed; inset: auto; width: 184px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 1px solid #eaeaea; border-radius: 10px; background: #fafafa; color: #444; box-shadow: 0 6px 24px #0002; font: 12px/1.4 var(--font-family); }
+.post-share-menu::backdrop { background: transparent; }
+.post-share-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; font: inherit; text-decoration: none; }
+.post-share-menu-item:is(:hover, :focus-visible) { background: #efefef; color: #111; outline: none; }
+.post-share-menu-item svg { width: 15px; height: 15px; color: #888; }
+.post-share-menu-item[data-share='native'] { margin-top: 4px; border-top: 1px solid #e8e8e8; border-radius: 0; }
+.post-share-summaries { margin-top: 14px; padding-top: 12px; border-top: 1px solid #0000000d; }
+.post-share-summaries h3 { margin: 0; font: 600 13px/1.5 var(--font-family); }
+.post-share-summaries > p { margin: 3px 0 9px; color: #777; font-size: 12px; }
+.post-share-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+.post-share-provider { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 9px; border-radius: 7px; background: #00000005; font-size: 12px; text-decoration: none; }
+.post-share-provider:hover { background: #0000000a; }
+.post-share-provider svg { width: 13px; height: 13px; flex-shrink: 0; color: #888; }
+.post-share-status { margin: 12px 0 0; color: #666; font-size: 12px; text-align: center; }
+.post-share-status:empty { display: none; }
+.post-share-copy-fallback { margin-top: 12px; }
+.post-share-copy-fallback label { display: block; margin-bottom: 4px; color: #666; font-size: 12px; }
+.post-share-copy-fallback input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #333; font: inherit; }
+@media (max-width: 640px) {
+  .byline:has(.post-share-button) .post-byline { flex-wrap: wrap; gap: 6px 12px; overflow: visible; white-space: normal; }
+  .byline:has(.post-share-button) .post-authors { max-width: 100%; white-space: normal; }
+}
+@media (max-width: 400px) {
+  .post-share-provider { padding: 7px; font-size: 11px; }
+  .byline:has(.post-share-button) { column-gap: 10px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .post-share-dialog[open] { animation: post-share-enter 140ms ease-out; }
+  @keyframes post-share-enter { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
+}