feat: implement PageCard component; closes #117

2026-08-05 13:46:35 -07:00 · 2023-10-16 12:15:07 +03:30
parent 41eb9e61f0
commit 5a00ebca5d
7 changed files with 227 additions and 0 deletions
@@ -0,0 +1,50 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-page-card {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: stretch;
+
+  text-decoration: none;
+  border: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.mdx-page-card__icon {
+  padding: 22px 16px;
+}
+
+.mdx-page-card__inner {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+
+  gap: 8px;
+  padding: 16px 0 18px 0;
+}
+
+.mdx-page-card__title {
+  display: block;
+  width: 100%;
+  padding-right: 8px;
+  font-size: 16px;
+  line-height: 24px;
+  overflow: hidden;
+  white-space: nowrap;
+  font-style: normal;
+  text-overflow: ellipsis;
+}
+
+.mdx-page-card__description {
+  display: block;
+  width: 100%;
+  padding-right: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  font-style: normal;
+  text-overflow: ellipsis;
+}
@@ -0,0 +1,45 @@
+import { FolderIcon, Typography } from '@acid-info/lsd-react'
+import Link, { Props as LinkProps } from '@docusaurus/Link'
+import clsx from 'clsx'
+import React from 'react'
+import './PageCard.scss'
+
+export type PageCardProps = Omit<LinkProps, 'title'> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export const PageCard: React.FC<PageCardProps> = ({
+  title,
+  description,
+  icon = <FolderIcon color="primary" />,
+  target = '_self',
+  ...props
+}) => {
+  return (
+    <Link
+      target={target}
+      {...props}
+      className={clsx(props.className, 'mdx-page-card')}
+    >
+      <div className="mdx-page-card__icon">{icon}</div>
+      <div className="mdx-page-card__inner">
+        <Typography
+          className="mdx-page-card__title"
+          component="span"
+          variant="body1"
+        >
+          {title}
+        </Typography>
+        <Typography
+          className="mdx-page-card__description"
+          component="span"
+          variant="body2"
+        >
+          {description}
+        </Typography>
+      </div>
+    </Link>
+  )
+}
@@ -0,0 +1 @@
+export * from './PageCard'
@@ -0,0 +1,70 @@
+import { translate } from '@docusaurus/Translate'
+import isInternalUrl from '@docusaurus/isInternalUrl'
+import type {
+  PropSidebarItemCategory,
+  PropSidebarItemLink,
+} from '@docusaurus/plugin-content-docs'
+import {
+  findFirstCategoryLink,
+  useDocById,
+} from '@docusaurus/theme-common/internal'
+import type { Props } from '@theme/DocCard'
+import React from 'react'
+import { PageCard } from '../../components/mdx/PageCard'
+
+function CardCategory({
+  item,
+}: {
+  item: PropSidebarItemCategory
+}): JSX.Element | null {
+  const href = findFirstCategoryLink(item)
+
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null
+  }
+
+  return (
+    <PageCard
+      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 }: { item: PropSidebarItemLink }): JSX.Element {
+  const icon = isInternalUrl(item.href) ? '📄️' : '🔗'
+  const doc = useDocById(item.docId ?? undefined)
+  return (
+    <PageCard
+      href={item.href}
+      // icon={icon}
+      title={item.label}
+      description={item.description ?? doc?.description}
+    />
+  )
+}
+
+export default function DocCard({ item }: Props): JSX.Element {
+  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)}`)
+  }
+}
@@ -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;
+}
@@ -0,0 +1,19 @@
+@use '../../css/utils';
+
+.root {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, 50%);
+
+  > * {
+    padding: 0 !important;
+    margin: 0 !important;
+
+    max-width: unset;
+    width: 100% !important;
+  }
+
+  @include utils.responsive('lg', 'down') {
+    grid-template-columns: 100%;
+  }
+}
@@ -0,0 +1,15 @@
+import DocCardList from '@docusaurus/theme-classic/lib/theme/DocCardList'
+import type { Props } from '@theme/DocCardList'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './DocCardList.module.scss'
+
+export default function DocCardListWrapper(props: Props): JSX.Element {
+  console.log(props)
+  return (
+    <DocCardList
+      {...props}
+      className={clsx(props.className, 'doc-card-list', styles.root)}
+    />
+  )
+}