@docusaurus/theme-classic 0.0.0-4203 → 0.0.0-4207

package/lib-next/theme/DocSidebarItem/index.js

@@ -34,22 +34,17 @@ const isActiveSidebarItem = (item, activePath) => {
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
 
-export const DocSidebarItems = memo(function DocSidebarItems({
-  items,
-  ...props
-}) {
-  return (
-    <>
-      {items.map((item, index) => (
-        <DocSidebarItem
-          key={index} // sidebar is static, the index does not change
-          item={item}
-          {...props}
-        />
-      ))}
-    </>
-  );
-});
+export const DocSidebarItems = memo(({items, ...props}) => (
+  <>
+    {items.map((item, index) => (
+      <DocSidebarItem
+        key={index} // sidebar is static, the index does not change
+        item={item}
+        {...props}
+      />
+    ))}
+  </>
+));
 export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':

package/lib-next/theme/DocVersionBanner/index.js

@@ -128,7 +128,7 @@ function DocVersionBanner({versionMetadata}) {
     return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
   }
 
-  return <></>;
+  return null;
 }
 
 export default DocVersionBanner;

package/lib-next/theme/Footer/index.js

@@ -42,15 +42,17 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   );
 }
 
-const FooterLogo = ({sources, alt, width, height}) => (
-  <ThemedImage
-    className="footer__logo"
-    alt={alt}
-    sources={sources}
-    width={width}
-    height={height}
-  />
-);
+function FooterLogo({sources, alt, width, height}) {
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={alt}
+      sources={sources}
+      width={width}
+      height={height}
+    />
+  );
+}
 
 function Footer() {
   const {footer} = useThemeConfig();

package/lib-next/theme/Heading/index.js

@@ -10,21 +10,21 @@ import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import './styles.css';
 import styles from './styles.module.css';
-export const MainHeading = function MainHeading({...props}) {
-  return (
-    <header>
-      <h1
-        {...props}
-        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-      >
-        {props.children}
-      </h1>
-    </header>
-  );
-};
+// eslint-disable-next-line react/function-component-definition
+export const MainHeading = ({...props}) => (
+  <header>
+    <h1
+      {...props}
+      id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+    >
+      {props.children}
+    </h1>
+  </header>
+);
 
-const createAnchorHeading = (Tag) =>
-  function TargetComponent({id, ...props}) {
+const createAnchorHeading =
+  (Tag) =>
+  ({id, ...props}) => {
     const {
       navbar: {hideOnScroll},
     } = useThemeConfig();
@@ -57,8 +57,7 @@ const createAnchorHeading = (Tag) =>
     );
   };
 
-const Heading = (headingType) => {
-  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-};
+const Heading = (headingType) =>
+  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
 
 export default Heading;

package/lib-next/theme/IconArrow/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-const IconArrow = (props) => {
+function IconArrow(props) {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
@@ -15,6 +15,6 @@ const IconArrow = (props) => {
       </g>
     </svg>
   );
-};
+}
 
 export default IconArrow;

package/lib-next/theme/IconEdit/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-const IconEdit = ({className, ...restProps}) => {
+function IconEdit({className, ...restProps}) {
   return (
     <svg
       fill="currentColor"
@@ -23,6 +23,6 @@ const IconEdit = ({className, ...restProps}) => {
       </g>
     </svg>
   );
-};
+}
 
 export default IconEdit;

package/lib-next/theme/IconExternalLink/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-const IconExternalLink = ({width = 13.5, height = 13.5}) => {
+function IconExternalLink({width = 13.5, height = 13.5}) {
   return (
     <svg
       width={width}
@@ -21,6 +21,6 @@ const IconExternalLink = ({width = 13.5, height = 13.5}) => {
       />
     </svg>
   );
-};
+}
 
 export default IconExternalLink;

package/lib-next/theme/IconLanguage/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-const IconLanguage = ({width = 20, height = 20, ...props}) => {
+function IconLanguage({width = 20, height = 20, ...props}) {
   return (
     <svg
       viewBox="0 0 20 20"
@@ -20,6 +20,6 @@ const IconLanguage = ({width = 20, height = 20, ...props}) => {
       />
     </svg>
   );
-};
+}
 
 export default IconLanguage;

package/lib-next/theme/IconMenu/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
+function IconMenu({width = 30, height = 30, className, ...restProps}) {
   return (
     <svg
       className={className}
@@ -24,6 +24,6 @@ const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
       />
     </svg>
   );
-};
+}
 
 export default IconMenu;

package/lib-next/theme/LayoutHead/index.js

@@ -94,7 +94,7 @@ export default function LayoutHead(props) {
     <>
       <Head>
         <html lang={htmlLang} dir={htmlDir} />
-        {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+        {favicon && <link rel="icon" href={faviconUrl} />}
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
         <meta name="twitter:card" content="summary_large_image" />

package/lib-next/theme/Logo/index.js

@@ -11,7 +11,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
-const Logo = (props) => {
+function Logo(props) {
   const {
     siteConfig: {title},
   } = useDocusaurusContext();
@@ -48,11 +48,11 @@ const Logo = (props) => {
         (imageClassName ? (
           <div className={imageClassName}>{themedImage}</div>
         ) : (
-          <>{themedImage}</>
+          themedImage
         ))}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );
-};
+}
 
 export default Logo;

package/lib-next/theme/Navbar/index.js

@@ -101,12 +101,13 @@ function useSecondaryMenu({sidebarShown, toggleSidebar}) {
     toggleSidebar,
   });
   const previousContent = usePrevious(content);
-  const [shown, setShown] = useState(() => {
-    // /!\ content is set with useEffect,
-    // so it's not available on mount anyway
-    // "return !!content" => always returns false
-    return false;
-  }); // When content is become available for the first time (set in useEffect)
+  const [shown, setShown] = useState(
+    () =>
+      // /!\ content is set with useEffect,
+      // so it's not available on mount anyway
+      // "return !!content" => always returns false
+      false,
+  ); // When content is become available for the first time (set in useEffect)
   // we set this content to be shown!
 
   useEffect(() => {

package/lib-next/theme/ThemeProvider/index.js

@@ -4,19 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {useMemo} from 'react';
 import useTheme from '@theme/hooks/useTheme';
 import ThemeContext from '@theme/ThemeContext';
 
 function ThemeProvider(props) {
   const {isDarkTheme, setLightTheme, setDarkTheme} = useTheme();
+  const contextValue = useMemo(
+    () => ({
+      isDarkTheme,
+      setLightTheme,
+      setDarkTheme,
+    }),
+    [isDarkTheme, setLightTheme, setDarkTheme],
+  );
   return (
-    <ThemeContext.Provider
-      value={{
-        isDarkTheme,
-        setLightTheme,
-        setDarkTheme,
-      }}>
+    <ThemeContext.Provider value={contextValue}>
       {props.children}
     </ThemeContext.Provider>
   );

package/lib-next/theme/ThemedImage/index.js

@@ -10,7 +10,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import useThemeContext from '@theme/hooks/useThemeContext';
 import styles from './styles.module.css';
 
-const ThemedImage = (props) => {
+function ThemedImage(props) {
   const isBrowser = useIsBrowser();
   const {isDarkTheme} = useThemeContext();
   const {sources, className, alt = '', ...propsRest} = props;
@@ -36,6 +36,6 @@ const ThemedImage = (props) => {
       ))}
     </>
   );
-};
+}
 
 export default ThemedImage;

package/lib-next/theme/Toggle/index.js

@@ -10,17 +10,21 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-const Dark = ({icon, style}) => (
-  <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-    {icon}
-  </span>
-);
+function Dark({icon, style}) {
+  return (
+    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
+      {icon}
+    </span>
+  );
+}
 
-const Light = ({icon, style}) => (
-  <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-    {icon}
-  </span>
-); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+function Light({icon, style}) {
+  return (
+    <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
+      {icon}
+    </span>
+  );
+} // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
 
 const Toggle = memo(
   ({className, icons, checked: defaultChecked, disabled, onChange}) => {

package/lib-next/theme/UserPreferencesProvider/index.js

@@ -4,18 +4,21 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {useMemo} from 'react';
 import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
 import UserPreferencesContext from '@theme/UserPreferencesContext';
 
 function UserPreferencesProvider(props) {
   const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
+  const contextValue = useMemo(
+    () => ({
+      tabGroupChoices,
+      setTabGroupChoices,
+    }),
+    [tabGroupChoices, setTabGroupChoices],
+  );
   return (
-    <UserPreferencesContext.Provider
-      value={{
-        tabGroupChoices,
-        setTabGroupChoices,
-      }}>
+    <UserPreferencesContext.Provider value={contextValue}>
       {props.children}
     </UserPreferencesContext.Provider>
   );

package/lib-next/theme/hooks/useTheme.js

@@ -14,9 +14,8 @@ const themes = {
 };
 
 // Ensure to always return a valid theme even if input is invalid
-const coerceToTheme = (theme) => {
-  return theme === themes.dark ? themes.dark : themes.light;
-};
+const coerceToTheme = (theme) =>
+  theme === themes.dark ? themes.dark : themes.light;
 
 const getInitialTheme = (defaultMode) => {
   if (!ExecutionEnvironment.canUseDOM) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4203",
+  "version": "0.0.0-4207",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4203",
-    "@docusaurus/plugin-content-blog": "0.0.0-4203",
-    "@docusaurus/plugin-content-docs": "0.0.0-4203",
-    "@docusaurus/plugin-content-pages": "0.0.0-4203",
-    "@docusaurus/theme-common": "0.0.0-4203",
-    "@docusaurus/types": "0.0.0-4203",
-    "@docusaurus/utils": "0.0.0-4203",
-    "@docusaurus/utils-validation": "0.0.0-4203",
+    "@docusaurus/core": "0.0.0-4207",
+    "@docusaurus/plugin-content-blog": "0.0.0-4207",
+    "@docusaurus/plugin-content-docs": "0.0.0-4207",
+    "@docusaurus/plugin-content-pages": "0.0.0-4207",
+    "@docusaurus/theme-common": "0.0.0-4207",
+    "@docusaurus/types": "0.0.0-4207",
+    "@docusaurus/utils": "0.0.0-4207",
+    "@docusaurus/utils-validation": "0.0.0-4207",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "chalk": "^4.1.2",
@@ -48,7 +48,7 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4203",
+    "@docusaurus/module-type-aliases": "0.0.0-4207",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "c593f92915e118d87c10015d5db2c42eda4b5ef3"
+  "gitHead": "63059ec789f63c76514839ed417d2ef58456666e"
 }

package/src/index.ts

@@ -27,8 +27,7 @@ const ThemeStorageKey = 'theme';
 const noFlashColorMode = ({
   defaultMode,
   respectPrefersColorScheme,
-}: ThemeConfig['colorMode']) => {
-  return `(function() {
+}: ThemeConfig['colorMode']) => `(function() {
   var defaultMode = '${defaultMode}';
   var respectPrefersColorScheme = ${respectPrefersColorScheme};
 
@@ -63,7 +62,6 @@ const noFlashColorMode = ({
     }
   }
 })();`;
-};
 
 // Duplicated constant. Unfortunately we can't import it from theme-common, as we need to support older nodejs versions without ESM support
 // TODO: import from theme-common once we only support Node.js with ESM support
@@ -136,12 +134,11 @@ export default function docusaurusThemeClassic(
     getTranslationFiles: async () => getTranslationFiles({themeConfig}),
     translateThemeConfig,
 
-    getDefaultCodeTranslationMessages: () => {
-      return readDefaultCodeTranslationMessages({
+    getDefaultCodeTranslationMessages: () =>
+      readDefaultCodeTranslationMessages({
         dirPath: path.resolve(__dirname, '..', 'codeTranslations'),
         locale: currentLocale,
-      });
-    },
+      }),
 
     getClientModules() {
       const modules = [

package/src/theme/BlogPostAuthors/index.tsx

@@ -13,10 +13,13 @@ import BlogPostAuthor from '@theme/BlogPostAuthor';
 import styles from './styles.module.css';
 
 // Component responsible for the authors layout
-export default function BlogPostAuthors({authors, assets}: Props): JSX.Element {
+export default function BlogPostAuthors({
+  authors,
+  assets,
+}: Props): JSX.Element | null {
   const authorsCount = authors.length;
   if (authorsCount === 0) {
-    return <></>;
+    return null;
   }
   return (
     <div className="row margin-top--md margin-bottom--sm">

package/src/theme/BlogSidebar/index.tsx

@@ -28,19 +28,17 @@ export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
         {sidebar.title}
       </div>
       <ul className={styles.sidebarItemList}>
-        {sidebar.items.map((item) => {
-          return (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          );
-        })}
+        {sidebar.items.map((item) => (
+          <li key={item.permalink} className={styles.sidebarItem}>
+            <Link
+              isNavLink
+              to={item.permalink}
+              className={styles.sidebarItemLink}
+              activeClassName={styles.sidebarItemLinkActive}>
+              {item.title}
+            </Link>
+          </li>
+        ))}
       </ul>
     </nav>
   );

package/src/theme/DocItemFooter/index.tsx

@@ -59,7 +59,7 @@ function EditMetaRow({
   );
 }
 
-export default function DocItemFooter(props: Props): JSX.Element {
+export default function DocItemFooter(props: Props): JSX.Element | null {
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
@@ -71,7 +71,7 @@ export default function DocItemFooter(props: Props): JSX.Element {
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
 
   if (!canDisplayFooter) {
-    return <></>;
+    return null;
   }
 
   return (

package/src/theme/DocSidebar/index.tsx

@@ -90,22 +90,21 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
   );
 }
 
+// eslint-disable-next-line react/function-component-definition
 const DocSidebarMobileSecondaryMenu: MobileSecondaryMenuComponent<Props> = ({
   toggleSidebar,
   sidebar,
   path,
-}) => {
-  return (
-    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
-      <DocSidebarItems
-        items={sidebar}
-        activePath={path}
-        onItemClick={() => toggleSidebar()}
-        level={1}
-      />
-    </ul>
-  );
-};
+}) => (
+  <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+    <DocSidebarItems
+      items={sidebar}
+      activePath={path}
+      onItemClick={() => toggleSidebar()}
+      level={1}
+    />
+  </ul>
+);
 
 function DocSidebarMobile(props: Props) {
   return (

package/src/theme/DocSidebarItem/index.tsx

@@ -44,11 +44,8 @@ const isActiveSidebarItem = (
 // Optimize sidebar at each "level"
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
-export const DocSidebarItems = memo(function DocSidebarItems({
-  items,
-  ...props
-}: DocSidebarItemsProps): JSX.Element {
-  return (
+export const DocSidebarItems = memo(
+  ({items, ...props}: DocSidebarItemsProps): JSX.Element => (
     <>
       {items.map((item, index) => (
         <DocSidebarItem
@@ -58,8 +55,8 @@ export const DocSidebarItems = memo(function DocSidebarItems({
         />
       ))}
     </>
-  );
-});
+  ),
+);
 
 export default function DocSidebarItem({
   item,

package/src/theme/DocVersionBanner/index.tsx

@@ -154,11 +154,11 @@ function DocVersionBannerEnabled({versionMetadata}: Props): JSX.Element {
   );
 }
 
-function DocVersionBanner({versionMetadata}: Props): JSX.Element {
+function DocVersionBanner({versionMetadata}: Props): JSX.Element | null {
   if (versionMetadata.banner) {
     return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
   }
-  return <></>;
+  return null;
 }
 
 export default DocVersionBanner;

package/src/theme/Footer/index.tsx

@@ -49,20 +49,22 @@ function FooterLink({
   );
 }
 
-const FooterLogo = ({
+function FooterLogo({
   sources,
   alt,
   width,
   height,
-}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
-  <ThemedImage
-    className="footer__logo"
-    alt={alt}
-    sources={sources}
-    width={width}
-    height={height}
-  />
-);
+}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) {
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={alt}
+      sources={sources}
+      width={width}
+      height={height}
+    />
+  );
+}
 
 function Footer(): JSX.Element | null {
   const {footer} = useThemeConfig();