wip: dark logo for sidebar

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -238,6 +238,7 @@ 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 };
     }

src/project/types.ts

@@ -14,7 +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,
+  LogoLightDarkSpecifier,
   NavigationItem as NavItem,
   NavigationItemObject,
   NavigationItemObject as SidebarTool,
@@ -150,11 +150,6 @@ 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;
@@ -203,7 +198,8 @@ export interface Sidebar {
   id?: string;
   title?: string;
   subtitle?: string;
-  logo?: LightDarkLogo;
+  logo?: LogoLightDarkSpecifier;
+  [kLogoAlt]?: string;
   [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

@@ -76,6 +76,9 @@ import {
   SidebarItem,
   SidebarTool,
 } from "../../types.ts";
+import {
+  NormalizedLogoLightDarkSpecifier,
+} from "../../../resources/types/schema-types.ts";
 import {
   normalizeSidebarItem,
   resolveHrefAttribute,
@@ -1012,12 +1015,14 @@ async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
 
   // ensure title and search are present
   sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
-  console.log("sidebar.logo", sidebar.logo);
-  if (sidebar.logo?.light) {
-    sidebar.logo.light.path = resolveLogo(sidebar.logo.light.path)!;
+  // 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 (sidebar.logo?.dark) {
-    sidebar.logo.dark.path = resolveLogo(sidebar.logo.dark.path)!;
+  if (sidebarLogo?.dark) {
+    sidebarLogo.dark.path = resolveLogo(sidebarLogo.dark.path)!;
   }
   const searchOpts = await searchOptions(project);
   sidebar.search = sidebar.search !== undefined

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

@@ -22,6 +22,10 @@ import {
   Sidebar,
   SidebarItem,
 } from "../../types.ts";
+import {
+  LogoLightDarkSpecifier,
+  NormalizedLogoLightDarkSpecifier,
+} from "../../../resources/types/schema-types.ts";
 import {
   kAnnouncement,
   kBodyFooter,
@@ -45,6 +49,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 { assert } from "testing/asserts";
 
 export interface Navigation {
   navbar?: Navbar;
@@ -108,6 +113,38 @@ 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`);
@@ -148,15 +185,8 @@ export async function websiteNavigationConfig(project: ProjectContext) {
       sidebars[0].tools = [];
     }
 
-    if (sidebars[0].logo) { // normalize to LightDarkLogo
-      if (typeof (sidebars[0].logo) === "string") {
-        sidebars[0].logo = {
-          light: {
-            path: sidebars[0].logo,
-            alt: (sidebars[0] as unknown as { "logo-alt": string })["logo-alt"],
-          },
-        };
-      }
+    if (sidebars[0].logo) {
+      sidebars[0].logo = normalizeLogoSpec(sidebars[0].logo);
     }
 
     // convert contents: auto into items

src/resources/schema/definitions.yml

@@ -1019,8 +1019,8 @@
                       - boolean
                     description: "The sidebar title. Uses the project title if none is specified."
                   logo:
-                    path:
-                      description: "Path to a logo image that will be displayed in the sidebar."
+                    ref: logo-light-dark-specifier
+                    description: "Speciffication of image that will be displayed in the sidebar."
                   logo-alt:
                     string:
                       description: "Alternate text for the logo image."
@@ -2599,6 +2599,65 @@
   description: Names of customizeable logos
   enum: [small, medium, large]
 
+- id: logo-options
+  object:
+    closed: true # e.g. to allow typst location, padding, padding-*, width
+    properties:
+      path:
+        schema: path
+        description: >
+          Path or brand.yml logo resource name.
+      alt:
+        schema: string
+        description: >
+          Alternative text for the logo, used for accessibility.
+    required: [path]
+
+- id: logo-specifier
+  anyOf:
+    - string
+    - schema:
+        ref: logo-options
+
+- id: logo-light-dark-specifier
+  description: >
+    Any of the ways a logo can be specified: string, object, or light/dark object of
+    string or object
+  anyOf:
+    - ref: logo-specifier
+    - object:
+        closed: true
+        properties:
+          light:
+            schema:
+              ref: logo-specifier
+            description: >
+              Specification of a light logo
+          dark:
+            schema:
+              ref: logo-specifier
+            description: >
+              Specification of a dark logo
+
+# normalized version of logo-light-dark-specifier
+- id: normalized-logo-light-dark-specifier
+  description: >
+    Any of the ways a logo can be specified: string, object, or light/dark object of
+    string or object
+  object:
+    closed: true
+    properties:
+      light:
+        schema:
+          ref: logo-options
+        description: >
+          Options for a light logo
+      dark:
+        schema:
+          ref: logo-options
+        description: >
+          Options for a dark logo
+
 - id: brand-color-value
   schema: string
 

src/resources/schema/document-reveal-content.yml

@@ -4,7 +4,7 @@
   schema:
     anyOf:
       - string
-      - object # typst: location, padding, padding-*, width, source
+      - object
   description: "Logo image (placed in bottom right corner of slides)"
 
 - name: footer