Skip to content

Commit 8b40356

Browse files
gordonwoodhullgordonwoodhull
committed
wip: navbar dark logo
not working yet but most of code in place?
1 parent 523c644 commit 8b40356

File tree

30 files changed

+226
-20
lines changed

30 files changed

+226
-20
lines changed

‎src/core/brand/brand.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,8 @@ export const getFavicon = (brand: Brand): string | undefined => {
283283
};
284284

285285
export async function normalizeLogoSpec(
286-
spec: LogoLightDarkSpecifier,
287286
brand: LightDarkBrand | undefined,
287+
spec: LogoLightDarkSpecifier,
288288
): Promise<NormalizedLogoLightDarkSpecifier> {
289289
const resolveLogo = (mode: "light" | "dark", name: string) => {
290290
const logo = brand?.[mode]?.processedData?.logo;

‎src/project/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export const kSidebarMenus = "sidebar-menus";
152152

153153
export interface Navbar {
154154
title?: string | false;
155-
logo?: string;
155+
logo?: LogoLightDarkSpecifier;
156156
[kLogoAlt]?: string;
157157
[kLogoHref]?: string;
158158
background:

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1247,7 +1247,7 @@ async function navbarEjsData(
12471247
? searchOpts.type
12481248
: false,
12491249
background: navbar.background || "primary",
1250-
logo: resolveLogo(navbar.logo),
1250+
logo: navbar.logo,
12511251
[kLogoAlt]: navbar[kLogoAlt],
12521252
[kLogoHref]: navbar[kLogoHref],
12531253
collapse,
@@ -1256,7 +1256,16 @@ async function navbarEjsData(
12561256
: ("-" + (navbar[kCollapseBelow] || "lg")) as LayoutBreak,
12571257
pinned: navbar.pinned !== undefined ? !!navbar.pinned : false,
12581258
};
1259-
1259+
if (data.logo) {
1260+
// navbar logo has been normalized
1261+
const navbarLogo = navbar.logo as NormalizedLogoLightDarkSpecifier;
1262+
if (navbarLogo.light) {
1263+
navbarLogo.light.path = resolveLogo(navbarLogo.light.path)!;
1264+
}
1265+
if (navbarLogo.dark) {
1266+
navbarLogo.dark.path = resolveLogo(navbarLogo.dark.path)!;
1267+
}
1268+
}
12601269
// if there is no navbar title and it hasn't been set to 'false'
12611270
// then use the site title
12621271
if (!data.title && data.title !== false) {

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

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ProjectContext,
1717
} from "../../types.ts";
1818
import {
19+
kLogoAlt,
1920
Navbar,
2021
NavigationFooter,
2122
NavItem,
@@ -127,7 +128,16 @@ export async function websiteNavigationConfig(project: ProjectContext) {
127128
} else if (typeof navbar !== "object") {
128129
navbar = undefined;
129130
}
130-
131+
if (navbar && navbar.logo) {
132+
let logo = navbar.logo;
133+
if (navbar[kLogoAlt]) {
134+
if (typeof logo === "string") {
135+
logo = { path: logo, alt: navbar[kLogoAlt] };
136+
}
137+
}
138+
const brand = await projectResolveBrand(project);
139+
navbar.logo = await normalizeLogoSpec(brand, logo);
140+
}
131141
// read sidebar
132142
const sidebar = websiteConfig(kSiteSidebar, project.config);
133143
const sidebars =
@@ -153,8 +163,34 @@ export async function websiteNavigationConfig(project: ProjectContext) {
153163

154164
if (sidebars[0].logo) {
155165
// note no document-level customization of brand logo #11309
166+
let logo = sidebars[0].logo;
167+
if (sidebars[0][kLogoAlt]) {
168+
const alt = sidebars[0][kLogoAlt];
169+
if (typeof logo === "string") {
170+
logo = { path: logo, alt };
171+
}
172+
// possible but absurd
173+
// else if ("path" in logo) {
174+
// logo = { ...logo, alt };
175+
// } else {
176+
// logo = {
177+
// light: !logo.light ? undefined : typeof logo.light === "string"
178+
// ? {
179+
// path: logo.light,
180+
// alt,
181+
// }
182+
// : { ...logo.light, alt },
183+
// dark: !logo.dark ? undefined : typeof logo.dark === "string"
184+
// ? {
185+
// path: logo.dark,
186+
// alt,
187+
// }
188+
// : { ...logo.dark, alt },
189+
// };
190+
// }
191+
}
156192
const brand = await projectResolveBrand(project);
157-
sidebars[0].logo = await normalizeLogoSpec(sidebars[0].logo, brand);
193+
sidebars[0].logo = await normalizeLogoSpec(brand, logo);
158194
}
159195

160196
// convert contents: auto into items
@@ -178,32 +214,37 @@ export async function websiteNavigationConfig(project: ProjectContext) {
178214
projectBrand?.light?.processedData.logo && sidebars?.[0]
179215
) {
180216
if (sidebars[0].logo === undefined) {
181-
const logo = projectBrand.light.processedData.logo.medium ??
217+
const light = projectBrand.light.processedData.logo.medium ??
182218
projectBrand.light.processedData.logo.small ??
183219
projectBrand.light.processedData.logo.large;
184-
const darkLogo = projectBrand.dark && (
220+
const dark = projectBrand.dark && (
185221
projectBrand.dark.processedData.logo.medium ??
186222
projectBrand.dark.processedData.logo.small ??
187223
projectBrand.dark.processedData.logo.large
188224
);
189-
if (logo || darkLogo) {
225+
if (light || dark) {
190226
sidebars[0].logo = {
191-
light: logo,
192-
dark: darkLogo,
227+
light,
228+
dark,
193229
};
194230
}
195231
}
196232
}
197233

198234
if (
199-
projectBrand?.light?.processedData && navbar
235+
projectBrand?.light?.processedData.logo && navbar
200236
) {
201-
const logo = projectBrand.light.processedData.logo.small ??
237+
const light = projectBrand.light.processedData.logo.small ??
202238
projectBrand.light.processedData.logo.medium ??
203239
projectBrand.light.processedData.logo.large;
204-
if (logo) {
205-
navbar.logo = logo.path; // TODO: This needs smarts to work on light+dark themes
206-
navbar["logo-alt"] = logo.alt;
240+
const dark = projectBrand.dark?.processedData.logo.small ??
241+
projectBrand.dark?.processedData.logo.medium ??
242+
projectBrand.dark?.processedData.logo.large;
243+
if (light || dark) {
244+
navbar.logo = {
245+
light,
246+
dark,
247+
};
207248
}
208249
}
209250

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
<div class="navbar-brand-container mx-auto">
33
<% if (navbar.logo) { %>
44
<a href="<%- navbar['logo-href'] || '/index.html' %>" class="navbar-brand navbar-brand-logo">
5-
<img src="<%- navbar.logo %>" alt="<%- navbar['logo-alt'] || '' %>" class="navbar-logo" />
5+
<% if (navbar.logo.light) { %>
6+
<img src="<%- navbar.logo.light.path %>" alt="<%- navbar.logo.light.alt || '' %>" class="navbar-logo light-content" />
7+
<% } %>
8+
<% if (navbar.logo.dark) { %>
9+
<img src="<%- navbar.logo.dark.path %>" alt="<%- navbar.logo.dark.alt || '' %>" class="navbar-logo dark-content" />
10+
<% } %>
611
</a>
712
<% } %>
813

‎src/resources/schema/definitions.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -937,8 +937,8 @@
937937
- boolean
938938
description: "The navbar title. Uses the project title if none is specified."
939939
logo:
940-
path:
941-
description: "Path to a logo image that will be displayed to the left of the title."
940+
ref: logo-light-dark-specifier
941+
description: "Specification of image that will be displayed to the left of the title."
942942
logo-alt:
943943
string:
944944
description: "Alternate text for the logo image."
@@ -1020,7 +1020,7 @@
10201020
description: "The sidebar title. Uses the project title if none is specified."
10211021
logo:
10221022
ref: logo-light-dark-specifier
1023-
description: "Speciffication of image that will be displayed in the sidebar."
1023+
description: "Specification of image that will be displayed in the sidebar."
10241024
logo-alt:
10251025
string:
10261026
description: "Alternate text for the logo image."

‎tests/docs/smoke-all/brand/logo/navbar/brand-default/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/.quarto/

‎tests/docs/smoke-all/brand/logo/navbar/brand-default/_brand.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
color:
2+
background:
3+
light: "#fff"
4+
dark: "#111"
5+
foreground:
6+
light: "#111"
7+
dark: "#fff"
8+
logo:
9+
medium:
10+
light: sun-face.png
11+
dark: moon-face.png

‎tests/docs/smoke-all/brand/logo/navbar/brand-default/_quarto.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
project:
2+
type: website
3+
theme:
4+
light: brand
5+
dark: [brand, dark-fixups.scss]
6+
website:
7+
navbar:
8+
style: "docked"
9+
search: true
10+
contents:
11+
- index.qmd
12+
- conclusion.qmd

‎tests/docs/smoke-all/brand/logo/navbar/brand-default/conclusion.qmd‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: conclusion
3+
---

0 commit comments

Comments
 (0)