tosijs-ui 1.7.3 → 1.7.4

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.7.4
+
+- **Configurable header logo.** A new `logo` option lets a doc site set the brand mark shown
+  left of the site title, instead of always inheriting the tosijs-ui logo. Accepts the name of a
+  known icon (from `tosijs-ui`'s `icons`, e.g. `'tosiUi'`), an image URL / path / `data:` URI
+  (rendered as an `<img>`), or a raw inline `<svg>…</svg>` string. Threaded through
+  `SiteConfig.logo` (`tosijs-ui/site`), `createDocBrowser({ logo })`, and an embedded
+  `<tosi-doc-system config='{"logo":"…"}'>`. Omit it to keep the prior behavior: the tosijs-ui
+  logo when `projectLinks.tosijs` is set, otherwise no mark. Previously the header logo was
+  hard-wired to the tosijs-ui mark — the one branding element `SiteConfig` couldn't override.
+
 ## 1.7.3
 
 - **New `<tosi-pocket-bar>` component.** A "pocket buttonbar": a single translucent icon at

package/dist/doc-browser.d.ts

@@ -61,6 +61,15 @@ export interface DocBrowserOptions {
     context?: Record<string, any>;
     projectName?: string;
     projectLinks?: ProjectLinks;
+    /**
+     * The brand mark shown left of the site title in the header. One of:
+     * - the name of a known icon (from `icons`), e.g. `'tosiUi'`
+     * - an image URL / path / data: URI (rendered as an `<img>`)
+     * - a raw inline `<svg …>…</svg>` string
+     * Omit to fall back to the tosijs-ui logo when `projectLinks.tosijs` is set,
+     * or to no mark at all otherwise.
+     */
+    logo?: string;
     navSize?: number;
     minSize?: number;
     routing?: DocRoutingMode;

package/dist/doc-browser.js

@@ -163,7 +163,7 @@ import { tosiLocalized } from './localize';
 import { popMenu } from './menu';
 import { codeEditor } from './code-editor';
 import { tosiDiff } from './diff';
-const { div, span, a, header, button, template, input, h2, details, summary, ul, li, } = elements;
+const { div, span, a, header, button, template, input, h2, img, details, summary, ul, li, } = elements;
 // Test colors
 const testColor = {
     pass: varDefault.testColorPass('#0a0'),
@@ -254,11 +254,58 @@ const testIndicatorStyleSpec = {
         borderRadius: vars.roundedRadius,
     },
 };
+// The brand mark shown left of the site title. `logo` (from config) may name a
+// known icon, be an inline `<svg>` string, or be an image URL; when absent we
+// keep the legacy behavior — the tosijs-ui logo iff this is a tosijs project,
+// else nothing. Sized to match the header height so hydration doesn't reflow.
+const LOGO_SIZE = 40;
+const LOGO_GAP = 10;
+// `icons` is a Proxy that returns a factory for ANY string (unknown names get a
+// placeholder glyph), so we can't ask it whether a name is real — we route by the
+// shape of the string instead: an inline `<svg>` renders as-is, a URL/path/data:
+// URI renders as an <img>, and anything else is treated as an icon(-composition)
+// name.
+function looksLikeImageUrl(s) {
+    return (/^(https?:)?\/\//.test(s) ||
+        s.startsWith('data:') ||
+        s.startsWith('/') ||
+        s.startsWith('./') ||
+        s.startsWith('../') ||
+        /\.(png|jpe?g|gif|webp|avif|svg|ico)(\?.*)?$/i.test(s));
+}
+function logoMark(logo, projectLinks) {
+    if (logo) {
+        if (logo.trimStart().startsWith('<')) {
+            const holder = span({
+                style: {
+                    display: 'inline-flex',
+                    height: `${LOGO_SIZE}px`,
+                    marginRight: `${LOGO_GAP}px`,
+                },
+            });
+            holder.innerHTML = logo;
+            return holder;
+        }
+        if (looksLikeImageUrl(logo)) {
+            return img({
+                src: logo,
+                alt: '',
+                style: { height: `${LOGO_SIZE}px`, marginRight: `${LOGO_GAP}px` },
+            });
+        }
+        return icons[logo]({
+            style: { _xinIconSize: LOGO_SIZE, marginRight: LOGO_GAP },
+        });
+    }
+    return projectLinks.tosijs
+        ? icons.tosiUi({ style: { _xinIconSize: LOGO_SIZE, marginRight: LOGO_GAP } })
+        : span();
+}
 // Monotonic per-page counter so each createDocBrowser() call gets a distinct
 // tosi() registry key (see stateKey below) and two browsers can't share state.
 let docBrowserSeq = 0;
 export function createDocBrowser(options) {
-    const { docs, context = {}, projectName = '', projectLinks = {}, navSize = 200, minSize = 600, routing = 'query', initialRoute, onRouteChange, navbarLinks, contentElement, } = options;
+    const { docs, context = {}, projectName = '', projectLinks = {}, logo, navSize = 200, minSize = 600, routing = 'query', initialRoute, onRouteChange, navbarLinks, contentElement, } = options;
     // Memory routing is fully self-contained: it never reads or writes
     // window.history/location, so an embedded or nested browser can't hijack the
     // host page's URL (or recurse into it).
@@ -522,11 +569,7 @@ export function createDocBrowser(options) {
                 alignItems: 'center',
                 borderBottom: 'none',
             },
-        }, projectLinks.tosijs
-            ? icons.tosiUi({
-                style: { _xinIconSize: 40, marginRight: 10 },
-            })
-            : span(), h2(projectName)));
+        }, logoMark(logo, projectLinks), h2(projectName)));
     }
     headerContent.push(span({ class: 'elastic' }));
     // A header link renders as an icon (if `icon` names a known icon) or its label.

package/dist/doc-system/doc-system.js

@@ -409,6 +409,7 @@ export class TosiDocSystem extends Component {
             },
             projectName: config.projectName,
             projectLinks: config.projectLinks,
+            logo: config.logo,
             navbarLinks: navbarLinks.length ? navbarLinks : undefined,
             contentElement,
         });

package/dist/doc-system/site/generate-site.d.ts

@@ -18,6 +18,8 @@ export interface GenerateSiteConfig {
     /** default og:image (per-page overridable via doc metadata) */
     ogImage?: string;
     projectLinks?: ProjectLinks;
+    /** brand mark left of the title: icon name, image URL, or inline <svg> */
+    logo?: string;
     /** header-bar links (rendered as real <a> for no-JS, upgraded on hydration) */
     navbarLinks?: LinkItem[];
     /** translation table (TSV) for the settings menu's language picker */

package/dist/doc-system/site/generate-site.js

@@ -251,6 +251,7 @@ export async function generateSite(config) {
     const configAttr = escapeAttr(JSON.stringify({
         projectName: config.projectName,
         projectLinks: config.projectLinks,
+        logo: config.logo,
     }));
     // The theme stylesheet (config.stylesUrl) is written separately by
     // ./generate-css.ts; pages here just <link> to it.

package/dist/doc-system/site/orchestrator.js

@@ -600,6 +600,7 @@ export async function buildSite(config) {
         baseUrl: config.baseUrl,
         lang: config.lang,
         projectLinks: config.projectLinks,
+        logo: config.logo,
         navbarLinks: config.navbarLinks,
         localizedStrings: config.localizedStrings,
         favicon: config.favicon,

package/dist/doc-system/site/site-config.d.ts

@@ -30,6 +30,13 @@ export interface SiteConfig {
     headExtra?: string;
     /** logo + view-source links (createDocBrowser projectLinks) */
     projectLinks?: ProjectLinks;
+    /**
+     * Brand mark shown left of the site title in the header. One of: the name of a
+     * known icon (from `tosijs-ui`'s `icons`, e.g. `'tosiUi'`), an image URL / path
+     * / `data:` URI, or a raw inline `<svg …>…</svg>` string. Omit to fall back to
+     * the tosijs-ui logo when `projectLinks.tosijs` is set, or to no mark otherwise.
+     */
+    logo?: string;
     /** header-bar icon links */
     navbarLinks?: LinkItem[];
     /** base theme colors — most of the palette is derived from `accent` */