From 99b3e4cb19b4d8d9af0b255e678db8777b32bca4 Mon Sep 17 00:00:00 2001 From: cerkiewny Date: Fri, 22 Oct 2021 19:04:54 +0200 Subject: [PATCH 1/9] feat: changed the logo properties to allow width/height specification --- .../src/theme/Footer/index.tsx | 4 ++-- .../src/theme/Logo/index.tsx | 22 +++++++++++++++---- .../src/theme/ThemedImage/index.tsx | 4 +++- .../docusaurus-theme-classic/src/types.d.ts | 8 +++++++ .../src/utils/useThemeConfig.ts | 14 ++++++++---- website/docusaurus.config.js | 12 +++++++--- 6 files changed, 50 insertions(+), 14 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx index ecf37cefb56f..103222ce1ab3 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx @@ -61,8 +61,8 @@ function Footer(): JSX.Element | null { const {copyright, links = [], logo = {}} = footer || {}; const sources = { - light: useBaseUrl(logo.src), - dark: useBaseUrl(logo.srcDark || logo.src), + light: useBaseUrl(logo?.src?.uri), + dark: useBaseUrl(logo?.srcDark?.uri || logo?.src?.uri), }; if (!footer) { diff --git a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx index 0054cae8bd28..0de072feff75 100644 --- a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx @@ -19,17 +19,31 @@ const Logo = (props: Props): JSX.Element => { siteConfig: {title}, } = useDocusaurusContext(); const { - navbar: {title: navbarTitle, logo = {src: ''}}, + navbar: {title: navbarTitle, logo = {src: {uri: ''}}}, } = useThemeConfig(); const {imageClassName, titleClassName, ...propsRest} = props; const logoLink = useBaseUrl(logo.href || '/'); const sources = { - light: useBaseUrl(logo.src), - dark: useBaseUrl(logo.srcDark || logo.src), + light: useBaseUrl(logo.src.uri), + dark: useBaseUrl(logo.srcDark?.uri || logo.src.uri), + }; + const widths = { + light: logo.src.width || '100%', + dark: logo.src.width || logo.src.width || '100%', + }; + + const heights = { + light: logo.src.height || '100%', + dark: logo.src.height || logo.src.height || '100%', }; const themedImage = ( - + ); return ( diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx index 77aea828a60f..9b51edc79603 100644 --- a/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx @@ -17,7 +17,7 @@ import styles from './styles.module.css'; const ThemedImage = (props: Props): JSX.Element => { const isBrowser = useIsBrowser(); const {isDarkTheme} = useThemeContext(); - const {sources, className, alt = '', ...propsRest} = props; + const {sources, heights, widths, className, alt = '', ...propsRest} = props; type SourceName = keyof Props['sources']; @@ -36,6 +36,8 @@ const ThemedImage = (props: Props): JSX.Element => { key={sourceName} src={sources[sourceName]} alt={alt} + width={widths && widths[sourceName]} + height={heights && heights[sourceName]} className={clsx( styles.themedImage, styles[`themedImage--${sourceName}`], diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index cabd03ed3e94..416f9c4cee3e 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/packages/docusaurus-theme-classic/src/types.d.ts @@ -555,6 +555,14 @@ declare module '@theme/ThemedImage' { readonly light: string; readonly dark: string; }; + readonly widths?: { + readonly light: number | string; + readonly dark: number | string; + }; + readonly heights?: { + readonly light: number | string; + readonly dark: number | string; + }; } const ThemedImage: (props: Props) => JSX.Element; diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 5159f23766ff..50c384ef59bf 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -11,6 +11,12 @@ import {DeepPartial} from 'utility-types'; export type DocsVersionPersistence = 'localStorage' | 'none'; +export type ImageSettings = { + uri: string; + width?: string | number; + height?: string | number; +}; + // TODO improve types, use unions export type NavbarItem = { type?: string | undefined; @@ -20,8 +26,8 @@ export type NavbarItem = { } & Record; export type NavbarLogo = { - src: string; - srcDark?: string; + src: ImageSettings; + srcDark?: ImageSettings; href?: string; target?: string; alt?: string; @@ -78,8 +84,8 @@ export type Footer = { style: 'light' | 'dark'; logo?: { alt?: string; - src?: string; - srcDark?: string; + src?: ImageSettings; + srcDark?: ImageSettings; href?: string; }; copyright?: string; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 5789a7b23768..0335fb27c51b 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -328,8 +328,12 @@ const config = { title: 'Docusaurus', logo: { alt: 'Docusaurus Logo', - src: 'img/docusaurus.svg', - srcDark: 'img/docusaurus_keytar.svg', + src: { + uri: 'img/docusaurus.svg' + }, + srcDark: { + uri: 'img/docusaurus_keytar.svg' + }, }, items: [ { @@ -482,7 +486,9 @@ const config = { ], logo: { alt: 'Facebook Open Source Logo', - src: 'img/oss_logo.png', + src: { + uri:'img/oss_logo.png' + }, href: 'https://opensource.facebook.com', }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`, From 26b265d2af2a21f6397517a66ca68cbd0ebe560e Mon Sep 17 00:00:00 2001 From: cerkiewny Date: Fri, 22 Oct 2021 19:53:57 +0200 Subject: [PATCH 2/9] fixup! feat: changed the logo properties to allow width/height specification --- .../src/__tests__/validateThemeConfig.test.js | 33 ++++++++++++++++--- .../src/validateThemeConfig.ts | 24 +++++++++++--- 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js index e17027c7d5b5..d6e3f53b9372 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js +++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js @@ -52,8 +52,8 @@ describe('themeConfig', () => { title: 'Docusaurus', logo: { alt: 'Docusaurus Logo', - src: 'img/docusaurus.svg', - srcDark: 'img/docusaurus_keytar.svg', + src: {uri: 'img/docusaurus.svg'}, + srcDark: {uri: 'img/docusaurus_keytar.svg'}, }, items: [ { @@ -86,7 +86,7 @@ describe('themeConfig', () => { ], logo: { alt: 'Facebook Open Source Logo', - src: 'img/oss_logo.png', + src: {uri: 'img/oss_logo.png'}, href: 'https://opensource.facebook.com', }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`, @@ -311,7 +311,7 @@ describe('themeConfig', () => { navbar: { logo: { alt: '', - src: '/arbitrary-logo.png', + src: {uri: '/arbitrary-logo.png'}, }, hideOnScroll: false, }, @@ -330,7 +330,7 @@ describe('themeConfig', () => { footer: { logo: { alt: '', - src: '/arbitrary-logo.png', + src: {uri: '/arbitrary-logo.png'}, }, }, }; @@ -345,6 +345,29 @@ describe('themeConfig', () => { }); }); + test('should allow width and height specification for logo ', () => { + const altTagConfig = { + navbar: { + logo: { + alt: '', + src: {uri: '/arbitrary-logo.png', width: '30px', height: '30%'}, + srcDark: { + uri: '/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: { diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts index d079b2a574a9..5ac9a87d668b 100644 --- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts +++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts @@ -288,8 +288,16 @@ const ThemeConfigSchema = Joi.object({ title: Joi.string().allow('', null), logo: Joi.object({ alt: Joi.string().allow(''), - src: Joi.string().required(), - srcDark: Joi.string(), + src: Joi.object({ + uri: Joi.string().required(), + width: Joi.string(), + height: Joi.string(), + }), + srcDark: Joi.object({ + uri: Joi.string().required(), + width: Joi.string(), + height: Joi.string(), + }), href: Joi.string(), target: Joi.string(), }), @@ -298,8 +306,16 @@ const ThemeConfigSchema = Joi.object({ style: Joi.string().equal('dark', 'light').default('light'), logo: Joi.object({ alt: Joi.string().allow(''), - src: Joi.string(), - srcDark: Joi.string(), + src: Joi.object({ + uri: Joi.string().required(), + width: Joi.string(), + height: Joi.string(), + }), + srcDark: Joi.object({ + uri: Joi.string().required(), + width: Joi.string(), + height: Joi.string(), + }), href: Joi.string(), }), copyright: Joi.string(), From 82beea9d661b6e637092ada3861d90e45108b961 Mon Sep 17 00:00:00 2001 From: cerkiewny Date: Mon, 25 Oct 2021 22:26:02 +0200 Subject: [PATCH 3/9] fixup! feat: changed the logo properties to allow width/height specification --- website/docs/api/docusaurus.config.js.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md index 21a5ba0ce1cd..09ee59c1bce5 100644 --- a/website/docs/api/docusaurus.config.js.md +++ b/website/docs/api/docusaurus.config.js.md @@ -251,7 +251,7 @@ module.exports = { title: 'Site Title', logo: { alt: 'Site Logo', - src: 'img/logo.svg', + src: {uri: 'img/logo.svg'}, }, items: [ { @@ -279,7 +279,7 @@ module.exports = { ], logo: { alt: 'Facebook Open Source Logo', - src: 'https://docusaurus.io/img/oss_logo.png', + src: {uri: 'https://docusaurus.io/img/oss_logo.png'}, }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here }, From 0a8a753b903a19e6e226f8fc420c6120e7995dca Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:25:47 +0800 Subject: [PATCH 4/9] Rework: add fields to logo object --- .../src/__tests__/validateThemeConfig.test.js | 20 ++++++------- .../src/theme/Footer/index.tsx | 23 +++++++++++---- .../src/theme/Logo/index.tsx | 19 ++++-------- .../docusaurus-theme-classic/src/types.d.ts | 8 ----- .../src/validateThemeConfig.ts | 29 ++++++------------- .../src/utils/useThemeConfig.ts | 18 +++++------- website/docs/api/docusaurus.config.js.md | 4 +-- 7 files changed, 51 insertions(+), 70 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js index d6e3f53b9372..afea10a29f9a 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js +++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js @@ -52,8 +52,8 @@ describe('themeConfig', () => { title: 'Docusaurus', logo: { alt: 'Docusaurus Logo', - src: {uri: 'img/docusaurus.svg'}, - srcDark: {uri: 'img/docusaurus_keytar.svg'}, + src: 'img/docusaurus.svg', + srcDark: 'img/docusaurus_keytar.svg', }, items: [ { @@ -86,7 +86,7 @@ describe('themeConfig', () => { ], logo: { alt: 'Facebook Open Source Logo', - src: {uri: 'img/oss_logo.png'}, + src: 'img/oss_logo.png', href: 'https://opensource.facebook.com', }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`, @@ -311,7 +311,7 @@ describe('themeConfig', () => { navbar: { logo: { alt: '', - src: {uri: '/arbitrary-logo.png'}, + src: '/arbitrary-logo.png', }, hideOnScroll: false, }, @@ -330,7 +330,7 @@ describe('themeConfig', () => { footer: { logo: { alt: '', - src: {uri: '/arbitrary-logo.png'}, + src: '/arbitrary-logo.png', }, }, }; @@ -350,12 +350,10 @@ describe('themeConfig', () => { navbar: { logo: { alt: '', - src: {uri: '/arbitrary-logo.png', width: '30px', height: '30%'}, - srcDark: { - uri: '/arbitrary-dark-logo.png', - width: '20px', - height: '20%', - }, + src: '/arbitrary-logo.png', + srcDark: '/arbitrary-dark-logo.png', + width: '20px', + height: '20%', }, }, }; diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx index 103222ce1ab3..eaa275643435 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx @@ -52,8 +52,16 @@ function FooterLink({ const FooterLogo = ({ sources, alt, -}: Pick) => ( - + width, + height, +}: Pick) => ( + ); function Footer(): JSX.Element | null { @@ -61,8 +69,8 @@ function Footer(): JSX.Element | null { const {copyright, links = [], logo = {}} = footer || {}; const sources = { - light: useBaseUrl(logo?.src?.uri), - dark: useBaseUrl(logo?.srcDark?.uri || logo?.src?.uri), + light: useBaseUrl(logo?.src), + dark: useBaseUrl(logo?.srcDark || logo?.src), }; if (!footer) { @@ -115,7 +123,12 @@ function Footer(): JSX.Element | null {
{logo.href ? ( - + ) : ( diff --git a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx index 0de072feff75..ba1aa1653973 100644 --- a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx @@ -19,29 +19,20 @@ const Logo = (props: Props): JSX.Element => { siteConfig: {title}, } = useDocusaurusContext(); const { - navbar: {title: navbarTitle, logo = {src: {uri: ''}}}, + navbar: {title: navbarTitle, logo = {src: ''}}, } = useThemeConfig(); const {imageClassName, titleClassName, ...propsRest} = props; const logoLink = useBaseUrl(logo.href || '/'); const sources = { - light: useBaseUrl(logo.src.uri), - dark: useBaseUrl(logo.srcDark?.uri || logo.src.uri), - }; - const widths = { - light: logo.src.width || '100%', - dark: logo.src.width || logo.src.width || '100%', - }; - - const heights = { - light: logo.src.height || '100%', - dark: logo.src.height || logo.src.height || '100%', + light: useBaseUrl(logo.src), + dark: useBaseUrl(logo.srcDark || logo.src), }; const themedImage = ( ); diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index 4aadbd150c21..b1f9dba5d5f3 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/packages/docusaurus-theme-classic/src/types.d.ts @@ -555,14 +555,6 @@ declare module '@theme/ThemedImage' { readonly light: string; readonly dark: string; }; - readonly widths?: { - readonly light: number | string; - readonly dark: number | string; - }; - readonly heights?: { - readonly light: number | string; - readonly dark: number | string; - }; } const ThemedImage: (props: Props) => JSX.Element; diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts index 5ac9a87d668b..1609a29b1c63 100644 --- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts +++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts @@ -288,16 +288,10 @@ const ThemeConfigSchema = Joi.object({ title: Joi.string().allow('', null), logo: Joi.object({ alt: Joi.string().allow(''), - src: Joi.object({ - uri: Joi.string().required(), - width: Joi.string(), - height: Joi.string(), - }), - srcDark: Joi.object({ - uri: Joi.string().required(), - width: Joi.string(), - height: Joi.string(), - }), + src: Joi.string().required(), + srcDark: Joi.string(), + width: Joi.string(), + height: Joi.string(), href: Joi.string(), target: Joi.string(), }), @@ -306,16 +300,11 @@ const ThemeConfigSchema = Joi.object({ style: Joi.string().equal('dark', 'light').default('light'), logo: Joi.object({ alt: Joi.string().allow(''), - src: Joi.object({ - uri: Joi.string().required(), - width: Joi.string(), - height: Joi.string(), - }), - srcDark: Joi.object({ - uri: Joi.string().required(), - width: Joi.string(), - height: Joi.string(), - }), + 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(), diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 50c384ef59bf..509bf21ebbaf 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -11,12 +11,6 @@ import {DeepPartial} from 'utility-types'; export type DocsVersionPersistence = 'localStorage' | 'none'; -export type ImageSettings = { - uri: string; - width?: string | number; - height?: string | number; -}; - // TODO improve types, use unions export type NavbarItem = { type?: string | undefined; @@ -26,8 +20,10 @@ export type NavbarItem = { } & Record; export type NavbarLogo = { - src: ImageSettings; - srcDark?: ImageSettings; + src: string; + srcDark?: string; + width?: string; + height?: string; href?: string; target?: string; alt?: string; @@ -84,8 +80,10 @@ export type Footer = { style: 'light' | 'dark'; logo?: { alt?: string; - src?: ImageSettings; - srcDark?: ImageSettings; + src?: string; + srcDark?: string; + width?: string | number; + height?: string | number; href?: string; }; copyright?: string; diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md index 48db797928cd..638388dd2b85 100644 --- a/website/docs/api/docusaurus.config.js.md +++ b/website/docs/api/docusaurus.config.js.md @@ -263,7 +263,7 @@ module.exports = { title: 'Site Title', logo: { alt: 'Site Logo', - src: {uri: 'img/logo.svg'}, + src: 'img/logo.svg', }, items: [ { @@ -291,7 +291,7 @@ module.exports = { ], logo: { alt: 'Facebook Open Source Logo', - src: {uri: 'https://docusaurus.io/img/oss_logo.png'}, + src: 'https://docusaurus.io/img/oss_logo.png', }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here }, From 01d71630767745b64247db812847160eaf523aa8 Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:29:52 +0800 Subject: [PATCH 5/9] Fix --- .../docusaurus-theme-classic/src/theme/ThemedImage/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx b/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx index 9b51edc79603..77aea828a60f 100644 --- a/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx @@ -17,7 +17,7 @@ import styles from './styles.module.css'; const ThemedImage = (props: Props): JSX.Element => { const isBrowser = useIsBrowser(); const {isDarkTheme} = useThemeContext(); - const {sources, heights, widths, className, alt = '', ...propsRest} = props; + const {sources, className, alt = '', ...propsRest} = props; type SourceName = keyof Props['sources']; @@ -36,8 +36,6 @@ const ThemedImage = (props: Props): JSX.Element => { key={sourceName} src={sources[sourceName]} alt={alt} - width={widths && widths[sourceName]} - height={heights && heights[sourceName]} className={clsx( styles.themedImage, styles[`themedImage--${sourceName}`], From f67a08617e77bc262adfeae376c05cc4d4353562 Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:36:21 +0800 Subject: [PATCH 6/9] More fixes --- .../src/validateThemeConfig.ts | 4 ++-- .../src/utils/useThemeConfig.ts | 4 ++-- website/docusaurus.config.js | 16 +++++++--------- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts index 1609a29b1c63..18e2146ddeab 100644 --- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts +++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts @@ -290,8 +290,8 @@ const ThemeConfigSchema = Joi.object({ alt: Joi.string().allow(''), src: Joi.string().required(), srcDark: Joi.string(), - width: Joi.string(), - height: Joi.string(), + width: Joi.alternatives().try(Joi.string(), Joi.number()), + height: Joi.alternatives().try(Joi.string(), Joi.number()), href: Joi.string(), target: Joi.string(), }), diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 509bf21ebbaf..e2cdbe28f78d 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -22,8 +22,8 @@ export type NavbarItem = { export type NavbarLogo = { src: string; srcDark?: string; - width?: string; - height?: string; + width?: string | number; + height?: string | number; href?: string; target?: string; alt?: string; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index a0fc5d4f1b83..62b26187380b 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -332,12 +332,10 @@ const config = { title: 'Docusaurus', logo: { alt: 'Docusaurus Logo', - src: { - uri: 'img/docusaurus.svg' - }, - srcDark: { - uri: 'img/docusaurus_keytar.svg' - }, + src: 'img/docusaurus.svg', + srcDark: 'img/docusaurus_keytar.svg', + width: 50, + height: 50, }, items: [ { @@ -490,9 +488,9 @@ const config = { ], logo: { alt: 'Facebook Open Source Logo', - src: { - uri:'img/oss_logo.png' - }, + src: 'img/oss_logo.png', + width: 256, + height: 51, href: 'https://opensource.facebook.com', }, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`, From b1555bf35d88b05a9b19fcfd80819da43cea2f41 Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:47:22 +0800 Subject: [PATCH 7/9] Wrong width! --- website/docusaurus.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 62b26187380b..0da2f9af6b11 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -334,8 +334,8 @@ const config = { alt: 'Docusaurus Logo', src: 'img/docusaurus.svg', srcDark: 'img/docusaurus_keytar.svg', - width: 50, - height: 50, + width: 32, + height: 32, }, items: [ { @@ -489,7 +489,7 @@ const config = { logo: { alt: 'Facebook Open Source Logo', src: 'img/oss_logo.png', - width: 256, + width: 160, height: 51, href: 'https://opensource.facebook.com', }, From 216bf2489b127ad4a2cb9fc8e942d02666fa9621 Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:53:08 +0800 Subject: [PATCH 8/9] No need for optional chaining --- packages/docusaurus-theme-classic/src/theme/Footer/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx index eaa275643435..3e5281eeebf6 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx @@ -69,8 +69,8 @@ function Footer(): JSX.Element | null { const {copyright, links = [], logo = {}} = footer || {}; const sources = { - light: useBaseUrl(logo?.src), - dark: useBaseUrl(logo?.srcDark || logo?.src), + light: useBaseUrl(logo.src), + dark: useBaseUrl(logo.srcDark || logo.src), }; if (!footer) { From 55c68e3d947b9a2b6a93bec969b43fb9ef491edc Mon Sep 17 00:00:00 2001 From: Josh-Cena Date: Mon, 1 Nov 2021 17:58:03 +0800 Subject: [PATCH 9/9] Doc writeup --- website/docs/api/docusaurus.config.js.md | 4 ++++ website/docs/api/themes/theme-configuration.md | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md index 638388dd2b85..92fe87b4e7f2 100644 --- a/website/docs/api/docusaurus.config.js.md +++ b/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 }, diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md index af90e16d4bd1..4b91fad475e7 100644 --- a/website/docs/api/themes/theme-configuration.md +++ b/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` | string \| number | `undefined` | Specifies the `width` attribute. | +| `height` | string \| number | `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. | @@ -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.`, },