From 42ab07f62fc07ec746c7b90f93b96f03f694efe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Thu, 23 Jun 2022 11:22:27 +0200 Subject: [PATCH] feat(theme-classic): themeConfig navbar/footer logos accept className/style + update Meta Open-Source Logo (#7643) --- .../templates/facebook/docusaurus.config.js | 2 +- .../src/__tests__/validateThemeConfig.test.ts | 13 +++- .../src/theme/Footer/Logo/index.tsx | 4 +- .../src/theme/Logo/index.tsx | 69 ++++++++++++------ .../src/validateThemeConfig.ts | 33 ++++----- .../src/utils/useThemeConfig.ts | 20 ++--- website/docs/api/docusaurus.config.js.md | 5 +- .../docs/api/themes/theme-configuration.md | 10 ++- website/docs/migration/migration-manual.md | 8 +- website/docusaurus.config-blog-only.js | 9 --- website/docusaurus.config.js | 10 +-- website/static/img/meta_opensource_logo.svg | 1 + .../img/meta_opensource_logo_negative.svg | 1 + website/static/img/oss_logo.png | Bin 4728 -> 0 bytes 14 files changed, 102 insertions(+), 83 deletions(-) create mode 100644 website/static/img/meta_opensource_logo.svg create mode 100644 website/static/img/meta_opensource_logo_negative.svg delete mode 100644 website/static/img/oss_logo.png diff --git a/packages/create-docusaurus/templates/facebook/docusaurus.config.js b/packages/create-docusaurus/templates/facebook/docusaurus.config.js index 34ce59f52aa8..c877fbcb0476 100644 --- a/packages/create-docusaurus/templates/facebook/docusaurus.config.js +++ b/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 :) diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts index 9c8bb7a79e60..6be029ae904a 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts +++ b/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', - src: 'img/oss_logo.png', + alt: 'Meta Open Source Logo', + 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.`, }, diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx index b2adfc1f000b..ebd8e9fa3233 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/Logo/index.tsx +++ b/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 ( ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx index 5731cde71242..56b695a0a8ef 100644 --- a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx +++ b/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 = ( + + ); + + // Is this extra div really necessary? + // introduced in https://github.com/facebook/docusaurus/pull/5666 + return imageClassName ? ( +
{themedImage}
+ ) : ( + 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 sources = { - light: useBaseUrl(logo.src), - dark: useBaseUrl(logo.srcDark || logo.src), - }; + const logoLink = useBaseUrl(logo?.href || '/'); // 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 themedImage = ( - - ); + const alt = logo?.alt ?? fallbackAlt; return ( - {logo.src && - (imageClassName ? ( -
{themedImage}
- ) : ( - themedImage - ))} + {...(logo?.target && {target: logo.target})}> + {logo && ( + + )} {navbarTitle != null && {navbarTitle}} ); diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts index 3ce3c618d7a5..a5a91a2dcb30 100644 --- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts +++ b/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({ // TODO temporary (@alpha-58) // @ts-expect-error: forbidden @@ -344,28 +356,11 @@ export const ThemeConfigSchema = Joi.object({ .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( diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 400b520bf502..17b4fbda6b81 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/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 = { - alt?: string; - src: string; - srcDark?: string; - width?: string | number; - height?: string | number; - target?: string; - href?: string; -}; +export type FooterLogo = BaseLogo; export type FooterBase = { style: 'light' | 'dark'; diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md index 5a87d2a86ba2..6aea4f53b140 100644 --- a/website/docs/api/docusaurus.config.js.md +++ b/website/docs/api/docusaurus.config.js.md @@ -334,8 +334,9 @@ module.exports = { // ... other links ], logo: { - alt: 'Facebook Open Source Logo', - src: 'https://docusaurus.io/img/oss_logo.png', + alt: 'Meta Open Source Logo', + src: 'img/meta_oss_logo.png', + href: 'https://opensource.fb.com', width: 160, height: 51, }, diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md index 356d61f62a10..5ad039269351 100644 --- a/website/docs/api/themes/theme-configuration.md +++ b/website/docs/api/themes/theme-configuration.md @@ -199,6 +199,8 @@ Accepted fields: | `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. | +| `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 @@ -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', - src: 'img/oss_logo.png', - href: 'https://opensource.facebook.com', + alt: 'Meta Open Source Logo', + src: 'img/meta_oss_logo.png', + href: 'https://opensource.fb.com', width: 160, height: 51, }, diff --git a/website/docs/migration/migration-manual.md b/website/docs/migration/migration-manual.md index 804a3ca52a86..750246954631 100644 --- a/website/docs/migration/migration-manual.md +++ b/website/docs/migration/migration-manual.md @@ -223,8 +223,8 @@ module.exports = { themeConfig: { footer: { logo: { - alt: 'Facebook Open Source Logo', - src: 'https://docusaurus.io/img/oss_logo.png', + alt: 'Meta Open Source Logo', + 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', - src: 'img/oss_logo.png', + alt: 'Meta Open Source Logo', + src: '/img/meta_oss_logo.png', href: 'https://opensource.facebook.com', }, }, diff --git a/website/docusaurus.config-blog-only.js b/website/docusaurus.config-blog-only.js index 979392c9b063..a5ba77d044f9 100644 --- a/website/docusaurus.config-blog-only.js +++ b/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.`, - }, }, }; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 19b205fc0a44..022ba4cf7762 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -589,13 +589,11 @@ const config = { }, ], logo: { - alt: 'Facebook Open Source Logo', - src: 'img/oss_logo.png', - width: 160, - height: 51, - href: 'https://opensource.facebook.com', + alt: 'Meta Open Source Logo', + src: '/img/meta_opensource_logo_negative.svg', + href: 'https://opensource.fb.com', }, - copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`, }, }), }; diff --git a/website/static/img/meta_opensource_logo.svg b/website/static/img/meta_opensource_logo.svg new file mode 100644 index 000000000000..83a217548497 --- /dev/null +++ b/website/static/img/meta_opensource_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/meta_opensource_logo_negative.svg b/website/static/img/meta_opensource_logo_negative.svg new file mode 100644 index 000000000000..b36a423e3bff --- /dev/null +++ b/website/static/img/meta_opensource_logo_negative.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/oss_logo.png b/website/static/img/oss_logo.png deleted file mode 100644 index 81923fc56250f9ccb038dd1c605e772846100290..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4728 zcmV-;5{K=HP)35VHbPD=^(Y6;?`BW{RiQ%nD4e zz)Gtoa`RM1E>wqJfut3LUcr@Dz*lGxjUfO8N&QjAcMeakuZSN4m=8090pR6%j$@-c zn6v=I0PX=i1Bhp%eg+2zhrPl(HUV@8lL){Nz=ibF1AyUd)L*%7a&R~^0_YAVAqoDa z;k7r?2F9+d930Mo0J?*TPlA6_BH0UoWH#!juFD)88b|=l&W{!9zQ8kp(D3^c5rOj$ zI5_M8pAKl}FR*sZJ3j$%rFrEQK%`Rb zyMswUrh+MLJR9|=t{WX3PKW?V-5=77t->4D9{$84uO8*qHuwkP*{Hv8-RavsuBRH-ebdz zyCil0;HtMpgrN&7J}!m;0{ZV5>$s4nA)*H)2jdSx08J7ui#-NMBPk7hHmGcnG<2+` z*!XO&>F=f?VVdScgZsjc04&w(liamu*kveiD%*}j0Kd!hnIiy40K3Ac0s+bl!vBnQ z`0h#C)})R2WdEyh0}3l9qH}O?J^%|9dS^>)-W&m`zX9Ga=`G1doaPuADyC%y7CiHsx``N-51R0FRW%zhr*43Iu;l@5*&v zSW6i`iH^&0NPYuZ|0el1SPu_u- zci;i|O5~%$J%Ee|r49+KW}|)tpra}4qQ*ct6p9Ae6$zT^J9;$eFH4kHl;+Bk1Rf3M z-<@G5Z_#f$GxdVT$GCtr?+x1St)b0|+J-yKqY4_)Q3ycB!)(;|>&EVTbNJpIQ^SCH z1Mn^HAjmry=beq}m3J`BI|#{EeARUHPj8OYo7c0MXQTdNHtL5&I𝔗HFrw#yn8{ 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