Skip to content

Commit f3188b3

Browse files
portdeveloperportdeveloper
authored
add docusaurus-plugin-copy-page-button (#5085)
1 parent a263a3b commit f3188b3

4 files changed

Lines changed: 161 additions & 0 deletions

File tree

‎website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"@docusaurus/plugin-pwa": "3.10.1",
5757
"@docusaurus/preset-classic": "3.10.1",
5858
"@docusaurus/theme-mermaid": "3.10.1",
59+
"docusaurus-plugin-copy-page-button": "^0.6.2",
5960
"docusaurus-plugin-sass": "^0.2.6",
6061
"react": "^19.2.6",
6162
"react-dom": "^19.2.6",

‎website/src/theme/DocItem/Layout/index.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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} from 'react';
9+
import clsx from 'clsx';
10+
import {useWindowSize} from '@docusaurus/theme-common';
11+
import {useDoc} from '@docusaurus/plugin-content-docs/client';
12+
import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
13+
import DocItemPaginator from '@theme/DocItem/Paginator';
14+
import DocVersionBanner from '@theme/DocVersionBanner';
15+
import DocVersionBadge from '@theme/DocVersionBadge';
16+
import DocItemFooter from '@theme/DocItem/Footer';
17+
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
18+
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
19+
import DocItemContent from '@theme/DocItem/Content';
20+
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
21+
import ContentVisibility from '@theme/ContentVisibility';
22+
import type {Props} from '@theme/DocItem/Layout';
23+
24+
import styles from './styles.module.css';
25+
26+
function DocItemCopyPageButton({className}: {className?: string}) {
27+
return (
28+
<div className={clsx(styles.copyPageAction, className)}>
29+
<CopyPageButton
30+
customStyles={{
31+
container: {className: styles.copyPageButtonContainer},
32+
button: {
33+
className: styles.copyPageButton,
34+
style: {marginBottom: 0},
35+
},
36+
dropdown: {className: styles.copyPageDropdown},
37+
}}
38+
/>
39+
</div>
40+
);
41+
}
42+
43+
/**
44+
* Decide if the toc should be rendered, on mobile or desktop viewports
45+
*/
46+
function useDocTOC() {
47+
const {frontMatter, toc} = useDoc();
48+
const windowSize = useWindowSize();
49+
50+
const hidden = frontMatter.hide_table_of_contents;
51+
const canRender = !hidden && toc.length > 0;
52+
53+
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
54+
55+
const desktop =
56+
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
57+
<DocItemTOCDesktop />
58+
) : undefined;
59+
60+
return {
61+
canRender,
62+
hidden,
63+
mobile,
64+
desktop,
65+
};
66+
}
67+
68+
export default function DocItemLayout({children}: Props): ReactNode {
69+
const docTOC = useDocTOC();
70+
const {metadata} = useDoc();
71+
return (
72+
<div className="row">
73+
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
74+
<ContentVisibility metadata={metadata} />
75+
<DocVersionBanner />
76+
<div className={styles.docItemContainer}>
77+
<article>
78+
<DocBreadcrumbs />
79+
<DocVersionBadge />
80+
{docTOC.mobile}
81+
<DocItemCopyPageButton
82+
className={clsx(
83+
styles.copyPageArticleAction,
84+
docTOC.canRender && styles.copyPageArticleActionWithToc
85+
)}
86+
/>
87+
<DocItemContent>{children}</DocItemContent>
88+
<DocItemFooter />
89+
</article>
90+
<DocItemPaginator />
91+
</div>
92+
</div>
93+
{docTOC.desktop && (
94+
<div className="col col--3">
95+
<DocItemCopyPageButton className={styles.copyPageAsideAction} />
96+
{docTOC.desktop}
97+
</div>
98+
)}
99+
</div>
100+
);
101+
}

‎website/src/theme/DocItem/Layout/styles.module.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
.docItemContainer header + *,
9+
.docItemContainer article > *:first-child {
10+
margin-top: 0;
11+
}
12+
13+
.copyPageAction {
14+
display: flex;
15+
}
16+
17+
.copyPageArticleAction {
18+
justify-content: flex-end;
19+
min-height: 37px;
20+
margin-bottom: 1rem;
21+
}
22+
23+
.copyPageAsideAction {
24+
display: none;
25+
margin-bottom: 1rem;
26+
}
27+
28+
.copyPageButtonContainer {
29+
display: inline-block;
30+
}
31+
32+
.copyPageButton {
33+
font-family: var(--ifm-font-family-base);
34+
}
35+
36+
.copyPageDropdown {
37+
font-family: var(--ifm-font-family-base);
38+
}
39+
40+
@media (min-width: 997px) {
41+
.docItemCol {
42+
max-width: 75% !important;
43+
}
44+
45+
.copyPageArticleActionWithToc {
46+
display: none;
47+
}
48+
49+
.copyPageAsideAction {
50+
display: flex;
51+
justify-content: flex-start;
52+
min-height: 37px;
53+
}
54+
}

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7236,6 +7236,11 @@ doctrine@^2.1.0:
72367236
dependencies:
72377237
esutils "^2.0.2"
72387238

7239+
docusaurus-plugin-copy-page-button@^0.6.2:
7240+
version "0.6.2"
7241+
resolved "https://registry.yarnpkg.com/docusaurus-plugin-copy-page-button/-/docusaurus-plugin-copy-page-button-0.6.2.tgz#fee47fa75f77ab634d90694c47e832ce9dadcc6c"
7242+
integrity sha512-RbldmCJ6FEYx515ptp1Ei9WwQAQyK6ty5UaHVaSlOyBfh/Nm+wu+6y3g/V7sVejBrMCxpGLnAuIJn3h8nqdjcQ==
7243+
72397244
docusaurus-plugin-sass@^0.2.6:
72407245
version "0.2.6"
72417246
resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.6.tgz#b4930a1fe1cc7bcead639bb1bee38bce0ffd073d"

0 commit comments

Comments
 (0)