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

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

@@ -16,18 +16,19 @@ import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 export default function DocItem(props) {
   const {content: DocContent} = props;
-  const {metadata, frontMatter} = DocContent;
+  const {metadata, frontMatter, assets} = DocContent;
   const {
-    image,
     keywords,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  const {description, title} = metadata; // We only add a title if:
+  const {description, title} = metadata;
+  const image = assets.image ?? frontMatter.image; // We only add a title if:
   // - user asks to hide it with front matter
   // - the markdown content does not already contain a top-level h1 heading
 
@@ -57,6 +58,7 @@ export default function DocItem(props) {
           <DocVersionBanner />
           <div className={styles.docItemContainer}>
             <article>
+              <DocBreadcrumbs />
               <DocVersionBadge />
 
               {canRenderTOC && (
@@ -74,8 +76,9 @@ export default function DocItem(props) {
               <div
                 className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
                 {/*
-                Title can be declared inside md content or declared through front matter and added manually
-                To make both cases consistent, the added title is added under the same div.markdown block
+                Title can be declared inside md content or declared through
+                front matter and added manually. To make both cases consistent,
+                the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
                 {shouldAddTitle && (

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

@@ -131,7 +131,7 @@ function DocPageContent({
   );
 }
 
-function DocPage(props) {
+export default function DocPage(props) {
   const {
     route: {routes: docRoutes},
     versionMetadata,
@@ -152,7 +152,7 @@ function DocPage(props) {
   return (
     <>
       <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) generic plugin option */}
+        {/* TODO we should add a core addRoute({htmlClassName}) action */}
         <html className={versionMetadata.className} />
       </Head>
       <DocsVersionProvider version={versionMetadata}>
@@ -170,5 +170,3 @@ function DocPage(props) {
     </>
   );
 }
-
-export default DocPage;

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

@@ -69,12 +69,12 @@
     transform: rotate(0);
   }
 
-  html[dir='rtl'] .expandSidebarButtonIcon {
+  [dir='rtl'] .expandSidebarButtonIcon {
     transform: rotate(180deg);
   }
 
-  html[data-theme='dark'] .collapsedDocSidebar:hover,
-  html[data-theme='dark'] .collapsedDocSidebar:focus {
+  [data-theme='dark'] .collapsedDocSidebar:hover,
+  [data-theme='dark'] .collapsedDocSidebar:focus {
     background-color: var(--collapse-button-bg-color-dark);
   }
 

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

@@ -7,8 +7,7 @@
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
-
-function DocPaginator(props) {
+export default function DocPaginator(props) {
   const {previous, next} = props;
   return (
     <nav
@@ -49,5 +48,3 @@ function DocPaginator(props) {
     </nav>
   );
 }
-
-export default DocPaginator;

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

@@ -72,16 +72,16 @@
     margin-top: 4px;
   }
 
-  html[dir='rtl'] .collapseSidebarButtonIcon {
+  [dir='rtl'] .collapseSidebarButtonIcon {
     transform: rotate(0);
   }
 
-  html[data-theme='dark'] .collapseSidebarButton {
+  [data-theme='dark'] .collapseSidebarButton {
     background-color: var(--collapse-button-bg-color-dark);
   }
 
-  html[data-theme='dark'] .collapseSidebarButton:hover,
-  html[data-theme='dark'] .collapseSidebarButton:focus {
+  [data-theme='dark'] .collapseSidebarButton:hover,
+  [data-theme='dark'] .collapseSidebarButton:focus {
     background-color: var(--ifm-color-emphasis-200);
   }
 }

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

@@ -15,6 +15,7 @@ import {
   ThemeClassNames,
   useThemeConfig,
   useDocSidebarItemsExpandedState,
+  isSamePath,
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -26,17 +27,17 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 export default function DocSidebarItem({item, ...props}) {
   switch (item.type) {
     case 'category':
-      if (item.items.length === 0) {
-        return null;
-      }
-
       return <DocSidebarItemCategory item={item} {...props} />;
 
+    case 'html':
+      return <DocSidebarItemHtml item={item} {...props} />;
+
     case 'link':
     default:
       return <DocSidebarItemLink item={item} {...props} />;
   }
-} // If we navigate to a category and it becomes active, it should automatically expand itself
+} // If we navigate to a category and it becomes active, it should automatically
+// expand itself
 
 function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
   const wasActive = usePrevious(isActive);
@@ -47,11 +48,15 @@ function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
       setCollapsed(false);
     }
   }, [isActive, wasActive, collapsed, setCollapsed]);
-} // When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
-// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
-// React hydration becomes an optional progressive enhancement
-// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
-// see https://github.com/facebook/docusaurus/issues/3030
+}
+/**
+ * When a collapsible category has no link, we still link it to its first child
+ * during SSR as a temporary fallback. This allows to be able to navigate inside
+ * the category even when JS fails to load, is delayed or simply disabled
+ * React hydration becomes an optional progressive enhancement
+ * see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+ * see https://github.com/facebook/docusaurus/issues/3030
+ */
 
 function useCategoryHrefWithSSRFallback(item) {
   const isBrowser = useIsBrowser();
@@ -80,6 +85,7 @@ function DocSidebarItemCategory({
   const {items, label, collapsible, className, href} = item;
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
   const isActive = isActiveSidebarItem(item, activePath);
+  const isCurrentPage = isSamePath(href, activePath);
   const {collapsed, setCollapsed} = useCollapsible({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
@@ -131,13 +137,14 @@ function DocSidebarItemCategory({
         },
         className,
       )}>
-      <div className="menu__list-item-collapsible">
+      <div
+        className={clsx('menu__list-item-collapsible', {
+          'menu__list-item-collapsible--active': isCurrentPage,
+        })}>
         <Link
           className={clsx('menu__link', {
             'menu__link--sublist': collapsible && !href,
             'menu__link--active': isActive,
-            [styles.menuLinkText]: !collapsible,
-            [styles.hasHref]: !!hrefWithSSRFallback,
           })}
           onClick={
             collapsible
@@ -155,7 +162,7 @@ function DocSidebarItemCategory({
                   onItemClick?.(item);
                 }
           }
-          aria-current={isActive ? 'page' : undefined}
+          aria-current={isCurrentPage ? 'page' : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}>
           {label}
@@ -196,6 +203,24 @@ function DocSidebarItemCategory({
   );
 }
 
+function DocSidebarItemHtml({item, level, index}) {
+  const {value, defaultStyle, className} = item;
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
+        className,
+      )}
+      key={index} // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: value,
+      }}
+    />
+  );
+}
+
 function DocSidebarItemLink({
   item,
   onItemClick,

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

@@ -6,15 +6,8 @@
  */
 
 @media (min-width: 997px) {
-  .menuLinkText {
-    cursor: initial;
-  }
-
-  .menuLinkText:hover {
-    background: none;
-  }
-
-  .menuLinkText.hasHref {
-    cursor: pointer;
+  .menuHtmlItem {
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
   }
 }

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

@@ -11,8 +11,7 @@ import {
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
 import TagsListByLetter from '@theme/TagsListByLetter';
-
-function DocTagsListPage({tags}) {
+export default function DocTagsListPage({tags}) {
   const title = translateTagsPageTitle();
   return (
     <Layout
@@ -34,5 +33,3 @@ function DocTagsListPage({tags}) {
     </Layout>
   );
 }
-
-export default DocTagsListPage;

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 export default function DocVersionBadge({className}) {
@@ -18,7 +19,13 @@ export default function DocVersionBadge({className}) {
           ThemeClassNames.docs.docVersionBadge,
           'badge badge--secondary',
         )}>
-        Version: {versionMetadata.label}
+        <Translate
+          id="theme.docs.versionBadge.label"
+          values={{
+            versionLabel: versionMetadata.label,
+          }}>
+          {'Version: {versionLabel}'}
+        </Translate>
       </span>
     );
   }

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

@@ -88,10 +88,9 @@ function SimpleLinks({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
               dangerouslySetInnerHTML={{
@@ -104,7 +103,7 @@ function SimpleLinks({links}) {
           {links.length !== key + 1 && (
             <span className="footer__link-separator">·</span>
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );
@@ -157,7 +156,12 @@ function Footer() {
                     />
                   </Link>
                 ) : (
-                  <FooterLogo alt={logo.alt} sources={sources} />
+                  <FooterLogo
+                    alt={logo.alt}
+                    sources={sources}
+                    width={logo.width}
+                    height={logo.height}
+                  />
                 )}
               </div>
             )}

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

@@ -8,7 +8,6 @@ import React from 'react';
 import clsx from 'clsx';
 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}) {

package/lib-next/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/lib-next/theme/IconArrow/index.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-function IconArrow(props) {
+export default function IconArrow(props) {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
@@ -16,5 +15,3 @@ function IconArrow(props) {
     </svg>
   );
 }
-
-export default IconArrow;

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

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

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

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

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

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-function IconLanguage({width = 20, height = 20, ...props}) {
+export default function IconLanguage({width = 20, height = 20, ...props}) {
   return (
     <svg
       viewBox="0 0 20 20"
@@ -21,5 +20,3 @@ function IconLanguage({width = 20, height = 20, ...props}) {
     </svg>
   );
 }
-
-export default IconLanguage;

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

@@ -5,8 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-function IconMenu({width = 30, height = 30, className, ...restProps}) {
+export default function IconMenu({
+  width = 30,
+  height = 30,
+  className,
+  ...restProps
+}) {
   return (
     <svg
       className={className}
@@ -25,5 +29,3 @@ function IconMenu({width = 30, height = 30, className, ...restProps}) {
     </svg>
   );
 }
-
-export default IconMenu;

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

@@ -16,8 +16,7 @@ import LayoutHead from '@theme/LayoutHead';
 import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
-
-function Layout(props) {
+export default function Layout(props) {
   const {children, noFooter, wrapperClassName, pageClassName} = props;
   useKeyboardNavigation();
   return (
@@ -43,5 +42,3 @@ function Layout(props) {
     </LayoutProviders>
   );
 }
-
-export default Layout;

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

@@ -15,6 +15,7 @@ import {
   useTitleFormatter,
   useAlternatePageUtils,
   useThemeConfig,
+  keyboardFocusedClassName,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router'; // Useful for SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@@ -94,6 +95,9 @@ export default function LayoutHead(props) {
         <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/lib-next/theme/Logo/index.js

@@ -10,8 +10,7 @@ import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
-
-function Logo(props) {
+export default function Logo(props) {
   const {
     siteConfig: {title},
   } = useDocusaurusContext();
@@ -54,5 +53,3 @@ function Logo(props) {
     </Link>
   );
 }
-
-export default Logo;

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

@@ -10,8 +10,8 @@ import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Details from '@theme/Details';
-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.
+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.
 
 function unwrapMDXElement(element) {
   if (element?.props?.mdxType && element?.props?.originalType) {
@@ -45,7 +45,8 @@ const MDXComponents = {
     />
   ),
   details: (props) => {
-    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 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)}</>;

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

@@ -12,8 +12,7 @@ import MDXComponents from '@theme/MDXComponents';
 import TOC from '@theme/TOC';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-
-function MDXPage(props) {
+export default function MDXPage(props) {
   const {content: MDXPageContent} = props;
   const {
     metadata: {title, description, permalink, frontMatter},
@@ -48,5 +47,3 @@ function MDXPage(props) {
     </Layout>
   );
 }
-
-export default MDXPage;

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

@@ -206,7 +206,7 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
   );
 }
 
-function Navbar() {
+export default function Navbar() {
   const {
     navbar: {hideOnScroll, style},
   } = useThemeConfig();
@@ -279,5 +279,3 @@ function Navbar() {
     </nav>
   );
 }
-
-export default Navbar;

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

@@ -43,7 +43,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.
@@ -59,5 +59,3 @@ function DefaultNavbarItem({
     />
   );
 }
-
-export default DefaultNavbarItem;

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

@@ -68,8 +68,8 @@ export default function DocsVersionDropdownNavbarItem({
   const dropdownTo =
     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'])
+      : 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
 
   if (items.length <= 1) {

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

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

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

@@ -9,6 +9,7 @@ import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/IconLanguage';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 export default function LocaleDropdownNavbarItem({
   mobile,
@@ -41,7 +42,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
       {...props}

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

@@ -14,8 +14,8 @@ const NavbarItemComponents = {
   localeDropdown: () => LocaleDropdownNavbarItem,
   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,

package/lib-next/theme/NotFound.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import Translate, {translate} from '@docusaurus/Translate';
-
-function NotFound() {
+export default function NotFound() {
   return (
     <Layout
       title={translate({
@@ -46,5 +45,3 @@ function NotFound() {
     </Layout>
   );
 }
-
-export default NotFound;

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

@@ -6,8 +6,7 @@
  */
 import React from 'react';
 import Link from '@docusaurus/Link';
-
-function PaginatorNavLink(props) {
+export default function PaginatorNavLink(props) {
   const {permalink, title, subLabel} = props;
   return (
     <Link className="pagination-nav__link" to={permalink}>
@@ -16,5 +15,3 @@ function PaginatorNavLink(props) {
     </Link>
   );
 }
-
-export default PaginatorNavLink;