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/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index bfb2aa1..29f7be4 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -1,5 +1,5 @@ -@use './utils'; -@use './lsd'; +@use "./utils"; +@use "./lsd"; /** * Any CSS included here will be global. The classic template @@ -71,8 +71,8 @@ /* Typography. */ --ifm-font-family-base: var(--lsd-typography-generic-font-family); --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; - --lgs-font-family-secondary: Georgia, 'Times New Roman', serif; + "Liberation Mono", "Courier New", monospace; + --lgs-font-family-secondary: Georgia, "Times New Roman", serif; --ifm-font-size-base: 100%; --ifm-line-height-base: 1.625; @@ -231,20 +231,20 @@ --ifm-table-background: transparent !important; --ifm-table-stripe-background: transparent !important; - @include utils.responsive('xl', 'down') { + @include utils.responsive("xl", "down") { --container-max-width: 912px; } } -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-scheme: dark; } -[data-theme='light'] { +[data-theme="light"] { --ifm-color-scheme: light; } -@include utils.responsive('lg', 'down') { +@include utils.responsive("lg", "down") { :root { --ifm-background-color: rgb(var(--lsd-surface-primary)); } @@ -287,23 +287,23 @@ svg * { } h1 { - @include lsd.typography('h1'); + @include lsd.typography("h1"); } h2 { - @include lsd.typography('h2'); + @include lsd.typography("h2"); } h3 { - @include lsd.typography('h3'); + @include lsd.typography("h3"); } h4 { - @include lsd.typography('h4'); + @include lsd.typography("h4"); } code { - @include lsd.typography('body1'); + @include lsd.typography("body1"); color: rgb(var(--lsd-text-primary)); border-radius: 0; background: rgba(255, 255, 255, 0.15); @@ -401,7 +401,7 @@ small { } .external-link { - @include lsd.typography('body2'); + @include lsd.typography("body2"); } .dropdown__link:hover { @@ -417,7 +417,7 @@ small { } .breadcrumbs__item:not(:last-child):after { - content: '/'; + content: "/"; opacity: 1; background: none; } @@ -459,9 +459,9 @@ small { text-decoration-color: #fff !important; } -.navbar__left-items > a:not(:last-child)[href^='/'] { +.navbar__left-items > a:not(:last-child)[href^="/"] { &:after { - content: '•'; + content: "•"; margin-left: 16px; text-decoration: none; display: inline-block; @@ -469,7 +469,7 @@ small { } .menu__list-item .menu__link { - @include lsd.typography('body2'); + @include lsd.typography("body2"); } .menu__link--active { @@ -611,7 +611,7 @@ small { align-items: center; } -a[class^='sidebarLogo_'] { +a[class^="sidebarLogo_"] { margin: 0; img { @@ -620,7 +620,7 @@ a[class^='sidebarLogo_'] { } table { - @include lsd.typography('body2'); + @include lsd.typography("body2"); thead > tr { border: 1px solid rgb(var(--lsd-border-primary)); } @@ -641,6 +641,26 @@ table { } } +.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; @@ -666,7 +686,7 @@ table { display: none; } -@include utils.responsive('sm', 'down') { +@include utils.responsive("sm", "down") { :root { --ifm-global-spacing: 0.5rem; --ifm-spacing-vertical: var(--ifm-global-spacing); @@ -715,7 +735,7 @@ table { } } -@include utils.responsive('lg', 'up') { +@include utils.responsive("lg", "up") { .main-wrapper { main > .container { padding-bottom: 200px !important; @@ -761,7 +781,7 @@ table { } } -@include utils.responsive('xl', 'up') { +@include utils.responsive("xl", "up") { .main-wrapper { & > div { display: grid; @@ -833,7 +853,7 @@ table { text-align: unset; grid-column: 1 / 12; grid-row: 1 / 1; - @include lsd.typography('body2'); + @include lsd.typography("body2"); & > div:first-of-type { display: none; @@ -841,7 +861,7 @@ table { } .footer__title { - @include lsd.typography('label1'); + @include lsd.typography("label1"); margin-bottom: 4px; font-weight: var(--ifm-font-weight-normal); } @@ -884,7 +904,7 @@ table { &, a { - @include lsd.typography('label1'); + @include lsd.typography("label1"); } a { @@ -893,7 +913,7 @@ table { &:not(:last-child) { &::after { - content: '•'; + content: "•"; margin-left: 8px; text-decoration: none; display: inline-block; @@ -902,7 +922,7 @@ table { } .footer__copyright { - @include lsd.typography('body2'); + @include lsd.typography("body2"); } .footer__logo { @@ -916,7 +936,7 @@ table { flex-direction: row; } -@include utils.responsive('xl', 'up') { +@include utils.responsive("xl", "up") { .navbar__inner { display: grid; gap: 16px; @@ -943,7 +963,7 @@ table { } } -@include utils.responsive('lg', 'down') { +@include utils.responsive("lg", "down") { main > .container { padding-bottom: 84px !important; } @@ -1031,7 +1051,7 @@ table { border-left: none; > div { - @include lsd.typography('subtitle2'); + @include lsd.typography("subtitle2"); text-decoration: none; } } @@ -1092,7 +1112,7 @@ table { } } -[data-hidden-doc-sidebar='true'] { +[data-hidden-doc-sidebar="true"] { .theme-doc-sidebar-container { display: none; } 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/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} + + ) +} 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]: (