chore: move to next lint

Signed-off-by: Sangam Kumar <[email protected]>
sangamcse · Aug 16, 2022 · 7ceed05 · 7ceed05 · vercel · Aug 16, 2022
1 parent 4c7b70a
commit 7ceed05
Show file tree

Hide file tree

Showing 12 changed files with 1,587 additions and 1,511 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,10 +1,11 @@
 {
-  "extends": [
-    "nextjs"
-  ],
+  "extends": ["next", "prettier"],
   "settings": {
     "import/resolver": {
       "babel-module": {}
     }
+  },
+  "rules": {
+    "react/display-name": "off"
   }
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint:quick
diff --git a/next.config.js b/next.config.js
@@ -11,4 +11,7 @@ module.exports = withPlugins([svgr], {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
+  images: {
+    domains: ['avatars.githubusercontent.com'],
+  },
 });
diff --git a/package.json b/package.json
@@ -17,7 +17,9 @@
     "dev": "next dev -p 3535",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --fix --ext js src && stylelint --fix --config stylelint.config.js src/styles/*.scss"
+    "lint": "next lint && stylelint --fix --config stylelint.config.js src/styles/*.scss",
+    "lint:quick": "yarn lint && pretty-quick --staged",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@mapbox/rehype-prism": "0.5.0",
@@ -34,7 +36,7 @@
     "next-mdx-remote": "4.1",
     "next-seo": "5.5.0",
     "next-svgr": "0.0.2",
-    "postcss": "8.2.4",
+    "postcss": "8.4.16",
     "postcss-preset-env": "6.7.0",
     "react": "17.0",
     "react-dom": "17.0",
@@ -43,30 +45,18 @@
     "tailwindcss": "2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.12.10",
-    "babel-eslint": "9.0.0",
-    "babel-plugin-module-resolver": "4.0.0",
-    "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.0",
-    "eslint-config-nextjs": "1.0.7",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-import-resolver-babel-module": "5.2.0",
-    "eslint-plugin-html": "5.0.3",
-    "eslint-plugin-import": "2.21.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "3.0.1",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "1.7.0",
-    "husky": "4.3.0",
-    "prettier": "1.16.4",
-    "pretty-quick": "2.0.2",
-    "stylelint": "13.7.2",
-    "stylelint-config-standard": "20.0.0",
+    "@babel/core": "7.18.10",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-module-resolver": "4.1.0",
+    "eslint": "8.22.0",
+    "eslint-config-next": "12.2.5",
+    "eslint-config-prettier": "8.5.0",
+    "husky": "8.0.0",
+    "prettier": "2.7.1",
+    "pretty-quick": "3.1.3",
+    "stylelint": "14.10.0",
+    "stylelint-config-standard-scss": "5.0.0",
+    "stylelint-scss": "4.3.0",
     "vercel": "28.0.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint && pretty-quick --staged"
-    }
   }
 }
diff --git a/src/components/About.js b/src/components/About.js
@@ -5,17 +5,17 @@ export const About = () => {
         <div className="px-4">
           <h1>About</h1>
           <p className="text-body">
-            Hi! My name is Sangam. I'm from Bihar, and I'm a Full Stack
-            Developer working as a Senior Software Engineer at{' '}
+            Hi! My name is Sangam. I&apos;m from Bihar, and I&apos;m a Full
+            Stack Developer working as a Senior Software Engineer at{' '}
             <a href="https://www.hackerrank.com">HackerRank</a> in Bangalore,
             India. We build tools to help recruiters hire developers.
           </p>
           <p className="text-body">
-            I love computers and enjoy writing code. I’m particularly interested
-            in backend development, how the system works, its reliability, and
-            scalability. Apart from computers, I enjoy reading, traveling,
-            walking, cooking, and music. If you have any questions or just want
-            to chat, you can reach out to me on{' '}
+            I love computers and enjoy writing code. I&apos;m particularly
+            interested in backend development, how the system works, its
+            reliability, and scalability. Apart from computers, I enjoy reading,
+            traveling, walking, cooking, and music. If you have any questions or
+            just want to chat, you can reach out to me on{' '}
             <a href="https://www.twitter.com/meetsangamcse">Twitter</a> or shoot
             me an <a href="mailto:[email protected]">email</a>.
           </p>

diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { shuffle } from 'lodash';
 import { useTransition, animated } from 'react-spring';
+import Image from 'next/image';
 
 import { allRoles } from 'components/allRoles';
 
@@ -14,7 +15,7 @@ export const Hero = () => {
     const interval = setInterval(() => {
       if (!document?.hasFocus()) return;
 
-      setRoles(currentRoles =>
+      setRoles((currentRoles) =>
         currentRoles.length > 1 ? currentRoles.slice(1) : shuffle(allRoles)
       );
     }, RESELECT_INTERVAL);
@@ -43,7 +44,9 @@ export const Hero = () => {
     <section className="p-8">
       <div className="container flex items-center justify-center flex-wrap sm:flex-nowrap">
         <div className="text-left" style={{ flexBasis: '60ch' }}>
-          <p className="text-3xl mb-1 text-heading">Hi, I’m Sangam and I’m</p>
+          <p className="text-3xl mb-1 text-heading">
+            Hi, I&apos;m Sangam and I&apos;m
+          </p>
           <p className="relative text-4xl text-primary h-24 sm:h-auto">
             {transitions.map(({ item, key, props }) => (
               <animated.span
@@ -56,13 +59,13 @@ export const Hero = () => {
             ))}
           </p>
         </div>
-        <img
-          width="512"
-          height="512"
+        <Image
+          width="256"
+          height="256"
           src="https://avatars.githubusercontent.com/u/26381717?s=512"
           className="rounded-full shadow-lg h-64 w-64 mb-8 sm:mr-16 sm:mb-0"
-          title="Sangam’s avatar"
-          alt="Sangam’s avatar"
+          title="Sangam's avatar"
+          alt="Sangam's avatar"
         />
       </div>
     </section>

diff --git a/src/components/SiteHead.js b/src/components/SiteHead.js
@@ -1,6 +1,6 @@
 import Head from 'next/head';
 
-export const MyHead = props => {
+export const MyHead = (props) => {
   const { children } = props;
 
   return (
@@ -12,13 +12,6 @@ export const MyHead = props => {
       />
       <link rel="icon" href="/favicon.ico" />
       {children}
-      <link
-        as="style"
-        rel="stylesheet preload prefetch"
-        href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap"
-        type="text/css"
-        crossOrigin="anonymous"
-      />
     </Head>
   );
 };
diff --git a/src/components/appearing_image/appearing_image.js b/src/components/appearing_image/appearing_image.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/alt-text */
 import { useCallback } from 'react';
 import { useSpring, animated } from 'react-spring';
 import Image from 'next/image';

diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -9,7 +9,15 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">
-        <Head />
+        <Head>
+          <link
+            as="style"
+            rel="stylesheet preload prefetch"
+            href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap"
+            type="text/css"
+            crossOrigin="anonymous"
+          />
+        </Head>
         <body>
           <Main />
           <NextScript />

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,36 +1,36 @@
-@import './tailwind.scss';
+@import "./tailwind";
 
 .theme-light {
-  --color-primary: theme('colors.blue.700');
-  --color-primary-hover: theme('colors.blue.800');
+  --color-primary: theme("colors.blue.700");
+  --color-primary-hover: theme("colors.blue.800");
 
-  --color-secondary: theme('colors.gray.600');
-  --color-secondary-hover: theme('colors.gray.700');
+  --color-secondary: theme("colors.gray.600");
+  --color-secondary-hover: theme("colors.gray.700");
 
-  --color-muted: theme('colors.gray.300');
-  --color-muted-hover: theme('colors.gray.500');
+  --color-muted: theme("colors.gray.300");
+  --color-muted-hover: theme("colors.gray.500");
 
-  --color-success: theme('colors.green.500');
-  --color-success-hover: theme('colors.green.700');
-  --color-success-background: theme('colors.green.100');
+  --color-success: theme("colors.green.500");
+  --color-success-hover: theme("colors.green.700");
+  --color-success-background: theme("colors.green.100");
 
-  --color-info: theme('colors.blue.300');
-  --color-info-hover: theme('colors.blue.500');
-  --color-info-background: theme('colors.blue.100');
+  --color-info: theme("colors.blue.300");
+  --color-info-hover: theme("colors.blue.500");
+  --color-info-background: theme("colors.blue.100");
 
-  --color-warning: theme('colors.yellow.300');
-  --color-warning-hover: theme('colors.yellow.500');
-  --color-warning-background: theme('colors.yellow.100');
+  --color-warning: theme("colors.yellow.300");
+  --color-warning-hover: theme("colors.yellow.500");
+  --color-warning-background: theme("colors.yellow.100");
 
-  --color-danger: theme('colors.red.500');
-  --color-danger-hover: theme('colors.red.700');
-  --color-danger-background: theme('colors.red.100');
+  --color-danger: theme("colors.red.500");
+  --color-danger-hover: theme("colors.red.700");
+  --color-danger-background: theme("colors.red.100");
 
-  --color-body: theme('colors.gray.700');
-  --color-body-muted: theme('colors.gray.500');
+  --color-body: theme("colors.gray.700");
+  --color-body-muted: theme("colors.gray.500");
 
-  --color-heading: theme('colors.gray.900');
-  --color-heading-muted: theme('colors.gray.600');
+  --color-heading: theme("colors.gray.900");
+  --color-heading-muted: theme("colors.gray.600");
 
   --color-link: #7c3aed;
   --color-link-hover: #a87cf3;
@@ -44,36 +44,36 @@
 }
 
 .theme-dark {
-  --color-primary: theme('colors.blue.300');
-  --color-primary-hover: theme('colors.blue.200');
+  --color-primary: theme("colors.blue.300");
+  --color-primary-hover: theme("colors.blue.200");
 
-  --color-secondary: theme('colors.gray.400');
-  --color-secondary-hover: theme('colors.gray.300');
+  --color-secondary: theme("colors.gray.400");
+  --color-secondary-hover: theme("colors.gray.300");
 
-  --color-muted: theme('colors.gray.700');
-  --color-muted-hover: theme('colors.gray.500');
+  --color-muted: theme("colors.gray.700");
+  --color-muted-hover: theme("colors.gray.500");
 
-  --color-success: theme('colors.green.700');
-  --color-success-hover: theme('colors.green.500');
-  --color-success-background: theme('colors.green.900');
+  --color-success: theme("colors.green.700");
+  --color-success-hover: theme("colors.green.500");
+  --color-success-background: theme("colors.green.900");
 
-  --color-info: theme('colors.blue.700');
-  --color-info-hover: theme('colors.blue.500');
-  --color-info-background: theme('colors.blue.900');
+  --color-info: theme("colors.blue.700");
+  --color-info-hover: theme("colors.blue.500");
+  --color-info-background: theme("colors.blue.900");
 
-  --color-warning: theme('colors.yellow.700');
-  --color-warning-hover: theme('colors.yellow.500');
-  --color-warning-background: theme('colors.yellow.900');
+  --color-warning: theme("colors.yellow.700");
+  --color-warning-hover: theme("colors.yellow.500");
+  --color-warning-background: theme("colors.yellow.900");
 
-  --color-danger: theme('colors.red.700');
-  --color-danger-hover: theme('colors.red.500');
-  --color-danger-background: theme('colors.red.900');
+  --color-danger: theme("colors.red.700");
+  --color-danger-hover: theme("colors.red.500");
+  --color-danger-background: theme("colors.red.900");
 
-  --color-body: theme('colors.gray.300');
-  --color-body-muted: theme('colors.gray.500');
+  --color-body: theme("colors.gray.300");
+  --color-body-muted: theme("colors.gray.500");
 
-  --color-heading: theme('colors.gray.200');
-  --color-heading-muted: theme('colors.gray.400');
+  --color-heading: theme("colors.gray.200");
+  --color-heading-muted: theme("colors.gray.400");
 
   --color-link: #a87cf3;
   --color-link-hover: #7c3aed;
@@ -90,17 +90,17 @@ body,
 html {
   height: 100%;
   min-height: 100vh;
-  min-height: -webkit-fill-available;
+  min-height: stretch;
   color: #222;
 }
 
 body {
   font-family:
-    DM Mono,
+    "DM Mono",
     -apple-system,
     BlinkMacSystemFont,
     roboto,
-    segoe ui,
+    "segoe ui",
     Helvetica,
     Arial,
     sans-serif;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -1,7 +1,9 @@
 module.exports = {
-  extends: 'stylelint-config-standard',
+  extends: ['stylelint-config-standard-scss'],
+  customSyntax: require('postcss-scss'),
+  plugins: ['stylelint-scss'],
   rules: {
-    'at-rule-no-unknown': [
+    'scss/at-rule-no-unknown': [
       true,
       {
         ignoreAtRules: ['extends', 'tailwind'],