feat: custom doc-layout components (#1611)

web-infra-dev · Nov 20, 2024 · 3460c70 · 3460c70
1 parent c395518
commit 3460c70
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/packages/document/docs/en/guide/advanced/custom-theme.mdx b/packages/document/docs/en/guide/advanced/custom-theme.mdx
@@ -88,6 +88,8 @@ const Layout = () => (
     top={<div>top</div>}
     /* Bottom of the entire page */
     bottom={<div>bottom</div>}
+    /* Custom MDX components */
+    components={{ p: props => <p {...props} className="my-4 leading-7" /> }}
   />
 );
 

diff --git a/packages/document/docs/zh/guide/advanced/custom-theme.mdx b/packages/document/docs/zh/guide/advanced/custom-theme.mdx
@@ -88,6 +88,8 @@ const Layout = () => (
     top={<div>top</div>}
     /* 整个页面最底部 */
     bottom={<div>bottom</div>}
+    /* 自定义 MDX 组件 */
+    components={{ p: props => <p {...props} className="my-4 leading-7" /> }}
   />
 );
 

diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -23,6 +23,7 @@ export interface DocLayoutProps {
   afterOutline?: React.ReactNode;
   uiSwitch?: UISwitchResult;
   navTitle?: React.ReactNode;
+  components?: Record<string, React.FC>;
 }
 
 export function DocLayout(props: DocLayoutProps) {
@@ -39,6 +40,7 @@ export function DocLayout(props: DocLayoutProps) {
     afterSidebar,
     uiSwitch,
     navTitle,
+    components,
   } = props;
   const { siteData, page } = usePageData();
   const { toc = [], frontmatter } = page;
@@ -52,9 +54,11 @@ export function DocLayout(props: DocLayoutProps) {
     localesData?.outlineTitle || themeConfig?.outlineTitle || 'ON THIS PAGE';
   const isOverviewPage = frontmatter?.overview ?? false;
 
+  const mdxComponents = { ...getCustomMDXComponent(), ...components };
+
   const docContent = (
     <TabDataContext.Provider value={{ tabData, setTabData }}>
-      <MDXProvider components={getCustomMDXComponent()}>
+      <MDXProvider components={mdxComponents}>
         <Content />
       </MDXProvider>
     </TabDataContext.Provider>

diff --git a/packages/theme-default/src/layout/Layout/index.tsx b/packages/theme-default/src/layout/Layout/index.tsx
@@ -60,6 +60,7 @@ export const Layout: React.FC<LayoutProps> = props => {
     beforeFeatures,
     afterFeatures,
     afterNavMenu,
+    components,
   } = props;
   const docProps: DocLayoutProps = {
     beforeDocFooter,
@@ -72,6 +73,7 @@ export const Layout: React.FC<LayoutProps> = props => {
     afterSidebar,
     beforeOutline,
     afterOutline,
+    components,
   };
   const homeProps: HomeLayoutProps = {
     beforeHero,