feat: Swizzle DocCard

Haven't found any other way to remove 📄️ icon from CardLink.

It also enabled removing description directly without CSS hack.

docs/01-podstawy/06-kontrola-wersji/01-podstawy-gita/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Podstawy Gita
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/02-ux-ui/01-projektowanie-interfejsu-i-doswiadczen-uzytkownikow/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Projektowanie interfejsu i doświadczeń użytkowników
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/02-ux-ui/02-praktyczne-szkolenie-projektowania-ux-ui/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Praktyczne szkolenie projektowania UX/UI
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/03-frontend/07-pakiety/01-webpack-4/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Webpack 4
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/03-frontend/08-zarzadzanie-stanem/02-podstawy-reduxa/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Podstawy Reduxa
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/05-fullstack/01-autentykacja-i-autoryzacja/01-implementacja-autentykacji/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Implementacja autentykacji
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

docs/05-fullstack/06-next-js/02-mini-projekt-z-next-js/index.mdx

@@ -2,4 +2,4 @@ import DocCardList from "@theme/DocCardList"
 
 # Mini projekt z Next.js
 
-<DocCardList className="DocCardList--no-description" />
+<DocCardList />

src/css/custom.css

@@ -104,11 +104,3 @@
 .video iframe {
   @apply aspect-video w-full;
 }
-
-.DocCardList--no-description .card h2 {
-  @apply mb-0;
-}
-
-.DocCardList--no-description .card p {
-  @apply hidden;
-}

src/theme/DocCard/index.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+import clsx from "clsx"
+import Link from "@docusaurus/Link"
+import { findFirstCategoryLink } 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)
+  // Unexpected: categories that don't have a link have been filtered upfront
+  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 icon = isInternalUrl(item.href) ? "" : "🔗"
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={item.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;
+}