chore(v1): fix problem from eslint & fix some styles

hendraaagil · Jun 12, 2021 · 88d81e5 · 88d81e5 · vercel · Jun 12, 2021
1 parent 5e447ad
commit 88d81e5
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 31 deletions.
diff --git a/components/about/Card.js b/components/about/Card.js
@@ -13,7 +13,7 @@ const Card = ({ title, skills }) => (
       transform: 'translateY(-3px);',
     }}
   >
-    <Heading as="h3" size="md" mb={2} fontWeight="600">
+    <Heading as="h3" size="md" mb={2}>
       {title}
     </Heading>
     {skills.map((skill, index) => (

diff --git a/components/about/Description.js b/components/about/Description.js
@@ -1,6 +1,6 @@
 import { Box, Text } from '@chakra-ui/react';
 
-import { getAge } from '../../lib/age';
+import getAge from '../../lib/age';
 import CustomLink from './CustomLink';
 
 const Description = () => (

diff --git a/components/blog/MarkdownComponent.js b/components/blog/MarkdownComponent.js
@@ -31,7 +31,13 @@ const MarkdownComponent = ({ markdownContent }) => {
       remarkPlugins={[gfm]}
       components={{
         a: ({ children, href }) => (
-          <Link href={href} isExternal color="brand.blue" textDecor="underline">
+          <Link
+            href={href}
+            isExternal
+            color="brand.blue"
+            fontWeight="600"
+            textDecor="underline"
+          >
             {children}
           </Link>
         ),
@@ -77,7 +83,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="4xl"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >
@@ -95,7 +100,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="3xl"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >
@@ -113,7 +117,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="2xl"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >
@@ -131,7 +134,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="xl"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >
@@ -149,7 +151,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="lg"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >
@@ -167,7 +168,6 @@ const MarkdownComponent = ({ markdownContent }) => {
                 id={id}
                 fontSize="md"
                 my={3}
-                fontWeight="600"
                 lineHeight="tall"
                 _hover={{ textDecor: 'underline' }}
               >

diff --git a/lib/age.js b/lib/age.js
@@ -1,6 +1,8 @@
-export const getAge = () => {
+const getAge = () => {
   const diff = Date.now() - new Date('2003, 09, 26').getTime();
   const age = new Date(diff);
 
   return Math.abs(age.getUTCFullYear() - 1970);
 };
+
+export default getAge;
diff --git a/next-seo.config.js b/next-seo.config.js
@@ -1,4 +1,4 @@
-import { getAge } from './lib/age';
+import getAge from './lib/age';
 
 const title = 'Hendra Agil';
 const description = `Hello, my name is Hendra Agil Syaputra. Usually called Hendra / Agil. I'm currently ${getAge()} years old. Born and live in Karanganyar, Central Java, Indonesia.`;

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.2",
+    "@chakra-ui/theme-tools": "^1.1.7",
     "@emotion/react": "11",
     "@emotion/styled": "11",
     "contentful": "^8.3.5",

diff --git a/pages/404.js b/pages/404.js
@@ -1,14 +1,20 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 
 const NotFound = () => (
-  <Box py={40} textAlign="center">
-    <Heading as="h1" mb={4} size="3xl">
-      404
-    </Heading>
-    <Text fontSize="2xl" fontWeight="600">
-      Halaman tidak ditemukan.
-    </Text>
-  </Box>
+  <Flex align="center" justify="center" minH="100vh">
+    <Box
+      textAlign="center"
+      bgGradient="linear(to-t, brand.dark, brand.blue)"
+      bgClip="text"
+    >
+      <Heading as="h1" mb={4} size="3xl">
+        404
+      </Heading>
+      <Text fontSize="2xl" fontWeight="600">
+        Halaman tidak ditemukan.
+      </Text>
+    </Box>
+  </Flex>
 );
 
 export default NotFound;
diff --git a/pages/_app.js b/pages/_app.js
@@ -5,8 +5,8 @@ import { Box, ChakraProvider, Container } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import SEO from '../next-seo.config';
-import { theme } from '../styles/theme';
-import { GlobalStyle } from '../styles/GlobalStyle';
+import theme from '../styles/theme';
+import GlobalStyle from '../styles/GlobalStyle';
 import '../styles/css/nprogress.css';
 
 import Navbar from '../components/nav/Navbar';

diff --git a/pages/_document.js b/pages/_document.js
@@ -30,7 +30,7 @@ export default class MyDocument extends NextDocument {
         </Head>
 
         <body>
-          <ColorModeScript />
+          <ColorModeScript initialColorMode="light" />
           <Main />
           <NextScript />
         </body>

diff --git a/pages/index.js b/pages/index.js
@@ -1,6 +1,6 @@
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 
-import { getAge } from '../lib/age';
+import getAge from '../lib/age';
 
 export default function Home() {
   return (

diff --git a/styles/GlobalStyle.js b/styles/GlobalStyle.js
@@ -1,6 +1,6 @@
 import { Global, css } from '@emotion/react';
 
-export const GlobalStyle = ({ children }) => (
+const GlobalStyle = ({ children }) => (
   <>
     <Global
       styles={css`
@@ -27,10 +27,6 @@ export const GlobalStyle = ({ children }) => (
           scoll-behavior: smooth;
           cursor: default;
         }
-        b,
-        strong {
-          font-weight: 600;
-        }
         #__next {
           display: flex;
           flex-direction: column;
@@ -44,3 +40,5 @@ export const GlobalStyle = ({ children }) => (
     {children}
   </>
 );
+
+export default GlobalStyle;
diff --git a/styles/theme.js b/styles/theme.js
@@ -9,7 +9,7 @@ const breakpoints = createBreakpoints({
   '2xl': '1440px',
 });
 
-export const theme = extendTheme({
+const theme = extendTheme({
   fonts: {
     heading: `'Lexend', ${defaultTheme.fonts.heading}`,
     body: `'Lexend', ${defaultTheme.fonts.body}`,
@@ -23,3 +23,5 @@ export const theme = extendTheme({
   },
   breakpoints,
 });
+
+export default theme;
diff --git a/yarn.lock b/yarn.lock
@@ -555,7 +555,7 @@
     "@chakra-ui/form-control" "1.3.6"
     "@chakra-ui/utils" "1.8.0"
 
-"@chakra-ui/theme-tools@1.1.7":
+"@chakra-ui/theme-tools@1.1.7", "@chakra-ui/theme-tools@^1.1.7":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.1.7.tgz#ffd3dc2d22a935e1a1df47b155c4cef60ff3f603"
   integrity sha512-i8KpxjgoQPsoWAyHX+4kRMSioN9WVfyky+2sdFDHhEuDNL/iNYfKQMZjt8RR67apK/dSswMqh5UF2lWSM+lQhw==