feat(website): enhanced control over navbar and sidebar titles (#13477)

src/project/types/book/book-config.ts

@@ -191,7 +191,6 @@ export async function bookProjectConfig(
   // if we have a top-level 'contents' or 'appendix' fields fold into sidebar
   site[kSiteSidebar] = site[kSiteSidebar] || {};
   const siteSidebar = site[kSiteSidebar] as Metadata;
-  siteSidebar[kSiteTitle] = siteSidebar[kSiteTitle] || book?.[kSiteTitle];
   siteSidebar[kSidebarLogo] = siteSidebar[kSidebarLogo] || book?.[kSidebarLogo];
   siteSidebar[kSidebarLogoHref] = siteSidebar[kSidebarLogoHref] ||
     book?.[kSidebarLogoHref];

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

@@ -1009,13 +1009,15 @@ async function sidebarsEjsData(project: ProjectContext, sidebars: Sidebar[]) {
 async function sidebarEjsData(project: ProjectContext, sidebar: Sidebar) {
   sidebar = ld.cloneDeep(sidebar);
 
+  // ensure title is present
+  sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
+
   // if the sidebar has a title and no id generate the id
   if (sidebar.title && !sidebar.id) {
     sidebar.id = asHtmlId(sidebar.title);
   }
 
-  // ensure title and search are present
-  sidebar.title = await sidebarTitle(sidebar, project) as string | undefined;
+  // ensure search is present
   const searchOpts = await searchOptions(project);
   sidebar.search = sidebar.search !== undefined
     ? sidebar.search
@@ -1251,7 +1253,8 @@ async function navbarEjsData(
   };
   // 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) {
+  const navbarTitle = data.title as unknown as string | boolean | undefined;
+  if (navbarTitle === true || (!navbarTitle && navbarTitle !== false)) {
     data.title = websiteTitle(project.config);
   }
   data.title = data.title || "";
@@ -1479,21 +1482,57 @@ function looksLikeShortCode(href: string) {
 
 async function sidebarTitle(sidebar: Sidebar, project: ProjectContext) {
   const { navbar } = await websiteNavigationConfig(project);
-  if (sidebar.title) {
-    // Title was explicitly set
-    return sidebar.title;
-  } else if (!sidebar.logo) {
-    if (!navbar) {
-      // If there isn't a logo and there isn't a sidebar, use the project title
-      return websiteTitle(project.config);
-    } else {
-      // The navbar will display the title
-      return undefined;
-    }
-  } else {
-    // There is a logo, just let the logo appear
+
+  const sidebarTitleValue = sidebar.title as unknown as string | boolean | undefined;
+  const projectTitle = websiteTitle(project.config);
+
+  // 1. "text": include the custom text
+  if (typeof sidebarTitleValue === "string") {
+    return sidebarTitleValue;
+  }
+
+  // 2. false: no title
+  if (sidebarTitleValue === false) {
     return undefined;
   }
+
+  // 3. true: includes the website/book title
+  if (sidebarTitleValue === true) {
+    return projectTitle;
+  }
+
+  // 4. undefined (title line not included)
+  // include website/book title if and only if (no title is included in navbar AND no logo is included in the sidebar)
+  // Exception: for books, a sidebar logo does not hide the title.
+
+  const hasLogo = (logo?: any) => {
+    if (!logo) return false;
+    if (typeof logo === "string") return true;
+    return !!(logo.light || logo.dark || logo.path);
+  };
+
+  const hasSidebarLogo = hasLogo(sidebar.logo);
+
+  let navbarHasAnyTitle = false;
+  if (navbar) {
+    const navbarTitleValue = navbar.title as unknown as string | boolean | undefined;
+    if (navbarTitleValue !== false) {
+      navbarHasAnyTitle = true;
+    }
+  }
+
+  const isBook = project.config?.project?.[kProjectType] === "book";
+
+  if (!navbarHasAnyTitle) {
+    // Navbar has no title.
+    // Rule: show sidebar title if no logo in sidebar.
+    // Exception: books ignore the sidebar logo constraint.
+    if (!hasSidebarLogo || isBook) {
+      return projectTitle;
+    }
+  }
+
+  return undefined;
 }
 
 async function websiteHeadroom(project: ProjectContext) {

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

@@ -1,6 +1,6 @@
-<% if (navbar.title || navbar.logo) { %>
+<% if (navbar.title || (navbar.logo && (navbar.logo.light || navbar.logo.dark))) { %>
   <div class="navbar-brand-container mx-auto">
-  <% if (navbar.logo) { %>
+  <% if (navbar.logo && (navbar.logo.light || navbar.logo.dark)) { %>
     <a href="<%- navbar['logo-href'] || '/index.html' %>" class="navbar-brand navbar-brand-logo">
     <% if (navbar.logo.light) { %>
     <img src="<%- navbar.logo.light.path %>" alt="<%- navbar.logo.light.alt || '' %>" class="navbar-logo light-content" />

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

@@ -21,9 +21,9 @@
 
     let toolsLocation;
     // Under the title if that will be displayed
-    if (sidebar.title && !navbar) {
+    if (sidebar.title) {
       toolsLocation = "title";
-    } else if (sidebar.logo) {
+    } else if (sidebar.logo && (sidebar.logo.light || sidebar.logo.dark)) {
       toolsLocation = "logo";
     } else if (sidebar.search && sidebar.search !== "overlay") {
       toolsLocation = "search";
@@ -32,9 +32,9 @@
     }
   %>
 
-  <% if (sidebar.logo || (sidebar.title && !navbar)) { %>
-    <div class="pt-lg-2 mt-2 <%= alignCss %> sidebar-header<%= sidebar.logo && sidebar.title ? ' sidebar-header-stacked' : '' %>">
-    <% if (sidebar.logo) { %>
+  <% if ((sidebar.logo && (sidebar.logo.light || sidebar.logo.dark)) || sidebar.title) { %>
+    <div class="pt-lg-2 mt-2 <%= alignCss %> sidebar-header<%= (sidebar.logo && (sidebar.logo.light || sidebar.logo.dark)) && sidebar.title ? ' sidebar-header-stacked' : '' %>">
+    <% if (sidebar.logo && (sidebar.logo.light || sidebar.logo.dark)) { %>
       <a href="<%- sidebar['logo-href'] || '/index.html' %>" class="sidebar-logo-link">
       <% 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"/>
@@ -48,19 +48,15 @@
       <% partial('navtools.ejs', { align: 'start', tools: sidebar.tools, className: 'sidebar-tools-main', darkToggle: sidebar.darkToggle, search: sidebar.search, readerToggle: sidebar.readerToggle, language: language })%>
     <% } %> 
 
-    <% if (!navbar) { %>
     <% if (sidebar.title) { %>
     <div class="sidebar-title mb-0 py-0">
-      <% if (!navbar) { %>
       <a href="/">
       <%- sidebar.title %>
       </a> 
-      <% } %>  
       <% if (needsTools && toolsLocation === "title") { %>
         <% partial('navtools.ejs', { align: 'start', tools: sidebar.tools, className: 'sidebar-tools-main', darkToggle: sidebar.darkToggle, search: sidebar.search, readerToggle: sidebar.readerToggle, language: language })%>
       <% } %>  
     </div>
-    <% } %>
     <% } %>
       </div>
     <% } %>
@@ -97,4 +93,4 @@
   <% } %>
 
 </nav>
-<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" ></div>
+<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" ></div>

src/resources/schema/definitions.yml

@@ -989,7 +989,7 @@
                   anyOf:
                     - string
                     - boolean
-                  description: "The navbar title. Uses the project title if none is specified."
+                  description: "The navbar title. Use a string for custom text, `true` (the default) to use the project title, or `false` to hide the title."
                 logo:
                   ref: logo-light-dark-specifier
                   description: "Specification of image that will be displayed to the left of the title."
@@ -1071,7 +1071,7 @@
                     anyOf:
                       - string
                       - boolean
-                    description: "The sidebar title. Uses the project title if none is specified."
+                    description: "The sidebar title. Use a string for custom text, `true` to use the project title, or `false` to hide the title. If unspecified, the title is shown if there is no navbar title and no sidebar logo (except for books, where a sidebar logo does not hide the title)."
                   logo:
                     ref: logo-light-dark-specifier
                     description: "Specification of image that will be displayed in the sidebar."

tests/docs/books/issue-13477/book-sidebar-logo/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

tests/docs/books/issue-13477/book-sidebar-logo/_quarto.yml

@@ -0,0 +1,9 @@
+project:
+  type: book
+  title: "My Book"
+
+book:
+  chapters:
+    - index.qmd
+  sidebar:
+    logo: logo.png

tests/docs/books/issue-13477/book-sidebar-logo/index.qmd

@@ -0,0 +1,3 @@
+# Preface {.unnumbered}
+
+This is a book.

tests/docs/websites/issue-13477/custom-titles/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

tests/docs/websites/issue-13477/custom-titles/_quarto.yml

@@ -0,0 +1,11 @@
+project:
+  type: website
+  title: "My Website"
+
+website:
+  navbar:
+    title: "Custom Nav"
+  sidebar:
+    title: "Custom Side"
+    contents:
+      - index.qmd

tests/docs/websites/issue-13477/custom-titles/index.qmd

@@ -0,0 +1,4 @@
+---
+title: "Home"
+---
+Hello

tests/docs/websites/issue-13477/navbar-false-sidebar-undefined/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

tests/docs/websites/issue-13477/navbar-false-sidebar-undefined/_quarto.yml

@@ -0,0 +1,10 @@
+project:
+  type: website
+  title: "My Website"
+
+website:
+  navbar:
+    title: false
+  sidebar:
+    contents:
+      - index.qmd

tests/docs/websites/issue-13477/navbar-false-sidebar-undefined/index.qmd

@@ -0,0 +1,4 @@
+---
+title: "Home"
+---
+Hello

tests/docs/websites/issue-13477/navbar-true-sidebar-true/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

tests/docs/websites/issue-13477/navbar-true-sidebar-true/_quarto.yml

@@ -0,0 +1,11 @@
+project:
+  type: website
+  title: "My Website"
+
+website:
+  navbar:
+    title: true
+  sidebar:
+    title: true
+    contents:
+      - index.qmd

tests/docs/websites/issue-13477/navbar-true-sidebar-true/index.qmd

@@ -0,0 +1,4 @@
+---
+title: "Home"
+---
+Hello

tests/docs/websites/issue-13477/no-titles/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb

tests/docs/websites/issue-13477/no-titles/_quarto.yml

@@ -0,0 +1,11 @@
+project:
+  type: website
+  title: "My Website"
+
+website:
+  navbar:
+    title: false
+  sidebar:
+    title: false
+    contents:
+      - index.qmd

tests/docs/websites/issue-13477/no-titles/index.qmd

@@ -0,0 +1,4 @@
+---
+title: "Home"
+---
+Hello