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

update logo

Browse Source
This commit is contained in:
AykutSarac 2024-08-14 11:39:21 +03:00
parent 7bcbd3beb4
commit 52fa28cac6
No known key found for this signature in database
11 changed files with 117 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/192.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/assets/512.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 48 KiB

4
public/assets/logo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="249.07 216.24 530.15 601.4">
<path fill="#ffffff" d="M259.286 506.227c31.525-16.358 62.73-32.527 93.914-48.734 6.557-3.407 12.364-3.634 19.026.907 24.082 16.42 48.558 32.26 72.887 48.318 1.103.728 2.353 1.295 2.949 3.041l-150.27 186.393c-6.728-3.874-13.7-7.689-20.455-11.856-3.973-2.451-7.977-4.796-12.11-6.97-9.961-5.238-15.91-12.533-15.812-24.858.361-45.484.073-90.972-.043-136.459-.008-3.344.829-5.723 4.235-6.913 1.87-.653 3.573-1.78 5.679-2.869zM779.167 447c-.016 22.83-.131 45.161.034 67.49.033 4.406-1.374 6.96-5.38 8.985-33.294 16.83-66.504 33.827-99.693 50.864-2.529 1.298-4.443 1.328-6.871-.261-26.065-17.06-52.199-34.012-78.3-51.015-1.505-.98-3.276-1.728-4.19-4.197 5.251-6.655 10.649-13.589 16.144-20.444 40.116-50.049 80.251-100.082 120.382-150.119.416-.52.833-1.04 1.264-1.549 4.866-5.752 4.822-5.678 11.253-1.763 10.247 6.237 20.468 12.525 30.872 18.49 9.968 5.716 14.493 14.317 14.514 25.527.036 19.164-.015 38.328-.029 57.992zM318.03 699.88c33.655-.05 66.816-.224 99.977-.07 13.86.063 24.849-5.57 33.675-15.726 6.88-7.918 13.437-16.13 19.873-24.416 2.596-3.341 4.458-4.178 8.468-1.562 22.043 14.379 44.358 28.34 66.498 42.571 4.21 2.706 8.457 4.055 13.554 4.001 24.824-.258 49.651-.203 74.478-.29 1.559-.005 2.926.264 4.193 1.243 9.888 7.637 19.806 15.235 29.684 22.885.603.467.946 1.271 1.615 2.206-6.63 5.153-13.958 8.76-20.966 12.834-39.448 22.938-79.094 45.538-118.377 68.754-11.96 7.068-22.565 7.136-34.557.07-58.268-34.332-116.788-68.234-175.214-102.297-5.608-3.27-11.19-6.588-16.761-9.92-.912-.546-2.225-.846-2.02-2.97 4.817 3.49 10.15 2.737 15.88 2.687zM416.243 271.203c27.327-16.681 54.446-33.008 81.31-49.744 11.137-6.939 21.417-6.944 32.687-.1 62.223 37.783 124.622 75.275 186.953 112.882 1.246.752 2.804 1.19 3.404 3.066-1.708 1.766-3.984 1-5.976 1.002-36.493.033-72.986.054-109.478-.048-12.647-.036-23.013 4.069-30.544 14.732-3.93 5.565-8.65 10.566-12.84 15.958-2.033 2.617-3.793 2.93-6.681 1.084-18.807-12.022-37.74-23.845-56.583-35.81-3.203-2.033-6.48-3.008-10.323-2.99-24.828.114-49.657-.003-74.485.135-3.802.02-6.63-1.016-9.202-3.85-9.276-10.221-18.72-20.288-28.752-31.115 13.066-9.16 26.947-16.602 40.51-25.202z"/>
<path fill="#ffffff" d="M560.677 548.71c3.24-4.045 6.354-7.743 9.228-11.618 1.803-2.43 3.47-3.123 6.226-1.303 26.674 17.612 53.39 35.16 80.134 52.666 2.38 1.558 2.66 3.288 2.008 5.92-7.077 28.578-14.11 57.166-20.942 85.803-.954 3.998-2.644 5.346-6.75 5.315-23.645-.178-47.294-.119-70.941-.057-2.947.008-5.455-.71-7.958-2.304-20.22-12.877-40.456-25.73-60.81-38.39-3.634-2.26-3.954-3.753-1.195-7.18 23.701-29.438 47.207-59.032 71-88.852zM375.117 388.978c-4.419 13.846-8.757 27.3-13 40.784-.995 3.16-2.56 5.523-5.651 7.146-23.726 12.457-47.376 25.057-71.06 37.592-9.268 4.905-18.545 9.795-27.864 14.602-2.167 1.118-4.234 2.665-6.908 2.627-1.613-1.9-1.126-4.161-1.13-6.234-.048-27.64.037-55.279-.079-82.917-.025-5.976-.78-11.917.007-17.929 1.123-8.581 5.496-14.822 12.726-19.265 20.568-12.64 41.144-25.27 61.712-37.912 14.891-9.152 29.813-18.257 44.625-27.537 2.415-1.513 3.693-1.54 5.037 1.109 5.727 11.28 11.563 22.504 17.361 33.748.93 1.804.416 3.545-.152 5.317-5.18 16.16-10.342 32.325-15.624 48.87zM416.091 348.937c23.637-.008 46.787.01 69.937-.056 2.601-.008 4.835.574 7.043 1.978 16.72 10.627 33.435 21.265 50.287 31.68 3.982 2.462 4.33 4.172 1.25 7.955-27.117 33.309-54.055 66.763-80.906 100.286-2.58 3.22-4.316 3.907-8.027 1.446-25.11-16.66-50.366-33.103-75.658-49.486-2.77-1.794-2.737-3.644-1.849-6.303 8.064-24.145 16.064-48.312 24.068-72.477.732-2.21 1.364-4.452 2.053-6.676 2.59-8.36 2.592-8.36 11.802-8.347zM717.313 571.267c20.332-10.649 40.339-21.116 60.146-31.48 2.246 1.888 1.712 3.845 1.713 5.582.007 35.824-.106 71.647-.008 107.47.029 10.507-4.298 18.44-13.23 23.572-29.736 17.087-59.59 33.972-89.701 51.107-5.686-6.682-10.809-14.257-17.447-20.116-8.431-7.441-7.937-15.088-5.146-24.832 7.788-27.185 14.827-54.592 21.692-82.029 1.508-6.026 4.756-9.596 9.849-12.268 10.62-5.572 21.206-11.212 32.132-17.006z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

20
src/containers/Toolbar/Logo.tsx
View File

@ -1,29 +1,11 @@
import React from "react";
import { Flex } from "@mantine/core";
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
import { isIframe } from "src/lib/utils/widget";
import * as Styles from "./styles";
export const Logo = () => {
const [logoURL, setLogoURL] = React.useState("");
React.useEffect(() => {
if (typeof window !== "undefined") {
const url = !isIframe()
? "https://jsoncrack.com"
: window.location.href.replace("widget", "editor");
setLogoURL(url);
}
}, []);
if (!logoURL) return null;
return (
<Styles.StyledToolElement title="JSON Crack">
<Flex gap="xs" align="center" justify="center">
<JSONCrackLogo fontSize="1.2em" href={logoURL} target={isIframe() ? "_blank" : "_parent"} />
</Flex>
<JSONCrackLogo fontSize="1.2rem" hideText />
</Styles.StyledToolElement>
);
};

8
src/containers/Toolbar/index.tsx
View File

@ -50,7 +50,7 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
<Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
<Styles.StyledToolElement title="JSON Crack">
<Flex gap="xs" align="center" justify="center">
<JSONCrackLogo fontSize="1.2em" />
<JSONCrackLogo fontSize="0.8rem" hideLogo />
</Flex>
</Styles.StyledToolElement>
@ -85,12 +85,12 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
<Styles.StyledToolElement
onClick={() => {
setSeenPremium(true);
window.open("https://jsoncrack.com/premium", "_blank");
setVisible("upgrade")(true);
gaEvent("Toolbar", "click upgrade premium");
}}
>
<MdStars color="#2e50a7" size="16" />
<Text c="#2e50a7" fw={800} fz="xs">
<MdStars color="#1aa853" size="16" />
<Text c="#1aa853" fw={800} fz="xs">
Upgrade
</Text>
</Styles.StyledToolElement>

52
src/layout/JsonCrackLogo.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import React, { useEffect } from "react";
import localFont from "next/font/local";
import Link from "next/link";
import { Image } from "@mantine/core";
import styled from "styled-components";
import { isIframe } from "src/lib/utils/widget";
const monaSans = localFont({
src: "../assets/fonts/Mona-Sans.woff2",
@ -11,31 +11,55 @@ const monaSans = localFont({
fallback: ["Futura, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
});
const StyledTitle = styled.div<{ fontSize: string }>`
const StyledLogoWrapper = styled.div`
display: flex;
align-items: center;
gap: 6px;
color: white;
mix-blend-mode: difference;
`;
const StyledTitle = styled.span<{ fontSize: string }>`
font-weight: 800;
margin: 0;
font-family: ${monaSans.style.fontFamily};
font-family: ${monaSans.style.fontFamily} !important;
font-size: ${({ fontSize }) => fontSize};
white-space: nowrap;
z-index: 10;
vertical-align: middle;
color: #e8e8e8;
mix-blend-mode: difference;
`;
interface LogoProps extends React.ComponentPropsWithoutRef<"a"> {
interface LogoProps extends React.ComponentPropsWithoutRef<"div"> {
fontSize?: string;
hideLogo?: boolean;
hideText?: boolean;
}
export const JSONCrackLogo = ({ fontSize = "1.2rem", ...props }: LogoProps) => {
const logoText = React.useMemo(() => {
if (typeof window === "undefined") return "JSON CRACK";
return isIframe() ? "JC" : "JSON CRACK";
export const JSONCrackLogo = ({ fontSize = "1.2rem", hideText, hideLogo, ...props }: LogoProps) => {
const [isIframe, setIsIframe] = React.useState(false);
useEffect(() => {
setIsIframe(window !== undefined && window.location.href.includes("widget"));
}, []);
return (
<StyledTitle as={Link} fontSize={fontSize} href="/" prefetch={false} {...props}>
{logoText}
</StyledTitle>
<Link href="/" prefetch={false} target={isIframe ? "_blank" : "_self"}>
<StyledLogoWrapper>
{!hideLogo && (
<Image
src="./assets/logo.svg"
width={parseFloat(fontSize) * 16}
height={parseFloat(fontSize) * 16}
alt="logo"
mb="2"
/>
)}
{!hideText && (
<StyledTitle fontSize={fontSize} {...props}>
JSON CRACK
</StyledTitle>
)}
</StyledLogoWrapper>
</Link>
);
};

5
src/layout/Navbar.tsx
View File

@ -28,6 +28,9 @@ const StyledNavbar = styled.nav`
`;
const Left = styled.div`
display: flex;
gap: 16px;
align-items: center;
width: 100%;
@media only screen and (max-width: 768px) {
@ -57,7 +60,7 @@ export const Navbar = () => {
radius="sm"
size="sm"
fw={500}
ml={50}
ml="sm"
>
VS Code
</Button>

2
src/modules/GraphView/NotSupported.tsx
View File

@ -161,7 +161,7 @@ export const NotSupported = () => {
<StyledNotSupported>
<StyledContent>
<Title mb="lg" style={{ pointerEvents: "none" }}>
<JSONCrackLogo fontSize="4rem" style={{ color: "gray" }} />
<JSONCrackLogo fontSize="4rem" style={{ color: "gray" }} hideLogo />
</Title>
<StyledInfo>
Upgrade to premium for larger data size support. The free version is incapable of handling

16
src/pages/index.tsx
View File

@ -39,10 +39,18 @@ export const HomePage = ({ stars }: InferGetStaticPropsType<typeof getStaticProp
export default HomePage;
export const getStaticProps = (async () => {
const res = await fetch("https://api.github.com/repos/AykutSarac/jsoncrack.com");
const repo = await res.json();
const stars = repo.stargazers_count;
return { props: { stars } };
try {
const res = await fetch("https://api.github.com/repos/AykutSarac/jsoncrack.com");
const repo = await res.json();
const stars = repo.stargazers_count;
return { props: { stars } };
} catch (error) {
return {
props: {
stars: 0,
},
};
}
}) satisfies GetStaticProps<{
stars: number;
}>;

96
src/pages/premium.tsx
View File

@ -176,51 +176,61 @@ const Premium = () => {
"linear-gradient(15deg, #120f43, #0d0e3e, #0b0f39, #0a1034, #08102f, #071029, #051024, #040f1e)",
}}
>
<Box mx="auto" maw={600}>
<Title
order={1}
c="white"
fz={{
base: 38,
xs: 40,
}}
>
JSON Crack - Premium
</Title>
<Text
c="gray.3"
mt={32}
fz={{
base: 16,
xs: 20,
}}
>
Rebuilt from the ground up — now faster, more powerful, and more visually stunning.
</Text>
<Button
component="a"
href="#pricing"
mt="lg"
variant="white"
color="gray"
radius="md"
size="lg"
rightSection={<MdChevronRight size={30} />}
>
Upgrade now
</Button>
<Flex px="xl" justify="center" gap={60}>
<Box maw={600}>
<Title
order={1}
c="white"
fz={{
base: 38,
xs: 40,
}}
>
Premium
</Title>
<Text
c="gray.3"
mt={32}
fz={{
base: 16,
xs: 20,
}}
>
Faster, more powerful, and more visually stunning.
</Text>
<Button
component="a"
href="#pricing"
mt="lg"
variant="white"
color="gray"
radius="md"
size="lg"
rightSection={<MdChevronRight size={30} />}
>
Upgrade now
</Button>
<Image
pos="absolute"
bottom={-1}
left={0}
src="./assets/premium-divider.svg"
width="100%"
alt="divider"
style={{
transform: "scaleY(-1) scaleX(-1)",
}}
/>
</Box>
<Image
pos="absolute"
bottom={-1}
left={0}
src="./assets/premium-divider.svg"
width="100%"
alt="divider"
style={{
transform: "scaleY(-1) scaleX(-1)",
}}
src="./assets/logo.svg"
alt="hero"
w="300"
h="200"
opacity={0.02}
visibleFrom="sm"
/>
</Box>
</Flex>
</Container>
<PremiumPreview />
<Container