dark logo for sidebar; unified and simple brand logo

dashboard, revealjs, and typst old tests passing

brand metadata now only contains one polarity of logo
since we split the unified logo immediately
and now our light and dark brands can just be that

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -10,9 +10,12 @@ import {
   BrandColorLightDark,
   BrandFont,
   BrandLogoExplicitResource,
+  BrandLogoSingle,
+  BrandLogoUnified,
   BrandNamedLogo,
   BrandNamedThemeColor,
   BrandSingle,
+  BrandStringLightDark,
   BrandTypographyOptionsBase,
   BrandTypographyOptionsHeadingsSingle,
   BrandTypographySingle,
@@ -26,18 +29,13 @@ import { join, relative } from "../../deno_ral/path.ts";
 import { warnOnce } from "../log.ts";
 import { isCssColorName } from "../css/color-names.ts";
 
-type CanonicalLogoInfo = {
-  light: BrandLogoExplicitResource;
-  dark: BrandLogoExplicitResource;
-};
-
 type ProcessedBrandData = {
   color: Record<string, string>;
   typography: BrandTypographySingle;
   logo: {
-    small?: CanonicalLogoInfo;
-    medium?: CanonicalLogoInfo;
-    large?: CanonicalLogoInfo;
+    small?: BrandLogoExplicitResource;
+    medium?: BrandLogoExplicitResource;
+    large?: BrandLogoExplicitResource;
     images: Record<string, BrandLogoExplicitResource>;
   };
 };
@@ -253,30 +251,12 @@ export class Brand {
     };
   }
 
-  getLogo(name: BrandNamedLogo): CanonicalLogoInfo | undefined {
+  getLogo(name: BrandNamedLogo): BrandLogoExplicitResource | undefined {
     const entry = this.data.logo?.[name];
     if (!entry) {
       return undefined;
     }
-    if (typeof entry === "string") {
-      const res = this.getLogoResource(entry);
-      return {
-        light: res,
-        dark: res,
-      };
-    }
-    const lightEntry = entry?.light
-      ? this.getLogoResource(entry.light)
-      : undefined;
-    const darkEntry = entry?.dark
-      ? this.getLogoResource(entry.dark)
-      : undefined;
-    if (lightEntry && darkEntry) {
-      return {
-        light: lightEntry,
-        dark: darkEntry,
-      };
-    }
+    return this.getLogoResource(entry);
   }
 }
 
@@ -295,7 +275,7 @@ export const getFavicon = (brand: Brand): string | undefined => {
   if (!logoInfo) {
     return undefined;
   }
-  return logoInfo.light.path;
+  return logoInfo.path;
 };
 
 function splitColorLightDark(
@@ -307,9 +287,8 @@ function splitColorLightDark(
   return bcld;
 }
 
-function enablesDarkMode(blcd: BrandColorLightDark) {
-  return typeof blcd === "object" && "dark" in blcd;
-}
+const enablesDarkMode = (x: BrandColorLightDark | BrandStringLightDark) =>
+  typeof x === "object" && x?.dark;
 
 export function brandHasDarkMode(brand: BrandUnified): boolean {
   if (brand.color) {
@@ -324,7 +303,7 @@ export function brandHasDarkMode(brand: BrandUnified): boolean {
   }
   if (brand.typography) {
     for (const elementName of Zod.BrandNamedTypographyElements.options) {
-      const element = brand.typography![elementName];
+      const element = brand.typography[elementName];
       if (!element || typeof element === "string") {
         continue;
       }
@@ -342,6 +321,17 @@ export function brandHasDarkMode(brand: BrandUnified): boolean {
       }
     }
   }
+  if (brand.logo) {
+    for (const logoName of Zod.BrandNamedLogo.options) {
+      const logo = brand.logo[logoName];
+      if (!logo || typeof logo === "string") {
+        continue;
+      }
+      if (enablesDarkMode(logo)) {
+        return true;
+      }
+    }
+  }
   return false;
 }
 
@@ -367,6 +357,25 @@ function sharedTypography(
   }
   return ret;
 }
+
+function splitLogo(
+  unifiedLogo: BrandLogoUnified,
+): { light: BrandLogoSingle; dark: BrandLogoSingle } {
+  const light: BrandLogoSingle = { images: unifiedLogo.images },
+    dark: BrandLogoSingle = { images: unifiedLogo.images };
+  for (const logoName of Zod.BrandNamedLogo.options) {
+    if (unifiedLogo[logoName]) {
+      if (typeof unifiedLogo[logoName] === "string") {
+        light[logoName] = dark[logoName] = unifiedLogo[logoName];
+        continue;
+      }
+      ({ light: light[logoName], dark: dark[logoName] } =
+        unifiedLogo[logoName]);
+    }
+  }
+  return { light, dark };
+}
+
 export function splitUnifiedBrand(
   unified: unknown,
   brandDir: string,
@@ -506,18 +515,19 @@ export function splitUnifiedBrand(
             linkBackgroundColor[mode],
         },
     };
+  const logos = unifiedBrand.logo && splitLogo(unifiedBrand.logo);
   const lightBrand: BrandSingle = {
     meta: unifiedBrand.meta,
     color: { palette: unifiedBrand.color && { ...unifiedBrand.color.palette } },
     typography: typography && specializeTypography(typography, "light"),
-    logo: unifiedBrand.logo,
+    logo: logos && logos.light,
     defaults: unifiedBrand.defaults,
   };
   const darkBrand: BrandSingle = {
     meta: unifiedBrand.meta,
     color: { palette: unifiedBrand.color && { ...unifiedBrand.color.palette } },
     typography: typography && specializeTypography(typography, "dark"),
-    logo: unifiedBrand.logo,
+    logo: logos && logos.dark,
     defaults: unifiedBrand.defaults,
   };
   if (unifiedBrand.color) {

src/format/reveal/format-reveal.ts

@@ -25,6 +25,8 @@ import {
   Metadata,
   PandocFlags,
 } from "../../config/types.ts";
+import { BrandNamedLogo, Zod } from "../../resources/types/zod/schema-types.ts";
+
 import { mergeConfigs } from "../../core/config.ts";
 import { formatResourcePath } from "../../core/resources.ts";
 import { renderEjs } from "../../core/ejs.ts";
@@ -377,18 +379,14 @@ export function revealjsFormat() {
 const determineRevealLogo = (format: Format): string | undefined => {
   const brandData = format.render.brand?.light?.processedData;
   if (brandData?.logo) {
-    const keys: ("medium" | "small" | "large")[] = ["medium", "small", "large"];
     // add slide logo if we have one
-    for (const size of keys) {
+    for (const size of Zod.BrandNamedLogo.options) {
       const logoInfo = brandData.logo[size];
       if (!logoInfo) {
         continue;
       }
-      if (typeof logoInfo === "string") {
-        return logoInfo;
-      } else {
-        // what to do about light vs dark?
-        return logoInfo?.light.path ?? logoInfo?.dark.path;
+      if (logoInfo) {
+        return logoInfo.path;
       }
     }
   }
@@ -403,14 +401,12 @@ function revealMarkdownAfterBody(format: Format) {
     if (typeof revealLogo === "object") {
       revealLogo = revealLogo.path;
     }
-    if (["small", "medium", "large"].includes(revealLogo)) {
+    if (Zod.BrandNamedLogo.options.includes(revealLogo as BrandNamedLogo)) {
       const brandData = format.render.brand?.light?.processedData;
       const logoInfo = brandData?.logo
-        ?.[revealLogo as ("medium" | "small" | "large")];
-      if (typeof logoInfo === "string") {
-        revealLogo = logoInfo;
-      } else {
-        revealLogo = logoInfo?.light.path ?? logoInfo?.dark.path;
+        ?.[revealLogo as BrandNamedLogo];
+      if (logoInfo) {
+        revealLogo = logoInfo.path;
       }
     }
   } else {

src/project/types.ts

@@ -14,6 +14,7 @@ import { ExecutionEngine, ExecutionTarget } from "../execute/types.ts";
 import { InspectedMdCell } from "../inspect/inspect-types.ts";
 import { NotebookContext } from "../render/notebook/notebook-types.ts";
 import {
+  BrandLogoExplicitResource,
   NavigationItem as NavItem,
   NavigationItemObject,
   NavigationItemObject as SidebarTool,
@@ -149,6 +150,11 @@ export const kLogoHref = "logo-href";
 
 export const kSidebarMenus = "sidebar-menus";
 
+export interface LightDarkLogo {
+  light?: BrandLogoExplicitResource;
+  dark?: BrandLogoExplicitResource;
+}
+
 export interface Navbar {
   title?: string | false;
   logo?: string;
@@ -197,8 +203,7 @@ export interface Sidebar {
   id?: string;
   title?: string;
   subtitle?: string;
-  logo?: string;
-  [kLogoAlt]?: string;
+  logo?: LightDarkLogo;
   [kLogoHref]?: string;
   alignment?: "left" | "right" | "center";
   align?: "left" | "right" | "center"; // This is here only because older versions of Quarto used to use it even though it wasn't documented

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

@@ -1012,8 +1012,12 @@ async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
 
   // ensure title and search are present
   sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
-  sidebar.logo = resolveLogo(sidebar.logo);
-
+  if (sidebar.logo?.light) {
+    sidebar.logo.light.path = resolveLogo(sidebar.logo.light.path)!;
+  }
+  if (sidebar.logo?.dark) {
+    sidebar.logo.dark.path = resolveLogo(sidebar.logo.dark.path)!;
+  }
   const searchOpts = await searchOptions(project);
   sidebar.search = sidebar.search !== undefined
     ? sidebar.search

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

@@ -172,9 +172,16 @@ export async function websiteNavigationConfig(project: ProjectContext) {
       const logo = projectBrand.light.processedData.logo.medium ??
         projectBrand.light.processedData.logo.small ??
         projectBrand.light.processedData.logo.large;
-      if (logo) {
-        sidebars[0].logo = logo.light.path; // TODO: This needs smarts to work on light+dark themes
-        sidebars[0]["logo-alt"] = logo.light.alt;
+      const darkLogo = projectBrand.dark && (
+        projectBrand.dark.processedData.logo.medium ??
+          projectBrand.dark.processedData.logo.small ??
+          projectBrand.dark.processedData.logo.large
+      );
+      if (logo || darkLogo) {
+        sidebars[0].logo = {
+          light: logo,
+          dark: darkLogo,
+        };
       }
     }
   }
@@ -186,8 +193,9 @@ export async function websiteNavigationConfig(project: ProjectContext) {
       projectBrand.light.processedData.logo.medium ??
       projectBrand.light.processedData.logo.large;
     if (logo) {
-      navbar.logo = logo.light.path; // TODO: This needs smarts to work on light+dark themes
-      navbar["logo-alt"] = logo.light.alt;
+      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/filters/quarto-post/dashboard.lua

@@ -743,18 +743,15 @@ function render_dashboard()
         local logo = meta.logo
         local resolved
         if logo then
-          local which
           if pandoc.utils.type(logo) == 'Inlines' then 
-            which = logo[1].text
-            local brandLogo = _quarto.modules.brand.get_logo('light', logo[1].text)
-            resolved = brandLogo and brandLogo.light
+            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 = brandLogo.light
-              if logo.alt then
-                resolved.alt = logo.alt
-              end
+              resolved = {
+                path = brandLogo.path,
+                alt = logo.alt or brandLogo.alt
+              }
             else
               resolved = {
                 path = logo.path,
@@ -763,10 +760,9 @@ function render_dashboard()
             end
           end
         else
-          logo = _quarto.modules.brand.get_logo('light', 'small')
+          resolved = _quarto.modules.brand.get_logo('light', 'small')
             or _quarto.modules.brand.get_logo('light', 'medium')
             or _quarto.modules.brand.get_logo('light', 'large')
-          resolved = logo and logo.light
         end
         if resolved then
           meta.logo = resolved.path

src/resources/filters/quarto-post/typst-brand-yaml.lua

@@ -219,13 +219,13 @@ function render_typst_brand_yaml()
         local foundLogo = null
          if logo then
           if type(logo) == 'string' then
-            foundLogo = _quarto.modules.brand.get_logo(brandMode, logo) or {light={path=logo}}
+            foundLogo = _quarto.modules.brand.get_logo(brandMode, logo) or {path=logo}
           elseif type(logo) == 'table' then
             for k, v in pairs(logo) do
               logoOptions[k] = v
             end
             if logo.path then
-              foundLogo =  _quarto.modules.brand.get_logo(brandMode, logo.path) or {light={path=logo}}
+              foundLogo =  _quarto.modules.brand.get_logo(brandMode, logo.path) or {path=logo}
             end
           end
         end
@@ -236,13 +236,8 @@ function render_typst_brand_yaml()
             or _quarto.modules.brand.get_logo(brandMode, 'large')
         end
         if foundLogo then
-          if foundLogo.light then
-            logoOptions.path = foundLogo.light.path
-            logoOptions.alt = foundLogo.light.alt
-          elseif foundLogo.dark then
-            logoOptions.path = foundLogo.dark.path
-            logoOptions.alt = foundLogo.dark.alt
-          end
+          logoOptions.path = foundLogo.path
+          logoOptions.alt = foundLogo.alt
 
           local pads = {}
           for k, v in _quarto.utils.table.sortedPairs(logoOptions) do

src/resources/projects/website/templates/sidebar.ejs

@@ -36,7 +36,12 @@
     <div class="pt-lg-2 mt-2 <%= alignCss %> sidebar-header<%= sidebar.logo && sidebar.title ? ' sidebar-header-stacked' : '' %>">
     <% if (sidebar.logo) { %>
       <a href="<%- sidebar['logo-href'] || '/index.html' %>" class="sidebar-logo-link">
-      <img src="<%- sidebar.logo %>" alt="<%- sidebar['logo-alt'] || '' %>" class="sidebar-logo py-0 d-lg-inline d-none"/>
+      <% if (sidebar.logo.light) { %>
+      <img src="<%- sidebar.logo.light.path %>" alt="<%- sidebar.logo.light.alt || '' %>" class="sidebar-logo light-content py-0 d-lg-inline d-none"/>
+      <% } %>
+      <% if (sidebar.logo.dark) { %>
+      <img src="<%- sidebar.logo.dark.path %>" alt="<%- sidebar.logo.dark.alt || '' %>" class="sidebar-logo dark-content py-0 d-lg-inline d-none"/>
+      <% } %>
       </a>
     <% } %>
     <% if (needsTools && toolsLocation === "logo") { %>

src/resources/schema/definitions.yml

@@ -3222,7 +3222,7 @@
       meta:
         ref: brand-meta
       logo:
-        ref: brand-logo-unified # temporary
+        ref: brand-logo-single
       color:
         ref: brand-color-single
       typography:

tests/docs/smoke-all/brand/logo/choose-logo-resource.qmd

@@ -17,9 +17,9 @@ logo: large
 _quarto:
   tests:
     dashboard:
-      ensureFileRegexMatches:
+      ensureHtmlElements:
         -
-          - '<img src="posit-logo-2024\.svg" alt="posit logo"'
+          - 'img[src="posit-logo-2024.svg"][alt="posit logo"]'
         - []
     revealjs:
       ensureFileRegexMatches: