update nextjs to v13

next.config.js

@@ -1,15 +1,9 @@
-const withPWA = require("next-pwa")({
-  dest: "public",
-  register: true,
-  disable: process.env.NODE_ENV === "development",
-  scope: "/editor",
-});
-
 /**
  * @type {import('next').NextConfig}
  */
-const nextConfig = {
+module.exports = {
   reactStrictMode: false,
+  compiler: {
+    styledComponents: true
+  }
 };
-
-module.exports = withPWA(nextConfig);

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.4.6",
+    "@next/font": "^13.1.6",
     "@sentry/nextjs": "^7.31.1",
     "@tanstack/react-query": "^4.22.0",
     "allotment": "^1.17.1",
@@ -24,7 +25,7 @@
     "jsonc-parser": "^3.2.0",
     "lodash.debounce": "^4.0.8",
     "lz-string": "^1.4.4",
-    "next": "^12.3.1",
+    "next": "^13.1.6",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
@@ -50,7 +51,6 @@
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.4",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "next-pwa": "5.6.0",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",
     "typescript": "4.9.4"

src/components/Button/index.tsx

@@ -40,7 +40,6 @@ const StyledButton = styled.button<{
   min-width: 70px;
   min-height: 32px;
   border-radius: 3px;
-  font-family: "Mona Sans";
   font-size: 14px;
   font-weight: 500;
   width: ${({ block }) => (block ? "-webkit-fill-available" : "fit-content")};

src/components/CustomNode/styles.tsx

@@ -1,6 +1,13 @@
+import { Roboto_Mono } from "@next/font/google";
 import { LinkItUrl } from "react-linkify-it";
 import styled, { DefaultTheme } from "styled-components";
 
+const robotoMono = Roboto_Mono({
+  weight: "500",
+  subsets: ["latin"],
+  display: "auto"
+});
+
 function getTypeColor(value: string, theme: DefaultTheme) {
   if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
   if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
@@ -24,10 +31,7 @@ export const StyledForeignObject = styled.foreignObject<{
   color: ${({ theme }) => theme.NODE_COLORS.TEXT};
   pointer-events: none;
   padding: ${({ isObject }) => isObject && "10px"};
-
-  * {
-    font-family: "Roboto Mono", monospace;
-  }
+  font-family: ${robotoMono.style.fontFamily};
 
   &.searched {
     border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};

src/components/Footer/index.tsx

@@ -44,9 +44,7 @@ export const Footer = () => (
   <StyledFooter>
     <StyledFooterText>
       <Link href="/">
-        <a>
-          <img width="120" height="20" src="assets/icon.png" alt="icon" loading="lazy" />
-        </a>
+        <img width="120" height="20" src="assets/icon.png" alt="icon" loading="lazy" />
       </Link>
       <span>
         © {new Date().getFullYear()} JSON Crack - {pkg.version}

src/components/Graph/index.tsx

@@ -15,10 +15,10 @@ interface GraphProps {
   setSelectedNode: (node: [string, string][]) => void;
 }
 
-const StyledEditorWrapper = styled.div`
+const StyledEditorWrapper = styled.div<{ widget: boolean }>`
   position: absolute;
   width: 100%;
-  height: calc(100vh - 36px);
+  height: ${({ widget }) => widget ? "calc(100vh - 36px)" : "calc(100vh - 65px)"};
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   background-image: ${({ theme }) =>
     `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
@@ -109,7 +109,7 @@ const GraphComponent = ({ isWidget = false, openModal, setSelectedNode }: GraphP
   }
 
   return (
-    <StyledEditorWrapper onContextMenu={e => e.preventDefault()}>
+    <StyledEditorWrapper onContextMenu={e => e.preventDefault()} widget={isWidget}>
       <Loading message="Painting graph..." loading={loading} />
       <TransformWrapper
         maxScale={2}

src/components/Modal/styles.tsx

@@ -40,8 +40,8 @@ export const Title = styled.h2`
   align-items: center;
   gap: 5px;
   color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  font-size: 20px !important;
-  margin: 0 !important;
+  font-size: 20px;
+  margin: 0;
 `;
 
 export const HeaderWrapper = styled.div`
@@ -52,6 +52,7 @@ export const HeaderWrapper = styled.div`
 
 export const ContentWrapper = styled.div`
   background: ${({ theme }) => theme.MODAL_BACKGROUND};
+  color: ${({ theme }) => theme.TEXT_NORMAL};
   padding: 16px;
   overflow: hidden auto;
   max-height: 500px;

src/components/Tooltip/index.tsx

@@ -17,7 +17,6 @@ const StyledTooltip = styled.div`
   border-radius: 5px;
   padding: 6px 8px;
   white-space: nowrap;
-  font-family: "Mona Sans";
   font-size: 16px;
   user-select: none;
   font-weight: 500;

src/constants/globalStyle.ts

@@ -1,37 +1,19 @@
 import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
-  @font-face {
-    font-family: 'Mona Sans';
-    src:
-      url('assets/Mona-Sans.woff2') format('woff2 supports variations'),
-      url('assets/Mona-Sans.woff2') format('woff2-variations');
-    font-weight: 200 900;
-    font-stretch: 75% 125%;
-    font-display: swap;
-  }
-
-  svg {
-    vertical-align: top;
-  }
-
-  h1, h2, h3, h4, p {
-    font-family: 'Mona Sans';
-  }
-
   html, body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     color: ${({ theme }) => theme.FULL_WHITE};
-    font-family: 'Mona Sans';
+    font-family: var(--mona-sans);
     font-weight: 400;
     font-size: 16px;
     height: 100%;
     background-color: #000000;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
-      background-attachment: fixed;
-      background-size: cover;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: cover;
 
     @media only screen and (max-width: 768px) {
       background-position: right;
@@ -46,17 +28,20 @@ const GlobalStyle = createGlobalStyle`
   .hide {
     display: none;
   }
+
+  svg {
+    vertical-align: top;
+  }
+
   
   a {
     text-decoration: none;
     color: unset;
     padding: 0;
     margin: 0;
-    font-family: 'Roboto', sans-serif;
   }
 
   button {
-    font-family: 'Mona Sans';
     border: none;
     outline: none;
     background: transparent;
@@ -64,13 +49,12 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-weight: 800;
   }
 
   #carbonads * {
-  margin: initial;
-  padding: initial;
-  line-height: initial;
+    margin: initial;
+    padding: initial;
+    line-height: initial;
   }
 
   #carbonads {
@@ -90,7 +74,6 @@ const GlobalStyle = createGlobalStyle`
   }
 
   #carbonads > span {
-
     min-width: 18.75em;
     max-width: clamp(18.75em, 22.5em, 24.5em);
     min-height: 100px;

src/containers/Editor/BottomBar.tsx

@@ -22,8 +22,8 @@ const StyledBottomBar = styled.div`
   justify-content: space-between;
   border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
   background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  max-height: 28px;
-  height: 28px;
+  max-height: 27px;
+  height: 27px;
   padding: 0 6px;
 
   @media only screen and (max-width: 768px) {

src/containers/Editor/JsonEditor/index.tsx

@@ -7,9 +7,9 @@ const StyledEditorWrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
   user-select: none;
 `;
+
 export const JsonEditor: React.FC = () => {
   return (
     <StyledEditorWrapper>

src/containers/Home/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
-import Link from "next/link";
 import Script from "next/script";
 import { AiOutlineRight } from "react-icons/ai";
 import {
@@ -33,12 +32,8 @@ const SyntaxHighlighter = dynamic(
 const Navbar = () => (
   <Styles.StyledNavbar>
     <Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
-    <Link href="#features" passHref>
-      <Styles.StyledNavLink>Features</Styles.StyledNavLink>
-    </Link>
-    <Link href="#sponsor" passHref>
-      <Styles.StyledNavLink>Sponsor</Styles.StyledNavLink>
-    </Link>
+    <Styles.StyledNavLink href="#features">Features</Styles.StyledNavLink>
+    <Styles.StyledNavLink href="#sponsor">Sponsor</Styles.StyledNavLink>
     <Styles.StyledNavLink
       href="https://github.com/AykutSarac/jsoncrack.com"
       target="_blank"
@@ -46,9 +41,7 @@ const Navbar = () => (
     >
       GitHub
     </Styles.StyledNavLink>
-    <Link href="docs" passHref>
-      <Styles.StyledNavLink>Documentation</Styles.StyledNavLink>
-    </Link>
+    <Styles.StyledNavLink href="docs">Documentation</Styles.StyledNavLink>
   </Styles.StyledNavbar>
 );
 

src/containers/Home/styles.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { Button } from "src/components/Button";
 import styled from "styled-components";
 
@@ -61,7 +62,6 @@ export const StyledHome = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8em;
-  font-family: "Roboto", sans-serif;
 
   * {
     box-sizing: border-box;
@@ -109,7 +109,7 @@ export const StyledHeroSection = styled.section`
   }
 `;
 
-export const StyledNavLink = styled.a`
+export const StyledNavLink = styled(Link)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -163,7 +163,6 @@ export const StyledButton = styled(Button)`
   height: 46px;
 
   div {
-    font-family: "Mona Sans";
     font-weight: 700;
     font-size: 1rem;
   }
@@ -176,7 +175,6 @@ export const StyledSponsorButton = styled(Button)<{ isBlue?: boolean }>`
   padding: 12px 24px;
 
   div {
-    font-family: "Roboto", sans-serif;
     font-weight: 700;
     font-size: 16px;
   }

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { AppProps } from "next/app";
+import localFont from "@next/font/local";
 import { init } from "@sentry/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "react-hot-toast";
@@ -10,6 +11,12 @@ import { ModalController } from "src/containers/ModalController";
 import useStored from "src/store/useStored";
 import { ThemeProvider } from "styled-components";
 
+const monaSans = localFont({
+  src: "./Mona-Sans.woff2",
+  variable: "--mona-sans",
+  display: "auto",
+});
+
 if (process.env.NODE_ENV !== "development") {
   init({
     dsn: "https://[email protected]/6495191",
@@ -40,22 +47,24 @@ function JsonCrack({ Component, pageProps }: AppProps) {
         <GoogleAnalytics />
         <ThemeProvider theme={lightmode ? lightTheme : darkTheme}>
           <GlobalStyle />
-          <Component {...pageProps} />
-          <Toaster
-            position="top-right"
-            containerStyle={{
-              top: 40,
-              right: 6,
-              fontSize: 14,
-            }}
-            toastOptions={{
-              style: {
-                background: "#4D4D4D",
-                color: "#B9BBBE",
-              },
-            }}
-          />
-          <ModalController />
+          <main className={monaSans.className}>
+            <Component {...pageProps} />
+            <ModalController />
+            <Toaster
+              position="top-right"
+              containerStyle={{
+                top: 40,
+                right: 6,
+                fontSize: 14,
+              }}
+              toastOptions={{
+                style: {
+                  background: "#4D4D4D",
+                  color: "#B9BBBE",
+                },
+              }}
+            />
+          </main>
         </ThemeProvider>
       </QueryClientProvider>
     );

src/pages/_document.tsx

@@ -15,15 +15,11 @@ class MyDocument extends Document {
           <meta name="theme-color" content="#36393E" />
           <link rel="manifest" href="/manifest.json" />
           <link rel="icon" href="/favicon.ico" />
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Roboto:wght@400;500;700&display=swap"
-            rel="stylesheet"
-            crossOrigin="anonymous"
+          <Script
+            strategy="afterInteractive"
+            src="//m.servedby-buysellads.com/monetization.js"
+            type="text/javascript"
           />
-          <link rel="preload" href="assets/Mona-Sans.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
-          <Script strategy="afterInteractive" src="//m.servedby-buysellads.com/monetization.js" type="text/javascript" />
         </Head>
         <body>
           <Main />