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

fixes #11982
navbar and sidebar always prepended a slash and still do
(the input document location is not known when they are initialized)

the other formats must call logoAddLeadingSlashes after resolveLogo
this compares the directory of the input and the project directory
if they are different and the path is not an URL, prepend a slash

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,35 @@ export function resolveLogo(
   };
 }
 
+const ensureLeadingSlashIfNotExternal = (path: string) =>
+  isExternalPath(path) ? path : ensureLeadingSlash(path);
+
+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: ensureLeadingSlashIfNotExternal(spec.light.path),
+    },
+    dark: spec.dark && {
+      ...spec.dark,
+      path: ensureLeadingSlashIfNotExternal(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/dashboard/format-dashboard.ts

@@ -66,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 { resolveLogo } from "../../core/brand/brand.ts";
+import { logoAddLeadingSlashes, resolveLogo } from "../../core/brand/brand.ts";
 
 const kDashboardClz = "quarto-dashboard";
 
@@ -130,12 +130,14 @@ export function dashboardFormat() {
             alt: format.metadata[kLogoAlt] as string,
           };
         }
-        format.metadata[kLogo] = resolveLogo(brand, logoSpec, [
+        let logo = resolveLogo(brand, logoSpec, [
           "small",
           "medium",
           "large",
         ]);
+        logo = logoAddLeadingSlashes(logo, brand, input);
 
+        format.metadata[kLogo] = logo;
         const extras: FormatExtras = await baseHtmlFormat.formatExtras(
           input,
           markdown,

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:match '^https?:' or 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