GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update widget structure

Browse Source
This commit is contained in:
AykutSarac 2022-09-27 22:05:56 +03:00
parent 2cfb49dab9
commit 1c6875b85d
3 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/containers/Home/index.tsx
View File

@ -176,9 +176,10 @@ const EmbedSection = () => (
visitors, blog readers or anybody else!
</Styles.StyledMinorTitle>
</Styles.StyledSectionArea>
<div>
<Styles.StyledIframge src="https://jsoncrack.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"></Styles.StyledIframge>
</div>
<Styles.StyledIframge
src="https://jsoncrack.com/widget"
data-json="%7B%0A%20%20%22squadName%22%3A%20%22aykut%20sara%C3%A7%22%2C%0A%20%20%22homeTown%22%3A%20%22Metro%20City%22%2C%0A%20%20%22formed%22%3A%202016%2C%0A%20%20%22secretBase%22%3A%20%22Super%20tower%22%2C%0A%20%20%22active%22%3A%20true%2C%0A%20%20%22members%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Molecule%20Man%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2029%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Dan%20Jukes%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Radiation%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Turning%20tiny%22%2C%0A%20%20%20%20%20%20%20%20%22Radiation%20blast%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Madame%20Uppercut%22%2C%0A%20%20%20%20%20%20%22age%22%3A%2039%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Jane%20Wilson%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Million%20tonne%20punch%22%2C%0A%20%20%20%20%20%20%20%20%22Damage%20resistance%22%2C%0A%20%20%20%20%20%20%20%20%22Superhuman%20reflexes%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22name%22%3A%20%22Eternal%20Flame%22%2C%0A%20%20%20%20%20%20%22age%22%3A%201000000%2C%0A%20%20%20%20%20%20%22secretIdentity%22%3A%20%22Unknown%22%2C%0A%20%20%20%20%20%20%22powers%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22Immortality%22%2C%0A%20%20%20%20%20%20%20%20%22Heat%20Immunity%22%2C%0A%20%20%20%20%20%20%20%20%22Inferno%22%2C%0A%20%20%20%20%20%20%20%20%22Teleportation%22%2C%0A%20%20%20%20%20%20%20%20%22Interdimensional%20travel%22%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D"
></Styles.StyledIframge>
</Styles.StyledSection>
);

22
src/containers/Modals/ShareModal/index.tsx
View File

@ -47,7 +47,9 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
const json = useConfig(state => state.json);
const [encodedJson, setEncodedJson] = React.useState("");
const embedText = `<iframe src="${baseURL}/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
const embedText = `<iframe src="${baseURL}/widget" data-json="${encodeURIComponent(
json
)}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
const shareURL = `${baseURL}/editor?json=${encodedJson}`;
React.useEffect(() => {
@ -88,17 +90,17 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
</Button>
</StyledFlex>
</StyledContainer>
<StyledContainer>
Embed into your website
<StyledFlex>
<Input value={embedText} type="url" readOnly />
<Button status="SECONDARY" onClick={() => handleShare(embedText)}>
Copy
</Button>
</StyledFlex>
</StyledContainer>
</>
)}
<StyledContainer>
Embed into your website
<StyledFlex>
<Input value={embedText} type="url" readOnly />
<Button status="SECONDARY" onClick={() => handleShare(embedText)}>
Copy
</Button>
</StyledFlex>
</StyledContainer>
</Modal.Content>
<Modal.Controls setVisible={setVisible}></Modal.Controls>
</Modal>

24
src/pages/Widget/index.tsx
View File

@ -1,7 +1,6 @@
import React from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/router";
import { decompress } from "compress-json";
import { baseURL } from "src/constants/data";
import useGraph from "src/hooks/store/useGraph";
import { isValidJson } from "src/utils/isValidJson";
@ -38,17 +37,22 @@ function inIframe() {
}
const WidgetPage = () => {
const { query, push } = useRouter();
const { push } = useRouter();
const [json, setJson] = React.useState<string | null>(null);
const setGraphValue = useGraph(state => state.setGraphValue);
React.useEffect(() => {
if (query.json) {
const jsonURI = decodeURIComponent(query.json as string);
const dataJson = window.self.frameElement?.getAttribute("data-json");
if (dataJson) setJson(dataJson);
}, []);
React.useEffect(() => {
if (json) {
const jsonURI = decodeURIComponent(json);
const isJsonValid = isValidJson(jsonURI);
if (isJsonValid) {
const jsonDecoded = decompress(JSON.parse(isJsonValid));
const { nodes, edges } = parser(JSON.stringify(jsonDecoded));
const { nodes, edges } = parser(jsonURI);
setGraphValue("nodes", nodes);
setGraphValue("edges", edges);
@ -56,16 +60,12 @@ const WidgetPage = () => {
}
if (!inIframe()) push("/");
}, [push, query.json, setGraphValue]);
}, [push, json, setGraphValue]);
return (
<>
<Graph isWidget />
<StyledAttribute
href={`${baseURL}/editor?json=${query.json}`}
target="_blank"
rel="noreferrer"
>
<StyledAttribute href={`${baseURL}/editor`} target="_blank" rel="noreferrer">
jsoncrack.com
</StyledAttribute>
</>