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 81923fc56250..000000000000 Binary files a/website/static/img/oss_logo.png and /dev/null differ