@lettercamp/cli 0.1.7 → 0.1.8

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. 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,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 }}>

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; } }
+}