This looks better to me

facebook · Jun 22, 2022 · 154a022 · 154a022
1 parent f7f0fab
commit 154a022
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -262,15 +262,23 @@ declare module '@theme/DocCardList' {
 }
 
 declare module '@theme/DocItem/Layout' {
-  export default function DocItemLayout(): JSX.Element;
+  export interface Props {
+    readonly children: JSX.Element;
+  }
+
+  export default function DocItemLayout(props: Props): JSX.Element;
 }
 
 declare module '@theme/DocItem/Metadata' {
   export default function DocItemMetadata(): JSX.Element;
 }
 
 declare module '@theme/DocItem/Content' {
-  export default function DocItemContent(): JSX.Element;
+  export interface Props {
+    readonly children: JSX.Element;
+  }
+
+  export default function DocItemContent(props: Props): JSX.Element;
 }
 
 declare module '@theme/DocItem/TOC/Mobile' {

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx
@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import {ThemeClassNames, useDoc} from '@docusaurus/theme-common';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem/Content';
 
 /**
  Title can be declared inside md content or declared through
@@ -31,8 +32,7 @@ function useSyntheticTitle(): string | null {
   return metadata.title;
 }
 
-export default function DocItemContent(): JSX.Element {
-  const {MDXComponent} = useDoc();
+export default function DocItemContent({children}: Props): JSX.Element {
   const syntheticTitle = useSyntheticTitle();
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
@@ -41,9 +41,7 @@ export default function DocItemContent(): JSX.Element {
           <Heading as="h1">{syntheticTitle}</Heading>
         </header>
       )}
-      <MDXContent>
-        <MDXComponent />
-      </MDXContent>
+      <MDXContent>{children}</MDXContent>
     </div>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx
@@ -16,6 +16,7 @@ import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import type {Props} from '@theme/DocItem/Layout';
 
 import styles from './styles.module.css';
 
@@ -43,7 +44,7 @@ function useDocTOC() {
   };
 }
 
-export default function DocItemLayout(): JSX.Element {
+export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
   return (
     <div className="row">
@@ -54,7 +55,7 @@ export default function DocItemLayout(): JSX.Element {
             <DocBreadcrumbs />
             <DocVersionBadge />
             {docTOC.mobile}
-            <DocItemContent />
+            <DocItemContent>{children}</DocItemContent>
             <DocItemFooter />
           </article>
           <DocItemPaginator />

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -13,11 +13,14 @@ import type {Props} from '@theme/DocItem';
 
 export default function DocItem(props: Props): JSX.Element {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
   return (
     <DocProvider content={props.content}>
       <HtmlClassNameProvider className={docHtmlClassName}>
         <DocItemMetadata />
-        <DocItemLayout />
+        <DocItemLayout>
+          <MDXComponent />
+        </DocItemLayout>
       </HtmlClassNameProvider>
     </DocProvider>
   );

diff --git a/packages/docusaurus-theme-common/src/contexts/doc.tsx b/packages/docusaurus-theme-common/src/contexts/doc.tsx
@@ -13,7 +13,7 @@ import type {PropDocContent} from '@docusaurus/plugin-content-docs';
  * The React context value returned by the `useDoc()` hook.
  * It contains useful data related to the currently browsed doc.
  */
-export type DocContextValue = {MDXComponent: () => JSX.Element} & Pick<
+export type DocContextValue = Pick<
   PropDocContent,
   'metadata' | 'frontMatter' | 'toc' | 'assets' | 'contentTitle'
 >;
@@ -30,7 +30,6 @@ const Context = React.createContext<DocContextValue | null>(null);
 function useContextValue(content: PropDocContent): DocContextValue {
   return useMemo(
     () => ({
-      MDXComponent: content,
       metadata: content.metadata,
       frontMatter: content.frontMatter,
       assets: content.assets,