From a849e6f1499a44519a87c70e8cebc3fc19a205cc Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 4 Mar 2022 15:57:00 +0100 Subject: [PATCH 1/3] Add MDXContent wrapper --- .../src/getSwizzleConfig.ts | 8 ++++++++ .../src/theme-classic.d.ts | 10 ++++++++++ .../src/theme/BlogPostItem/index.tsx | 5 ++--- .../src/theme/DocPage/index.tsx | 6 ++---- .../src/theme/MDXContent/index.tsx | 15 +++++++++++++++ .../src/theme/MDXContent/styles.module.css | 10 ++++++++++ .../src/theme/MDXPage/index.tsx | 7 +++---- 7 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts index f185a7ba2e4f..9c2385114b69 100644 --- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts +++ b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts @@ -85,6 +85,14 @@ export default function getSwizzleConfig(): SwizzleConfig { description: 'The MDX components to use for rendering MDX files. Meant to be ejected.', }, + MDXContent: { + actions: { + eject: 'safe', + wrap: 'safe', + }, + description: + 'A component wrapping all MDX content and providing the MDXComponents to the MDX context', + }, // TODO should probably not even appear here 'NavbarItem/utils': { actions: { diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index d1f5be5333d5..a5653f8edca1 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -343,6 +343,16 @@ declare module '@theme/MDXComponents' { export default MDXComponents; } +declare module '@theme/MDXContent' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly children: ReactNode; + } + + export default function MDXContent(props: Props): JSX.Element; +} + declare module '@theme/Navbar' { export default function Navbar(): JSX.Element; } diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx index 6004ecf6f67a..5c4d6d5476c0 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx @@ -7,13 +7,12 @@ import React from 'react'; import clsx from 'clsx'; -import {MDXProvider} from '@mdx-js/react'; import Translate, {translate} from '@docusaurus/Translate'; import Link from '@docusaurus/Link'; import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; import {usePluralForm} from '@docusaurus/theme-common'; import {blogPostContainerID} from '@docusaurus/utils-common'; -import MDXComponents from '@theme/MDXComponents'; +import MDXContent from '@theme/MDXContent'; import EditThisPage from '@theme/EditThisPage'; import type {Props} from '@theme/BlogPostItem'; @@ -108,7 +107,7 @@ export default function BlogPostItem(props: Props): JSX.Element { id={isBlogPostPage ? blogPostContainerID : undefined} className="markdown" itemProp="articleBody"> - {children} + {children} {(tagsExists || truncated) && ( diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index b221c8b4bc02..64f5ff8d466e 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -6,13 +6,11 @@ */ import React, {type ReactNode, useState, useCallback} from 'react'; -import {MDXProvider} from '@mdx-js/react'; - import renderRoutes from '@docusaurus/renderRoutes'; import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs'; import Layout from '@theme/Layout'; import DocSidebar from '@theme/DocSidebar'; -import MDXComponents from '@theme/MDXComponents'; +import MDXContent from '@theme/MDXContent'; import NotFound from '@theme/NotFound'; import type {DocumentRoute} from '@theme/DocItem'; import type {Props} from '@theme/DocPage'; @@ -137,7 +135,7 @@ function DocPageContent({ [styles.docItemWrapperEnhanced]: hiddenSidebarContainer, }, )}> - {children} + {children} diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx new file mode 100644 index 000000000000..ad70107193db --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx @@ -0,0 +1,15 @@ +/** + * 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 from 'react'; +import {MDXProvider} from '@mdx-js/react'; +import MDXComponents from '@theme/MDXComponents'; +import type {Props} from '@theme/MDXContent'; + +export default function MDXContent({children}: Props): JSX.Element { + return {children}; +} diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css new file mode 100644 index 000000000000..deb83e59723d --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css @@ -0,0 +1,10 @@ +/** + * 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. + */ + +.mdxPageWrapper { + justify-content: center; +} diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx index d9c53607c2e7..7a1876a5f61a 100644 --- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx @@ -8,8 +8,7 @@ import React from 'react'; import clsx from 'clsx'; import Layout from '@theme/Layout'; -import {MDXProvider} from '@mdx-js/react'; -import MDXComponents from '@theme/MDXComponents'; +import MDXContent from '@theme/MDXContent'; import type {Props} from '@theme/MDXPage'; import TOC from '@theme/TOC'; import {ThemeClassNames} from '@docusaurus/theme-common'; @@ -34,9 +33,9 @@ export default function MDXPage(props: Props): JSX.Element {
- + - +
{!hideTableOfContents && MDXPageContent.toc && (
From 7e4dac254b9955cef28009d020a87a4e1053b604 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 4 Mar 2022 17:10:33 +0100 Subject: [PATCH 2/3] useless CSS --- .../src/theme/MDXContent/styles.module.css | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css deleted file mode 100644 index deb83e59723d..000000000000 --- a/packages/docusaurus-theme-classic/src/theme/MDXContent/styles.module.css +++ /dev/null @@ -1,10 +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. - */ - -.mdxPageWrapper { - justify-content: center; -} From fa5f707283812e484087781b53a38acced093d35 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 4 Mar 2022 17:25:37 +0100 Subject: [PATCH 3/3] fix location of MDXContent --- .../docusaurus-theme-classic/src/theme/DocItem/index.tsx | 6 ++++-- .../docusaurus-theme-classic/src/theme/DocPage/index.tsx | 3 +-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx index b091503f98b2..d5af3b863b12 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx @@ -19,6 +19,7 @@ import Heading from '@theme/Heading'; import styles from './styles.module.css'; import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common'; import DocBreadcrumbs from '@theme/DocBreadcrumbs'; +import MDXContent from '@theme/MDXContent'; export default function DocItem(props: Props): JSX.Element { const {content: DocContent} = props; @@ -87,8 +88,9 @@ export default function DocItem(props: Props): JSX.Element { {title} )} - - + + +
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index 64f5ff8d466e..287038b592c8 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -10,7 +10,6 @@ import renderRoutes from '@docusaurus/renderRoutes'; import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs'; import Layout from '@theme/Layout'; import DocSidebar from '@theme/DocSidebar'; -import MDXContent from '@theme/MDXContent'; import NotFound from '@theme/NotFound'; import type {DocumentRoute} from '@theme/DocItem'; import type {Props} from '@theme/DocPage'; @@ -135,7 +134,7 @@ function DocPageContent({ [styles.docItemWrapperEnhanced]: hiddenSidebarContainer, }, )}> - {children} + {children}