Skip to content

Commit 564f27c

Browse files
msutkowskimsutkowski
committed
Update DocPageWithBraveWarning
1 parent 1a2b1f4 commit 564f27c

File tree

3 files changed

+78
-113
lines changed

3 files changed

+78
-113
lines changed

‎website/src/theme/DocPageWithBraveWarning/BraveWarning.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useState, useEffect } from 'react'
2+
3+
function BraveWarning() {
4+
const [isBrave, setIsBrave] = useState(false)
5+
6+
useEffect(() => {
7+
const check = async () => {
8+
return (navigator.brave && (await navigator.brave.isBrave())) || false
9+
}
10+
11+
check()
12+
.then((isBrave) => {
13+
if (isBrave) {
14+
setIsBrave(isBrave)
15+
}
16+
})
17+
.catch(console.error)
18+
}, [])
19+
20+
return isBrave && !localStorage.getItem('brave-warning-dismissed') ? (
21+
<div className="admonition admonition-caution alert alert--warning">
22+
<div className="admonition-heading">
23+
<h5>
24+
<span className="admonition-icon">
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
width="16"
28+
height="16"
29+
viewBox="0 0 16 16"
30+
>
31+
<path
32+
fill-rule="evenodd"
33+
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
34+
></path>
35+
</svg>
36+
</span>
37+
Brave Browser Warning
38+
</h5>
39+
</div>
40+
<div className="admonition-content">
41+
<p>
42+
It appears that you're using Brave - that's awesome. We recommend
43+
disabling shields for this domain as well as CodeSandbox in the event
44+
that the examples do not load correctly.
45+
</p>
46+
<button
47+
className="button button--warning button--md"
48+
onClick={() => {
49+
localStorage.setItem('brave-warning-dismissed', true)
50+
setIsBrave(false)
51+
}}
52+
>
53+
Dismiss
54+
</button>
55+
</div>
56+
</div>
57+
) : null
58+
}
59+
60+
export default BraveWarning

‎website/src/theme/DocPageWithBraveWarning/index.js

Lines changed: 10 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
7-
import React, { useState, useCallback, useEffect } from 'react'
7+
import React, { useState, useCallback } from 'react'
88
import { MDXProvider } from '@mdx-js/react'
99
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
1010
import renderRoutes from '@docusaurus/renderRoutes'
@@ -18,95 +18,15 @@ import { translate } from '@docusaurus/Translate'
1818
import clsx from 'clsx'
1919
import styles from './styles.module.css'
2020
import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common'
21-
22-
function BraveWarning() {
23-
const [isBrave, setIsBrave] = useState(false)
24-
25-
useEffect(() => {
26-
const check = async () => {
27-
return (navigator.brave && (await navigator.brave.isBrave())) || false
28-
}
29-
30-
check()
31-
.then((isBrave) => {
32-
if (isBrave) {
33-
setIsBrave(isBrave)
34-
}
35-
})
36-
.catch(console.error)
37-
}, [])
38-
39-
return isBrave && !localStorage.getItem('brave-warning-dismissed') ? (
40-
<div className="admonition admonition-caution alert alert--warning">
41-
<div className="admonition-heading">
42-
<h5>
43-
<span className="admonition-icon">
44-
<svg
45-
xmlns="http://www.w3.org/2000/svg"
46-
width="16"
47-
height="16"
48-
viewBox="0 0 16 16"
49-
>
50-
<path
51-
fill-rule="evenodd"
52-
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
53-
></path>
54-
</svg>
55-
</span>
56-
Brave Browser Warning
57-
</h5>
58-
</div>
59-
<div className="admonition-content">
60-
<p>
61-
It appears that you're using Brave - that's awesome. We recommend
62-
disabling shields for this domain as well as CodeSandbox in the event
63-
that the examples do not load correctly.
64-
</p>
65-
<button
66-
className="button button--warning button--md"
67-
onClick={() => {
68-
localStorage.setItem('brave-warning-dismissed', true)
69-
setIsBrave(false)
70-
}}
71-
>
72-
Dismiss
73-
</button>
74-
</div>
75-
</div>
76-
) : null
77-
}
78-
79-
function getSidebar({ versionMetadata, currentDocRoute }) {
80-
function addTrailingSlash(str) {
81-
return str.endsWith('/') ? str : `${str}/`
82-
}
83-
84-
function removeTrailingSlash(str) {
85-
return str.endsWith('/') ? str.slice(0, -1) : str
86-
}
87-
88-
const { permalinkToSidebar, docsSidebars } = versionMetadata // With/without trailingSlash, we should always be able to get the appropriate sidebar
89-
// note: docs plugin permalinks currently never have trailing slashes
90-
// trailingSlash is handled globally at the framework level, not plugin level
91-
92-
const sidebarName =
93-
permalinkToSidebar[currentDocRoute.path] ||
94-
permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] ||
95-
permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)]
96-
const sidebar = docsSidebars[sidebarName]
97-
return {
98-
sidebar,
99-
sidebarName,
100-
}
101-
}
21+
import BraveWarning from './BraveWarning'
10222

10323
function DocPageContent({ currentDocRoute, versionMetadata, children }) {
10424
const { siteConfig, isClient } = useDocusaurusContext()
10525
const { pluginId, version } = versionMetadata
106-
const { sidebarName, sidebar } = getSidebar({
107-
versionMetadata,
108-
currentDocRoute,
109-
})
26+
const sidebarName = currentDocRoute.sidebar
27+
const sidebar = sidebarName
28+
? versionMetadata.docsSidebars[sidebarName]
29+
: undefined
11030
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
11131
const [hiddenSidebar, setHiddenSidebar] = useState(false)
11232
const toggleSidebar = useCallback(() => {
@@ -152,9 +72,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
15272
}
15373
sidebar={sidebar}
15474
path={currentDocRoute.path}
155-
sidebarCollapsible={
156-
siteConfig.themeConfig?.sidebarCollapsible ?? true
157-
}
75+
sidebarCollapsible={siteConfig.themeConfig.sidebarCollapsible}
15876
onCollapse={toggleSidebar}
15977
isHidden={hiddenSidebar}
16078
/>
@@ -227,7 +145,9 @@ function DocPage(props) {
227145
currentDocRoute={currentDocRoute}
228146
versionMetadata={versionMetadata}
229147
>
230-
{renderRoutes(docRoutes)}
148+
{renderRoutes(docRoutes, {
149+
versionMetadata,
150+
})}
231151
</DocPageContent>
232152
)
233153
}

‎website/src/theme/DocPageWithBraveWarning/styles.module.css

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
:root {
99
--doc-sidebar-width: 300px;
10+
--doc-sidebar-hidden-width: 30px;
1011
}
1112

1213
:global(.docs-wrapper) {
@@ -19,17 +20,22 @@
1920
width: 100%;
2021
}
2122

23+
.docSidebarContainer {
24+
display: none;
25+
}
26+
2227
@media (min-width: 997px) {
2328
.docMainContainer {
2429
flex-grow: 1;
2530
max-width: calc(100% - var(--doc-sidebar-width));
2631
}
2732

2833
.docMainContainerEnhanced {
29-
max-width: none;
34+
max-width: calc(100% - var(--doc-sidebar-hidden-width));
3035
}
3136

3237
.docSidebarContainer {
38+
display: block;
3339
width: var(--doc-sidebar-width);
3440
margin-top: calc(-1 * var(--ifm-navbar-height));
3541
border-right: 1px solid var(--ifm-toc-border-color);
@@ -39,7 +45,7 @@
3945
}
4046

4147
.docSidebarContainerHidden {
42-
width: 30px;
48+
width: var(--doc-sidebar-hidden-width);
4349
cursor: pointer;
4450
}
4551

@@ -77,24 +83,3 @@
7783
) !important;
7884
}
7985
}
80-
81-
@media (max-width: 996px) {
82-
.docSidebarContainer {
83-
margin-top: 0;
84-
}
85-
}
86-
87-
@media (min-width: 997px) and (max-width: 1320px) {
88-
.docItemWrapper {
89-
max-width: calc(
90-
var(--ifm-container-width) - var(--doc-sidebar-width) -
91-
var(--ifm-spacing-horizontal) * 2
92-
);
93-
}
94-
95-
.docItemWrapperEnhanced {
96-
max-width: calc(
97-
var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
98-
);
99-
}
100-
}

0 commit comments

Comments
 (0)