Skip to content

Commit 82d74a9

Browse files
AykutSaracAykutSarac
committed
feat: update external mode
1 parent 14070f6 commit 82d74a9

File tree

3 files changed

+141
-83
lines changed

3 files changed

+141
-83
lines changed

‎.env.development‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_DISABLE_EXTERNAL_MODE=false

‎src/data/example.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@
4040
}
4141
}
4242
]
43-
}
43+
}

‎src/features/editor/ExternalMode.tsx‎

Lines changed: 139 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,154 @@
11
import React from "react";
2-
import { Anchor, Button, Group, Modal, Text } from "@mantine/core";
3-
import styled from "styled-components";
4-
import { VscCode } from "react-icons/vsc";
5-
import { VscArrowRight } from "react-icons/vsc";
6-
7-
const StyledAlert = styled.div`
8-
position: fixed;
9-
bottom: 36px;
10-
right: 10px;
11-
background: rgba(255, 255, 255, 0.2);
12-
border-radius: 16px;
13-
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
14-
backdrop-filter: blur(5px);
15-
-webkit-backdrop-filter: blur(5px);
16-
border: 1px solid rgba(255, 255, 255, 0.3);
17-
font-weight: 500;
18-
overflow: hidden;
19-
`;
20-
21-
const StyledTitle = styled.div`
22-
display: flex;
23-
align-items: center;
24-
color: ${({ theme }) => theme.TEXT_POSITIVE};
25-
flex: 1;
26-
font-weight: 700;
27-
28-
&::after {
29-
background: ${({ theme }) => theme.TEXT_POSITIVE};
30-
height: 1px;
31-
32-
content: "";
33-
-webkit-box-flex: 1;
34-
-ms-flex: 1 1 auto;
35-
flex: 1 1 auto;
36-
margin-left: 4px;
37-
opacity: 0.6;
38-
}
39-
`;
2+
import { Accordion, Anchor, Code, Flex, FocusTrap, Group, Modal, Text } from "@mantine/core";
403

414
const ExternalMode = () => {
425
const [isExternal, setExternal] = React.useState(false);
43-
const [isOpen, setOpen] = React.useState(false);
446

457
React.useEffect(() => {
46-
if (typeof window !== "undefined") {
47-
if (window.location.pathname.includes("widget")) return setExternal(false);
48-
if (window.location.host !== "jsoncrack.com") return setExternal(true);
49-
return setExternal(false);
8+
if (process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === "false") {
9+
if (typeof window !== "undefined") {
10+
if (window.location.pathname.includes("widget")) return setExternal(false);
11+
if (window.location.host !== "jsoncrack.com") return setExternal(true);
12+
return setExternal(false);
13+
}
5014
}
5115
}, []);
5216

53-
const closeModal = () => setOpen(false);
54-
5517
if (!isExternal) return null;
5618

5719
return (
58-
<StyledAlert>
59-
<Button
60-
onClick={() => setOpen(true)}
61-
color="red"
62-
variant="subtle"
63-
leftSection={<VscCode size="1.2rem" />}
64-
>
65-
External Host
66-
</Button>
67-
<Modal title="External Host of JSON Crack" opened={isOpen} onClose={closeModal} centered>
68-
<Group>
69-
<StyledTitle>Dear valued user,</StyledTitle>
70-
<Text>
71-
We would like to inform you that you are presently utilizing the external release of the{" "}
72-
<Anchor href="https://jsoncrack.com">JSON Crack</Anchor>. Your continued support is
73-
crucial in sustaining and improving our services.
74-
<br />
75-
<br />
76-
We kindly encourage you to consider upgrading to the premium version, which not only
77-
enhances your experience but also contributes to the ongoing development of JSON Crack.
78-
</Text>
79-
</Group>
80-
<Group pt="lg" justify="right">
81-
<Button
82-
onClick={closeModal}
83-
component="a"
84-
href="https://jsoncrack.com"
85-
target="_blank"
86-
variant="outline"
87-
color="red"
88-
rightSection={<VscArrowRight />}
89-
>
90-
JSON Crack
91-
</Button>
92-
</Group>
93-
</Modal>
94-
</StyledAlert>
20+
<Modal
21+
title="Thanks for using JSON Crack"
22+
opened={isExternal}
23+
onClose={() => setExternal(false)}
24+
centered
25+
size="lg"
26+
>
27+
<FocusTrap.InitialFocus />
28+
<Group>
29+
<Accordion variant="separated" w="100%">
30+
<Accordion.Item value="1">
31+
<Accordion.Control>How can I change the file size limit?</Accordion.Control>
32+
<Accordion.Panel>
33+
The main reason for the file size limit is to prevent performance issues, not to push
34+
you to upgrade. You can increase the limit by setting{" "}
35+
<Code>NEXT_PUBLIC_NODE_LIMIT</Code> in your <Code>.env</Code> file.
36+
<br />
37+
<br />
38+
If you&apos;d like to work with even larger files and unlock additional features, you
39+
can upgrade to the{" "}
40+
<Anchor
41+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
42+
rel="noopener"
43+
target="_blank"
44+
>
45+
Pro
46+
</Anchor>{" "}
47+
version.
48+
</Accordion.Panel>
49+
</Accordion.Item>
50+
<Accordion.Item value="2">
51+
<Accordion.Control>How can I stop this dialog from appearing?</Accordion.Control>
52+
<Accordion.Panel>
53+
You can disable this dialog by setting <Code>NEXT_PUBLIC_DISABLE_EXTERNAL_MODE</Code>{" "}
54+
to <Code>true</Code> in your <Code>.env.development</Code> file.
55+
<br />
56+
<br />
57+
If you want to re-enable it, simply remove or set the value to <Code>false</Code>.
58+
</Accordion.Panel>
59+
</Accordion.Item>
60+
<Accordion.Item value="3">
61+
<Accordion.Control>What are the license terms?</Accordion.Control>
62+
<Accordion.Panel>
63+
Read the full license terms on{" "}
64+
<Anchor
65+
href="https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE.md"
66+
rel="noopener"
67+
target="_blank"
68+
>
69+
GitHub
70+
</Anchor>
71+
.
72+
</Accordion.Panel>
73+
</Accordion.Item>
74+
<Accordion.Item value="4">
75+
<Accordion.Control>How do I report a bug or request a feature?</Accordion.Control>
76+
<Accordion.Panel>
77+
You can report bugs or request features by opening an issue on our{" "}
78+
<Anchor
79+
href="https://github.com/AykutSarac/jsoncrack.com/issues"
80+
rel="noopener"
81+
target="_blank"
82+
>
83+
GitHub Issues page
84+
</Anchor>
85+
.
86+
<br />
87+
<br />
88+
Please provide as much detail as possible to help us address your feedback quickly.
89+
</Accordion.Panel>
90+
</Accordion.Item>
91+
<Accordion.Item value="5">
92+
<Accordion.Control>How do I contribute to the project?</Accordion.Control>
93+
<Accordion.Panel>
94+
We welcome contributions! Visit our{" "}
95+
<Anchor
96+
href="https://github.com/AykutSarac/jsoncrack.com"
97+
rel="noopener"
98+
target="_blank"
99+
>
100+
GitHub repository
101+
</Anchor>{" "}
102+
and read the{" "}
103+
<Anchor
104+
href="https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md"
105+
rel="noopener"
106+
target="_blank"
107+
>
108+
contributing guide
109+
</Anchor>{" "}
110+
to get started.
111+
</Accordion.Panel>
112+
</Accordion.Item>
113+
<Accordion.Item value="6">
114+
<Accordion.Control>
115+
What is the difference between JSON Crack and ToDiagram?
116+
</Accordion.Control>
117+
<Accordion.Panel>
118+
JSON Crack is a free and open-source tool for visualizing JSON data. ToDiagram is the
119+
professional version that offers advanced features, higher limits, and the ability to
120+
edit data directly from diagrams. You can learn more or upgrade at{" "}
121+
<Anchor
122+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
123+
rel="noopener"
124+
target="_blank"
125+
>
126+
todiagram.com
127+
</Anchor>
128+
.
129+
</Accordion.Panel>
130+
</Accordion.Item>
131+
</Accordion>
132+
</Group>
133+
<Flex justify="center" align="center" gap="sm" mt="md">
134+
<Anchor
135+
href="https://github.com/AykutSarac/jsoncrack.com"
136+
rel="noopener"
137+
target="_blank"
138+
fz="sm"
139+
>
140+
GitHub
141+
</Anchor>
142+
<Text c="dimmed">•</Text>
143+
<Anchor href="https://todiagram.com" rel="noopener" target="_blank" fz="sm">
144+
ToDiagram
145+
</Anchor>
146+
<Text c="dimmed">•</Text>
147+
<Anchor href="https://x.com/aykutsarach" rel="noopener" target="_blank" fz="sm">
148+
Aykut Saraç (@aykutsarach)
149+
</Anchor>
150+
</Flex>
151+
</Modal>
95152
);
96153
};
97154

0 commit comments

Comments
 (0)