wip

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -250,10 +250,8 @@ declare module '@theme/BlogPostItems' {
 declare module '@theme/Showcase' {
   import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase';
 
-  export type User = ShowcaseItem;
-
   export type Props = {
-    content: User[];
+    items: ShowcaseItem[];
   };
 
   export default function Showcase(props: Props): JSX.Element;
@@ -262,7 +260,7 @@ declare module '@theme/Showcase' {
 declare module '@theme/Showcase/FavoriteIcon' {
   export interface Props {
     className?: string;
-    style?: ComponentProps<'svg'>['style'];
+    style?: React.ComponentProps<'svg'>['style'];
     size: 'small' | 'medium' | 'large';
   }
 
@@ -273,7 +271,7 @@ declare module '@theme/Showcase/ShowcaseCard' {
   import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase';
 
   export interface Props {
-    readonly user: ShowcaseItem;
+    readonly item: ShowcaseItem;
   }
 
   export default function ShowcaseCard(props: Props): JSX.Element;
@@ -282,16 +280,7 @@ declare module '@theme/Showcase/ShowcaseCard' {
 declare module '@theme/Showcase/ShowcaseCards' {
   export default function ShowcaseCards(): JSX.Element;
 }
-declare module '@theme/Showcase/ShowcaseTooltip' {
-  export interface Props {
-    anchorEl?: HTMLElement | string;
-    id: string;
-    text: string;
-    children: React.ReactElement;
-  }
 
-  export default function ShowcaseTooltip(props: Props): JSX.Element;
-}
 declare module '@theme/Showcase/ShowcaseTagSelect' {
   import {type ComponentProps, type ReactElement} from 'react';
   import type {TagType} from '@docusaurus/plugin-content-showcase';
@@ -301,15 +290,12 @@ declare module '@theme/Showcase/ShowcaseTagSelect' {
     label: string;
     description: string;
     icon: ReactElement<ComponentProps<'svg'>>;
+    // TODO: update this type
+    rest?: any;
   }
 
   export default function ShowcaseTagSelect(props: Props): JSX.Element;
 }
-declare module '@theme/Showcase/ShowcaseFilterToggle' {
-  export type Operator = 'OR' | 'AND';
-
-  export default function ShowcaseFilterToggle(): JSX.Element;
-}
 
 declare module '@theme/Showcase/ShowcaseFilters' {
   export default function ShowcaseFilters(): JSX.Element;

packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCard/index.tsx

@@ -64,27 +64,28 @@ function getCardImage(user: ShowcaseItem): string {
   );
 }
 
-function ShowcaseCard({user}: {user: ShowcaseItem}) {
+function ShowcaseCard({item}: {item: ShowcaseItem}) {
-  const image = getCardImage(user);
+  console.log('ShowcaseCard user:', item);
+  const image = getCardImage(item);
   return (
-    <li key={user.title} className="card shadow--md">
+    <li key={item.title} className="card shadow--md">
       <div className={clsx('card__image', styles.showcaseCardImage)}>
         {/* TODO change back to ideal image */}
-        <img src={image} alt={user.title} />
+        <img src={image} alt={item.title} />
       </div>
       <div className="card__body">
         <div className={clsx(styles.showcaseCardHeader)}>
           <Heading as="h4" className={styles.showcaseCardTitle}>
-            <Link href={user.website} className={styles.showcaseCardLink}>
+            <Link href={item.website} className={styles.showcaseCardLink}>
-              {user.title}
+              {item.title}
             </Link>
           </Heading>
-          {user.tags.includes('favorite') && (
+          {item.tags.includes('favorite') && (
             <FavoriteIcon size="medium" style={{marginRight: '0.25rem'}} />
           )}
-          {user.source && (
+          {item.source && (
             <Link
-              href={user.source}
+              href={item.source}
               className={clsx(
                 'button button--secondary button--sm',
                 styles.showcaseCardSrcBtn,
@@ -93,10 +94,10 @@ function ShowcaseCard({user}: {user: ShowcaseItem}) {
             </Link>
           )}
         </div>
-        <p className={styles.showcaseCardBody}>{user.description}</p>
+        <p className={styles.showcaseCardBody}>{item.description}</p>
       </div>
       <ul className={clsx('card__footer', styles.cardFooter)}>
-        <ShowcaseCardTag tags={user.tags} />
+        <ShowcaseCardTag tags={item.tags} />
       </ul>
     </li>
   );

packages/docusaurus-theme-classic/src/theme/Showcase/ShowcaseCards/index.tsx

@@ -52,12 +52,13 @@ function CardList({
   heading?: ReactNode;
   items: ShowcaseItem[];
 }) {
+  console.log('CardList items:', items);
   return (
     <div className="container">
       {heading}
       <ul className={clsx('clean-list', styles.cardList)}>
         {items.map((item) => (
-          <ShowcaseCard key={item.title} user={item} />
+          <ShowcaseCard key={item.title} item={item} />
         ))}
       </ul>
     </div>
@@ -76,6 +77,7 @@ function NoResultSection() {
 
 export default function ShowcaseCards(): JSX.Element {
   const users = useShowcase().items;
+  console.log('ShowcaseCards users:', users);
 
   const filteredUsers = useFilteredUsers(users);
 
@@ -88,10 +90,12 @@ export default function ShowcaseCards(): JSX.Element {
   const favoriteUsers = sortedUsers.filter((user: ShowcaseItem) =>
     user.tags.includes('favorite'),
   );
+  console.log('favoriteUsers:', favoriteUsers);
 
   const otherUsers = sortedUsers.filter(
     (user: ShowcaseItem) => !user.tags.includes('favorite'),
   );
+  console.log('otherUsers:', otherUsers);
 
   return (
     <section className="margin-top--lg margin-bottom--xl">

packages/docusaurus-theme-classic/src/theme/Showcase/index.tsx

@@ -38,9 +38,8 @@ function ShowcaseHeader() {
 }
 
 export default function Showcase(props: Props): JSX.Element {
-  const users = props.content;
   return (
-    <ShowcaseProvider content={{items: users}}>
+    <ShowcaseProvider content={{items: props.items}}>
       <Layout title={TITLE} description={DESCRIPTION}>
         <main className="margin-vert--lg">
           <ShowcaseHeader />