@lettercamp/cli 0.1.10 → 0.1.12

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';
@@ -7,6 +8,7 @@ import mdx from '@astrojs/mdx';
 import { unified } from '@astrojs/markdown-remark';
 import { prepareWorkspace } from './workspace.js';
 import { readingTime } from './reading-time.js';
+import { searchContent } from './search-content.js';
 import { mediaDimensions } from './media-dimensions.js';
 import { reactViteConfig } from './react.js';
 export async function buildSite(directory, options) {
@@ -38,7 +40,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, searchContent, 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,244 @@
+import { readCodeSettings, writeCodeSettings } from "./code-block.js";
+import { textStyleString } from "./text-styles.js";
+export const contentComponentNames = ["KeyTakeaways", "FAQ", "FAQItem", "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 "FAQ": {
+            if (inline || !allowed(props, ["width"]))
+                return null;
+            const items = meaningful(node.children.flatMap(child => child.type === "paragraph" ? child.children : [child]));
+            const details = [];
+            for (const item of items) {
+                if (!isContentElement(item) || item.name !== "FAQItem")
+                    return null;
+                const itemProps = componentProps(item);
+                if (!itemProps || !allowed(itemProps, ["question"]) || typeof itemProps.question !== "string")
+                    return null;
+                details.push(html("details", {}, [
+                    html("summary", {}, [{ type: "paragraph", children: [{ type: "text", value: itemProps.question }] }]),
+                    html("div", { "data-faq-answer": "true" }, item.children),
+                ]));
+            }
+            return html("div", { "data-lettercamp-faq": "true", "data-block-width": widthOf(props.width) }, details);
+        }
+        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);
+    // Markdown needs a paragraph context to escape question text when exporting
+    // legacy HTML. A native summary only accepts phrasing content on the page.
+    const childrenOf = (node) => isContentElement(node) && node.name === "summary"
+        ? node.children.flatMap(child => child.type === "paragraph" ? child.children : [child]) : node.children;
+    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 = childrenOf(node).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 = childrenOf(node).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';
@@ -9,6 +10,7 @@ import { unified } from '@astrojs/markdown-remark';
 import { prepareWorkspace } from './workspace.js';
 import { selectDefaultPort } from './ports.js';
 import { readingTime } from './reading-time.js';
+import { searchContent } from './search-content.js';
 import { mediaDimensions } from './media-dimensions.js';
 import { reactIntegrationDirectory, reactViteConfig } from './react.js';
 import { writeCustomLayout } from './custom-layout.js';
@@ -49,10 +51,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, searchContent, codeBlocks, componentBlocks, [mediaDimensions, { root: contentRoot }]], rehypePlugins: [[mediaDimensions, { root: contentRoot }]] }) },
             devToolbar: { enabled: false },
             server: { port, host: options.host, open: options.open },
             vite: {
@@ -63,6 +71,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 +112,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/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/search-content.js

@@ -0,0 +1,24 @@
+import { fromHtml } from 'hast-util-from-html';
+// Extract authored text during compilation, never imports, JSX props, or
+// expressions. Dynamic component output is not part of the static index.
+export function searchContent() {
+    return (tree, file) => {
+        const parts = [];
+        function visit(node) {
+            if (['script', 'style', 'template'].includes((node.tagName ?? node.name ?? '').toLowerCase()))
+                return;
+            if (['text', 'inlineCode', 'code'].includes(node.type))
+                parts.push(node.value ?? '');
+            if (node.type === 'image')
+                parts.push(node.alt ?? '');
+            if (node.type === 'html')
+                visit(fromHtml(node.value ?? '', { fragment: true }));
+            for (const child of node.children ?? [])
+                visit(child);
+        }
+        visit(tree);
+        const astro = file.data.astro;
+        if (astro?.frontmatter)
+            astro.frontmatter.searchText = parts.join(' ').replace(/\s+/g, ' ').trim();
+    };
+}

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.10",
+  "version": "0.1.12",
   "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/BlogHome.astro

@@ -1,6 +1,7 @@
 ---
 import { sitePath } from '../lib/urls.js';
 import PostCard from './PostCard.astro';
+import PostSearch from './PostSearch.astro';
 import { getPosts, getCategories } from '../lib/posts.js';
 import { readHomeWidthPx } from '../lib/home-layout';
 const { site, category = '' } = Astro.props;
@@ -16,10 +17,13 @@ const featuredLimit = 9;
     <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>}
+  <div class="blog-toolbar">
+    {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>}
+    <PostSearch posts={allPosts} />
+  </div>
   <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>

package/renderer/src/components/Footer.astro

@@ -15,7 +15,7 @@ const socials = (site.footer?.socials ?? []).filter(({ href }) => {
   <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="" />
+        {logo ? <img src={logo} width="24" height="24" alt="" /> : <span>{site.name}</span>}
       </a>
     </div>
     {columns.length > 0 && <div class="footer-columns">

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;
 ---
@@ -14,7 +14,7 @@ const logo = site.logo;
       <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="" />
+        {logo && <img src={logo} width="30" height="30" alt="" />}
         <span>{site.name}</span>
       </a>
       {(navLinks.length > 0 || primary) && <div class="header-actions">