@docusaurus/theme-classic 0.0.0-4205 → 0.0.0-4209

package/src/theme/Heading/index.tsx

@@ -16,23 +16,21 @@ import styles from './styles.module.css';
 
 type HeadingComponent = (props: Props) => JSX.Element;
 
-export const MainHeading: HeadingComponent = 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: HeadingComponent = ({...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: HeadingType,
-): ((props: Props) => JSX.Element) =>
-  function TargetComponent({id, ...props}) {
+const createAnchorHeading =
+  (Tag: HeadingType) =>
+  ({id, ...props}: Props) => {
     const {
       navbar: {hideOnScroll},
     } = useThemeConfig();
@@ -65,8 +63,7 @@ const createAnchorHeading = (
     );
   };
 
-const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) => {
-  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-};
+const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) =>
+  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
 
 export default Heading;

package/src/theme/IconArrow/index.tsx

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

package/src/theme/IconEdit/index.tsx

@@ -12,7 +12,7 @@ import type {Props} from '@theme/IconEdit';
 
 import styles from './styles.module.css';
 
-const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
+function IconEdit({className, ...restProps}: Props): JSX.Element {
   return (
     <svg
       fill="currentColor"
@@ -27,6 +27,6 @@ const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
       </g>
     </svg>
   );
-};
+}
 
 export default IconEdit;

package/src/theme/IconExternalLink/index.tsx

@@ -10,10 +10,7 @@ import type {Props} from '@theme/IconExternalLink';
 
 import styles from './styles.module.css';
 
-const IconExternalLink = ({
-  width = 13.5,
-  height = 13.5,
-}: Props): JSX.Element => {
+function IconExternalLink({width = 13.5, height = 13.5}: Props): JSX.Element {
   return (
     <svg
       width={width}
@@ -27,6 +24,6 @@ const IconExternalLink = ({
       />
     </svg>
   );
-};
+}
 
 export default IconExternalLink;

package/src/theme/IconLanguage/index.tsx

@@ -8,11 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconLanguage';
 
-const IconLanguage = ({
-  width = 20,
-  height = 20,
-  ...props
-}: Props): JSX.Element => {
+function IconLanguage({width = 20, height = 20, ...props}: Props): JSX.Element {
   return (
     <svg
       viewBox="0 0 20 20"
@@ -26,6 +22,6 @@ const IconLanguage = ({
       />
     </svg>
   );
-};
+}
 
 export default IconLanguage;

package/src/theme/IconMenu/index.tsx

@@ -8,12 +8,12 @@
 import React from 'react';
 import type {Props} from '@theme/IconMenu';
 
-const IconMenu = ({
+function IconMenu({
   width = 30,
   height = 30,
   className,
   ...restProps
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   return (
     <svg
       className={className}
@@ -31,6 +31,6 @@ const IconMenu = ({
       />
     </svg>
   );
-};
+}
 
 export default IconMenu;

package/src/theme/LayoutHead/index.tsx

@@ -101,7 +101,7 @@ export default function LayoutHead(props: Props): JSX.Element {
     <>
       <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/src/theme/Logo/index.tsx

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

package/src/theme/Navbar/index.tsx

@@ -105,12 +105,13 @@ function useSecondaryMenu({
   });
   const previousContent = usePrevious(content);
 
-  const [shown, setShown] = useState<boolean>(() => {
-    // /!\ content is set with useEffect,
-    // so it's not available on mount anyway
-    // "return !!content" => always returns false
-    return false;
-  });
+  const [shown, setShown] = useState<boolean>(
+    () =>
+      // /!\ 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!

package/src/theme/ThemeProvider/index.tsx

@@ -5,7 +5,7 @@
  * 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';
@@ -13,9 +13,13 @@ import type {Props} from '@theme/ThemeProvider';
 
 function ThemeProvider(props: Props): JSX.Element {
   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/src/theme/ThemedImage/index.tsx

@@ -14,7 +14,7 @@ import type {Props} from '@theme/ThemedImage';
 
 import styles from './styles.module.css';
 
-const ThemedImage = (props: Props): JSX.Element => {
+function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
   const {isDarkTheme} = useThemeContext();
   const {sources, className, alt = '', ...propsRest} = props;
@@ -46,6 +46,6 @@ const ThemedImage = (props: Props): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
 export default ThemedImage;

package/src/theme/Toggle/index.tsx

@@ -18,16 +18,20 @@ interface IconProps {
   style: CSSProperties;
 }
 
-const Dark = ({icon, style}: IconProps): JSX.Element => (
-  <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
-    {icon}
-  </span>
-);
-const Light = ({icon, style}: IconProps): JSX.Element => (
-  <span className={clsx(styles.toggleIcon, styles.light)} style={style}>
-    {icon}
-  </span>
-);
+function Dark({icon, style}: IconProps): JSX.Element {
+  return (
+    <span className={clsx(styles.toggleIcon, styles.dark)} style={style}>
+      {icon}
+    </span>
+  );
+}
+function Light({icon, style}: IconProps): JSX.Element {
+  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(

package/src/theme/UserPreferencesProvider/index.tsx

@@ -5,7 +5,7 @@
  * 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';
@@ -13,12 +13,15 @@ import type {Props} from '@theme/UserPreferencesProvider';
 
 function UserPreferencesProvider(props: Props): JSX.Element {
   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/src/theme/hooks/useTheme.ts

@@ -21,9 +21,8 @@ const themes = {
 type Themes = typeof themes[keyof typeof themes];
 
 // Ensure to always return a valid theme even if input is invalid
-const coerceToTheme = (theme?: string | null): Themes => {
-  return theme === themes.dark ? themes.dark : themes.light;
-};
+const coerceToTheme = (theme?: string | null): Themes =>
+  theme === themes.dark ? themes.dark : themes.light;
 
 const getInitialTheme = (defaultMode: Themes | undefined): Themes => {
   if (!ExecutionEnvironment.canUseDOM) {

package/update-code-translations.js

@@ -80,9 +80,10 @@ ${warning}
   });
 
   const translations = filesExtractedTranslations.reduce(
-    (acc, extractedTranslations) => {
-      return {...acc, ...extractedTranslations.translations};
-    },
+    (acc, extractedTranslations) => ({
+      ...acc,
+      ...extractedTranslations.translations,
+    }),
     {},
   );
 
@@ -193,9 +194,7 @@ ${logKeys(unknownMessages)}`),
   };
 
   const untranslatedKeys = Object.entries(newLocaleFileMessages)
-    .filter(([key, value]) => {
-      return value === baseFileMessages[key];
-    })
+    .filter(([key, value]) => value === baseFileMessages[key])
     .map(([key]) => key);
 
   if (untranslatedKeys.length) {