Prettier conf (#36)

* Prettier config
* Update .gitignore
* Add husky and lint-staged to package.json

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# eslint
+.eslintcache

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
+  "semi": false,
   "endOfLine": "lf"
 }

README.md

@@ -31,15 +31,16 @@ npm run dev
 Contributors names and contact info
 
 - [@oktay](https://github.com/oktay)
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details
 
 ## Sources
 
-* [NextJS](https://nextjs.org/)
-* [Tailwind CSS](https://tailwindcss.com/)
-* [Dato CMS](https://www.datocms.com/docs/next-js)
-* [Github API](https://docs.github.com/en/rest)
-* [Dribbble API](https://developer.dribbble.com/v2/)
-* [Next-Intl](https://www.thisdot.co/blog/next-js-adding-localization-with-next-intl)
+- [NextJS](https://nextjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Dato CMS](https://www.datocms.com/docs/next-js)
+- [Github API](https://docs.github.com/en/rest)
+- [Dribbble API](https://developer.dribbble.com/v2/)
+- [Next-Intl](https://www.thisdot.co/blog/next-js-adding-localization-with-next-intl)

components/avatar.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/image'
 
 export default function Avatar({ img, alt }) {
   return (
@@ -7,5 +7,5 @@ export default function Avatar({ img, alt }) {
         <Image src={img} alt={alt} layout="fill" />
       </div>
     </figure>
-  );
+  )
 }

components/button.js

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import cx from 'classnames'
 
 export default function Button({
   className,
@@ -35,5 +35,5 @@ export default function Button({
         </span>
       </span>
     </a>
-  );
+  )
 }

components/credits-link.js

@@ -4,7 +4,7 @@ export default function CreditsLink({ href, label, icon }) {
     action: 'Credits Click',
     target: 'Footer Credits',
     label: label,
-  };
+  }
 
   return (
     <a
@@ -18,5 +18,5 @@ export default function CreditsLink({ href, label, icon }) {
       <span className="text-sm rounded-full">{icon}</span>
       <span>{label}</span>
     </a>
-  );
+  )
 }

components/email.js

@@ -1,5 +1,5 @@
-import Link from 'next/link';
-import { FiArrowUpRight, FiMail } from 'react-icons/fi';
+import Link from 'next/link'
+import { FiArrowUpRight, FiMail } from 'react-icons/fi'
 
 export default function Email({ href, children }) {
   return (
@@ -16,5 +16,5 @@ export default function Email({ href, children }) {
         <span className="text-lg font-semibold">{children}</span>
       </a>
     </Link>
-  );
+  )
 }

components/footer.js

@@ -1,16 +1,16 @@
-import { meta } from 'site.config';
-import { BsDribbble, BsGithub, BsLinkedin } from 'react-icons/bs';
+import { meta } from 'site.config'
+import { BsDribbble, BsGithub, BsLinkedin } from 'react-icons/bs'
 import {
   SiDatocms,
   SiDribbble,
   SiGithub,
   SiNextdotjs,
   SiTailwindcss,
   SiVercel,
-} from 'react-icons/si';
-import SocialLink from '@components/social-link';
-import Email from '@components/email';
-import CreditsLink from './credits-link';
+} from 'react-icons/si'
+import SocialLink from '@components/social-link'
+import Email from '@components/email'
+import CreditsLink from './credits-link'
 
 export default function Footer() {
   const links = [
@@ -26,7 +26,7 @@ export default function Footer() {
       ...meta.socials.dribbble,
       icon: <BsDribbble />,
     },
-  ];
+  ]
 
   const credits = [
     {
@@ -59,7 +59,7 @@ export default function Footer() {
       label: 'Dribbble API',
       icon: <SiDribbble />,
     },
-  ];
+  ]
 
   return (
     <footer className="border-t pt-8 dark:border-t-dark-gray">
@@ -73,9 +73,7 @@ export default function Footer() {
             ))}
           </ul>
           <div className="hidden md:block">
-            <Email href={`mailto:${meta.email}`}>
-              {meta.email}
-            </Email>
+            <Email href={`mailto:${meta.email}`}>{meta.email}</Email>
           </div>
         </div>
       </div>
@@ -96,5 +94,5 @@ export default function Footer() {
         </div>
       </div>
     </footer>
-  );
+  )
 }

components/header.js

@@ -1,6 +1,6 @@
-import Navigation from '@components/navigation';
-import Email from '@components/email';
-import { meta } from 'site.config';
+import Navigation from '@components/navigation'
+import Email from '@components/email'
+import { meta } from 'site.config'
 
 export default function Header() {
   return (
@@ -14,5 +14,5 @@ export default function Header() {
         </div>
       </header>
     </div>
-  );
+  )
 }

components/locale-switch.js

@@ -1,12 +1,12 @@
-import Link from 'next/link';
-import cx from 'classnames';
-import { useRouter } from 'next/router';
-import { HiTranslate } from 'react-icons/hi';
-import { useTranslations } from 'next-intl';
+import Link from 'next/link'
+import cx from 'classnames'
+import { useRouter } from 'next/router'
+import { HiTranslate } from 'react-icons/hi'
+import { useTranslations } from 'next-intl'
 
 export default function LocaleSwitch() {
-  const { route, locale } = useRouter();
-  const t = useTranslations('Global');
+  const { route, locale } = useRouter()
+  const t = useTranslations('Global')
 
   return (
     <Link href={route} locale={locale === 'tr' ? 'en' : 'tr'}>
@@ -43,5 +43,5 @@ export default function LocaleSwitch() {
         </span>
       </a>
     </Link>
-  );
+  )
 }

components/navigation.js

@@ -1,13 +1,13 @@
-import { useState } from 'react';
-import { FiMenu } from 'react-icons/fi';
-import { useTranslations } from 'next-intl';
-import Button from '@components/button';
-import cx from 'classnames';
-import LocaleSwitch from './locale-switch';
+import { useState } from 'react'
+import { FiMenu } from 'react-icons/fi'
+import { useTranslations } from 'next-intl'
+import Button from '@components/button'
+import cx from 'classnames'
+import LocaleSwitch from './locale-switch'
 
 export default function Navigation() {
-  const [show, setShow] = useState(false);
-  const t = useTranslations('Global');
+  const [show, setShow] = useState(false)
+  const t = useTranslations('Global')
 
   const links = [
     {
@@ -26,17 +26,17 @@ export default function Navigation() {
       href: '#projects',
       label: t('nav-projects'),
     },
-  ];
+  ]
 
   function onClick(label) {
     const analyticsData = {
       event: 'Click',
       action: 'Navigation Click',
       target: 'Main Navigation',
       label: label,
-    };
+    }
 
-    window.dataLayer.push(analyticsData);
+    window.dataLayer.push(analyticsData)
   }
 
   function onMobileClick(label) {
@@ -45,9 +45,9 @@ export default function Navigation() {
       action: 'MobileNavigation Click',
       target: 'Mobile Navigation',
       label: label,
-    };
+    }
 
-    window.dataLayer.push(analyticsData);
+    window.dataLayer.push(analyticsData)
   }
 
   return (
@@ -75,7 +75,9 @@ export default function Navigation() {
       </ul>
       <ul
         className={cx(
-          show ? 'translate-y-0' : 'opacity-0 -translate-y-full pointer-events-none',
+          show
+            ? 'translate-y-0'
+            : 'opacity-0 -translate-y-full pointer-events-none',
           'bg-zinc-900 flex flex-col absolute top-32 left-0 -z-10 w-full transform origin-top transition lg:hidden',
         )}
       >
@@ -95,5 +97,5 @@ export default function Navigation() {
         </li>
       </ul>
     </nav>
-  );
+  )
 }

components/project-card.js

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from 'next/image'
 
 export default function ProjectCard({
   id,
@@ -14,9 +14,9 @@ export default function ProjectCard({
       action: 'Project Click',
       target: 'Project Card',
       label: title,
-    };
+    }
 
-    window.dataLayer.push(analyticsData);
+    window.dataLayer.push(analyticsData)
   }
   return (
     <div key={id} className="relative rounded-lg overflow-hidden">
@@ -26,7 +26,10 @@ export default function ProjectCard({
       <div className="absolute inset-0 flex flex-col p-8">
         <ul className="flex justify-end space-x-4">
           {tags.split(',').map((tag, index) => (
-            <li key={index} className="bg-white border dark:border-0 dark:bg-black dark:text-white px-2 rounded-full">
+            <li
+              key={index}
+              className="bg-white border dark:border-0 dark:bg-black dark:text-white px-2 rounded-full"
+            >
               <span className="text-zinc-400">#</span>
               {tag}
             </li>
@@ -37,7 +40,13 @@ export default function ProjectCard({
           <p className="text-zinc-600 dark:text-zinc-200">{description}</p>
         </div>
       </div>
-      <a href={url} onClick={onClick} target="_blank" rel="noreferrer" className="absolute inset-0"></a>
+      <a
+        href={url}
+        onClick={onClick}
+        target="_blank"
+        rel="noreferrer"
+        className="absolute inset-0"
+      ></a>
     </div>
-  );
+  )
 }

components/repo-card.js

@@ -1,4 +1,4 @@
-import { BsStar, BsEye, BsFileEarmarkCode } from 'react-icons/bs';
+import { BsStar, BsEye, BsFileEarmarkCode } from 'react-icons/bs'
 
 export default function RepoCard({
   id,
@@ -18,9 +18,9 @@ export default function RepoCard({
       action: 'Repository Click',
       target: 'Github Section Repository Card',
       label: name,
-    };
+    }
 
-    window.dataLayer.push(analyticsData);
+    window.dataLayer.push(analyticsData)
   }
 
   // function onHomepageClick() {
@@ -71,5 +71,5 @@ export default function RepoCard({
         </div>
       </div>
     </div>
-  );
+  )
 }

components/scroll-top.js

@@ -1,12 +1,12 @@
-import cx from 'classnames';
-import useScrollPosition from '@react-hook/window-scroll';
-import { FiArrowUp } from 'react-icons/fi';
-import { useTranslations } from 'next-intl';
-import Button from './button';
+import cx from 'classnames'
+import useScrollPosition from '@react-hook/window-scroll'
+import { FiArrowUp } from 'react-icons/fi'
+import { useTranslations } from 'next-intl'
+import Button from './button'
 
 export default function ScrollTop() {
-  const scrollPosition = useScrollPosition();
-  const t = useTranslations('Global');
+  const scrollPosition = useScrollPosition()
+  const t = useTranslations('Global')
 
   return (
     <div
@@ -24,5 +24,5 @@ export default function ScrollTop() {
         <span className="sr-only">{t('scroll')}</span>
       </Button>
     </div>
-  );
+  )
 }