From ce490438baf259162f0741ebfd9b2b16a0cbe568 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 8 Jun 2023 22:36:40 +0900 Subject: [PATCH 1/3] doc footer css update --- .../src/client/css/custom.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 665ad83..e975aca 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -616,6 +616,26 @@ a[class^='sidebarLogo_'] { } } +.theme-doc-footer { + margin-bottom: 96px; +} + +.theme-doc-footer-edit-meta-row { + div[class*='lastUpdated_'] { + @include lsd.typography('body2'); + font-style: normal; + opacity: 0.7; + + small { + display: none; + } + + b { + font-weight: 400 !important; + } + } +} + .navbar-sidebar__item { padding-inline: var(--content-padding); padding-block: 0; From bee5df33fbb664d48f3d65dfa14e56694031041a Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 8 Jun 2023 20:17:21 +0330 Subject: [PATCH 2/3] fix: update search result icons --- .../src/client/static/icons/hashtag.svg | 6 +++--- .../theme/SearchBar/SearchResultItem/SearchResultItem.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/hashtag.svg b/packages/logos-docusaurus-theme/src/client/static/icons/hashtag.svg index 4a771d5..e16e3b3 100644 --- a/packages/logos-docusaurus-theme/src/client/static/icons/hashtag.svg +++ b/packages/logos-docusaurus-theme/src/client/static/icons/hashtag.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx index fe3393f..662b659 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/SearchBar/SearchResultItem/SearchResultItem.tsx @@ -9,7 +9,7 @@ import styles from './SearchResultItem.module.scss' const icons: Record = { [SearchDocumentType.Title]: ( - + ), [SearchDocumentType.Heading]: ( From 88cc89fceea0cd4401750fe49238c40108248da6 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 9 Jun 2023 04:05:42 +0330 Subject: [PATCH 3/3] fix: render mobile toc after page title --- .../MDXEnhacement/MDXEnhancement.context.ts | 36 ++++++++++++++++++ .../client/containers/MDXEnhacement/index.ts | 1 + .../client/theme/DocItem/Content/index.tsx | 3 +- .../src/client/theme/DocItem/Layout/index.tsx | 38 +++++++++++++------ .../theme/DocItem/Layout/styles.module.scss | 10 +++++ .../client/theme/MDXComponents/Heading.tsx | 15 ++++++++ 6 files changed, 90 insertions(+), 13 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/MDXEnhancement.context.ts create mode 100644 packages/logos-docusaurus-theme/src/client/containers/MDXEnhacement/index.ts create mode 100644 packages/logos-docusaurus-theme/src/client/theme/MDXComponents/Heading.tsx 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} + + ) +}