feat(theme-classic): allow specifying width/height in logo (#5770)

* feat: changed the logo properties to allow width/height specification

* fixup! feat: changed the logo properties to allow width/height specification

* fixup! feat: changed the logo properties to allow width/height specification

* Rework: add fields to logo object

* Fix

* More fixes

* Wrong width!

* No need for optional chaining

* Doc writeup

Co-authored-by: Josh-Cena <[email protected]>

Author: cerkiewny

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

@@ -345,6 +345,27 @@ describe('themeConfig', () => {
     });
   });
 
+  test('should allow width and height specification for logo ', () => {
+    const altTagConfig = {
+      navbar: {
+        logo: {
+          alt: '',
+          src: '/arbitrary-logo.png',
+          srcDark: '/arbitrary-dark-logo.png',
+          width: '20px',
+          height: '20%',
+        },
+      },
+    };
+    expect(testValidateThemeConfig(altTagConfig)).toEqual({
+      ...DEFAULT_CONFIG,
+      navbar: {
+        ...DEFAULT_CONFIG.navbar,
+        ...altTagConfig.navbar,
+      },
+    });
+  });
+
   test('should accept valid prism config', () => {
     const prismConfig = {
       prism: {

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

@@ -52,8 +52,16 @@ function FooterLink({
 const FooterLogo = ({
   sources,
   alt,
-}: Pick<ThemedImageProps, 'sources' | 'alt'>) => (
-  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
+  width,
+  height,
+}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
+  <ThemedImage
+    className="footer__logo"
+    alt={alt}
+    sources={sources}
+    width={width}
+    height={height}
+  />
 );
 
 function Footer(): JSX.Element | null {
@@ -115,7 +123,12 @@ function Footer(): JSX.Element | null {
               <div className="margin-bottom--sm">
                 {logo.href ? (
                   <Link href={logo.href} className={styles.footerLogoLink}>
-                    <FooterLogo alt={logo.alt} sources={sources} />
+                    <FooterLogo
+                      alt={logo.alt}
+                      sources={sources}
+                      width={logo.width}
+                      height={logo.height}
+                    />
                   </Link>
                 ) : (
                   <FooterLogo alt={logo.alt} sources={sources} />

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

@@ -29,7 +29,12 @@ const Logo = (props: Props): JSX.Element => {
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
   const themedImage = (
-    <ThemedImage sources={sources} alt={logo.alt || navbarTitle || title} />
+    <ThemedImage
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={logo.alt || navbarTitle || title}
+    />
   );
 
   return (

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

@@ -290,6 +290,8 @@ const ThemeConfigSchema = 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(),
     }),
@@ -300,6 +302,9 @@ const ThemeConfigSchema = Joi.object({
       alt: Joi.string().allow(''),
       src: Joi.string(),
       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(),
     }),
     copyright: Joi.string(),

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

@@ -22,6 +22,8 @@ export type NavbarItem = {
 export type NavbarLogo = {
   src: string;
   srcDark?: string;
+  width?: string | number;
+  height?: string | number;
   href?: string;
   target?: string;
   alt?: string;
@@ -80,6 +82,8 @@ export type Footer = {
     alt?: string;
     src?: string;
     srcDark?: string;
+    width?: string | number;
+    height?: string | number;
     href?: string;
   };
   copyright?: string;

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

@@ -264,6 +264,8 @@ module.exports = {
       logo: {
         alt: 'Site Logo',
         src: 'img/logo.svg',
+        width: 32,
+        height: 32,
       },
       items: [
         {
@@ -292,6 +294,8 @@ module.exports = {
       logo: {
         alt: 'Facebook Open Source Logo',
         src: 'https://docusaurus.io/img/oss_logo.png',
+        width: 160,
+        height: 51,
       },
       copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
     },

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

@@ -187,6 +187,8 @@ Accepted fields:
 | `src` | `string` | **Required** | URL to the logo image. Base URL is appended by default. |
 | `srcDark` | `string` | `logo.src` | An alternative image URL to use in dark mode. |
 | `href` | `string` | `siteConfig.baseUrl` | Link to navigate to when the logo is clicked. |
+| `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. |
 
 </small>
@@ -205,6 +207,8 @@ module.exports = {
         srcDark: 'img/logo_dark.svg',
         href: 'https://docusaurus.io/',
         target: '_self',
+        width: 32,
+        height: 32,
       },
       // highlight-end
     },
@@ -679,6 +683,8 @@ module.exports = {
         alt: 'Facebook Open Source Logo',
         src: 'img/oss_logo.png',
         href: 'https://opensource.facebook.com',
+        width: 160,
+        height: 51,
       },
       copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
     },

website/docusaurus.config.js

@@ -334,6 +334,8 @@ const config = {
           alt: 'Docusaurus Logo',
           src: 'img/docusaurus.svg',
           srcDark: 'img/docusaurus_keytar.svg',
+          width: 32,
+          height: 32,
         },
         items: [
           {
@@ -487,6 +489,8 @@ const config = {
         logo: {
           alt: 'Facebook Open Source Logo',
           src: 'img/oss_logo.png',
+          width: 160,
+          height: 51,
           href: 'https://opensource.facebook.com',
         },
         copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,