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

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

@@ -9,3 +9,7 @@ ul.contains-task-list {
   padding-left: 0;
   list-style: none;
 }
+
+img {
+  height: auto;
+}

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

@@ -16,17 +16,10 @@ import styles from './styles.module.css';
 function MDXPage(props) {
   const {content: MDXPageContent} = props;
   const {
-    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
-    frontMatter,
-    metadata,
+    metadata: {title, description, permalink, frontMatter},
   } = MDXPageContent;
-  const {
-    title,
-    description,
-    wrapperClassName,
-    hide_table_of_contents: hideTableOfContents,
-  } = frontMatter;
-  const {permalink} = metadata;
+  const {wrapperClassName, hide_table_of_contents: hideTableOfContents} =
+    frontMatter;
   return (
     <Layout
       title={title}

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

@@ -9,17 +9,17 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
-import useThemeContext from '@theme/hooks/useThemeContext';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
   useHistoryPopHandler,
+  useHideableNavbar,
+  useLockBodyScroll,
+  useWindowSize,
+  useColorMode,
 } from '@docusaurus/theme-common';
-import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import {useActivePlugin} from '@theme/hooks/useDocs';
+import {useActivePlugin} from '@docusaurus/plugin-content-docs/client';
 import NavbarItem from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
@@ -84,7 +84,7 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
   const toggle = useCallback(
     (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
     [setLightTheme, setDarkTheme],

package/lib-next/theme/NavbarItem/DefaultNavbarItem.js

@@ -6,70 +6,8 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import IconExternalLink from '@theme/IconExternalLink';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import {getInfimaActiveClassName} from './index';
-const dropdownLinkActiveClass = 'dropdown__link--active';
-export function NavLink({
-  activeBasePath,
-  activeBaseRegex,
-  to,
-  href,
-  label,
-  activeClassName = '',
-  prependBaseUrlToHref,
-  ...props
-}) {
-  // TODO all this seems hacky
-  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
-  const toUrl = useBaseUrl(to);
-  const activeBaseUrl = useBaseUrl(activeBasePath);
-  const normalizedHref = useBaseUrl(href, {
-    forcePrependBaseUrl: true,
-  });
-  const isExternalLink = label && href && !isInternalUrl(href);
-  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
-  return (
-    <Link
-      {...(href
-        ? {
-            href: prependBaseUrlToHref ? normalizedHref : href,
-          }
-        : {
-            isNavLink: true,
-            activeClassName: !props.className?.includes(activeClassName)
-              ? activeClassName
-              : '',
-            to: toUrl,
-            ...(activeBasePath || activeBaseRegex
-              ? {
-                  isActive: (_match, location) =>
-                    activeBaseRegex
-                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
-                      : location.pathname.startsWith(activeBaseUrl),
-                }
-              : null),
-          })}
-      {...props}>
-      {isExternalLink ? (
-        <span>
-          {label}
-          <IconExternalLink
-            {...(isDropdownLink && {
-              width: 12,
-              height: 12,
-            })}
-          />
-        </span>
-      ) : (
-        label
-      )}
-    </Link>
-  );
-}
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 
 function DefaultNavbarItemDesktop({
   className,
@@ -77,7 +15,7 @@ function DefaultNavbarItemDesktop({
   ...props
 }) {
   const element = (
-    <NavLink
+    <NavbarNavLink
       className={clsx(
         isDropdownItem ? 'dropdown__link' : 'navbar__item navbar__link',
         className,
@@ -100,7 +38,7 @@ function DefaultNavbarItemMobile({
 }) {
   return (
     <li className="menu__list-item">
-      <NavLink className={clsx('menu__link', className)} {...props} />
+      <NavbarNavLink className={clsx('menu__link', className)} {...props} />
     </li>
   );
 }

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -6,9 +6,12 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
-import {getInfimaActiveClassName} from './index';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
 
 function getDocInVersions(versions, docId) {

package/lib-next/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -0,0 +1,73 @@
+/**
+ * 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 from 'react';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
+import clsx from 'clsx';
+import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
+import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
+
+function getSidebarLink(versions, sidebarId) {
+  const allSidebars = versions
+    .flatMap((version) => {
+      if (version.sidebars) {
+        return Object.entries(version.sidebars);
+      }
+
+      return undefined;
+    })
+    .filter((sidebarItem) => !!sidebarItem);
+  const sidebarEntry = allSidebars.find((sidebar) => sidebar[0] === sidebarId);
+
+  if (!sidebarEntry) {
+    throw new Error(`DocSidebarNavbarItem: couldn't find any sidebar with id "${sidebarId}" in version${
+      versions.length ? 's' : ''
+    } ${versions.map((version) => version.name).join(', ')}".
+Available sidebar ids are:
+- ${Object.keys(allSidebars).join('\n- ')}`);
+  }
+
+  if (!sidebarEntry[1].link) {
+    throw new Error(
+      `DocSidebarNavbarItem: couldn't find any document for sidebar with id "${sidebarId}"`,
+    );
+  }
+
+  return sidebarEntry[1].link;
+}
+
+export default function DocSidebarNavbarItem({
+  sidebarId,
+  label,
+  docsPluginId,
+  ...props
+}) {
+  const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);
+  const {preferredVersion} = useDocsPreferredVersion(docsPluginId);
+  const latestVersion = useLatestVersion(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
+
+  const versions = uniq(
+    [activeVersion, preferredVersion, latestVersion].filter(Boolean),
+  );
+  const sidebarLink = getSidebarLink(versions, sidebarId);
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
+  return (
+    <DefaultNavbarItem
+      exact
+      {...props}
+      className={clsx(props.className, {
+        [activeDocInfimaClassName]: activeDoc?.sidebar === sidebarId,
+      })}
+      activeClassName={activeDocInfimaClassName}
+      label={label ?? sidebarLink.label}
+      to={sidebarLink.path}
+    />
+  );
+}

package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -11,7 +11,7 @@ import {
   useVersions,
   useLatestVersion,
   useActiveDocContext,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
 
@@ -57,7 +57,7 @@ export default function DocsVersionDropdownNavbarItem({
     activeDocContext.activeVersion ?? preferredVersion ?? latestVersion; // Mobile dropdown is handled a bit differently
 
   const dropdownLabel =
-    mobile && items
+    mobile && items.length > 1
       ? translate({
           id: 'theme.navbar.mobileVersionsDropdown.label',
           message: 'Versions',
@@ -66,7 +66,9 @@ export default function DocsVersionDropdownNavbarItem({
         })
       : dropdownVersion.label;
   const dropdownTo =
-    mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
+    mobile && items.length > 1
+      ? 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'd rather render a button instead of a dropdown
 

package/lib-next/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -6,7 +6,10 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useActiveVersion, useLatestVersion} from '@theme/hooks/useDocs';
+import {
+  useActiveVersion,
+  useLatestVersion,
+} from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 
 const getVersionMainDoc = (version) =>

package/lib-next/theme/NavbarItem/DropdownNavbarItem.js

@@ -13,7 +13,7 @@ import {
   isRegexpStringMatch,
   useLocalPathname,
 } from '@docusaurus/theme-common';
-import {NavLink} from '@theme/NavbarItem/DefaultNavbarItem';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem from '@theme/NavbarItem';
 const dropdownLinkActiveClass = 'dropdown__link--active';
 
@@ -39,7 +39,6 @@ function containsActiveItems(items, localPathname) {
 
 function DropdownNavbarItemDesktop({items, position, className, ...props}) {
   const dropdownRef = useRef(null);
-  const dropdownMenuRef = useRef(null);
   const [showDropdown, setShowDropdown] = useState(false);
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -64,7 +63,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
         'dropdown--right': position === 'right',
         'dropdown--show': showDropdown,
       })}>
-      <NavLink
+      <NavbarNavLink
         href={props.to ? undefined : '#'}
         className={clsx('navbar__link', className)}
         {...props}
@@ -76,8 +75,8 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
           }
         }}>
         {props.children ?? props.label}
-      </NavLink>
-      <ul ref={dropdownMenuRef} className="dropdown__menu">
+      </NavbarNavLink>
+      <ul className="dropdown__menu">
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
@@ -125,7 +124,7 @@ function DropdownNavbarItemMobile({
       className={clsx('menu__list-item', {
         'menu__list-item--collapsed': collapsed,
       })}>
-      <NavLink
+      <NavbarNavLink
         role="button"
         className={clsx('menu__link menu__link--sublist', className)}
         {...props}
@@ -134,7 +133,7 @@ function DropdownNavbarItemMobile({
           toggleCollapsed();
         }}>
         {props.children ?? props.label}
-      </NavLink>
+      </NavbarNavLink>
       <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
         {items.map((childItemProps, i) => (
           <NavbarItem

package/lib-next/theme/NavbarItem/NavbarNavLink.js

@@ -0,0 +1,70 @@
+/**
+ * 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 from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import IconExternalLink from '@theme/IconExternalLink';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+const dropdownLinkActiveClass = 'dropdown__link--active';
+export default function NavbarNavLink({
+  activeBasePath,
+  activeBaseRegex,
+  to,
+  href,
+  label,
+  activeClassName = '',
+  prependBaseUrlToHref,
+  ...props
+}) {
+  // TODO all this seems hacky
+  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+  const toUrl = useBaseUrl(to);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, {
+    forcePrependBaseUrl: true,
+  });
+  const isExternalLink = label && href && !isInternalUrl(href);
+  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
+  return (
+    <Link
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            isNavLink: true,
+            activeClassName: !props.className?.includes(activeClassName)
+              ? activeClassName
+              : '',
+            to: toUrl,
+            ...(activeBasePath || activeBaseRegex
+              ? {
+                  isActive: (_match, location) =>
+                    activeBaseRegex
+                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                      : location.pathname.startsWith(activeBaseUrl),
+                }
+              : null),
+          })}
+      {...props}>
+      {isExternalLink ? (
+        <span>
+          {label}
+          <IconExternalLink
+            {...(isDropdownLink && {
+              width: 12,
+              height: 12,
+            })}
+          />
+        </span>
+      ) : (
+        label
+      )}
+    </Link>
+  );
+}

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

@@ -22,6 +22,7 @@ const NavbarItemComponents = {
   docsVersionDropdown: () =>
     require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
   doc: () => require('@theme/NavbarItem/DocNavbarItem').default,
+  docSidebar: () => require('@theme/NavbarItem/DocSidebarNavbarItem').default,
   /* eslint-enable @typescript-eslint/no-var-requires, global-require */
 };
 
@@ -45,8 +46,6 @@ function getComponentType(type, isDropdown) {
   return type;
 }
 
-export const getInfimaActiveClassName = (mobile) =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';
 export default function NavbarItem({type, ...props}) {
   const componentType = getComponentType(type, props.items !== undefined);
   const NavbarItemComponent = getNavbarItemComponent(componentType);

package/lib-next/theme/{UserPreferencesContext.js → NavbarItem/utils.js}

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import {createContext} from 'react';
-const UserPreferencesContext = createContext(undefined);
-export default UserPreferencesContext;
+// eslint-disable-next-line import/no-named-export
+export const getInfimaActiveClassName = (mobile) =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';

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

@@ -0,0 +1,20 @@
+/**
+ * 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 from 'react';
+import Link from '@docusaurus/Link';
+
+function PaginatorNavLink(props) {
+  const {permalink, title, subLabel} = props;
+  return (
+    <Link className="pagination-nav__link" to={permalink}>
+      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
+      <div className="pagination-nav__label">{title}</div>
+    </Link>
+  );
+}
+
+export default PaginatorNavLink;

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

@@ -37,7 +37,7 @@ function SkipToContent() {
     }
   });
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} role="region">
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" className={styles.skipToContent} onClick={handleSkip}>
         <Translate

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

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 .skipToContent {
   position: fixed;
   top: 1rem;

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

@@ -20,7 +20,7 @@
   width: 100%;
 }
 
-.tocCollapsibleButton:after {
+.tocCollapsibleButton::after {
   content: '';
   background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
   filter: var(--ifm-menu-link-sublist-icon-filter);
@@ -45,6 +45,6 @@
   display: block;
 }
 
-.tocCollapsibleExpanded .tocCollapsibleButton:after {
+.tocCollapsibleExpanded .tocCollapsibleButton::after {
   transform: none;
 }

package/lib-next/theme/Tabs/__tests__/index.test.js

@@ -8,8 +8,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
-import {ScrollControllerProvider} from '@docusaurus/theme-common';
+import {
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+} from '@docusaurus/theme-common';
 describe('Tabs', () => {
   test('Should reject bad Tabs child', () => {
     expect(() => {
@@ -55,7 +57,7 @@ describe('Tabs', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs>
               <TabItem value="v1">Tab 1</TabItem>
               <TabItem value="v2">Tab 2</TabItem>
@@ -112,7 +114,7 @@ describe('Tabs', () => {
                 Tab 2
               </TabItem>
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
@@ -123,7 +125,7 @@ describe('Tabs', () => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs
               values={tabs.map((t, idx) => ({
                 label: t,
@@ -134,7 +136,7 @@ describe('Tabs', () => {
                 <TabItem value={idx}>{t}</TabItem>
               ))}
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow();

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

@@ -6,8 +6,11 @@
  */
 import React, {useState, cloneElement, Children, isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
-import {useScrollPositionBlocker, duplicates} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  duplicates,
+  useTabGroupChoice,
+} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css'; // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
@@ -39,10 +42,11 @@ function TabsComponent(props) {
     );
   });
   const values =
-    valuesProp ??
-    children.map(({props: {value, label}}) => ({
+    valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({props: {value, label, attributes}}) => ({
       value,
       label,
+      attributes,
     }));
   const dup = duplicates(values, (a, b) => a.value === b.value);
 
@@ -71,7 +75,7 @@ function TabsComponent(props) {
     );
   }
 
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =
@@ -139,19 +143,25 @@ function TabsComponent(props) {
           },
           className,
         )}>
-        {values.map(({value, label}) => (
+        {values.map(({value, label, attributes}) => (
           <li
             role="tab"
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
-            className={clsx('tabs__item', styles.tabItem, {
-              'tabs__item--active': selectedValue === value,
-            })}
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
             onFocus={handleTabChange}
-            onClick={handleTabChange}>
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              'tabs__item',
+              styles.tabItem,
+              attributes?.className,
+              {
+                'tabs__item--active': selectedValue === value,
+              },
+            )}>
             {label ?? value}
           </li>
         ))}

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

@@ -33,8 +33,8 @@
   border-left: 0;
 }
 
-.tagWithCount:before,
-.tagWithCount:after {
+.tagWithCount::before,
+.tagWithCount::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -42,7 +42,7 @@
   transition: inherit;
 }
 
-.tagWithCount:before {
+.tagWithCount::before {
   right: 100%;
   transform: translate(50%, -50%) rotate(-45deg);
   width: 1.18rem;
@@ -51,7 +51,7 @@
   border-bottom: 0;
 }
 
-.tagWithCount:after {
+.tagWithCount::after {
   left: 0;
   transform: translateY(-50%);
   width: 0.5rem;

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

@@ -7,12 +7,12 @@
 import React from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
 function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useThemeContext();
+  const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
   const clientThemes = isDarkTheme ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser