Add doc card

src/theme/DocCard/index.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {
+  findFirstCategoryLink,
+  useDocById,
+} from '@docusaurus/theme-common/internal';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+function CardContainer({href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+function CardLayout({href, icon, title, description}) {
+  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>
+  );
+}
+function CardCategory({item}) {
+  const href = findFirstCategoryLink(item);
+  if (!href) {
+    return null;
+  }
+  return (
+    <CardLayout
+      href={href}
+      icon="🗃️"
+      title={item.label}
+      description={
+        item.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 }) {
+    const isUrl = (str) => {
+        try {
+            new URL(str);
+            return true;
+        } catch {
+            return false;
+        }
+    };
+
+    const isLocalImage = (str) => {
+        return str && str.startsWith('img:');
+    };
+
+    const isSvg = (str) => {
+        return str && (str.endsWith('.svg') || str.includes('.svg?'));
+    };
+
+    const getIconElement = () => {
+        const myEmoji = item?.customProps?.link;
+
+        if (isLocalImage(myEmoji)) {
+            const localImagePath = myEmoji.replace('img:', '');
+            return <img src={localImagePath} alt={item.label} style={{ width: '17px', height: '17px' }} />;
+        } else if (isSvg(myEmoji)) {
+            return <img
+                src={myEmoji}
+                alt={item.label}
+                style={{width: '18px', height: '18px'}}
+                className="svg-icon"
+            />
+        } else if (isUrl(myEmoji)) {
+            return <img src={myEmoji} alt={item.label} style={{ width: '24px', height: '24px' }} />;
+        } else {
+            return isInternalUrl(item.href) ? '📄️' : '🔗';
+        }
+    };
+
+    const icon = getIconElement();
+    const doc = useDocById(item.docId ?? undefined);
+
+    return (
+        <CardLayout
+            href={item.href}
+            icon={icon}
+            title={item.label}
+            description={item.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)}`);
+  }
+}

src/theme/DocCard/styles.module.css

@@ -0,0 +1,27 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+}