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

package/lib-next/theme/DocPage/styles.module.css

@@ -68,6 +68,7 @@
   .expandSidebarButtonIcon {
     transform: rotate(0);
   }
+
   html[dir='rtl'] .expandSidebarButtonIcon {
     transform: rotate(180deg);
   }

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 
 function DocPaginator(props) {
   const {previous, next} = props;
@@ -20,32 +20,30 @@ function DocPaginator(props) {
       })}>
       <div className="pagination-nav__item">
         {previous && (
-          <Link className="pagination-nav__link" to={previous.permalink}>
-            <div className="pagination-nav__sublabel">
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
               <Translate
                 id="theme.docs.paginator.previous"
                 description="The label used to navigate to the previous doc">
                 Previous
               </Translate>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {previous.title}
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {next && (
-          <Link className="pagination-nav__link" to={next.permalink}>
-            <div className="pagination-nav__sublabel">
+          <PaginatorNavLink
+            {...next}
+            subLabel={
               <Translate
                 id="theme.docs.paginator.next"
                 description="The label used to navigate to the next doc">
                 Next
               </Translate>
-            </div>
-            <div className="pagination-nav__label">{next.title} &raquo;</div>
-          </Link>
+            }
+          />
         )}
       </div>
     </nav>

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

@@ -12,12 +12,12 @@ import {
   MobileSecondaryMenuFiller,
   ThemeClassNames,
   useScrollPosition,
+  useWindowSize,
 } from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
-import {DocSidebarItems} from '@theme/DocSidebarItem';
+import DocSidebarItems from '@theme/DocSidebarItems';
 import styles from './styles.module.css';
 
 function useShowAnnouncementBar() {

package/lib-next/theme/DocSidebar/styles.module.css

@@ -71,6 +71,7 @@
     transform: rotate(180deg);
     margin-top: 4px;
   }
+
   html[dir='rtl'] .collapseSidebarButtonIcon {
     transform: rotate(0);
   }

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useEffect, memo, useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import clsx from 'clsx';
 import {
   isActiveSidebarItem,
@@ -13,27 +13,16 @@ import {
   useCollapsible,
   findFirstCategoryLink,
   ThemeClassNames,
+  useThemeConfig,
+  useDocSidebarItemsExpandedState,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 import IconExternalLink from '@theme/IconExternalLink';
+import DocSidebarItems from '@theme/DocSidebarItems';
 import styles from './styles.module.css';
-import useIsBrowser from '@docusaurus/useIsBrowser'; // 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(({items, ...props}) => (
-  <>
-    {items.map((item, index) => (
-      <DocSidebarItem
-        key={index} // sidebar is static, the index does not change
-        item={item}
-        {...props}
-      />
-    ))}
-  </>
-));
+import useIsBrowser from '@docusaurus/useIsBrowser';
 export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':
@@ -85,12 +74,13 @@ function DocSidebarItemCategory({
   onItemClick,
   activePath,
   level,
+  index,
   ...props
 }) {
   const {items, label, collapsible, className, href} = item;
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
-  const {collapsed, setCollapsed, toggleCollapsed} = useCollapsible({
+  const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
     initialState: () => {
@@ -106,6 +96,30 @@ function DocSidebarItemCategory({
     collapsed,
     setCollapsed,
   });
+  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+
+  function updateCollapsed(toCollapsed = !collapsed) {
+    setExpandedItem(toCollapsed ? null : index);
+    setCollapsed(toCollapsed);
+  }
+
+  const {autoCollapseSidebarCategories} = useThemeConfig();
+  useEffect(() => {
+    if (
+      collapsible &&
+      expandedItem &&
+      expandedItem !== index &&
+      autoCollapseSidebarCategories
+    ) {
+      setCollapsed(true);
+    }
+  }, [
+    collapsible,
+    expandedItem,
+    index,
+    setCollapsed,
+    autoCollapseSidebarCategories,
+  ]);
   return (
     <li
       className={clsx(
@@ -131,16 +145,17 @@ function DocSidebarItemCategory({
                   onItemClick?.(item);
 
                   if (href) {
-                    setCollapsed(false);
+                    updateCollapsed(false);
                   } else {
                     e.preventDefault();
-                    toggleCollapsed();
+                    updateCollapsed();
                   }
                 }
               : () => {
                   onItemClick?.(item);
                 }
           }
+          aria-current={isActive ? 'page' : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
           {label}
@@ -162,7 +177,7 @@ function DocSidebarItemCategory({
             className="clean-btn menu__caret"
             onClick={(e) => {
               e.preventDefault();
-              toggleCollapsed();
+              updateCollapsed();
             }}
           />
         )}
@@ -181,7 +196,14 @@ function DocSidebarItemCategory({
   );
 }
 
-function DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
+function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) {
   const {href, label, className} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   return (

package/lib-next/theme/DocSidebarItem/styles.module.css

@@ -9,6 +9,7 @@
   .menuLinkText {
     cursor: initial;
   }
+
   .menuLinkText:hover {
     background: none;
   }

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {memo} from 'react';
+import DocSidebarItem from '@theme/DocSidebarItem';
+import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
+
+// TODO this item should probably not receive the "activePath" props
+// TODO this triggers whole sidebar re-renders on navigation
+function DocSidebarItems({items, ...props}) {
+  return (
+    <DocSidebarItemsExpandedStateProvider>
+      {items.map((item, index) => (
+        <DocSidebarItem
+          key={index} // sidebar is static, the index does not change
+          item={item}
+          index={index}
+          {...props}
+        />
+      ))}
+    </DocSidebarItemsExpandedStateProvider>
+  );
+} // Optimize sidebar at each "level"
+
+export default memo(DocSidebarItems);

package/{lib/theme/DocSidebarItem → lib-next/theme/DocSidebarItems}/styles.module.css

@@ -9,6 +9,7 @@
   .menuLinkText {
     cursor: initial;
   }
+
   .menuLinkText:hover {
     background: none;
   }

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

@@ -8,7 +8,10 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
-import {useActivePlugin, useDocVersionSuggestions} from '@theme/hooks/useDocs';
+import {
+  useActivePlugin,
+  useDocVersionSuggestions,
+} from '@docusaurus/plugin-content-docs/client';
 import {
   ThemeClassNames,
   useDocsPreferredVersion,

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

@@ -54,6 +54,66 @@ function FooterLogo({sources, alt, width, height}) {
   );
 }
 
+function MultiColumnLinks({links}) {
+  return (
+    <>
+      {links.map((linkItem, i) => (
+        <div key={i} className="col footer__col">
+          <div className="footer__title">{linkItem.title}</div>
+          <ul className="footer__items">
+            {linkItem.items.map((item, key) =>
+              item.html ? (
+                <li
+                  key={key}
+                  className="footer__item" // Developer provided the HTML, so assume it's safe.
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{
+                    __html: item.html,
+                  }}
+                />
+              ) : (
+                <li key={item.href || item.to} className="footer__item">
+                  <FooterLink {...item} />
+                </li>
+              ),
+            )}
+          </ul>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function SimpleLinks({links}) {
+  return (
+    <div className="footer__links">
+      {links.map((item, 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
+              dangerouslySetInnerHTML={{
+                __html: item.html,
+              }}
+            />
+          ) : (
+            <FooterLink {...item} />
+          )}
+          {links.length !== key + 1 && (
+            <span className="footer__link-separator">·</span>
+          )}
+        </>
+      ))}
+    </div>
+  );
+}
+
+function isMultiColumnFooterLinks(links) {
+  return 'title' in links[0];
+}
+
 function Footer() {
   const {footer} = useThemeConfig();
   const {copyright, links = [], logo = {}} = footer || {};
@@ -71,40 +131,18 @@ function Footer() {
       className={clsx('footer', {
         'footer--dark': footer.style === 'dark',
       })}>
-      <div className="container">
-        {links && links.length > 0 && (
-          <div className="row footer__links">
-            {links.map((linkItem, i) => (
-              <div key={i} className="col footer__col">
-                {linkItem.title != null ? (
-                  <div className="footer__title">{linkItem.title}</div>
-                ) : null}
-                {linkItem.items != null &&
-                Array.isArray(linkItem.items) &&
-                linkItem.items.length > 0 ? (
-                  <ul className="footer__items">
-                    {linkItem.items.map((item, key) =>
-                      item.html ? (
-                        <li
-                          key={key}
-                          className="footer__item" // Developer provided the HTML, so assume it's safe.
-                          // eslint-disable-next-line react/no-danger
-                          dangerouslySetInnerHTML={{
-                            __html: item.html,
-                          }}
-                        />
-                      ) : (
-                        <li key={item.href || item.to} className="footer__item">
-                          <FooterLink {...item} />
-                        </li>
-                      ),
-                    )}
-                  </ul>
-                ) : null}
-              </div>
-            ))}
-          </div>
-        )}
+      <div className="container container-fluid">
+        {links &&
+          links.length > 0 &&
+          (isMultiColumnFooterLinks(links) ? (
+            <div className="row footer__links">
+              <MultiColumnLinks links={links} />
+            </div>
+          ) : (
+            <div className="footer__links text--center">
+              <SimpleLinks links={links} />
+            </div>
+          ))}
         {(logo || copyright) && (
           <div className="footer__bottom text--center">
             {logo && (logo.src || logo.srcDark) && (
@@ -139,4 +177,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default React.memo(Footer);

package/lib-next/theme/Footer/styles.module.css

@@ -7,7 +7,8 @@
 
 .footerLogoLink {
   opacity: 0.5;
-  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
 }
 
 .footerLogoLink:hover {

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

@@ -10,54 +10,50 @@ import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import './styles.css';
 import styles from './styles.module.css';
-// 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) =>
-  ({id, ...props}) => {
-    const {
-      navbar: {hideOnScroll},
-    } = useThemeConfig();
+function AnchorHeading({as: As, id, ...props}) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
+
+  if (!id) {
+    return <As {...props} />;
+  }
 
-    if (!id) {
-      return <Tag {...props} />;
-    }
+  return (
+    <As
+      {...props}
+      className={clsx('anchor', {
+        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+        [styles.anchorWithStickyNavbar]: !hideOnScroll,
+      })}
+      id={id}>
+      {props.children}
+      <a
+        className="hash-link"
+        href={`#${id}`}
+        title={translate({
+          id: 'theme.common.headingLinkTitle',
+          message: 'Direct link to heading',
+          description: 'Title for link to heading',
+        })}>
+        &#8203;
+      </a>
+    </As>
+  );
+}
 
+export default function Heading({as, ...props}) {
+  if (as === 'h1') {
     return (
-      <Tag
+      <h1
         {...props}
-        className={clsx('anchor', {
-          [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-          [styles.anchorWithStickyNavbar]: !hideOnScroll,
-        })}
-        id={id}>
+        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+      >
         {props.children}
-        <a
-          aria-hidden="true"
-          className="hash-link"
-          href={`#${id}`}
-          title={translate({
-            id: 'theme.common.headingLinkTitle',
-            message: 'Direct link to heading',
-            description: 'Title for link to heading',
-          })}>
-          &#8203;
-        </a>
-      </Tag>
+      </h1>
     );
-  };
-
-const Heading = (headingType) =>
-  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
+  }
 
-export default Heading;
+  return <AnchorHeading as={as} {...props} />;
+}

package/lib-next/theme/Heading/styles.css

@@ -12,7 +12,7 @@
   user-select: none;
 }
 
-.hash-link:before {
+.hash-link::before {
   content: '#';
 }
 

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

@@ -13,8 +13,7 @@ import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
-import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 

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

@@ -22,14 +22,14 @@ import {useLocation} from '@docusaurus/router'; // Useful for SEO
 
 function AlternateLangHeaders() {
   const {
-    i18n: {defaultLocale, locales},
+    i18n: {defaultLocale, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils(); // Note: it is fine to use both "x-default" and "en" to target the same url
   // See https://www.searchviu.com/en/multiple-hreflang-tags-one-url/
 
   return (
     <Head>
-      {locales.map((locale) => (
+      {Object.entries(localeConfigs).map(([locale, {htmlLang}]) => (
         <link
           key={locale}
           rel="alternate"
@@ -37,7 +37,7 @@ function AlternateLangHeaders() {
             locale,
             fullyQualified: true,
           })}
-          hrefLang={locale}
+          hrefLang={htmlLang}
         />
       ))}
       <link
@@ -84,12 +84,8 @@ export default function LayoutHead(props) {
   const {metadata, image: defaultImage} = useThemeConfig();
   const {title, description, image, keywords, searchMetadata} = props;
   const faviconUrl = useBaseUrl(favicon);
-  const pageTitle = useTitleFormatter(title); // See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
-  // const htmlLang = currentLocale.split('-')[0];
-
-  const htmlLang = currentLocale; // should we allow the user to override htmlLang with localeConfig?
-
-  const htmlDir = localeConfigs[currentLocale].direction;
+  const pageTitle = useTitleFormatter(title);
+  const {htmlLang, direction: htmlDir} = localeConfigs[currentLocale];
   return (
     <>
       <Head>

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import ThemeProvider from '@theme/ThemeProvider';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
@@ -15,9 +15,9 @@ import {
 } from '@docusaurus/theme-common';
 export default function LayoutProviders({children}) {
   return (
-    <ThemeProvider>
+    <ColorModeProvider>
       <AnnouncementBarProvider>
-        <UserPreferencesProvider>
+        <TabGroupChoiceProvider>
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
@@ -25,8 +25,8 @@ export default function LayoutProviders({children}) {
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>
-        </UserPreferencesProvider>
+        </TabGroupChoiceProvider>
       </AnnouncementBarProvider>
-    </ThemeProvider>
+    </ColorModeProvider>
   );
 }

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

@@ -30,35 +30,22 @@ const MDXComponents = {
     return <Head {...props}>{unwrappedChildren}</Head>;
   },
   code: (props) => {
-    const {children} = props; // For retrocompatibility purposes (pretty rare use case)
-    // See https://github.com/facebook/docusaurus/pull/1584
-
-    if (isValidElement(children)) {
-      return children;
-    }
-
-    return !children.includes('\n') ? (
-      <code {...props} />
-    ) : (
-      <CodeBlock {...props} />
+    const shouldBeInline = React.Children.toArray(props.children).every(
+      (el) => typeof el === 'string' && !el.includes('\n'),
     );
+    return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => {
-    const {children} = props; // See comment for `code` above
-
-    if (isValidElement(children) && isValidElement(children?.props?.children)) {
-      return children.props.children;
-    }
-
-    return (
-      <CodeBlock
-        {...(isValidElement(children) ? children?.props : {...props})}
-      />
-    );
-  },
+  pre: (props) => (
+    <CodeBlock // If this pre is created by a ``` fenced codeblock, unwrap the children
+      {...(isValidElement(props.children) &&
+      props.children.props.originalType === 'code'
+        ? props.children?.props
+        : {...props})}
+    />
+  ),
   details: (props) => {
-    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Detais theme component
+    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Details theme component
 
     const summary = items.find((item) => item?.props?.mdxType === 'summary');
     const children = <>{items.filter((item) => item !== summary)}</>;
@@ -68,11 +55,11 @@ const MDXComponents = {
       </Details>
     );
   },
-  h1: Heading('h1'),
-  h2: Heading('h2'),
-  h3: Heading('h3'),
-  h4: Heading('h4'),
-  h5: Heading('h5'),
-  h6: Heading('h6'),
+  h1: (props) => <Heading as="h1" {...props} />,
+  h2: (props) => <Heading as="h2" {...props} />,
+  h3: (props) => <Heading as="h3" {...props} />,
+  h4: (props) => <Heading as="h4" {...props} />,
+  h5: (props) => <Heading as="h5" {...props} />,
+  h6: (props) => <Heading as="h6" {...props} />,
 };
 export default MDXComponents;