Skip to content

Commit 1f042ea

Browse files
th0rOdinsonth0rOdinson
committed
feat: better use of the modal + coderabbit comments
1 parent 5a96642 commit 1f042ea

6 files changed

Lines changed: 119 additions & 108 deletions

File tree

‎packages/common-config/src/components/HandbookSection/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function HandbookSection({
8181
</div>
8282
<div className={styles.handbooksSeparator}>
8383
<span className={styles.line}></span>
84-
<img src="/common/img/star-icon.svg" alt="Star illustration" />
84+
<img src="/common/img/star-icon.svg" alt="" />
8585
<span className={styles.line}></span>
8686
</div>
8787
</section>

‎packages/common-config/src/types/docusaurus__link.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
declare module '@docusaurus/Link' {
22
import * as React from 'react';
33
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
4-
to: string;
4+
to?: string;
5+
href?: string;
56
className?: string;
67
children?: React.ReactNode;
78
}

‎sites/template/docusaurus.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ const localConfig: Config = {
6262
position: "right",
6363
label: "Website",
6464
},
65+
{
66+
type: "html",
67+
position: "right",
68+
value:
69+
'<style>#disclaimer-btn::before { content: ""; width: 16px; height: 16px; background-image: url("/common/img/icons/information-circle.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; } #disclaimer-btn:hover { color: #d1d5db; } @media (max-width: 996px) { #disclaimer-btn { display: none !important; } }</style><button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;">Disclaimer</button>',
70+
},
6571
],
6672
},
6773
} satisfies Preset.ThemeConfig,

‎sites/template/src/theme/Root/index.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { useState, useCallback, useEffect } from "react";
2+
import { createPortal } from "react-dom";
3+
4+
interface SimpleModalProps {
5+
isOpen: boolean;
6+
onClose: () => void;
7+
children?: React.ReactNode;
8+
}
9+
10+
function SimpleModal({ isOpen, onClose, children }: SimpleModalProps) {
11+
if (!isOpen) return null;
12+
13+
return createPortal(
14+
<div
15+
style={{
16+
position: "fixed",
17+
top: 0,
18+
left: 0,
19+
right: 0,
20+
bottom: 0,
21+
backgroundColor: "rgba(0, 0, 0, 0.5)",
22+
display: "flex",
23+
alignItems: "center",
24+
justifyContent: "center",
25+
zIndex: 9999,
26+
}}
27+
onClick={onClose}
28+
>
29+
<div
30+
style={{
31+
backgroundColor: "var(--ifm-background-color)",
32+
padding: "2rem",
33+
borderRadius: "8px",
34+
maxWidth: "500px",
35+
width: "90%",
36+
position: "relative",
37+
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
38+
}}
39+
onClick={(e) => e.stopPropagation()}
40+
>
41+
<button
42+
onClick={onClose}
43+
style={{
44+
position: "absolute",
45+
top: "10px",
46+
right: "15px",
47+
background: "none",
48+
border: "none",
49+
fontSize: "1.5rem",
50+
cursor: "pointer",
51+
color: "var(--ifm-color-emphasis-600)",
52+
}}
53+
>
54+
×
55+
</button>
56+
{children}
57+
</div>
58+
</div>,
59+
document.body
60+
);
61+
}
62+
63+
export default function Root({ children }: { children: React.ReactNode }) {
64+
const [showModal, setShowModal] = useState(false);
65+
66+
const handleCloseModal = useCallback(() => setShowModal(false), []);
67+
68+
useEffect(() => {
69+
const handleNavbarClick = () => {
70+
setShowModal(true);
71+
};
72+
73+
// Add listener when component mounts
74+
const disclaimerBtn = document.getElementById("disclaimer-btn");
75+
if (disclaimerBtn) {
76+
disclaimerBtn.addEventListener("click", handleNavbarClick);
77+
}
78+
79+
// Cleanup listener when component unmounts
80+
return () => {
81+
const disclaimerBtn = document.getElementById("disclaimer-btn");
82+
if (disclaimerBtn) {
83+
disclaimerBtn.removeEventListener("click", handleNavbarClick);
84+
}
85+
};
86+
}, []);
87+
88+
return (
89+
<>
90+
{children}
91+
<SimpleModal isOpen={showModal} onClose={handleCloseModal}>
92+
<h2>Disclaimer</h2>
93+
<p>
94+
This handbook is not intended to replace official documentation.
95+
This is internal material used for onboarding new team members.
96+
We open source it in the hopes that it helps somebody else, but beware it can
97+
be outdated on the latest updates.
98+
</p>
99+
</SimpleModal>
100+
</>
101+
);
102+
}

‎sites/wonderland/src/pages/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,12 @@ const wonderlandHandbooks: Handbook[] = [
5656
href: "/docs/handbook/overview",
5757
bgImage: "/common/img/red-card-bg.png",
5858
},
59-
{
60-
title: "Aztec handbook",
61-
image: "/img/aztec-handbook.svg",
62-
href: "https://docs.aztec.network/aztec-handbook/overview",
63-
bgImage: "/common/img/violet-card-bg.png",
64-
},
59+
// {
60+
// title: "Aztec handbook",
61+
// image: "/img/aztec-handbook.svg",
62+
// href: "https://docs.aztec.network/aztec-handbook/overview",
63+
// bgImage: "/common/img/violet-card-bg.png",
64+
// },
6565
];
6666

6767
const wonderlandHandbookProps: HandbookSectionProps = {

‎sites/wonderland/src/theme/Root/index.tsx‎

Lines changed: 2 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,5 @@
1-
import React, { useState, useCallback, useEffect } from "react";
2-
import { createPortal } from "react-dom";
3-
4-
interface SimpleModalProps {
5-
isOpen: boolean;
6-
onClose: () => void;
7-
children?: React.ReactNode;
8-
}
9-
10-
function SimpleModal({ isOpen, onClose, children }: SimpleModalProps) {
11-
if (!isOpen) return null;
12-
13-
return createPortal(
14-
<div
15-
style={{
16-
position: "fixed",
17-
top: 0,
18-
left: 0,
19-
right: 0,
20-
bottom: 0,
21-
backgroundColor: "rgba(0, 0, 0, 0.5)",
22-
display: "flex",
23-
alignItems: "center",
24-
justifyContent: "center",
25-
zIndex: 9999,
26-
}}
27-
onClick={onClose}
28-
>
29-
<div
30-
style={{
31-
backgroundColor: "var(--ifm-background-color)",
32-
padding: "2rem",
33-
borderRadius: "8px",
34-
maxWidth: "500px",
35-
width: "90%",
36-
position: "relative",
37-
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
38-
}}
39-
onClick={(e) => e.stopPropagation()}
40-
>
41-
<button
42-
onClick={onClose}
43-
style={{
44-
position: "absolute",
45-
top: "10px",
46-
right: "15px",
47-
background: "none",
48-
border: "none",
49-
fontSize: "1.5rem",
50-
cursor: "pointer",
51-
color: "var(--ifm-color-emphasis-600)",
52-
}}
53-
>
54-
×
55-
</button>
56-
{children}
57-
</div>
58-
</div>,
59-
document.body
60-
);
61-
}
1+
import React from "react";
622

633
export default function Root({ children }: { children: React.ReactNode }) {
64-
const [showModal, setShowModal] = useState(false);
65-
66-
const handleCloseModal = useCallback(() => setShowModal(false), []);
67-
68-
useEffect(() => {
69-
const handleNavbarClick = () => {
70-
setShowModal(true);
71-
};
72-
73-
// Add listener when component mounts
74-
const disclaimerBtn = document.getElementById("disclaimer-btn");
75-
if (disclaimerBtn) {
76-
disclaimerBtn.addEventListener("click", handleNavbarClick);
77-
}
78-
79-
// Cleanup listener when component unmounts
80-
return () => {
81-
const disclaimerBtn = document.getElementById("disclaimer-btn");
82-
if (disclaimerBtn) {
83-
disclaimerBtn.removeEventListener("click", handleNavbarClick);
84-
}
85-
};
86-
}, []);
87-
88-
return (
89-
<>
90-
{children}
91-
<SimpleModal isOpen={showModal} onClose={handleCloseModal}>
92-
<h2>Disclaimer</h2>
93-
<p>
94-
This handbook is not intended to replace Optimism's documentation.
95-
This is the internal material we use at Wonderland to onboard new
96-
people working with Optimism as a core development member. We open
97-
source it in the hopes that it helps somebody else, but beware it can
98-
be outdated on the latest updates.
99-
</p>
100-
</SimpleModal>
101-
</>
102-
);
4+
return <>{children}</>;
1035
}

0 commit comments

Comments
 (0)