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,42 +344,26 @@ 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,
     dark,
   };
 }
 
-export function findLogo(
-  brand: LightDarkBrand,
-  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;
-}
-
 function splitColorLightDark(
   bcld: BrandColorLightDark,
 ): LightDarkColor {

src/format/dashboard/format-dashboard.ts

@@ -28,6 +28,7 @@ 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";
@@ -65,7 +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 { findLogo, normalizeLogoSpec } from "../../core/brand/brand.ts";
+import { resolveLogo } from "../../core/brand/brand.ts";
 
 const kDashboardClz = "quarto-dashboard";
 
@@ -122,17 +123,19 @@ export function dashboardFormat() {
         }
 
         const brand = await project.resolveBrand(input);
-        if (format.metadata[kLogo]) {
-          format.metadata[kLogo] = await normalizeLogoSpec(
-            brand,
-            format.metadata[kLogo],
-          );
-          console.log("logo", format.metadata[kLogo]);
-        } else if (brand) {
-          const light = findLogo(brand, "light", ["small", "medium", "large"]);
-          const dark = findLogo(brand, "dark", ["small", "medium", "large"]);
-          format.metadata[kLogo] = { light, dark };
+        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,

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

@@ -47,7 +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 { normalizeLogoSpec } from "../../../core/brand/brand.ts";
+import { resolveLogo } from "../../../core/brand/brand.ts";
 
 export interface Navigation {
   navbar?: Navbar;
@@ -127,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 project.resolveBrand();
-    navbar.logo = await normalizeLogoSpec(brand, logo);
+    navbar.logo = resolveLogo(projectBrand, navLogo, [
+      "small",
+      "medium",
+      "large",
+    ]);
   }
   // read sidebar
   const sidebar = websiteConfig(kSiteSidebar, project.config);
@@ -162,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 project.resolveBrand();
-      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) {
@@ -210,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

@@ -737,41 +737,14 @@ function render_dashboard()
           return doc
         end
       end
+    }, {
+      Meta = function(meta)
+        -- weird that i need to forward this here.
+        -- i'd prefer to directly change the pandoc metadata in ts
+        -- but i couldn't figure it out
+        meta.logo = param('logo')
+        return meta
+      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
-
-    --     return meta
-    --   end
-    -- }
   }
 end

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

@@ -1,5 +1,5 @@
 
-    <div class="navbar-brand-container">       
+    <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">