styling improvements

src/components/Button/index.tsx

@@ -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;

src/components/Footer/index.tsx

@@ -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>
+);

src/containers/Home/index.tsx

@@ -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>

src/containers/Home/styles.tsx

@@ -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;

src/containers/Modals/CloudModal/index.tsx

@@ -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}>

src/pages/docs.tsx

@@ -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">&lt; 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 &quot;json&quot; 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 &quot;json&quot; and &quot;options&quot; 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 &quot;json&quot; 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 &quot;json&quot; and &quot;options&quot; 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&apos;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&apos;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&apos;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&apos;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 />
+    </>
   );
 };
 

src/store/useJson.tsx

@@ -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);