add leading slash to logo paths when input is not in project directory

fixes #11982
this was already done for navbar and sidebar
the commit moves that logic up to a rather ugly function logoAddLeadingSlashes

Author: gordonwoodhull

src/core/brand/brand.ts

@@ -29,7 +29,7 @@ import {
 } from "../../resources/types/zod/schema-types.ts";
 import { InternalError } from "../lib/error.ts";
 
-import { join, relative } from "../../deno_ral/path.ts";
+import { dirname, join, relative, resolve } from "../../deno_ral/path.ts";
 import { warnOnce } from "../log.ts";
 import { isCssColorName } from "../css/color-names.ts";
 import {
@@ -38,6 +38,7 @@ import {
   LogoSpecifier,
   LogoSpecifierPathOptional,
 } from "../../resources/types/schema-types.ts";
+import { ensureLeadingSlash } from "../path.ts";
 
 type ProcessedBrandData = {
   color: Record<string, string>;
@@ -390,6 +391,32 @@ export function resolveLogo(
   };
 }
 
+export function logoAddLeadingSlashes(
+  spec: NormalizedLogoLightDarkSpecifier | undefined,
+  brand: LightDarkBrand | undefined,
+  input: string | undefined,
+): NormalizedLogoLightDarkSpecifier | undefined {
+  if (!spec) {
+    return spec;
+  }
+  if (input) {
+    const inputDir = dirname(resolve(input));
+    if (!brand || inputDir === brand.light?.projectDir) {
+      return spec;
+    }
+  }
+  return {
+    light: spec.light && {
+      ...spec.light,
+      path: ensureLeadingSlash(spec.light.path),
+    },
+    dark: spec.dark && {
+      ...spec.dark,
+      path: ensureLeadingSlash(spec.dark.path),
+    },
+  };
+}
+
 // this a typst workaround but might as well write it as a proper function
 export function fillLogoPaths(
   brand: LightDarkBrand | undefined,

src/core/path.ts

@@ -200,6 +200,14 @@ export function removeTrailingSlash(path: string) {
   }
 }
 
+export function ensureLeadingSlash(path: string) {
+  if (path && !path.startsWith("/")) {
+    return "/" + path;
+  } else {
+    return path;
+  }
+}
+
 export function resolveGlobs(
   root: string,
   globs: string[],

src/format/reveal/format-reveal.ts

@@ -79,7 +79,7 @@ import { ProjectContext } from "../../project/types.ts";
 import { titleSlidePartial } from "./format-reveal-title.ts";
 import { registerWriterFormatHandler } from "../format-handlers.ts";
 import { pandocNativeStr } from "../../core/pandoc/codegen.ts";
-import { resolveLogo } from "../../core/brand/brand.ts";
+import { logoAddLeadingSlashes, resolveLogo } from "../../core/brand/brand.ts";
 
 export function revealResolveFormat(format: Format) {
   format.metadata = revealMetadataFilter(format.metadata);
@@ -299,7 +299,7 @@ export function revealjsFormat() {
                   theme["text-highlighting-mode"],
                 ),
               ],
-              [kMarkdownAfterBody]: [revealMarkdownAfterBody(format)],
+              [kMarkdownAfterBody]: [revealMarkdownAfterBody(format, input)],
             },
           },
         );
@@ -378,7 +378,7 @@ export function revealjsFormat() {
   );
 }
 
-function revealMarkdownAfterBody(format: Format) {
+function revealMarkdownAfterBody(format: Format, input: string) {
   let brandMode: "light" | "dark" = "light";
   if (format.metadata[kBrandMode] === "dark") {
     brandMode = "dark";
@@ -387,13 +387,14 @@ function revealMarkdownAfterBody(format: Format) {
   lines.push("::: {.quarto-auto-generated-content style='display: none;'}\n");
   const revealLogo = format
     .metadata[kSlideLogo] as (string | { path: string } | undefined);
-  const logo = resolveLogo(format.render.brand, revealLogo, [
+  let logo = resolveLogo(format.render.brand, revealLogo, [
     "small",
     "medium",
     "large",
   ]);
   if (logo && logo[brandMode]) {
-    const modeLogo = logo[brandMode]!;
+    logo = logoAddLeadingSlashes(logo, format.render.brand, input);
+    const modeLogo = logo![brandMode]!;
     const altText = modeLogo.alt ? `alt="${modeLogo.alt}" ` : "";
     lines.push(
       `<img src="${modeLogo.path}" ${altText}class="slide-logo" />`,

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

@@ -1015,16 +1015,6 @@ async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
 
   // ensure title and search are present
   sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
-  if (sidebar.logo) {
-    // sidebar logo has been normalized
-    const sidebarLogo = sidebar.logo as NormalizedLogoLightDarkSpecifier;
-    if (sidebarLogo.light) {
-      sidebarLogo.light.path = resolveLogo(sidebarLogo.light.path)!;
-    }
-    if (sidebarLogo.dark) {
-      sidebarLogo.dark.path = resolveLogo(sidebarLogo.dark.path)!;
-    }
-  }
   const searchOpts = await searchOptions(project);
   sidebar.search = sidebar.search !== undefined
     ? sidebar.search
@@ -1258,16 +1248,6 @@ async function navbarEjsData(
       : ("-" + (navbar[kCollapseBelow] || "lg")) as LayoutBreak,
     pinned: navbar.pinned !== undefined ? !!navbar.pinned : false,
   };
-  if (data.logo) {
-    // navbar logo has been normalized
-    const navbarLogo = data.logo as NormalizedLogoLightDarkSpecifier;
-    if (navbarLogo.light) {
-      navbarLogo.light.path = resolveLogo(navbarLogo.light.path)!;
-    }
-    if (navbarLogo.dark) {
-      navbarLogo.dark.path = resolveLogo(navbarLogo.dark.path)!;
-    }
-  }
   // if there is no navbar title and it hasn't been set to 'false'
   // then use the site title
   if (!data.title && data.title !== false) {
@@ -1515,14 +1495,6 @@ async function sidebarTitle(sidebar: Sidebar, project: ProjectContext) {
   }
 }
 
-function resolveLogo(logo?: string) {
-  if (logo && !isExternalPath(logo) && !logo.startsWith("/")) {
-    return "/" + logo;
-  } else {
-    return logo;
-  }
-}
-
 async function websiteHeadroom(project: ProjectContext) {
   const { navbar, sidebars } = await websiteNavigationConfig(project);
   if (navbar || sidebars?.length) {

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

@@ -47,7 +47,10 @@ 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 { resolveLogo } from "../../../core/brand/brand.ts";
+import {
+  logoAddLeadingSlashes,
+  resolveLogo,
+} from "../../../core/brand/brand.ts";
 
 export interface Navigation {
   navbar?: Navbar;
@@ -137,11 +140,13 @@ export async function websiteNavigationConfig(project: ProjectContext) {
         navLogo = { path: navLogo, alt: navbar[kLogoAlt] };
       }
     }
-    navbar.logo = resolveLogo(projectBrand, navLogo, [
+    let logo = resolveLogo(projectBrand, navLogo, [
       "small",
       "medium",
       "large",
     ]);
+    logo = logoAddLeadingSlashes(logo, projectBrand, undefined);
+    navbar.logo = logo;
   }
   // read sidebar
   const sidebar = websiteConfig(kSiteSidebar, project.config);
@@ -194,11 +199,13 @@ export async function websiteNavigationConfig(project: ProjectContext) {
         // }
       }
     }
-    sidebars[0].logo = resolveLogo(projectBrand, sideLogo, [
+    let logo = resolveLogo(projectBrand, sideLogo, [
       "medium",
       "small",
       "large",
     ]);
+    logo = logoAddLeadingSlashes(logo, projectBrand, undefined);
+    sidebars[0].logo = logo;
 
     // convert contents: auto into items
     for (const sb of sidebars) {

src/resources/filters/quarto-pre/shortcodes-handlers.lua

@@ -112,6 +112,13 @@ function initShortcodeHandlers()
       return quarto.shortcode.error_output("brand", args, context)
     end
 
+    local add_leading_slash = function(path)
+      if path[1] ~= "/" then
+        return "/" .. path
+      end
+      return path
+    end
+
     if brandCommand == "color" then 
       local brandMode = 'light'
       if #args > 2 then
@@ -167,11 +174,11 @@ function initShortcodeHandlers()
       end
       local images = {}
       if lightLogo then
-        table.insert(images, pandoc.Image(pandoc.Inlines {}, lightLogo.path, "",
+        table.insert(images, pandoc.Image(pandoc.Inlines {}, add_leading_slash(lightLogo.path), "",
           pandoc.Attr("", {"light-content"}, {alt = lightLogo.alt})))
       end
       if darkLogo then
-        table.insert(images, pandoc.Image(pandoc.Inlines {}, darkLogo.path, "",
+        table.insert(images, pandoc.Image(pandoc.Inlines {}, add_leading_slash(darkLogo.path), "",
           pandoc.Attr("", {"dark-content"}, {alt = darkLogo.alt})))
       end
       if context == "block" then

tests/docs/smoke-all/brand/logo/project-subdirs/_quarto-navbar.yml

@@ -0,0 +1,6 @@
+website:
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+      - about.qmd

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

@@ -0,0 +1,8 @@
+website:
+  sidebar:
+    style: "docked"
+    search: false
+    contents:
+      - href: index.qmd
+        text: Home
+      - about.qmd

tests/docs/smoke-all/brand/logo/project-subdirs/_quarto.yml

@@ -0,0 +1,17 @@
+project:
+  type: website
+
+website:
+  title: "tmpsite"
+
+format:
+  html:
+    theme:
+      - cosmo
+      - brand
+
+profile:
+  group:
+    - [navbar, sidebar]
+
+brand: brand/brand.yml

tests/docs/smoke-all/brand/logo/project-subdirs/about.qmd

@@ -0,0 +1,8 @@
+---
+title: "Other"
+---
+
+Testing branding in subdirectories
+
+- [slides, root directory](slides.qmd)
+- [slides, subdirectory](revealjs/slides.qmd)