docs: redesigned documentation (#2539)

* docs: redesigned navigation bar (#2478)

* docs: redesigned homepage (#2480)

* docs: redesigned homepage

* fixed link

* docs: redesigned notes (#2491)

* docs: Applied Typography redesign rules (#2516)

* changes to typography

* small changes and fixes

* docs: redesigned table of content (#2518)

* redesigning toc

* finalized table of content design

* docs: redesigned code blocks (#2519)

* docs: redesigned code blocks

* removed unused package

* docs: redesigned survey and content footer (#2522)

* fixes to inline code

* redesigned doc footer

* docs: redesigned footer (#2523)

* docs: changed dark mode colors (#2524)

* docs: redesigned sidebar (#2535)

* docs: redesigned search modal (#2537)

* docs: resolved loose ends (#2538)

* added spacing for tabs

* docs: added no-zoom class for deploy images

* fix to tooltip design for inline code

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

@@ -9,29 +9,33 @@ import clsx from 'clsx';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import {translate} from '@docusaurus/Translate';
+import ThemedImage from '@theme/ThemedImage';
 
-function CardContainer({href, children}) {
+function CardContainer({href, children, className}) {
   return (
     <Link
       href={href}
-      className={clsx('card padding--lg', styles.cardContainer)}>
+      className={clsx('card', styles.cardContainer, className)}>
       {children}
     </Link>
   );
 }
-function CardLayout({href, icon, title, description}) {
+function CardLayout({href, icon, title, description, containerClassName}) {
   return (
-    <CardContainer href={href}>
-      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
-        {icon} {title}
-      </h2>
-      {description && (
-        <p
-          className={clsx('text--truncate', styles.cardDescription)}
-          title={description}>
-          {description}
-        </p>
-      )}
+    <CardContainer href={href} className={containerClassName}>
+      {icon}
+      <div className={clsx(styles.contentContainer)}>
+        <h2 className={clsx(styles.cardTitle)} title={title}>
+          {title}
+        </h2>
+        {description && (
+          <p
+            className={clsx(styles.cardDescription)}
+            title={description}>
+            {description}
+          </p>
+        )}
+      </div>
     </CardContainer>
   );
 }
@@ -55,25 +59,45 @@ function CardCategory({item}) {
         },
         {count: item.items.length},
       )}
+      containerClassName={item.customProps?.className}
     />
   );
 }
 function CardLink({item}) {
   let icon;
-  if (item.customProps && item.customProps.image) {
-    icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
+  if (item.customProps && item.customProps.themedImage) {
+    icon = (
+      <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
+        <ThemedImage alt={item.label} sources={{
+          light: item.customProps.themedImage.light,
+          dark: item.customProps.themedImage.dark
+        }} />
+      </div>
+    )
+  } else if (item.customProps && item.customProps.image) {
+    icon = (
+      <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
+        <img src={item.customProps.image} alt={item.label} />
+      </div>
+    );
   } else if (item.customProps && item.customProps.icon) {
     icon = item.customProps.icon;
   } else {
-    icon = isInternalUrl(item.href) ? '📄️' : '🔗';
+    icon = (
+      <div className={clsx(styles.imageContainer, 'no-zoom-img')}>
+        {isInternalUrl(item.href) ? '📄️' : '🔗'}
+      </div>
+    );
   }
   const doc = useDocById(item.docId ?? undefined);
+
   return (
     <CardLayout
       href={item.href}
       icon={icon}
       title={item.label}
-      description={doc?.description}
+      description={item.customProps?.description || doc?.description}
+      containerClassName={item.customProps?.className}
     />
   );
 }

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

@@ -1,100 +0,0 @@
-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

@@ -2,16 +2,31 @@
   --ifm-link-color: var(--ifm-color-emphasis-800);
   --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
+  --ifm-background-color: #fff;
+  --ifm-background-color-hover: #F9FAFB;
+  --ifm-border-color: #E5E7EB;
 
-  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
-  border: 1px solid var(--ifm-color-emphasis-200);
+  background-color: var(--ifm-background-color);
+  border: 1px solid var(--ifm-border-color) !important;
+  border-radius: 8px;
+  box-shadow: none !important;
   transition: all var(--ifm-transition-fast) ease;
   transition-property: border, box-shadow;
+
+  display: flex;
+  flex-direction: row;
+  padding: 16px 24px;
+  height: 100%;
+}
+
+[data-theme="dark"] .cardContainer {
+  --ifm-background-color-hover: #2D2D2D;
+  --ifm-background-color: #222222;
+  --ifm-border-color: #393939;
 }
 
 .cardContainer:hover {
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+  background-color: var(--ifm-background-color-hover);
 }
 
 .cardContainer *:last-child {
@@ -19,15 +34,29 @@
 }
 
 .cardTitle {
-  font-size: 1.2rem;
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 4px;
 }
 
 .cardDescription {
-  font-size: 0.8rem;
-  min-height: 0.8rem;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--ifm-color-content);
+}
+
+.contentContainer {
+  width: calc(100% - 20px);
 }
 
 .cardTitle img {
   vertical-align: bottom;
   margin-right: 2px;
+}
+
+.imageContainer {
+  width: 20px;
+  height: 20px;
+  margin-right: 16px;
+  margin-top: 3px;
 }