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 <sidachen2003@gmail.com>

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;