fix linter

Author: khendrikse

.eslintrc.js

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.eslintrc.json

@@ -8,7 +8,6 @@ const ProgressiveImage = (
   >
 ) => {
   const { src } = props;
-  if (!src) return null
   const isExternal = isExternalImage(src);
 
   const [currentImage, setCurrentImage] = useState(
@@ -27,15 +26,18 @@ const ProgressiveImage = (
   };
 
   useEffect(() => {
-    fetchImage(isExternal ? props.src : require(`images/${props.src}`));
-  }, []);
+    fetchImage(isExternal ? src : require(`images/${src}`));
+  }, [isExternal, src]);
 
   const style = () => ({
     transition: '0.2s filter linear',
     filter: `${loading ? 'blur(20px)' : ''}`
   });
 
+  if (!src) return null;
+
   return (
+    // eslint-disable-next-line @next/next/no-img-element
     <img
       style={{ ...props.style, ...style() }}
       src={currentImage}

components/ProgressiveImage/index.tsx

@@ -1,4 +1,3 @@
-import renderer from 'react-test-renderer';
 import generateSocialMeta, { trimContent } from './generate-social-meta';
 
 describe('trimContent', () => {

helpers/generate-social-meta.test.ts

@@ -1,3 +1,3 @@
-const isExternalImage = (src: string) => src.includes('http' || 'https');
+const isExternalImage = (src: string = '') => src.includes('http' || 'https');
 
 export default isExternalImage;

helpers/is-external-image.ts

@@ -9,8 +9,7 @@
     "test": "jest",
     "lint": "eslint ."
   },
-  "dependencies": {
-    "@babel/eslint-parser": "^7.16.5",
+  "devDependencies": {
     "@babel/preset-react": "^7.16.7",
     "@fontsource/karla": "^4.5.0",
     "@fontsource/rubik": "^4.5.0",
@@ -20,7 +19,6 @@
     "gray-matter": "^4.0.2",
     "imagemin-mozjpeg": "^10.0.0",
     "imagemin-optipng": "^8.0.0",
-    "jest": "^27.4.5",
     "next": "^12.1.0",
     "next-compose-plugins": "^2.2.0",
     "next-optimized-images": "^3.0.0-canary.10",
@@ -33,27 +31,14 @@
     "react-syntax-highlighter": "^15.4.5",
     "remark-gfm": "^3.0.1",
     "sass": "^1.35.2",
-    "showdown": "^1.9.1"
-  },
-  "devDependencies": {
+    "showdown": "^1.9.1",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "@types/react-syntax-highlighter": "^13.5.2",
-    "@types/react-test-renderer": "^17.0.1",
     "@types/webpack-env": "^1.16.3",
     "eslint": "^8.6.0",
-    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "^12.0.7",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^26.0.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.3.2",
-    "react-test-renderer": "^17.0.2",
+    "jest": "^27.4.5",
     "typescript": "^4.5.5"
   }
 }

package.json

@@ -45,7 +45,7 @@ export const getStaticProps: GetStaticProps = async () => {
   const projects = ((context: RequireContext) => {
     const keys = context.keys();
     const values: Array<Value> = keys.map(context);
-    console.log({ keys, values });
+
     const data = keys
       .map((key: string, index: number) => {
         const value: Value = values[index];