dark logo: dashboards

normalizeLogo + findLogo = resolveLogo

we were not able to handle the case where document overrides only dark or light logo
under the previous structure, because it needs to look at size order

also fold in brand and document.logo undefined cases

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -282,21 +282,40 @@ export const getFavicon = (brand: Brand): string | undefined => {
   return logoInfo.path;
 };
 
-export async function normalizeLogoSpec(
+export function resolveLogo(
   brand: LightDarkBrand | undefined,
-  spec: LogoLightDarkSpecifier,
-): Promise<NormalizedLogoLightDarkSpecifier> {
-  const resolveLogo = (mode: "light" | "dark", name: string) => {
+  spec: LogoLightDarkSpecifier | undefined,
+  order: BrandNamedLogo[],
+): NormalizedLogoLightDarkSpecifier | undefined {
+  const resolveBrandLogo = (
+    mode: "light" | "dark",
+    name: string,
+  ): LogoOptions => {
     const logo = brand?.[mode]?.processedData?.logo;
     return logo &&
-      ((Zod.BrandNamedLogo.options.includes(name as BrandNamedLogo) &&
-        logo[name as BrandNamedLogo]) || logo.images[name]);
+        ((Zod.BrandNamedLogo.options.includes(name as BrandNamedLogo) &&
+          logo[name as BrandNamedLogo]) || logo.images[name]) ||
+      { path: name };
   };
+  function findLogo(
+    mode: "light" | "dark",
+    order: BrandNamedLogo[],
+  ): LogoOptions | undefined {
+    if (brand?.[mode]) {
+      for (const size of order) {
+        const logo = brand[mode].processedData.logo[size];
+        if (logo) {
+          return logo;
+        }
+      }
+    }
+    return undefined;
+  }
   const resolveLogoOptions = (
     mode: "light" | "dark",
     logo: LogoOptions,
   ): LogoOptions => {
-    const logo2 = resolveLogo(mode, logo.path);
+    const logo2 = resolveBrandLogo(mode, logo.path);
     if (logo2) {
       const { path: _, ...rest } = logo;
       return {
@@ -306,10 +325,16 @@ export async function normalizeLogoSpec(
     }
     return logo;
   };
+  if (!spec) {
+    return {
+      light: findLogo("light", order),
+      dark: findLogo("dark", order),
+    };
+  }
   if (typeof spec === "string") {
     return {
-      light: resolveLogo("light", spec) || { path: spec },
-      dark: resolveLogo("light", spec) || { path: spec },
+      light: resolveBrandLogo("light", spec),
+      dark: resolveBrandLogo("light", spec),
     };
   }
   if ("path" in spec) {
@@ -319,19 +344,19 @@ export async function normalizeLogoSpec(
     };
   }
   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.light) {
+    light = findLogo("light", order);
+  } else if (typeof spec.light === "string") {
+    light = resolveBrandLogo("light", 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);
-    }
+  if (!spec.dark) {
+    dark = findLogo("dark", order);
+  } else if (typeof spec.dark === "string") {
+    dark = resolveBrandLogo("dark", spec.dark);
+  } else {
+    dark = resolveLogoOptions("dark", spec.dark);
   }
   return {
     light,

src/format/dashboard/format-dashboard.ts

@@ -13,6 +13,7 @@ import {
   kFilterParams,
   kIncludeAfterBody,
   kIpynbShellInteractivity,
+  kLogo,
   kPlotlyConnected,
   kTemplate,
   kTheme,
@@ -27,12 +28,13 @@ import {
   kSassBundles,
   Metadata,
 } from "../../config/types.ts";
+import { LogoLightDarkSpecifier } from "../../resources/types/zod/schema-types.ts";
 import { PandocFlags } from "../../config/types.ts";
 import { mergeConfigs } from "../../core/config.ts";
 import { Document, Element } from "../../core/deno-dom.ts";
 import { InternalError } from "../../core/lib/error.ts";
 import { formatResourcePath } from "../../core/resources.ts";
-import { ProjectContext } from "../../project/types.ts";
+import { kLogoAlt, ProjectContext } from "../../project/types.ts";
 import { registerWriterFormatHandler } from "../format-handlers.ts";
 import { kPageLayout, kPageLayoutCustom } from "../html/format-html-shared.ts";
 import { htmlFormat } from "../html/format-html.ts";
@@ -64,6 +66,7 @@ import { processToolbars } from "./format-dashboard-toolbar.ts";
 import { processDatatables } from "./format-dashboard-tables.ts";
 import { assert } from "testing/asserts";
 import { brandBootstrapSassBundles } from "../../core/sass/brand.ts";
+import { resolveLogo } from "../../core/brand/brand.ts";
 
 const kDashboardClz = "quarto-dashboard";
 
@@ -119,6 +122,21 @@ export function dashboardFormat() {
           }
         }
 
+        const brand = await project.resolveBrand(input);
+        let logoSpec = format.metadata[kLogo] as LogoLightDarkSpecifier;
+        if (typeof logoSpec === "string" && format.metadata[kLogoAlt]) {
+          logoSpec = {
+            path: logoSpec,
+            alt: format.metadata[kLogoAlt] as string,
+          };
+        }
+        format.metadata[kLogo] = resolveLogo(brand, logoSpec, [
+          "small",
+          "medium",
+          "large",
+        ]);
+        console.log("dash logo", format.metadata[kLogo]);
+
         const extras: FormatExtras = await baseHtmlFormat.formatExtras(
           input,
           markdown,

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

@@ -1249,7 +1249,7 @@ async function navbarEjsData(
       ? searchOpts.type
       : false,
     background: navbar.background || "primary",
-    logo: navbar.logo,
+    logo: ld.cloneDeep(navbar.logo),
     [kLogoAlt]: navbar[kLogoAlt],
     [kLogoHref]: navbar[kLogoHref],
     collapse,
@@ -1259,9 +1259,8 @@ async function navbarEjsData(
     pinned: navbar.pinned !== undefined ? !!navbar.pinned : false,
   };
   if (data.logo) {
-    console.log("navbar logo", navbar.logo);
     // navbar logo has been normalized
-    const navbarLogo = navbar.logo as NormalizedLogoLightDarkSpecifier;
+    const navbarLogo = data.logo as NormalizedLogoLightDarkSpecifier;
     if (navbarLogo.light) {
       navbarLogo.light.path = resolveLogo(navbarLogo.light.path)!;
     }

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

@@ -47,8 +47,7 @@ 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 { projectResolveBrand } from "../../project-shared.ts";
-import { normalizeLogoSpec } from "../../../core/brand/brand.ts";
+import { resolveLogo } from "../../../core/brand/brand.ts";
 
 export interface Navigation {
   navbar?: Navbar;
@@ -128,17 +127,21 @@ export async function websiteNavigationConfig(project: ProjectContext) {
   } else if (typeof navbar !== "object") {
     navbar = undefined;
   }
-  if (navbar && navbar.logo) {
-    let logo = navbar.logo;
+
+  // note no document-level customization of brand logo #11309
+  const projectBrand = await project.resolveBrand();
+  if (navbar) {
+    let navLogo = navbar.logo;
     if (navbar[kLogoAlt]) {
-      if (typeof logo === "string") {
-        logo = { path: logo, alt: navbar[kLogoAlt] };
+      if (typeof navLogo === "string") {
+        navLogo = { path: navLogo, alt: navbar[kLogoAlt] };
       }
     }
-
-    // note no document-level customization of brand logo #11309
-    const brand = await projectResolveBrand(project);
-    navbar.logo = await normalizeLogoSpec(brand, logo);
+    navbar.logo = resolveLogo(projectBrand, navLogo, [
+      "small",
+      "medium",
+      "large",
+    ]);
   }
   // read sidebar
   const sidebar = websiteConfig(kSiteSidebar, project.config);
@@ -163,37 +166,39 @@ export async function websiteNavigationConfig(project: ProjectContext) {
       sidebars[0].tools = [];
     }
 
-    if (sidebars[0].logo) {
-      let logo = sidebars[0].logo;
+    let sideLogo = sidebars[0].logo;
+    if (sideLogo) {
       if (sidebars[0][kLogoAlt]) {
         const alt = sidebars[0][kLogoAlt];
-        if (typeof logo === "string") {
-          logo = { path: logo, alt };
+        if (typeof sideLogo === "string") {
+          sideLogo = { path: sideLogo, alt };
         }
         // possible but absurd
-        // else if ("path" in logo) {
-        //   logo = { ...logo, alt };
+        // else if ("path" in sideLogo) {
+        //   sideLogo = { ...sideLogo, alt };
         // } else {
-        //   logo = {
-        //     light: !logo.light ? undefined : typeof logo.light === "string"
+        //   sideLogo = {
+        //     light: !sideLogo.light ? undefined : typeof sideLogo.light === "string"
         //       ? {
-        //         path: logo.light,
+        //         path: sideLogo.light,
         //         alt,
         //       }
-        //       : { ...logo.light, alt },
-        //     dark: !logo.dark ? undefined : typeof logo.dark === "string"
+        //       : { ...sideLogo.light, alt },
+        //     dark: !sideLogo.dark ? undefined : typeof sideLogo.dark === "string"
         //       ? {
-        //         path: logo.dark,
+        //         path: sideLogo.dark,
         //         alt,
         //       }
-        //       : { ...logo.dark, alt },
+        //       : { ...sideLogo.dark, alt },
         //   };
         // }
       }
-      // note no document-level customization of brand logo #11309
-      const brand = await projectResolveBrand(project);
-      sidebars[0].logo = await normalizeLogoSpec(brand, logo);
     }
+    sidebars[0].logo = resolveLogo(projectBrand, sideLogo, [
+      "medium",
+      "small",
+      "large",
+    ]);
 
     // convert contents: auto into items
     for (const sb of sidebars) {
@@ -211,47 +216,6 @@ export async function websiteNavigationConfig(project: ProjectContext) {
     }
   }
 
-  const projectBrand = await project.resolveBrand();
-  if (
-    projectBrand?.light?.processedData.logo && sidebars?.[0]
-  ) {
-    if (sidebars[0].logo === undefined) {
-      const light = projectBrand.light.processedData.logo.medium ??
-        projectBrand.light.processedData.logo.small ??
-        projectBrand.light.processedData.logo.large;
-      const dark = projectBrand.dark && (
-        projectBrand.dark.processedData.logo.medium ??
-          projectBrand.dark.processedData.logo.small ??
-          projectBrand.dark.processedData.logo.large
-      );
-      if (light || dark) {
-        sidebars[0].logo = {
-          light,
-          dark,
-        };
-      }
-    }
-  }
-
-  if (
-    projectBrand?.light?.processedData.logo && navbar
-  ) {
-    if (navbar.logo === undefined) {
-      const light = projectBrand.light.processedData.logo.small ??
-        projectBrand.light.processedData.logo.medium ??
-        projectBrand.light.processedData.logo.large;
-      const dark = projectBrand.dark?.processedData.logo.small ??
-        projectBrand.dark?.processedData.logo.medium ??
-        projectBrand.dark?.processedData.logo.large;
-      if (light || dark) {
-        navbar.logo = {
-          light,
-          dark,
-        };
-      }
-    }
-  }
-
   // if there is more than one sidebar then propagate options from the
   // first sidebar to the others
   if (sidebars && sidebars.length > 1) {

src/resources/filters/quarto-post/dashboard.lua

@@ -738,37 +738,10 @@ function render_dashboard()
         end
       end
     }, {
-      -- todo: dark mode
       Meta = function(meta)
-        local logo = meta.logo
-        local resolved
-        if logo then
-          if pandoc.utils.type(logo) == 'Inlines' then 
-            resolved = _quarto.modules.brand.get_logo('light', logo[1].text)
-          elseif type(logo) == 'table' then
-            local brandLogo = _quarto.modules.brand.get_logo('light', logo.path[1].text)
-            if brandLogo then
-              resolved = {
-                path = brandLogo.path,
-                alt = logo.alt or brandLogo.alt
-              }
-            else
-              resolved = {
-                path = logo.path,
-                alt = logo.alt
-              }
-            end
-          end
-        else
-          resolved = _quarto.modules.brand.get_logo('light', 'small')
-            or _quarto.modules.brand.get_logo('light', 'medium')
-            or _quarto.modules.brand.get_logo('light', 'large')
-        end
-        if resolved then
-          meta.logo = resolved.path
-          meta['logo-alt'] = resolved.alt
-        end
-
+        -- forward the fully-resolved {light,dark} logo
+        -- calculated in format-dashboard.ts
+        meta.logo = param('logo')
         return meta
       end
     }

src/resources/formats/dashboard/_nav-container.html

@@ -1,6 +1,7 @@
 
-    <div class="navbar-brand-container">       
-$if(logo)$    <a href="#"><img src="$logo$" alt="$logo-alt$" class="navbar-logo d-inline-block"></a>$endif$
+    <div class="navbar-brand-container">
+$if(logo.light)$    <a href="#"><img src="$logo.light.path$" alt="$logo.light.alt$" class="navbar-logo light-content d-inline-block"></a>$endif$
+$if(logo.dark)$    <a href="#"><img src="$logo.dark.path$" alt="$logo.dark.alt$" class="navbar-logo dark-content d-inline-block"></a>$endif$
       <div class="navbar-title">
         $if(title)$<div class="navbar-title-text"><a href="#">$title$</a></div>$endif$
         $if(subtitle)$<div class="navbar-subtitle">$subtitle$</div>$endif$

src/resources/schema/document-dashboard.yml

@@ -1,8 +1,9 @@
 - name: logo
   tags:
     formats: [dashboard]
-  schema: path
-  description: "Logo image (placed on the left side of the navigation bar)"
+  schema:
+    ref: logo-light-dark-specifier
+  description: "Logo image(s) (placed on the left side of the navigation bar)"
 
 - name: orientation
   tags: