@lettercamp/cli 0.1.6 → 0.1.8

package/dist/preview.js

@@ -0,0 +1,48 @@
+import { clearLine, cursorTo } from 'node:readline';
+export async function preview(directory, options) {
+    console.log('\nWelcome to the Lettercamp CLI!\n');
+    const output = process.stdout;
+    const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    let frame = 0;
+    const render = () => {
+        cursorTo(output, 0);
+        output.write(`${frames[frame++ % frames.length]} Starting your preview…`);
+    };
+    let timer;
+    if (output.isTTY && process.env.TERM !== 'dumb') {
+        render();
+        timer = setInterval(render, 80);
+        timer.unref();
+    }
+    else {
+        console.log('Starting your preview…');
+    }
+    const finishLoading = () => {
+        if (!timer)
+            return;
+        clearInterval(timer);
+        timer = undefined;
+        cursorTo(output, 0);
+        clearLine(output, 0);
+    };
+    try {
+        // Keep the welcome and animation ahead of the renderer's slower imports.
+        const { startDev } = await import('./dev.js');
+        const { server, contentRoot } = await startDev(directory, options);
+        finishLoading();
+        if (server.address.port !== options.port) {
+            console.log(`Port ${options.port} is in use. Using port ${server.address.port} instead.\n`);
+        }
+        console.log('Your publication is ready.\n');
+        for (const url of server.resolvedUrls.local)
+            console.log(`  Local:   ${url}`);
+        for (const url of server.resolvedUrls.network)
+            console.log(`  Network: ${url}`);
+        console.log(`\nPreviewing ${contentRoot}`);
+        console.log('Changes to pages, components, styles, and settings.json reload automatically.');
+        console.log('Press Ctrl+C to stop.\n');
+    }
+    finally {
+        finishLoading();
+    }
+}

package/dist/prompts.js

@@ -0,0 +1,31 @@
+import { createInterface } from 'node:readline/promises';
+export async function ask(label, fallback) {
+    if (!process.stdin.isTTY || !process.stderr.isTTY)
+        throw new Error('This step needs a terminal. Run this command interactively once to finish setup.');
+    const readline = createInterface({ input: process.stdin, output: process.stderr });
+    const abort = new AbortController();
+    readline.on('SIGINT', () => abort.abort());
+    try {
+        const value = (await readline.question(`${label}${fallback ? ` (${fallback})` : ''}: `, { signal: abort.signal })).trim();
+        return value || fallback || '';
+    }
+    catch {
+        throw new Error('Cancelled.');
+    }
+    finally {
+        readline.close();
+    }
+}
+export async function confirm(label) {
+    return /^(y|yes)$/i.test(await ask(`${label} [y/N]`));
+}
+export async function choose(label, choices) {
+    console.error(`\n${label}`);
+    choices.forEach((choice, i) => console.error(`  ${i + 1}. ${choice}`));
+    for (;;) {
+        const value = await ask('Choose a number', '1');
+        if (/^\d+$/.test(value) && Number(value) >= 1 && Number(value) <= choices.length)
+            return Number(value) - 1;
+        console.error(`Choose a number from 1 to ${choices.length}.`);
+    }
+}

package/dist/publication-links.js

@@ -0,0 +1,23 @@
+// Root-relative links in Markdown and literal MDX attributes belong to the publication.
+// Absolute URLs and anchors retain their authored meaning.
+export function publicationLinks(options) {
+    const base = options.basePath.replace(/\/+$/, '');
+    const prefix = (value) => value.startsWith('/') && !value.startsWith('//') ? base + value : value;
+    return (tree) => {
+        if (!base)
+            return;
+        function visit(node) {
+            if (['link', 'image', 'definition'].includes(node.type) && node.url)
+                node.url = prefix(node.url);
+            if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
+                for (const attribute of node.attributes ?? []) {
+                    if (attribute.type === 'mdxJsxAttribute' && ['href', 'src', 'poster'].includes(attribute.name ?? '') && typeof attribute.value === 'string')
+                        attribute.value = prefix(attribute.value);
+                }
+            }
+            for (const child of node.children ?? [])
+                visit(child);
+        }
+        visit(tree);
+    };
+}

package/dist/react.js

@@ -0,0 +1,15 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+const require = createRequire(import.meta.url);
+export const reactIntegrationDirectory = path.dirname(require.resolve('@astrojs/react/package.json'));
+// Astro resolves renderer entrypoints from the temporary workspace. Locate the
+// CLI's integration even when npm puts it in a nested node_modules folder.
+// The integration deduplicates React against the workspace's CLI dependencies.
+export const reactViteConfig = {
+    resolve: {
+        alias: Object.keys(require('@astrojs/react/package.json').exports).map(entry => {
+            const id = '@astrojs/react' + (entry === '.' ? '' : entry.slice(1));
+            return { find: new RegExp(`^${id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`), replacement: require.resolve(id) };
+        }),
+    },
+};

package/dist/reading-time.js

@@ -0,0 +1,25 @@
+// Runs on parsed Markdown/MDX, so frontmatter, imports, URLs, and JSX
+// attributes never count as prose. Runtime-generated component text is unknown.
+export function readingTime() {
+    return (tree, file) => {
+        const text = [];
+        function visit(node) {
+            if (node.type === 'text' || node.type === 'inlineCode')
+                text.push(node.value ?? '');
+            for (const child of node.children ?? [])
+                visit(child);
+        }
+        visit(tree);
+        const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
+        let words = 0;
+        for (const segment of segmenter.segment(text.join(' '))) {
+            if (segment.isWordLike)
+                words++;
+        }
+        const astro = file.data.astro;
+        if (astro?.frontmatter) {
+            // Always overwrite frontmatter: this is derived content, not an override.
+            astro.frontmatter.readingMinutes = Math.max(1, Math.ceil(words / 200));
+        }
+    };
+}

package/dist/upload.js

@@ -0,0 +1,57 @@
+import { open } from 'node:fs/promises';
+import path from 'node:path';
+import { apiRequest, credentials, responseJson, selectUploadSite } from './account.js';
+async function uploadFile(file, slug, token) {
+    const handle = await open(file, 'r');
+    let bytes;
+    try {
+        const info = await handle.stat();
+        if (!info.isFile() || !info.size)
+            throw new Error('Choose a nonempty image or font file.');
+        if (info.size > 10 * 1024 * 1024)
+            throw new Error('Files must be 10 MB or smaller.');
+        bytes = await handle.readFile();
+        if (bytes.byteLength > 10 * 1024 * 1024)
+            throw new Error('Files must be 10 MB or smaller.');
+    }
+    finally {
+        await handle.close();
+    }
+    const font = /\.(ttf|otf|woff2?)$/i.test(file);
+    return responseJson(await apiRequest(`/api/sites/${encodeURIComponent(slug)}/assets${font ? "?type=font" : ""}`, {
+        method: 'POST', headers: { 'Content-Type': 'application/octet-stream', 'X-File-Name': encodeURIComponent(path.basename(file)) }, body: new Uint8Array(bytes),
+    }, token));
+}
+export async function upload(files, options) {
+    const saved = await credentials();
+    const { site, remember } = await selectUploadSite(saved.token, options.site);
+    const multiple = files.length > 1;
+    const results = [];
+    let remembered = false;
+    for (const file of files) {
+        let result;
+        try {
+            result = await uploadFile(file, site.slug, saved.token);
+        }
+        catch (error) {
+            if (!multiple)
+                throw error;
+            const message = error instanceof Error ? error.message : String(error);
+            results.push({ file, error: message });
+            console.error(`${file}: ${message}`);
+            process.exitCode = 1;
+            continue;
+        }
+        results.push({ file, ...result });
+        if (!remembered) {
+            remembered = true;
+            await remember().catch(() => console.error('Uploaded successfully, but the site selection could not be saved. Use --site on your next upload.'));
+        }
+        if (!options.json)
+            console.log(multiple ? `${file}\t${result.url}` : result.url);
+        else if (!multiple)
+            console.log(JSON.stringify(result));
+    }
+    if (options.json && multiple)
+        console.log(JSON.stringify(results));
+}

package/dist/workspace.js

@@ -4,16 +4,18 @@ import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { escapePath } from 'tinyglobby';
+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) {
     const contentRoot = await realpath(directory);
-    JSON.parse(await readFile(path.join(contentRoot, 'site.json'), 'utf8'));
+    JSON.parse(await readFile(path.join(contentRoot, 'settings.json'), 'utf8'));
     if (!(await stat(path.join(contentRoot, 'pages'))).isDirectory())
         throw new Error('Missing pages directory.');
     const workspace = await realpath(await mkdtemp(path.join(tmpdir(), 'lettercamp-')));
     try {
         await cp(renderer, workspace, { recursive: true });
+        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.
@@ -21,8 +23,11 @@ export async function prepareWorkspace(directory) {
         await symlink(modules, path.join(workspace, 'node_modules'), 'junction');
         const contentPrefix = path.relative(path.join(workspace, 'src'), path.join(contentRoot, 'pages')).replaceAll('\\', '/') + '/';
         await writeFile(path.join(workspace, 'src', 'content.js'), `export const contentPrefix = ${JSON.stringify(contentPrefix)};\n` +
-            `export const pages = import.meta.glob(${JSON.stringify(escapePath(contentPrefix) + '**/*.{md,mdx}')}, { eager: true });\n`);
-        await writeFile(path.join(workspace, 'src', 'site.js'), `export { default } from ${JSON.stringify(path.join(contentRoot, 'site.json').replaceAll('\\', '/'))};\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'), `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.6",
+  "version": "0.1.8",
   "description": "The repository for the Lettercamp CLI",
   "keywords": [
     "lettercamp",
@@ -26,7 +26,7 @@
     "renderer"
   ],
   "engines": {
-    "node": ">=22.19.0"
+    "node": ">=22.22.0"
   },
   "scripts": {
     "build": "tsc",
@@ -38,10 +38,20 @@
     "registry": "https://registry.npmjs.org/"
   },
   "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

@@ -0,0 +1,26 @@
+---
+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;
+---
+
+{(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>}
+  {showReadingTime && <span class="reading-time">{post.readingMinutes} min read</span>}
+</div>}

package/renderer/src/components/BlogHome.astro

@@ -0,0 +1,37 @@
+---
+import { sitePath } from '../lib/urls.js';
+import PostCard from './PostCard.astro';
+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 data-home-layout={site.home?.feedLayout === 'rows' ? 'rows' : 'grid'} style={{ '--home-content-width': `${readHomeWidthPx(site.home)}px` }}>
+  <header class="blog-heading">
+    <h1>{category || (site.home.title ?? `${site.name} Blog`)}</h1>
+    {site.description && <p class="description" style="margin-top: 12px">{site.description}</p>}
+  </header>
+  {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="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>
+  </section>
+  <section class="archive" aria-labelledby="archive-heading" data-archive hidden={posts.length <= featuredLimit}>
+    <h2 id="archive-heading">Archive</h2>
+    <div class="archive-list" data-archive-posts>
+      {posts.slice(featuredLimit).map(post => <PostCard post={post} site={site} />)}
+    </div>
+  </section>
+</div>

package/renderer/src/components/Footer.astro

@@ -0,0 +1,35 @@
+---
+import { sitePath } from '../lib/urls.js';
+import SocialLink from './SocialLink.astro';
+const { site } = Astro.props;
+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={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={sitePath(item.href)}>{item.label}</a></li>)}</ul>
+      </nav>)}
+    </div>}
+  </div>
+  <div class="footer-bottom">
+    {socials.length > 0 && <nav class="footer-socials" aria-label="Social links">
+      {socials.map(({ platform, href }) => <SocialLink name={platform} href={href} />)}
+    </nav>}
+    <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

@@ -0,0 +1,25 @@
+---
+import AuthorByline from './AuthorByline.astro';
+const { post, site } = Astro.props;
+const image = post.ogImage ?? post.image ?? site.seo?.ogImage;
+---
+
+<article class="post-card" data-post-category={post.category}>
+  <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">
+      {(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>}
+      <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>
+  </div>
+</article>

package/renderer/src/components/SocialLink.astro

@@ -0,0 +1,23 @@
+---
+const { name, href } = Astro.props;
+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',
+  youtube: 'M23 7a3 3 0 0 0-2.1-2.1C19 4.4 12 4.4 12 4.4s-7 0-8.9.5A3 3 0 0 0 1 7a31 31 0 0 0 0 10 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5A3 3 0 0 0 23 17a31 31 0 0 0 0-10ZM9.5 15.5v-7l6 3.5-6 3.5Z',
+  facebook: 'M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12Z',
+};
+const hasIcon = icons[platform] || ['instagram', 'website', 'hacker-news'].includes(platform);
+---
+<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>}
+    {platform === 'website' && <g fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9" /><ellipse cx="12" cy="12" rx="4" ry="9" /><path d="M3 12h18" /></g>}
+    {platform === 'hacker-news' && <><rect x="2" y="2" width="20" height="20" rx="2" /><path d="m7 6 5 7 5-7m-5 7v5" fill="none" stroke="var(--background, #fff)" stroke-width="1.8" /></>}
+  </svg> : <span>{label}</span>}
+</a>

package/renderer/src/layouts/SiteLayout.astro

@@ -1,43 +1,89 @@
 ---
 import '../styles/site.css';
+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 } = Astro.props;
-const title = page.title ?? site.name;
-const description = page.description ?? site.description;
-const image = page.ogImage ?? page.image ?? site.ogImage;
-const imageUrl = image ? new URL(image, Astro.url).href : undefined;
+const { site, page, article = false } = Astro.props;
+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 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'}>
+<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" />
-    <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={page.layout === 'post' ? '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:type" content={article ? 'article' : 'website'} />
+    <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">
-      <a class="brand" href="/">
-        {site.favicon && <img src={site.favicon} width="30" height="30" alt="" />}
-        <span>{site.name}</span>
-      </a>
-      <nav aria-label="Main navigation">
-        {(site.navigation ?? [{ label: 'Home', href: '/' }]).map((item) =>
-          <a href={item.href} aria-current={item.href === Astro.url.pathname ? 'page' : undefined}>{item.label}</a>
-        )}
-      </nav>
-    </header>
+    <Header site={site} pathname={Astro.url.pathname} />
     <main id="content"><slot /></main>
-    <footer class="site-footer"><span>© {new Date().getFullYear()} {site.name}</span><a href="https://lettercamp.com">Published with Lettercamp</a></footer>
+    <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);
+})();`;
+}