@docusaurus/theme-classic 2.0.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/mdx-loader": "2.0.1",
-    "@docusaurus/module-type-aliases": "2.0.1",
-    "@docusaurus/plugin-content-blog": "2.0.1",
-    "@docusaurus/plugin-content-docs": "2.0.1",
-    "@docusaurus/plugin-content-pages": "2.0.1",
-    "@docusaurus/theme-common": "2.0.1",
-    "@docusaurus/theme-translations": "2.0.1",
-    "@docusaurus/types": "2.0.1",
-    "@docusaurus/utils": "2.0.1",
-    "@docusaurus/utils-common": "2.0.1",
-    "@docusaurus/utils-validation": "2.0.1",
+    "@docusaurus/core": "2.2.0",
+    "@docusaurus/mdx-loader": "2.2.0",
+    "@docusaurus/module-type-aliases": "2.2.0",
+    "@docusaurus/plugin-content-blog": "2.2.0",
+    "@docusaurus/plugin-content-docs": "2.2.0",
+    "@docusaurus/plugin-content-pages": "2.2.0",
+    "@docusaurus/theme-common": "2.2.0",
+    "@docusaurus/theme-translations": "2.2.0",
+    "@docusaurus/types": "2.2.0",
+    "@docusaurus/utils": "2.2.0",
+    "@docusaurus/utils-common": "2.2.0",
+    "@docusaurus/utils-validation": "2.2.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -47,8 +47,6 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
-    "@docusaurus/types": "2.0.0-beta.21",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
@@ -64,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "1ddee1c29cabf9bb52e4d78af6ebfaaabb1bc1f9"
+  "gitHead": "a308fb7c81832cca354192fe2984f52749441249"
 }

package/src/getSwizzleConfig.ts

@@ -28,6 +28,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         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', // Too much technical code in sidebar, not very safe atm
@@ -232,6 +240,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         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/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+  props: Props,
+): JSX.Element | null {
+  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/src/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/src/theme/AnnouncementBar/Content/index.tsx

@@ -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 from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(
+  props: Props,
+): JSX.Element | null {
+  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/src/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/src/theme/AnnouncementBar/index.tsx

@@ -6,49 +6,33 @@
  */
 
 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(): JSX.Element | null {
-  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/src/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/src/theme/CodeBlock/Line/index.tsx

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

package/src/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/src/theme/ColorModeToggle/index.tsx

@@ -52,7 +52,8 @@ function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
         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/src/theme/DocCardList/index.tsx

@@ -7,25 +7,27 @@
 
 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';
 import type {Props} from '@theme/DocCardList';
-import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
-// Filter categories that don't have a link.
-function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
-  return items.filter((item) => {
-    if (item.type === 'category') {
-      return !!findFirstCategoryLink(item);
-    }
-    return true;
-  });
+function DocCardListForCurrentSidebarCategory({className}: Props) {
+  const category = useCurrentSidebarCategory();
+  return <DocCardList items={category.items} className={className} />;
 }
 
-export default function DocCardList({items, className}: Props): JSX.Element {
+export default function DocCardList(props: Props): JSX.Element {
+  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/src/theme/DocPage/index.tsx

@@ -7,7 +7,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,
@@ -19,13 +23,8 @@ import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocPage';
 
-export default function DocPage(props: Props): JSX.Element {
+function DocPageMetadata(props: Props): JSX.Element {
   const {versionMetadata} = props;
-  const currentDocRouteMetadata = useDocRouteMetadata(props);
-  if (!currentDocRouteMetadata) {
-    return <NotFound />;
-  }
-  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
   return (
     <>
       <SearchMetadata
@@ -35,6 +34,25 @@ export default function DocPage(props: Props): JSX.Element {
           versionMetadata.version,
         )}
       />
+      <PageMetadata>
+        {versionMetadata.noIndex && (
+          <meta name="robots" content="noindex, nofollow" />
+        )}
+      </PageMetadata>
+    </>
+  );
+}
+
+export default function DocPage(props: Props): JSX.Element {
+  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/src/theme/DocSidebarItem/Category/index.tsx

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

package/src/theme/DocSidebarItem/Link/index.tsx

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

package/src/theme/Layout/index.tsx

@@ -8,7 +8,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';
@@ -42,6 +46,7 @@ export default function Layout(props: Props): JSX.Element {
       <Navbar />
 
       <div
+        id={SkipToContentFallbackId}
         className={clsx(
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,

package/src/theme/MDXComponents/Code.tsx

@@ -13,15 +13,35 @@ import type {Props} from '@theme/MDXComponents/Code';
 export default function MDXCode(props: Props): JSX.Element {
   const inlineElements: (string | undefined)[] = [
     '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/src/theme/MDXComponents/index.tsx

@@ -15,6 +15,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';
 
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
@@ -33,6 +34,7 @@ const MDXComponents: MDXComponentsObject = {
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
   admonition: Admonition,
+  mermaid: Mermaid,
 };
 
 export default MDXComponents;

package/src/theme/Mermaid.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -7,6 +7,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';
@@ -16,6 +17,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/src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -7,18 +7,23 @@
 
 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(): JSX.Element {
-  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/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -13,6 +13,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';
 import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
@@ -29,6 +30,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }: Props): JSX.Element {
+  const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
@@ -40,7 +42,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/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -9,6 +9,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 type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
@@ -26,14 +27,18 @@ export default function LocaleDropdownNavbarItem({
     i18n: {currentLocale, locales, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
+  const {search, hash} = useLocation();
 
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    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,