feat(theme-classic): themeConfig navbar/footer logos accept className/style + update Meta Open-Source Logo (#7643)

packages/create-docusaurus/templates/facebook/docusaurus.config.js

@@ -148,7 +148,7 @@ const config = {
           alt: 'Meta Open Source Logo',
           // This default includes a positive & negative version, allowing for
           // appropriate use depending on your site's style.
-          src: 'img/meta_opensource_logo_negative.png',
+          src: '/img/meta_opensource_logo_negative.svg',
           href: 'https://opensource.fb.com',
         },
         // Please do not remove the credits, help to publicize Docusaurus :)

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts

@@ -68,6 +68,11 @@ describe('themeConfig', () => {
           alt: 'Docusaurus Logo',
           src: 'img/docusaurus.svg',
           srcDark: 'img/docusaurus_keytar.svg',
+          target: '_self',
+          className: 'navbar__logo__custom',
+          style: {
+            maxWidth: 42,
+          },
         },
         items: [
           {
@@ -99,10 +104,14 @@ describe('themeConfig', () => {
           },
         ],
         logo: {
-          alt: 'Facebook Open Source Logo',
+          alt: 'Meta Open Source Logo',
-          src: 'img/oss_logo.png',
+          src: 'img/footer_logo.png',
           href: 'https://opensource.facebook.com',
           target: '_self',
+          className: 'footer__logo__custom',
+          style: {
+            maxWidth: 42,
+          },
         },
         copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
       },

packages/docusaurus-theme-classic/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}
     />
   );
 }

packages/docusaurus-theme-classic/src/theme/Logo/index.tsx

@@ -9,24 +9,53 @@ 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';
 
+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={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 = {src: ''}},
+    navbar: {title: navbarTitle, logo},
   } = useThemeConfig();
 
   const {imageClassName, titleClassName, ...propsRest} = props;
-  const logoLink = useBaseUrl(logo.href || '/');
+  const logoLink = useBaseUrl(logo?.href || '/');
-  const sources = {
-    light: useBaseUrl(logo.src),
-    dark: useBaseUrl(logo.srcDark || logo.src),
-  };
 
   // If visible title is shown, fallback alt text should be
   // an empty string to mark the logo as decorative.
@@ -34,28 +63,20 @@ export default function Logo(props: Props): JSX.Element {
 
   // Use logo alt text if provided (including empty string),
   // and provide a sensible fallback otherwise.
-  const alt = logo.alt ?? fallbackAlt;
+  const alt = logo?.alt ?? fallbackAlt;
-
-  const themedImage = (
-    <ThemedImage
-      sources={sources}
-      height={logo.height}
-      width={logo.width}
-      alt={alt}
-    />
-  );
 
   return (
     <Link
       to={logoLink}
       {...propsRest}
-      {...(logo.target && {target: logo.target})}>
+      {...(logo?.target && {target: logo.target})}>
-      {logo.src &&
+      {logo && (
-        (imageClassName ? (
+        <LogoThemedImage
-          <div className={imageClassName}>{themedImage}</div>
+          logo={logo}
-        ) : (
+          alt={alt}
-          themedImage
+          imageClassName={imageClassName}
-        ))}
+        />
+      )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

packages/docusaurus-theme-classic/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({
+    logo: LogoSchema,
-      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(),
-    }),
   }).default(DEFAULT_CONFIG.navbar),
   footer: Joi.object({
     style: Joi.string().equal('dark', 'light').default('light'),
-    logo: Joi.object({
+    logo: LogoSchema,
-      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(),
-    }),
     copyright: Joi.string(),
     links: Joi.alternatives(
       Joi.array().items(

packages/docusaurus-theme-common/src/utils/useThemeConfig.ts

@@ -20,16 +20,20 @@ export type NavbarItem = {
   position?: 'left' | 'right';
 } & {[key: string]: unknown};
 
-export type NavbarLogo = {
+type BaseLogo = {
+  alt?: string;
   src: string;
   srcDark?: string;
+  href?: string;
   width?: string | number;
   height?: string | number;
-  href?: string;
   target?: string;
-  alt?: string;
+  style?: object;
+  className?: string;
 };
 
+export type NavbarLogo = BaseLogo;
+
 // TODO improve
 export type Navbar = {
   style?: 'dark' | 'primary';
@@ -69,15 +73,7 @@ export type FooterLinkItem = {
   prependBaseUrlToHref?: string;
 } & {[key: string]: unknown};
 
-export type FooterLogo = {
+export type FooterLogo = BaseLogo;
-  alt?: string;
-  src: string;
-  srcDark?: string;
-  width?: string | number;
-  height?: string | number;
-  target?: string;
-  href?: string;
-};
 
 export type FooterBase = {
   style: 'light' | 'dark';

website/docs/api/docusaurus.config.js.md

@@ -334,8 +334,9 @@ module.exports = {
         // ... other links
       ],
       logo: {
-        alt: 'Facebook Open Source Logo',
+        alt: 'Meta Open Source Logo',
-        src: 'https://docusaurus.io/img/oss_logo.png',
+        src: 'img/meta_oss_logo.png',
+        href: 'https://opensource.fb.com',
         width: 160,
         height: 51,
       },

website/docs/api/themes/theme-configuration.md

@@ -199,6 +199,8 @@ Accepted fields:
 | `width` | <code>string \| number</code> | `undefined` | Specifies the `width` attribute. |
 | `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. |
 | `target` | `string` | Calculated based on `href` (external links will open in a new tab, all others in the current one). | The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise. |
+| `className` | `string` | `undefined` | CSS class applied to the image. |
+| `style` | `object` | `undefined` | CSS inline style object. React/JSX flavor, using camelCase properties. |
 
 ```mdx-code-block
 </APITable>
@@ -220,6 +222,8 @@ module.exports = {
         target: '_self',
         width: 32,
         height: 32,
+        className: 'custom-navbar-logo-class',
+        style: {border: 'solid red'},
       },
       // highlight-end
     },
@@ -858,9 +862,9 @@ module.exports = {
     // highlight-start
     footer: {
       logo: {
-        alt: 'Facebook Open Source Logo',
+        alt: 'Meta Open Source Logo',
-        src: 'img/oss_logo.png',
+        src: 'img/meta_oss_logo.png',
-        href: 'https://opensource.facebook.com',
+        href: 'https://opensource.fb.com',
         width: 160,
         height: 51,
       },

website/docs/migration/migration-manual.md

@@ -223,8 +223,8 @@ module.exports = {
   themeConfig: {
     footer: {
       logo: {
-        alt: 'Facebook Open Source Logo',
+        alt: 'Meta Open Source Logo',
-        src: 'https://docusaurus.io/img/oss_logo.png',
+        src: '/img/meta_oss_logo.png',
         href: 'https://opensource.facebook.com/',
       },
       copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here.
@@ -507,8 +507,8 @@ module.exports = {
   themeConfig: {
     footer: {
       logo: {
-        alt: 'Facebook Open Source Logo',
+        alt: 'Meta Open Source Logo',
-        src: 'img/oss_logo.png',
+        src: '/img/meta_oss_logo.png',
         href: 'https://opensource.facebook.com',
       },
     },

website/docusaurus.config-blog-only.js

@@ -57,14 +57,5 @@ module.exports = {
         srcDark: 'img/docusaurus_keytar.svg',
       },
     },
-    footer: {
-      style: 'dark',
-      logo: {
-        alt: 'Facebook Open Source Logo',
-        src: 'img/oss_logo.png',
-        href: 'https://opensource.facebook.com',
-      },
-      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
-    },
   },
 };

website/docusaurus.config.js

@@ -589,13 +589,11 @@ const config = {
           },
         ],
         logo: {
-          alt: 'Facebook Open Source Logo',
+          alt: 'Meta Open Source Logo',
-          src: 'img/oss_logo.png',
+          src: '/img/meta_opensource_logo_negative.svg',
-          width: 160,
+          href: 'https://opensource.fb.com',
-          height: 51,
-          href: 'https://opensource.facebook.com',
         },
-        copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`,
       },
     }),
 };