From 14316c75b1b75e9c05f0b331da85b291d7c0c945 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Fri, 7 Oct 2022 10:15:58 +0330 Subject: [PATCH] adjust content layout --- docs/{intro.md => intro.mdx} | 5 + docusaurus.config.js | 97 +++++++------ sidebars.js | 6 +- src/containers/GlobalStore/GlobalStore.tsx | 28 ++++ src/containers/GlobalStore/index.ts | 1 + src/css/_utils.scss | 36 +++++ src/css/_vars.scss | 23 +++ src/css/custom.css | 7 +- src/lib/array.utils.ts | 10 ++ src/lib/store/Hook.tsx | 14 ++ src/lib/store/index.ts | 1 + src/lib/store/store.tsx | 137 ++++++++++++++++++ .../DocCategoryGeneratedIndexPage/index.tsx | 69 +++++++++ .../styles.module.css | 23 +++ src/theme/DocItem/Layout/index.tsx | 71 +++++++++ src/theme/DocItem/Layout/styles.module.scss | 45 ++++++ src/theme/DocPage/Layout/Main/index.tsx | 32 ++++ .../DocPage/Layout/Main/styles.module.scss | 40 +++++ src/theme/DocPage/Layout/index.tsx | 46 ++++++ src/theme/DocPage/Layout/styles.module.scss | 19 +++ src/theme/Layout/index.tsx | 13 ++ 21 files changed, 671 insertions(+), 52 deletions(-) rename docs/{intro.md => intro.mdx} (94%) create mode 100644 src/containers/GlobalStore/GlobalStore.tsx create mode 100644 src/containers/GlobalStore/index.ts create mode 100644 src/css/_utils.scss create mode 100644 src/css/_vars.scss create mode 100644 src/lib/array.utils.ts create mode 100644 src/lib/store/Hook.tsx create mode 100644 src/lib/store/index.ts create mode 100644 src/lib/store/store.tsx create mode 100644 src/theme/DocCategoryGeneratedIndexPage/index.tsx create mode 100644 src/theme/DocCategoryGeneratedIndexPage/styles.module.css create mode 100644 src/theme/DocItem/Layout/index.tsx create mode 100644 src/theme/DocItem/Layout/styles.module.scss create mode 100644 src/theme/DocPage/Layout/Main/index.tsx create mode 100644 src/theme/DocPage/Layout/Main/styles.module.scss create mode 100644 src/theme/DocPage/Layout/index.tsx create mode 100644 src/theme/DocPage/Layout/styles.module.scss create mode 100644 src/theme/Layout/index.tsx diff --git a/docs/intro.md b/docs/intro.mdx similarity index 94% rename from docs/intro.md rename to docs/intro.mdx index 8a2e69d..18dac30 100644 --- a/docs/intro.md +++ b/docs/intro.mdx @@ -4,6 +4,8 @@ sidebar_position: 1 # Tutorial Intro +import HomepageFeatures from '@site/src/components/HomepageFeatures'; + Let's discover **Docusaurus in less than 5 minutes**. ## Getting Started @@ -45,3 +47,6 @@ The `cd` command changes the directory you're working with. In order to work wit The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. + + + diff --git a/docusaurus.config.js b/docusaurus.config.js index 99a015d..bc80f41 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,53 +1,53 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion -const lightCodeTheme = require("prism-react-renderer/themes/github"); -const darkCodeTheme = require("prism-react-renderer/themes/dracula"); +const lightCodeTheme = require('prism-react-renderer/themes/github') +const darkCodeTheme = require('prism-react-renderer/themes/dracula') /** @type {import('@docusaurus/types').Config} */ const config = { - title: "My Site", - tagline: "Dinosaurs are cool", - url: "https://your-docusaurus-test-site.com", - baseUrl: "/", - onBrokenLinks: "throw", - onBrokenMarkdownLinks: "warn", - favicon: "img/favicon.ico", + title: 'My Site', + tagline: 'Dinosaurs are cool', + url: 'https://your-docusaurus-test-site.com', + baseUrl: '/', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', + favicon: 'img/favicon.ico', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. - organizationName: "facebook", // Usually your GitHub org/user name. - projectName: "docusaurus", // Usually your repo name. + organizationName: 'facebook', // Usually your GitHub org/user name. + projectName: 'docusaurus', // Usually your repo name. // Even if you don't use internalization, you can use this field to set useful // metadata like html lang. For example, if your site is Chinese, you may want // to replace "en" with "zh-Hans". i18n: { - defaultLocale: "en", - locales: ["en"], + defaultLocale: 'en', + locales: ['en'], }, presets: [ [ - "classic", + 'classic', /** @type {import('@docusaurus/preset-classic').Options} */ ({ docs: { - sidebarPath: require.resolve("./sidebars.js"), + sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. // Remove this to remove the "edit this page" links. editUrl: - "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/", + 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', }, blog: { showReadingTime: true, // Please change this to your repo. // Remove this to remove the "edit this page" links. editUrl: - "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/", + 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', }, theme: { - customCss: require.resolve("./src/css/custom.css"), + customCss: require.resolve('./src/css/custom.css'), }, }), ], @@ -56,66 +56,67 @@ const config = { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + docs: { sidebar: { hideable: true } }, navbar: { - title: "My Site", + title: 'My Site', logo: { - alt: "My Site Logo", - src: "img/logo.svg", + alt: 'My Site Logo', + src: 'img/logo.svg', }, items: [ { - type: "doc", - docId: "intro", - position: "left", - label: "Tutorial", + type: 'doc', + docId: 'intro', + position: 'left', + label: 'Tutorial', }, - { to: "/blog", label: "Blog", position: "left" }, + { to: '/blog', label: 'Blog', position: 'left' }, { - href: "https://github.com/facebook/docusaurus", - label: "GitHub", - position: "right", + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', }, ], }, footer: { - style: "dark", + style: 'dark', links: [ { - title: "Docs", + title: 'Docs', items: [ { - label: "Tutorial", - to: "/docs/intro", + label: 'Tutorial', + to: '/docs/intro', }, ], }, { - title: "Community", + title: 'Community', items: [ { - label: "Stack Overflow", - href: "https://stackoverflow.com/questions/tagged/docusaurus", + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/docusaurus', }, { - label: "Discord", - href: "https://discordapp.com/invite/docusaurus", + label: 'Discord', + href: 'https://discordapp.com/invite/docusaurus', }, { - label: "Twitter", - href: "https://twitter.com/docusaurus", + label: 'Twitter', + href: 'https://twitter.com/docusaurus', }, ], }, { - title: "More", + title: 'More', items: [ { - label: "Blog", - to: "/blog", + label: 'Blog', + to: '/blog', }, { - label: "GitHub", - href: "https://github.com/facebook/docusaurus", + label: 'GitHub', + href: 'https://github.com/facebook/docusaurus', }, ], }, @@ -127,7 +128,7 @@ const config = { darkTheme: darkCodeTheme, }, }), - plugins: ["docusaurus-plugin-sass"], -}; + plugins: ['docusaurus-plugin-sass'], +} -module.exports = config; +module.exports = config diff --git a/sidebars.js b/sidebars.js index 8f1e3da..f330333 100644 --- a/sidebars.js +++ b/sidebars.js @@ -14,7 +14,7 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{ type: "autogenerated", dirName: "." }], + tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], // But you can create a sidebar manually /* @@ -28,6 +28,6 @@ const sidebars = { }, ], */ -}; +} -module.exports = sidebars; +module.exports = sidebars diff --git a/src/containers/GlobalStore/GlobalStore.tsx b/src/containers/GlobalStore/GlobalStore.tsx new file mode 100644 index 0000000..1be0710 --- /dev/null +++ b/src/containers/GlobalStore/GlobalStore.tsx @@ -0,0 +1,28 @@ +import { Store as StoreBase } from '@site/src/lib/store' + +export namespace GlobalStore { + export type State = { + hiddenSidebar: boolean + } + + export type Actions = { + setHiddenSidebar: (payload: any) => void + } + + export class Store extends StoreBase {} +} + +export const globalStore = new GlobalStore.Store(() => { + return { + setHiddenSidebar: (payload, state, setState, dispatch) => { + setState((state) => { + state.hiddenSidebar = + typeof payload === 'function' ? payload(state.hiddenSidebar) : payload + }) + }, + } +}, []) + +export const selectHiddenSidebar = globalStore.selector( + (state) => state.hiddenSidebar, +) diff --git a/src/containers/GlobalStore/index.ts b/src/containers/GlobalStore/index.ts new file mode 100644 index 0000000..9e01b41 --- /dev/null +++ b/src/containers/GlobalStore/index.ts @@ -0,0 +1 @@ +export * from './GlobalStore' diff --git a/src/css/_utils.scss b/src/css/_utils.scss new file mode 100644 index 0000000..2c300a7 --- /dev/null +++ b/src/css/_utils.scss @@ -0,0 +1,36 @@ +@use './vars'; +@use 'sass:map'; +@use 'sass:list'; + +@mixin responsive($device-size, $function: 'exact') { + $index: index(vars.$device-sizes, $device-size); + $bounds: map.get(vars.$breakpoints, $device-size); + $min-width: list.nth($bounds, 1); + $max-width: list.nth($bounds, 2); + + $query: ''; + + @if $function == 'exact' { + $query: '(min-width: #{$min-width}px)'; + + @if $max-width != null { + $query: $query + ' and (max-width: #{$max-width}px)'; + } + } @else if $function == 'up' { + @if $min-width != null { + $query: '(min-width: #{$min-width}px)'; + } @else { + $query: '(min-width: 0px)'; + } + } @else if $function == 'down' { + @if $min-width != null { + $query: '(max-width: #{$min-width - 1}px)'; + } @else { + $query: '(max-width: #{$max-width - 1}px)'; + } + } + + @media #{$query} { + @content; + } +} diff --git a/src/css/_vars.scss b/src/css/_vars.scss new file mode 100644 index 0000000..e65421d --- /dev/null +++ b/src/css/_vars.scss @@ -0,0 +1,23 @@ +$breakpoints: ( + 'xs': ( + null, + 575, + ), + 'sm': ( + 576, + 767, + ), + 'md': ( + 768, + 996, + ), + 'lg': ( + 997, + 1199, + ), + 'xl': ( + 1200, + ), +); + +$device-sizes: 'xs', 'sm', 'md', 'lg', 'xl'; diff --git a/src/css/custom.css b/src/css/custom.css index 3859140..ca9c1f5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -18,7 +18,7 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme="dark"] { +[data-theme='dark'] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -28,3 +28,8 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +:root { + --doc-sidebar-width: 16.66vw !important; + --doc-sidebar-max-width: 320px; +} diff --git a/src/lib/array.utils.ts b/src/lib/array.utils.ts new file mode 100644 index 0000000..3be56c4 --- /dev/null +++ b/src/lib/array.utils.ts @@ -0,0 +1,10 @@ +export const updateArray = ( + arr: T[], + from: number, + to: number, + update: (element: T, index: number) => any, +): T[] => [ + ...arr.slice(0, from), + ...arr.slice(from, to + 1).map((val, index) => update(val, index + from)), + ...arr.slice(to + 1), +] diff --git a/src/lib/store/Hook.tsx b/src/lib/store/Hook.tsx new file mode 100644 index 0000000..c4ca4e9 --- /dev/null +++ b/src/lib/store/Hook.tsx @@ -0,0 +1,14 @@ +import React, { useEffect } from 'react' + +export const Hook: React.FC<{ + hook: Function + onChange: (value: any) => void +}> = ({ hook: useHook, onChange }) => { + const value = useHook() + + useEffect(() => { + onChange(value) + }, [value]) + + return <> +} diff --git a/src/lib/store/index.ts b/src/lib/store/index.ts new file mode 100644 index 0000000..16c8633 --- /dev/null +++ b/src/lib/store/index.ts @@ -0,0 +1 @@ +export * from './store' diff --git a/src/lib/store/store.tsx b/src/lib/store/store.tsx new file mode 100644 index 0000000..4af9c79 --- /dev/null +++ b/src/lib/store/store.tsx @@ -0,0 +1,137 @@ +import produce from 'immer' +import React, { useContext, useMemo, useRef, useState } from 'react' +import { updateArray } from '../array.utils' +import { Hook } from './Hook' + +type SetState = (value: S | ((currentState: S) => void)) => void + +type StoreType = { + state: S + setState: SetState + + dispatch: D +} + +type Dispatch = (payload: T) => void + +type DispatchActions = { + [key: string]: Dispatch +} + +type StoreActions< + S, + A extends DispatchActions, + I extends Array = [], +> = { + [K in keyof A]: ( + payload: Parameters[0], + state: S, + setState: SetState, + dispatch: A, + ...injected: I + ) => void +} + +export class Store< + S = {}, + A extends DispatchActions = {}, + I extends any[] | [] = [], +> { + stateRef: React.MutableRefObject + setStateRef: React.MutableRefObject> + injectedRef: React.MutableRefObject> + + private context: React.Context> + + constructor( + private actions: () => StoreActions, + private inject: any[] = [], + ) {} + + public useCreateStore = (initialState: S): StoreType => { + const [state, _setState] = useState(initialState) + + const setState: SetState = (value) => + typeof value === 'function' + ? _setState(produce(value)) + : _setState(value) + + const dispatch = useMemo(() => this.createDispatch(), []) + + return { state, setState, dispatch } + } + + public Provider: React.FC }>> = + ({ children, store }) => { + this.stateRef = useRef() + this.setStateRef = useRef() + this.injectedRef = useRef(this.inject.map((hook) => null)) + + if (!this.context) { + this.context = React.createContext(null as any) + } + + const P = this.context.Provider + + this.stateRef.current = store.state + this.setStateRef.current = store.setState + + return ( +

+ {children} + + {this.inject.map((hook, index) => ( + { + this.injectedRef.current = updateArray( + this.injectedRef.current, + index, + index, + () => value, + ) + }} + /> + ))} +

+ ) + } + + public useStore = () => { + return useContext(this.context) + } + + public useDispatch = () => this.useStore().dispatch + + useSelector(selector: (state: S) => T): T { + const { state } = this.useStore() + const value = selector(state) + + return useMemo(() => value, [value]) + } + + selector(selector: (state: S) => T) { + return selector + } + + private createDispatch = (): A => { + const dispatch = Object.fromEntries( + Object.entries(this.actions()).map(([name, func]) => [ + name, + (payload: any) => { + const set = (args: any) => this.setStateRef.current(args) + func( + payload, + this.stateRef.current, + set, + dispatch, + ...this.injectedRef.current, + ) + }, + ]), + ) + + return dispatch as A + } +} diff --git a/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/src/theme/DocCategoryGeneratedIndexPage/index.tsx new file mode 100644 index 0000000..04dc559 --- /dev/null +++ b/src/theme/DocCategoryGeneratedIndexPage/index.tsx @@ -0,0 +1,69 @@ +import { + PageMetadata, + useCurrentSidebarCategory, +} from '@docusaurus/theme-common' +import useBaseUrl from '@docusaurus/useBaseUrl' +import DocBreadcrumbs from '@theme/DocBreadcrumbs' +import DocCardList from '@theme/DocCardList' +import type { Props } from '@theme/DocCategoryGeneratedIndexPage' +import DocPaginator from '@theme/DocPaginator' +import DocVersionBadge from '@theme/DocVersionBadge' +import DocVersionBanner from '@theme/DocVersionBanner' +import Heading from '@theme/Heading' +import React from 'react' +import styles from './styles.module.css' + +function DocCategoryGeneratedIndexPageMetadata({ + categoryGeneratedIndex, +}: Props): JSX.Element { + return ( + + ) +} + +function DocCategoryGeneratedIndexPageContent({ + categoryGeneratedIndex, +}: Props): JSX.Element { + const category = useCurrentSidebarCategory() + return ( +
+ + + +
+ + {categoryGeneratedIndex.title} + + {categoryGeneratedIndex.description && ( +

{categoryGeneratedIndex.description}

+ )} +
+
+ +
+
+ +
+
+ ) +} + +export default function DocCategoryGeneratedIndexPage( + props: Props, +): JSX.Element { + return ( + <> + + + + ) +} diff --git a/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css new file mode 100644 index 0000000..328ab6d --- /dev/null +++ b/src/theme/DocCategoryGeneratedIndexPage/styles.module.css @@ -0,0 +1,23 @@ +.generatedIndexPage { + padding: 0 var(--ifm-spacing-horizontal); +} + +@media (min-width: 997px) { + .generatedIndexPage { + max-width: 75% !important; + } + + .list article:nth-last-child(-n + 2) { + margin-bottom: 0 !important; + } +} + +/* Duplicated from .markdown h1 */ +.title { + --ifm-h1-font-size: 3rem; + margin-bottom: calc(1.25 * var(--ifm-leading)); +} + +.list article:last-child { + margin-bottom: 0 !important; +} diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx new file mode 100644 index 0000000..008e601 --- /dev/null +++ b/src/theme/DocItem/Layout/index.tsx @@ -0,0 +1,71 @@ +import { useWindowSize } from '@docusaurus/theme-common' +import { useDoc } from '@docusaurus/theme-common/internal' +import DocBreadcrumbs from '@theme/DocBreadcrumbs' +import DocItemContent from '@theme/DocItem/Content' +import DocItemFooter from '@theme/DocItem/Footer' +import { Props } from '@theme/DocItem/Layout' +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 clsx from 'clsx' +import React from 'react' +import styles from './styles.module.scss' + +/** + * 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 }: Props): JSX.Element { + const docTOC = useDocTOC() + const windowSize = useWindowSize() + + return ( +
+
+ +
+
+
+ + + {docTOC.mobile} + {children} + +
+ +
+
+
+ {windowSize !== 'mobile' && ( + + )} + {docTOC.desktop && ( +
+ {docTOC.desktop} +
+ )} +
+ ) +} diff --git a/src/theme/DocItem/Layout/styles.module.scss b/src/theme/DocItem/Layout/styles.module.scss new file mode 100644 index 0000000..41fb4bd --- /dev/null +++ b/src/theme/DocItem/Layout/styles.module.scss @@ -0,0 +1,45 @@ +@use '@site/src/css/utils'; + +.root { + width: 100%; + margin: 0 !important; +} + +.docItemCol { + flex-grow: 1; + min-width: 0; +} + +.root > aside { + width: 25vw; + flex-basis: 25vw; + flex-grow: 0; + flex-shrink: 0; +} + +.tocDesktopWrapper { + width: 16.66vw; + flex-basis: 16.66vw; + flex-grow: 0; + flex-shrink: 0; +} + +.docItemContainer > div { + flex-grow: 1; +} + +.docItemContainer header + *, +.docItemContainer article > *:first-child { + margin-top: 0; +} + +@include utils.responsive('lg', 'down') { + .docItemContainer > div:first-child { + } +} + +@media (min-width: 997px) { + .docItemCol { + max-width: 75% !important; + } +} diff --git a/src/theme/DocPage/Layout/Main/index.tsx b/src/theme/DocPage/Layout/Main/index.tsx new file mode 100644 index 0000000..6782ecd --- /dev/null +++ b/src/theme/DocPage/Layout/Main/index.tsx @@ -0,0 +1,32 @@ +import { useDocsSidebar } from '@docusaurus/theme-common/internal' +import type { Props } from '@theme/DocPage/Layout/Main' +import clsx from 'clsx' +import React from 'react' +import styles from './styles.module.scss' + +export default function DocPageLayoutMain({ + hiddenSidebarContainer, + children, +}: Props): JSX.Element { + const sidebar = useDocsSidebar() + + return ( +
+
+
+ {children} +
+
+ ) +} diff --git a/src/theme/DocPage/Layout/Main/styles.module.scss b/src/theme/DocPage/Layout/Main/styles.module.scss new file mode 100644 index 0000000..79afec2 --- /dev/null +++ b/src/theme/DocPage/Layout/Main/styles.module.scss @@ -0,0 +1,40 @@ +@use '@site/src/css/utils'; + +.docMainContainer { + display: flex; + width: 100%; + overflow: hidden; +} + +.sidebarSpace { + width: 0; +} + +@include utils.responsive('lg', 'up') { + .sidebarSpace { + transition: 0.3s; + flex-shrink: 0; + width: var(--doc-sidebar-width); + max-width: var(--doc-sidebar-max-width); + } +} + +.docMainContainerEnhanced .sidebarSpace { + width: 0; +} + +.docItemWrapper { + width: 100%; +} + +@media (min-width: 997px) { + .docMainContainer { + flex-grow: 1; + } + + .docMainContainerEnhanced { + } + + .docItemWrapperEnhanced { + } +} diff --git a/src/theme/DocPage/Layout/index.tsx b/src/theme/DocPage/Layout/index.tsx new file mode 100644 index 0000000..f0fb2ef --- /dev/null +++ b/src/theme/DocPage/Layout/index.tsx @@ -0,0 +1,46 @@ +import { useDocsSidebar } from '@docusaurus/theme-common/internal' +import { + globalStore, + selectHiddenSidebar, +} from '@site/src/containers/GlobalStore' +import BackToTopButton from '@theme/BackToTopButton' +import type { Props } from '@theme/DocPage/Layout' +import DocPageLayoutMain from '@theme/DocPage/Layout/Main' +import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar' +import Layout from '@theme/Layout' +import React from 'react' +import styles from './styles.module.scss' + +const DocPageWrapper: React.FC> = ({ + children, +}) => { + const sidebar = useDocsSidebar() + + const dispatch = globalStore.useDispatch() + const hiddenSidebarContainer = globalStore.useSelector(selectHiddenSidebar) + const setHiddenSidebarContainer = dispatch.setHiddenSidebar + + return ( +
+ {sidebar && ( + + )} + + {children} + +
+ ) +} + +export default function DocPageLayout({ children }: Props): JSX.Element { + return ( + + + {children} + + ) +} diff --git a/src/theme/DocPage/Layout/styles.module.scss b/src/theme/DocPage/Layout/styles.module.scss new file mode 100644 index 0000000..7a038e7 --- /dev/null +++ b/src/theme/DocPage/Layout/styles.module.scss @@ -0,0 +1,19 @@ +.docPage { + width: 100%; + position: relative; + + display: grid; + + & > main, + & > aside { + grid-area: 1 / 1; + } + + & > aside { + max-width: var(--doc-sidebar-max-width); + } +} + +.docsWrapper { + display: flex; +} diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx new file mode 100644 index 0000000..37d1647 --- /dev/null +++ b/src/theme/Layout/index.tsx @@ -0,0 +1,13 @@ +import { globalStore } from '@site/src/containers/GlobalStore' +import Layout from '@theme-original/Layout' +import React from 'react' + +export default function LayoutWrapper(props) { + const store = globalStore.useCreateStore({ hiddenSidebar: false }) + + return ( + + + + ) +}