@docusaurus/theme-classic 2.0.0-beta.15 → 2.0.0-beta.16

package/src/theme/DocVersionBadge/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import type {Props} from '@theme/DocVersionBadge';
@@ -22,7 +23,11 @@ export default function DocVersionBadge({
           ThemeClassNames.docs.docVersionBadge,
           'badge badge--secondary',
         )}>
-        Version: {versionMetadata.label}
+        <Translate
+          id="theme.docs.versionBadge.label"
+          values={{versionLabel: versionMetadata.label}}>
+          {'Version: {versionLabel}'}
+        </Translate>
       </span>
     );
   }

package/src/theme/Footer/index.tsx

@@ -106,10 +106,9 @@ function SimpleLinks({links}: {links: SimpleFooter['links']}) {
   return (
     <div className="footer__links">
       {links.map((item, key) => (
-        <>
+        <React.Fragment key={key}>
           {item.html ? (
             <span
-              key={key}
               className="footer__link-item"
               // Developer provided the HTML, so assume it's safe.
               // eslint-disable-next-line react/no-danger
@@ -123,7 +122,7 @@ function SimpleLinks({links}: {links: SimpleFooter['links']}) {
           {links.length !== key + 1 && (
             <span className="footer__link-separator">·</span>
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );
@@ -179,7 +178,12 @@ function Footer(): JSX.Element | null {
                     />
                   </Link>
                 ) : (
-                  <FooterLogo alt={logo.alt} sources={sources} />
+                  <FooterLogo
+                    alt={logo.alt}
+                    sources={sources}
+                    width={logo.width}
+                    height={logo.height}
+                  />
                 )}
               </div>
             )}

package/src/theme/Heading/index.tsx

@@ -11,7 +11,6 @@ import type {Props} from '@theme/Heading';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
-import './styles.css';
 import styles from './styles.module.css';
 
 function AnchorHeading({as: As, id, ...props}: Props) {

package/src/theme/Heading/styles.module.css

@@ -17,3 +17,19 @@ See https://twitter.com/JoshWComeau/status/1332015868725891076
 .anchorWithHideOnScrollNavbar {
   scroll-margin-top: 0.5rem;
 }
+
+:global(.hash-link) {
+  opacity: 0;
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
+  user-select: none;
+}
+
+:global(.hash-link::before) {
+  content: '#';
+}
+
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
+}

package/src/theme/IconArrow/index.tsx

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

package/src/theme/IconEdit/index.tsx

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

package/src/theme/IconExternalLink/index.tsx

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

package/src/theme/IconLanguage/index.tsx

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

package/src/theme/IconMenu/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconMenu';
 
-function IconMenu({
+export default function IconMenu({
   width = 30,
   height = 30,
   className,
@@ -32,5 +32,3 @@ function IconMenu({
     </svg>
   );
 }
-
-export default IconMenu;

package/src/theme/Layout/index.tsx

@@ -19,7 +19,7 @@ import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
-function Layout(props: Props): JSX.Element {
+export default function Layout(props: Props): JSX.Element {
   const {children, noFooter, wrapperClassName, pageClassName} = props;
 
   useKeyboardNavigation();
@@ -47,5 +47,3 @@ function Layout(props: Props): JSX.Element {
     </LayoutProviders>
   );
 }
-
-export default Layout;

package/src/theme/LayoutHead/index.tsx

@@ -17,6 +17,7 @@ import {
   useTitleFormatter,
   useAlternatePageUtils,
   useThemeConfig,
+  keyboardFocusedClassName,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
 
@@ -101,6 +102,9 @@ export default function LayoutHead(props: Props): JSX.Element {
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
         <meta name="twitter:card" content="summary_large_image" />
+        {/* The keyboard focus class name need to be applied when SSR so links
+        are outlined when JS is disabled */}
+        <body className={keyboardFocusedClassName} />
       </Head>
 
       {/* image can override the default 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';
 
-function Logo(props: Props): JSX.Element {
+export default function Logo(props: Props): JSX.Element {
   const {
     siteConfig: {title},
   } = useDocusaurusContext();
@@ -52,5 +52,3 @@ function Logo(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default Logo;

package/src/theme/MDXComponents/index.tsx

@@ -19,8 +19,8 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
 
 import './styles.css';
 
-// MDX elements are wrapped through the MDX pragma
-// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
 function unwrapMDXElement(element: ReactElement) {
   if (element?.props?.mdxType && element?.props?.originalType) {
     const {mdxType, originalType, ...newProps} = element.props;
@@ -55,7 +55,8 @@ const MDXComponents: MDXComponentsObject = {
   ),
   details: (props): JSX.Element => {
     const items = React.Children.toArray(props.children) as ReactElement[];
-    // Split summary item from the rest to pass it as a separate prop to the Details theme component
+    // Split summary item from the rest to pass it as a separate prop to the
+    // Details theme component
     const summary: ReactElement<ComponentProps<'summary'>> = items.find(
       (item) => item?.props?.mdxType === 'summary',
     )!;

package/src/theme/MDXPage/index.tsx

@@ -16,7 +16,7 @@ import {ThemeClassNames} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
-function MDXPage(props: Props): JSX.Element {
+export default function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {
     metadata: {title, description, permalink, frontMatter},
@@ -52,5 +52,3 @@ function MDXPage(props: Props): JSX.Element {
     </Layout>
   );
 }
-
-export default MDXPage;

package/src/theme/Navbar/index.tsx

@@ -220,7 +220,7 @@ function NavbarMobileSidebar({
   );
 }
 
-function Navbar(): JSX.Element {
+export default function Navbar(): JSX.Element {
   const {
     navbar: {hideOnScroll, style},
   } = useThemeConfig();
@@ -296,5 +296,3 @@ function Navbar(): JSX.Element {
     </nav>
   );
 }
-
-export default Navbar;

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -51,7 +51,7 @@ function DefaultNavbarItemMobile({
   );
 }
 
-function DefaultNavbarItem({
+export default function DefaultNavbarItem({
   mobile = false,
   position: _position, // Need to destructure position from props so that it doesn't get passed on.
   ...props
@@ -66,5 +66,3 @@ function DefaultNavbarItem({
     />
   );
 }
-
-export default DefaultNavbarItem;

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -78,8 +78,8 @@ export default function DocsVersionDropdownNavbarItem({
       ? undefined
       : getVersionMainDoc(dropdownVersion).path;
 
-  // We don't want to render a version dropdown with 0 or 1 item
-  // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+  // We don't want to render a version dropdown with 0 or 1 item. If we build
+  // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
   // We'd rather render a button instead of a dropdown
   if (items.length <= 1) {
     return (

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -172,9 +172,10 @@ function DropdownNavbarItemMobile({
   );
 }
 
-function DropdownNavbarItem({mobile = false, ...props}: Props): JSX.Element {
+export default function DropdownNavbarItem({
+  mobile = false,
+  ...props
+}: Props): JSX.Element {
   const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop;
   return <Comp {...props} />;
 }
-
-export default DropdownNavbarItem;

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -11,6 +11,7 @@ import IconLanguage from '@theme/IconLanguage';
 import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 
 import styles from './styles.module.css';
@@ -48,7 +49,13 @@ export default function LocaleDropdownNavbarItem({
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
 
   // Mobile is handled a bit differently
-  const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
+  const dropdownLabel = mobile
+    ? translate({
+        message: 'Languages',
+        id: 'theme.navbar.mobileLanguageDropdown.label',
+        description: 'The label for the mobile language switcher dropdown',
+      })
+    : getLocaleLabel(currentLocale);
 
   return (
     <DropdownNavbarItem

package/src/theme/NavbarItem/index.tsx

@@ -25,8 +25,8 @@ const NavbarItemComponents: Record<
   search: () => SearchNavbarItem,
   dropdown: () => DropdownNavbarItem,
 
-  // Need to lazy load these items as we don't know for sure the docs plugin is loaded
-  // See https://github.com/facebook/docusaurus/issues/3360
+  // Need to lazy load these items as we don't know for sure the docs plugin is
+  // loaded. See https://github.com/facebook/docusaurus/issues/3360
   /* eslint-disable @typescript-eslint/no-var-requires, global-require */
   docsVersion: () => require('@theme/NavbarItem/DocsVersionNavbarItem').default,
   docsVersionDropdown: () =>

package/src/theme/NotFound.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Translate, {translate} from '@docusaurus/Translate';
 
-function NotFound(): JSX.Element {
+export default function NotFound(): JSX.Element {
   return (
     <Layout
       title={translate({
@@ -47,5 +47,3 @@ function NotFound(): JSX.Element {
     </Layout>
   );
 }
-
-export default NotFound;

package/src/theme/PaginatorNavLink/index.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/PaginatorNavLink';
 
-function PaginatorNavLink(props: Props): JSX.Element {
+export default function PaginatorNavLink(props: Props): JSX.Element {
   const {permalink, title, subLabel} = props;
   return (
     <Link className="pagination-nav__link" to={permalink}>
@@ -18,5 +18,3 @@ function PaginatorNavLink(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default PaginatorNavLink;

package/src/theme/SearchBar.tsx

@@ -6,7 +6,8 @@
  */
 
 // By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this file, it is your responsibility to provide an implementation
+// If you swizzled this, it is your responsibility to provide an implementation
 // Tip: swizzle the SearchBar from the Algolia theme for inspiration:
 // npm run swizzle @docusaurus/theme-search-algolia SearchBar
+
 export {default} from '@docusaurus/Noop';

package/src/theme/SearchMetadata/index.tsx

@@ -10,19 +10,25 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import type {Props} from '@theme/SearchMetadata';
 
-// Note: we don't couple this to Algolia/DocSearch on purpose
-// We may want to support other search engine plugins too
-// Search plugins should swizzle/override this comp to add their behavior
+// Note: we bias toward using Algolia metadata on purpose
+// Not doing so leads to confusion in the community,
+// as it requires to first crawl the site with the Algolia plugin enabled first
+// - https://github.com/facebook/docusaurus/issues/6693
+// - https://github.com/facebook/docusaurus/issues/4555
 export default function SearchMetadata({
   locale,
   version,
   tag,
 }: Props): JSX.Element {
+  // Seems safe to consider here the locale is the language, as the existing
+  // docsearch:language filter is afaik a regular string-based filter
+  const language = locale;
+
   return (
     <Head>
-      {locale && <meta name="docusaurus_locale" content={locale} />}
-      {version && <meta name="docusaurus_version" content={version} />}
-      {tag && <meta name="docusaurus_tag" content={tag} />}
+      {language && <meta name="docsearch:language" content={language} />}
+      {version && <meta name="docsearch:version" content={version} />}
+      {tag && <meta name="docsearch:docusaurus_tag" content={tag} />}
     </Head>
   );
 }

package/src/theme/SkipToContent/index.tsx

@@ -18,7 +18,7 @@ function programmaticFocus(el: HTMLElement) {
   el.removeAttribute('tabindex');
 }
 
-function SkipToContent(): JSX.Element {
+export default function SkipToContent(): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null);
   const {action} = useHistory();
   const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -52,5 +52,3 @@ function SkipToContent(): JSX.Element {
     </div>
   );
 }
-
-export default SkipToContent;

package/src/theme/TOC/index.tsx

@@ -7,16 +7,16 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {TOCProps} from '@theme/TOC';
+import type {Props} from '@theme/TOC';
 import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css';
 
 // Using a custom className
-// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-function TOC({className, ...props}: TOCProps): JSX.Element {
+export default function TOC({className, ...props}: Props): JSX.Element {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <TOCItems
@@ -27,5 +27,3 @@ function TOC({className, ...props}: TOCProps): JSX.Element {
     </div>
   );
 }
-
-export default TOC;

package/src/theme/TOCCollapsible/index.tsx

@@ -11,14 +11,14 @@ import Translate from '@docusaurus/Translate';
 import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
-import type {TOCCollapsibleProps} from '@theme/TOCCollapsible';
+import type {Props} from '@theme/TOCCollapsible';
 
 export default function TOCCollapsible({
   toc,
   className,
   minHeadingLevel,
   maxHeadingLevel,
-}: TOCCollapsibleProps): JSX.Element {
+}: Props): JSX.Element {
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });

package/src/theme/TOCInline/index.tsx

@@ -6,15 +6,15 @@
  */
 
 import React from 'react';
-import type {TOCInlineProps} from '@theme/TOCInline';
+import type {Props} from '@theme/TOCInline';
 import styles from './styles.module.css';
 import TOCItems from '@theme/TOCItems';
 
-function TOCInline({
+export default function TOCInline({
   toc,
   minHeadingLevel,
   maxHeadingLevel,
-}: TOCInlineProps): JSX.Element {
+}: Props): JSX.Element {
   return (
     <div className={styles.tableOfContentsInline}>
       <TOCItems
@@ -27,5 +27,3 @@ function TOCInline({
     </div>
   );
 }
-
-export default TOCInline;

package/src/theme/TOCItems/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React, {useMemo} from 'react';
-import type {TOCItemsProps} from '@theme/TOCItems';
-import type {TOCItem} from '@docusaurus/types';
+import type {Props} from '@theme/TOCItems';
 import {
   type TOCHighlightConfig,
+  type TOCTreeNode,
   useThemeConfig,
-  useTOCFilter,
   useTOCHighlight,
+  useFilteredAndTreeifiedTOC,
 } from '@docusaurus/theme-common';
 
 // Recursive component rendering the toc tree
@@ -23,7 +23,7 @@ function TOCItemList({
   linkClassName,
   isChild,
 }: {
-  readonly toc: readonly TOCItem[];
+  readonly toc: readonly TOCTreeNode[];
   readonly className: string;
   readonly linkClassName: string | null;
   readonly isChild?: boolean;
@@ -62,7 +62,7 @@ export default function TOCItems({
   minHeadingLevel: minHeadingLevelOption,
   maxHeadingLevel: maxHeadingLevelOption,
   ...props
-}: TOCItemsProps): JSX.Element | null {
+}: Props): JSX.Element | null {
   const themeConfig = useThemeConfig();
 
   const minHeadingLevel =
@@ -70,7 +70,11 @@ export default function TOCItems({
   const maxHeadingLevel =
     maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
 
-  const tocFiltered = useTOCFilter({toc, minHeadingLevel, maxHeadingLevel});
+  const tocTree = useFilteredAndTreeifiedTOC({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel,
+  });
 
   const tocHighlightConfig: TOCHighlightConfig | undefined = useMemo(() => {
     if (linkClassName && linkActiveClassName) {
@@ -87,7 +91,7 @@ export default function TOCItems({
 
   return (
     <TOCItemList
-      toc={tocFiltered}
+      toc={tocTree}
       className={className}
       linkClassName={linkClassName}
       {...props}

package/src/theme/TabItem/index.tsx

@@ -8,12 +8,14 @@
 import React from 'react';
 import type {Props} from '@theme/TabItem';
 
-function TabItem({children, hidden, className}: Props): JSX.Element {
+export default function TabItem({
+  children,
+  hidden,
+  className,
+}: Props): JSX.Element {
   return (
     <div role="tabpanel" {...{hidden, className}}>
       {children}
     </div>
   );
 }
-
-export default TabItem;

package/src/theme/Tabs/index.tsx

@@ -55,7 +55,7 @@ function TabsComponent(props: Props): JSX.Element {
   });
   const values =
     valuesProp ??
-    // We only pick keys that we recognize. MDX would inject some keys by default
+    // Only pick keys that we recognize. MDX would inject some keys by default
     children.map(({props: {value, label, attributes}}) => ({
       value,
       label,

package/src/theme/Tag/index.tsx

@@ -12,7 +12,7 @@ import type {Props} from '@theme/Tag';
 
 import styles from './styles.module.css';
 
-function Tag(props: Props): JSX.Element {
+export default function Tag(props: Props): JSX.Element {
   const {permalink, name, count} = props;
 
   return (
@@ -27,5 +27,3 @@ function Tag(props: Props): JSX.Element {
     </Link>
   );
 }
-
-export default Tag;

package/src/theme/TagsListByLetter/index.tsx

@@ -28,7 +28,7 @@ function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
   );
 }
 
-function TagsListByLetter({tags}: Props): JSX.Element {
+export default function TagsListByLetter({tags}: Props): JSX.Element {
   const letterList = listTagsByLetters(tags);
   return (
     <section className="margin-vert--lg">
@@ -41,5 +41,3 @@ function TagsListByLetter({tags}: Props): JSX.Element {
     </section>
   );
 }
-
-export default TagsListByLetter;

package/src/theme/ThemedImage/index.tsx

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