Skip to content

Commit 5f81076

Browse files
ELHart05ELHart05
committed
feat: add resizing between the docs and the playground, small HTML restructure
1 parent 2a20a2e commit 5f81076

6 files changed

Lines changed: 145 additions & 49 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"dependencies": {
2222
"@excalidraw/markdown-to-text": "0.1.2",
2323
"mermaid": "10.9.0",
24-
"nanoid": "4.0.2"
24+
"nanoid": "4.0.2",
25+
"react-split": "^2.0.14"
2526
},
2627
"devDependencies": {
2728
"@babel/core": "7.12.0",

‎playground/GithubCorner.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.github-corner {
2+
height: fit-content;
3+
}
4+
15
.github-corner:hover .octo-arm {
26
animation: octocat-wave 560ms ease-in-out;
37

‎playground/Testcases.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const Testcases = ({ onChange }: TestcasesProps) => {
2828

2929
let testCaseIndex = 0;
3030
return (
31-
<>
31+
<div>
3232
{testcaseTypes.map(({ name, testcases }) => {
3333
const baseId = name.toLowerCase();
3434
return (
@@ -59,7 +59,7 @@ const Testcases = ({ onChange }: TestcasesProps) => {
5959
</Fragment>
6060
);
6161
})}
62-
</>
62+
</div>
6363
);
6464
};
6565

‎playground/index.tsx‎

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ExcalidrawWrapper from "./ExcalidrawWrapper.tsx";
44
import Testcases from "./Testcases.tsx";
55
import { parseMermaid } from "../src/parseMermaid.ts";
66
import GitHubCorner from "./GitHubCorner.tsx";
7+
import Split from "react-split";
78

89
export interface MermaidData {
910
definition: string;
@@ -51,54 +52,61 @@ const App = () => {
5152
);
5253

5354
return (
54-
<>
55-
<div style={{ width: "50%", display: "flex" }}>
56-
<section id="custom-test">
57-
<h1>{"Custom Test"}</h1>
58-
{"Supports only "}
59-
<a
60-
target="_blank"
61-
href="https://mermaid.js.org/syntax/flowchart.html"
62-
>
63-
{"Flowchart"}
64-
</a>
65-
{", "}
66-
<a
67-
target="_blank"
68-
href="https://mermaid.js.org/syntax/sequenceDiagram.html"
69-
>
70-
{"Sequence "}
71-
</a>
72-
{"and "}
73-
<a
74-
target="_blank"
75-
href="https://mermaid.js.org/syntax/classDiagram.html"
76-
>
77-
{"Class "}
78-
</a>
79-
{"diagrams."}
80-
<br />
81-
<CustomTest
82-
activeTestCaseIndex={activeTestCaseIndex}
83-
mermaidData={deferredMermaidData}
84-
onChange={handleOnChange}
85-
/>
86-
</section>
87-
<GitHubCorner />
55+
<Split
56+
className="split"
57+
sizes={[50, 50]}
58+
minSize={460}
59+
gutterSize={3}
60+
gutterAlign="center"
61+
>
62+
<div className="mermaid-container">
63+
<div className="mermaid-header-container">
64+
<section id="custom-test">
65+
<h1>{"Custom Test"}</h1>
66+
{"Supports only "}
67+
<a
68+
target="_blank"
69+
href="https://mermaid.js.org/syntax/flowchart.html"
70+
>
71+
{"Flowchart"}
72+
</a>
73+
{", "}
74+
<a
75+
target="_blank"
76+
href="https://mermaid.js.org/syntax/sequenceDiagram.html"
77+
>
78+
{"Sequence "}
79+
</a>
80+
{"and "}
81+
<a
82+
target="_blank"
83+
href="https://mermaid.js.org/syntax/classDiagram.html"
84+
>
85+
{"Class "}
86+
</a>
87+
{"diagrams."}
88+
<br />
89+
<CustomTest
90+
activeTestCaseIndex={activeTestCaseIndex}
91+
mermaidData={deferredMermaidData}
92+
onChange={handleOnChange}
93+
/>
94+
</section>
95+
<GitHubCorner />
96+
</div>
97+
<Testcases
98+
activeTestCaseIndex={activeTestCaseIndex}
99+
onChange={handleOnChange}
100+
/>
88101
</div>
89102

90-
<Testcases
91-
activeTestCaseIndex={activeTestCaseIndex}
92-
onChange={handleOnChange}
93-
/>
94-
95103
<div id="excalidraw">
96104
<ExcalidrawWrapper
97105
mermaidDefinition={deferredMermaidData.definition}
98106
mermaidOutput={deferredMermaidData.output}
99107
/>
100108
</div>
101-
</>
109+
</Split>
102110
);
103111
};
104112

‎playground/style.scss‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
body {
2-
font-family: sans-serif;
32
margin-top: 0;
3+
margin-bottom: 0;
4+
padding: 0;
5+
font-family: sans-serif;
46
#flowchart-container,
57
#unsupported {
68
max-width: 48%;
@@ -19,12 +21,12 @@ button {
1921
}
2022

2123
#excalidraw {
24+
overflow: auto;
2225
width: 50vw;
2326
height: 100vh;
2427
position: fixed;
2528
top: 0;
2629
right: 0;
27-
border-left: 1px solid #ccc;
2830

2931
.mobile-misc-tools-container {
3032
display: none !important;
@@ -62,6 +64,11 @@ a {
6264
text-decoration: none;
6365
}
6466

67+
summary {
68+
cursor: pointer;
69+
width: fit-content;
70+
}
71+
6572
.testcase-container pre {
6673
font-size: 16px;
6774
font-weight: 600;
@@ -71,3 +78,32 @@ a {
7178
width: 45vw;
7279
padding: 5px;
7380
}
81+
82+
.split {
83+
height: 100vh;
84+
display: flex;
85+
}
86+
87+
.gutter-horizontal {
88+
background: #ccc;
89+
z-index: 1;
90+
cursor: row-resize;
91+
92+
&:hover {
93+
cursor: col-resize;
94+
}
95+
}
96+
97+
.mermaid-container {
98+
width: 50%;
99+
height: max-content;
100+
display: "flex";
101+
flex-direction: "column";
102+
overflow: auto;
103+
104+
.mermaid-header-container {
105+
width: 100%;
106+
display: flex;
107+
justify-content: space-between;
108+
}
109+
}

‎yarn.lock‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3099,7 +3099,7 @@ lodash@^4.17.19, lodash@^4.17.21:
30993099
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
31003100
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
31013101

3102-
loose-envify@^1.1.0:
3102+
loose-envify@^1.1.0, loose-envify@^1.4.0:
31033103
version "1.4.0"
31043104
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
31053105
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3544,6 +3544,11 @@ nwsapi@^2.2.7:
35443544
resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.9.tgz#7f3303218372db2e9f27c27766bcfc59ae7e61c6"
35453545
integrity sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg==
35463546

3547+
object-assign@^4.1.1:
3548+
version "4.1.1"
3549+
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
3550+
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
3551+
35473552
once@^1.3.0:
35483553
version "1.4.0"
35493554
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -3712,6 +3717,15 @@ process@0.11.10:
37123717
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
37133718
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
37143719

3720+
prop-types@^15.5.7:
3721+
version "15.8.1"
3722+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
3723+
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
3724+
dependencies:
3725+
loose-envify "^1.4.0"
3726+
object-assign "^4.1.1"
3727+
react-is "^16.13.1"
3728+
37153729
psl@^1.1.33:
37163730
version "1.9.0"
37173731
resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -3745,11 +3759,24 @@ react-dom@18.2.0:
37453759
loose-envify "^1.1.0"
37463760
scheduler "^0.23.0"
37473761

3762+
react-is@^16.13.1:
3763+
version "16.13.1"
3764+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
3765+
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
3766+
37483767
react-is@^18.0.0:
37493768
version "18.3.1"
37503769
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
37513770
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
37523771

3772+
react-split@^2.0.14:
3773+
version "2.0.14"
3774+
resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
3775+
integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
3776+
dependencies:
3777+
prop-types "^15.5.7"
3778+
split.js "^1.6.0"
3779+
37533780
react@18.2.0:
37543781
version "18.2.0"
37553782
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -3985,6 +4012,11 @@ source-map@^0.5.0:
39854012
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
39864013
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
39874014

4015+
split.js@^1.6.0:
4016+
version "1.6.5"
4017+
resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.6.5.tgz#f7f61da1044c9984cb42947df4de4fadb5a3f300"
4018+
integrity sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==
4019+
39884020
stackback@0.0.2:
39894021
version "0.0.2"
39904022
resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
@@ -3995,8 +4027,16 @@ std-env@^3.5.0:
39954027
resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
39964028
integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
39974029

3998-
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
3999-
name string-width-cjs
4030+
"string-width-cjs@npm:string-width@^4.2.0":
4031+
version "4.2.3"
4032+
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
4033+
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
4034+
dependencies:
4035+
emoji-regex "^8.0.0"
4036+
is-fullwidth-code-point "^3.0.0"
4037+
strip-ansi "^6.0.1"
4038+
4039+
string-width@^4.1.0:
40004040
version "4.2.3"
40014041
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
40024042
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4014,7 +4054,14 @@ string-width@^5.0.1, string-width@^5.1.2:
40144054
emoji-regex "^9.2.2"
40154055
strip-ansi "^7.0.1"
40164056

4017-
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
4057+
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
4058+
version "6.0.1"
4059+
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
4060+
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
4061+
dependencies:
4062+
ansi-regex "^5.0.1"
4063+
4064+
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
40184065
version "6.0.1"
40194066
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
40204067
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

0 commit comments

Comments
 (0)