linting & lighthouse score improvements

README.md

@@ -30,8 +30,8 @@ JSON Visio is data visualization tool for your json data which seamlessly illust
 ## 🧩 Preview
 
 <div align="center">
-  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/preview/preview_1.png" alt="preview 1" />
-  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/preview/preview_2.png" alt="preview 1" />
+  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/public/preview.png" alt="preview 1" />
+  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/public/preview_2.png" alt="preview 1" />
   </div>
 
 ## License

src/components/Button/index.tsx

@@ -21,7 +21,7 @@ function getButtonStatus(status: keyof typeof ButtonType, theme: DefaultTheme) {
 const StyledButton = styled.button<{ status: keyof typeof ButtonType }>`
   display: block;
   background: ${({ status, theme }) => getButtonStatus(status, theme)};
-  color: ${({ theme }) => theme.FULL_WHITE};
+  color: #ffffff;
   padding: 8px 16px;
   min-width: 60px;
 

src/components/Container/index.tsx

@@ -10,7 +10,7 @@ const StyledContainer = styled.div<{ reverse: boolean }>`
   justify-content: space-between;
   gap: 50px;
   align-items: center;
-  width: 75%;
+  width: 80%;
   margin: 0 auto 160px;
   min-height: calc(100vh - 250px);
   flex-direction: ${({ reverse }) => reverse && "row-reverse"};

src/components/Input/index.tsx

@@ -68,7 +68,7 @@ export const Input = () => {
         onChange={(e) => setValue(e.target.value)}
         placeholder="Search Node"
       />
-      <StyledSearchButton onClick={handleClick}>
+      <StyledSearchButton aria-label="search" onClick={handleClick}>
         {value ? <IoCloseSharp size={18} /> : <AiOutlineSearch size={18} />}
       </StyledSearchButton>
     </StyledInputWrapper>

src/components/Navbar/index.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 const StyledNavbar = styled.div`
   display: flex;
   justify-content: space-between;
-  width: 75%;
+  width: 80%;
   margin: 0 auto 80px;
 
   a:hover {
@@ -23,7 +23,7 @@ const StyledLogo = styled.div`
   font-size: 20px;
   cursor: pointer;
   font-weight: 700;
-  color: #ffffff;
+  color: ${({ theme }) => theme.FULL_WHITE};
 `;
 
 const StyledNav = styled.nav`

src/components/Sidebar/index.tsx

@@ -210,14 +210,14 @@ export const Sidebar: React.FC = () => {
       <StyledBottomWrapper>
         <StyledElement>
           <Link href="https://twitter.com/aykutsarach">
-            <a rel="me" target="_blank">
+            <a aria-label="Twitter" rel="me" target="_blank">
               <AiOutlineTwitter />
             </a>
           </Link>
         </StyledElement>
         <StyledElement>
           <Link href="https://github.com/AykutSarac/jsonvisio.com">
-            <a rel="me" target="_blank">
+            <a aria-label="GitHub" rel="me" target="_blank">
               <AiFillGithub />
             </a>
           </Link>

src/containers/Editor/Tools.tsx

@@ -55,20 +55,20 @@ export const Tools: React.FC = () => {
 
   return (
     <StyledTools>
-      <StyledToolElement onClick={toggleEditor}>
+      <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
         <AiOutlineFullscreen />
       </StyledToolElement>
       <Input />
-      <StyledToolElement onClick={handleSave}>
+      <StyledToolElement aria-label="save" onClick={handleSave}>
         <AiOutlineSave />
       </StyledToolElement>
-      <StyledToolElement>
-        <MdCenterFocusWeak onClick={centerView} />
+      <StyledToolElement aria-label="center canvas" onClick={centerView}>
+        <MdCenterFocusWeak />
       </StyledToolElement>
-      <StyledToolElement onClick={zoomOut}>
+      <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
         <AiOutlineMinus />
       </StyledToolElement>
-      <StyledToolElement onClick={zoomIn}>
+      <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
         <AiOutlinePlus />
       </StyledToolElement>
     </StyledTools>

src/pages/_document.tsx

@@ -60,8 +60,8 @@ class MyDocument extends Document {
           )}
           <SeoTags
             description="Simple visualization tool for your JSON data. No forced structure, paste your JSON and view it instantly."
-            title="JSON Visio"
-            image="https://jsonvisio.com/image.png"
+            title="JSON Visio - Directly into graphs"
+            image="https://jsonvisio.com/preview.png"
           />
           <link rel="icon" href="/favicon.ico" />
           <link rel="preconnect" href="https://fonts.googleapis.com" />

src/pages/editor/index.tsx

@@ -8,6 +8,10 @@ const EditorPage: React.FC = () => {
     <>
       <Head>
         <title>Editor | JSON Visio</title>
+        <meta
+          name="description"
+          content="View your JSON data in graphs instantly."
+        />
       </Head>
       <WithConfig>
         <Editor />

src/pages/index.tsx

@@ -32,11 +32,11 @@ const StyledContent = styled.div`
 `;
 
 const StyledHeader = styled.h2`
-  font-size: 54px;
+  font-size: 3rem;
   color: ${({ theme }) => theme.FULL_WHITE};
 
   @media only screen and (max-width: 768px) {
-    font-size: 36px;
+    font-size: 2.2rem;
   }
 `;
 
@@ -70,7 +70,7 @@ const Home: React.FC = () => {
             </a>
           </Link>
         </StyledContent>
-        <Image src="graphs.svg" width={500} height={400} alt="graphs" />
+        <Image src="421.svg" width={500} height={400} alt="graphs" />
       </Container>
 
       <Container reverse>