wip showcase provider :D

packages/docusaurus-plugin-content-showcase/src/client/index.ts

@@ -19,8 +19,6 @@ import type {
   ShowcaseItem,
 } from '@docusaurus/plugin-content-showcase';
 
-export const clientShowcase = 42;
-
 export function filterUsers({
   users,
   tags,

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

@@ -280,13 +280,7 @@ declare module '@theme/Showcase/ShowcaseCard' {
 }
 
 declare module '@theme/Showcase/ShowcaseCards' {
-  import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase';
-
-  export interface Props {
-    readonly users: ShowcaseItem[];
-  }
-
-  export default function ShowcaseCards(props: Props): JSX.Element;
+  export default function ShowcaseCards(): JSX.Element;
 }
 declare module '@theme/Showcase/ShowcaseTooltip' {
   export interface Props {
@@ -318,13 +312,7 @@ declare module '@theme/Showcase/ShowcaseFilterToggle' {
 }
 
 declare module '@theme/Showcase/ShowcaseFilters' {
-  import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase';
-
-  export interface Props {
-    readonly users: ShowcaseItem[];
-  }
-
-  export default function ShowcaseFilters(props: Props): JSX.Element;
+  export default function ShowcaseFilters(): JSX.Element;
 }
 
 declare module '@theme/Showcase/OperatorButton' {

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

@@ -12,10 +12,10 @@ import {
   useFilteredUsers,
   sortUsers,
 } from '@docusaurus/plugin-content-showcase/client';
+import {useShowcase} from '@docusaurus/theme-common/internal';
 import Heading from '@theme/Heading';
 import FavoriteIcon from '@theme/Showcase/FavoriteIcon';
 import ShowcaseCard from '@theme/Showcase/ShowcaseCard';
-import type {Props} from '@theme/Showcase/ShowcaseCards';
 import type {ShowcaseItem} from '@docusaurus/plugin-content-showcase';
 
 import styles from './styles.module.css';
@@ -74,14 +74,16 @@ function NoResultSection() {
   );
 }
 
-export default function ShowcaseCards(props: Props): JSX.Element {
-  const filteredUsers = useFilteredUsers(props.users);
+export default function ShowcaseCards(): JSX.Element {
+  const users = useShowcase().items;
+
+  const filteredUsers = useFilteredUsers(users);
 
   if (filteredUsers.length === 0) {
     return <NoResultSection />;
   }
 
-  const sortedUsers = sortUsers(props.users);
+  const sortedUsers = sortUsers(users);
 
   const favoriteUsers = sortedUsers.filter((user: ShowcaseItem) =>
     user.tags.includes('favorite'),

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

@@ -14,12 +14,12 @@ import {
   Tags,
   TagList,
 } from '@docusaurus/plugin-content-showcase/client';
+import {useShowcase} from '@docusaurus/theme-common/internal';
 import FavoriteIcon from '@theme/Showcase/FavoriteIcon';
 import Heading from '@theme/Heading';
 import ShowcaseTagSelect from '@theme/Showcase/ShowcaseTagSelect';
 import OperatorButton from '@theme/Showcase/OperatorButton';
 import ClearAllButton from '@theme/Showcase/ClearAllButton';
-import type {Props} from '@theme/Showcase/ShowcaseFilters';
 import type {TagType} from '@docusaurus/plugin-content-showcase';
 
 import styles from './styles.module.css';
@@ -74,8 +74,9 @@ function ShowcaseTagList() {
   );
 }
 
-function HeadingText(props: Props) {
-  const filteredUsers = useFilteredUsers(props.users);
+function HeadingText() {
+  const users = useShowcase().items;
+  const filteredUsers = useFilteredUsers(users);
   const siteCountPlural = useSiteCountPlural();
   return (
     <div className={styles.headingText}>
@@ -96,19 +97,19 @@ function HeadingButtons() {
   );
 }
 
-function HeadingRow(props: Props) {
+function HeadingRow() {
   return (
     <div className={clsx('margin-bottom--sm', styles.headingRow)}>
-      <HeadingText users={props.users} />
+      <HeadingText />
       <HeadingButtons />
     </div>
   );
 }
 
-export default function ShowcaseFilters(props: Props): ReactNode {
+export default function ShowcaseFilters(): ReactNode {
   return (
     <section className="container margin-top--l margin-bottom--lg">
-      <HeadingRow users={props.users} />
+      <HeadingRow />
       <ShowcaseTagList />
     </section>
   );

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

@@ -8,7 +8,7 @@
 import Translate, {translate} from '@docusaurus/Translate';
 
 import Link from '@docusaurus/Link';
-import {clientShowcase} from '@docusaurus/plugin-content-showcase/client';
+import {ShowcaseProvider} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 
@@ -40,19 +40,19 @@ function ShowcaseHeader() {
 export default function Showcase(props: Props): JSX.Element {
   const users = props.content;
   return (
-    <Layout title={TITLE} description={DESCRIPTION}>
-      {/* eslint-disable-next-line @docusaurus/prefer-docusaurus-heading, @docusaurus/no-untranslated-text */}
-      <h1>Client showcase API: {clientShowcase}</h1>
-      <main className="margin-vert--lg">
-        <ShowcaseHeader />
-        <ShowcaseFilters users={users} />
-        <div
-          style={{display: 'flex', marginLeft: 'auto'}}
-          className="container">
-          <ShowcaseSearchBar />
-        </div>
-        <ShowcaseCards users={users} />
-      </main>
-    </Layout>
+    <ShowcaseProvider content={{items: users}}>
+      <Layout title={TITLE} description={DESCRIPTION}>
+        <main className="margin-vert--lg">
+          <ShowcaseHeader />
+          <ShowcaseFilters />
+          <div
+            style={{display: 'flex', marginLeft: 'auto'}}
+            className="container">
+            <ShowcaseSearchBar />
+          </div>
+          <ShowcaseCards />
+        </main>
+      </Layout>
+    </ShowcaseProvider>
   );
 }

packages/docusaurus-theme-common/src/contexts/showcase.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useMemo, type ReactNode, useContext} from 'react';
+import {ReactContextError} from '../utils/reactUtils';
+import type {ShowcaseItems} from '@docusaurus/plugin-content-showcase';
+
+const Context = React.createContext<ShowcaseItems | null>(null);
+
+function useContextValue(content: ShowcaseItems): ShowcaseItems {
+  return useMemo(
+    () => ({
+      items: content.items,
+    }),
+    [content],
+  );
+}
+
+export function ShowcaseProvider({
+  children,
+  content,
+}: {
+  children: ReactNode;
+  content: ShowcaseItems;
+}): JSX.Element {
+  const contextValue = useContextValue(content);
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+}
+
+export function useShowcase(): ShowcaseItems {
+  const showcase = useContext(Context);
+  if (showcase === null) {
+    throw new ReactContextError('ShowcaseProvider');
+  }
+  return showcase;
+}

packages/docusaurus-theme-common/src/internal.ts

@@ -26,6 +26,7 @@ export {DocsVersionProvider, useDocsVersion} from './contexts/docsVersion';
 export {DocsSidebarProvider, useDocsSidebar} from './contexts/docsSidebar';
 
 export {DocProvider, useDoc, type DocContextValue} from './contexts/doc';
+export {ShowcaseProvider, useShowcase} from './contexts/showcase';
 export {
   BlogPostProvider,
   useBlogPost,