npm - @thjodann/wk - Versions diffs - 1.0.3 → 1.0.4 - Mend

@thjodann/wk 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/core/site.js CHANGED Viewed

@@ -187,7 +187,7 @@ function buildSiteFiles(root, options = {}) {
             })
         });
     }
-    files.push({ fileName: "favicon.svg", content: faviconSvg(model) }, { fileName: "assets/wikiwiki.css", content: siteCss() }, { fileName: "assets/project-theme.css", content: projectThemeCss(model.options.theme) }, { fileName: "assets/search-index.js", content: searchIndexJs(model) }, { fileName: "assets/wikiwiki.js", content: siteJs() }, { fileName: ".nojekyll", content: "" }, { fileName: "site-manifest.json", content: `${JSON.stringify(siteManifest(model), null, 2)}\n` });
+    files.push({ fileName: "favicon.svg", content: faviconSvg(model) }, { fileName: "assets/wikiwiki.css", content: siteCss() }, { fileName: "assets/project-theme.css", content: projectThemeCss(model.options.theme, model.assets.fonts) }, { fileName: "assets/search-index.js", content: searchIndexJs(model) }, { fileName: "assets/wikiwiki.js", content: siteJs() }, { fileName: ".nojekyll", content: "" }, { fileName: "site-manifest.json", content: `${JSON.stringify(siteManifest(model), null, 2)}\n` }, ...model.assets.files);
     return files;
 }
 function renderSite(root, options = {}) {
@@ -198,7 +198,12 @@ function renderSite(root, options = {}) {
     return files.map((file) => {
         const outputFile = path_1.default.join(outputPath, file.fileName);
         fs_1.default.mkdirSync(path_1.default.dirname(outputFile), { recursive: true });
-        fs_1.default.writeFileSync(outputFile, file.content, "utf8");
+        if (typeof file.content === "string") {
+            fs_1.default.writeFileSync(outputFile, file.content, "utf8");
+        }
+        else {
+            fs_1.default.writeFileSync(outputFile, file.content);
+        }
         return outputFile;
     });
 }
@@ -223,12 +228,14 @@ function createSiteModel(root, records, options) {
     const articleHrefByLookup = articleLookupMap(audienceRecords.article);
     const counts = Object.fromEntries(schemas_1.recordTypes.map((type) => [type, audienceRecords[type].length]));
     const repoName = options.theme.project_name?.trim() || path_1.default.basename(root);
+    const assets = resolveSiteAssets(root, options.theme);
     return {
         root,
         repoName,
         siteTitle: `${repoName} Wiki`,
         siteDescription: options.theme.project_description?.trim() || "A project wiki generated from durable repo knowledge.",
         projectInitials: initialsForName(repoName),
+        assets,
         records: audienceRecords,
         flatRecords,
         sourceRecords,
@@ -263,6 +270,10 @@ function renderLayout(options) {
         : `${options.title} - ${options.model.siteTitle}`;
     const defaultColorScheme = defaultThemeColorScheme(options.model.options.theme);
     const defaultThemeAttribute = defaultColorScheme === "auto" ? "" : ` data-theme="${defaultColorScheme}"`;
+    const homeBrandAsset = options.active === "home" ? homeBrandAssetHtml(options.model, options.fileName) : "";
+    const homeBrandAssetMarkup = homeBrandAsset ? `        ${homeBrandAsset}\n` : "";
+    const homeHasWordmark = options.active === "home" && options.model.assets.wordmark !== undefined;
+    const h1Class = homeHasWordmark ? ` class="visually-hidden"` : "";
     return `${exports.siteGeneratedNotice}
 <!doctype html>
 <html lang="en" data-default-theme="${defaultColorScheme}"${defaultThemeAttribute}>
@@ -272,7 +283,7 @@ function renderLayout(options) {
   <meta name="generator" content="Wikiwiki">
   <title>${escapeHtml(htmlTitle)}</title>
   <script>${themeBootScript(defaultColorScheme)}</script>
-  <link rel="icon" href="${prefix}favicon.svg" type="image/svg+xml">
+  ${faviconLink(options.model, options.fileName, prefix)}
   <link rel="stylesheet" href="${prefix}assets/wikiwiki.css">
   <link rel="stylesheet" href="${prefix}assets/project-theme.css">
   <script src="${prefix}assets/search-index.js" defer></script>
@@ -284,7 +295,7 @@ function renderLayout(options) {
     <aside class="sidebar" aria-label="Wiki navigation">
       <div class="sidebar-top">
         <a class="brand" href="${hrefFrom(options.fileName, "index.html")}" aria-label="Wiki home">
-          <span class="brand-mark">${escapeHtml(options.model.projectInitials)}</span>
+          ${brandMarkHtml(options.model, options.fileName)}
           <span>
             <strong>${escapeHtml(options.model.repoName)}</strong>
             <small>Project wiki</small>
@@ -302,8 +313,8 @@ function renderLayout(options) {
       </div>
     </aside>
     <main id="content" class="content">
-      <header class="page-header">
-        <h1>${escapeHtml(options.title)}</h1>
+      <header class="page-header${homeBrandAsset ? " has-brand-asset" : ""}">
+${homeBrandAssetMarkup}        <h1${h1Class}>${escapeHtml(options.title)}</h1>
         <p>${escapeHtml(options.description)}</p>
       </header>
       ${options.body}
@@ -324,6 +335,41 @@ function themeChoiceButton(mode, label, title, defaultColorScheme) {
     const pressed = mode === defaultColorScheme ? "true" : "false";
     return `<button type="button" data-theme-choice="${mode}" aria-pressed="${pressed}" title="${escapeAttribute(title)}">${escapeHtml(label)}</button>`;
 }
+function faviconLink(model, currentFile, fallbackPrefix) {
+    const asset = model.assets.favicon;
+    if (!asset) {
+        return `<link rel="icon" href="${fallbackPrefix}favicon.svg" type="image/svg+xml">`;
+    }
+    const type = asset.mimeType ? ` type="${escapeAttribute(asset.mimeType)}"` : "";
+    const darkHref = hrefFrom(currentFile, asset.outputFileName);
+    const lightHref = model.assets.faviconLight ? hrefFrom(currentFile, model.assets.faviconLight.outputFileName) : darkHref;
+    const lightType = model.assets.faviconLight?.mimeType ?? asset.mimeType;
+    const faviconData = [
+        `data-wikiwiki-favicon`,
+        `data-favicon-dark="${darkHref}"`,
+        `data-favicon-light="${lightHref}"`,
+        ...(asset.mimeType ? [`data-favicon-dark-type="${escapeAttribute(asset.mimeType)}"`] : []),
+        ...(lightType ? [`data-favicon-light-type="${escapeAttribute(lightType)}"`] : [])
+    ].join(" ");
+    return `<link rel="icon" href="${darkHref}"${type} ${faviconData}>`;
+}
+function brandMarkHtml(model, currentFile) {
+    const asset = model.assets.sidebarMark;
+    if (!asset) {
+        return `<span class="brand-mark">${escapeHtml(model.projectInitials)}</span>`;
+    }
+    return `<span class="brand-mark has-image"><img src="${hrefFrom(currentFile, asset.outputFileName)}" alt="" aria-hidden="true"></span>`;
+}
+function homeBrandAssetHtml(model, currentFile) {
+    const asset = model.assets.wordmark ?? model.assets.logo;
+    if (!asset) {
+        return "";
+    }
+    const label = asset.kind === "wordmark" ? "wordmark" : "logo";
+    return `<div class="home-brand-asset ${asset.kind}">
+          <img src="${hrefFrom(currentFile, asset.outputFileName)}" alt="${escapeAttribute(`${model.repoName} ${label}`)}">
+        </div>`;
+}
 function renderNav(model, currentFile, active) {
     const categoryLinks = model.visibleCategories
         .map((category) => navLink(currentFile, category.fileName, category.navLabel, active === category.type, model.counts[category.type]))
@@ -822,22 +868,94 @@ function recordCard(record, currentFile, _model) {
 </article>`;
 }
 function formatText(text, context) {
-    const trimmed = text.trim();
+    const trimmed = text.replace(/\r\n/g, "\n").trim();
     if (!trimmed) {
         return "<p>Not recorded.</p>";
     }
-    const blocks = trimmed.split(/\n{2,}/);
-    return blocks.map((block) => formatBlock(block, context)).join("\n");
+    return formatMarkdownBlocks(trimmed.split("\n"), context);
 }
-function formatBlock(block, context) {
-    const lines = block.split(/\r?\n/);
-    if (lines.every((line) => line.trim().startsWith("- "))) {
-        const items = lines
-            .map((line) => `<li>${formatInline(line.trim().slice(2), context)}</li>`)
-            .join("\n");
-        return `<ul>${items}</ul>`;
+function formatMarkdownBlocks(lines, context) {
+    const blocks = [];
+    let index = 0;
+    while (index < lines.length) {
+        const line = lines[index] ?? "";
+        const trimmed = line.trim();
+        if (!trimmed) {
+            index += 1;
+            continue;
+        }
+        const fence = /^```([A-Za-z0-9_-]+)?\s*$/.exec(trimmed);
+        if (fence) {
+            const codeLines = [];
+            index += 1;
+            while (index < lines.length && !/^```\s*$/.test((lines[index] ?? "").trim())) {
+                codeLines.push(lines[index] ?? "");
+                index += 1;
+            }
+            if (index < lines.length) {
+                index += 1;
+            }
+            const languageClass = fence[1] ? ` class="language-${escapeAttribute(fence[1])}"` : "";
+            blocks.push(`<pre><code${languageClass}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+            continue;
+        }
+        const heading = /^(#{1,6})\s+(.+?)\s*#*\s*$/.exec(trimmed);
+        if (heading) {
+            const level = heading[1].length;
+            blocks.push(`<h${level}>${formatInline(heading[2], context)}</h${level}>`);
+            index += 1;
+            continue;
+        }
+        if (/^>\s?/.test(trimmed)) {
+            const quoteLines = [];
+            while (index < lines.length && /^>\s?/.test((lines[index] ?? "").trim())) {
+                quoteLines.push((lines[index] ?? "").trim().replace(/^>\s?/, ""));
+                index += 1;
+            }
+            blocks.push(`<blockquote>${formatMarkdownBlocks(quoteLines, context)}</blockquote>`);
+            continue;
+        }
+        if (/^[-*+]\s+/.test(trimmed)) {
+            const items = [];
+            while (index < lines.length && /^[-*+]\s+/.test((lines[index] ?? "").trim())) {
+                items.push(`<li>${formatInline((lines[index] ?? "").trim().replace(/^[-*+]\s+/, ""), context)}</li>`);
+                index += 1;
+            }
+            blocks.push(`<ul>${items.join("\n")}</ul>`);
+            continue;
+        }
+        if (/^\d+[.)]\s+/.test(trimmed)) {
+            const items = [];
+            while (index < lines.length && /^\d+[.)]\s+/.test((lines[index] ?? "").trim())) {
+                items.push(`<li>${formatInline((lines[index] ?? "").trim().replace(/^\d+[.)]\s+/, ""), context)}</li>`);
+                index += 1;
+            }
+            blocks.push(`<ol>${items.join("\n")}</ol>`);
+            continue;
+        }
+        const paragraphLines = [];
+        while (index < lines.length) {
+            const paragraphLine = lines[index] ?? "";
+            const paragraphTrimmed = paragraphLine.trim();
+            if (!paragraphTrimmed) {
+                break;
+            }
+            if (paragraphLines.length > 0 && isMarkdownBlockStart(paragraphTrimmed)) {
+                break;
+            }
+            paragraphLines.push(paragraphTrimmed);
+            index += 1;
+        }
+        blocks.push(`<p>${formatInline(paragraphLines.join(" "), context)}</p>`);
     }
-    return `<p>${formatInline(lines.join(" "), context)}</p>`;
+    return blocks.join("\n");
+}
+function isMarkdownBlockStart(trimmedLine) {
+    return (/^```/.test(trimmedLine) ||
+        /^(#{1,6})\s+/.test(trimmedLine) ||
+        /^>\s?/.test(trimmedLine) ||
+        /^[-*+]\s+/.test(trimmedLine) ||
+        /^\d+[.)]\s+/.test(trimmedLine));
 }
 function formatInline(text, context) {
     const parts = [];
@@ -855,7 +973,8 @@ function formatInline(text, context) {
             if (linkMatch) {
                 const label = linkMatch[1];
                 const target = linkMatch[2];
-                parts.push(`<a href="${escapeAttribute(normalizeContentHref(target, context))}">${escapeHtml(label)}</a>`);
+                const href = normalizeContentHref(target, context);
+                parts.push(href ? `<a href="${escapeAttribute(href)}">${escapeHtml(label)}</a>` : escapeHtml(label));
             }
         }
         lastIndex = match.index + token.length;
@@ -891,9 +1010,13 @@ function sourceFileLink(file, context) {
 }
 function normalizeContentHref(target, context) {
     const trimmed = target.trim();
-    if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) || trimmed.startsWith("#")) {
+    if (trimmed.startsWith("#")) {
         return trimmed;
     }
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(trimmed)?.[1].toLowerCase();
+    if (scheme) {
+        return ["http", "https", "mailto"].includes(scheme) ? trimmed : undefined;
+    }
     const recordHrefForTarget = context.hrefById.get(trimmed);
     if (recordHrefForTarget) {
         return hrefFrom(context.currentFile, recordHrefForTarget);
@@ -978,6 +1101,147 @@ function isDirectoryPath(root, file) {
         return false;
     }
 }
+function resolveSiteAssets(root, theme) {
+    const usedOutputFileNames = new Set();
+    const files = [];
+    const logo = resolveImageAsset(root, "logo", theme.logo_path, usedOutputFileNames, files);
+    const wordmark = resolveImageAsset(root, "wordmark", theme.wordmark_path, usedOutputFileNames, files);
+    const favicon = resolveImageAsset(root, "favicon", theme.favicon_path, usedOutputFileNames, files);
+    const faviconLight = favicon ? resolveLightFaviconAsset(favicon, usedOutputFileNames, files) : undefined;
+    const fonts = resolveFontAssets(root, theme.fonts ?? [], usedOutputFileNames, files);
+    return {
+        ...(logo ? { logo } : {}),
+        ...(wordmark ? { wordmark } : {}),
+        ...(favicon ? { favicon } : {}),
+        ...(faviconLight ? { faviconLight } : {}),
+        sidebarMark: favicon ?? logo,
+        fonts,
+        files
+    };
+}
+function resolveLightFaviconAsset(favicon, usedOutputFileNames, files) {
+    const mimeType = favicon.mimeType;
+    if (!mimeType?.startsWith("image/")) {
+        return undefined;
+    }
+    const source = fs_1.default.readFileSync(favicon.sourcePath);
+    const outputFileName = uniqueOutputFileName("assets/favicon-light.svg", usedOutputFileNames);
+    files.push({
+        fileName: outputFileName,
+        content: lightModeFaviconSvg(`data:${mimeType};base64,${source.toString("base64")}`)
+    });
+    return {
+        kind: "favicon",
+        sourcePath: favicon.sourcePath,
+        outputFileName,
+        mimeType: "image/svg+xml"
+    };
+}
+function resolveImageAsset(root, kind, configuredPath, usedOutputFileNames, files) {
+    const sourcePath = resolveThemeAssetPath(root, configuredPath);
+    if (!sourcePath) {
+        return undefined;
+    }
+    const extension = assetExtension(sourcePath);
+    if (!extension || !["svg", "png", "jpg", "jpeg", "webp", "ico"].includes(extension)) {
+        return undefined;
+    }
+    const outputFileName = uniqueOutputFileName(`assets/${kind}.${extension}`, usedOutputFileNames);
+    files.push({ fileName: outputFileName, content: fs_1.default.readFileSync(sourcePath) });
+    return {
+        kind,
+        sourcePath,
+        outputFileName,
+        mimeType: mimeTypeForExtension(extension)
+    };
+}
+function resolveFontAssets(root, fonts, usedOutputFileNames, files) {
+    const resolved = [];
+    for (const font of fonts) {
+        const sourcePath = resolveThemeAssetPath(root, font.path);
+        if (!sourcePath || !font.family.trim()) {
+            continue;
+        }
+        const extension = assetExtension(sourcePath);
+        if (!extension || !["woff2", "woff", "otf", "ttf"].includes(extension)) {
+            continue;
+        }
+        const weight = font.weight?.trim() || "400";
+        const style = font.style?.trim() || "normal";
+        const baseName = safeFileName(`${font.family}-${weight}-${style}`).toLowerCase();
+        const outputFileName = uniqueOutputFileName(`assets/fonts/${baseName}.${extension}`, usedOutputFileNames);
+        files.push({ fileName: outputFileName, content: fs_1.default.readFileSync(sourcePath) });
+        resolved.push({
+            ...font,
+            weight,
+            style,
+            display: font.display?.trim() || "swap",
+            sourcePath,
+            outputFileName,
+            cssUrl: `./fonts/${path_1.default.posix.basename(outputFileName)}`,
+            format: fontFormatForExtension(extension)
+        });
+    }
+    return resolved;
+}
+function resolveThemeAssetPath(root, configuredPath) {
+    const normalized = toPosixPath(configuredPath?.trim() ?? "").replace(/^\.\//, "");
+    if (!normalized || path_1.default.isAbsolute(normalized) || normalized.startsWith("../") || normalized.includes("://") || normalized.startsWith("#")) {
+        return undefined;
+    }
+    const rootPath = path_1.default.resolve(root);
+    const fullPath = path_1.default.resolve(rootPath, normalized);
+    if (fullPath !== rootPath && !fullPath.startsWith(`${rootPath}${path_1.default.sep}`)) {
+        return undefined;
+    }
+    try {
+        return fs_1.default.statSync(fullPath).isFile() ? fullPath : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function assetExtension(file) {
+    const extension = path_1.default.extname(file).replace(/^\./, "").toLowerCase();
+    return extension || undefined;
+}
+function uniqueOutputFileName(fileName, used) {
+    const normalized = toPosixPath(fileName);
+    if (!used.has(normalized)) {
+        used.add(normalized);
+        return normalized;
+    }
+    const directory = path_1.default.posix.dirname(normalized);
+    const extension = path_1.default.posix.extname(normalized);
+    const base = path_1.default.posix.basename(normalized, extension);
+    let index = 2;
+    while (used.has(`${directory}/${base}-${index}${extension}`)) {
+        index += 1;
+    }
+    const result = `${directory}/${base}-${index}${extension}`;
+    used.add(result);
+    return result;
+}
+function mimeTypeForExtension(extension) {
+    const types = {
+        svg: "image/svg+xml",
+        png: "image/png",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        webp: "image/webp",
+        ico: "image/x-icon"
+    };
+    return types[extension];
+}
+function fontFormatForExtension(extension) {
+    const formats = {
+        woff2: "woff2",
+        woff: "woff",
+        otf: "opentype",
+        ttf: "truetype"
+    };
+    return formats[extension];
+}
 function searchIndexJs(model) {
     const articleEntries = model.records.article.map((article) => ({
         type: "article",
@@ -1047,6 +1311,7 @@ function siteManifest(model) {
         audience: model.audience,
         project_name: model.repoName,
         theme_file: ".wikiwiki/site-theme.json",
+        ...(siteManifestAssets(model) ? { assets: siteManifestAssets(model) } : {}),
         pages: sitePages(model),
         ...(integrations ? { integrations } : {}),
         articles: model.records.article.map((article) => ({
@@ -1063,6 +1328,27 @@ function siteManifest(model) {
         }))
     };
 }
+function siteManifestAssets(model) {
+    if (!model.assets.logo && !model.assets.wordmark && !model.assets.favicon && model.assets.fonts.length === 0) {
+        return undefined;
+    }
+    return {
+        ...(model.assets.logo ? { logo: model.assets.logo.outputFileName } : {}),
+        ...(model.assets.wordmark ? { wordmark: model.assets.wordmark.outputFileName } : {}),
+        ...(model.assets.favicon ? { favicon: model.assets.favicon.outputFileName } : {}),
+        ...(model.assets.faviconLight ? { favicon_light: model.assets.faviconLight.outputFileName } : {}),
+        ...(model.assets.fonts.length > 0
+            ? {
+                fonts: model.assets.fonts.map((font) => ({
+                    family: font.family,
+                    weight: font.weight,
+                    style: font.style,
+                    url: font.outputFileName
+                }))
+            }
+            : {})
+    };
+}
 function siteManifestIntegrations(model) {
     const beads = model.integrations.beads;
     if (!beads || model.audience === "user") {
@@ -1446,10 +1732,14 @@ function escapeHtml(value) {
 function escapeAttribute(value) {
     return escapeHtml(value);
 }
-function projectThemeCss(theme) {
+function projectThemeCss(theme, fonts = []) {
     const resolved = resolveThemePalettes(theme);
+    const fontFaces = fontFaceCss(fonts);
     if (!resolved.hasTheme) {
-        return "/* Optional project theme. Add .wikiwiki/site-theme.json to override CSS custom properties. */\n";
+        const fontFamily = fonts[0]?.family
+            ? `\n:root {\n  --font-family: ${cssString(fonts[0].family)}, Inter, ui-sans-serif, system-ui, sans-serif;\n}\n`
+            : "";
+        return `/* Optional project theme. Add .wikiwiki/site-theme.json to override CSS custom properties. */\n${fontFaces}${fontFamily}`;
     }
     const light = themeWithContrastGuardrails(resolved.light, "light");
     const dark = themeWithContrastGuardrails(resolved.dark, "dark");
@@ -1458,6 +1748,7 @@ function projectThemeCss(theme) {
         ? `\n${comments.map((comment) => `/* ${comment} */`).join("\n")}`
         : "";
     return `/* Generated from .wikiwiki/site-theme.json. Edit the theme file, then run \`wk site\`. */${commentBlock}
+${fontFaces}
 ${themeCssBlock(":root,\n:root[data-theme=\"light\"]", light.theme, "light")}
 @media (prefers-color-scheme: dark) {
@@ -1467,6 +1758,21 @@ ${themeCssBlock(":root:not([data-theme=\"light\"])", dark.theme, "dark", "  ")}
 ${themeCssBlock(":root[data-theme=\"dark\"]", dark.theme, "dark")}
 `;
 }
+function fontFaceCss(fonts) {
+    if (fonts.length === 0) {
+        return "";
+    }
+    return `${fonts.map((font) => {
+        const format = font.format ? ` format("${font.format}")` : "";
+        return `@font-face {
+  font-family: ${cssString(font.family)};
+  src: url("${cssUrl(font.cssUrl)}")${format};
+  font-weight: ${cssValue(font.weight ?? "400")};
+  font-style: ${cssValue(font.style ?? "normal")};
+  font-display: ${cssValue(font.display ?? "swap")};
+}`;
+    }).join("\n\n")}\n\n`;
+}
 function resolveThemePalettes(theme) {
     const flat = themePaletteFrom(theme);
     const modeLight = theme.modes?.light ?? {};
@@ -1727,12 +2033,37 @@ function rgba(color, alpha) {
 function cssValue(value) {
     return value.replace(/[;\n\r]/g, "").trim();
 }
+function cssString(value) {
+    return `"${value.replace(/["\\\n\r]/g, "")}"`;
+}
+function cssUrl(value) {
+    return value.replace(/["\\\n\r]/g, "");
+}
 function faviconSvg(model) {
     const initials = escapeHtml(model.projectInitials.slice(0, 2));
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <rect width="64" height="64" rx="14" fill="#111827"/>
-  <circle cx="46" cy="18" r="8" fill="#38bdf8"/>
-  <text x="32" y="41" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#f8fafc">${initials}</text>
+  <path d="M15 17c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4v32c0 1.1-.9 2-2 2H19c-2.2 0-4-1.8-4-4V17Z" fill="#f8fafc"/>
+  <path d="M29 13h16c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4H33c1.1 0 2-.9 2-2V17c0-2.2-1.8-4-4-4h-2Z" fill="#38bdf8"/>
+  <path d="M22 23h6M22 30h6M39 23h5M39 30h5" stroke="#111827" stroke-width="2.4" stroke-linecap="round"/>
+  <text x="32" y="44" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="12" font-weight="800" fill="#111827">${initials}</text>
+</svg>
+`;
+}
+function lightModeFaviconSvg(dataUri) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <filter id="wikiwiki-light-brand-filter" color-interpolation-filters="sRGB">
+      <feComponentTransfer>
+        <feFuncR type="table" tableValues="1 0"/>
+        <feFuncG type="table" tableValues="1 0"/>
+        <feFuncB type="table" tableValues="1 0"/>
+      </feComponentTransfer>
+      <feColorMatrix type="hueRotate" values="180"/>
+      <feColorMatrix type="saturate" values="1.14"/>
+    </filter>
+  </defs>
+  <image href="${escapeAttribute(dataUri)}" width="512" height="512" preserveAspectRatio="xMidYMid meet" filter="url(#wikiwiki-light-brand-filter)"/>
 </svg>
 `;
 }
@@ -1759,6 +2090,7 @@ function siteCss() {
   --card-gradient: linear-gradient(180deg, #fffdf7 0%, #faf9f3 100%);
   --brand-gradient: linear-gradient(135deg, var(--accent), var(--accent-strong));
   --brand-mark-text: #fffaf0;
+  --brand-asset-filter: invert(1) hue-rotate(180deg) saturate(1.14);
   --badge-bg: #e5f0ed;
   --badge-text: var(--accent-strong);
   --tag-bg: #f8e8f1;
@@ -1791,6 +2123,7 @@ function siteCss() {
     --card-gradient: linear-gradient(180deg, #1a261f 0%, #141e18 100%);
     --brand-gradient: linear-gradient(135deg, var(--accent), #2dd4bf);
     --brand-mark-text: #101914;
+    --brand-asset-filter: none;
     --badge-bg: rgba(110, 231, 199, 0.16);
     --badge-text: #d1fae5;
     --tag-bg: rgba(240, 171, 252, 0.18);
@@ -1823,6 +2156,7 @@ function siteCss() {
   --card-gradient: linear-gradient(180deg, #1a261f 0%, #141e18 100%);
   --brand-gradient: linear-gradient(135deg, var(--accent), #2dd4bf);
   --brand-mark-text: #101914;
+  --brand-asset-filter: none;
   --badge-bg: rgba(110, 231, 199, 0.16);
   --badge-text: #d1fae5;
   --tag-bg: rgba(240, 171, 252, 0.18);
@@ -1837,6 +2171,7 @@ function siteCss() {
 :root[data-theme="light"] {
   color-scheme: light;
+  --brand-asset-filter: invert(1) hue-rotate(180deg) saturate(1.14);
 }
 * {
@@ -1935,6 +2270,21 @@ code {
   letter-spacing: 0;
 }
+.brand-mark.has-image {
+  overflow: hidden;
+  background: color-mix(in srgb, var(--panel) 86%, transparent);
+  padding: 0.22rem;
+}
+.brand-mark img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: var(--brand-asset-filter);
+  object-fit: contain;
+  transition: filter 160ms ease;
+}
 .brand strong,
 .brand small {
   display: block;
@@ -2062,12 +2412,51 @@ input[type="search"]:focus {
   margin-bottom: 1.5rem;
 }
+.home-brand-asset {
+  display: flex;
+  align-items: center;
+  min-height: 3.5rem;
+  margin-bottom: 0.65rem;
+}
+.home-brand-asset img {
+  display: block;
+  filter: var(--brand-asset-filter);
+  max-width: min(28rem, 100%);
+  max-height: 5.5rem;
+  object-fit: contain;
+  object-position: left center;
+  transition: filter 160ms ease;
+}
+.home-brand-asset.logo img {
+  width: 4.5rem;
+  height: 4.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--panel) 82%, transparent);
+  box-shadow: var(--shadow);
+  padding: 0.35rem;
+}
 .page-header h1 {
   margin: 0.15rem 0 0.45rem;
   font-size: clamp(2rem, 4vw, 3.8rem);
   line-height: 1;
 }
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  padding: 0;
+}
 .page-header p {
   max-width: 760px;
   color: var(--muted);
@@ -2322,20 +2711,77 @@ input[type="search"]:focus {
   padding: clamp(1rem, 3vw, 1.6rem);
 }
-.prose h2 {
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
   margin: 1.3rem 0 0.3rem;
+}
+.prose h1 {
+  font-size: 1.55rem;
+}
+.prose h2 {
   font-size: 1.25rem;
 }
-.prose h2:first-child {
+.prose h3 {
+  font-size: 1.1rem;
+}
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-size: 1rem;
+}
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child,
+.prose h4:first-child,
+.prose h5:first-child,
+.prose h6:first-child {
   margin-top: 0;
 }
 .prose p,
-.prose ul {
+.prose ul,
+.prose ol,
+.prose blockquote,
+.prose pre {
   color: var(--text);
 }
+.prose ul,
+.prose ol {
+  padding-left: 1.45rem;
+}
+.prose blockquote {
+  margin: 1rem 0;
+  border-left: 3px solid var(--accent);
+  padding-left: 1rem;
+  color: var(--muted);
+}
+.prose pre {
+  overflow-x: auto;
+  border-radius: var(--radius);
+  background: var(--code-bg);
+  padding: 0.85rem;
+}
+.prose pre code {
+  display: block;
+  overflow-wrap: normal;
+  background: transparent;
+  padding: 0;
+  white-space: pre;
+}
 .record-meta {
   margin-top: 1rem;
   padding: 0.75rem 1rem;
@@ -2562,6 +3008,34 @@ function siteJs() {
     return validThemeModes.includes(value) ? value : "auto";
   }
+  function effectiveThemeMode(mode) {
+    const normalizedMode = normalizeThemeMode(mode);
+    if (normalizedMode === "light" || normalizedMode === "dark") {
+      return normalizedMode;
+    }
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  function updateFavicon(mode) {
+    const link = document.querySelector("link[data-wikiwiki-favicon]");
+    if (!link) {
+      return;
+    }
+    const effectiveMode = effectiveThemeMode(mode);
+    const href = effectiveMode === "light"
+      ? link.getAttribute("data-favicon-light")
+      : link.getAttribute("data-favicon-dark");
+    const type = effectiveMode === "light"
+      ? link.getAttribute("data-favicon-light-type")
+      : link.getAttribute("data-favicon-dark-type");
+    if (href) {
+      link.setAttribute("href", href);
+    }
+    if (type) {
+      link.setAttribute("type", type);
+    }
+  }
   function applyThemeMode(mode, persist) {
     const normalizedMode = normalizeThemeMode(mode);
     if (normalizedMode === "light" || normalizedMode === "dark") {
@@ -2570,6 +3044,7 @@ function siteJs() {
       delete document.documentElement.dataset.theme;
     }
     document.documentElement.dataset.themeMode = normalizedMode;
+    updateFavicon(normalizedMode);
     document.querySelectorAll("[data-theme-choice]").forEach((button) => {
       button.setAttribute("aria-pressed", button.getAttribute("data-theme-choice") === normalizedMode ? "true" : "false");
     });
@@ -2678,6 +3153,19 @@ function siteJs() {
       applyThemeMode(button.getAttribute("data-theme-choice") || "auto", true);
     });
   });
+  if (window.matchMedia) {
+    const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateAutoFavicon = () => {
+      if (normalizeThemeMode(document.documentElement.dataset.themeMode || "auto") === "auto") {
+        updateFavicon("auto");
+      }
+    };
+    if (colorSchemeQuery.addEventListener) {
+      colorSchemeQuery.addEventListener("change", updateAutoFavicon);
+    } else if (colorSchemeQuery.addListener) {
+      colorSchemeQuery.addListener(updateAutoFavicon);
+    }
+  }
 }());
 `;
 }