mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
styling improvements
This commit is contained in:
AykutSarac
parent
35382609a4
commit
0f76b4ad4f
@ -30,7 +30,7 @@ const StyledButton = styled.button<{
|
||||
status: keyof typeof ButtonType;
|
||||
block: boolean;
|
||||
}>`
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: ${({ status, theme }) => getButtonStatus(status, theme)};
|
||||
color: #ffffff;
|
||||
|
||||
81
src/components/Footer/index.tsx
Normal file
81
src/components/Footer/index.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
import styled from "styled-components";
|
||||
import pkg from "../../../package.json";
|
||||
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 3%;
|
||||
border-top: 1px solid #b4b4b4;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
|
||||
export const StyledFooterText = styled.p`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
color: #b4b4b4;
|
||||
`;
|
||||
|
||||
|
||||
export const StyledNavLink = styled.a`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.ORANGE};
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledIconLinks = styled.div`
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
`;
|
||||
|
||||
export const Footer = () => (
|
||||
<StyledFooter>
|
||||
<StyledFooterText>
|
||||
<img width="120" src="assets/icon.png" alt="icon" loading="lazy" />
|
||||
<span>
|
||||
© {new Date().getFullYear()} JSON Crack - {pkg.version}
|
||||
</span>
|
||||
</StyledFooterText>
|
||||
<StyledIconLinks>
|
||||
<StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||
rel="external"
|
||||
target="_blank"
|
||||
aria-label="github"
|
||||
>
|
||||
<FaGithub size={26} />
|
||||
</StyledNavLink>
|
||||
|
||||
<StyledNavLink
|
||||
href="https://www.linkedin.com/in/aykutsarac/"
|
||||
rel="me"
|
||||
target="_blank"
|
||||
aria-label="linkedin"
|
||||
>
|
||||
<FaLinkedin size={26} />
|
||||
</StyledNavLink>
|
||||
|
||||
<StyledNavLink
|
||||
href="https://twitter.com/jsoncrack"
|
||||
rel="me"
|
||||
target="_blank"
|
||||
aria-label="twitter"
|
||||
>
|
||||
<FaTwitter size={26} />
|
||||
</StyledNavLink>
|
||||
</StyledIconLinks>
|
||||
</StyledFooter>
|
||||
);
|
||||
@ -3,7 +3,7 @@ import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Script from "next/script";
|
||||
import { AiOutlineRight } from "react-icons/ai";
|
||||
import { FaGithub, FaHeart, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
import { FaHeart } from "react-icons/fa";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
@ -12,12 +12,12 @@ import {
|
||||
} from "react-icons/hi";
|
||||
import { SiVisualstudiocode } from "react-icons/si";
|
||||
import { CarbonAds } from "src/components/CarbonAds";
|
||||
import { Footer } from "src/components/Footer";
|
||||
import { Producthunt } from "src/components/Producthunt";
|
||||
import { Sponsors } from "src/components/Sponsors";
|
||||
import { SupportButton } from "src/components/SupportButton";
|
||||
import { baseURL } from "src/constants/data";
|
||||
import { GoalsModal } from "src/containers/Modals/GoalsModal";
|
||||
import pkg from "../../../package.json";
|
||||
import * as Styles from "./styles";
|
||||
|
||||
const Navbar = () => (
|
||||
@ -37,7 +37,7 @@ const Navbar = () => (
|
||||
GitHub
|
||||
</Styles.StyledNavLink>
|
||||
<Link href="docs" passHref>
|
||||
<Styles.StyledNavLink>Embed API</Styles.StyledNavLink>
|
||||
<Styles.StyledNavLink>Docs</Styles.StyledNavLink>
|
||||
</Link>
|
||||
</Styles.StyledNavbar>
|
||||
);
|
||||
@ -272,45 +272,6 @@ const SponsorSection = () => (
|
||||
</Styles.StyledSponsorSection>
|
||||
);
|
||||
|
||||
const Footer = () => (
|
||||
<Styles.StyledFooter>
|
||||
<Styles.StyledFooterText>
|
||||
<img width="120" src="assets/icon.png" alt="icon" loading="lazy" />
|
||||
<span>
|
||||
© {new Date().getFullYear()} JSON Crack - {pkg.version}
|
||||
</span>
|
||||
</Styles.StyledFooterText>
|
||||
<Styles.StyledIconLinks>
|
||||
<Styles.StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||
rel="external"
|
||||
target="_blank"
|
||||
aria-label="github"
|
||||
>
|
||||
<FaGithub size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
|
||||
<Styles.StyledNavLink
|
||||
href="https://www.linkedin.com/in/aykutsarac/"
|
||||
rel="me"
|
||||
target="_blank"
|
||||
aria-label="linkedin"
|
||||
>
|
||||
<FaLinkedin size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
|
||||
<Styles.StyledNavLink
|
||||
href="https://twitter.com/jsoncrack"
|
||||
rel="me"
|
||||
target="_blank"
|
||||
aria-label="twitter"
|
||||
>
|
||||
<FaTwitter size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
</Styles.StyledIconLinks>
|
||||
</Styles.StyledFooter>
|
||||
);
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<Styles.StyledHome>
|
||||
|
||||
@ -349,33 +349,6 @@ export const StyledImage = styled.img`
|
||||
filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
|
||||
`;
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 3%;
|
||||
border-top: 1px solid #b4b4b4;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
|
||||
export const StyledFooterText = styled.p`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
color: #b4b4b4;
|
||||
`;
|
||||
|
||||
export const StyledIconLinks = styled.div`
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
${StyledNavLink} {
|
||||
color: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledHighlightedText = styled.span`
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
|
||||
@ -152,9 +152,11 @@ const CreateCard: React.FC = () => (
|
||||
);
|
||||
|
||||
export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
|
||||
const { query } = useRouter();
|
||||
const { isReady, query } = useRouter();
|
||||
|
||||
const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson());
|
||||
const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
|
||||
enabled: isReady
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledModal visible={visible} setVisible={setVisible}>
|
||||
|
||||
@ -3,6 +3,8 @@ import dynamic from "next/dynamic";
|
||||
import Head from "next/head";
|
||||
import { materialDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
|
||||
import styled from "styled-components";
|
||||
import { Footer } from "src/components/Footer";
|
||||
import { Button } from "src/components/Button";
|
||||
|
||||
const SyntaxHighlighter = dynamic(
|
||||
() => import("react-syntax-highlighter").then(c => c.PrismAsync),
|
||||
@ -29,13 +31,15 @@ const StyledContent = styled.section`
|
||||
border-radius: 6px;
|
||||
`;
|
||||
|
||||
const StyledDescription = styled.div``;
|
||||
|
||||
const StyledContentBody = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
line-height: 1.8;
|
||||
|
||||
p {
|
||||
${StyledDescription} {
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
@ -52,123 +56,128 @@ const StyledHighlight = styled.span<{ link?: boolean; alert?: boolean }>`
|
||||
margin: ${({ alert }) => alert && "8px 0"};
|
||||
`;
|
||||
|
||||
|
||||
const Docs = () => {
|
||||
return (
|
||||
<StyledPage>
|
||||
<>
|
||||
<Head>
|
||||
<title>Creating JSON Crack Embed | JSON Crack</title>
|
||||
<meta name="description" content="Embedding JSON Crack tutorial into your websites." />
|
||||
</Head>
|
||||
<h1>Embed</h1>
|
||||
<StyledContent>
|
||||
<h2># Fetching from URL</h2>
|
||||
<StyledContentBody>
|
||||
<p>
|
||||
By adding <StyledHighlight>?json=https://catfact.ninja/fact</StyledHighlight> query at
|
||||
the end of iframe src you will be able to fetch from URL at widgets without additional
|
||||
scripts. This applies to editor page as well, the following link will fetch the url at
|
||||
the editor:{" "}
|
||||
<StyledHighlight
|
||||
as="a"
|
||||
href="https://jsoncrack.com/editor?json=https://catfact.ninja/fact"
|
||||
link
|
||||
>
|
||||
https://jsoncrack.com/editor?json=https://catfact.ninja/fact
|
||||
</StyledHighlight>
|
||||
</p>
|
||||
<StyledPage>
|
||||
<Button href="/" link status="SECONDARY">< Go Back</Button>
|
||||
<h1>Documentation</h1>
|
||||
<StyledContent>
|
||||
<h2># Fetching from URL</h2>
|
||||
<StyledContentBody>
|
||||
<StyledDescription>
|
||||
By adding <StyledHighlight>?json=https://catfact.ninja/fact</StyledHighlight> query at
|
||||
the end of iframe src you will be able to fetch from URL at widgets without additional
|
||||
scripts. This applies to editor page as well, the following link will fetch the url at
|
||||
the editor:{" "}
|
||||
<StyledHighlight
|
||||
as="a"
|
||||
href="https://jsoncrack.com/editor?json=https://catfact.ninja/fact"
|
||||
link
|
||||
>
|
||||
https://jsoncrack.com/editor?json=https://catfact.ninja/fact
|
||||
</StyledHighlight>
|
||||
</StyledDescription>
|
||||
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/KKBpWVR?default-tab=html%2Cresult"
|
||||
loading="eager"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/KKBpWVR">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h2># Embed Saved JSON</h2>
|
||||
<StyledContentBody>
|
||||
<p>
|
||||
Just like fetching from URL above, you can embed saved public json by adding the json id
|
||||
to "json" query{" "}
|
||||
<StyledHighlight>?json=639b65c5a82efc29a24b2de2</StyledHighlight>
|
||||
</p>
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/vYaORgM?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/vYaORgM">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h2># Communicating with API</h2>
|
||||
<h3>◼︎ Post Message to Embed</h3>
|
||||
<StyledContentBody>
|
||||
<p>
|
||||
Communicating with the embed is possible with{" "}
|
||||
<StyledHighlight
|
||||
as="a"
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage"
|
||||
link
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/KKBpWVR?default-tab=html%2Cresult"
|
||||
loading="eager"
|
||||
>
|
||||
MessagePort
|
||||
</StyledHighlight>
|
||||
, you should pass an object consist of "json" and "options" key
|
||||
where json is a string and options is an object that may contain the following:
|
||||
<SyntaxHighlighter language="markdown" style={materialDark} showLineNumbers={true}>
|
||||
{`{\n\ttheme: "light" | "dark",\n\tdirection: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}`}
|
||||
</SyntaxHighlighter>
|
||||
</p>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/KKBpWVR">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h2># Embed Saved JSON</h2>
|
||||
<StyledContentBody>
|
||||
<StyledDescription>
|
||||
Just like fetching from URL above, you can embed saved public json by adding the json
|
||||
id to "json" query{" "}
|
||||
<StyledHighlight>?json=639b65c5a82efc29a24b2de2</StyledHighlight>
|
||||
</StyledDescription>
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/vYaORgM?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/vYaORgM">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h2># Communicating with API</h2>
|
||||
<h3>◼︎ Post Message to Embed</h3>
|
||||
<StyledContentBody>
|
||||
<StyledDescription>
|
||||
Communicating with the embed is possible with{" "}
|
||||
<StyledHighlight
|
||||
as="a"
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage"
|
||||
link
|
||||
>
|
||||
MessagePort
|
||||
</StyledHighlight>
|
||||
, you should pass an object consist of "json" and "options" key
|
||||
where json is a string and options is an object that may contain the following:
|
||||
<SyntaxHighlighter language="markdown" style={materialDark} showLineNumbers={true}>
|
||||
{`{\n\ttheme: "light" | "dark",\n\tdirection: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}`}
|
||||
</SyntaxHighlighter>
|
||||
</StyledDescription>
|
||||
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/rNrVyWP?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/rNrVyWP">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h3>◼︎ On Page Load</h3>
|
||||
<StyledContentBody>
|
||||
<p>
|
||||
<StyledHighlight as="div" alert>
|
||||
⚠️ <b>Important!</b> - iframe should be defined before the script tag
|
||||
</StyledHighlight>
|
||||
<StyledHighlight as="div" alert>
|
||||
⚠️ <b>Note</b> - postMessage should be delayed using setTimeout
|
||||
</StyledHighlight>
|
||||
To display JSON on load event, you should post json into iframe using it's onload
|
||||
event like in the example. Make sure to use{" "}
|
||||
<StyledHighlight>setTimeout</StyledHighlight> when loading data and set a time around
|
||||
500ms otherwise it won't work.
|
||||
</p>
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/QWBbpqx?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/QWBbpqx">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
</StyledPage>
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/rNrVyWP?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/rNrVyWP">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
<StyledContent>
|
||||
<h3>◼︎ On Page Load</h3>
|
||||
<StyledContentBody>
|
||||
<StyledDescription>
|
||||
<StyledHighlight as="div" alert>
|
||||
⚠️ <b>Important!</b> - iframe should be defined before the script tag
|
||||
</StyledHighlight>
|
||||
<StyledHighlight as="div" alert>
|
||||
⚠️ <b>Note</b> - postMessage should be delayed using setTimeout
|
||||
</StyledHighlight>
|
||||
To display JSON on load event, you should post json into iframe using it's onload
|
||||
event like in the example. Make sure to use{" "}
|
||||
<StyledHighlight>setTimeout</StyledHighlight> when loading data and set a time around
|
||||
500ms otherwise it won't work.
|
||||
</StyledDescription>
|
||||
<StyledFrame
|
||||
scrolling="no"
|
||||
title="Untitled"
|
||||
src="https://codepen.io/AykutSarac/embed/QWBbpqx?default-tab=html%2Cresult"
|
||||
loading="lazy"
|
||||
>
|
||||
See the Pen <a href="https://codepen.io/AykutSarac/pen/QWBbpqx">Untitled</a> by Aykut
|
||||
Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</StyledFrame>
|
||||
</StyledContentBody>
|
||||
</StyledContent>
|
||||
</StyledPage>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -47,11 +47,11 @@ const useJson = create<JsonStates & JsonActions>()((set, get) => ({
|
||||
const jsonStr = JSON.stringify(json, null, 2);
|
||||
|
||||
useGraph.getState().setGraph(jsonStr);
|
||||
set({ json: jsonStr, loading: false });
|
||||
return set({ json: jsonStr, loading: false });
|
||||
} catch (error) {
|
||||
useGraph.getState().setGraph(defaultJson);
|
||||
set({ json: defaultJson, loading: false });
|
||||
toast.error('Failed to fetch JSON from URL!');
|
||||
toast.error("Failed to fetch JSON from URL!");
|
||||
}
|
||||
} else if (jsonId) {
|
||||
const { data, errors } = await altogic.endpoint.get(`json/${jsonId}`);
|
||||
@ -67,10 +67,10 @@ const useJson = create<JsonStates & JsonActions>()((set, get) => ({
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
useGraph.getState().setGraph(defaultJson);
|
||||
set({ json: defaultJson, loading: false });
|
||||
}
|
||||
|
||||
useGraph.getState().setGraph(defaultJson);
|
||||
set({ json: defaultJson, loading: false });
|
||||
},
|
||||
setJson: json => {
|
||||
useGraph.getState().setGraph(json);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user