feat route context

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

@@ -136,9 +136,7 @@ export function sortItems(params: ShowcaseItem[]): ShowcaseItem[] {
 
 function useShowcase() {
   const routeContext = useRouteContext();
-  console.log('routeContext:', routeContext);
   const showcase = routeContext?.data?.showcase;
-  console.log('showcase:', showcase);
   if (!showcase) {
     throw new Error(
       'showcase-related hooks can only be called on the showcase page',

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

@@ -81,7 +81,7 @@ export default async function pluginContentShowcase(
       });
     },
 
-    async contentLoaded({content, actions: {addRoute}}) {
+    async contentLoaded({content, actions: {addRoute, createData}}) {
       if (!content) {
         return;
       }
@@ -92,6 +92,7 @@ export default async function pluginContentShowcase(
         screenshotApi,
         routeBasePath,
         addRoute,
+        createData,
       });
     },
   };

packages/docusaurus-plugin-content-showcase/src/lifecycle/contentLoaded.ts

@@ -17,20 +17,24 @@ export async function processContentLoaded({
   routeBasePath,
   screenshotApi,
   addRoute,
+  createData,
 }: {
   content: ShowcaseItems;
   routeBasePath: string;
   tags: TagsOption;
   screenshotApi: string;
   addRoute: PluginContentLoadedActions['addRoute'];
+  createData: PluginContentLoadedActions['createData'];
 }): Promise<void> {
   addRoute({
     path: routeBasePath,
     component: '@theme/Showcase',
-    props: {
+    context: {
-      items: content.items,
+      showcase: await createData('showcase.json', {
-      tags,
+        items: content.items,
-      screenshotApi,
+        tags,
+        screenshotApi,
+      }),
     },
     exact: true,
   });

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

@@ -7,13 +7,11 @@
 
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
-import {ShowcaseProvider} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 import ShowcaseSearchBar from '@theme/Showcase/ShowcaseSearchBar';
 import ShowcaseCards from '@theme/Showcase/ShowcaseCards';
 import ShowcaseFilters from '@theme/Showcase/ShowcaseFilters';
-import type {Props} from '@theme/Showcase';
 
 const TITLE = translate({message: 'Docusaurus Site Showcase'});
 const DESCRIPTION = translate({
@@ -35,24 +33,19 @@ function ShowcaseHeader() {
   );
 }
 
-export default function Showcase(props: Props): JSX.Element {
+export default function Showcase(): JSX.Element {
   return (
-    <ShowcaseProvider
+    <Layout title={TITLE} description={DESCRIPTION}>
-      items={props.items}
+      <main className="margin-vert--lg">
-      tags={props.tags}
+        <ShowcaseHeader />
-      screenshotApi={props.screenshotApi}>
+        <ShowcaseFilters />
-      <Layout title={TITLE} description={DESCRIPTION}>
+        <div
-        <main className="margin-vert--lg">
+          style={{display: 'flex', marginLeft: 'auto'}}
-          <ShowcaseHeader />
+          className="container">
-          <ShowcaseFilters />
+          <ShowcaseSearchBar />
-          <div
+        </div>
-            style={{display: 'flex', marginLeft: 'auto'}}
+        <ShowcaseCards />
-            className="container">
+      </main>
-            <ShowcaseSearchBar />
+    </Layout>
-          </div>
-          <ShowcaseCards />
-        </main>
-      </Layout>
-    </ShowcaseProvider>
   );
 }

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

@@ -1,38 +0,0 @@
-/**
- * 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, {createContext, useMemo, type ReactNode} from 'react';
-import type {
-  ShowcaseItem,
-  TagsOption,
-  ShowcaseContextType,
-} from '@docusaurus/plugin-content-showcase';
-
-const ShowcaseContext = createContext<ShowcaseContextType | null>(null);
-
-export function ShowcaseProvider({
-  items,
-  tags,
-  screenshotApi,
-  children,
-}: {
-  items: ShowcaseItem[];
-  tags: TagsOption;
-  screenshotApi: string;
-  children: ReactNode;
-}): JSX.Element {
-  const contextValue = useMemo(
-    () => ({items, tags, screenshotApi}),
-    [items, tags, screenshotApi],
-  );
-
-  return (
-    <ShowcaseContext.Provider value={contextValue}>
-      {children}
-    </ShowcaseContext.Provider>
-  );
-}

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

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