dark logo: sidebar

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -21,13 +21,17 @@ import {
   BrandTypographySingle,
   BrandTypographyUnified,
   BrandUnified,
+  LogoLightDarkSpecifier,
+  LogoOptions,
+  NormalizedLogoLightDarkSpecifier,
   Zod,
 } from "../../resources/types/zod/schema-types.ts";
 import { InternalError } from "../lib/error.ts";
 
 import { join, relative } from "../../deno_ral/path.ts";
 import { warnOnce } from "../log.ts";
 import { isCssColorName } from "../css/color-names.ts";
+import { assert } from "testing/asserts";
 
 type ProcessedBrandData = {
   color: Record<string, string>;
@@ -238,7 +242,6 @@ export class Brand {
 
   getLogoResource(name: string): BrandLogoExplicitResource {
     const entry = this.data.logo?.images?.[name];
-    console.log(name, this.data.logo?.images);
     if (!entry) {
       return { path: name };
     }
@@ -279,6 +282,63 @@ export const getFavicon = (brand: Brand): string | undefined => {
   return logoInfo.path;
 };
 
+export async function normalizeLogoSpec(
+  spec: LogoLightDarkSpecifier,
+  brand: LightDarkBrand | undefined,
+): Promise<NormalizedLogoLightDarkSpecifier> {
+  const resolveLogo = (mode: "light" | "dark", name: string) => {
+    const logo = brand?.[mode]?.processedData?.logo;
+    return logo &&
+      ((Zod.BrandNamedLogo.options.includes(name as BrandNamedLogo) &&
+        logo[name as BrandNamedLogo]) || logo.images[name]);
+  };
+  const resolveLogoOptions = (
+    mode: "light" | "dark",
+    logo: LogoOptions,
+  ): LogoOptions => {
+    const logo2 = resolveLogo(mode, logo.path);
+    if (logo2) {
+      const { path: _, ...rest } = logo;
+      return {
+        ...logo2,
+        ...rest,
+      };
+    }
+    return logo;
+  };
+  if (typeof spec === "string") {
+    return {
+      light: resolveLogo("light", spec) || { path: spec },
+      dark: resolveLogo("light", spec) || { path: spec },
+    };
+  }
+  if ("path" in spec) {
+    return {
+      light: resolveLogoOptions("light", spec),
+      dark: resolveLogoOptions("dark", spec),
+    };
+  }
+  let light, dark;
+  if (spec.light) {
+    if (typeof spec.light === "string") {
+      light = resolveLogo("light", spec.light) || { path: spec.light };
+    } else {
+      light = resolveLogoOptions("light", spec.light);
+    }
+  }
+  if (spec.dark) {
+    if (typeof spec.dark === "string") {
+      dark = resolveLogo("dark", spec.dark) || { path: spec.dark };
+    } else {
+      dark = resolveLogoOptions("dark", spec.dark);
+    }
+  }
+  return {
+    light,
+    dark,
+  };
+}
+
 function splitColorLightDark(
   bcld: BrandColorLightDark,
 ): LightDarkColor {

src/project/types/website/website-navigation.ts

@@ -1017,11 +1017,10 @@ async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
   sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
   // sidebar logo has been normalized
   const sidebarLogo = sidebar.logo as NormalizedLogoLightDarkSpecifier;
-  console.log("sidebar.logo", sidebarLogo);
   if (sidebarLogo.light) {
     sidebarLogo.light.path = resolveLogo(sidebarLogo.light.path)!;
   }
-  if (sidebarLogo?.dark) {
+  if (sidebarLogo.dark) {
     sidebarLogo.dark.path = resolveLogo(sidebarLogo.dark.path)!;
   }
   const searchOpts = await searchOptions(project);

src/project/types/website/website-shared.ts

@@ -22,10 +22,7 @@ import {
   Sidebar,
   SidebarItem,
 } from "../../types.ts";
-import {
-  LogoLightDarkSpecifier,
-  NormalizedLogoLightDarkSpecifier,
-} from "../../../resources/types/schema-types.ts";
+import {} from "../../../resources/types/schema-types.ts";
 import {
   kAnnouncement,
   kBodyFooter,
@@ -49,7 +46,8 @@ import { Format, FormatExtras } from "../../../config/types.ts";
 import { kPageTitle, kTitle, kTitlePrefix } from "../../../config/constants.ts";
 import { md5HashAsync } from "../../../core/hash.ts";
 export { type NavigationFooter } from "../../types.ts";
-import { assert } from "testing/asserts";
+import { projectResolveBrand } from "../../project-shared.ts";
+import { normalizeLogoSpec } from "../../../core/brand/brand.ts";
 
 export interface Navigation {
   navbar?: Navbar;
@@ -113,38 +111,6 @@ export function computePageTitle(
   }
 }
 
-export function normalizeLogoSpec(
-  spec: LogoLightDarkSpecifier,
-): NormalizedLogoLightDarkSpecifier {
-  if (typeof spec === "string") {
-    return {
-      light: { path: spec },
-      dark: { path: spec },
-    };
-  }
-  if ("light" in spec || "dark" in spec) {
-    return {
-      light: typeof spec.light === "string"
-        ? {
-          path: spec.light,
-        }
-        : spec.light,
-      dark: typeof spec.dark === "string"
-        ? {
-          path: spec.dark,
-        }
-        : spec.dark,
-    };
-  }
-  if ("path" in spec) {
-    return {
-      light: spec,
-      dark: spec,
-    };
-  }
-  assert(false);
-}
-
 export function inputFileHref(href: string) {
   const [hrefDir, hrefStem] = dirAndStem(href);
   const htmlHref = "/" + join(hrefDir, `${hrefStem}.html`);
@@ -186,7 +152,9 @@ export async function websiteNavigationConfig(project: ProjectContext) {
     }
 
     if (sidebars[0].logo) {
-      sidebars[0].logo = normalizeLogoSpec(sidebars[0].logo);
+      // note no document-level customization of brand logo #11309
+      const brand = await projectResolveBrand(project);
+      sidebars[0].logo = await normalizeLogoSpec(sidebars[0].logo, brand);
     }
 
     // convert contents: auto into items
@@ -236,7 +204,6 @@ export async function websiteNavigationConfig(project: ProjectContext) {
     if (logo) {
       navbar.logo = logo.path; // TODO: This needs smarts to work on light+dark themes
       navbar["logo-alt"] = logo.alt;
-      console.log("navbar logo", logo);
     }
   }
 

src/resources/schema/definitions.yml

@@ -2601,7 +2601,7 @@
 
 - id: logo-options
   object:
-    closed: true # e.g. to allow typst location, padding, padding-*, width
+    closed: false # e.g. to allow typst location, padding, padding-*, width
     properties:
       path:
         schema: path

tests/docs/smoke-all/brand/logo/sidebar/brand-default/.gitignore

@@ -0,0 +1 @@
+/.quarto/

tests/docs/smoke-all/brand/logo/sidebar/brand-default/_brand.yml

@@ -0,0 +1,11 @@
+color:
+  background:
+    light: "#fff"
+    dark: "#111"
+  foreground:
+    light: "#111"
+    dark: "#fff"
+logo:
+  medium:
+    light: sun-face.png
+    dark: moon-face.png

tests/docs/smoke-all/brand/logo/sidebar/brand-default/_quarto.yml

@@ -0,0 +1,12 @@
+project:
+  type: website
+theme:
+  light: brand
+  dark: [brand, dark-fixups.scss]
+website:
+  sidebar:
+    style: "docked"
+    search: true
+    contents:
+      - index.qmd
+      - conclusion.qmd

tests/docs/smoke-all/brand/logo/sidebar/brand-default/conclusion.qmd

@@ -0,0 +1,3 @@
+---
+title: conclusion
+---

tests/docs/smoke-all/brand/logo/sidebar/brand-default/dark-fixups.scss

@@ -0,0 +1,5 @@
+/*-- scss:rules --*/
+
+nav.sidebar.sidebar-navigation:not(.rollup) {
+  background-color: #282B30;
+}

tests/docs/smoke-all/brand/logo/sidebar/brand-default/index.qmd

@@ -0,0 +1,11 @@
+---
+title: intro
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'img[class*="light-content"][src="./sun-face.png"][alt=""]'
+          - 'img[class*="dark-content"][src="./moon-face.png"][alt=""]'
+        - []
+---