diff --git a/public/assets/192.jpg b/public/assets/192.jpg
index 903cd18..564a4a9 100644
Binary files a/public/assets/192.jpg and b/public/assets/192.jpg differ
diff --git a/public/assets/512.jpg b/public/assets/512.jpg
index 587ac22..77ac10f 100644
Binary files a/public/assets/512.jpg and b/public/assets/512.jpg differ
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
new file mode 100644
index 0000000..17679d0
--- /dev/null
+++ b/public/assets/logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/favicon.ico b/public/favicon.ico
index e14bec3..600f2a8 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/containers/Toolbar/Logo.tsx b/src/containers/Toolbar/Logo.tsx
index 85f77a3..e1a700e 100644
--- a/src/containers/Toolbar/Logo.tsx
+++ b/src/containers/Toolbar/Logo.tsx
@@ -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 (
-
-
-
+
);
};
diff --git a/src/containers/Toolbar/index.tsx b/src/containers/Toolbar/index.tsx
index 3474cf4..3f1bc17 100644
--- a/src/containers/Toolbar/index.tsx
+++ b/src/containers/Toolbar/index.tsx
@@ -50,7 +50,7 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
-
+
@@ -85,12 +85,12 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
{
setSeenPremium(true);
- window.open("https://jsoncrack.com/premium", "_blank");
+ setVisible("upgrade")(true);
gaEvent("Toolbar", "click upgrade premium");
}}
>
-
-
+
+
Upgrade
diff --git a/src/layout/JsonCrackLogo.tsx b/src/layout/JsonCrackLogo.tsx
index 32fe062..4a46007 100644
--- a/src/layout/JsonCrackLogo.tsx
+++ b/src/layout/JsonCrackLogo.tsx
@@ -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 (
-
- {logoText}
-
+
+
+ {!hideLogo && (
+
+ )}
+ {!hideText && (
+
+ JSON CRACK
+
+ )}
+
+
);
};
diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
index 412d416..331a383 100644
--- a/src/layout/Navbar.tsx
+++ b/src/layout/Navbar.tsx
@@ -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
diff --git a/src/modules/GraphView/NotSupported.tsx b/src/modules/GraphView/NotSupported.tsx
index 4748284..c88db35 100644
--- a/src/modules/GraphView/NotSupported.tsx
+++ b/src/modules/GraphView/NotSupported.tsx
@@ -161,7 +161,7 @@ export const NotSupported = () => {
- <JSONCrackLogo fontSize="4rem" style={{ color: "gray" }} />
+ <JSONCrackLogo fontSize="4rem" style={{ color: "gray" }} hideLogo />
Upgrade to premium for larger data size support. The free version is incapable of handling
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 441a4ce..0439d62 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -39,10 +39,18 @@ export const HomePage = ({ stars }: InferGetStaticPropsType {
- 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;
}>;
diff --git a/src/pages/premium.tsx b/src/pages/premium.tsx
index a040c73..c2d920b 100644
--- a/src/pages/premium.tsx
+++ b/src/pages/premium.tsx
@@ -176,51 +176,61 @@ const Premium = () => {
"linear-gradient(15deg, #120f43, #0d0e3e, #0b0f39, #0a1034, #08102f, #071029, #051024, #040f1e)",
}}
>
-
-
- JSON Crack - Premium
-
-
- Rebuilt from the ground up — now faster, more powerful, and more visually stunning.
-
- }
- >
- Upgrade now
-
+
+
+
+ Premium
+
+
+ Faster, more powerful, and more visually stunning.
+
+ }
+ >
+ Upgrade now
+
+
+
-
+