docs: update doocusaurus to 2.0.1 (#1997)

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(
-    'card margin-bottom--lg padding--lg',
-    styles.cardContainer,
-    href && styles.cardContainerLink,
-  );
-  return href ? (
-    <Link href={href} className={className}>
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
       {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>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </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,
-    background-color var(--ifm-transition-fast) ease;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
+.cardContainer *:last-child {
+  margin-bottom: 0;
 }
 
 .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;
+}