Support alt-text for navbar logo

Fixes  #711

Author: dragonstyle

news/changelog-1.1.md

@@ -38,6 +38,7 @@
 ## Websites
 
 - Correctly align dark/light toggle in navbar (thanks @FabioRosado)
+- Support `navbar:logo-alt` to provide alternate text for navbar logos
 
 ## Books
 

src/project/types.ts

@@ -104,12 +104,14 @@ export type LayoutBreak = "" | "sm" | "md" | "lg" | "xl" | "xxl";
 export const kAriaLabel = "aria-label";
 export const kCollapseLevel = "collapse-level";
 export const kCollapseBelow = "collapse-below";
+export const kLogoAlt = "logo-alt";
 
 export const kSidebarMenus = "sidebar-menus";
 
 export interface Navbar {
   title?: string | false;
   logo?: string;
+  [kLogoAlt]?: string;
   background:
     | "primary"
     | "secondary"

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

@@ -47,7 +47,12 @@ import {
 
 import { kDataQuartoSourceUrl } from "../../../command/render/codetools.ts";
 
-import { kProjectType, ProjectConfig, ProjectContext } from "../../types.ts";
+import {
+  kLogoAlt,
+  kProjectType,
+  ProjectConfig,
+  ProjectContext,
+} from "../../types.ts";
 import { projectOffset, projectOutputDir } from "../../project-shared.ts";
 import { resolveInputTarget } from "../../project-index.ts";
 import {
@@ -947,6 +952,7 @@ async function navbarEjsData(
       : false,
     background: navbar.background || "primary",
     logo: resolveLogo(navbar.logo),
+    [kLogoAlt]: navbar[kLogoAlt],
     collapse,
     [kCollapseBelow]: !collapse
       ? ""

src/resources/editor/tools/vs-code.mjs

@@ -9106,6 +9106,11 @@ var require_yaml_intelligence_resources = __commonJS({
                             description: "Path to a logo image that will be displayed to the left of the title."
                           }
                         },
+                        "logo-alt": {
+                          string: {
+                            description: "Alternate text for the logo image."
+                          }
+                        },
                         background: {
                           anyOf: [
                             {

src/resources/editor/tools/yaml/web-worker.js

@@ -2085,6 +2085,11 @@
                         "description": "Path to a logo image that will be displayed to the left of the title."
                       }
                     },
+                    "logo-alt": {
+                      "string": {
+                        "description": "Alternate text for the logo image."
+                      }
+                    },
                     "background": {
                       "anyOf": [
                         {

src/resources/editor/tools/yaml/yaml-intelligence-resources.json

@@ -10,7 +10,9 @@
   <% if (nav.navbar) { %>  
     <nav class="navbar navbar-expand<%- nav.navbar["collapse-below"] %> navbar-dark <%- nav.navbar.background === "none" || nav.navbar.background === "body" ? "border-bottom" : "" %>">
       <div class="navbar-container container-fluid">
-      <% partial('navbrand.ejs', nav.navbar) %>
+      <% partial('navbrand.ejs', {
+        navbar: nav.navbar
+      }) %>
       <% if (nav.navbar.left || nav.navbar.right) { %>  
         <% if (nav.navbar.collapse) { %>
           <% partial('navtoggle.ejs') %>

src/resources/projects/website/templates/nav-before-body.ejs

@@ -1,10 +1,10 @@
-<% if (title || logo) { %>
+<% if (navbar.title || navbar.logo) { %>
   <a class="navbar-brand" href="/index.html">
-  <% if (logo) { %>
-    <img src="<%- logo %>" alt="" />
+  <% if (navbar.logo) { %>
+    <img src="<%- navbar.logo %>" alt="<%- navbar['logo-alt'] || '' %>" />
   <% } %>
-  <% if (title) { %>
-    <span class="navbar-title"><%- title %></span>
+  <% if (navbar.title) { %>
+    <span class="navbar-title"><%- navbar.title %></span>
   <% } %>
   </a>
 <% } %>

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

@@ -656,6 +656,9 @@
                 logo:
                   path:
                     description: "Path to a logo image that will be displayed to the left of the title."
+                logo-alt:
+                  string:
+                    description: "Alternate text for the logo image."
                 background:
                   anyOf:
                     - enum: