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

feat: set Link prefetch false & add ads

Browse Source
This commit is contained in:
AykutSarac 2023-06-19 19:38:08 +03:00
parent c3bc79bc97
commit c281b232df
No known key found for this signature in database
12 changed files with 235 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/herowand_banner.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

19
src/components/FlexBar/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { useRouter } from "next/router";
export const HoverCard = () => {
const router = useRouter();
React.useEffect(() => {
const isAvailable = document.querySelectorAll("#_hellobar_")[0];
if (typeof window._bsa !== "undefined" && window._bsa && !!!isAvailable) {
window._bsa.init("hellobar", "CE7IPKQL", "placement:jsoncrackcom");
}
if (isAvailable) {
window._bsa.reload("#_hellobar_");
}
}, [router.asPath]);
return <div id="hellobarContainer"></div>;
};

9
src/constants/globalStyle.ts
View File

@ -1,19 +1,10 @@
import localFont from "next/font/local";
import { createGlobalStyle } from "styled-components";
const monaSans = localFont({
src: "../pages/Mona-Sans.woff2",
variable: "--mona-sans",
display: "swap",
fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
});
const GlobalStyle = createGlobalStyle`
html, body {
color: ${({ theme }) => theme.FULL_WHITE} !important;
font-weight: 400;
font-size: 16px;
font-family: ${monaSans.style.fontFamily};
background: #F1F1F1 !important;
@media only screen and (max-width: 768px) {

3
src/layout/EditorMantine/index.tsx
View File

@ -17,6 +17,9 @@ export const EditorMantine: React.FC<{ children: React.ReactNode }> = ({ childre
theme={{
colorScheme: lightmode ? "light" : "dark",
fontFamily: monaSans.style.fontFamily,
headings: {
fontFamily: monaSans.style.fontFamily,
},
components: {
Divider: {
styles: () => ({

2
src/layout/JsonCrackLogo/index.tsx
View File

@ -21,7 +21,7 @@ const StyledGradientText = styled.span`
export const JSONCrackLogo: React.FC<{ fontSize?: string }> = ({ fontSize = "1.2rem" }) => {
return (
<Link href="/">
<Link href="/" prefetch={false}>
<StyledTitle fontSize={fontSize}>
<StyledGradientText>JSON</StyledGradientText> CRACK
</StyledTitle>

8
src/layout/Navbar/index.tsx
View File

@ -59,17 +59,17 @@ export const Navbar = () => {
>
GitHub
</Button>
<Link href="/docs">
<Link href="/docs" prefetch={false}>
<Button variant="subtle" color="dark" radius="md">
Docs
</Button>
</Link>
<Link href="/oss">
<Link href="/oss" prefetch={false}>
<Button variant="subtle" color="dark" radius="md">
Supporters
</Button>
</Link>
<Link href="/pricing">
<Link href="/pricing" prefetch={false}>
<Button variant="subtle" color="dark" radius="md">
Pricing
</Button>
@ -86,7 +86,7 @@ export const Navbar = () => {
>
Star us on GitHub
</Button>
<Link href="/sign-in">
<Link href="/sign-in" prefetch={false}>
<Button variant="light" radius="md" className="hide-mobile">
Sign In
</Button>

27
src/pages/404.tsx
View File

@ -1,7 +1,8 @@
import React from "react";
import { useRouter } from "next/router";
import styled from "styled-components";
import { Button } from "@mantine/core";
import { Button, Text, Title } from "@mantine/core";
import Layout from "src/layout/Layout";
const StyledNotFound = styled.div`
display: flex;
@ -33,18 +34,18 @@ const NotFound: React.FC = () => {
const router = useRouter();
return (
<StyledNotFound>
<StyledImageWrapper>
<img src="/assets/404.svg" alt="not found" width={300} height={400} />
</StyledImageWrapper>
<StyledMessage>WIZARDS BEHIND CURTAINS?</StyledMessage>
<StyledSubMessage>
Looks like you&apos;re lost, let&apos;s head back to the home!
</StyledSubMessage>
<Button type="button" onClick={() => router.push("/")}>
Go Home
</Button>
</StyledNotFound>
<Layout>
<StyledNotFound>
<StyledImageWrapper>
<img src="/assets/404.svg" alt="not found" width={300} height={400} />
</StyledImageWrapper>
<Title color="dark">WIZARDS BEHIND CURTAINS?</Title>
<Text color="dark">Looks like you&apos;re lost, let&apos;s head back to the home!</Text>
<Button mt="lg" size="lg" type="button" onClick={() => router.push("/")}>
Go Home
</Button>
</StyledNotFound>
</Layout>
);
};

1
src/pages/_app.tsx
View File

@ -40,6 +40,7 @@ function JsonCrack({ Component, pageProps }: AppProps) {
theme={{
colorScheme: "light",
fontFamily: monaSans.style.fontFamily,
headings: { fontFamily: monaSans.style.fontFamily },
}}
>
<Component {...pageProps} />

9
src/pages/_document.tsx
View File

@ -20,14 +20,13 @@ class MyDocument extends Document {
<meta name="theme-color" content="#36393E" />
<link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/favicon.ico" />
<Script
strategy="afterInteractive"
src="//m.servedby-buysellads.com/monetization.js"
type="text/javascript"
/>
</Head>
<body>
<Main />
<Script
src="https://m.servedby-buysellads.com/monetization.js"
strategy="beforeInteractive"
/>
<NextScript />
</body>
</Html>

363
src/pages/index.tsx
View File

@ -18,12 +18,11 @@ import {
import { FaChevronRight } from "react-icons/fa";
import { SiVisualstudiocode } from "react-icons/si";
import { Typewriter } from "react-simple-typewriter";
import { HoverCard } from "src/components/FlexBar";
import { lightTheme } from "src/constants/theme";
import { Footer } from "src/layout/Footer";
import { Navbar } from "src/layout/Navbar";
const StyledHome = styled.div``;
const StyledHeroSection = styled.div`
--bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
--line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
@ -137,186 +136,192 @@ const StyledFeatures = styled(Container)`
}
`;
const HeroSection = () => (
<StyledHeroSection id="hero-section">
<Navbar />
<StyledHeroSectionBody>
<Left>
<StyledTitle>
<StyledGradientText>JSON</StyledGradientText> CRACK
</StyledTitle>
<StyledHeroText>
Seamlessly visualize your{" "}
<StyledHighlightedText>
<Typewriter
words={["JSON", "YAML", "XML", "TOML", "CSV"]}
typeSpeed={100}
deleteSpeed={60}
delaySpeed={2000}
loop
/>
</StyledHighlightedText>{" "}
instantly into graphs!
</StyledHeroText>
<Group spacing="xl">
<Link href="/editor" prefetch={false}>
<Button fw="bold" rightIcon={<FaChevronRight />} size="lg">
GO TO EDITOR
</Button>
</Link>
<Tooltip
maw={400}
label="VS Code extension only contains JSON visualization without additional features."
withArrow
multiline
position="bottom"
>
<Anchor
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
target="_blank"
fw="bold"
>
<Flex gap="xs" align="center">
<SiVisualstudiocode />
Get it on VS Code
</Flex>
</Anchor>
</Tooltip>
</Group>
</Left>
<Right>
<Image src="/assets/diagram_bg.webp" width="1200" height="593" alt="diagram" />
</Right>
</StyledHeroSectionBody>
</StyledHeroSection>
);
const StatsBanner = () => (
<StyledStatsWrapper>
<Group spacing="xl">
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
24.5K
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
GITHUB STARS
</Text>
</Stack>
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
50K+
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
MONTHLY USERS
</Text>
</Stack>
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
GPL-3
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
LICENSE
</Text>
</Stack>
</Group>
<Stack ml={60}>
<Text maw={800} fz="0.9rem">
JSON Crack is an open-source project with a GPL-3 license. By subscribing to our premium
plan, you can help us continue developing and maintaining it, also enjoy the benefits.
</Text>
<Link href="/pricing" prefetch={false}>
<Text color="yellow" fw="bold" w="fit-content">
View Premium Plan <FaChevronRight />
</Text>
</Link>
</Stack>
</StyledStatsWrapper>
);
const Features = () => (
<StyledFeatures my={60}>
<Flex py="lg" align="flex-start" gap="lg">
<Image
width={500}
height={287}
src="/assets/highlight_graph.svg"
alt="search through graph"
/>
<Stack pt="lg">
<Text color="dark" fz="1.5rem" fw="bold">
ADVANCED GRAPH SEARCH
</Text>
<Text color="dark" maw={500}>
Quickly navigate through your data visualization using JSON Crack&apos;s intuitive search
functionality. Directly locate specific nodes matching with your search!
</Text>
</Stack>
</Flex>
<Flex py="lg" align="center" gap="lg" direction="row-reverse">
<Image width={300} height={260} src="/assets/multidata.png" alt="multiple format support" />
<Stack>
<Text color="dark" fz="1.5rem" fw="bold">
DYNAMIC DATA VISUALIZATION
</Text>
<Text color="dark" maw={500}>
JSON Crack revolutionizes data visualization by transforming JSON, YAML, XML, and other
data types into captivating, interactive graphs. Gain deep insights into complex data
structures at a glance.
</Text>
</Stack>
</Flex>
<Flex py="lg" align="center" gap="lg">
<Image width={400} height={344} src="/assets/download_image.webp" alt="download as image" />
<Stack>
<Text color="dark" fz="1.5rem" fw="bold">
DOWNLOAD AS IMAGE
</Text>
<Text color="dark" maw={500}>
Capture and share your insights effortlessly by downloading your generated graphs as image
files. Easily collaborate and communicate data-driven findings with colleagues and
stakeholders.
</Text>
</Stack>
</Flex>
<Flex direction="row-reverse" py="lg" align="flex-start" gap="lg">
<Image width={500} height={285} src="/assets/preview_image.svg" alt="preview images" />
<Stack pt="lg">
<Text color="dark" fz="1.5rem" fw="bold">
IMAGE PREVIEW
</Text>
<Text color="dark" maw={500}>
Seamlessly preview embedded images within your JSON, YAML, or XML data. Instantly view
visuals, photos, and graphics directly within JSON Crack, saving you time and effort.
</Text>
</Stack>
</Flex>
</StyledFeatures>
);
const HeroBottom = () => (
<Container mt={100}>
<Stack>
<Title color="dark" order={3} maw={500} mx="auto" align="center">
But that&apos;s not all yet!
<br />
Explore the full potential of your data now......
</Title>
<Center>
<Link href="/editor" prefetch={false}>
<Button color="violet" fw="bold" rightIcon={<FaChevronRight />} size="lg">
GO TO EDITOR
</Button>
</Link>
</Center>
</Stack>
</Container>
);
export const HomePage = () => {
return (
<ThemeProvider theme={lightTheme}>
<StyledHome>
<Head>
<title>JSON Crack - Crack your data into pieces</title>
</Head>
<StyledHeroSection id="hero-section">
<Navbar />
<StyledHeroSectionBody>
<Left>
<StyledTitle>
<StyledGradientText>JSON</StyledGradientText> CRACK
</StyledTitle>
<StyledHeroText>
Seamlessly visualize your{" "}
<StyledHighlightedText>
<Typewriter
words={["JSON", "YAML", "XML", "TOML", "CSV"]}
typeSpeed={100}
deleteSpeed={60}
delaySpeed={2000}
loop
/>
</StyledHighlightedText>{" "}
instantly into graphs!
</StyledHeroText>
<Group spacing="xl">
<Link href="/editor" prefetch={false}>
<Button fw="bold" rightIcon={<FaChevronRight />} size="lg">
GO TO EDITOR
</Button>
</Link>
<Tooltip
maw={400}
label="VS Code extension only contains JSON visualization without additional features."
withArrow
multiline
position="bottom"
>
<Anchor
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
target="_blank"
fw="bold"
>
<Flex gap="xs" align="center">
<SiVisualstudiocode />
Get it on VS Code
</Flex>
</Anchor>
</Tooltip>
</Group>
</Left>
<Right>
<Image src="/assets/diagram_bg.webp" width="1200" height="593" alt="diagram" />
</Right>
</StyledHeroSectionBody>
</StyledHeroSection>
</StyledHome>
<StyledStatsWrapper>
<Group spacing="xl">
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
24.5K
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
GITHUB STARS
</Text>
</Stack>
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
50K+
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
MONTHLY USERS
</Text>
</Stack>
<Stack spacing="0">
<Text fw="bolder" fz="1.6rem">
GPL-3
</Text>
<Text color="gray.5" fw="bold" fz="0.8rem">
LICENSE
</Text>
</Stack>
</Group>
<Stack ml={60}>
<Text maw={800} fz="0.9rem">
JSON Crack is an open-source project with a GPL-3 license. By subscribing to our premium
plan, you can help us continue developing and maintaining it, also enjoy the benefits.
</Text>
<Anchor href="/pricing" color="yellow" fw="bold" w="fit-content">
View Premium Plan <FaChevronRight />
</Anchor>
</Stack>
</StyledStatsWrapper>
<StyledFeatures my={60}>
<Flex py="lg" align="flex-start" gap="lg">
<Image
width={500}
height={287}
src="/assets/highlight_graph.svg"
alt="search through graph"
/>
<Stack pt="lg">
<Text color="dark" fz="1.5rem" fw="bold">
ADVANCED GRAPH SEARCH
</Text>
<Text color="dark" maw={500}>
Quickly navigate through your data visualization using JSON Crack&apos;s intuitive
search functionality. Directly locate specific nodes matching with your search!
</Text>
</Stack>
</Flex>
<Flex py="lg" align="center" gap="lg" direction="row-reverse">
<Image
width={300}
height={260}
src="/assets/multidata.png"
alt="multiple format support"
/>
<Stack>
<Text color="dark" fz="1.5rem" fw="bold">
DYNAMIC DATA VISUALIZATION
</Text>
<Text color="dark" maw={500}>
JSON Crack revolutionizes data visualization by transforming JSON, YAML, XML, and
other data types into captivating, interactive graphs. Gain deep insights into complex
data structures at a glance.
</Text>
</Stack>
</Flex>
<Flex py="lg" align="center" gap="lg">
<Image
width={400}
height={344}
src="/assets/download_image.webp"
alt="download as image"
/>
<Stack>
<Text color="dark" fz="1.5rem" fw="bold">
DOWNLOAD AS IMAGE
</Text>
<Text color="dark" maw={500}>
Capture and share your insights effortlessly by downloading your generated graphs as
image files. Easily collaborate and communicate data-driven findings with colleagues
and stakeholders.
</Text>
</Stack>
</Flex>
<Flex direction="row-reverse" py="lg" align="flex-start" gap="lg">
<Image width={500} height={285} src="/assets/preview_image.svg" alt="preview images" />
<Stack pt="lg">
<Text color="dark" fz="1.5rem" fw="bold">
IMAGE PREVIEW
</Text>
<Text color="dark" maw={500}>
Seamlessly preview embedded images within your JSON, YAML, or XML data. Instantly view
visuals, photos, and graphics directly within JSON Crack, saving you time and effort.
</Text>
</Stack>
</Flex>
</StyledFeatures>
<Container mt={100}>
<Stack>
<Title color="dark" order={3} maw={500} mx="auto" align="center">
But that&apos;s not all yet!
<br />
Explore the full potential of your data now......
</Title>
<Center>
<Link href="/editor" prefetch={false}>
<Button color="violet" fw="bold" rightIcon={<FaChevronRight />} size="lg">
GO TO EDITOR
</Button>
</Link>
</Center>
</Stack>
</Container>
<Head>
<title>JSON Crack - Crack your data into pieces</title>
</Head>
<HeroSection />
<StatsBanner />
<Features />
<HeroBottom />
<HoverCard />
<Footer />
</ThemeProvider>
);

5
src/pages/oss.tsx
View File

@ -1,6 +1,5 @@
import React from "react";
import Head from "next/head";
import Link from "next/link";
import { Button, Center, Container, Grid, Image, Text, Title } from "@mantine/core";
import { VscHeart } from "react-icons/vsc";
import Layout from "src/layout/Layout";
@ -43,12 +42,12 @@ const Oss: React.FC<{ sponsors: any[] }> = ({ sponsors }) => {
<Grid gutter={30}>
{sponsors?.map(sponsor => (
<Grid.Col span="content" key={sponsor.handle}>
<Link href={sponsor.profile}>
<a href={sponsor.profile}>
<Image radius="md" width={"4rem"} src={sponsor.avatar} alt={sponsor.handle} />
<Text color="dark.3" pt="sm" align="center" fz="xs">
{sponsor.handle}
</Text>
</Link>
</a>
</Grid.Col>
))}
</Grid>

3
src/typings/global.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
interface Window {
_bsa: any;
}