@docusaurus/theme-classic 2.0.1 → 2.2.0

package/lib/getSwizzleConfig.js

@@ -24,6 +24,13 @@ function getSwizzleConfig() {
                 },
                 description: 'The color mode toggle to switch between light and dark mode.',
             },
+            DocCardList: {
+                actions: {
+                    eject: 'safe',
+                    wrap: 'safe',
+                },
+                description: 'The component responsible for rendering a list of sidebar items cards.\nNotable used on the category generated-index pages.',
+            },
             DocSidebar: {
                 actions: {
                     eject: 'unsafe',
@@ -215,6 +222,13 @@ function getSwizzleConfig() {
                 // By default it's an empty placeholder for the user to fill
                 description: 'The search bar component of your site, appearing in the navbar.',
             },
+            SkipToContent: {
+                actions: {
+                    eject: 'safe',
+                    wrap: 'safe',
+                },
+                description: 'The component responsible for implementing the accessibility "skip to content" link (https://www.w3.org/TR/WCAG20-TECHS/G1.html)',
+            },
             'prism-include-languages': {
                 actions: {
                     eject: 'safe',

package/lib/theme/AnnouncementBar/CloseButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/AnnouncementBar/CloseButton';
+export default function AnnouncementBarCloseButton(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/CloseButton/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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 clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import styles from './styles.module.css';
+export default function AnnouncementBarCloseButton(props) {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

package/lib/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

package/lib/theme/AnnouncementBar/Content/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/AnnouncementBar/Content';
+export default function AnnouncementBarContent(props: Props): JSX.Element | null;

package/lib/theme/AnnouncementBar/Content/index.js

@@ -0,0 +1,23 @@
+/**
+ * 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 clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function AnnouncementBarContent(props) {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

package/lib/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

package/lib/theme/AnnouncementBar/index.js

@@ -5,44 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
-import {translate} from '@docusaurus/Translate';
-import IconClose from '@theme/Icon/Close';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
 import styles from './styles.module.css';
 export default function AnnouncementBar() {
-  const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
   if (!isActive) {
     return null;
   }
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
+  const {backgroundColor, textColor, isCloseable} = announcementBar;
   return (
     <div
       className={styles.announcementBar}
       style={{backgroundColor, color: textColor}}
       role="banner">
       {isCloseable && <div className={styles.announcementBarPlaceholder} />}
-      <div
-        className={styles.announcementBarContent}
-        // Developer provided the HTML, so assume it's safe.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{__html: content}}
-      />
-      {isCloseable ? (
-        <button
-          type="button"
-          className={clsx('clean-btn close', styles.announcementBarClose)}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
           onClick={close}
-          aria-label={translate({
-            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
-            message: 'Close',
-            description: 'The ARIA label for close button of announcement bar',
-          })}>
-          <IconClose width={14} height={14} strokeWidth={3.1} />
-        </button>
-      ) : null}
+          className={styles.announcementBarClose}
+        />
+      )}
     </div>
   );
 }

package/lib/theme/AnnouncementBar/styles.module.css

@@ -15,6 +15,15 @@
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
   border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
@@ -29,15 +38,10 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 .announcementBarClose {
   flex: 0 0 30px;
   align-self: stretch;
-  padding: 0;
-  line-height: 0;
 }
 
 .announcementBarContent {
   flex: 1 1 auto;
-  font-size: 85%;
-  text-align: center;
-  padding: 5px 0;
 }
 
 @media print {
@@ -46,11 +50,6 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   }
 }
 
-.announcementBarContent a {
-  color: inherit;
-  text-decoration: underline;
-}
-
 @media (min-width: 997px) {
   :root {
     --docusaurus-announcement-bar-height: 30px;

package/lib/theme/CodeBlock/Line/index.js

@@ -32,11 +32,9 @@ export default function CodeBlockLine({
           <span className={styles.codeLineContent}>{lineTokens}</span>
         </>
       ) : (
-        <>
-          {lineTokens}
-          <br />
-        </>
+        lineTokens
       )}
+      <br />
     </span>
   );
 }

package/lib/theme/CodeBlock/Line/styles.module.css

@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {

package/lib/theme/ColorModeToggle/index.js

@@ -46,7 +46,8 @@ function ColorModeToggle({className, value, onChange}) {
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
         disabled={!isBrowser}
         title={title}
-        aria-label={title}>
+        aria-label={title}
+        aria-live="polite">
         <IconLightMode
           className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
         />

package/lib/theme/DocCardList/index.d.ts

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/DocCardList';
-export default function DocCardList({ items, className }: Props): JSX.Element;
+export default function DocCardList(props: Props): JSX.Element;

package/lib/theme/DocCardList/index.js

@@ -6,21 +6,24 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {findFirstCategoryLink} from '@docusaurus/theme-common/internal';
+import {
+  useCurrentSidebarCategory,
+  filterDocCardListItems,
+} from '@docusaurus/theme-common';
 import DocCard from '@theme/DocCard';
-// Filter categories that don't have a link.
-function filterItems(items) {
-  return items.filter((item) => {
-    if (item.type === 'category') {
-      return !!findFirstCategoryLink(item);
-    }
-    return true;
-  });
+function DocCardListForCurrentSidebarCategory({className}) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
 }
-export default function DocCardList({items, className}) {
+export default function DocCardList(props) {
+  const {items, className} = props;
+  if (!items) {
+    return <DocCardListForCurrentSidebarCategory {...props} />;
+  }
+  const filteredItems = filterDocCardListItems(items);
   return (
     <section className={clsx('row', className)}>
-      {filterItems(items).map((item, index) => (
+      {filteredItems.map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard item={item} />
         </article>

package/lib/theme/DocPage/index.js

@@ -6,7 +6,11 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  PageMetadata,
+} from '@docusaurus/theme-common';
 import {
   docVersionSearchTag,
   DocsSidebarProvider,
@@ -16,13 +20,8 @@ import {
 import DocPageLayout from '@theme/DocPage/Layout';
 import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
-export default function DocPage(props) {
+function DocPageMetadata(props) {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = useDocRouteMetadata(props);
-  if (!currentDocRouteMetadata) {
-    return <NotFound />;
-  }
-  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
   return (
     <>
       <SearchMetadata
@@ -32,6 +31,24 @@ export default function DocPage(props) {
           versionMetadata.version,
         )}
       />
+      <PageMetadata>
+        {versionMetadata.noIndex && (
+          <meta name="robots" content="noindex, nofollow" />
+        )}
+      </PageMetadata>
+    </>
+  );
+}
+export default function DocPage(props) {
+  const {versionMetadata} = props;
+  const currentDocRouteMetadata = useDocRouteMetadata(props);
+  if (!currentDocRouteMetadata) {
+    return <NotFound />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <>
+      <DocPageMetadata {...props} />
       <HtmlClassNameProvider
         className={clsx(
           // TODO: it should be removed from here

package/lib/theme/DocSidebarItem/Category/index.js

@@ -111,7 +111,7 @@ export default function DocSidebarItemCategory({
   useEffect(() => {
     if (
       collapsible &&
-      expandedItem &&
+      expandedItem != null &&
       expandedItem !== index &&
       autoCollapseCategories
     ) {

package/lib/theme/DocSidebarItem/Link/index.js

@@ -20,7 +20,7 @@ export default function DocSidebarItemLink({
   index,
   ...props
 }) {
-  const {href, label, className} = item;
+  const {href, label, className, autoAddBaseUrl} = item;
   const isActive = isActiveSidebarItem(item, activePath);
   const isInternalLink = isInternalUrl(href);
   return (
@@ -40,6 +40,7 @@ export default function DocSidebarItemLink({
             'menu__link--active': isActive,
           },
         )}
+        autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? 'page' : undefined}
         to={href}
         {...(isInternalLink && {

package/lib/theme/Layout/index.js

@@ -7,7 +7,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
@@ -37,6 +41,7 @@ export default function Layout(props) {
       <Navbar />
 
       <div
+        id={SkipToContentFallbackId}
         className={clsx(
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,

package/lib/theme/MDXComponents/Code.js

@@ -9,15 +9,35 @@ import CodeBlock from '@theme/CodeBlock';
 export default function MDXCode(props) {
   const inlineElements = [
     'a',
+    'abbr',
     'b',
-    'big',
+    'br',
+    'button',
+    'cite',
+    'code',
+    'del',
+    'dfn',
+    'em',
     'i',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'object',
+    'output',
+    'q',
+    'ruby',
+    's',
+    'small',
     'span',
-    'em',
     'strong',
-    'sup',
     'sub',
-    'small',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
   ];
   const shouldBeInline = React.Children.toArray(props.children).every(
     (el) =>

package/lib/theme/MDXComponents/index.js

@@ -14,6 +14,7 @@ import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
 import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
 const MDXComponents = {
   head: MDXHead,
   code: MDXCode,
@@ -29,5 +30,6 @@ const MDXComponents = {
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
   admonition: Admonition,
+  mermaid: Mermaid,
 };
 export default MDXComponents;

package/lib/theme/Mermaid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default } from '@docusaurus/Noop';

package/lib/theme/Mermaid.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+// This component is meant to be implemented by a Mermaid renderer theme
+// It is notable created to be overridden by docusaurus-theme-mermaid
+// By default, the classic theme does not provide any Mermaid implementation
+// Yet we declare it there so that we can register it in MDX
+// TODO later the mermaid theme should be able to register its MDX component
+// see https://github.com/facebook/docusaurus/pull/7490#issuecomment-1279117288
+export {default} from '@docusaurus/Noop';

package/lib/theme/Navbar/MobileSidebar/Header/index.js

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
@@ -14,6 +15,11 @@ function CloseButton() {
   return (
     <button
       type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
       className="clean-btn navbar-sidebar__close"
       onClick={() => mobileSidebar.toggle()}>
       <IconClose color="var(--ifm-color-emphasis-600)" />

package/lib/theme/Navbar/MobileSidebar/Toggle/index.js

@@ -6,17 +6,22 @@
  */
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import IconMenu from '@theme/Icon/Menu';
 export default function MobileSidebarToggle() {
-  const mobileSidebar = useNavbarMobileSidebar();
+  const {toggle, shown} = useNavbarMobileSidebar();
   return (
     <button
-      onClick={mobileSidebar.toggle}
-      onKeyDown={mobileSidebar.toggle}
-      aria-label="Navigation bar toggle"
+      onClick={toggle}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+        message: 'Toggle navigation bar',
+        description:
+          'The ARIA label for hamburger menu button of mobile navigation',
+      })}
+      aria-expanded={shown}
       className="navbar__toggle clean-btn"
-      type="button"
-      tabIndex={0}>
+      type="button">
       <IconMenu />
     </button>
   );

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -12,6 +12,7 @@ import {
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 const getVersionMainDoc = (version) =>
@@ -24,6 +25,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }) {
+  const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
@@ -35,7 +37,8 @@ export default function DocsVersionDropdownNavbarItem({
       getVersionMainDoc(version);
     return {
       label: version.label,
-      to: versionDoc.path,
+      // preserve ?search#hash suffix on version switches
+      to: `${versionDoc.path}${search}${hash}`,
       isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };

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

@@ -8,6 +8,7 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import styles from './styles.module.css';
@@ -21,13 +22,17 @@ export default function LocaleDropdownNavbarItem({
     i18n: {currentLocale, locales, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
+  const {search, hash} = useLocation();
   const localeItems = locales.map((locale) => {
-    const to = `pathname://${alternatePageUtils.createUrl({
+    const baseTo = `pathname://${alternatePageUtils.createUrl({
       locale,
       fullyQualified: false,
     })}`;
+    // preserve ?search#hash suffix on locale switches
+    const to = `${baseTo}${search}${hash}`;
     return {
       label: localeConfigs[locale].label,
+      lang: localeConfigs[locale].htmlLang,
       to,
       target: '_self',
       autoAddBaseUrl: false,

package/lib/theme/SkipToContent/index.js

@@ -5,21 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Translate from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common/internal';
+import {SkipToContentLink} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 export default function SkipToContent() {
-  const {containerRef, handleSkip} = useSkipToContent();
-  return (
-    <div ref={containerRef} role="region">
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
-        <Translate
-          id="theme.common.skipToMainContent"
-          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
-          Skip to main content
-        </Translate>
-      </a>
-    </div>
-  );
+  return <SkipToContentLink className={styles.skipToContent} />;
 }

package/lib/theme/Tabs/index.js

@@ -102,6 +102,10 @@ function TabsComponent(props) {
   const handleKeydown = (event) => {
     let focusElement = null;
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0];
@@ -137,7 +141,6 @@ function TabsComponent(props) {
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
             onClick={handleTabChange}
             {...attributes}
             className={clsx(

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

@@ -20,8 +20,8 @@
 }
 
 .tagRegular {
-  border-radius: 0.5rem;
-  padding: 0.3rem 0.5rem;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }