chore(root): add formatter

.eslintignore

@@ -0,0 +1,3 @@
+// .eslintignore
+node_modules
+db

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  plugins: ['react', 'prettier'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-props-no-spreading': 'off',
+    'no-plusplus': 'off',
+  },
+};

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore :
+build
+.next
+node_modules

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  tabWidth: 2,
+  printWidth: 80,
+  endOfLine: 'auto',
+  arrowParens: 'always',
+  semi: true,
+  useTabs: false,
+  singleQuote: true,
+  bracketSpacing: true,
+};

components/about/Card.js

@@ -17,7 +17,7 @@ const Card = ({ title, skills }) => (
       {title}
     </Heading>
     {skills.map((skill, index) => (
-      <Text key={index}>{skill}</Text>
+      <Text key={String(index)}>{skill}</Text>
     ))}
   </VStack>
 );

components/about/Description.js

@@ -7,19 +7,13 @@ const Description = () => (
   <Box py={4} lineHeight="tall">
     <Text py={2}>
       Hello, my name is <b>Hendra Agil Syaputra</b>. Usually called{' '}
-      <b>Hendra</b> / <b>Agil</b>. I'm currently {getAge()} years old. Born and
-      live in{' '}
-      {
-        <CustomLink link="https://karanganyarkab.go.id">
-          Karanganyar, Central Java, Indonesia
-        </CustomLink>
-      }
+      <b>Hendra</b> / <b>Agil</b>. I&apos;m currently {getAge()} years old. Born
+      and live in{' '}
+      <CustomLink link="https://karanganyarkab.go.id">
+        Karanganyar, Central Java, Indonesia
+      </CustomLink>
       . Graduated from{' '}
-      {
-        <CustomLink link="https://smkn2kra.sch.id">
-          VHS 2 Karanganyar
-        </CustomLink>
-      }{' '}
+      <CustomLink link="https://smkn2kra.sch.id">VHS 2 Karanganyar</CustomLink>{' '}
       at 2021 as Software Engineering student.
     </Text>
     <Text py={2}>

components/about/Skills.js

@@ -6,7 +6,7 @@ import Card from './Card';
 const Skills = () => (
   <SimpleGrid py={4} w="full" columns={[1, 2, 3, 4]} spacing={6}>
     {about.skills.map((skill, index) => (
-      <Card key={index} title={skill.name} skills={skill.items} />
+      <Card key={String(index)} title={skill.name} skills={skill.items} />
     ))}
   </SimpleGrid>
 );

components/about/Socials.js

@@ -8,11 +8,9 @@ const Socials = () => (
   <VStack pt={2} pb={4} align="start" w="full">
     <Text>
       You can reach me out via email at{' '}
-      {
-        <CustomLink link="mailto:hendraaagil@gmail.com">
-          hendraaagil@gmail.com
-        </CustomLink>
-      }
+      <CustomLink link="mailto:hendraaagil@gmail.com">
+        hendraaagil@gmail.com
+      </CustomLink>
       , or via socials below:
     </Text>
     <Stack
@@ -22,7 +20,7 @@ const Socials = () => (
       spacing={{ base: 3, lg: 6 }}
     >
       {about.socials.map((social, index) => (
-        <SocialButton key={index} name={social.name} url={social.url} />
+        <SocialButton key={String(index)} name={social.name} url={social.url} />
       ))}
     </Stack>
   </VStack>

components/blog/MarkdownComponent.js

@@ -29,7 +29,6 @@ const MarkdownComponent = ({ markdownContent }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[gfm]}
-      children={markdownContent}
       components={{
         a: ({ children, href }) => (
           <Link href={href} isExternal color="brand.blue" textDecor="underline">
@@ -64,12 +63,9 @@ const MarkdownComponent = ({ markdownContent }) => {
               {children}
             </Code>
           ) : (
-            <SyntaxHighlighter
-              style={nord}
-              language={match[1]}
-              children={String(children).replace(/\n$/, '')}
-              showLineNumbers
-            />
+            <SyntaxHighlighter style={nord} language={match[1]} showLineNumbers>
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
           );
         },
         h1: ({ children }) => {
@@ -237,7 +233,9 @@ const MarkdownComponent = ({ markdownContent }) => {
         thead: ({ children }) => <Thead>{children}</Thead>,
         tr: ({ children }) => <Tr>{children}</Tr>,
       }}
-    />
+    >
+      {markdownContent}
+    </ReactMarkdown>
   );
 };
 

components/nav/Navbar.js

@@ -58,7 +58,11 @@ const Navbar = () => {
             {larger && (
               <HStack spacing={10}>
                 {links.map((link, index) => (
-                  <NavLink key={index} link={link.url} name={link.name} />
+                  <NavLink
+                    key={String(index)}
+                    link={link.url}
+                    name={link.name}
+                  />
                 ))}
               </HStack>
             )}

components/nav/menu/MenuDrawer.js

@@ -16,10 +16,10 @@ const MenuDrawer = ({ isOpen, onClose, links }) => (
         <VStack spacing={4}>
           {links.map((link, index) => (
             <NavLink
-              key={index}
+              key={String(index)}
               link={link.url}
               name={link.name}
-              hasBg={true}
+              hasBg
               onClose={onClose}
             />
           ))}

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint ./components/** ./pages/** -c .eslintrc.js --ext js,jsx",
+    "lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.js --fix --ext js,jsx"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.2",
@@ -24,5 +26,15 @@
     "react-markdown": "^6.0.2",
     "react-syntax-highlighter": "^15.4.3",
     "remark-gfm": "^1.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^7.28.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "prettier": "^2.3.1"
   }
 }

pages/blog/[slug].js

@@ -14,9 +14,9 @@ const client = createClient({
 
 export const getStaticPaths = async () => {
   const res = await client.getEntries({ content_type: 'blog' });
-  const paths = res.items.map((item) => {
-    return { params: { slug: item.fields.slug } };
-  });
+  const paths = res.items.map((item) => ({
+    params: { slug: item.fields.slug },
+  }));
 
   return {
     paths,

pages/blog/index.js

@@ -31,7 +31,7 @@ const Blog = ({ blogs }) => {
       <Divider mb={8} />
       <VStack spacing={6}>
         {blogs.map((blog) => {
-          const { slug, summary, title } = blog.fields;
+          const { slug, summary } = blog.fields;
           const { tags } = blog.metadata;
           const { createdAt, id } = blog.sys;
 
@@ -40,7 +40,7 @@ const Blog = ({ blogs }) => {
               key={id}
               slug={slug}
               summary={summary}
-              title={title}
+              title={blog.fields.title}
               tags={tags}
               createdAt={createdAt}
             />

pages/index.js

@@ -7,7 +7,7 @@ export default function Home() {
     <Flex align="center" justify="center" minH="100vh">
       <Box pb="72px" textAlign="center">
         <Heading as="h1" mb={4}>
-          Hello, I'm Hendra Agil 👋
+          Hello, I&apos;m Hendra Agil 👋
         </Heading>
         <Text fontSize="2xl" fontWeight="600">
           Student. {getAge()} years old.

pages/projects.js

@@ -22,7 +22,7 @@ const Projects = () => {
       <SimpleGrid columns={[1, 1, 2]} gap={6}>
         {projects.map((project, index) => (
           <Card
-            key={index}
+            key={String(index)}
             name={project.name}
             thumbnail={project.thumbnail}
             desc={project.desc}