@lettercamp/cli 0.1.9 → 0.1.11

package/dist/build.js

@@ -1,5 +1,6 @@
 import { publicationLinks } from './publication-links.js';
 import { codeBlocks } from "./code-highlight.js";
+import { contentComponents } from "./content-component-syntax.js";
 import { componentBlocks } from "./component-blocks.js";
 import path from 'node:path';
 import { build } from 'astro';
@@ -38,7 +39,7 @@ export async function buildSite(directory, options) {
             publicDir: path.join(workspace, '.lettercamp-no-public'), outDir, output: 'static',
             integrations: [mdx(), react()],
             vite: reactViteConfig,
-            markdown: { syntaxHighlight: false, processor: unified({ remarkPlugins: [readingTime, codeBlocks, componentBlocks, [mediaDimensions, { root }], [publicationLinks, { basePath: origin.pathname }]], rehypePlugins: [[mediaDimensions, { root }]] }) },
+            markdown: { syntaxHighlight: false, processor: unified({ remarkPlugins: [contentComponents, readingTime, codeBlocks, componentBlocks, [mediaDimensions, { root }], [publicationLinks, { basePath: origin.pathname }]], rehypePlugins: [[mediaDimensions, { root }]] }) },
             build: { format: 'directory', ...(options.assetsPrefix ? { assetsPrefix: options.assetsPrefix } : {}) },
         });
         return outDir;

package/dist/code-block.js

@@ -27,24 +27,24 @@ export function writeCodeSettings(meta, patch) {
 }
 // The editor and both publication renderers use the same token classes and palette.
 export const codeBlockStyles = `
-[data-lettercamp-code] { --code-keyword: #8250a0; --code-string: #3d7757; --code-number: #a15c32; --code-name: #326b99; --code-comment: #93939b; color: #414146; }
+[data-lettercamp-code] { --code-keyword: color-mix(in srgb, #8250a0, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #3d7757, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #a15c32, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #326b99, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-comment: var(--site-text-muted, #93939b); color: var(--site-text-strong, #414146); }
 [data-lettercamp-code][data-code-width] { margin-block: 24px; }
-[data-lettercamp-code][data-code-theme="ocean"] { --code-keyword: #3d62a8; --code-string: #277c85; --code-number: #98623e; --code-name: #6961a4; }
-[data-lettercamp-code][data-code-theme="forest"] { --code-keyword: #47724a; --code-string: #827030; --code-number: #a25d47; --code-name: #3c7b79; }
-[data-lettercamp-code][data-code-theme="mono"] { --code-keyword: #45454a; --code-string: #62626a; --code-number: #62626a; --code-name: #45454a; }
+[data-lettercamp-code][data-code-theme="ocean"] { --code-keyword: color-mix(in srgb, #3d62a8, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #277c85, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #98623e, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #6961a4, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
+[data-lettercamp-code][data-code-theme="forest"] { --code-keyword: color-mix(in srgb, #47724a, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-string: color-mix(in srgb, #827030, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-number: color-mix(in srgb, #a25d47, var(--site-foreground, #000000) var(--site-code-tint, 0%)); --code-name: color-mix(in srgb, #3c7b79, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
+[data-lettercamp-code][data-code-theme="mono"] { --code-keyword: var(--site-text-strong, #45454a); --code-string: var(--site-text-secondary, #62626a); --code-number: var(--site-text-secondary, #62626a); --code-name: var(--site-text-strong, #45454a); }
 [data-lettercamp-code] .tok-keyword, [data-lettercamp-code] .tok-operator { color: var(--code-keyword); }
 [data-lettercamp-code] .tok-string, [data-lettercamp-code] .tok-string2, [data-lettercamp-code] .tok-inserted { color: var(--code-string); }
 [data-lettercamp-code] .tok-number, [data-lettercamp-code] .tok-bool, [data-lettercamp-code] .tok-atom, [data-lettercamp-code] .tok-literal { color: var(--code-number); }
 [data-lettercamp-code] .tok-typeName, [data-lettercamp-code] .tok-className, [data-lettercamp-code] .tok-propertyName, [data-lettercamp-code] .tok-definition, [data-lettercamp-code] .tok-variableName2, [data-lettercamp-code] .tok-labelName { color: var(--code-name); }
 [data-lettercamp-code] .tok-comment, [data-lettercamp-code] .tok-meta { color: var(--code-comment); }
-[data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: #aa4747; }
+[data-lettercamp-code] .tok-invalid, [data-lettercamp-code] .tok-deleted { color: color-mix(in srgb, #aa4747, var(--site-foreground, #000000) var(--site-code-tint, 0%)); }
 [data-lettercamp-code] .tok-strong { font-weight: 600; }
 [data-lettercamp-code] .tok-emphasis { font-style: italic; }
-figure[data-lettercamp-code] > pre { box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: #fafafa; color: #414146; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+figure[data-lettercamp-code] > pre { box-sizing: border-box; margin: 0; padding: 16px 0; overflow-x: auto; border-radius: 8px; background: var(--site-surface, #fafafa); color: var(--site-text-strong, #414146); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
 figure[data-lettercamp-code] > pre > code { display: block; width: max-content; min-width: 100%; padding: 0; background: transparent; color: inherit; font: inherit; white-space: normal; counter-reset: code-line; }
 [data-lettercamp-code] .code-line { position: relative; display: block; box-sizing: border-box; min-height: 1.7em; padding: 0 18px 0 calc(var(--code-gutter, 3ch) + 24px); white-space: pre; }
-[data-lettercamp-code] .code-line::before { position: absolute; left: 8px; width: var(--code-gutter, 3ch); text-align: right; content: counter(code-line); counter-increment: code-line; color: #b4b4bc; user-select: none; font-variant-numeric: tabular-nums; }
+[data-lettercamp-code] .code-line::before { position: absolute; left: 8px; width: var(--code-gutter, 3ch); text-align: right; content: counter(code-line); counter-increment: code-line; color: var(--site-text-faint, #b4b4bc); user-select: none; font-variant-numeric: tabular-nums; }
 [data-lettercamp-code][data-code-wrap="true"] > pre > code { width: 100%; }
 [data-lettercamp-code][data-code-wrap="true"] .code-line { white-space: pre-wrap; overflow-wrap: anywhere; }
-figure[data-lettercamp-code] > figcaption { margin: 8px 0 0; color: #888; font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }
+figure[data-lettercamp-code] > figcaption { margin: 8px 0 0; color: var(--site-text-muted, #888); font: 13px/1.5 var(--font-family, inherit); text-align: center; overflow-wrap: anywhere; }
 `;

package/dist/content-component-syntax.js

@@ -0,0 +1,75 @@
+// Generated from lettercamp/lib/content-component-syntax.ts.
+import { mdxjs } from "micromark-extension-mdxjs";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfm } from "micromark-extension-gfm";
+import { gfmFromMarkdown } from "mdast-util-gfm";
+import { mdxFromMarkdown } from "mdast-util-mdx";
+import { contentComponentNames, isContentComponent, renderContentComponents } from "./content-components.js";
+// Opt .md files into JSX only for built-in tags. Ordinary HTML, autolinks,
+// indented code, and prose containing braces retain normal Markdown behavior.
+export function contentComponentSyntax() {
+    const jsx = mdxjs();
+    const gate = (construct) => ({
+        name: "lettercampComponent",
+        tokenize(effects, ok, nok) {
+            const check = { partial: true, tokenize(effects, ok, nok) {
+                    let name = "", first = true;
+                    return start;
+                    function start(code) {
+                        if (first) {
+                            first = false;
+                            effects.enter("data");
+                            effects.consume(code);
+                            return start;
+                        }
+                        if (code === 47 && !name) {
+                            effects.consume(code);
+                            return nameStart;
+                        }
+                        return nameStart(code);
+                    }
+                    function nameStart(code) {
+                        if (code !== null && /[A-Za-z]/.test(String.fromCharCode(code))) {
+                            name += String.fromCharCode(code);
+                            effects.consume(code);
+                            return nameStart;
+                        }
+                        effects.exit("data");
+                        return contentComponentNames.includes(name) && (code === 62 || code === 47 || code === 32 || code === 9 || code === -4 || code === -5 || code === -3) ? ok(code) : nok(code);
+                    }
+                } };
+            return effects.check(check, effects.attempt(construct, ok, nok), nok);
+        },
+    });
+    return { flow: { 60: gate(jsx.flow[60]) }, text: { 60: gate(jsx.text[60]) } };
+}
+// JSX indentation inside a built-in is layout, not an indented code block.
+// Reparse only those source ranges, retaining ordinary Markdown everywhere else.
+export function normalizeContentComponentSyntax(tree, source) {
+    const visit = (node) => {
+        if (isContentComponent(node) && node.position?.start.offset !== undefined && node.position.end.offset !== undefined) {
+            const parsed = fromMarkdown(source.slice(node.position.start.offset, node.position.end.offset), {
+                extensions: [gfm(), contentComponentSyntax(), { disable: { null: ["codeIndented"] } }],
+                mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
+            });
+            if (parsed.children.length === 1 && isContentComponent(parsed.children[0]))
+                return parsed.children[0];
+        }
+        if ("children" in node)
+            node.children = node.children.map(visit);
+        return node;
+    };
+    tree.children = tree.children.map(visit);
+}
+export function contentComponents() {
+    const data = this.data();
+    for (const [name, extension] of [["micromarkExtensions", contentComponentSyntax()], ["fromMarkdownExtensions", mdxFromMarkdown()]]) {
+        const extensions = (data[name] ??= []);
+        extensions.push(extension);
+    }
+    return (tree, file) => {
+        if (file.extname !== ".mdx")
+            normalizeContentComponentSyntax(tree, String(file.value));
+        renderContentComponents(tree);
+    };
+}

package/dist/content-components.js

@@ -0,0 +1,222 @@
+import { readCodeSettings, writeCodeSettings } from "./code-block.js";
+import { textStyleString } from "./text-styles.js";
+export const contentComponentNames = ["KeyTakeaways", "Image", "Video", "Audio", "CodeBlock", "Table", "TableRow", "TableCell"];
+export const isContentElement = (node) => node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+export const isContentComponent = (node) => isContentElement(node) && contentComponentNames.includes(node.name);
+// Only literal values are interpreted. Expressions, spreads, and user code stay opaque.
+export function componentProps(node) {
+    const props = {};
+    for (const attribute of node.attributes) {
+        if (attribute.type !== "mdxJsxAttribute" || Object.hasOwn(props, attribute.name))
+            return null;
+        if (attribute.value == null)
+            props[attribute.name] = true;
+        else if (typeof attribute.value === "string")
+            props[attribute.name] = attribute.value;
+        else {
+            const statement = attribute.value.data?.estree?.body[0];
+            const expression = statement?.type === "ExpressionStatement" ? statement.expression : null;
+            if (expression?.type === "Literal" && ["string", "number", "boolean"].includes(typeof expression.value))
+                props[attribute.name] = expression.value;
+            else if (expression?.type === "ArrayExpression" && expression.elements.every(item => item?.type === "Literal" && typeof item.value === "number")) {
+                props[attribute.name] = expression.elements.map(item => item.value);
+            }
+            else {
+                // Source writers can construct literal attributes before a parser has
+                // attached ESTree metadata. JSON parsing never evaluates user code.
+                let value;
+                try {
+                    value = JSON.parse(attribute.value.value);
+                }
+                catch {
+                    return null;
+                }
+                if (["string", "number", "boolean"].includes(typeof value) || Array.isArray(value) && value.every(item => typeof item === "number"))
+                    props[attribute.name] = value;
+                else
+                    return null;
+            }
+        }
+    }
+    return props;
+}
+export function contentElement(name, props, children = [], inline = false) {
+    return {
+        type: inline ? "mdxJsxTextElement" : "mdxJsxFlowElement", name,
+        attributes: Object.entries(props).filter(([, value]) => value !== undefined).map(([name, value]) => ({
+            type: "mdxJsxAttribute", name, value: typeof value === "string" ? value : value === true ? null : {
+                type: "mdxJsxAttributeValueExpression", value: JSON.stringify(value),
+            },
+        })), children, data: { lettercampBuiltin: true },
+    };
+}
+// Legacy HTML uses string attributes so existing editor visitors can read it.
+const html = (name, props, children = [], inline = false) => contentElement(name, Object.fromEntries(Object.entries(props).map(([key, value]) => [key, value === undefined ? undefined : String(value)])), children, inline);
+const meaningful = (nodes) => nodes.filter(node => node.type !== "text" || node.value.trim());
+const widthOf = (value) => value === "wide" || value === "full" ? value : "regular";
+const positive = (value) => Number.isFinite(Number(value)) && Number(value) > 0 ? Number(value) : undefined;
+const allowed = (props, names) => Object.keys(props).every(name => names.includes(name));
+export function expandContentComponent(node) {
+    if (!isContentComponent(node))
+        return null;
+    const props = componentProps(node);
+    if (!props)
+        return null;
+    if (props.width !== undefined && !["regular", "wide", "full"].includes(String(props.width)))
+        return null;
+    const inline = node.type === "mdxJsxTextElement";
+    switch (node.name) {
+        case "KeyTakeaways":
+            return allowed(props, ["width"]) && !inline ? html("div", { "data-lettercamp-key-takeaways": "true", "data-block-width": widthOf(props.width) }, node.children) : null;
+        case "Image":
+        case "Video":
+        case "Audio": {
+            const image = node.name === "Image", audio = node.name === "Audio";
+            if (!allowed(props, ["src", "alt", "width", "caption", "title", "pixelWidth", "pixelHeight", ...(image ? ["href", "newTab"] : [])]) || typeof props.src !== "string" || meaningful(node.children).length)
+                return null;
+            if (props.newTab !== undefined && typeof props.newTab !== "boolean")
+                return null;
+            let media = html(image ? "img" : audio ? "audio" : "video", {
+                src: props.src, ...(image ? { alt: props.alt ?? "" } : { controls: "" }), title: props.title,
+                width: positive(props.pixelWidth), height: positive(props.pixelHeight),
+                "data-image-width": audio ? undefined : widthOf(props.width), "data-block-width": audio ? widthOf(props.width) : undefined,
+            }, [], inline);
+            if (image && typeof props.href === "string" && props.href)
+                media = html("a", { href: props.href, ...(props.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {}) }, [media], inline);
+            if (typeof props.caption === "string" && props.caption) {
+                const caption = { type: "text", value: props.caption };
+                media = html(inline ? "span" : "figure", {}, [media, html(inline ? "small" : "figcaption", {}, [inline ? caption : { type: "paragraph", children: [caption] }], inline)], inline);
+            }
+            return media;
+        }
+        case "CodeBlock": {
+            const children = meaningful(node.children), code = children[0];
+            if (!allowed(props, ["width", "caption", "wrap", "theme"]) || inline || children.length !== 1 || code?.type !== "code")
+                return null;
+            if (props.wrap !== undefined && typeof props.wrap !== "boolean")
+                return null;
+            if (props.theme !== undefined && !["classic", "ocean", "forest", "mono"].includes(String(props.theme)))
+                return null;
+            const settings = readCodeSettings(code.meta ?? "");
+            return { ...code, meta: writeCodeSettings(code.meta ?? "", { ...settings,
+                    ...(props.width !== undefined ? { width: widthOf(props.width) } : {}),
+                    ...(typeof props.caption === "string" ? { caption: props.caption } : {}),
+                    ...(typeof props.wrap === "boolean" ? { wrap: props.wrap } : {}),
+                    ...(props.theme !== undefined ? { theme: props.theme } : {}),
+                }) };
+        }
+        case "Table": return !inline ? expandTable(node, props) : null;
+        default: return null;
+    }
+}
+function expandTable(node, props) {
+    if (!allowed(props, ["width", "columnWidths", "rowHeight"]))
+        return null;
+    const children = meaningful(node.children.flatMap(child => child.type === "paragraph" ? child.children : [child]));
+    let rows;
+    if (children.length === 1 && children[0].type === "table") {
+        const table = children[0];
+        rows = table.children.map((row, r) => contentElement("TableRow", {}, row.children.map((cell, c) => contentElement("TableCell", {
+            header: r === 0 || undefined, align: table.align?.[c] ?? undefined,
+        }, [{ type: "paragraph", children: cell.children }]))));
+    }
+    else if (children.every(child => isContentElement(child) && child.name === "TableRow"))
+        rows = children;
+    else
+        return null;
+    if (!rows.length)
+        return null;
+    const converted = [];
+    const occupied = rows.map(() => []);
+    const heights = rows.map(row => positive(componentProps(row)?.height) ?? positive(props.rowHeight));
+    let columnCount = 0;
+    for (const [r, row] of rows.entries()) {
+        const rowProps = componentProps(row);
+        if (!rowProps || !allowed(rowProps, ["height"]))
+            return null;
+        const cells = [];
+        let c = 0;
+        for (const cell of meaningful(row.children.flatMap(child => child.type === "paragraph" ? child.children : [child]))) {
+            if (!isContentElement(cell) || cell.name !== "TableCell")
+                return null;
+            const p = componentProps(cell);
+            if (!p || !allowed(p, ["header", "colSpan", "rowSpan", "align", "color", "background"]) || p.header !== undefined && typeof p.header !== "boolean")
+                return null;
+            while (occupied[r][c])
+                c++;
+            const colSpan = Math.max(1, Math.floor(positive(p.colSpan) ?? 1)), rowSpan = Math.min(rows.length - r, Math.max(1, Math.floor(positive(p.rowSpan) ?? 1)));
+            for (let y = r; y < r + rowSpan; y++)
+                for (let x = c; x < c + colSpan; x++)
+                    occupied[y][x] = true;
+            const style = textStyleString([p.color && `color: ${p.color}`, p.background && `background-color: ${p.background}`, p.align && `text-align: ${p.align}`].filter(Boolean).join("; "));
+            const cellHeights = heights.slice(r, r + rowSpan);
+            const height = (rowSpan > 1 || colSpan > 1) && cellHeights.every(value => value !== undefined) ? Math.max(0, cellHeights.reduce((sum, value) => sum + value, 0) - 1) : undefined;
+            // The same content viewport preserves merged-cell heights in editor and output.
+            cells.push(html(p.header ? "th" : "td", { colSpan: colSpan > 1 ? colSpan : undefined, rowSpan: rowSpan > 1 ? rowSpan : undefined,
+                style: [style, height !== undefined ? `--table-cell-height: ${height}px` : ""].filter(Boolean).join("; ") || undefined,
+                "data-table-cell-height": height,
+            }, [html("span", { "data-table-content": "true" }, cell.children.flatMap(child => child.type === "paragraph" ? child.children : [child]), true)]));
+            c += colSpan;
+        }
+        columnCount = Math.max(columnCount, occupied[r].length);
+        converted.push(html("tr", { height: heights[r] }, cells));
+    }
+    const requested = Array.isArray(props.columnWidths) ? props.columnWidths : typeof props.columnWidths === "string" ? props.columnWidths.split(",").map(Number) : undefined;
+    if (requested && (requested.length !== columnCount || requested.some(value => !Number.isFinite(value) || value <= 0)))
+        return null;
+    const widths = requested ?? Array(columnCount).fill(1), total = widths.reduce((sum, width) => sum + width, 0);
+    return html("div", { "data-lettercamp-table": "true", "data-table-width": widthOf(props.width), "data-row-height": positive(props.rowHeight) }, [html("table", {}, [
+            html("colgroup", {}, widths.map(width => html("col", { width: `${width / total * 100}%` }))), html("tbody", {}, converted),
+        ])]);
+}
+export function codeComponent(code) {
+    const settings = readCodeSettings(code.meta ?? "");
+    const meta = (code.meta ?? "").replace(/(?:^|\s)lc-(width|wrap|theme|caption)=[^\s]*/g, "").trim();
+    return contentElement("CodeBlock", {
+        width: settings.width === "regular" ? undefined : settings.width,
+        wrap: settings.wrap ? undefined : false, theme: settings.theme === "classic" ? undefined : settings.theme,
+        caption: settings.caption || undefined,
+    }, [{ ...code, meta: meta || null }]);
+}
+// Imported JSX components with matching names retain their original meaning.
+export function importedComponentNames(tree) {
+    const names = new Set();
+    for (const node of tree.children)
+        if (node.type === "mdxjsEsm") {
+            for (const statement of node.data?.estree?.body ?? [])
+                if (statement.type === "ImportDeclaration") {
+                    for (const specifier of statement.specifiers)
+                        names.add(specifier.local.name);
+                }
+        }
+    return names;
+}
+// Lower built-ins to the existing HTML contract before highlighting and layout.
+// Generic mdast nodes with hName work in both Markdown and Astro's MDX compiler.
+export function renderContentComponents(tree) {
+    const imported = importedComponentNames(tree);
+    const visit = (node) => {
+        if (isContentComponent(node) && !imported.has(node.name)) {
+            const expanded = expandContentComponent(node);
+            if (!expanded)
+                throw new Error(`Invalid <${node.name}> component. Use supported literal properties and children.`);
+            return lower(expanded);
+        }
+        if ("children" in node)
+            node.children = node.children.map(visit);
+        return node;
+    };
+    const lower = (node) => {
+        if (isContentElement(node) && node.name && /^[a-z]/.test(node.name)) {
+            const properties = componentProps(node) ?? {};
+            // HAST/Astro require a boolean here; an empty JSX string is falsy and
+            // would silently remove playback controls from published MDX pages.
+            if (Object.hasOwn(properties, "controls"))
+                properties.controls = true;
+            const children = node.children.map(child => isContentElement(child) && child.name && /^[a-z]/.test(child.name) ? lower(child) : visit(child));
+            return { type: "lettercampElement", data: { hName: node.name, hProperties: properties }, children };
+        }
+        return visit(node);
+    };
+    tree.children = tree.children.map(visit);
+}

package/dist/dev.js

@@ -1,4 +1,5 @@
 import { codeBlocks } from "./code-highlight.js";
+import { contentComponents } from "./content-component-syntax.js";
 import { componentBlocks } from "./component-blocks.js";
 import { rm } from 'node:fs/promises';
 import path from 'node:path';
@@ -49,10 +50,16 @@ export async function startDev(directory, options) {
             root: workspace,
             logLevel: 'warn',
             configFile: false,
+            base: options.base ?? '/',
             publicDir: path.join(workspace, '.lettercamp-no-public'),
             output: 'static',
-            integrations: [mdx(), react()],
-            markdown: { syntaxHighlight: false, processor: unified({ remarkPlugins: [readingTime, codeBlocks, componentBlocks, [mediaDimensions, { root: contentRoot }]], rehypePlugins: [[mediaDimensions, { root: contentRoot }]] }) },
+            integrations: [mdx(), react(), ...(options.middleware ? [{
+                        name: 'lettercamp-editor-preview',
+                        hooks: { 'astro:config:setup': ({ addMiddleware }) => {
+                                addMiddleware({ entrypoint: options.middleware, order: 'post' });
+                            } },
+                    }] : [])],
+            markdown: { syntaxHighlight: false, processor: unified({ remarkPlugins: [contentComponents, readingTime, codeBlocks, componentBlocks, [mediaDimensions, { root: contentRoot }]], rehypePlugins: [[mediaDimensions, { root: contentRoot }]] }) },
             devToolbar: { enabled: false },
             server: { port, host: options.host, open: options.open },
             vite: {
@@ -63,6 +70,14 @@ export async function startDev(directory, options) {
                         name: 'lettercamp-content',
                         configureServer(vite) {
                             closeVite = () => vite.close();
+                            if (options.middleware)
+                                vite.middlewares.use((request, _response, next) => {
+                                    // Astro removes query parameters from prerendered page requests.
+                                    // Preserve the original URL through its dev-adapter locals channel.
+                                    const key = Symbol.for('astro.locals');
+                                    Reflect.set(request, key, { ...Reflect.get(request, key), lettercampRequestUrl: request.url });
+                                    next();
+                                });
                             // Lettercamp has no Socket.IO endpoint. Stray polling clients should
                             // receive a 404 without repeatedly triggering Astro's page warnings.
                             vite.middlewares.use((request, response, next) => {
@@ -96,7 +111,8 @@ export async function startDev(directory, options) {
                             vite.watcher.on('add', updateLayout).on('unlink', updateLayout);
                         },
                     }],
-                server: { strictPort: false, fs: { allow: [workspace, contentRoot, modules, reactIntegrationDirectory] } },
+                server: { strictPort: options.strictPort ?? false, fs: { allow: [workspace, contentRoot, modules, reactIntegrationDirectory,
+                            ...(options.middleware ? [path.dirname(options.middleware)] : [])] } },
             },
         });
         process.once('SIGINT', stop);

package/dist/hosting.js

@@ -55,13 +55,12 @@ export async function selectHostingSite(token, allowCreate) {
             throw error;
         }
     }
-    const { sites: all } = await request(token, 'sites');
-    const sites = all.filter(site => site.publishingTarget === 'cloud');
+    const { sites } = await request(token, 'sites');
     const existing = binding && sites.find(site => site.id === binding?.siteId);
     if (existing && binding)
         return { site: existing, binding };
     if (binding)
-        console.error('The saved site is unavailable for cloud publishing. Choose another site for this folder.');
+        console.error('The saved site is unavailable. Choose another site for this folder.');
     if (!allowCreate && !sites.length)
         throw new Error('Run lettercamp deploy first to create a site.');
     const choices = [...(allowCreate ? ['Create a new site'] : []), ...sites.map(site => `${site.name} (${site.slug}.lettercamp.site)`)];

package/dist/media-dimensions.js

@@ -105,9 +105,10 @@ export function mediaDimensions(options) {
                 });
             const jsx = ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type) && node.name === 'img';
             const markdown = node.type === 'image' || node.type === 'imageReference';
-            if (jsx || markdown || node.type === 'element' && node.tagName === 'img') {
+            const component = node.type === 'lettercampElement' && node.data?.hName === 'img';
+            if (jsx || markdown || component || node.type === 'element' && node.tagName === 'img') {
                 const properties = jsx ? Object.fromEntries((node.attributes ?? []).filter(a => a.type === 'mdxJsxAttribute').map(a => [a.name, a.value]))
-                    : markdown ? node.data?.hProperties ?? {} : node.properties ?? {};
+                    : markdown || component ? node.data?.hProperties ?? {} : node.properties ?? {};
                 const src = markdown ? node.url ?? definitions.get(node.identifier?.toLowerCase() ?? '') : properties.src;
                 const width = positive(properties.width), height = positive(properties.height);
                 // Leave dynamic dimensions and explicit sizing under the author's control.
@@ -126,7 +127,7 @@ export function mediaDimensions(options) {
                             for (const [name, value] of Object.entries(attrs))
                                 node.attributes.push({ type: 'mdxJsxAttribute', name, value: String(value) });
                         }
-                        else if (markdown)
+                        else if (markdown || component)
                             node.data = { ...node.data, hProperties: { ...properties, ...attrs } };
                         else
                             node.properties = { ...properties, ...attrs };

package/dist/publication-links.js

@@ -9,6 +9,13 @@ export function publicationLinks(options) {
         function visit(node) {
             if (['link', 'image', 'definition'].includes(node.type) && node.url)
                 node.url = prefix(node.url);
+            if (node.type === 'lettercampElement') {
+                const properties = node.data?.hProperties;
+                for (const name of ['href', 'src', 'poster']) {
+                    if (properties && typeof properties[name] === 'string')
+                        properties[name] = prefix(properties[name]);
+                }
+            }
             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')

package/dist/text-styles.js

@@ -0,0 +1,23 @@
+// Generated from lettercamp/lib/text-styles.ts.
+// The same small CSS vocabulary is used by the editor and the safe preview.
+// Never pass arbitrary author CSS through the preview sanitizer.
+export function textStyles(style) {
+    const result = {};
+    if (typeof style !== "string")
+        return result;
+    for (const declaration of style.split(";")) {
+        const [property, ...parts] = declaration.split(":");
+        const name = property.trim().toLowerCase(), value = parts.join(":").trim().toLowerCase();
+        if (name === "text-align" && /^(left|center|right)$/.test(value))
+            result[name] = value;
+        if (["color", "background-color"].includes(name) &&
+            (/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/.test(value) ||
+                /^(?:rgb|hsl)a?\([\d.% ,/+-]+\)$/.test(value) ||
+                /^(?:black|white|red|green|blue|yellow|orange|purple|pink|gray|grey|transparent|inherit|currentcolor)$/.test(value)))
+            result[name] = value;
+    }
+    return result;
+}
+export function textStyleString(style) {
+    return Object.entries(textStyles(style)).map(([property, value]) => `${property}: ${value}`).join("; ");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lettercamp/cli",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "The repository for the Lettercamp CLI",
   "keywords": [
     "lettercamp",
@@ -49,6 +49,12 @@
     "hast-util-from-html": "^2.0.3",
     "hast-util-to-html": "^9.0.5",
     "highlight.js": "^11.12.0",
+    "mdast-util-from-markdown": "^2.1.0",
+    "mdast-util-gfm": "^3.1.0",
+    "mdast-util-mdx": "^3.0.0",
+    "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-mdxjs": "^3.0.0",
+    "micromark-util-types": "^2.0.3",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "react-icons": "^5.7.0",

package/renderer/src/components/AuthorByline.astro

@@ -16,10 +16,17 @@ const showDate = date?.label;
       </span>)}
     </span>
     <span class="author-names">
+      <span class="author-names-desktop">
       {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>
+        {authors.slice(0, 2).map(author => author.name).join(', ')}{' '}
+        <button type="button" class="author-more" aria-haspopup="dialog" data-authors={JSON.stringify(authors)}>+ {authors.length - 2} more</button>
+        <span class="sr-only">{': ' + authors.slice(2).map(author => author.name).join(', ')}</span>
       </>}
+      </span>
+      <span class="author-names-mobile">
+        <span class="author-name" title={authors[0].name}>{authors[0].name}</span>
+        {authors.length > 1 && <button type="button" class="author-more" aria-haspopup="dialog" data-authors={JSON.stringify(authors)}>+ {authors.length - 1} more {authors.length === 2 ? 'author' : 'authors'}</button>}
+      </span>
     </span>
   </span>}
   {showReadingTime && <span class="reading-time">{post.readingMinutes} min read</span>}

package/renderer/src/components/Header.astro

@@ -5,7 +5,7 @@ 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 primaryColors = buttonColors(primary?.color, site.design?.accentColor);
 const primaryStyle = { '--button-color': primaryColors.background, '--button-text': primaryColors.text };
 const logo = site.logo;
 ---

package/renderer/src/components/SocialLink.astro

@@ -18,6 +18,6 @@ const hasIcon = icons[platform] || ['instagram', 'website', 'hacker-news'].inclu
     {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" /></>}
+    {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(--site-background, #fff)" stroke-width="1.8" /></>}
   </svg> : <span>{label}</span>}
 </a>

package/renderer/src/layouts/SiteLayout.astro

@@ -13,6 +13,8 @@ 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 { keyTakeawaysStyles } from '../lib/key-takeaways';
+import { siteColors } from '../lib/site-colors';
 import { imageWidthStyles } from '../lib/image-widths';
 import { googleAnalyticsScript } from '../lib/analytics';
 import Header from '../components/HeaderSlot.astro';
@@ -21,19 +23,20 @@ import Footer from '../components/FooterSlot.astro';
 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 fonts = fontResources(typography, article ? 700 : 500);
 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 colors = siteColors(site.design);
 const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
 ---
 
 <!doctype html>
-<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 }}>
+<html data-base-path={basePath} data-site-accent={colors['--site-accent'] !== 'inherit' ? '' : undefined} lang={meta.language} style={{ ...colors, '--image-radius': readImageRadius(site.design?.imageRadiusPercent) / 100, '--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" />
+    {fonts.preloads.map(href => <link data-lettercamp-font-preload rel="preload" href={href} as="font" type="font/woff2" crossorigin />)}
     {fonts.googleUrl && <>
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -44,6 +47,7 @@ const analytics = googleAnalyticsScript(site.analytics?.googleAnalyticsId);
     <style is:inline set:html={blockWidthStyles} />
     <style is:inline set:html={codeBlockStyles} />
     <style is:inline set:html={tableStyles} />
+    <style is:inline set:html={keyTakeawaysStyles} />
     <title>{meta.documentTitle}</title>
     <meta name="description" content={meta.description} />
     {meta.keywords && <meta name="keywords" content={meta.keywords} />}

package/renderer/src/lib/block-widths.ts

@@ -26,10 +26,4 @@ ${blocks}${full} {
   max-width: none; margin-inline: calc((100% - var(--block-display-width)) / 2);
   margin-left: calc((100% - var(--block-display-width)) / 2 - var(--block-column-offset, 0px));
 }
-/* The two-column TOC layout shifts the reading column 106px from center. */
-@media (min-width: 761px) and (max-width: 1199px) {
-  .publication-post[data-post-hero="split"][data-post-toc="visible"] .article-body-with-toc .prose {
-    --block-column-offset: 106px;
-  }
-}
 `;

package/renderer/src/lib/button.js

@@ -1,10 +1,12 @@
-// Keep the color fallback and contrast calculation aligned with the editor preview.
-export function buttonColors(value) {
-  const background = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value) ? value : '#111111';
-  const channels = [1, 3, 5].map(offset => {
-    const channel = parseInt(background.slice(offset, offset + 2), 16) / 255;
-    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
-  });
-  const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
-  return { background, text: luminance > 0.179 ? '#000000' : '#ffffff' };
+// Generated from lettercamp/lib/button-colors.ts.
+// Shared by settings, the preview bridge, and the published renderer.
+// Keep self-contained so the preview can embed this function.
+export function buttonColors(value, accent) {
+    const background = [value, accent].find((color) => typeof color === "string" && /^#[0-9a-f]{6}$/i.test(color)) ?? "#111111";
+    const channels = [1, 3, 5].map(offset => {
+        const channel = parseInt(background.slice(offset, offset + 2), 16) / 255;
+        return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+    return { background, text: (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "#000000" : "#ffffff" };
 }