From 798636a1415b0ed8159a1dda3c7e3eee3b429a80 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:49:18 +0200
Subject: [PATCH] Refactor doc cards to use tailwind for easier link styling

---
 src/theme/DocCard/index.js          | 63 +++++++----------------------
 src/theme/DocCard/styles.module.css | 27 -------------
 src/theme/DocCardList/index.js      |  4 +-
 3 files changed, 15 insertions(+), 79 deletions(-)
 delete mode 100644 src/theme/DocCard/styles.module.css

diff --git a/src/theme/DocCard/index.js b/src/theme/DocCard/index.js
index bdaa808a..75ae3612 100644
--- a/src/theme/DocCard/index.js
+++ b/src/theme/DocCard/index.js
@@ -1,45 +1,28 @@
 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 }) {
+
+function CardLayout({ href, title, description }) {
   return (
-    <Link
-      href={href}
-      className={clsx(
-        "card padding--lg",
-        "rounded-none text-gray-800 dark:text-gray-100 hover:text-gray-900 hover:dark:text-gray-50",
-        styles.cardContainer
-      )}
-    >
-      {children}
-    </Link>
-  );
-}
-function CardLayout({ href, icon, title, description }) {
-  return (
-    <CardContainer href={href}>
-      <h2
-        className={clsx("text--truncate", styles.cardTitle, "mb-4")}
-        title={title}
-      >
-        {title}
+    <div className="not-prose relative group flex flex-col gap-2 border border-gray-900 dark:border-gray-50 rounded-md p-4">
+      <h2>
+        <Link
+          href={href}
+          className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500 font-bold"
+        >
+          <span aria-hidden class="absolute inset-0"></span>
+          {title}
+        </Link>
       </h2>
       {description && (
-        <p
-          className={clsx(styles.cardDescription, "line-clamp-2")}
-          title={description}
-        >
+        <p className="text-gray-700 dark:text-gray-300 text-base">
           {description}
         </p>
       )}
-    </CardContainer>
+    </div>
   );
 }
 function CardCategory({ item }) {
@@ -49,32 +32,14 @@ function CardCategory({ item }) {
     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 }
-        )
-      }
-    />
+    <CardLayout href={href} title={item.label} description={item.description} />
   );
 }
 function CardLink({ item }) {
-  const icon = isInternalUrl(item.href) ? "📄️" : "🔗";
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
       href={item.href}
-      icon={icon}
       title={item.label}
       description={item.description ?? doc?.description}
     />
diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css
deleted file mode 100644
index 4f7ad27f..00000000
--- a/src/theme/DocCard/styles.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.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;
-}
diff --git a/src/theme/DocCardList/index.js b/src/theme/DocCardList/index.js
index 4f4cc7be..0462805e 100644
--- a/src/theme/DocCardList/index.js
+++ b/src/theme/DocCardList/index.js
@@ -23,9 +23,7 @@ export default function DocCardList(props) {
       )}
     >
       {filteredItems.map((item, index) => (
-        <article key={index} className="not-prose">
-          <DocCard item={item} />
-        </article>
+        <DocCard item={item} key={index} />
       ))}
     </section>
   );