mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-20 05:12:54 +08:00
lint
This commit is contained in:
AykutSarac
parent
3a08cf4545
commit
08dd82d3af
@ -1,309 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import dynamic from "next/dynamic";
|
|
||||||
import Head from "next/head";
|
|
||||||
import Link from "next/link";
|
|
||||||
import Script from "next/script";
|
|
||||||
import { Button } from "@mantine/core";
|
|
||||||
import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai";
|
|
||||||
import {
|
|
||||||
HiCursorClick,
|
|
||||||
HiLightningBolt,
|
|
||||||
HiOutlineDownload,
|
|
||||||
HiOutlineSearchCircle,
|
|
||||||
} from "react-icons/hi";
|
|
||||||
import { IoHeart } from "react-icons/io5";
|
|
||||||
import { SiVisualstudiocode } from "react-icons/si";
|
|
||||||
import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus";
|
|
||||||
import { CarbonAds } from "src/components/CarbonAds";
|
|
||||||
import { Sponsors } from "src/components/Sponsors";
|
|
||||||
import { baseURL } from "src/constants/data";
|
|
||||||
import { TABS } from "src/constants/previewSection";
|
|
||||||
import { Footer } from "src/layout/Footer";
|
|
||||||
import { Navbar } from "src/layout/Navbar";
|
|
||||||
import { Producthunt } from "src/layout/Producthunt";
|
|
||||||
import * as Styles from "./styles";
|
|
||||||
|
|
||||||
const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
|
|
||||||
ssr: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const HeroSection = () => (
|
|
||||||
<Styles.StyledHeroSection id="main">
|
|
||||||
<Styles.StyledTitle>
|
|
||||||
<Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
|
|
||||||
</Styles.StyledTitle>
|
|
||||||
<Styles.StyledSubTitle>
|
|
||||||
Seamlessly visualize your JSON data{" "}
|
|
||||||
<Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
|
|
||||||
</Styles.StyledSubTitle>
|
|
||||||
<Link href="/editor">
|
|
||||||
<Button color="grape" size="lg">
|
|
||||||
GO TO EDITOR
|
|
||||||
<AiOutlineRight strokeWidth="80" />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<Styles.StyledButtonWrapper>
|
|
||||||
<Link href="https://github.com/sponsors/AykutSarac" target="_blank" rel="noreferrer">
|
|
||||||
<Button color="red" size="md" variant="outline" rightIcon={<IoHeart />}>
|
|
||||||
SPONSOR
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
<Link href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">
|
|
||||||
<Button color="blue" size="md" variant="outline" rightIcon={<SiVisualstudiocode />}>
|
|
||||||
GET IT ON VS CODE
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</Styles.StyledButtonWrapper>
|
|
||||||
</Styles.StyledHeroSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const PreviewSection = () => {
|
|
||||||
const [currentTab, setCurrentTab] = React.useState(0);
|
|
||||||
const [loaded, setLoaded] = React.useState(false);
|
|
||||||
const widgetRef = React.useRef<HTMLIFrameElement>(null);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
const eventFn = (event: MessageEvent) => {
|
|
||||||
if (event.source === widgetRef.current?.contentWindow) {
|
|
||||||
setLoaded(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("message", eventFn, false);
|
|
||||||
return () => window.removeEventListener("message", eventFn);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (loaded && widgetRef.current) {
|
|
||||||
const message = { json: TABS[currentTab].json };
|
|
||||||
widgetRef.current.contentWindow?.postMessage(message, "*");
|
|
||||||
}
|
|
||||||
}, [currentTab, loaded]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Styles.StyledPreviewSection>
|
|
||||||
<Styles.StyledHighlightWrapper>
|
|
||||||
<Styles.StyledTabsWrapper>
|
|
||||||
{TABS.map(tab => (
|
|
||||||
<Styles.StyledTab
|
|
||||||
active={tab.id === currentTab}
|
|
||||||
onClick={() => setCurrentTab(tab.id)}
|
|
||||||
key={tab.id}
|
|
||||||
>
|
|
||||||
{tab.name}
|
|
||||||
</Styles.StyledTab>
|
|
||||||
))}
|
|
||||||
</Styles.StyledTabsWrapper>
|
|
||||||
<SyntaxHighlighter
|
|
||||||
style={vscDarkPlus}
|
|
||||||
customStyle={{
|
|
||||||
fontSize: "16px",
|
|
||||||
width: "100%",
|
|
||||||
height: "440px",
|
|
||||||
margin: "0",
|
|
||||||
borderTop: "2px solid #4D4D4D",
|
|
||||||
}}
|
|
||||||
language="json"
|
|
||||||
showLineNumbers
|
|
||||||
>
|
|
||||||
{TABS[currentTab].json}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
</Styles.StyledHighlightWrapper>
|
|
||||||
|
|
||||||
<Styles.StyledPreviewFrame
|
|
||||||
ref={widgetRef}
|
|
||||||
title="Preview Embed"
|
|
||||||
id="jcPreview"
|
|
||||||
src={`${baseURL}/widget`}
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</Styles.StyledPreviewSection>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const FeaturesSection = () => (
|
|
||||||
<Styles.StyledFeaturesSection id="features">
|
|
||||||
<Styles.StyledSectionCard>
|
|
||||||
<Styles.StyledCardIcon>
|
|
||||||
<HiCursorClick size={50} color="#3BA55D" />
|
|
||||||
</Styles.StyledCardIcon>
|
|
||||||
<Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
|
|
||||||
<Styles.StyledCardDescription>
|
|
||||||
We believe that powerful software doesn't have to be difficult to use. That's why
|
|
||||||
we've designed our app to be as intuitive and easy-to-use as possible. You can quickly
|
|
||||||
and easily load your JSON data and start exploring and analyzing it right away!
|
|
||||||
</Styles.StyledCardDescription>
|
|
||||||
</Styles.StyledSectionCard>
|
|
||||||
|
|
||||||
<Styles.StyledSectionCard>
|
|
||||||
<Styles.StyledCardIcon>
|
|
||||||
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
|
||||||
</Styles.StyledCardIcon>
|
|
||||||
<Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
|
|
||||||
<Styles.StyledCardDescription>
|
|
||||||
Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
|
|
||||||
looking for into search input and it will take you to each node with matching result
|
|
||||||
highlighting the line to understand better!
|
|
||||||
</Styles.StyledCardDescription>
|
|
||||||
</Styles.StyledSectionCard>
|
|
||||||
|
|
||||||
<Styles.StyledSectionCard>
|
|
||||||
<Styles.StyledCardIcon>
|
|
||||||
<HiOutlineDownload size={50} color="#DA2877" />
|
|
||||||
</Styles.StyledCardIcon>
|
|
||||||
<Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
|
|
||||||
<Styles.StyledCardDescription>
|
|
||||||
Download the graph to your local machine and use it wherever you want, to your blogs,
|
|
||||||
website or make it a poster and paste to the wall. Who wouldn't want to see a JSON
|
|
||||||
Crack graph onto their wall, eh?
|
|
||||||
</Styles.StyledCardDescription>
|
|
||||||
</Styles.StyledSectionCard>
|
|
||||||
|
|
||||||
<Styles.StyledSectionCard>
|
|
||||||
<Styles.StyledCardIcon>
|
|
||||||
<HiLightningBolt size={50} color="#F5E027" />
|
|
||||||
</Styles.StyledCardIcon>
|
|
||||||
<Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
|
|
||||||
<Styles.StyledCardDescription>
|
|
||||||
With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and
|
|
||||||
directly view through the graphs. Also there's a JSON validator above of it to make
|
|
||||||
sure there is no type error.
|
|
||||||
</Styles.StyledCardDescription>
|
|
||||||
</Styles.StyledSectionCard>
|
|
||||||
</Styles.StyledFeaturesSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const GitHubSection = () => (
|
|
||||||
<Styles.StyledSection id="github" reverse>
|
|
||||||
<Styles.StyledTwitterQuote>
|
|
||||||
<blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
|
|
||||||
<p lang="en" dir="ltr">
|
|
||||||
Looking to understand or explore some JSON? Just paste or upload to visualize it as a
|
|
||||||
graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
|
|
||||||
<br />
|
|
||||||
Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
|
|
||||||
@aykutsarach
|
|
||||||
</a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
|
|
||||||
</p>
|
|
||||||
— GitHub (@github){" "}
|
|
||||||
<a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
|
|
||||||
April 27, 2022
|
|
||||||
</a>
|
|
||||||
</blockquote>{" "}
|
|
||||||
<Script strategy="lazyOnload" src="https://platform.twitter.com/widgets.js"></Script>
|
|
||||||
</Styles.StyledTwitterQuote>
|
|
||||||
<Styles.StyledSectionArea>
|
|
||||||
<Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
|
|
||||||
<Styles.StyledMinorTitle>
|
|
||||||
At JSON Crack, we believe in the power of open source software and the communities that
|
|
||||||
support it. That's why we're proud to be part of the open source community and to
|
|
||||||
contribute to the development and growth of open source tools and technologies.
|
|
||||||
<br />
|
|
||||||
<br /> As part of our commitment to the open source community, we've made our app
|
|
||||||
freely available to anyone who wants to use it, and we welcome contributions from anyone
|
|
||||||
who's interested in helping to improve it. Whether you're a developer, a data
|
|
||||||
scientist, or just someone who's passionate about open source, we'd love to have
|
|
||||||
you join our community and help us make JSON Crack the best it can be.
|
|
||||||
<br />
|
|
||||||
<br /> So why not join us and become part of the JSON Crack open source community today? We
|
|
||||||
can't wait to see what we can accomplish together!
|
|
||||||
</Styles.StyledMinorTitle>
|
|
||||||
<Button
|
|
||||||
w="fit-content"
|
|
||||||
color="grape"
|
|
||||||
size="md"
|
|
||||||
component="a"
|
|
||||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
|
||||||
leftIcon={<AiTwotoneStar />}
|
|
||||||
>
|
|
||||||
STAR ON GITHUB
|
|
||||||
</Button>
|
|
||||||
</Styles.StyledSectionArea>
|
|
||||||
</Styles.StyledSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const EmbedSection = () => (
|
|
||||||
<Styles.StyledSection id="embed">
|
|
||||||
<Styles.StyledSectionArea>
|
|
||||||
<Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
|
|
||||||
<Styles.StyledMinorTitle>
|
|
||||||
JSON Crack provides users with the necessary code to embed the app into a website easily
|
|
||||||
using an iframe. This code can be easily copied and pasted into the desired location on the
|
|
||||||
website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
|
|
||||||
<br />
|
|
||||||
<br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
|
|
||||||
the website. This can be useful for a variety of purposes, such as quickly checking the
|
|
||||||
structure of a JSON file or verifying the data contained within it. JSON Crack's
|
|
||||||
intuitive interface makes it easy to navigate and understand even complex JSON data, making
|
|
||||||
it a valuable tool for anyone working with JSON.
|
|
||||||
</Styles.StyledMinorTitle>
|
|
||||||
<Button w="fit-content" size="md" component="a" href="/docs">
|
|
||||||
LEARN TO EMBED
|
|
||||||
</Button>
|
|
||||||
</Styles.StyledSectionArea>
|
|
||||||
<div>
|
|
||||||
<Styles.StyledFrame
|
|
||||||
title="Example Embed"
|
|
||||||
src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
|
|
||||||
loading="lazy"
|
|
||||||
></Styles.StyledFrame>
|
|
||||||
</div>
|
|
||||||
</Styles.StyledSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const SupportSection = () => (
|
|
||||||
<Styles.StyledPaidSection>
|
|
||||||
<Styles.StyledProducthunt>
|
|
||||||
<Styles.StyledSubTitle>
|
|
||||||
Support JSON Crack at
|
|
||||||
<br />
|
|
||||||
<Styles.StyledHighlightedText>Product Hunt</Styles.StyledHighlightedText>
|
|
||||||
</Styles.StyledSubTitle>
|
|
||||||
<Producthunt />
|
|
||||||
</Styles.StyledProducthunt>
|
|
||||||
<Styles.StyledAffiliate>
|
|
||||||
<Styles.StyledSubTitle>Affiliate</Styles.StyledSubTitle>
|
|
||||||
<CarbonAds />
|
|
||||||
</Styles.StyledAffiliate>
|
|
||||||
</Styles.StyledPaidSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const SponsorSection = () => (
|
|
||||||
<Styles.StyledSponsorSection id="sponsor">
|
|
||||||
<Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
|
|
||||||
<Styles.StyledMinorTitle>
|
|
||||||
Your supports make JSON Crack possible to continue and accessible for everyone!
|
|
||||||
</Styles.StyledMinorTitle>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
component="a"
|
|
||||||
color="green"
|
|
||||||
href="https://github.com/sponsors/AykutSarac"
|
|
||||||
rel="external"
|
|
||||||
>
|
|
||||||
Become A Sponsor!
|
|
||||||
</Button>
|
|
||||||
<Sponsors />
|
|
||||||
</Styles.StyledSponsorSection>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<Styles.StyledHome>
|
|
||||||
<Head>
|
|
||||||
<title>JSON Crack - Crack your data into pieces</title>
|
|
||||||
</Head>
|
|
||||||
<Navbar />
|
|
||||||
<HeroSection />
|
|
||||||
<PreviewSection />
|
|
||||||
<FeaturesSection />
|
|
||||||
<SupportSection />
|
|
||||||
<GitHubSection />
|
|
||||||
<EmbedSection />
|
|
||||||
<SponsorSection />
|
|
||||||
<Footer />
|
|
||||||
</Styles.StyledHome>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
|
||||||
@ -1,136 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import styled from "styled-components";
|
|
||||||
import { Button } from "@mantine/core";
|
|
||||||
|
|
||||||
const StyledSectionBody = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
gap: 50px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: rgba(181, 116, 214, 0.23);
|
|
||||||
width: 80%;
|
|
||||||
margin: 5% auto 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 50px;
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: 1fr 1fr;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingCard = styled.div<{ premium?: boolean }>`
|
|
||||||
padding: 6px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
${({ premium }) =>
|
|
||||||
premium
|
|
||||||
? `
|
|
||||||
background: rgba(255, 5, 214, 0.19);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
-webkit-backdrop-filter: blur(5px);
|
|
||||||
border: 1px solid rgba(255, 5, 214, 0.74);`
|
|
||||||
: `background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
-webkit-backdrop-filter: blur(5px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingCardTitle = styled.h2`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 24px;
|
|
||||||
gap: 6px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingCardPrice = styled.h3`
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 24px;
|
|
||||||
color: ${({ theme }) => theme.SILVER};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingCardDetails = styled.ul`
|
|
||||||
color: ${({ theme }) => theme.FULL_WHITE};
|
|
||||||
line-height: 2.3;
|
|
||||||
padding: 20px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingCardDetailsItem = styled.li`
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledPricingSection = styled.section`
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const PricingCards = () => {
|
|
||||||
return (
|
|
||||||
<StyledPricingSection>
|
|
||||||
<h1>Unlock Full Potential of JSON Crack</h1>
|
|
||||||
<StyledSectionBody>
|
|
||||||
<StyledPricingCard>
|
|
||||||
<StyledPricingCardTitle>Free</StyledPricingCardTitle>
|
|
||||||
<StyledPricingCardDetails>
|
|
||||||
<StyledPricingCardDetailsItem>Store up to 15 files</StyledPricingCardDetailsItem>
|
|
||||||
<StyledPricingCardDetailsItem>
|
|
||||||
Create short-links for saved JSON files
|
|
||||||
</StyledPricingCardDetailsItem>
|
|
||||||
<StyledPricingCardDetailsItem>Embed saved JSON instantly</StyledPricingCardDetailsItem>
|
|
||||||
</StyledPricingCardDetails>
|
|
||||||
</StyledPricingCard>
|
|
||||||
<StyledPricingCard premium>
|
|
||||||
<StyledPricingCardTitle>Premium</StyledPricingCardTitle>
|
|
||||||
<StyledPricingCardPrice>$5/mo</StyledPricingCardPrice>
|
|
||||||
<StyledPricingCardDetails>
|
|
||||||
<StyledPricingCardDetailsItem>
|
|
||||||
Create and share up to 200 files
|
|
||||||
</StyledPricingCardDetailsItem>
|
|
||||||
<StyledPricingCardDetailsItem>
|
|
||||||
Get access to JSON Crack API to generate JSON remotely
|
|
||||||
</StyledPricingCardDetailsItem>
|
|
||||||
<StyledPricingCardDetailsItem>Everything in previous tier</StyledPricingCardDetailsItem>
|
|
||||||
</StyledPricingCardDetails>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="gradient"
|
|
||||||
gradient={{ from: "pink", to: "red", deg: 105 }}
|
|
||||||
component="a"
|
|
||||||
href="https://www.patreon.com/herowand"
|
|
||||||
target="_blank"
|
|
||||||
fullWidth
|
|
||||||
style={{
|
|
||||||
border: "2px solid black",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
GET PREMIUM
|
|
||||||
</Button>
|
|
||||||
</StyledPricingCard>
|
|
||||||
</StyledSectionBody>
|
|
||||||
</StyledPricingSection>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,12 +1,311 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import Head from "next/head";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Script from "next/script";
|
||||||
import { ThemeProvider } from "styled-components";
|
import { ThemeProvider } from "styled-components";
|
||||||
|
import { Button } from "@mantine/core";
|
||||||
|
import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai";
|
||||||
|
import {
|
||||||
|
HiCursorClick,
|
||||||
|
HiLightningBolt,
|
||||||
|
HiOutlineDownload,
|
||||||
|
HiOutlineSearchCircle,
|
||||||
|
} from "react-icons/hi";
|
||||||
|
import { IoHeart } from "react-icons/io5";
|
||||||
|
import { SiVisualstudiocode } from "react-icons/si";
|
||||||
|
import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus";
|
||||||
|
import { CarbonAds } from "src/components/CarbonAds";
|
||||||
|
import { Sponsors } from "src/components/Sponsors";
|
||||||
|
import { baseURL } from "src/constants/data";
|
||||||
|
import { TABS } from "src/constants/previewSection";
|
||||||
import { darkTheme } from "src/constants/theme";
|
import { darkTheme } from "src/constants/theme";
|
||||||
import Home from "src/containers/Home";
|
import * as Styles from "src/containers/Home/styles";
|
||||||
|
import { Footer } from "src/layout/Footer";
|
||||||
|
import { Navbar } from "src/layout/Navbar";
|
||||||
|
import { Producthunt } from "src/layout/Producthunt";
|
||||||
|
|
||||||
|
const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const HeroSection = () => (
|
||||||
|
<Styles.StyledHeroSection id="main">
|
||||||
|
<Styles.StyledTitle>
|
||||||
|
<Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
|
||||||
|
</Styles.StyledTitle>
|
||||||
|
<Styles.StyledSubTitle>
|
||||||
|
Seamlessly visualize your JSON data{" "}
|
||||||
|
<Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
|
||||||
|
</Styles.StyledSubTitle>
|
||||||
|
<Link href="/editor">
|
||||||
|
<Button color="grape" size="lg">
|
||||||
|
GO TO EDITOR
|
||||||
|
<AiOutlineRight strokeWidth="80" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Styles.StyledButtonWrapper>
|
||||||
|
<Link href="https://github.com/sponsors/AykutSarac" target="_blank" rel="noreferrer">
|
||||||
|
<Button color="red" size="md" variant="outline" rightIcon={<IoHeart />}>
|
||||||
|
SPONSOR
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">
|
||||||
|
<Button color="blue" size="md" variant="outline" rightIcon={<SiVisualstudiocode />}>
|
||||||
|
GET IT ON VS CODE
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</Styles.StyledButtonWrapper>
|
||||||
|
</Styles.StyledHeroSection>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PreviewSection = () => {
|
||||||
|
const [currentTab, setCurrentTab] = React.useState(0);
|
||||||
|
const [loaded, setLoaded] = React.useState(false);
|
||||||
|
const widgetRef = React.useRef<HTMLIFrameElement>(null);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const eventFn = (event: MessageEvent) => {
|
||||||
|
if (event.source === widgetRef.current?.contentWindow) {
|
||||||
|
setLoaded(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("message", eventFn, false);
|
||||||
|
return () => window.removeEventListener("message", eventFn);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (loaded && widgetRef.current) {
|
||||||
|
const message = { json: TABS[currentTab].json };
|
||||||
|
widgetRef.current.contentWindow?.postMessage(message, "*");
|
||||||
|
}
|
||||||
|
}, [currentTab, loaded]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Styles.StyledPreviewSection>
|
||||||
|
<Styles.StyledHighlightWrapper>
|
||||||
|
<Styles.StyledTabsWrapper>
|
||||||
|
{TABS.map(tab => (
|
||||||
|
<Styles.StyledTab
|
||||||
|
active={tab.id === currentTab}
|
||||||
|
onClick={() => setCurrentTab(tab.id)}
|
||||||
|
key={tab.id}
|
||||||
|
>
|
||||||
|
{tab.name}
|
||||||
|
</Styles.StyledTab>
|
||||||
|
))}
|
||||||
|
</Styles.StyledTabsWrapper>
|
||||||
|
<SyntaxHighlighter
|
||||||
|
style={vscDarkPlus}
|
||||||
|
customStyle={{
|
||||||
|
fontSize: "16px",
|
||||||
|
width: "100%",
|
||||||
|
height: "440px",
|
||||||
|
margin: "0",
|
||||||
|
borderTop: "2px solid #4D4D4D",
|
||||||
|
}}
|
||||||
|
language="json"
|
||||||
|
showLineNumbers
|
||||||
|
>
|
||||||
|
{TABS[currentTab].json}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</Styles.StyledHighlightWrapper>
|
||||||
|
|
||||||
|
<Styles.StyledPreviewFrame
|
||||||
|
ref={widgetRef}
|
||||||
|
title="Preview Embed"
|
||||||
|
id="jcPreview"
|
||||||
|
src={`${baseURL}/widget`}
|
||||||
|
loading="eager"
|
||||||
|
/>
|
||||||
|
</Styles.StyledPreviewSection>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FeaturesSection = () => (
|
||||||
|
<Styles.StyledFeaturesSection id="features">
|
||||||
|
<Styles.StyledSectionCard>
|
||||||
|
<Styles.StyledCardIcon>
|
||||||
|
<HiCursorClick size={50} color="#3BA55D" />
|
||||||
|
</Styles.StyledCardIcon>
|
||||||
|
<Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
|
||||||
|
<Styles.StyledCardDescription>
|
||||||
|
We believe that powerful software doesn't have to be difficult to use. That's why
|
||||||
|
we've designed our app to be as intuitive and easy-to-use as possible. You can quickly
|
||||||
|
and easily load your JSON data and start exploring and analyzing it right away!
|
||||||
|
</Styles.StyledCardDescription>
|
||||||
|
</Styles.StyledSectionCard>
|
||||||
|
|
||||||
|
<Styles.StyledSectionCard>
|
||||||
|
<Styles.StyledCardIcon>
|
||||||
|
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
||||||
|
</Styles.StyledCardIcon>
|
||||||
|
<Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
|
||||||
|
<Styles.StyledCardDescription>
|
||||||
|
Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
|
||||||
|
looking for into search input and it will take you to each node with matching result
|
||||||
|
highlighting the line to understand better!
|
||||||
|
</Styles.StyledCardDescription>
|
||||||
|
</Styles.StyledSectionCard>
|
||||||
|
|
||||||
|
<Styles.StyledSectionCard>
|
||||||
|
<Styles.StyledCardIcon>
|
||||||
|
<HiOutlineDownload size={50} color="#DA2877" />
|
||||||
|
</Styles.StyledCardIcon>
|
||||||
|
<Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
|
||||||
|
<Styles.StyledCardDescription>
|
||||||
|
Download the graph to your local machine and use it wherever you want, to your blogs,
|
||||||
|
website or make it a poster and paste to the wall. Who wouldn't want to see a JSON
|
||||||
|
Crack graph onto their wall, eh?
|
||||||
|
</Styles.StyledCardDescription>
|
||||||
|
</Styles.StyledSectionCard>
|
||||||
|
|
||||||
|
<Styles.StyledSectionCard>
|
||||||
|
<Styles.StyledCardIcon>
|
||||||
|
<HiLightningBolt size={50} color="#F5E027" />
|
||||||
|
</Styles.StyledCardIcon>
|
||||||
|
<Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
|
||||||
|
<Styles.StyledCardDescription>
|
||||||
|
With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and
|
||||||
|
directly view through the graphs. Also there's a JSON validator above of it to make
|
||||||
|
sure there is no type error.
|
||||||
|
</Styles.StyledCardDescription>
|
||||||
|
</Styles.StyledSectionCard>
|
||||||
|
</Styles.StyledFeaturesSection>
|
||||||
|
);
|
||||||
|
|
||||||
|
const GitHubSection = () => (
|
||||||
|
<Styles.StyledSection id="github" reverse>
|
||||||
|
<Styles.StyledTwitterQuote>
|
||||||
|
<blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
|
||||||
|
<p lang="en" dir="ltr">
|
||||||
|
Looking to understand or explore some JSON? Just paste or upload to visualize it as a
|
||||||
|
graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
|
||||||
|
<br />
|
||||||
|
Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
|
||||||
|
@aykutsarach
|
||||||
|
</a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
|
||||||
|
</p>
|
||||||
|
— GitHub (@github){" "}
|
||||||
|
<a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
|
||||||
|
April 27, 2022
|
||||||
|
</a>
|
||||||
|
</blockquote>{" "}
|
||||||
|
<Script strategy="lazyOnload" src="https://platform.twitter.com/widgets.js"></Script>
|
||||||
|
</Styles.StyledTwitterQuote>
|
||||||
|
<Styles.StyledSectionArea>
|
||||||
|
<Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
|
||||||
|
<Styles.StyledMinorTitle>
|
||||||
|
At JSON Crack, we believe in the power of open source software and the communities that
|
||||||
|
support it. That's why we're proud to be part of the open source community and to
|
||||||
|
contribute to the development and growth of open source tools and technologies.
|
||||||
|
<br />
|
||||||
|
<br /> As part of our commitment to the open source community, we've made our app
|
||||||
|
freely available to anyone who wants to use it, and we welcome contributions from anyone
|
||||||
|
who's interested in helping to improve it. Whether you're a developer, a data
|
||||||
|
scientist, or just someone who's passionate about open source, we'd love to have
|
||||||
|
you join our community and help us make JSON Crack the best it can be.
|
||||||
|
<br />
|
||||||
|
<br /> So why not join us and become part of the JSON Crack open source community today? We
|
||||||
|
can't wait to see what we can accomplish together!
|
||||||
|
</Styles.StyledMinorTitle>
|
||||||
|
<Button
|
||||||
|
w="fit-content"
|
||||||
|
color="grape"
|
||||||
|
size="md"
|
||||||
|
component="a"
|
||||||
|
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||||
|
leftIcon={<AiTwotoneStar />}
|
||||||
|
>
|
||||||
|
STAR ON GITHUB
|
||||||
|
</Button>
|
||||||
|
</Styles.StyledSectionArea>
|
||||||
|
</Styles.StyledSection>
|
||||||
|
);
|
||||||
|
|
||||||
|
const EmbedSection = () => (
|
||||||
|
<Styles.StyledSection id="embed">
|
||||||
|
<Styles.StyledSectionArea>
|
||||||
|
<Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
|
||||||
|
<Styles.StyledMinorTitle>
|
||||||
|
JSON Crack provides users with the necessary code to embed the app into a website easily
|
||||||
|
using an iframe. This code can be easily copied and pasted into the desired location on the
|
||||||
|
website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
|
||||||
|
<br />
|
||||||
|
<br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
|
||||||
|
the website. This can be useful for a variety of purposes, such as quickly checking the
|
||||||
|
structure of a JSON file or verifying the data contained within it. JSON Crack's
|
||||||
|
intuitive interface makes it easy to navigate and understand even complex JSON data, making
|
||||||
|
it a valuable tool for anyone working with JSON.
|
||||||
|
</Styles.StyledMinorTitle>
|
||||||
|
<Button w="fit-content" size="md" component="a" href="/docs">
|
||||||
|
LEARN TO EMBED
|
||||||
|
</Button>
|
||||||
|
</Styles.StyledSectionArea>
|
||||||
|
<div>
|
||||||
|
<Styles.StyledFrame
|
||||||
|
title="Example Embed"
|
||||||
|
src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
|
||||||
|
loading="lazy"
|
||||||
|
></Styles.StyledFrame>
|
||||||
|
</div>
|
||||||
|
</Styles.StyledSection>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SupportSection = () => (
|
||||||
|
<Styles.StyledPaidSection>
|
||||||
|
<Styles.StyledProducthunt>
|
||||||
|
<Styles.StyledSubTitle>
|
||||||
|
Support JSON Crack at
|
||||||
|
<br />
|
||||||
|
<Styles.StyledHighlightedText>Product Hunt</Styles.StyledHighlightedText>
|
||||||
|
</Styles.StyledSubTitle>
|
||||||
|
<Producthunt />
|
||||||
|
</Styles.StyledProducthunt>
|
||||||
|
<Styles.StyledAffiliate>
|
||||||
|
<Styles.StyledSubTitle>Affiliate</Styles.StyledSubTitle>
|
||||||
|
<CarbonAds />
|
||||||
|
</Styles.StyledAffiliate>
|
||||||
|
</Styles.StyledPaidSection>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SponsorSection = () => (
|
||||||
|
<Styles.StyledSponsorSection id="sponsor">
|
||||||
|
<Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
|
||||||
|
<Styles.StyledMinorTitle>
|
||||||
|
Your supports make JSON Crack possible to continue and accessible for everyone!
|
||||||
|
</Styles.StyledMinorTitle>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
component="a"
|
||||||
|
color="green"
|
||||||
|
href="https://github.com/sponsors/AykutSarac"
|
||||||
|
rel="external"
|
||||||
|
>
|
||||||
|
Become A Sponsor!
|
||||||
|
</Button>
|
||||||
|
<Sponsors />
|
||||||
|
</Styles.StyledSponsorSection>
|
||||||
|
);
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={darkTheme}>
|
<ThemeProvider theme={darkTheme}>
|
||||||
<Home />
|
<Styles.StyledHome>
|
||||||
|
<Head>
|
||||||
|
<title>JSON Crack - Crack your data into pieces</title>
|
||||||
|
</Head>
|
||||||
|
<Navbar />
|
||||||
|
<HeroSection />
|
||||||
|
<PreviewSection />
|
||||||
|
<FeaturesSection />
|
||||||
|
<SupportSection />
|
||||||
|
<GitHubSection />
|
||||||
|
<EmbedSection />
|
||||||
|
<SponsorSection />
|
||||||
|
<Footer />
|
||||||
|
</Styles.StyledHome>{" "}
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import styled from "styled-components";
|
|
||||||
import { Button } from "@mantine/core";
|
|
||||||
import { PricingCards } from "src/containers/PricingCards";
|
|
||||||
import { Footer } from "src/layout/Footer";
|
|
||||||
|
|
||||||
const StyledPageWrapper = styled.div`
|
|
||||||
padding: 5%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledHeroSection = styled.section`
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
const Pricing = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<StyledPageWrapper>
|
|
||||||
<Button component="a" href="/">
|
|
||||||
< Go Back
|
|
||||||
</Button>
|
|
||||||
<StyledHeroSection>
|
|
||||||
<img src="assets/icon.png" alt="json crack" width="400" />
|
|
||||||
<h1>Premium</h1>
|
|
||||||
</StyledHeroSection>
|
|
||||||
<PricingCards />
|
|
||||||
</StyledPageWrapper>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Pricing;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user