@docusaurus/theme-classic 0.0.0-4781 → 0.0.0-4782
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib-next/theme/DocPage/Layout/Aside.js +94 -0
- package/lib-next/theme/DocPage/Layout/Main.js +29 -0
- package/lib-next/theme/DocPage/Layout/index.js +34 -0
- package/lib-next/theme/DocPage/{styles.module.css → Layout/styles.module.css} +0 -0
- package/lib-next/theme/DocPage/index.js +46 -135
- package/package.json +13 -13
- package/src/theme/DocPage/Layout/Aside.tsx +100 -0
- package/src/theme/DocPage/Layout/Main.tsx +37 -0
- package/src/theme/DocPage/Layout/index.tsx +39 -0
- package/src/theme/DocPage/{styles.module.css → Layout/styles.module.css} +0 -0
- package/src/theme/DocPage/index.tsx +50 -143
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, {useState, useCallback} from 'react';
|
|
8
|
+
import DocSidebar from '@theme/DocSidebar';
|
|
9
|
+
import IconArrow from '@theme/IconArrow';
|
|
10
|
+
import {translate} from '@docusaurus/Translate';
|
|
11
|
+
import {useLocation} from '@docusaurus/router';
|
|
12
|
+
import clsx from 'clsx';
|
|
13
|
+
import styles from './styles.module.css';
|
|
14
|
+
import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
|
|
15
|
+
|
|
16
|
+
function SidebarExpandButton({toggleSidebar}) {
|
|
17
|
+
return (
|
|
18
|
+
<div
|
|
19
|
+
className={styles.collapsedDocSidebar}
|
|
20
|
+
title={translate({
|
|
21
|
+
id: 'theme.docs.sidebar.expandButtonTitle',
|
|
22
|
+
message: 'Expand sidebar',
|
|
23
|
+
description:
|
|
24
|
+
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
25
|
+
})}
|
|
26
|
+
aria-label={translate({
|
|
27
|
+
id: 'theme.docs.sidebar.expandButtonAriaLabel',
|
|
28
|
+
message: 'Expand sidebar',
|
|
29
|
+
description:
|
|
30
|
+
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
31
|
+
})}
|
|
32
|
+
tabIndex={0}
|
|
33
|
+
role="button"
|
|
34
|
+
onKeyDown={toggleSidebar}
|
|
35
|
+
onClick={toggleSidebar}>
|
|
36
|
+
<IconArrow className={styles.expandSidebarButtonIcon} />
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
} // Reset sidebar state when sidebar changes
|
|
40
|
+
// Use React key to unmount/remount the children
|
|
41
|
+
// See https://github.com/facebook/docusaurus/issues/3414
|
|
42
|
+
|
|
43
|
+
function ResetOnSidebarChange({children}) {
|
|
44
|
+
const sidebar = useDocsSidebar();
|
|
45
|
+
return (
|
|
46
|
+
<React.Fragment key={sidebar?.name ?? 'noSidebar'}>
|
|
47
|
+
{children}
|
|
48
|
+
</React.Fragment>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export default function DocPageLayoutAside({
|
|
53
|
+
sidebar,
|
|
54
|
+
hiddenSidebarContainer,
|
|
55
|
+
setHiddenSidebarContainer,
|
|
56
|
+
}) {
|
|
57
|
+
const {pathname} = useLocation();
|
|
58
|
+
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
|
59
|
+
const toggleSidebar = useCallback(() => {
|
|
60
|
+
if (hiddenSidebar) {
|
|
61
|
+
setHiddenSidebar(false);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
setHiddenSidebarContainer((value) => !value);
|
|
65
|
+
}, [setHiddenSidebarContainer, hiddenSidebar]);
|
|
66
|
+
return (
|
|
67
|
+
<aside
|
|
68
|
+
className={clsx(
|
|
69
|
+
ThemeClassNames.docs.docSidebarContainer,
|
|
70
|
+
styles.docSidebarContainer,
|
|
71
|
+
hiddenSidebarContainer && styles.docSidebarContainerHidden,
|
|
72
|
+
)}
|
|
73
|
+
onTransitionEnd={(e) => {
|
|
74
|
+
if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (hiddenSidebarContainer) {
|
|
79
|
+
setHiddenSidebar(true);
|
|
80
|
+
}
|
|
81
|
+
}}>
|
|
82
|
+
<ResetOnSidebarChange>
|
|
83
|
+
<DocSidebar
|
|
84
|
+
sidebar={sidebar}
|
|
85
|
+
path={pathname}
|
|
86
|
+
onCollapse={toggleSidebar}
|
|
87
|
+
isHidden={hiddenSidebar}
|
|
88
|
+
/>
|
|
89
|
+
</ResetOnSidebarChange>
|
|
90
|
+
|
|
91
|
+
{hiddenSidebar && <SidebarExpandButton toggleSidebar={toggleSidebar} />}
|
|
92
|
+
</aside>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import {useDocsSidebar} from '@docusaurus/theme-common';
|
|
9
|
+
import clsx from 'clsx';
|
|
10
|
+
import styles from './styles.module.css';
|
|
11
|
+
export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
|
|
12
|
+
const sidebar = useDocsSidebar();
|
|
13
|
+
return (
|
|
14
|
+
<main
|
|
15
|
+
className={clsx(
|
|
16
|
+
styles.docMainContainer,
|
|
17
|
+
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
|
|
18
|
+
)}>
|
|
19
|
+
<div
|
|
20
|
+
className={clsx(
|
|
21
|
+
'container padding-top--md padding-bottom--lg',
|
|
22
|
+
styles.docItemWrapper,
|
|
23
|
+
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
|
|
24
|
+
)}>
|
|
25
|
+
{children}
|
|
26
|
+
</div>
|
|
27
|
+
</main>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, {useState} from 'react';
|
|
8
|
+
import Layout from '@theme/Layout';
|
|
9
|
+
import BackToTopButton from '@theme/BackToTopButton';
|
|
10
|
+
import DocPageLayoutAside from '@theme/DocPage/Layout/Aside';
|
|
11
|
+
import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
|
|
12
|
+
import styles from './styles.module.css';
|
|
13
|
+
import {useDocsSidebar} from '@docusaurus/theme-common';
|
|
14
|
+
export default function DocPageLayout({children}) {
|
|
15
|
+
const sidebar = useDocsSidebar();
|
|
16
|
+
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
|
|
17
|
+
return (
|
|
18
|
+
<Layout>
|
|
19
|
+
<BackToTopButton />
|
|
20
|
+
<div className={styles.docPage}>
|
|
21
|
+
{sidebar && (
|
|
22
|
+
<DocPageLayoutAside
|
|
23
|
+
sidebar={sidebar.items}
|
|
24
|
+
hiddenSidebarContainer={hiddenSidebarContainer}
|
|
25
|
+
setHiddenSidebarContainer={setHiddenSidebarContainer}
|
|
26
|
+
/>
|
|
27
|
+
)}
|
|
28
|
+
<DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
|
|
29
|
+
{children}
|
|
30
|
+
</DocPageLayoutMain>
|
|
31
|
+
</div>
|
|
32
|
+
</Layout>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
File without changes
|
|
@@ -4,132 +4,22 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import React
|
|
7
|
+
import React from 'react';
|
|
8
8
|
import renderRoutes from '@docusaurus/renderRoutes';
|
|
9
|
-
import Layout from '@theme/Layout';
|
|
10
|
-
import DocSidebar from '@theme/DocSidebar';
|
|
11
9
|
import NotFound from '@theme/NotFound';
|
|
12
|
-
import
|
|
13
|
-
import BackToTopButton from '@theme/BackToTopButton';
|
|
10
|
+
import DocPageLayout from '@theme/DocPage/Layout';
|
|
14
11
|
import {matchPath} from '@docusaurus/router';
|
|
15
|
-
import {translate} from '@docusaurus/Translate';
|
|
16
12
|
import clsx from 'clsx';
|
|
17
|
-
import styles from './styles.module.css';
|
|
18
13
|
import {
|
|
19
14
|
HtmlClassNameProvider,
|
|
20
15
|
ThemeClassNames,
|
|
21
16
|
docVersionSearchTag,
|
|
22
17
|
DocsSidebarProvider,
|
|
23
|
-
useDocsSidebar,
|
|
24
18
|
DocsVersionProvider,
|
|
25
19
|
} from '@docusaurus/theme-common';
|
|
26
20
|
import SearchMetadata from '@theme/SearchMetadata';
|
|
27
21
|
|
|
28
|
-
function
|
|
29
|
-
currentDocRoute,
|
|
30
|
-
versionMetadata,
|
|
31
|
-
children,
|
|
32
|
-
sidebarName,
|
|
33
|
-
}) {
|
|
34
|
-
const sidebar = useDocsSidebar();
|
|
35
|
-
const {pluginId, version} = versionMetadata;
|
|
36
|
-
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
|
|
37
|
-
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
|
38
|
-
const toggleSidebar = useCallback(() => {
|
|
39
|
-
if (hiddenSidebar) {
|
|
40
|
-
setHiddenSidebar(false);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
setHiddenSidebarContainer((value) => !value);
|
|
44
|
-
}, [hiddenSidebar]);
|
|
45
|
-
return (
|
|
46
|
-
<>
|
|
47
|
-
<SearchMetadata
|
|
48
|
-
version={version}
|
|
49
|
-
tag={docVersionSearchTag(pluginId, version)}
|
|
50
|
-
/>
|
|
51
|
-
<Layout>
|
|
52
|
-
<div className={styles.docPage}>
|
|
53
|
-
<BackToTopButton />
|
|
54
|
-
|
|
55
|
-
{sidebar && (
|
|
56
|
-
<aside
|
|
57
|
-
className={clsx(
|
|
58
|
-
ThemeClassNames.docs.docSidebarContainer,
|
|
59
|
-
styles.docSidebarContainer,
|
|
60
|
-
hiddenSidebarContainer && styles.docSidebarContainerHidden,
|
|
61
|
-
)}
|
|
62
|
-
onTransitionEnd={(e) => {
|
|
63
|
-
if (
|
|
64
|
-
!e.currentTarget.classList.contains(
|
|
65
|
-
styles.docSidebarContainer,
|
|
66
|
-
)
|
|
67
|
-
) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
if (hiddenSidebarContainer) {
|
|
72
|
-
setHiddenSidebar(true);
|
|
73
|
-
}
|
|
74
|
-
}}>
|
|
75
|
-
<DocSidebar
|
|
76
|
-
key={
|
|
77
|
-
// Reset sidebar state on sidebar changes
|
|
78
|
-
// See https://github.com/facebook/docusaurus/issues/3414
|
|
79
|
-
sidebarName
|
|
80
|
-
}
|
|
81
|
-
sidebar={sidebar}
|
|
82
|
-
path={currentDocRoute.path}
|
|
83
|
-
onCollapse={toggleSidebar}
|
|
84
|
-
isHidden={hiddenSidebar}
|
|
85
|
-
/>
|
|
86
|
-
|
|
87
|
-
{hiddenSidebar && (
|
|
88
|
-
<div
|
|
89
|
-
className={styles.collapsedDocSidebar}
|
|
90
|
-
title={translate({
|
|
91
|
-
id: 'theme.docs.sidebar.expandButtonTitle',
|
|
92
|
-
message: 'Expand sidebar',
|
|
93
|
-
description:
|
|
94
|
-
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
95
|
-
})}
|
|
96
|
-
aria-label={translate({
|
|
97
|
-
id: 'theme.docs.sidebar.expandButtonAriaLabel',
|
|
98
|
-
message: 'Expand sidebar',
|
|
99
|
-
description:
|
|
100
|
-
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
101
|
-
})}
|
|
102
|
-
tabIndex={0}
|
|
103
|
-
role="button"
|
|
104
|
-
onKeyDown={toggleSidebar}
|
|
105
|
-
onClick={toggleSidebar}>
|
|
106
|
-
<IconArrow className={styles.expandSidebarButtonIcon} />
|
|
107
|
-
</div>
|
|
108
|
-
)}
|
|
109
|
-
</aside>
|
|
110
|
-
)}
|
|
111
|
-
<main
|
|
112
|
-
className={clsx(
|
|
113
|
-
styles.docMainContainer,
|
|
114
|
-
(hiddenSidebarContainer || !sidebar) &&
|
|
115
|
-
styles.docMainContainerEnhanced,
|
|
116
|
-
)}>
|
|
117
|
-
<div
|
|
118
|
-
className={clsx(
|
|
119
|
-
'container padding-top--md padding-bottom--lg',
|
|
120
|
-
styles.docItemWrapper,
|
|
121
|
-
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
|
|
122
|
-
)}>
|
|
123
|
-
{children}
|
|
124
|
-
</div>
|
|
125
|
-
</main>
|
|
126
|
-
</div>
|
|
127
|
-
</Layout>
|
|
128
|
-
</>
|
|
129
|
-
);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
export default function DocPage(props) {
|
|
22
|
+
function extractDocRouteMetadata(props) {
|
|
133
23
|
const {
|
|
134
24
|
route: {routes: docRoutes},
|
|
135
25
|
versionMetadata,
|
|
@@ -140,32 +30,53 @@ export default function DocPage(props) {
|
|
|
140
30
|
);
|
|
141
31
|
|
|
142
32
|
if (!currentDocRoute) {
|
|
143
|
-
return
|
|
33
|
+
return null;
|
|
144
34
|
} // For now, the sidebarName is added as route config: not ideal!
|
|
145
35
|
|
|
146
36
|
const sidebarName = currentDocRoute.sidebar;
|
|
147
|
-
const
|
|
37
|
+
const sidebarItems = sidebarName
|
|
148
38
|
? versionMetadata.docsSidebars[sidebarName]
|
|
149
|
-
:
|
|
39
|
+
: undefined;
|
|
40
|
+
const docElement = renderRoutes(props.route.routes, {
|
|
41
|
+
versionMetadata,
|
|
42
|
+
});
|
|
43
|
+
return {
|
|
44
|
+
docElement,
|
|
45
|
+
sidebarName,
|
|
46
|
+
sidebarItems,
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default function DocPage(props) {
|
|
51
|
+
const {versionMetadata} = props;
|
|
52
|
+
const currentDocRouteMetadata = extractDocRouteMetadata(props);
|
|
53
|
+
|
|
54
|
+
if (!currentDocRouteMetadata) {
|
|
55
|
+
return <NotFound />;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
|
|
150
59
|
return (
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
60
|
+
<>
|
|
61
|
+
<SearchMetadata
|
|
62
|
+
version={versionMetadata.version}
|
|
63
|
+
tag={docVersionSearchTag(
|
|
64
|
+
versionMetadata.pluginId,
|
|
65
|
+
versionMetadata.version,
|
|
66
|
+
)}
|
|
67
|
+
/>
|
|
68
|
+
<HtmlClassNameProvider
|
|
69
|
+
className={clsx(
|
|
70
|
+
ThemeClassNames.wrapper.docsPages,
|
|
71
|
+
ThemeClassNames.page.docsDocPage,
|
|
72
|
+
props.versionMetadata.className,
|
|
73
|
+
)}>
|
|
74
|
+
<DocsVersionProvider version={versionMetadata}>
|
|
75
|
+
<DocsSidebarProvider name={sidebarName} items={sidebarItems}>
|
|
76
|
+
<DocPageLayout>{docElement}</DocPageLayout>
|
|
77
|
+
</DocsSidebarProvider>
|
|
78
|
+
</DocsVersionProvider>
|
|
79
|
+
</HtmlClassNameProvider>
|
|
80
|
+
</>
|
|
170
81
|
);
|
|
171
82
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-classic",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-4782",
|
|
4
4
|
"description": "Classic theme for Docusaurus",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/theme-classic.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@docusaurus/core": "0.0.0-
|
|
25
|
-
"@docusaurus/plugin-content-blog": "0.0.0-
|
|
26
|
-
"@docusaurus/plugin-content-docs": "0.0.0-
|
|
27
|
-
"@docusaurus/plugin-content-pages": "0.0.0-
|
|
28
|
-
"@docusaurus/theme-common": "0.0.0-
|
|
29
|
-
"@docusaurus/theme-translations": "0.0.0-
|
|
30
|
-
"@docusaurus/utils": "0.0.0-
|
|
31
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
32
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
24
|
+
"@docusaurus/core": "0.0.0-4782",
|
|
25
|
+
"@docusaurus/plugin-content-blog": "0.0.0-4782",
|
|
26
|
+
"@docusaurus/plugin-content-docs": "0.0.0-4782",
|
|
27
|
+
"@docusaurus/plugin-content-pages": "0.0.0-4782",
|
|
28
|
+
"@docusaurus/theme-common": "0.0.0-4782",
|
|
29
|
+
"@docusaurus/theme-translations": "0.0.0-4782",
|
|
30
|
+
"@docusaurus/utils": "0.0.0-4782",
|
|
31
|
+
"@docusaurus/utils-common": "0.0.0-4782",
|
|
32
|
+
"@docusaurus/utils-validation": "0.0.0-4782",
|
|
33
33
|
"@mdx-js/react": "^1.6.22",
|
|
34
34
|
"clsx": "^1.1.1",
|
|
35
35
|
"copy-text-to-clipboard": "^3.0.1",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"rtlcss": "^3.5.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
46
|
-
"@docusaurus/types": "0.0.0-
|
|
45
|
+
"@docusaurus/module-type-aliases": "0.0.0-4782",
|
|
46
|
+
"@docusaurus/types": "0.0.0-4782",
|
|
47
47
|
"@types/mdx-js__react": "^1.5.5",
|
|
48
48
|
"@types/prismjs": "^1.26.0",
|
|
49
49
|
"@types/rtlcss": "^3.1.2",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"engines": {
|
|
60
60
|
"node": ">=14"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "97a8115b2a8f3bba73380e6316107b76cca69c54"
|
|
63
63
|
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React, {type ReactNode, useState, useCallback} from 'react';
|
|
9
|
+
import DocSidebar from '@theme/DocSidebar';
|
|
10
|
+
import IconArrow from '@theme/IconArrow';
|
|
11
|
+
import {translate} from '@docusaurus/Translate';
|
|
12
|
+
import {useLocation} from '@docusaurus/router';
|
|
13
|
+
import type {Props} from '@theme/DocPage/Layout/Aside';
|
|
14
|
+
|
|
15
|
+
import clsx from 'clsx';
|
|
16
|
+
import styles from './styles.module.css';
|
|
17
|
+
|
|
18
|
+
import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
|
|
19
|
+
|
|
20
|
+
function SidebarExpandButton({toggleSidebar}: {toggleSidebar: () => void}) {
|
|
21
|
+
return (
|
|
22
|
+
<div
|
|
23
|
+
className={styles.collapsedDocSidebar}
|
|
24
|
+
title={translate({
|
|
25
|
+
id: 'theme.docs.sidebar.expandButtonTitle',
|
|
26
|
+
message: 'Expand sidebar',
|
|
27
|
+
description:
|
|
28
|
+
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
29
|
+
})}
|
|
30
|
+
aria-label={translate({
|
|
31
|
+
id: 'theme.docs.sidebar.expandButtonAriaLabel',
|
|
32
|
+
message: 'Expand sidebar',
|
|
33
|
+
description:
|
|
34
|
+
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
35
|
+
})}
|
|
36
|
+
tabIndex={0}
|
|
37
|
+
role="button"
|
|
38
|
+
onKeyDown={toggleSidebar}
|
|
39
|
+
onClick={toggleSidebar}>
|
|
40
|
+
<IconArrow className={styles.expandSidebarButtonIcon} />
|
|
41
|
+
</div>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Reset sidebar state when sidebar changes
|
|
46
|
+
// Use React key to unmount/remount the children
|
|
47
|
+
// See https://github.com/facebook/docusaurus/issues/3414
|
|
48
|
+
function ResetOnSidebarChange({children}: {children: ReactNode}) {
|
|
49
|
+
const sidebar = useDocsSidebar();
|
|
50
|
+
return (
|
|
51
|
+
<React.Fragment key={sidebar?.name ?? 'noSidebar'}>
|
|
52
|
+
{children}
|
|
53
|
+
</React.Fragment>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default function DocPageLayoutAside({
|
|
58
|
+
sidebar,
|
|
59
|
+
hiddenSidebarContainer,
|
|
60
|
+
setHiddenSidebarContainer,
|
|
61
|
+
}: Props): JSX.Element {
|
|
62
|
+
const {pathname} = useLocation();
|
|
63
|
+
|
|
64
|
+
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
|
65
|
+
const toggleSidebar = useCallback(() => {
|
|
66
|
+
if (hiddenSidebar) {
|
|
67
|
+
setHiddenSidebar(false);
|
|
68
|
+
}
|
|
69
|
+
setHiddenSidebarContainer((value) => !value);
|
|
70
|
+
}, [setHiddenSidebarContainer, hiddenSidebar]);
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<aside
|
|
74
|
+
className={clsx(
|
|
75
|
+
ThemeClassNames.docs.docSidebarContainer,
|
|
76
|
+
styles.docSidebarContainer,
|
|
77
|
+
hiddenSidebarContainer && styles.docSidebarContainerHidden,
|
|
78
|
+
)}
|
|
79
|
+
onTransitionEnd={(e) => {
|
|
80
|
+
if (!e.currentTarget.classList.contains(styles.docSidebarContainer!)) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
if (hiddenSidebarContainer) {
|
|
85
|
+
setHiddenSidebar(true);
|
|
86
|
+
}
|
|
87
|
+
}}>
|
|
88
|
+
<ResetOnSidebarChange>
|
|
89
|
+
<DocSidebar
|
|
90
|
+
sidebar={sidebar}
|
|
91
|
+
path={pathname}
|
|
92
|
+
onCollapse={toggleSidebar}
|
|
93
|
+
isHidden={hiddenSidebar}
|
|
94
|
+
/>
|
|
95
|
+
</ResetOnSidebarChange>
|
|
96
|
+
|
|
97
|
+
{hiddenSidebar && <SidebarExpandButton toggleSidebar={toggleSidebar} />}
|
|
98
|
+
</aside>
|
|
99
|
+
);
|
|
100
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
|
|
10
|
+
import {useDocsSidebar} from '@docusaurus/theme-common';
|
|
11
|
+
|
|
12
|
+
import clsx from 'clsx';
|
|
13
|
+
import styles from './styles.module.css';
|
|
14
|
+
import type {Props} from '@theme/DocPage/Layout/Main';
|
|
15
|
+
|
|
16
|
+
export default function DocPageLayoutMain({
|
|
17
|
+
hiddenSidebarContainer,
|
|
18
|
+
children,
|
|
19
|
+
}: Props): JSX.Element {
|
|
20
|
+
const sidebar = useDocsSidebar();
|
|
21
|
+
return (
|
|
22
|
+
<main
|
|
23
|
+
className={clsx(
|
|
24
|
+
styles.docMainContainer,
|
|
25
|
+
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
|
|
26
|
+
)}>
|
|
27
|
+
<div
|
|
28
|
+
className={clsx(
|
|
29
|
+
'container padding-top--md padding-bottom--lg',
|
|
30
|
+
styles.docItemWrapper,
|
|
31
|
+
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
|
|
32
|
+
)}>
|
|
33
|
+
{children}
|
|
34
|
+
</div>
|
|
35
|
+
</main>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React, {useState} from 'react';
|
|
9
|
+
import Layout from '@theme/Layout';
|
|
10
|
+
import BackToTopButton from '@theme/BackToTopButton';
|
|
11
|
+
import type {Props} from '@theme/DocPage/Layout';
|
|
12
|
+
import DocPageLayoutAside from '@theme/DocPage/Layout/Aside';
|
|
13
|
+
import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
|
|
14
|
+
|
|
15
|
+
import styles from './styles.module.css';
|
|
16
|
+
|
|
17
|
+
import {useDocsSidebar} from '@docusaurus/theme-common';
|
|
18
|
+
|
|
19
|
+
export default function DocPageLayout({children}: Props): JSX.Element {
|
|
20
|
+
const sidebar = useDocsSidebar();
|
|
21
|
+
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
|
|
22
|
+
return (
|
|
23
|
+
<Layout>
|
|
24
|
+
<BackToTopButton />
|
|
25
|
+
<div className={styles.docPage}>
|
|
26
|
+
{sidebar && (
|
|
27
|
+
<DocPageLayoutAside
|
|
28
|
+
sidebar={sidebar.items}
|
|
29
|
+
hiddenSidebarContainer={hiddenSidebarContainer}
|
|
30
|
+
setHiddenSidebarContainer={setHiddenSidebarContainer}
|
|
31
|
+
/>
|
|
32
|
+
)}
|
|
33
|
+
<DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
|
|
34
|
+
{children}
|
|
35
|
+
</DocPageLayoutMain>
|
|
36
|
+
</div>
|
|
37
|
+
</Layout>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
File without changes
|
|
@@ -5,145 +5,30 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React
|
|
8
|
+
import React from 'react';
|
|
9
9
|
import renderRoutes from '@docusaurus/renderRoutes';
|
|
10
|
-
import type {
|
|
11
|
-
import Layout from '@theme/Layout';
|
|
12
|
-
import DocSidebar from '@theme/DocSidebar';
|
|
10
|
+
import type {PropSidebar} from '@docusaurus/plugin-content-docs';
|
|
13
11
|
import NotFound from '@theme/NotFound';
|
|
14
|
-
import type {DocumentRoute} from '@theme/DocItem';
|
|
15
12
|
import type {Props} from '@theme/DocPage';
|
|
16
|
-
import
|
|
17
|
-
import BackToTopButton from '@theme/BackToTopButton';
|
|
13
|
+
import DocPageLayout from '@theme/DocPage/Layout';
|
|
18
14
|
import {matchPath} from '@docusaurus/router';
|
|
19
|
-
import {translate} from '@docusaurus/Translate';
|
|
20
15
|
|
|
21
16
|
import clsx from 'clsx';
|
|
22
|
-
import styles from './styles.module.css';
|
|
23
17
|
|
|
24
18
|
import {
|
|
25
19
|
HtmlClassNameProvider,
|
|
26
20
|
ThemeClassNames,
|
|
27
21
|
docVersionSearchTag,
|
|
28
22
|
DocsSidebarProvider,
|
|
29
|
-
useDocsSidebar,
|
|
30
23
|
DocsVersionProvider,
|
|
31
24
|
} from '@docusaurus/theme-common';
|
|
32
25
|
import SearchMetadata from '@theme/SearchMetadata';
|
|
33
26
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
function DocPageContent({
|
|
42
|
-
currentDocRoute,
|
|
43
|
-
versionMetadata,
|
|
44
|
-
children,
|
|
45
|
-
sidebarName,
|
|
46
|
-
}: DocPageContentProps): JSX.Element {
|
|
47
|
-
const sidebar = useDocsSidebar();
|
|
48
|
-
const {pluginId, version} = versionMetadata;
|
|
49
|
-
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
|
|
50
|
-
const [hiddenSidebar, setHiddenSidebar] = useState(false);
|
|
51
|
-
const toggleSidebar = useCallback(() => {
|
|
52
|
-
if (hiddenSidebar) {
|
|
53
|
-
setHiddenSidebar(false);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
setHiddenSidebarContainer((value) => !value);
|
|
57
|
-
}, [hiddenSidebar]);
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<>
|
|
61
|
-
<SearchMetadata
|
|
62
|
-
version={version}
|
|
63
|
-
tag={docVersionSearchTag(pluginId, version)}
|
|
64
|
-
/>
|
|
65
|
-
<Layout>
|
|
66
|
-
<div className={styles.docPage}>
|
|
67
|
-
<BackToTopButton />
|
|
68
|
-
|
|
69
|
-
{sidebar && (
|
|
70
|
-
<aside
|
|
71
|
-
className={clsx(
|
|
72
|
-
ThemeClassNames.docs.docSidebarContainer,
|
|
73
|
-
styles.docSidebarContainer,
|
|
74
|
-
hiddenSidebarContainer && styles.docSidebarContainerHidden,
|
|
75
|
-
)}
|
|
76
|
-
onTransitionEnd={(e) => {
|
|
77
|
-
if (
|
|
78
|
-
!e.currentTarget.classList.contains(
|
|
79
|
-
styles.docSidebarContainer!,
|
|
80
|
-
)
|
|
81
|
-
) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
if (hiddenSidebarContainer) {
|
|
86
|
-
setHiddenSidebar(true);
|
|
87
|
-
}
|
|
88
|
-
}}>
|
|
89
|
-
<DocSidebar
|
|
90
|
-
key={
|
|
91
|
-
// Reset sidebar state on sidebar changes
|
|
92
|
-
// See https://github.com/facebook/docusaurus/issues/3414
|
|
93
|
-
sidebarName
|
|
94
|
-
}
|
|
95
|
-
sidebar={sidebar}
|
|
96
|
-
path={currentDocRoute.path}
|
|
97
|
-
onCollapse={toggleSidebar}
|
|
98
|
-
isHidden={hiddenSidebar}
|
|
99
|
-
/>
|
|
100
|
-
|
|
101
|
-
{hiddenSidebar && (
|
|
102
|
-
<div
|
|
103
|
-
className={styles.collapsedDocSidebar}
|
|
104
|
-
title={translate({
|
|
105
|
-
id: 'theme.docs.sidebar.expandButtonTitle',
|
|
106
|
-
message: 'Expand sidebar',
|
|
107
|
-
description:
|
|
108
|
-
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
109
|
-
})}
|
|
110
|
-
aria-label={translate({
|
|
111
|
-
id: 'theme.docs.sidebar.expandButtonAriaLabel',
|
|
112
|
-
message: 'Expand sidebar',
|
|
113
|
-
description:
|
|
114
|
-
'The ARIA label and title attribute for expand button of doc sidebar',
|
|
115
|
-
})}
|
|
116
|
-
tabIndex={0}
|
|
117
|
-
role="button"
|
|
118
|
-
onKeyDown={toggleSidebar}
|
|
119
|
-
onClick={toggleSidebar}>
|
|
120
|
-
<IconArrow className={styles.expandSidebarButtonIcon} />
|
|
121
|
-
</div>
|
|
122
|
-
)}
|
|
123
|
-
</aside>
|
|
124
|
-
)}
|
|
125
|
-
<main
|
|
126
|
-
className={clsx(
|
|
127
|
-
styles.docMainContainer,
|
|
128
|
-
(hiddenSidebarContainer || !sidebar) &&
|
|
129
|
-
styles.docMainContainerEnhanced,
|
|
130
|
-
)}>
|
|
131
|
-
<div
|
|
132
|
-
className={clsx(
|
|
133
|
-
'container padding-top--md padding-bottom--lg',
|
|
134
|
-
styles.docItemWrapper,
|
|
135
|
-
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
|
|
136
|
-
)}>
|
|
137
|
-
{children}
|
|
138
|
-
</div>
|
|
139
|
-
</main>
|
|
140
|
-
</div>
|
|
141
|
-
</Layout>
|
|
142
|
-
</>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
export default function DocPage(props: Props): JSX.Element {
|
|
27
|
+
function extractDocRouteMetadata(props: Props): null | {
|
|
28
|
+
docElement: JSX.Element;
|
|
29
|
+
sidebarName: string | undefined;
|
|
30
|
+
sidebarItems: PropSidebar | undefined;
|
|
31
|
+
} {
|
|
147
32
|
const {
|
|
148
33
|
route: {routes: docRoutes},
|
|
149
34
|
versionMetadata,
|
|
@@ -153,33 +38,55 @@ export default function DocPage(props: Props): JSX.Element {
|
|
|
153
38
|
matchPath(location.pathname, docRoute),
|
|
154
39
|
);
|
|
155
40
|
if (!currentDocRoute) {
|
|
156
|
-
return
|
|
41
|
+
return null;
|
|
157
42
|
}
|
|
158
43
|
|
|
159
44
|
// For now, the sidebarName is added as route config: not ideal!
|
|
160
45
|
const sidebarName = currentDocRoute.sidebar;
|
|
161
46
|
|
|
162
|
-
const
|
|
47
|
+
const sidebarItems = sidebarName
|
|
163
48
|
? versionMetadata.docsSidebars[sidebarName]
|
|
164
|
-
:
|
|
49
|
+
: undefined;
|
|
50
|
+
|
|
51
|
+
const docElement = renderRoutes(props.route.routes, {
|
|
52
|
+
versionMetadata,
|
|
53
|
+
});
|
|
165
54
|
|
|
55
|
+
return {
|
|
56
|
+
docElement,
|
|
57
|
+
sidebarName,
|
|
58
|
+
sidebarItems,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export default function DocPage(props: Props): JSX.Element {
|
|
63
|
+
const {versionMetadata} = props;
|
|
64
|
+
const currentDocRouteMetadata = extractDocRouteMetadata(props);
|
|
65
|
+
if (!currentDocRouteMetadata) {
|
|
66
|
+
return <NotFound />;
|
|
67
|
+
}
|
|
68
|
+
const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
|
|
166
69
|
return (
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
70
|
+
<>
|
|
71
|
+
<SearchMetadata
|
|
72
|
+
version={versionMetadata.version}
|
|
73
|
+
tag={docVersionSearchTag(
|
|
74
|
+
versionMetadata.pluginId,
|
|
75
|
+
versionMetadata.version,
|
|
76
|
+
)}
|
|
77
|
+
/>
|
|
78
|
+
<HtmlClassNameProvider
|
|
79
|
+
className={clsx(
|
|
80
|
+
ThemeClassNames.wrapper.docsPages,
|
|
81
|
+
ThemeClassNames.page.docsDocPage,
|
|
82
|
+
props.versionMetadata.className,
|
|
83
|
+
)}>
|
|
84
|
+
<DocsVersionProvider version={versionMetadata}>
|
|
85
|
+
<DocsSidebarProvider name={sidebarName} items={sidebarItems}>
|
|
86
|
+
<DocPageLayout>{docElement}</DocPageLayout>
|
|
87
|
+
</DocsSidebarProvider>
|
|
88
|
+
</DocsVersionProvider>
|
|
89
|
+
</HtmlClassNameProvider>
|
|
90
|
+
</>
|
|
184
91
|
);
|
|
185
92
|
}
|