Skip to content

Commit 6649cf6

Browse files
blindaa121blindaa121
committed
Replace openapi-demo class and css selectors with openapi-explorer
1 parent a239499 commit 6649cf6

File tree

47 files changed

+436
-215
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+436
-215
lines changed

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/index.js

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* ============================================================================
2+
* Copyright (c) Palo Alto Networks
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, { useEffect } from "react";
9+
10+
import { usePrismTheme } from "@docusaurus/theme-common";
11+
import { translate } from "@docusaurus/Translate";
12+
import Container from "@theme/ApiDemoPanel/ApiCodeBlock/Container";
13+
import CopyButton from "@theme/ApiDemoPanel/ApiCodeBlock/CopyButton";
14+
import ExitButton from "@theme/ApiDemoPanel/ApiCodeBlock/ExitButton";
15+
import Line from "@theme/ApiDemoPanel/ApiCodeBlock/Line";
16+
import clsx from "clsx";
17+
import Highlight, { defaultProps } from "prism-react-renderer";
18+
import Modal from "react-modal";
19+
20+
export default function ExpandButton({
21+
code,
22+
className,
23+
language,
24+
showLineNumbers,
25+
blockClassName,
26+
title,
27+
lineClassNames,
28+
}) {
29+
const prismTheme = usePrismTheme();
30+
31+
function openModal() {
32+
setIsOpen(true);
33+
}
34+
35+
function closeModal() {
36+
setIsOpen(false);
37+
}
38+
39+
const [modalIsOpen, setIsOpen] = React.useState(false);
40+
41+
useEffect(() => {
42+
Modal.setAppElement("body");
43+
});
44+
45+
return (
46+
<>
47+
<button
48+
type="button"
49+
aria-label={
50+
modalIsOpen
51+
? translate({
52+
id: "theme.CodeBlock.expanded",
53+
message: "Expanded",
54+
description: "The expanded button label on code blocks",
55+
})
56+
: translate({
57+
id: "theme.CodeBlock.expandButtonAriaLabel",
58+
message: "Expand code to fullscreen",
59+
description: "The ARIA label for expand code blocks button",
60+
})
61+
}
62+
title={translate({
63+
id: "theme.CodeBlock.expand",
64+
message: "Expand",
65+
description: "The expand button label on code blocks",
66+
})}
67+
className={clsx(
68+
"clean-btn",
69+
className,
70+
"openapi-explorer__code-block-expand-btn",
71+
modalIsOpen && "openapi-explorer__code-block-expand-btn--copied"
72+
)}
73+
onClick={openModal}
74+
>
75+
<span
76+
className="openapi-explorer__code-block-expand-btn-icons"
77+
aria-hidden="true"
78+
>
79+
<svg
80+
className="openapi-explorer__code-block-expand-btn-icon"
81+
viewBox="0 0 448 512"
82+
>
83+
<path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
84+
</svg>
85+
<svg
86+
className="openapi-explorer__code-block-expand-btn-icon--success"
87+
viewBox="0 0 24 24"
88+
>
89+
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
90+
</svg>
91+
</span>
92+
</button>
93+
<Modal
94+
className="openapi-explorer__expand-modal-content"
95+
overlayClassName="openapi-explorer__expand-modal-overlay"
96+
isOpen={modalIsOpen}
97+
onRequestClose={closeModal}
98+
contentLabel="Code Snippet"
99+
>
100+
<Container
101+
as="div"
102+
className={clsx(
103+
"openapi-explorer__code-block-container",
104+
language &&
105+
!blockClassName.includes(`language-${language}`) &&
106+
`language-${language}`
107+
)}
108+
>
109+
{title && (
110+
<div className="openapi-explorer__code-block-title">{title}</div>
111+
)}
112+
<div className="openapi-explorer__code-block-content">
113+
<Highlight
114+
{...defaultProps}
115+
theme={prismTheme}
116+
code={code}
117+
language={language ?? "text"}
118+
>
119+
{({ className, tokens, getLineProps, getTokenProps }) => (
120+
<pre
121+
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
122+
tabIndex={0}
123+
className={clsx(
124+
className,
125+
"openapi-explorer__code-block",
126+
"thin-scrollbar"
127+
)}
128+
>
129+
<code
130+
className={clsx(
131+
"openapi-explorer__code-block-lines",
132+
showLineNumbers &&
133+
"openapi-explorer__code-block-lines-numbers"
134+
)}
135+
>
136+
{tokens.map((line, i) => (
137+
<Line
138+
key={i}
139+
line={line}
140+
getLineProps={getLineProps}
141+
getTokenProps={getTokenProps}
142+
classNames={lineClassNames[i]}
143+
showLineNumbers={showLineNumbers}
144+
/>
145+
))}
146+
</code>
147+
</pre>
148+
)}
149+
</Highlight>
150+
<div className="openapi-explorer__code-block-btn-group">
151+
<CopyButton
152+
className="openapi-explorer__code-block-code-btn"
153+
code={code}
154+
/>
155+
<ExitButton
156+
className="openapi-dmeo__code-block-code-btn"
157+
handler={closeModal}
158+
/>
159+
</div>
160+
</div>
161+
</Container>
162+
</Modal>
163+
</>
164+
);
165+
}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* Intentionally has zero specificity, so that to be able to override
2+
the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
3+
:where(:root) {
4+
--docusaurus-highlighted-code-line-bg: rgb(72 77 91);
5+
}
6+
7+
:where([data-theme="dark"]) {
8+
--docusaurus-highlighted-code-line-bg: rgb(100 100 100);
9+
}
10+
11+
.theme-code-block-highlighted-line {
12+
background-color: var(--docusaurus-highlighted-code-line-bg);
13+
display: block;
14+
margin: 0 calc(-1 * var(--ifm-pre-padding));
15+
padding: 0 var(--ifm-pre-padding);
16+
}
17+
18+
.openapi-explorer__code-block-code-line {
19+
display: table-row;
20+
counter-increment: line-count;
21+
}
22+
23+
.openapi-explorer__code-block-code-line-number {
24+
display: table-cell;
25+
text-align: right;
26+
width: 1%;
27+
position: sticky;
28+
left: 0;
29+
padding: 0 var(--ifm-pre-padding);
30+
background: var(--ifm-pre-background);
31+
overflow-wrap: normal;
32+
}
33+
34+
.openapi-explorer__code-block-code-line-number::before {
35+
content: counter(line-count);
36+
opacity: 0.4;
37+
}
38+
39+
:global(.theme-code-block-highlighted-line)
40+
.openapi-explorer__code-block-code-line-number::before {
41+
opacity: 0.8;
42+
}
43+
44+
.openapi-explorer__code-block-code-line-number {
45+
padding-right: var(--ifm-pre-padding);
46+
}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/_Container.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.openapi-demo__code-block-container {
1+
.openapi-explorer__code-block-container {
22
height: 100%;
33
background: var(--prism-background-color);
44
color: var(--prism-color);

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function CodeBlockContainer({ as: As, ...props }) {
2020
{...props}
2121
style={prismCssVariables}
2222
className={clsx(
23-
"openapi-demo__code-block-container",
23+
"openapi-explorer__code-block-container",
2424
props.className,
2525
ThemeClassNames.common.codeBlock
2626
)}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/Element.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export default function CodeBlockJSX({ children, className }) {
1919
as="pre"
2020
tabIndex={0}
2121
className={clsx(
22-
"openapi-demo__code-block-standalone",
22+
"openapi-explorer__code-block-standalone",
2323
"thin-scrollbar",
2424
className
2525
)}
2626
>
27-
<code className="openapi-demo__code-block-lines">{children}</code>
27+
<code className="openapi-explorer__code-block-lines">{children}</code>
2828
</Container>
2929
);
3030
}

‎packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@ export default function CodeBlockString({
6060
`language-${language}`
6161
)}
6262
>
63-
{title && <div className="openapi-demo__code-block-title">{title}</div>}
64-
<div className="openapi-demo__code-block-content">
63+
{title && (
64+
<div className="openapi-explorer__code-block-title">{title}</div>
65+
)}
66+
<div className="openapi-explorer__code-block-content">
6567
<Highlight
6668
{...defaultProps}
6769
theme={prismTheme}
@@ -75,14 +77,15 @@ export default function CodeBlockString({
7577
ref={wordWrap.codeBlockRef}
7678
className={clsx(
7779
className,
78-
"openapi-demo__code-block",
80+
"openapi-explorer__code-block",
7981
"thin-scrollbar"
8082
)}
8183
>
8284
<code
8385
className={clsx(
84-
"openapi-demo__code-block-lines",
85-
showLineNumbers && "openapi-demo__code-block-lines-numbering"
86+
"openapi-explorer__code-block-lines",
87+
showLineNumbers &&
88+
"openapi-explorer__code-block-lines-numbering"
8689
)}
8790
>
8891
{tokens.map((line, i) => (
@@ -99,22 +102,22 @@ export default function CodeBlockString({
99102
</pre>
100103
)}
101104
</Highlight>
102-
<div className="openapi-demo__code-block-btn-group">
105+
<div className="openapi-explorer__code-block-btn-group">
103106
{(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
104107
<WordWrapButton
105-
className="openapi-demo__code-block-code-btn"
108+
className="openapi-explorer__code-block-code-btn"
106109
onClick={() => wordWrap.toggle()}
107110
isEnabled={wordWrap.isEnabled}
108111
/>
109112
)}
110113
<CopyButton
111-
className="openapi-demo__code-block-code-btn"
114+
className="openapi-explorer__code-block-code-btn"
112115
code={code}
113116
/>
114117
<ExpandButton
115118
className={clsx(
116-
"openapi-demo__code-block-code-btn",
117-
"openapi-demo__expand-btn"
119+
"openapi-explorer__code-block-code-btn",
120+
"openapi-explorer__expand-btn"
118121
)}
119122
code={code}
120123
language={language}

0 commit comments

Comments
 (0)