diff --git a/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/MDXEnhancement.context.ts b/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/MDXEnhancement.context.ts new file mode 100644 index 0000000..f95ef35 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/MDXEnhancement.context.ts @@ -0,0 +1,36 @@ +import React, { useContext, useMemo } from 'react' + +export type MDXComponentType = 'heading' +export type MDXEnhancementPosition = 'after' + +export type MDXEnhancementItem = { + component: MDXComponentType + position: MDXEnhancementPosition + render: (props: any) => React.ReactNode +} + +export type MDXEnhancementContextType = { + items: MDXEnhancementItem[] +} + +export const MDXEnhancementContext = + React.createContext({ + items: [], + }) + +export const useMDXEnhancementElements = ( + component: MDXComponentType, + position: MDXEnhancementPosition, + props: T, +): React.ReactNode => { + const ctx = useContext(MDXEnhancementContext) + if (!ctx) return [] + + return useMemo(() => { + const items = ctx.items.filter( + (item) => item.component === component && item.position === position, + ) + + return items.map((item) => item.render(props)) + }, [component, position, props]) +} diff --git a/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/index.ts b/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/index.ts new file mode 100644 index 0000000..16422cd --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/index.ts @@ -0,0 +1 @@ +export * from './MDXEnhancement.context' diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx index 9885168..03088b7 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx @@ -4,6 +4,7 @@ import { ThemeClassNames } from '@docusaurus/theme-common' import { useDoc } from '@docusaurus/theme-common/internal' import Heading from '@theme/Heading' import MDXContent from '@theme/MDXContent' +import MDXHeading from '@theme/MDXComponents/Heading' /** Title can be declared inside md content or declared through front matter and added manually. To make both cases consistent, @@ -29,7 +30,7 @@ export default function DocItemContent({ children }) {
{syntheticTitle && (
- {syntheticTitle} + {syntheticTitle}
)} {children} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx index e0bf6de..54c7435 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx @@ -1,17 +1,19 @@ -import React from 'react' -import clsx from 'clsx' import { useWindowSize } from '@docusaurus/theme-common' import { useDoc } from '@docusaurus/theme-common/internal' -import DocItemPaginator from '@theme/DocItem/Paginator' -import DocVersionBanner from '@theme/DocVersionBanner' -import DocVersionBadge from '@theme/DocVersionBadge' -import DocItemFooter from '@theme/DocItem/Footer' -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 styles from './styles.module.scss' +import DocItemContent from '@theme/DocItem/Content' +import DocItemFooter from '@theme/DocItem/Footer' +import DocItemPaginator from '@theme/DocItem/Paginator' +import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop' +import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile' +import DocVersionBadge from '@theme/DocVersionBadge' +import DocVersionBanner from '@theme/DocVersionBanner' +import { Props as HeadingProps } from '@theme/Heading' +import clsx from 'clsx' +import React from 'react' import { useMedia } from 'react-use' +import { MDXEnhancementContext } from '../../../containers/MDXEnhacement/MDXEnhancement.context' +import styles from './styles.module.scss' /** * Decide if the toc should be rendered, on mobile or desktop viewports @@ -50,8 +52,20 @@ export default function DocItemLayout({ children }) {
- {docTOC.mobile} - {children} + + props.as === 'h1' && docTOC.mobile, + }, + ], + }} + > + {children} +
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss index 703c53e..043f1f6 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.scss @@ -20,8 +20,18 @@ } .tocMobile { + margin-top: -0.5rem; + margin-bottom: 2rem; + & > div { display: block !important; + margin: 0; + } +} + +.docItemContainer { + .tocMobile:not(:first-of-type) { + display: none; } } diff --git a/packages/logos-docusaurus-theme/src/client/theme/MDXComponents/Heading.tsx b/packages/logos-docusaurus-theme/src/client/theme/MDXComponents/Heading.tsx new file mode 100644 index 0000000..b8854c3 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/MDXComponents/Heading.tsx @@ -0,0 +1,15 @@ +import Heading from '@docusaurus/theme-classic/lib/theme/MDXComponents/Heading' +import type { Props } from '@theme/MDXComponents/Heading' +import React from 'react' +import { useMDXEnhancementElements } from '../../containers/MDXEnhacement/MDXEnhancement.context' + +export default function MDXHeading(props: Props): JSX.Element { + const after = useMDXEnhancementElements('heading', 'after', props) + + return ( + <> + + {after} + + ) +}