refactor Heading

facebook · Jan 6, 2022 · 25e68b0 · 25e68b0
1 parent 673a227
commit 25e68b0
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 62 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -206,12 +206,13 @@ declare module '@theme/Footer' {
 declare module '@theme/Heading' {
   import type {ComponentProps} from 'react';
 
-  export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  export interface Props extends ComponentProps<HeadingType> {}
+  type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-  const Heading: (Tag: HeadingType) => (props: Props) => JSX.Element;
-  export default Heading;
-  export const MainHeading: (props: Props) => JSX.Element;
+  export interface Props extends ComponentProps<HeadingType> {
+    as: HeadingType;
+  }
+
+  export default function Heading(props: Props): JSX.Element;
 }
 
 declare module '@theme/hooks/useHideableNavbar' {

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -13,7 +13,7 @@ import DocPaginator from '@theme/DocPaginator';
 import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import {MainHeading} from '@theme/Heading';
+import Heading from '@theme/Heading';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
@@ -35,9 +35,9 @@ export default function DocCategoryGeneratedIndexPage({
         <DocVersionBanner />
         <DocVersionBadge />
         <header>
-          <MainHeading className={styles.title}>
+          <Heading as="h1" className={styles.title}>
             {categoryGeneratedIndex.title}
-          </MainHeading>
+          </Heading>
           {categoryGeneratedIndex.description && (
             <p>{categoryGeneratedIndex.description}</p>
           )}

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -16,7 +16,7 @@ import type {Props} from '@theme/DocItem';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
-import {MainHeading} from '@theme/Heading';
+import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
@@ -80,7 +80,11 @@ export default function DocItem(props: Props): JSX.Element {
                 To make both cases consistent, the added title is added under the same div.markdown block
                 See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
                 */}
-                {shouldAddTitle && <MainHeading>{title}</MainHeading>}
+                {shouldAddTitle && (
+                  <header>
+                    <Heading as="h1">{title}</Heading>
+                  </header>
+                )}
 
                 <DocContent />
               </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx
@@ -7,62 +7,55 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {HeadingType, Props} from '@theme/Heading';
+import type {Props} from '@theme/Heading';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
 import './styles.css';
 import styles from './styles.module.css';
 
-type HeadingComponent = (props: Props) => JSX.Element;
+function AnchorHeading({as: As, id, ...props}: Props) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
 
-// eslint-disable-next-line react/function-component-definition
-export const MainHeading: HeadingComponent = ({...props}) => (
-  <header>
-    <h1
+  if (!id) {
+    return <As {...props} />;
+  }
+
+  return (
+    <As
       {...props}
-      id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-    >
+      className={clsx('anchor', {
+        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+        [styles.anchorWithStickyNavbar]: !hideOnScroll,
+      })}
+      id={id}>
       {props.children}
-    </h1>
-  </header>
-);
-
-const createAnchorHeading =
-  (Tag: HeadingType) =>
-  ({id, ...props}: Props) => {
-    const {
-      navbar: {hideOnScroll},
-    } = useThemeConfig();
-
-    if (!id) {
-      return <Tag {...props} />;
-    }
-
+      <a
+        className="hash-link"
+        href={`#${id}`}
+        title={translate({
+          id: 'theme.common.headingLinkTitle',
+          message: 'Direct link to heading',
+          description: 'Title for link to heading',
+        })}>
+        &#8203;
+      </a>
+    </As>
+  );
+}
+
+export default function Heading({as, ...props}: Props) {
+  if (as === 'h1') {
     return (
-      <Tag
+      <h1
         {...props}
-        className={clsx('anchor', {
-          [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-          [styles.anchorWithStickyNavbar]: !hideOnScroll,
-        })}
-        id={id}>
+        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+      >
         {props.children}
-        <a
-          className="hash-link"
-          href={`#${id}`}
-          title={translate({
-            id: 'theme.common.headingLinkTitle',
-            message: 'Direct link to heading',
-            description: 'Title for link to heading',
-          })}>
-          &#8203;
-        </a>
-      </Tag>
+      </h1>
     );
-  };
-
-const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) =>
-  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-
-export default Heading;
+  }
+  return <AnchorHeading as={as} {...props} />;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -67,12 +67,12 @@ const MDXComponents: MDXComponentsObject = {
       </Details>
     );
   },
-  h1: Heading('h1'),
-  h2: Heading('h2'),
-  h3: Heading('h3'),
-  h4: Heading('h4'),
-  h5: Heading('h5'),
-  h6: Heading('h6'),
+  h1: (props) => <Heading as="h1" {...props} />,
+  h2: (props) => <Heading as="h2" {...props} />,
+  h3: (props) => <Heading as="h3" {...props} />,
+  h4: (props) => <Heading as="h4" {...props} />,
+  h5: (props) => <Heading as="h5" {...props} />,
+  h6: (props) => <Heading as="h6" {...props} />,
 };
 
 export default MDXComponents;