From 30d2966878e4a92227f1173eb4ec282bfb616637 Mon Sep 17 00:00:00 2001 From: nahbee10 Date: Tue, 12 Nov 2024 14:55:54 -0500 Subject: [PATCH] styling breadcrumbs and toc --- docusaurus.config.js | 1 + package.json | 3 +- postcss.config.js | 8 +++ src/css/custom.css | 10 +++ src/css/font.css | 27 +++---- src/css/index.css | 0 src/theme/DocBreadcrumbs.tsx | 2 +- src/theme/DocItem/Content/index.js | 38 ++++++++++ src/theme/DocItem/Footer/index.js | 68 ++++++++++++++++++ src/theme/DocItem/Footer/styles.module.css | 11 +++ src/theme/DocItem/Layout/index.js | 53 ++++++++++++++ src/theme/DocItem/Layout/styles.module.css | 10 +++ src/theme/DocItem/Metadata/index.js | 14 ++++ src/theme/DocItem/Paginator/index.js | 11 +++ src/theme/DocItem/TOC/Desktop/index.js | 15 ++++ src/theme/DocItem/TOC/Mobile/index.js | 17 +++++ .../DocItem/TOC/Mobile/styles.module.css | 12 ++++ src/theme/DocItem/index.js | 19 +++++ src/theme/DocPage/Layout/Main/index.js | 23 ++++++ .../DocPage/Layout/Main/styles.module.css | 21 ++++++ .../Layout/Sidebar/ExpandButton/index.js | 28 ++++++++ .../Sidebar/ExpandButton/styles.module.css | 27 +++++++ src/theme/DocPage/Layout/Sidebar/index.js | 70 +++++++++++++++++++ .../DocPage/Layout/Sidebar/styles.module.css | 32 +++++++++ src/theme/DocPage/Layout/index.js | 28 ++++++++ src/theme/DocPage/Layout/styles.module.css | 18 +++++ src/theme/DocPage/index.js | 61 ++++++++++++++++ tailwind.config.js | 2 +- yarn.lock | 9 +++ 29 files changed, 618 insertions(+), 20 deletions(-) create mode 100644 postcss.config.js create mode 100644 src/css/index.css create mode 100644 src/theme/DocItem/Content/index.js create mode 100644 src/theme/DocItem/Footer/index.js create mode 100644 src/theme/DocItem/Footer/styles.module.css create mode 100644 src/theme/DocItem/Layout/index.js create mode 100644 src/theme/DocItem/Layout/styles.module.css create mode 100644 src/theme/DocItem/Metadata/index.js create mode 100644 src/theme/DocItem/Paginator/index.js create mode 100644 src/theme/DocItem/TOC/Desktop/index.js create mode 100644 src/theme/DocItem/TOC/Mobile/index.js create mode 100644 src/theme/DocItem/TOC/Mobile/styles.module.css create mode 100644 src/theme/DocItem/index.js create mode 100644 src/theme/DocPage/Layout/Main/index.js create mode 100644 src/theme/DocPage/Layout/Main/styles.module.css create mode 100644 src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js create mode 100644 src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css create mode 100644 src/theme/DocPage/Layout/Sidebar/index.js create mode 100644 src/theme/DocPage/Layout/Sidebar/styles.module.css create mode 100644 src/theme/DocPage/Layout/index.js create mode 100644 src/theme/DocPage/Layout/styles.module.css create mode 100644 src/theme/DocPage/index.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 7cabdd47b8..a89828d32a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -219,6 +219,7 @@ module.exports = { require.resolve('./src/css/custom.css'), require.resolve('./src/css/font.css'), require.resolve('./src/css/types.css'), + require.resolve('./src/css/index.css'), ], }, }, diff --git a/package.json b/package.json index 7425841e12..e768da1dad 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,8 @@ "postcss": "^8.4.47", "prettier": "3.3.3", "tailwindcss": "^3.4.13", - "typescript": "^4.8.4" + "typescript": "^4.8.4", + "postcss-import": "^16.1.0" }, "engines": { "npm": "please-use-yarn", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..d2a4d6ebd3 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,8 @@ +/** @type {import('postcss').PostcssConfig} */ +module.exports = { + plugins: { + 'postcss-import': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 1ad2d6461e..8ae5f5e8ab 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -17,3 +17,13 @@ :root { /* add override here */ } + +.breadcrumbs__link { + @apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-transparent !p-0 !body-3; +} +.breadcrumbs__item:first-child, .breadcrumbs__item:first-child:after { + @apply !hidden; +} +.breadcrumbs__item:not(:last-child):after { + @apply !text-light-neutral-1 dark:!text-dark-neutral-1; +} \ No newline at end of file diff --git a/src/css/font.css b/src/css/font.css index b5f1af37e4..0d04096e2d 100644 --- a/src/css/font.css +++ b/src/css/font.css @@ -2,77 +2,70 @@ @font-face { font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Regular.woff2'); + src: url('/static/fonts/baselGrotesk/Basel-Grotesk-Regular.woff2'); font-weight: '400'; font-style: 'normal'; } @font-face { font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff2'); + src: url('/static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff2'); font-weight: '400'; font-style: 'italic'; } @font-face { font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Book.woff2'); + src: url('/static/fonts/baselGrotesk/Basel-Grotesk-Book.woff2'); font-weight: '500'; font-style: 'normal'; } @font-face { font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff2'); + src: url('/static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff2'); font-weight: '500'; font-style: 'italic'; } @font-face { font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Medium.woff2'); + src: url('/static/fonts/baselGrotesk/Basel-Grotesk-Medium.woff2'); font-weight: '600'; font-style: 'normal'; } -@font-face { - font-family: 'Basel Grotesk'; - src: url('/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff2'); - font-weight: '600'; - font-style: 'italic'; -} - @font-face { font-family: 'Riegraf'; - src: url('/fonts/riegraf/Riegraf-Light.otf'); + src: url('/static/fonts/riegraf/Riegraf-Light.otf'); font-weight: '300'; font-style: 'normal'; } @font-face { font-family: 'Riegraf'; - src: url('/fonts/riegraf/Riegraf-Regular.otf'); + src: url('/static/fonts/riegraf/Riegraf-Regular.otf'); font-weight: '400'; font-style: 'normal'; } @font-face { font-family: 'Riegraf'; - src: url('/fonts/riegraf/Riegraf-Regular-Italic.otf'); + src: url('/static/fonts/riegraf/Riegraf-Regular-Italic.otf'); font-weight: '400'; font-style: 'italic'; } @font-face { font-family: 'Riegraf'; - src: url('/fonts/riegraf/Riegraf-Medium.otf'); + src: url('/static/fonts/riegraf/Riegraf-Medium.otf'); font-weight: '500'; font-style: 'normal'; } @font-face { font-family: 'Riegraf'; - src: url('/fonts/riegraf/Riegraf-Bold.otf'); + src: url('/static/fonts/riegraf/Riegraf-Bold.otf'); font-weight: '600'; font-style: 'normal'; } diff --git a/src/css/index.css b/src/css/index.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/theme/DocBreadcrumbs.tsx b/src/theme/DocBreadcrumbs.tsx index b185b817c9..2180d20b43 100644 --- a/src/theme/DocBreadcrumbs.tsx +++ b/src/theme/DocBreadcrumbs.tsx @@ -7,7 +7,7 @@ import SentimentTracking from '../components/SentimentTracking' export default function DocBreadcrumbs(props) { return (
- +
diff --git a/src/theme/DocItem/Content/index.js b/src/theme/DocItem/Content/index.js new file mode 100644 index 0000000000..9f5d8ca9ab --- /dev/null +++ b/src/theme/DocItem/Content/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import {useDoc} from '@docusaurus/theme-common/internal'; +import Heading from '@theme/Heading'; +import MDXContent from '@theme/MDXContent'; +/** + Title can be declared inside md content or declared through + front matter and added manually. 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 + + We render a "synthetic title" if: + - user doesn't ask to hide it with front matter + - the markdown content does not already contain a top-level h1 heading +*/ +function useSyntheticTitle() { + const {metadata, frontMatter, contentTitle} = useDoc(); + const shouldRender = + !frontMatter.hide_title && typeof contentTitle === 'undefined'; + if (!shouldRender) { + return null; + } + return metadata.title; +} +export default function DocItemContent({children}) { + const syntheticTitle = useSyntheticTitle(); + return ( +
+ {syntheticTitle && ( +
+ {syntheticTitle} +
+ )} + {children} +
+ ); +} diff --git a/src/theme/DocItem/Footer/index.js b/src/theme/DocItem/Footer/index.js new file mode 100644 index 0000000000..7e12433b8c --- /dev/null +++ b/src/theme/DocItem/Footer/index.js @@ -0,0 +1,68 @@ +import React from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import {useDoc} from '@docusaurus/theme-common/internal'; +import LastUpdated from '@theme/LastUpdated'; +import EditThisPage from '@theme/EditThisPage'; +import TagsListInline from '@theme/TagsListInline'; +import styles from './styles.module.css'; +function TagsRow(props) { + return ( +
+
+ +
+
+ ); +} +function EditMetaRow({ + editUrl, + lastUpdatedAt, + lastUpdatedBy, + formattedLastUpdatedAt, +}) { + return ( +
+
{editUrl && }
+ +
+ {(lastUpdatedAt || lastUpdatedBy) && ( + + )} +
+
+ ); +} +export default function DocItemFooter() { + const {metadata} = useDoc(); + const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} = + metadata; + const canDisplayTagsRow = tags.length > 0; + const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy); + const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow; + if (!canDisplayFooter) { + return null; + } + return ( +
+ {canDisplayTagsRow && } + {canDisplayEditMetaRow && ( + + )} +
+ ); +} diff --git a/src/theme/DocItem/Footer/styles.module.css b/src/theme/DocItem/Footer/styles.module.css new file mode 100644 index 0000000000..7c1e964419 --- /dev/null +++ b/src/theme/DocItem/Footer/styles.module.css @@ -0,0 +1,11 @@ +.lastUpdated { + margin-top: 0.2rem; + font-style: italic; + font-size: smaller; +} + +@media (min-width: 997px) { + .lastUpdated { + text-align: right; + } +} diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js new file mode 100644 index 0000000000..0351bb2ec7 --- /dev/null +++ b/src/theme/DocItem/Layout/index.js @@ -0,0 +1,53 @@ +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.css'; +/** + * Decide if the toc should be rendered, on mobile or desktop viewports + */ +function useDocTOC() { + const {frontMatter, toc} = useDoc(); + const windowSize = useWindowSize(); + const hidden = frontMatter.hide_table_of_contents; + const canRender = !hidden && toc.length > 0; + const mobile = canRender ? : undefined; + const desktop = + canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( + + ) : undefined; + return { + hidden, + mobile, + desktop, + }; +} +export default function DocItemLayout({children}) { + const docTOC = useDocTOC(); + return ( +
+
+ +
+
+ + + {docTOC.mobile} + {children} + +
+ +
+
+ {docTOC.desktop &&
On this page {docTOC.desktop}
} +
+ ); +} diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css new file mode 100644 index 0000000000..d5aaec1322 --- /dev/null +++ b/src/theme/DocItem/Layout/styles.module.css @@ -0,0 +1,10 @@ +.docItemContainer header + *, +.docItemContainer article > *:first-child { + margin-top: 0; +} + +@media (min-width: 997px) { + .docItemCol { + max-width: 75% !important; + } +} diff --git a/src/theme/DocItem/Metadata/index.js b/src/theme/DocItem/Metadata/index.js new file mode 100644 index 0000000000..1a2fc63117 --- /dev/null +++ b/src/theme/DocItem/Metadata/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import {PageMetadata} from '@docusaurus/theme-common'; +import {useDoc} from '@docusaurus/theme-common/internal'; +export default function DocItemMetadata() { + const {metadata, frontMatter, assets} = useDoc(); + return ( + + ); +} diff --git a/src/theme/DocItem/Paginator/index.js b/src/theme/DocItem/Paginator/index.js new file mode 100644 index 0000000000..be73c91941 --- /dev/null +++ b/src/theme/DocItem/Paginator/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {useDoc} from '@docusaurus/theme-common/internal'; +import DocPaginator from '@theme/DocPaginator'; +/** + * This extra component is needed, because should remain generic. + * DocPaginator is used in non-docs contexts too: generated-index pages... + */ +export default function DocItemPaginator() { + const {metadata} = useDoc(); + return ; +} diff --git a/src/theme/DocItem/TOC/Desktop/index.js b/src/theme/DocItem/TOC/Desktop/index.js new file mode 100644 index 0000000000..3e2190f4d0 --- /dev/null +++ b/src/theme/DocItem/TOC/Desktop/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import {useDoc} from '@docusaurus/theme-common/internal'; +import TOC from '@theme/TOC'; +export default function DocItemTOCDesktop() { + const {toc, frontMatter} = useDoc(); + return ( + + ); +} diff --git a/src/theme/DocItem/TOC/Mobile/index.js b/src/theme/DocItem/TOC/Mobile/index.js new file mode 100644 index 0000000000..a966564c42 --- /dev/null +++ b/src/theme/DocItem/TOC/Mobile/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import clsx from 'clsx'; +import {ThemeClassNames} from '@docusaurus/theme-common'; +import {useDoc} from '@docusaurus/theme-common/internal'; +import TOCCollapsible from '@theme/TOCCollapsible'; +import styles from './styles.module.css'; +export default function DocItemTOCMobile() { + const {toc, frontMatter} = useDoc(); + return ( + + ); +} diff --git a/src/theme/DocItem/TOC/Mobile/styles.module.css b/src/theme/DocItem/TOC/Mobile/styles.module.css new file mode 100644 index 0000000000..f0c287b8c7 --- /dev/null +++ b/src/theme/DocItem/TOC/Mobile/styles.module.css @@ -0,0 +1,12 @@ +@media (min-width: 997px) { + /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */ + .tocMobile { + display: none; + } +} + +@media print { + .tocMobile { + display: none; + } +} diff --git a/src/theme/DocItem/index.js b/src/theme/DocItem/index.js new file mode 100644 index 0000000000..8f8f5bedee --- /dev/null +++ b/src/theme/DocItem/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import {HtmlClassNameProvider} from '@docusaurus/theme-common'; +import {DocProvider} from '@docusaurus/theme-common/internal'; +import DocItemMetadata from '@theme/DocItem/Metadata'; +import DocItemLayout from '@theme/DocItem/Layout'; +export default function DocItem(props) { + const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`; + const MDXComponent = props.content; + return ( + + + + + + + + + ); +} diff --git a/src/theme/DocPage/Layout/Main/index.js b/src/theme/DocPage/Layout/Main/index.js new file mode 100644 index 0000000000..985b45da74 --- /dev/null +++ b/src/theme/DocPage/Layout/Main/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useDocsSidebar} from '@docusaurus/theme-common/internal'; +import styles from './styles.module.css'; +export default function DocPageLayoutMain({hiddenSidebarContainer, children}) { + const sidebar = useDocsSidebar(); + return ( +
+
+ {children} +
+
+ ); +} diff --git a/src/theme/DocPage/Layout/Main/styles.module.css b/src/theme/DocPage/Layout/Main/styles.module.css new file mode 100644 index 0000000000..096eb06490 --- /dev/null +++ b/src/theme/DocPage/Layout/Main/styles.module.css @@ -0,0 +1,21 @@ +.docMainContainer { + display: flex; + width: 100%; +} + +@media (min-width: 997px) { + .docMainContainer { + flex-grow: 1; + max-width: calc(100% - var(--doc-sidebar-width)); + } + + .docMainContainerEnhanced { + max-width: calc(100% - var(--doc-sidebar-hidden-width)); + } + + .docItemWrapperEnhanced { + max-width: calc( + var(--ifm-container-width) + var(--doc-sidebar-width) + ) !important; + } +} diff --git a/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js b/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js new file mode 100644 index 0000000000..9dfc02ed7f --- /dev/null +++ b/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import {translate} from '@docusaurus/Translate'; +import IconArrow from '@theme/Icon/Arrow'; +import styles from './styles.module.css'; +export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) { + return ( +
+ +
+ ); +} diff --git a/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css b/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css new file mode 100644 index 0000000000..f4cd944d83 --- /dev/null +++ b/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css @@ -0,0 +1,27 @@ +@media (min-width: 997px) { + .expandButton { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: background-color var(--ifm-transition-fast) ease; + background-color: var(--docusaurus-collapse-button-bg); + } + + .expandButton:hover, + .expandButton:focus { + background-color: var(--docusaurus-collapse-button-bg-hover); + } + + .expandButtonIcon { + transform: rotate(0); + } + + [dir='rtl'] .expandButtonIcon { + transform: rotate(180deg); + } +} diff --git a/src/theme/DocPage/Layout/Sidebar/index.js b/src/theme/DocPage/Layout/Sidebar/index.js new file mode 100644 index 0000000000..e49fdcacc9 --- /dev/null +++ b/src/theme/DocPage/Layout/Sidebar/index.js @@ -0,0 +1,70 @@ +import React, {useState, useCallback} from 'react'; +import clsx from 'clsx'; +import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common'; +import {useDocsSidebar} from '@docusaurus/theme-common/internal'; +import {useLocation} from '@docusaurus/router'; +import DocSidebar from '@theme/DocSidebar'; +import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton'; +import styles from './styles.module.css'; +// Reset sidebar state when sidebar changes +// Use React key to unmount/remount the children +// See https://github.com/facebook/docusaurus/issues/3414 +function ResetOnSidebarChange({children}) { + const sidebar = useDocsSidebar(); + return ( + + {children} + + ); +} +export default function DocPageLayoutSidebar({ + sidebar, + hiddenSidebarContainer, + setHiddenSidebarContainer, +}) { + const {pathname} = useLocation(); + const [hiddenSidebar, setHiddenSidebar] = useState(false); + const toggleSidebar = useCallback(() => { + if (hiddenSidebar) { + setHiddenSidebar(false); + } + // onTransitionEnd won't fire when sidebar animation is disabled + // fixes https://github.com/facebook/docusaurus/issues/8918 + if (!hiddenSidebar && prefersReducedMotion()) { + setHiddenSidebar(true); + } + setHiddenSidebarContainer((value) => !value); + }, [setHiddenSidebarContainer, hiddenSidebar]); + return ( + + ); +} diff --git a/src/theme/DocPage/Layout/Sidebar/styles.module.css b/src/theme/DocPage/Layout/Sidebar/styles.module.css new file mode 100644 index 0000000000..221aabf564 --- /dev/null +++ b/src/theme/DocPage/Layout/Sidebar/styles.module.css @@ -0,0 +1,32 @@ +:root { + --doc-sidebar-width: 300px; + --doc-sidebar-hidden-width: 30px; +} + +.docSidebarContainer { + display: none; +} + +@media (min-width: 997px) { + .docSidebarContainer { + display: block; + width: var(--doc-sidebar-width); + margin-top: calc(-1 * var(--ifm-navbar-height)); + border-right: 1px solid var(--ifm-toc-border-color); + will-change: width; + transition: width var(--ifm-transition-fast) ease; + clip-path: inset(0); + } + + .docSidebarContainerHidden { + width: var(--doc-sidebar-hidden-width); + cursor: pointer; + } + + .sidebarViewport { + top: 0; + position: sticky; + height: 100%; + max-height: 100vh; + } +} diff --git a/src/theme/DocPage/Layout/index.js b/src/theme/DocPage/Layout/index.js new file mode 100644 index 0000000000..b66a8baf03 --- /dev/null +++ b/src/theme/DocPage/Layout/index.js @@ -0,0 +1,28 @@ +import React, {useState} from 'react'; +import {useDocsSidebar} from '@docusaurus/theme-common/internal'; +import Layout from '@theme/Layout'; +import BackToTopButton from '@theme/BackToTopButton'; +import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'; +import DocPageLayoutMain from '@theme/DocPage/Layout/Main'; +import styles from './styles.module.css'; +export default function DocPageLayout({children}) { + const sidebar = useDocsSidebar(); + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); + return ( + + +
+ {sidebar && ( + + )} + + {children} + +
+ + ); +} diff --git a/src/theme/DocPage/Layout/styles.module.css b/src/theme/DocPage/Layout/styles.module.css new file mode 100644 index 0000000000..008456fec0 --- /dev/null +++ b/src/theme/DocPage/Layout/styles.module.css @@ -0,0 +1,18 @@ +.docPage { + display: flex; + width: 100%; + flex: 1 0; +} + +.docsWrapper { + display: flex; + flex: 1 0 auto; +} + +/* +JS disabled??? Show light version by default => better than showing nothing +TODO bad, but we currently always show light mode when there's no data-theme + */ +html:not([data-theme]) .themedComponent--light { + display: initial; +} diff --git a/src/theme/DocPage/index.js b/src/theme/DocPage/index.js new file mode 100644 index 0000000000..900a3ef630 --- /dev/null +++ b/src/theme/DocPage/index.js @@ -0,0 +1,61 @@ +import React from 'react'; +import clsx from 'clsx'; +import { + HtmlClassNameProvider, + ThemeClassNames, + PageMetadata, +} from '@docusaurus/theme-common'; +import { + docVersionSearchTag, + DocsSidebarProvider, + DocsVersionProvider, + useDocRouteMetadata, +} from '@docusaurus/theme-common/internal'; +import DocPageLayout from '@theme/DocPage/Layout'; +import NotFound from '@theme/NotFound'; +import SearchMetadata from '@theme/SearchMetadata'; +function DocPageMetadata(props) { + const {versionMetadata} = props; + return ( + <> + + + {versionMetadata.noIndex && ( + + )} + + + ); +} +export default function DocPage(props) { + const {versionMetadata} = props; + const currentDocRouteMetadata = useDocRouteMetadata(props); + if (!currentDocRouteMetadata) { + return ; + } + const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata; + return ( + <> + + + + + {docElement} + + + + + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 2027474462..810077cd00 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,7 +28,7 @@ module.exports = { preflight: false, container: false, }, - content: ['./src/**/*.{ts,tsx}'], + content: ['./src/**/*.{ts,tsx}', './docusaurus.config.js'], darkMode: 'class', theme: { screens: { diff --git a/yarn.lock b/yarn.lock index 7b4f244640..446a1949e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7040,6 +7040,15 @@ postcss-import@^15.1.0: read-cache "^1.0.0" resolve "^1.1.7" +postcss-import@^16.1.0: + version "16.1.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-16.1.0.tgz#258732175518129667fe1e2e2a05b19b5654b96a" + integrity sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"