docs: update doocusaurus to 2.0.1 (#1997)

www/docs/package.json

@@ -17,9 +17,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.17",
+    "@docusaurus/core": "latest",
-    "@docusaurus/preset-classic": "2.0.0-beta.17",
+    "@docusaurus/preset-classic": "latest",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.18",
+    "@docusaurus/remark-plugin-npm2yarn": "latest",
     "@svgr/webpack": "6.2.1",
     "algoliasearch-helper": "^3.8.2",
     "clsx": "^1.1.1",

www/docs/src/theme/DocCard/index.js

@@ -1,50 +1,45 @@
-import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import {
+  findFirstCategoryLink,
+  useDocById,
+} from '@docusaurus/theme-common/internal';
 
 import Link from '@docusaurus/Link';
-/**
- * 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 isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import {translate} from '@docusaurus/Translate';
-
 function CardContainer({href, children}) {
-  const className = clsx(
+  return (
-    'card margin-bottom--lg padding--lg',
+    <Link
-    styles.cardContainer,
+      href={href}
-    href && styles.cardContainerLink,
+      className={clsx('card padding--lg', styles.cardContainer)}>
-  );
-  return href ? (
-    <Link href={href} className={className}>
       {children}
     </Link>
-  ) : (
-    <div className={className}>{children}</div>
   );
 }
-
 function CardLayout({href, icon, title, description}) {
   return (
     <CardContainer href={href}>
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </h2>
-      <div
+      {description && (
+        <p
           className={clsx('text--truncate', styles.cardDescription)}
           title={description}>
           {description}
-      </div>
+        </p>
+      )}
     </CardContainer>
   );
 }
-
 function CardCategory({item}) {
   const href = findFirstCategoryLink(item);
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
   return (
     <CardLayout
       href={href}
@@ -57,14 +52,11 @@ function CardCategory({item}) {
           description:
             'The default description for a category card in the generated index about how many items this category includes',
         },
-        {
+        {count: item.items.length},
-          count: item.items.length,
-        },
       )}
     />
   );
 }
-
 function CardLink({item}) {
   let icon;
   if (item.customProps && item.customProps.image) {
@@ -74,7 +66,6 @@ function CardLink({item}) {
   } else {
     icon = isInternalUrl(item.href) ? '📄️' : '🔗';
   }
-
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
@@ -85,15 +76,12 @@ function CardLink({item}) {
     />
   );
 }
-
 export default function DocCard({item}) {
   switch (item.type) {
     case 'link':
       return <CardLink item={item} />;
-
     case 'category':
       return <CardCategory item={item} />;
-
     default:
       throw new Error(`unknown item type ${JSON.stringify(item)}`);
   }

www/docs/src/theme/DocCard/index_OLD.js

@@ -0,0 +1,100 @@
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+
+import Link from '@docusaurus/Link';
+/**
+ * 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 isInternalUrl from '@docusaurus/isInternalUrl';
+import styles from './styles.module.css';
+import {translate} from '@docusaurus/Translate';
+
+function CardContainer({href, children}) {
+  const className = clsx(
+    'card margin-bottom--lg padding--lg',
+    styles.cardContainer,
+    href && styles.cardContainerLink,
+  );
+  return href ? (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  ) : (
+    <div className={className}>{children}</div>
+  );
+}
+
+function CardLayout({href, icon, title, description}) {
+  return (
+    <CardContainer href={href}>
+      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+        {icon} {title}
+      </h2>
+      <div
+        className={clsx('text--truncate', styles.cardDescription)}
+        title={description}>
+        {description}
+      </div>
+    </CardContainer>
+  );
+}
+
+function CardCategory({item}) {
+  const href = findFirstCategoryLink(item);
+  return (
+    <CardLayout
+      href={href}
+      icon="🗃️"
+      title={item.label}
+      description={translate(
+        {
+          message: '{count} items',
+          id: 'theme.docs.DocCard.categoryDescription',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        {
+          count: item.items.length,
+        },
+      )}
+    />
+  );
+}
+
+function CardLink({item}) {
+  let icon;
+  if (item.customProps && item.customProps.image) {
+    icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
+  } else if (item.customProps && item.customProps.icon) {
+    icon = item.customProps.icon;
+  } else {
+    icon = isInternalUrl(item.href) ? '📄️' : '🔗';
+  }
+
+  const doc = useDocById(item.docId ?? undefined);
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={doc?.description}
+    />
+  );
+}
+
+export default function DocCard({item}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+
+    case 'category':
+      return <CardCategory item={item} />;
+
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

www/docs/src/theme/DocCard/styles.module.css

@@ -1,48 +1,33 @@
-/**
- * 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.
- */
-
 .cardContainer {
-  height: 8rem;
-  color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
 
-  /* box-shadow: var(--ifm-global-shadow-lw); */
   box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: box-shadow var(--ifm-transition-fast) ease,
+  transition: all var(--ifm-transition-fast) ease;
-    background-color var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
+.cardContainer:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
+  border-color: var(--ifm-color-primary);
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
+.cardContainer *:last-child {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
+  margin-bottom: 0;
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
 }
 
 .cardTitle {
   font-size: 1.2rem;
-  min-height: 1.2rem;
-}
-
-.cardTitle img {
-  vertical-align: bottom;
-  margin-right: 2px;
 }
 
 .cardDescription {
   font-size: 0.8rem;
   min-height: 0.8rem;
 }
+
+.cardTitle img {
+  vertical-align: bottom;
+  margin-right: 2px;
+}

www/docs/src/theme/SearchPage/index.js

@@ -1,19 +1,16 @@
-/**
+import {
- * Copyright (c) Facebook, Inc. and its affiliates.
+  HtmlClassNameProvider,
- *
+  isRegexpStringMatch,
- * This source code is licensed under the MIT license found in the
+  useEvent,
- * LICENSE file in the root directory of this source tree.
+  usePluralForm,
- */
+} from '@docusaurus/theme-common';
 /* eslint-disable jsx-a11y/no-autofocus */
 import React, {useEffect, useReducer, useRef, useState} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import {
-  isRegexpStringMatch,
-  useDynamicCallback,
-  usePluralForm,
   useSearchPage,
   useTitleFormatter,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Head from '@docusaurus/Head';
@@ -25,7 +22,6 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-
 // Very simple pluralization: probably good enough for now
 function useDocumentsFoundPlural() {
   const {selectMessage} = usePluralForm();
@@ -111,7 +107,7 @@ function SearchVersionSelectList({docsSearchVersionsHelpers}) {
     </div>
   );
 }
-export default function SearchPage() {
+function SearchPageContent() {
   const {
     siteConfig: {themeConfig},
     i18n: {currentLocale},
@@ -175,7 +171,7 @@ export default function SearchPage() {
   algoliaHelper.on(
     'result',
     ({results: {query, hits, page, nbHits, nbPages}}) => {
-      if (query === '' || !(hits instanceof Array)) {
+      if (query === '' || !Array.isArray(hits)) {
         searchResultStateDispatcher({type: 'reset'});
         return;
       }
@@ -223,7 +219,7 @@ export default function SearchPage() {
   const [loaderRef, setLoaderRef] = useState(null);
   const prevY = useRef(0);
   const observer = useRef(
-    ExecutionEnvironment.canUseDOM &&
+    ExecutionEnvironment.canUseIntersectionObserver &&
       new IntersectionObserver(
         (entries) => {
           const {
@@ -255,7 +251,7 @@ export default function SearchPage() {
           message: 'Search the documentation',
           description: 'The search page title for empty query',
         });
-  const makeSearch = useDynamicCallback((page = 0) => {
+  const makeSearch = useEvent((page = 0) => {
     algoliaHelper.setQuery(searchQuery).setPage(page).search();
   });
   useEffect(() => {
@@ -285,7 +281,7 @@ export default function SearchPage() {
     makeSearch(searchResultState.lastPage);
   }, [makeSearch, searchResultState.lastPage]);
   return (
-    <Layout wrapperClassName="search-page-wrapper">
+    <Layout>
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -445,3 +441,10 @@ export default function SearchPage() {
     </Layout>
   );
 }
+export default function SearchPage() {
+  return (
+    <HtmlClassNameProvider className="search-page-wrapper">
+      <SearchPageContent />
+    </HtmlClassNameProvider>
+  );
+}

www/docs/src/theme/SearchPage/styles.module.css

@@ -1,10 +1,3 @@
-/**
- * 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.
- */
-
 .searchQueryInput,
 .searchVersionInput {
   border-radius: var(--ifm-global-radius);