diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index ff987fe..af33643 100644 --- a/src/components/Button/index.tsx +++ b/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; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..3e7404a --- /dev/null +++ b/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 = () => ( + + + icon + + © {new Date().getFullYear()} JSON Crack - {pkg.version} + + + + + + + + + + + + + + + + +); \ No newline at end of file diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx index 15716c7..43564ec 100644 --- a/src/containers/Home/index.tsx +++ b/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 - Embed API + Docs ); @@ -272,45 +272,6 @@ const SponsorSection = () => ( ); -const Footer = () => ( - - - icon - - © {new Date().getFullYear()} JSON Crack - {pkg.version} - - - - - - - - - - - - - - - - -); - const Home: React.FC = () => { return ( diff --git a/src/containers/Home/styles.tsx b/src/containers/Home/styles.tsx index 9c2f108..b788cb0 100644 --- a/src/containers/Home/styles.tsx +++ b/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; diff --git a/src/containers/Modals/CloudModal/index.tsx b/src/containers/Modals/CloudModal/index.tsx index 308fd7e..50eada5 100644 --- a/src/containers/Modals/CloudModal/index.tsx +++ b/src/containers/Modals/CloudModal/index.tsx @@ -152,9 +152,11 @@ const CreateCard: React.FC = () => ( ); export const CloudModal: React.FC = ({ 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 ( diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 5bb7866..9f2625c 100644 --- a/src/pages/docs.tsx +++ b/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 ( - + <> Creating JSON Crack Embed | JSON Crack -

Embed

- -

# Fetching from URL

- -

- By adding ?json=https://catfact.ninja/fact 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:{" "} - - https://jsoncrack.com/editor?json=https://catfact.ninja/fact - -

+ + +

Documentation

+ +

# Fetching from URL

+ + + By adding ?json=https://catfact.ninja/fact 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:{" "} + + https://jsoncrack.com/editor?json=https://catfact.ninja/fact + + - - See the Pen Untitled by Aykut - Saraç (@AykutSarac) on{" "} - CodePen. - - - - -

# Embed Saved JSON

- -

- Just like fetching from URL above, you can embed saved public json by adding the json id - to "json" query{" "} - ?json=639b65c5a82efc29a24b2de2 -

- - See the Pen Untitled by Aykut - Saraç (@AykutSarac) on{" "} - CodePen. - - - - -

# Communicating with API

-

◼︎ Post Message to Embed

- -

- Communicating with the embed is possible with{" "} - - MessagePort - - , 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: - - {`{\n\ttheme: "light" | "dark",\n\tdirection: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}`} - -

+ See the Pen Untitled by Aykut + Saraç (@AykutSarac) on{" "} + CodePen. + + + + +

# Embed Saved JSON

+ + + Just like fetching from URL above, you can embed saved public json by adding the json + id to "json" query{" "} + ?json=639b65c5a82efc29a24b2de2 + + + See the Pen Untitled by Aykut + Saraç (@AykutSarac) on{" "} + CodePen. + + + + +

# Communicating with API

+

◼︎ Post Message to Embed

+ + + Communicating with the embed is possible with{" "} + + MessagePort + + , 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: + + {`{\n\ttheme: "light" | "dark",\n\tdirection: "TOP" | "RIGHT" | "DOWN" | "LEFT"\n}`} + + - - See the Pen Untitled by Aykut - Saraç (@AykutSarac) on{" "} - CodePen. - - - - -

◼︎ On Page Load

- -

- - ⚠️ Important! - iframe should be defined before the script tag - - - ⚠️ Note - postMessage should be delayed using setTimeout - - 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{" "} - setTimeout when loading data and set a time around - 500ms otherwise it won't work. -

- - See the Pen Untitled by Aykut - Saraç (@AykutSarac) on{" "} - CodePen. - - - - + + See the Pen Untitled by Aykut + Saraç (@AykutSarac) on{" "} + CodePen. + + + + +

◼︎ On Page Load

+ + + + ⚠️ Important! - iframe should be defined before the script tag + + + ⚠️ Note - postMessage should be delayed using setTimeout + + 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{" "} + setTimeout when loading data and set a time around + 500ms otherwise it won't work. + + + See the Pen Untitled by Aykut + Saraç (@AykutSarac) on{" "} + CodePen. + + + + +