Merge branch 'main' of https://github.com/AykutSarac/jsoncrack.com

.env

@@ -1,4 +1,3 @@
-NEXT_PUBLIC_GA_ID=G-JKZEHMJBMH
-NEXT_PUBLIC_PAYMENT_URL=https://jsoncrack.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-JKZEHMJBMH
 NEXT_PUBLIC_SUPABASE_URL=https://bxkgqurwqjmvrqekcbws.supabase.co
 NEXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJ4a2dxdXJ3cWptdnJxZWtjYndzIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTA2NDU0MjUsImV4cCI6MjAwNjIyMTQyNX0.3nZ0yhuFjnI3yHbAL8S9UtK-Ny-6F5AylNHgo1tymTU

default.conf

@@ -10,17 +10,11 @@ server {
     location /widget {
         try_files $uri /widget.html;
     }
-
 
     location /docs {
         try_files $uri /docs.html;
     }
 
-
-    location /pricing {
-        try_files $uri /pricing.html;
-    }
-
     location /forgot-password {
         try_files $uri /forgot-password.html;
     }

package.json

@@ -37,11 +37,12 @@
     "jxon": "2.0.0-beta.5",
     "lodash.debounce": "^4.0.8",
     "next": "14.2.3",
+    "next-seo": "^6.5.0",
+    "nextjs-google-analytics": "^2.3.7",
     "react": "^18.3.1",
     "react-compare-slider": "^3.1.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
-    "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-json-tree": "^0.18.0",

public/robots.txt

@@ -3,6 +3,6 @@ Allow: /
 
 User-agent: *
 Disallow: /forgot-password
-Disallow: /sign-in
-Disallow: /sign-up
-Disallow: /widget
+Disallow: /widget
+
+Sitemap: https://jsoncrack.com/sitemap.txt

public/sitemap.txt

@@ -1,5 +1,7 @@
 https://jsoncrack.com
-https://jsoncrack.com/pricing
+https://jsoncrack.com/sign-in
+https://jsoncrack.com/sign-up
+https://jsoncrack.com/oauth
 https://jsoncrack.com/forgot-password
 https://jsoncrack.com/editor
 https://jsoncrack.com/docs

src/constants/faq.json

@@ -5,7 +5,7 @@
   },
   {
     "title": "Is JSON Crack free?",
-    "content": "JSON Crack offers a free forever plan with open-source access. For advanced features and increased usage limits, you can upgrade to a premium plan."
+    "content": "Yes, JSON Crack is a free-forever open source online tool. For advanced features you may use ToDiagram.com"
   },
   {
     "title": "Is my data secure?",
@@ -15,30 +15,18 @@
     "title": "Can I convert JSON to other formats using JSON Crack?",
     "content": "Yes, JSON Crack offers robust data conversion capabilities. You can easily convert JSON to YAML, XML to JSON, CSV to JSON and other popular formats."
   },
-  {
-    "title": "Can I edit JSON data directly in graphs?",
-    "content": "Yes, as part of the premium plan, you can edit JSON data directly in the editor. This feature allows you to make changes to your data and visualize the results in real-time."
-  },
   {
     "title": "What kind of data formats are supported?",
     "content": "A wide range of data formats are supported including JSON, YAML, XML, CSV, and TOML."
   },
-  {
-    "title": "Can I customize the graph colors?",
-    "content": "Yes, you can customize the colors of the graph to match your brand or personal preferences as part of the premium plan."
-  },
   {
     "title": "What size of data can I visualize?",
-    "content": "You can visualize data up to 300 KB in size with the free plan and up to 4 MB with premium plan. It might vary depending on the complexity of the data and your hardware."
+    "content": "It supports approximately 300 KB. It might vary depending on the complexity of the data and your hardware."
   },
   {
     "title": "Can I export the generated graphs?",
     "content": "Yes, you can export the generated graphs as PNG, JPEG, or SVG files."
   },
-  {
-    "title": "I purchased a premium plan, how do I access it?",
-    "content": "After purchasing a premium plan, you should sign up with the email you used during the purchase or log in with the same email. The premium features will be automatically unlocked for you."
-  },
   {
     "title": "How to use VS Code extension?",
     "content": "You can use the VS Code extension to visualize JSON data directly in your editor. Install the extension from the VS Code marketplace and follow the instructions at extension's page."

src/constants/landing.ts

@@ -1,6 +1,3 @@
-export const metaDescription =
-  "JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.";
-
 export const images = Object.freeze([
   {
     id: 1,

src/constants/seo.ts

@@ -0,0 +1,29 @@
+import type { NextSeoProps } from "next-seo";
+
+export const SEO: NextSeoProps = {
+  title: "JSON Crack | Transform your data into interactive graphs",
+  description:
+    "JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.",
+  themeColor: "#36393E",
+  openGraph: {
+    type: "website",
+    images: [
+      {
+        url: "https://jsoncrack.com/assets/jsoncrack.png",
+        width: 1200,
+        height: 627,
+      },
+    ],
+  },
+  additionalLinkTags: [
+    {
+      rel: "manifest",
+      href: "/manifest.json",
+    },
+    {
+      rel: "icon",
+      href: "/favicon.ico",
+      sizes: "48x48",
+    },
+  ],
+};

src/containers/AuthLayout/index.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+import {
+  Alert,
+  Anchor,
+  Center,
+  Container,
+  LoadingOverlay,
+  MantineProvider,
+  Text,
+} from "@mantine/core";
+import styled, { ThemeProvider } from "styled-components";
+import { FaInfoCircle } from "react-icons/fa";
+import { lightTheme } from "src/constants/theme";
+import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
+
+const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));
+
+const StyledWrapper = styled.div`
+  position: relative;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    background-size: 40px 40px;
+    background-image: linear-gradient(to right, #f7f7f7 1px, transparent 1px),
+      linear-gradient(to bottom, #f7f7f7 1px, transparent 1px);
+    image-rendering: pixelated;
+    -webkit-mask-image: linear-gradient(to bottom, transparent, 0%, white, 98%, transparent);
+    mask-image: linear-gradient(to bottom, transparent, 0%, white, 98%, transparent);
+  }
+`;
+
+const StyledPaper = styled.div`
+  border-radius: 0px;
+  max-width: 500px;
+  width: 100%;
+  padding: 24px;
+
+  background: rgba(255, 255, 255, 0.09);
+  border-radius: 12px;
+  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);
+`;
+
+function Loading() {
+  const router = useRouter();
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleStart = (url: string) => url !== router.asPath && setLoading(true);
+    const handleComplete = (url: string) => url === router.asPath && setLoading(false);
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleComplete);
+    router.events.on("routeChangeError", handleComplete);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleComplete);
+      router.events.off("routeChangeError", handleComplete);
+    };
+  });
+
+  if (loading) return <LoadingOverlay visible />;
+  return null;
+}
+
+export const AuthLayout = ({ children }: React.PropsWithChildren) => {
+  return (
+    <StyledWrapper>
+      <MantineProvider forceColorScheme="light">
+        <ThemeProvider theme={lightTheme}>
+          <Toaster
+            position="bottom-right"
+            containerStyle={{
+              bottom: 34,
+              right: 8,
+              fontSize: 14,
+            }}
+            toastOptions={{
+              style: {
+                background: "#4D4D4D",
+                color: "#B9BBBE",
+                borderRadius: 4,
+              },
+            }}
+          />
+
+          <Container>
+            <Center mb="xl">
+              <JSONCrackLogo fontSize="1.5rem" />
+            </Center>
+            <Alert py="sm" mb="md" color="indigo" icon={<FaInfoCircle />}>
+              Premium editor has been moved to{" "}
+              <Anchor href="https://todiagram.com" inherit>
+                todiagram.com
+              </Anchor>
+              .
+            </Alert>
+            <StyledPaper>
+              {children}
+              <Loading />
+            </StyledPaper>
+            <Text maw={250} ta="center" mx="auto" pos="relative" mt="md" fz="xs" c="gray.6">
+              By continuing you are agreeing to our{" "}
+              <Anchor fz="xs" component="a" href="/legal/terms" target="_blank">
+                Terms of Service
+              </Anchor>{" "}
+              and{" "}
+              <Anchor fz="xs" component="a" href="/legal/privacy" target="_blank">
+                Privacy Policy
+              </Anchor>
+            </Text>
+          </Container>
+        </ThemeProvider>
+      </MantineProvider>
+    </StyledWrapper>
+  );
+};