@lettercamp/cli 0.1.7 → 0.1.9

package/dist/workspace.js

@@ -4,7 +4,7 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { escapePath } from 'tinyglobby';
-import { copyPublicAssets } from './public-assets.js';
+import { writeCustomLayout } from './custom-layout.js';
 const require = createRequire(import.meta.url);
 const renderer = fileURLToPath(new URL('../renderer/', import.meta.url));
 export async function prepareWorkspace(directory) {
@@ -15,7 +15,7 @@ export async function prepareWorkspace(directory) {
     const workspace = await realpath(await mkdtemp(path.join(tmpdir(), 'lettercamp-')));
     try {
         await cp(renderer, workspace, { recursive: true });
-        await copyPublicAssets(contentRoot, workspace);
+        await writeCustomLayout(workspace, contentRoot);
         await writeFile(path.join(workspace, 'package.json'), JSON.stringify({ private: true, type: 'module' }));
         // Dependencies stay in the CLI installation; the glob uses real source paths
         // so Vite sees additions and deletions without a symlink/realpath mismatch.
@@ -25,7 +25,9 @@ export async function prepareWorkspace(directory) {
         await writeFile(path.join(workspace, 'src', 'content.js'), `export const contentPrefix = ${JSON.stringify(contentPrefix)};\n` +
             `const allPages = import.meta.glob(${JSON.stringify(escapePath(contentPrefix) + '*.{md,mdx}')}, { eager: true });\n` +
             `export const pages = Object.fromEntries(Object.entries(allPages).filter(([filename, page]) => !/\\/index\\.mdx?$/.test(filename) && page.frontmatter?.draft !== true));\n`);
-        await writeFile(path.join(workspace, 'src', 'site.js'), `export { default } from ${JSON.stringify(path.join(contentRoot, 'settings.json').replaceAll('\\', '/'))};\n`);
+        await writeFile(path.join(workspace, 'src', 'site.js'), `import source from ${JSON.stringify(path.join(contentRoot, 'settings.json').replaceAll('\\', '/'))};\n` +
+            `import { withDefaultBranding } from './lib/branding.js';\n` +
+            `export default withDefaultBranding(source);\n`);
         return { workspace, contentRoot, modules, cleanup: () => rm(workspace, { recursive: true, force: true, maxRetries: 3 }) };
     }
     catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lettercamp/cli",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "The repository for the Lettercamp CLI",
   "keywords": [
     "lettercamp",
@@ -26,7 +26,7 @@
     "renderer"
   ],
   "engines": {
-    "node": ">=22.17.0"
+    "node": ">=22.22.0"
   },
   "scripts": {
     "build": "tsc",
@@ -40,9 +40,18 @@
   "dependencies": {
     "@astrojs/markdown-remark": "^7.3.3",
     "@astrojs/mdx": "8.0.3",
+    "@astrojs/react": "7.0.0",
+    "@codemirror/language-data": "^6.5.2",
+    "@lezer/highlight": "^1.2.5",
     "astro": "7.3.8",
     "commander": "^15.0.0",
     "giget": "^3.3.1",
+    "hast-util-from-html": "^2.0.3",
+    "hast-util-to-html": "^9.0.5",
+    "highlight.js": "^11.12.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-icons": "^5.7.0",
     "semver": "^7.7.3",
     "tinyglobby": "^0.2.17"
   },

package/renderer/src/components/AuthorByline.astro

@@ -1,17 +1,26 @@
 ---
-const { post, site, variant = 'article' } = Astro.props;
-const author = post.author ?? site.author;
-const authorImage = post.authorImage ?? (author === site.author ? site.authorImage : undefined);
-const showReadingTime = variant === 'article' && site.showReadingTime !== false && typeof post.readingMinutes === 'number';
-const showDate = variant === 'listing' && post.date?.label;
+import { resolveAuthors } from '../lib/authors.js';
+const { post, site, variant = 'article', date = post.date } = Astro.props;
+const authors = resolveAuthors(post).filter(author => author.name.trim());
+const showReadingTime = variant === 'article' && site.post?.showReadingTime !== false && typeof post.readingMinutes === 'number';
+const showDate = date?.label;
 ---
 
-{(author || showReadingTime || showDate) && <div class="post-byline">
-  {author && <span class="post-author">
-    {authorImage && <img class="author-avatar" src={authorImage} width="24" height="24" alt="" loading="lazy" />}
-    <span>{author}</span>
+{(authors.length > 0 || showReadingTime || showDate) && <div class="post-byline">
+  {showDate && <time datetime={date.iso}>{date.label}</time>}
+  {authors.length > 0 && <span class="post-authors">
+    <span class="author-portraits" aria-hidden="true">
+      {authors.map(author => <span class="author-portrait" title={author.name}>
+        {author.image ? <img class="author-avatar" src={author.image} width="24" height="24" alt="" loading="lazy" /> :
+          <span class="author-initials">{author.name.trim().split(/\s+/).map(part => part[0]).slice(0, 2).join('')}</span>}
+      </span>)}
+    </span>
+    <span class="author-names">
+      {authors.length <= 2 ? authors.map(author => author.name).join(', ') : <>
+        {authors.slice(0, 2).map(author => author.name).join(', ')}, and{' '}
+        <button type="button" class="author-more" aria-haspopup="dialog" data-authors={JSON.stringify(authors)}>{authors.length - 2} more</button>
+      </>}
+    </span>
   </span>}
-  {author && showDate && <span class="byline-separator" aria-hidden="true">·</span>}
-  {showDate && <time datetime={post.date.iso}>{post.date.label}</time>}
   {showReadingTime && <span class="reading-time">{post.readingMinutes} min read</span>}
 </div>}

package/renderer/src/components/BlogHome.astro

@@ -1,26 +1,29 @@
 ---
+import { sitePath } from '../lib/urls.js';
 import PostCard from './PostCard.astro';
-import { getPosts } from '../lib/posts.js';
-const { site } = Astro.props;
-const posts = getPosts(site.language);
-const categories = [...new Set(posts.map(post => post.category).filter(Boolean))];
-const showCategories = posts.length > 1 && categories.length > 0;
+import { getPosts, getCategories } from '../lib/posts.js';
+import { readHomeWidthPx } from '../lib/home-layout';
+const { site, category = '' } = Astro.props;
+const allPosts = getPosts(site.language, site.timeZone);
+const posts = allPosts.filter(post => !category || post.category === category);
+const categories = getCategories();
+const hasCategories = categories.length > 0;
 const featuredLimit = 9;
 ---
 
-<div class="blog-home" data-blog-home>
+<div class="blog-home" data-blog-home data-home-layout={site.home?.feedLayout === 'rows' ? 'rows' : 'grid'} style={{ '--home-content-width': `${readHomeWidthPx(site.home)}px` }}>
   <header class="blog-heading">
-    <h1>{site.homeTitle ?? `${site.name} Blog`}</h1>
+    <h1>{category || (site.home.title ?? `${site.name} Blog`)}</h1>
     {site.description && <p class="description" style="margin-top: 12px">{site.description}</p>}
   </header>
-  {showCategories && <nav class="category-selector" aria-label="Filter posts by category">
-    <a href="/" data-category="" aria-current="page">All posts</a>
-    {categories.map(category => <a href={`?category=${encodeURIComponent(category)}`} data-category={category}>{category}</a>)}
+  {hasCategories && <nav class="category-selector" aria-label="Filter posts by category" hidden={site.home?.showCategories === false}>
+    <a href={sitePath("/")} data-category="" aria-current={!category ? "page" : undefined}>All</a>
+    {categories.map(item => <a href={item.href} data-category={item.name} aria-current={category === item.name ? "page" : undefined}>{item.name}</a>)}
   </nav>}
   <p class="sr-only" data-results-count role="status" aria-live="polite">{posts.length} articles</p>
   <section aria-label="Recent articles">
     <h2 class="sr-only">Recent articles</h2>
-    <div class:list={['post-list', { 'post-list-rows': posts.length < 3 }]} data-featured-posts>
+    <div class="post-list" data-featured-posts>
       {posts.slice(0, featuredLimit).map(post => <PostCard post={post} site={site} />)}
     </div>
     <p class="empty-state" data-empty-state hidden={posts.length > 0}>No articles here yet.</p>
@@ -32,49 +35,3 @@ const featuredLimit = 9;
     </div>
   </section>
 </div>
-
-<script>
-  const blog = document.querySelector<HTMLElement>('[data-blog-home]');
-  if (blog) {
-    const links = [...blog.querySelectorAll<HTMLAnchorElement>('[data-category]')];
-    // Preserve the original date order as cards move between the two lists.
-    const posts = [...blog.querySelectorAll<HTMLElement>('[data-post-category]')];
-    const featured = blog.querySelector<HTMLElement>('[data-featured-posts]')!;
-    const archive = blog.querySelector<HTMLElement>('[data-archive]')!;
-    const archivePosts = blog.querySelector<HTMLElement>('[data-archive-posts]')!;
-    const empty = blog.querySelector<HTMLElement>('[data-empty-state]')!;
-    const count = blog.querySelector<HTMLElement>('[data-results-count]')!;
-    const featuredLimit = 9;
-    function filter(category: string) {
-      // An old shared filter must not hide the only post when controls are absent.
-      category = links.length ? category : '';
-      const matching = posts.filter(post => !category || post.dataset.postCategory === category);
-      for (const post of posts) post.hidden = Boolean(category) && post.dataset.postCategory !== category;
-      matching.forEach((post, index) => (index < featuredLimit ? featured : archivePosts).append(post));
-      featured.classList.toggle('post-list-rows', matching.length < 3);
-      archive.hidden = matching.length <= featuredLimit;
-      for (const link of links) {
-        if (link.dataset.category === category) link.setAttribute('aria-current', 'page');
-        else link.removeAttribute('aria-current');
-      }
-      empty.hidden = matching.length > 0;
-      empty.textContent = category ? `No articles in ${category} yet. Choose All posts to explore the blog.` : 'No articles here yet.';
-      const archived = Math.max(0, matching.length - featuredLimit);
-      count.textContent = `${matching.length} ${matching.length === 1 ? 'article' : 'articles'}${category ? ` in ${category}` : ''}${archived ? `: ${featuredLimit} recent, ${archived} in Archive` : ''}`;
-    }
-    function select(category: string) {
-      const url = new URL(window.location.href);
-      if (category) url.searchParams.set('category', category);
-      else url.searchParams.delete('category');
-      if (url.href !== window.location.href) window.history.pushState(null, '', url);
-      filter(category);
-    }
-    for (const link of links) link.addEventListener('click', (event) => {
-      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-      event.preventDefault();
-      select(link.dataset.category ?? '');
-    });
-    window.addEventListener('popstate', () => filter(new URL(window.location.href).searchParams.get('category') ?? ''));
-    filter(new URL(window.location.href).searchParams.get('category') ?? '');
-  }
-</script>

package/renderer/src/components/Footer.astro

@@ -1,32 +1,35 @@
 ---
+import { sitePath } from '../lib/urls.js';
 import SocialLink from './SocialLink.astro';
 const { site } = Astro.props;
-const columns = (site.footer?.links ?? []).slice(0, 5);
-const socials = Object.entries(site.footer?.socials ?? {});
+const logo = site.logo;
+const columns = (site.footer?.columns ?? []).slice(0, 4);
+const socials = (site.footer?.socials ?? []).filter(({ href }) => {
+  try { return typeof href === 'string' && ['https:', 'http:'].includes(new URL(href).protocol); }
+  catch { return false; }
+});
 ---
 
 <footer class="site-footer">
   <div class:list={['footer-inner', { 'footer-has-columns': columns.length > 0 }]} style={`--footer-columns: ${Math.max(columns.length, 1)}; --footer-tablet-columns: ${Math.min(Math.max(columns.length, 1), 3)}; --footer-mobile-columns: ${Math.min(Math.max(columns.length, 1), 2)}`}>
   <div class="footer-main">
     <div class="footer-brand">
-      <a class="brand" href="/" aria-label={`${site.name} home`}>
-        {site.favicon && <img src={site.favicon} width="24" height="24" alt="" />}
-        {!site.favicon && <span>{site.name}</span>}
+      <a class="brand" href={sitePath("/")} aria-label={`${site.name} home`}>
+        <img src={logo} width="24" height="24" alt="" />
       </a>
     </div>
     {columns.length > 0 && <div class="footer-columns">
       {columns.map((column, index) => <nav class="footer-column" aria-label={column.header ?? `Footer links ${index + 1}`}>
         {column.header && <h2>{column.header}</h2>}
-        <ul>{(column.items ?? []).map(item => <li><a href={item.href}>{item.label}</a></li>)}</ul>
+        <ul>{(column.items ?? []).map(item => <li><a href={sitePath(item.href)}>{item.label}</a></li>)}</ul>
       </nav>)}
     </div>}
   </div>
   <div class="footer-bottom">
-    <span>© {new Date().getFullYear()} {site.name}</span>
     {socials.length > 0 && <nav class="footer-socials" aria-label="Social links">
-      {socials.map(([name, href]) => <SocialLink name={name} href={href} />)}
+      {socials.map(({ platform, href }) => <SocialLink name={platform} href={href} />)}
     </nav>}
-    <a class="footer-credit" href="https://lettercamp.com">Published with Lettercamp <span aria-hidden="true">↗</span></a>
+    <a class="footer-credit" href="https://lettercamp.com">Made with <strong>Lettercamp</strong></a>
   </div>
   </div>
 </footer>

package/renderer/src/components/Header.astro

@@ -0,0 +1,38 @@
+---
+import { sitePath } from '../lib/urls.js';
+import { buttonColors } from '../lib/button.js';
+import MobileMenuIcons from './MobileMenuIcons.astro';
+const { site, pathname } = Astro.props;
+const navLinks = site.header?.links ?? [{ label: 'Home', href: '/' }];
+const primary = site.header?.button;
+const primaryColors = buttonColors(primary?.color);
+const primaryStyle = { '--button-color': primaryColors.background, '--button-text': primaryColors.text };
+const logo = site.logo;
+---
+
+    <header class="site-header" data-header-position={site.header?.position === 'fixed' ? 'fixed' : 'scroll'}>
+      <template data-mobile-menu-icons><MobileMenuIcons /></template>
+      <div class="site-header-inner">
+      <a class="brand" href={sitePath("/")}>
+        <img src={logo} width="30" height="30" alt="" />
+        <span>{site.name}</span>
+      </a>
+      {(navLinks.length > 0 || primary) && <div class="header-actions">
+        {navLinks.length > 0 &&
+          <nav class="desktop-navigation" aria-label="Main navigation">
+            {navLinks.map((item) =>
+              <a href={sitePath(item.href)} aria-current={sitePath(item.href) === pathname ? 'page' : undefined}>{item.label}</a>
+            )}
+          </nav>}
+        {primary && <a class="header-primary" style={primaryStyle} href={sitePath(primary.href)}>{primary.label}</a>}
+        {navLinks.length > 0 && <details class="mobile-navigation">
+            <summary class="mobile-menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu-panel"><MobileMenuIcons /></summary>
+            <nav id="mobile-menu-panel" class="mobile-menu-panel" aria-label="Mobile navigation">
+              {navLinks.map((item) =>
+                <a href={sitePath(item.href)} aria-current={sitePath(item.href) === pathname ? 'page' : undefined}>{item.label}</a>
+              )}
+            </nav>
+          </details>}
+      </div>}
+      </div>
+    </header>

package/renderer/src/components/MobileMenuIcons.astro

@@ -0,0 +1,7 @@
+---
+import { LuMenu } from 'react-icons/lu';
+import { MdClose } from 'react-icons/md';
+---
+
+<LuMenu className="mobile-menu-icon" aria-hidden="true" />
+<MdClose className="mobile-close-icon" aria-hidden="true" />

package/renderer/src/components/PostCard.astro

@@ -1,18 +1,25 @@
 ---
 import AuthorByline from './AuthorByline.astro';
 const { post, site } = Astro.props;
-const image = post.ogImage ?? post.image ?? site.ogImage;
+const image = post.ogImage ?? post.image ?? site.seo?.ogImage;
 ---
 
 <article class="post-card" data-post-category={post.category}>
-  <a class="post-card-link" href={post.href}>
+  <div class="post-card-layout">
     <div class="post-card-cover">
       {image ? <img src={image} alt="" width="1200" height="630" loading="lazy" /> : <span class="image-placeholder" aria-hidden="true">{site.name}</span>}
     </div>
     <div class="post-card-content">
-      <h3>{post.title}</h3>
+      {(post.category || post.date?.label) && <div class="post-card-details">
+        {post.date?.label && <time class="post-card-date" datetime={post.date.iso}>{post.date.label}</time>}
+        {post.category && <span class="post-card-category">{post.category}</span>}
+      </div>}
+      <h3><a class="post-card-link" href={post.href}>{post.title}</a></h3>
       {post.description && <p class="post-card-description">{post.description}</p>}
-      <AuthorByline post={post} site={site} variant="listing" />
+      <div class="post-card-meta">
+        <AuthorByline post={post} site={site} variant="listing" date={null} />
+        {post.date?.label && <time class="archive-date" datetime={post.date.iso}>{post.date.label}</time>}
+      </div>
     </div>
-  </a>
+  </div>
 </article>

package/renderer/src/components/SocialLink.astro

@@ -1,10 +1,10 @@
 ---
 const { name, href } = Astro.props;
-const aliases = { twitter: 'x', 'x-twitter': 'x', 'earth-americas': 'website' };
-const platform = aliases[name] ?? name;
-const names = { x: 'X', github: 'GitHub', linkedin: 'LinkedIn', youtube: 'YouTube', instagram: 'Instagram', facebook: 'Facebook', website: 'Website', 'hacker-news': 'Hacker News', bluesky: 'Bluesky', discord: 'Discord', slack: 'Slack', medium: 'Medium', telegram: 'Telegram', threads: 'Threads', reddit: 'Reddit', podcast: 'Podcast' };
+const platform = name.trim().toLowerCase();
+const names = { x: 'Twitter / X', tiktok: 'TikTok', github: 'GitHub', linkedin: 'LinkedIn', youtube: 'YouTube', instagram: 'Instagram', facebook: 'Facebook', website: 'Website', 'hacker-news': 'Hacker News', bluesky: 'Bluesky', discord: 'Discord', slack: 'Slack', medium: 'Medium', telegram: 'Telegram', threads: 'Threads', reddit: 'Reddit', podcast: 'Podcast' };
 const label = names[platform] ?? name.replaceAll('-', ' ').replace(/^./, character => character.toUpperCase());
 const icons = {
+  tiktok: 'M16.6 1c.4 3 2.1 4.8 5.4 5v4a9.5 9.5 0 0 1-5.4-1.7v7.4A7.3 7.3 0 1 1 10.3 8v4.1a3.3 3.3 0 1 0 2.3 3.2V1h4Z',
   x: 'M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-5-7.6L5.2 22H2l8.4-9.6L.8 2h6.5l4.6 7L18.9 2Zm-1.1 18h1.7L6.3 4H4.5l13.3 16Z',
   github: 'M12 .8a11.2 11.2 0 0 0-3.54 21.83c.56.1.77-.24.77-.54v-2.1c-3.13.68-3.79-1.33-3.79-1.33-.51-1.3-1.25-1.65-1.25-1.65-1.02-.7.08-.69.08-.69 1.13.08 1.72 1.16 1.72 1.16 1 .1 1.83 1.65 3.28.73.1-.73.39-1.23.71-1.51-2.5-.28-5.13-1.25-5.13-5.56 0-1.23.44-2.23 1.16-3.02-.12-.28-.5-1.43.11-2.98 0 0 .95-.3 3.08 1.15a10.7 10.7 0 0 1 5.6 0c2.13-1.45 3.08-1.15 3.08-1.15.61 1.55.23 2.7.11 2.98.72.79 1.16 1.79 1.16 3.02 0 4.32-2.63 5.27-5.14 5.55.4.35.76 1.03.76 2.08v3.32c0 .3.2.65.77.54A11.2 11.2 0 0 0 12 .8Z',
   linkedin: 'M20.5 2h-17C2.67 2 2 2.67 2 3.5v17c0 .83.67 1.5 1.5 1.5h17c.83 0 1.5-.67 1.5-1.5v-17c0-.83-.67-1.5-1.5-1.5ZM8 19H5V9h3v10ZM6.5 7.7a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6ZM19 19h-3v-5.3c0-1.3-.5-2.1-1.6-2.1-1.2 0-1.9.8-1.9 2.1V19h-3V9h2.9v1.4C13 9.5 14 8.8 15.4 8.8c2.4 0 3.6 1.5 3.6 4.3V19Z',
@@ -13,7 +13,7 @@ const icons = {
 };
 const hasIcon = icons[platform] || ['instagram', 'website', 'hacker-news'].includes(platform);
 ---
-<a href={href} aria-label={label} title={label}>
+<a href={href} aria-label={label} title={label} rel="me noopener noreferrer" target="_blank">
   {hasIcon ? <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
     {icons[platform] && <path d={icons[platform]} />}
     {platform === 'instagram' && <g fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none" /></g>}

package/renderer/src/layouts/SiteLayout.astro

@@ -1,70 +1,89 @@
 ---
 import '../styles/site.css';
-import Footer from '../components/Footer.astro';
+import '../styles/post-share.css';
+import { basePath } from '../lib/urls.js';
+import { codeBlockStyles } from '../lib/code-block';
+import { imageRoundingScript, readImageRadius } from '../lib/image-rounding';
+import { fontResources } from '../lib/fonts.js';
+import { pageMetadata } from '../lib/metadata.js';
+import { defaultSiteBranding } from '../lib/branding.js';
+import { postTocScript } from '../lib/post-toc';
+import { authorDialogScript } from '../lib/author-dialog';
+import { postShareScript } from '../lib/post-share';
+import { mobileNavigationScript } from '../lib/mobile-navigation';
+import { blockWidthStyles } from '../lib/block-widths';
+import { tableStyles } from '../lib/table-styles';
+import { imageWidthStyles } from '../lib/image-widths';
+import { googleAnalyticsScript } from '../lib/analytics';
+import Header from '../components/HeaderSlot.astro';
+import Footer from '../components/FooterSlot.astro';
 
 const { site, page, article = false } = Astro.props;
-const navLinks = site.navbar?.links ?? site.navigation ?? [{ label: 'Home', href: '/' }];
-const primary = site.navbar?.primary;
-const title = page.title ?? site.name;
-const description = page.description ?? site.description;
-const image = page.ogImage ?? page.image ?? site.ogImage;
-const imageUrl = image || undefined;
-const typography = site.typography ?? {};
-const fontFamily = typeof typography.fontFamily === 'string' && typography.fontFamily.trim() ? typography.fontFamily.trim() : 'Inter';
+const meta = pageMetadata(site, page, Astro.url, article, basePath);
+const typography = site.design?.typography ?? {};
+const fonts = fontResources(typography);
 const fontSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
-const headingSize = fontSize(typography.headingSize, 48);
-const bodySize = fontSize(typography.bodySize, 18);
-const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;500;600;700&display=swap`;
+const baseSize = fontSize(typography.baseSizePx, 16);
+const bodyLineHeight = fontSize(typography.bodyLineHeight, 1.8);
+const backgroundColor = typeof site.design?.backgroundColor === 'string' && /^#[0-9a-f]{6}$/i.test(site.design?.backgroundColor) ? site.design?.backgroundColor : '#ffffff';
+const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
 ---
 
 <!doctype html>
-<html lang={site.language ?? 'en'} style={{ '--font-family': `${JSON.stringify(fontFamily)}, Arial, Helvetica, sans-serif`, '--heading-size': `${headingSize / 16}rem`, '--body-size': `${bodySize / 16}rem` }}>
+<html data-base-path={basePath} lang={meta.language} style={{ '--image-radius': readImageRadius(site.design?.imageRadiusPercent) / 100, '--site-background': backgroundColor, '--font-family': fonts.bodyFamily, '--heading-font': fonts.headingFamily, '--type-scale': baseSize / 16, '--body-line-height': bodyLineHeight }}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href={fontUrl} rel="stylesheet" />
-    <title>{title === site.name ? title : `${title} · ${site.name}`}</title>
-    <meta name="description" content={description} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
+    {fonts.googleUrl && <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link data-lettercamp-fonts href={fonts.googleUrl} rel="stylesheet" />
+    </>}
+    <style is:inline data-lettercamp-font-faces set:html={fonts.css} />
+    <style is:inline set:html={imageWidthStyles} />
+    <style is:inline set:html={blockWidthStyles} />
+    <style is:inline set:html={codeBlockStyles} />
+    <style is:inline set:html={tableStyles} />
+    <title>{meta.documentTitle}</title>
+    <meta name="description" content={meta.description} />
+    {meta.keywords && <meta name="keywords" content={meta.keywords} />}
+    <meta name="robots" content={meta.robots} />
+    <link rel="canonical" href={meta.canonical} />
+    <meta property="og:title" content={meta.socialTitle} />
+    <meta property="og:description" content={meta.socialDescription} />
     <meta property="og:site_name" content={site.name} />
     <meta property="og:type" content={article ? 'article' : 'website'} />
-    <meta property="og:url" content={Astro.url.href} />
-    {imageUrl && <meta property="og:image" content={imageUrl} />}
-    <meta name="twitter:card" content={imageUrl ? 'summary_large_image' : 'summary'} />
-    {site.favicon && <link rel="icon" href={site.favicon} />}
+    <meta property="og:url" content={meta.canonical} />
+    {meta.locale && <meta property="og:locale" content={meta.locale} />}
+    {meta.imageUrl && <meta property="og:image" content={meta.imageUrl} />}
+    {meta.imageUrl && meta.imageAlt && <meta property="og:image:alt" content={meta.imageAlt} />}
+    {meta.videoUrl && <meta property="og:video" content={meta.videoUrl} />}
+    {meta.videoUrl?.startsWith('https:') && <meta property="og:video:secure_url" content={meta.videoUrl} />}
+    {meta.videoUrl && meta.videoType && <meta property="og:video:type" content={meta.videoType} />}
+    <meta name="twitter:card" content={meta.twitterCard} />
+    <meta name="twitter:title" content={meta.twitterTitle} />
+    <meta name="twitter:description" content={meta.twitterDescription} />
+    {meta.twitterImageUrl && <meta name="twitter:image" content={meta.twitterImageUrl} />}
+    {meta.twitterImageUrl && meta.twitterImageAlt && <meta name="twitter:image:alt" content={meta.twitterImageAlt} />}
+    {meta.twitterSite && <meta name="twitter:site" content={meta.twitterSite} />}
+    {meta.twitterCreator && <meta name="twitter:creator" content={meta.twitterCreator} />}
+    <link rel="icon" href={site.favicon} />
+    {site.favicon === defaultSiteBranding.favicon && <>
+      <link rel="icon" href="https://lettercamp.com/favicon.svg?v=7" type="image/svg+xml" />
+      <link rel="shortcut icon" href="https://lettercamp.com/favicon.ico?v=7" />
+      <link rel="apple-touch-icon" href="https://lettercamp.com/apple-touch-icon.png?v=7" sizes="180x180" />
+    </>}
+    {analytics && <script is:inline data-lettercamp-analytics set:html={analytics} />}
   </head>
   <body>
     <a class="skip-link" href="#content">Skip to content</a>
-    <header class="site-header">
-      <div class="site-header-inner">
-      <a class="brand" href="/">
-        {site.favicon && <img src={site.favicon} width="30" height="30" alt="" />}
-        <span>{site.name}</span>
-      </a>
-      {(navLinks.length > 0 || primary) && <div class="header-actions">
-        {navLinks.length > 0 &&
-          <nav class="desktop-navigation" aria-label="Main navigation">
-            {navLinks.map((item) =>
-              <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
-            )}
-          </nav>}
-          <details class="mobile-navigation">
-            <summary>Menu</summary>
-            <nav aria-label="Main navigation">
-              {navLinks.map((item) =>
-                <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
-              )}
-              {primary && <a href={primary.href}>{primary.label}</a>}
-            </nav>
-          </details>
-        {primary && <a class="header-primary" href={primary.href}>{primary.label}</a>}
-      </div>}
-      </div>
-    </header>
+    <Header site={site} pathname={Astro.url.pathname} />
     <main id="content"><slot /></main>
-    <Footer site={site} />
+    <Footer site={site} pathname={Astro.url.pathname} />
+    <script is:inline data-lettercamp-images set:html={imageRoundingScript} />
+    <script is:inline data-lettercamp-toc set:html={postTocScript} />
+    <script is:inline data-lettercamp-authors set:html={authorDialogScript} />
+    <script is:inline data-lettercamp-share set:html={postShareScript} />
+    <script is:inline data-lettercamp-navigation set:html={mobileNavigationScript} />
   </body>
 </html>

package/renderer/src/lib/analytics.ts

@@ -0,0 +1,21 @@
+export function googleAnalyticsScript(value: unknown): string {
+  const id = typeof value === 'string' ? value.trim().toUpperCase() : '';
+  if (!/^G-[A-Z0-9]+$/.test(id)) return '';
+  return `(() => {
+  const url = new URL(window.location.href);
+  const host = url.hostname;
+  if (!['http:', 'https:'].includes(url.protocol)
+    || host === 'localhost' || host.endsWith('.localhost') || /^127\\./.test(host) || host === '[::1]'
+    || url.searchParams.get('__lettercamp_preview') === '1' || url.pathname.startsWith('/_deployments/')) return;
+  if (document.querySelector('script[data-lettercamp-google-tag]')) return;
+  window.dataLayer = window.dataLayer || [];
+  window.gtag = window.gtag || function () { window.dataLayer.push(arguments); };
+  window.gtag('js', new Date());
+  window.gtag('config', '${id}');
+  const script = document.createElement('script');
+  script.async = true;
+  script.dataset.lettercampGoogleTag = '';
+  script.src = 'https://www.googletagmanager.com/gtag/js?id=${id}';
+  document.head.appendChild(script);
+})();`;
+}

package/renderer/src/lib/author-dialog.ts

@@ -0,0 +1,102 @@
+// Delegation also supports bylines replaced by the editor preview bridge.
+export const authorDialogScript = `
+(() => {
+  let panel;
+  let trigger;
+  let tracking;
+  let frame;
+  const element = (tag, className, text) => {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  };
+  const close = (restoreFocus = false) => {
+    if (!panel?.matches(':popover-open')) return;
+    panel.hidePopover();
+    trigger?.setAttribute('aria-expanded', 'false');
+    tracking?.abort();
+    cancelAnimationFrame(frame);
+    if (restoreFocus && trigger?.isConnected) trigger.focus({ preventScroll: true });
+  };
+  const position = () => {
+    if (!panel?.matches(':popover-open')) return;
+    if (!trigger?.isConnected) { close(); return; }
+    const anchor = trigger.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;
+    if (anchor.bottom < top || anchor.top > top + height) { close(); return; }
+    const below = top + height - anchor.bottom - 14;
+    const above = anchor.top - top - 14;
+    const upwards = below < Math.min(panel.scrollHeight, 320) && above > below;
+    panel.style.maxHeight = Math.max(40, Math.min(320, upwards ? above : below)) + 'px';
+    panel.style.left = Math.max(left + 8, Math.min(anchor.left, left + width - panel.offsetWidth - 8)) + 'px';
+    panel.style.top = (upwards ? anchor.top - panel.offsetHeight - 6 : anchor.bottom + 6) + 'px';
+  };
+  const schedulePosition = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(position); };
+  document.addEventListener('click', event => {
+    const button = event.target instanceof Element ? event.target.closest('button.author-more') : null;
+    if (!button) return;
+    event.preventDefault();
+    if (trigger === button && panel?.matches(':popover-open')) { close(true); return; }
+    close();
+    const authors = JSON.parse(button.dataset.authors);
+    if (!panel) {
+      panel = element('div', 'authors-popover');
+      panel.id = 'authors-popover';
+      panel.popover = 'auto';
+      panel.tabIndex = -1;
+      panel.setAttribute('role', 'dialog');
+      panel.setAttribute('aria-label', 'Authors');
+      panel.append(element('ul', 'authors-popover-list'));
+      panel.addEventListener('toggle', event => {
+        if (event.newState === 'closed') {
+          trigger?.setAttribute('aria-expanded', 'false');
+          tracking?.abort();
+          cancelAnimationFrame(frame);
+        }
+      });
+      document.body.append(panel);
+    }
+    const list = panel.querySelector('ul');
+    list.replaceChildren();
+    for (const author of authors) {
+      const row = element('li', 'authors-popover-author');
+      const portrait = element('span', 'author-portrait');
+      portrait.setAttribute('aria-hidden', 'true');
+      if (author.image) {
+        const image = element('img', 'author-avatar');
+        image.src = author.image; image.alt = ''; image.width = 28; image.height = 28;
+        portrait.append(image);
+      } else {
+        portrait.append(element('span', 'author-initials', author.name.trim().split(/\\s+/).map(part => part[0]).slice(0, 2).join('')));
+      }
+      row.append(portrait, element('span', '', author.name));
+      list.append(row);
+    }
+    trigger = button;
+    trigger.setAttribute('aria-controls', panel.id);
+    trigger.setAttribute('popovertarget', panel.id);
+    trigger.setAttribute('aria-expanded', 'true');
+    panel.showPopover();
+    position();
+    panel.focus({ preventScroll: true });
+    tracking = new AbortController();
+    const signal = tracking.signal;
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault(); close(true);
+    }, { signal, capture: true });
+    document.addEventListener('focusin', event => {
+      if (!panel.contains(event.target) && event.target !== trigger) close();
+    }, { signal });
+    document.addEventListener('scroll', schedulePosition, { signal, capture: true, passive: true });
+    window.addEventListener('resize', schedulePosition, { signal, passive: true });
+    window.visualViewport?.addEventListener('resize', schedulePosition, { signal, passive: true });
+    window.visualViewport?.addEventListener('scroll', schedulePosition, { signal, passive: true });
+  });
+})();
+`;