feat: overall improvements

# updated login flow # removed sign-up # use next-seo
AykutSarac · Sep 1, 2024 · 3582c1e · 3582c1e
1 parent a679149
commit 3582c1e
Show file tree

Hide file tree

Showing 31 changed files with 623 additions and 664 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "jxon": "2.0.0-beta.5",
     "lodash.debounce": "^4.0.8",
     "next": "14.2.3",
+    "next-seo": "^6.5.0",
     "react": "^18.3.1",
     "react-compare-slider": "^3.1.0",
     "react-countup": "^6.5.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/robots.txt b/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
diff --git a/public/sitemap.txt b/public/sitemap.txt
@@ -1,5 +1,8 @@
 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

diff --git a/src/constants/jsonld.ts b/src/constants/jsonld.ts
diff --git a/src/constants/landing.ts b/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,

diff --git a/src/constants/seo.ts b/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",
+    },
+  ],
+};
diff --git a/src/containers/AuthLayout/index.tsx b/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>
+  );
+};
diff --git a/src/containers/Editor/BottomBar.tsx b/src/containers/Editor/BottomBar.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Head from "next/head";
 import { Flex, Popover, Text } from "@mantine/core";
 import styled from "styled-components";
 import { AiOutlineLink, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
@@ -106,15 +105,11 @@ export const BottomBar = () => {
 
   React.useEffect(() => {
     setIsPrivate(data?.private ?? true);
+    if (data?.name) window.document.title = `${data.name} | JSON Crack`;
   }, [data]);
 
   return (
     <StyledBottomBar>
-      {data?.name && (
-        <Head>
-          <title>{data.name} | JSON Crack</title>
-        </Head>
-      )}
       <StyledLeft>
         <StyledBottomBarItem onClick={toggleEditor}>
           <BiSolidDockLeft />

diff --git a/src/containers/Modals/AccountModal/index.tsx b/src/containers/Modals/AccountModal/index.tsx
@@ -1,14 +1,10 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Group, Button, Avatar, Text, Divider, Paper, Badge } from "@mantine/core";
-import { IoRocketSharp } from "react-icons/io5";
-import { gaEvent } from "src/lib/utils/gaEvent";
-import useModal from "src/store/useModal";
+import { Modal, Group, Button, Avatar, Text, Divider, Paper, Badge, Anchor } from "@mantine/core";
 import useUser from "src/store/useUser";
 
 export const AccountModal = ({ opened, onClose }: ModalProps) => {
   const user = useUser(state => state.user);
-  const setVisible = useModal(state => state.setVisible);
   const logout = useUser(state => state.logout);
 
   const username =
@@ -47,20 +43,17 @@ export const AccountModal = ({ opened, onClose }: ModalProps) => {
           </div>
         </Group>
       </Paper>
-
-      <Divider py="xs" />
+      <Text fz="xs" c="dimmed">
+        If you&apos;re already a premium user, please login at{" "}
+        <Anchor inherit href="https://todiagram.com" target="_blank">
+          ToDiagram
+        </Anchor>
+        .
+      </Text>
+      <Divider my="xs" />
       <Group justify="right">
         <Button
-          variant="default"
-          leftSection={<IoRocketSharp />}
-          onClick={() => {
-            setVisible("upgrade")(true);
-            gaEvent("Account Modal", "click upgrade premium");
-          }}
-        >
-          Upgrade to Premium
-        </Button>
-        <Button
+          variant="light"
           color="red"
           onClick={() => {
             logout();

diff --git a/src/containers/Modals/LoginModal/index.tsx b/src/containers/Modals/LoginModal/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import type { ModalProps } from "@mantine/core";
 import { Modal, Stack, Button } from "@mantine/core";
 
@@ -8,8 +9,9 @@ export const LoginModal = ({ opened, onClose }: ModalProps) => {
       <Stack py="sm">
         <Button
           variant="default"
-          component="a"
-          href="https://app.jsoncrack.com/sign-in"
+          component={Link}
+          prefetch={false}
+          href="/sign-in"
           rel="noreferrer"
           size="md"
           fullWidth