@docusaurus/theme-classic 0.0.0-5142 → 0.0.0-5146

package/lib/theme/Footer/Logo/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
@@ -17,11 +18,12 @@ function LogoImage({logo}) {
   };
   return (
     <ThemedImage
-      className="footer__logo"
+      className={clsx('footer__logo', logo.className)}
       alt={logo.alt}
       sources={sources}
       width={logo.width}
       height={logo.height}
+      style={logo.style}
     />
   );
 }

package/lib/theme/Logo/index.js

@@ -10,38 +10,56 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import ThemedImage from '@theme/ThemedImage';
-export default function Logo(props) {
-  const {
-    siteConfig: {title},
-  } = useDocusaurusContext();
-  const {
-    navbar: {title: navbarTitle, logo = {src: ''}},
-  } = useThemeConfig();
-  const {imageClassName, titleClassName, ...propsRest} = props;
-  const logoLink = useBaseUrl(logo.href || '/');
+function LogoThemedImage({logo, alt, imageClassName}) {
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
   const themedImage = (
     <ThemedImage
+      className={logo.className}
       sources={sources}
       height={logo.height}
       width={logo.width}
-      alt={logo.alt || navbarTitle || title}
+      alt={alt}
+      style={logo.style}
     />
   );
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+export default function Logo(props) {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
   return (
     <Link
       to={logoLink}
       {...propsRest}
-      {...(logo.target && {target: logo.target})}>
-      {logo.src &&
-        (imageClassName ? (
-          <div className={imageClassName}>{themedImage}</div>
-        ) : (
-          themedImage
-        ))}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

package/lib/validateThemeConfig.js

@@ -268,6 +268,17 @@ const FooterLinkItemSchema = utils_validation_1.Joi.object({
 const CustomCssSchema = utils_validation_1.Joi.alternatives()
     .try(utils_validation_1.Joi.array().items(utils_validation_1.Joi.string().required()), utils_validation_1.Joi.string().required())
     .optional();
+const LogoSchema = utils_validation_1.Joi.object({
+    alt: utils_validation_1.Joi.string().allow(''),
+    src: utils_validation_1.Joi.string().required(),
+    srcDark: utils_validation_1.Joi.string(),
+    width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
+    height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
+    href: utils_validation_1.Joi.string(),
+    target: utils_validation_1.Joi.string(),
+    style: utils_validation_1.Joi.object(),
+    className: utils_validation_1.Joi.string(),
+});
 exports.ThemeConfigSchema = utils_validation_1.Joi.object({
     // TODO temporary (@alpha-58)
     // @ts-expect-error: forbidden
@@ -309,28 +320,11 @@ exports.ThemeConfigSchema = utils_validation_1.Joi.object({
             .items(NavbarItemSchema)
             .default(exports.DEFAULT_CONFIG.navbar.items),
         title: utils_validation_1.Joi.string().allow('', null),
-        logo: utils_validation_1.Joi.object({
-            alt: utils_validation_1.Joi.string().allow(''),
-            src: utils_validation_1.Joi.string().required(),
-            srcDark: utils_validation_1.Joi.string(),
-            width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            href: utils_validation_1.Joi.string(),
-            target: utils_validation_1.Joi.string(),
-        }),
+        logo: LogoSchema,
     }).default(exports.DEFAULT_CONFIG.navbar),
     footer: utils_validation_1.Joi.object({
         style: utils_validation_1.Joi.string().equal('dark', 'light').default('light'),
-        logo: utils_validation_1.Joi.object({
-            alt: utils_validation_1.Joi.string().allow(''),
-            src: utils_validation_1.Joi.string().required(),
-            srcDark: utils_validation_1.Joi.string(),
-            // TODO infer this from reading the image
-            width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            href: utils_validation_1.Joi.string(),
-            target: utils_validation_1.Joi.string(),
-        }),
+        logo: LogoSchema,
         copyright: utils_validation_1.Joi.string(),
         links: utils_validation_1.Joi.alternatives(utils_validation_1.Joi.array().items(utils_validation_1.Joi.object({
             title: utils_validation_1.Joi.string().allow(null).default(null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5142",
+  "version": "0.0.0-5146",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,22 +20,22 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5142",
-    "@docusaurus/mdx-loader": "0.0.0-5142",
-    "@docusaurus/module-type-aliases": "0.0.0-5142",
-    "@docusaurus/plugin-content-blog": "0.0.0-5142",
-    "@docusaurus/plugin-content-docs": "0.0.0-5142",
-    "@docusaurus/plugin-content-pages": "0.0.0-5142",
-    "@docusaurus/theme-common": "0.0.0-5142",
-    "@docusaurus/theme-translations": "0.0.0-5142",
-    "@docusaurus/types": "0.0.0-5142",
-    "@docusaurus/utils": "0.0.0-5142",
-    "@docusaurus/utils-common": "0.0.0-5142",
-    "@docusaurus/utils-validation": "0.0.0-5142",
+    "@docusaurus/core": "0.0.0-5146",
+    "@docusaurus/mdx-loader": "0.0.0-5146",
+    "@docusaurus/module-type-aliases": "0.0.0-5146",
+    "@docusaurus/plugin-content-blog": "0.0.0-5146",
+    "@docusaurus/plugin-content-docs": "0.0.0-5146",
+    "@docusaurus/plugin-content-pages": "0.0.0-5146",
+    "@docusaurus/theme-common": "0.0.0-5146",
+    "@docusaurus/theme-translations": "0.0.0-5146",
+    "@docusaurus/types": "0.0.0-5146",
+    "@docusaurus/utils": "0.0.0-5146",
+    "@docusaurus/utils-common": "0.0.0-5146",
+    "@docusaurus/utils-validation": "0.0.0-5146",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.39",
+    "infima": "0.2.0-alpha.40",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.14",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "e791a64c45af1206bea392117ff42413f85d7bdb"
+  "gitHead": "7b091c7f5058edd938bfbb3f846822413184c6e0"
 }

package/src/theme/Footer/Logo/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
@@ -21,11 +22,12 @@ function LogoImage({logo}: Props) {
   };
   return (
     <ThemedImage
-      className="footer__logo"
+      className={clsx('footer__logo', logo.className)}
       alt={logo.alt}
       sources={sources}
       width={logo.width}
       height={logo.height}
+      style={logo.style}
     />
   );
 }

package/src/theme/Logo/index.tsx

@@ -9,44 +9,74 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, type NavbarLogo} from '@docusaurus/theme-common';
 import ThemedImage from '@theme/ThemedImage';
 import type {Props} from '@theme/Logo';
 
-export default function Logo(props: Props): JSX.Element {
-  const {
-    siteConfig: {title},
-  } = useDocusaurusContext();
-  const {
-    navbar: {title: navbarTitle, logo = {src: ''}},
-  } = useThemeConfig();
-
-  const {imageClassName, titleClassName, ...propsRest} = props;
-  const logoLink = useBaseUrl(logo.href || '/');
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
   const themedImage = (
     <ThemedImage
+      className={logo.className}
       sources={sources}
       height={logo.height}
       width={logo.width}
-      alt={logo.alt || navbarTitle || title}
+      alt={alt}
+      style={logo.style}
     />
   );
 
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): JSX.Element {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
   return (
     <Link
       to={logoLink}
       {...propsRest}
-      {...(logo.target && {target: logo.target})}>
-      {logo.src &&
-        (imageClassName ? (
-          <div className={imageClassName}>{themedImage}</div>
-        ) : (
-          themedImage
-        ))}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

package/src/validateThemeConfig.ts

@@ -300,6 +300,18 @@ const CustomCssSchema = Joi.alternatives()
   .try(Joi.array().items(Joi.string().required()), Joi.string().required())
   .optional();
 
+const LogoSchema = Joi.object({
+  alt: Joi.string().allow(''),
+  src: Joi.string().required(),
+  srcDark: Joi.string(),
+  width: Joi.alternatives().try(Joi.string(), Joi.number()),
+  height: Joi.alternatives().try(Joi.string(), Joi.number()),
+  href: Joi.string(),
+  target: Joi.string(),
+  style: Joi.object(),
+  className: Joi.string(),
+});
+
 export const ThemeConfigSchema = Joi.object<ThemeConfig>({
   // TODO temporary (@alpha-58)
   // @ts-expect-error: forbidden
@@ -344,28 +356,11 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
       .items(NavbarItemSchema)
       .default(DEFAULT_CONFIG.navbar.items),
     title: Joi.string().allow('', null),
-    logo: Joi.object({
-      alt: Joi.string().allow(''),
-      src: Joi.string().required(),
-      srcDark: Joi.string(),
-      width: Joi.alternatives().try(Joi.string(), Joi.number()),
-      height: Joi.alternatives().try(Joi.string(), Joi.number()),
-      href: Joi.string(),
-      target: Joi.string(),
-    }),
+    logo: LogoSchema,
   }).default(DEFAULT_CONFIG.navbar),
   footer: Joi.object({
     style: Joi.string().equal('dark', 'light').default('light'),
-    logo: Joi.object({
-      alt: Joi.string().allow(''),
-      src: Joi.string().required(),
-      srcDark: Joi.string(),
-      // TODO infer this from reading the image
-      width: Joi.alternatives().try(Joi.string(), Joi.number()),
-      height: Joi.alternatives().try(Joi.string(), Joi.number()),
-      href: Joi.string(),
-      target: Joi.string(),
-    }),
+    logo: LogoSchema,
     copyright: Joi.string(),
     links: Joi.alternatives(
       Joi.array().items(