Merge pull request #28 from arifszn/Add-formatting-and-style-guide

build: add formatting and style guide

.eslintignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.eslintrc.js

@@ -0,0 +1,29 @@
+// .eslintrc.js
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

.prettierignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "singleQuote": true,
+  "tabWidth": 2
+}

package.json

@@ -15,7 +15,11 @@
     "build": "vite build",
     "preview": "vite preview",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint --ext .js,.jsx .",
+    "lint:fix": "eslint --ext .js,.jsx --fix .",
+    "prettier": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
+    "prettier:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
     "react": "^17.0.2",
@@ -27,9 +31,14 @@
     "autoprefixer": "^10.4.4",
     "axios": "^0.26.1",
     "daisyui": "^2.11.0",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
     "gh-pages": "^3.2.3",
     "moment": "^2.29.1",
     "postcss": "^8.4.12",
+    "prettier": "^2.6.0",
     "prop-types": "^15.8.1",
     "react-helmet-async": "^1.2.3",
     "react-hotjar": "^5.0.0",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/avatar-card/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { skeleton } from '../../helpers/utils';
+import { fallbackImage, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
 const AvatarCard = ({ profile, loading }) => {
@@ -54,6 +54,7 @@ const AvatarCard = ({ profile, loading }) => {
 
 AvatarCard.propTypes = {
   profile: PropTypes.object,
+  loading: PropTypes.bool,
 };
 
 export default AvatarCard;

src/components/blog/index.jsx

@@ -1,10 +1,10 @@
 import { getDevtoArticle, getMediumArticle } from 'article-api';
 import moment from 'moment';
 import { Fragment, useEffect, useState } from 'react';
-import { CgHashtag } from 'react-icons/cg';
 import config from '../../ezprofile.config';
 import { ga, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
+import PropTypes from 'prop-types';
 
 const displaySection = () => {
   if (
@@ -201,4 +201,8 @@ const Blog = ({ loading }) => {
   );
 };
 
+Blog.propTypes = {
+  loading: PropTypes.bool,
+};
+
 export default Blog;

src/components/details/index.jsx

@@ -18,7 +18,12 @@ import config from '../../ezprofile.config';
 
 const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
-    <div className="flex justify-start py-2 px-1 items-center">
+    <a
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+      className="flex justify-start py-2 px-1 items-center"
+    >
       <span className="w-2 m-2">{icon}</span>
       <div className="flex-grow font-medium px-2">{title}</div>
       <div
@@ -26,18 +31,15 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
           skeleton ? 'flex-grow' : ''
         } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
       >
-        <a
+        <div
-          href={link}
-          target="_blank"
-          rel="noreferrer"
           style={{
             wordBreak: 'break-word',
           }}
         >
           {value}
-        </a>
+        </div>
       </div>
-    </div>
+    </a>
   );
 };
 
@@ -187,6 +189,15 @@ const Details = ({ profile, loading }) => {
 
 Details.propTypes = {
   profile: PropTypes.object,
+  loading: PropTypes.bool,
+};
+
+ListItem.propTypes = {
+  icon: PropTypes.node,
+  title: PropTypes.node,
+  value: PropTypes.node,
+  link: PropTypes.string,
+  skeleton: PropTypes.bool,
 };
 
 export default Details;

src/components/education/index.jsx

@@ -1,7 +1,7 @@
-import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 import { Fragment } from 'react';
+import PropTypes from 'prop-types';
 
 const ListItem = ({ time, degree, institution }) => (
   <li className="mb-5 ml-4">
@@ -79,4 +79,14 @@ const Education = ({ loading }) => {
   );
 };
 
+Education.propTypes = {
+  loading: PropTypes.bool,
+};
+
+ListItem.propTypes = {
+  time: PropTypes.node,
+  degree: PropTypes.node,
+  institution: PropTypes.node,
+};
+
 export default Education;

src/components/experience/index.jsx

@@ -1,7 +1,7 @@
-import { GoPrimitiveDot } from 'react-icons/go';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
 import { Fragment } from 'react';
+import PropTypes from 'prop-types';
 
 const ListItem = ({ time, position, company }) => (
   <li className="mb-5 ml-4">
@@ -79,4 +79,14 @@ const Experience = ({ loading }) => {
   );
 };
 
+ListItem.propTypes = {
+  time: PropTypes.node,
+  position: PropTypes.node,
+  company: PropTypes.node,
+};
+
+Experience.propTypes = {
+  loading: PropTypes.bool,
+};
+
 export default Experience;

src/components/head-tag-editor/index.jsx

@@ -31,9 +31,9 @@ const HeadTagEditor = ({ profile, theme }) => {
 
           <meta name="description" content={profile.bio} />
 
-          <meta itemprop="name" content={`Portfolio of ${profile.name}`} />
+          <meta itemProp="name" content={`Portfolio of ${profile.name}`} />
-          <meta itemprop="description" content={profile.bio} />
+          <meta itemProp="description" content={profile.bio} />
-          <meta itemprop="image" content={profile.avatar} />
+          <meta itemProp="image" content={profile.avatar} />
 
           <meta
             property="og:url"
@@ -60,6 +60,7 @@ const HeadTagEditor = ({ profile, theme }) => {
 
 HeadTagEditor.propTypes = {
   profile: PropTypes.object,
+  theme: PropTypes.string,
 };
 
 export default HeadTagEditor;

src/components/lazy-image/index.jsx

@@ -1,4 +1,5 @@
 import { useState, Fragment, useEffect } from 'react';
+import PropTypes from 'prop-types';
 
 const LazyImage = ({ placeholder, src, alt, ...rest }) => {
   const [loading, setLoading] = useState(true);
@@ -19,4 +20,10 @@ const LazyImage = ({ placeholder, src, alt, ...rest }) => {
   );
 };
 
+LazyImage.propTypes = {
+  placeholder: PropTypes.node,
+  alt: PropTypes.string,
+  src: PropTypes.string,
+};
+
 export default LazyImage;

src/components/project/index.jsx

@@ -167,6 +167,7 @@ const Project = ({ repo, loading }) => {
 
 Project.propTypes = {
   repo: PropTypes.array,
+  loading: PropTypes.bool,
 };
 
 export default Project;

src/components/skill/index.jsx

@@ -1,5 +1,6 @@
 import config from '../../ezprofile.config';
 import { skeleton } from '../../helpers/utils';
+import PropTypes from 'prop-types';
 
 const Skill = ({ loading }) => {
   const renderSkeleton = () => {
@@ -50,4 +51,8 @@ const Skill = ({ loading }) => {
   );
 };
 
+Skill.propTypes = {
+  loading: PropTypes.bool,
+};
+
 export default Skill;

src/components/theme-changer/index.jsx

@@ -1,6 +1,7 @@
 import { AiOutlineControl } from 'react-icons/ai';
 import { skeleton } from '../../helpers/utils';
 import config from '../../ezprofile.config';
+import PropTypes from 'prop-types';
 
 const ThemeChanger = ({ theme, setTheme, loading }) => {
   const changeTheme = (e, selectedTheme) => {
@@ -88,4 +89,10 @@ const ThemeChanger = ({ theme, setTheme, loading }) => {
   );
 };
 
+ThemeChanger.propTypes = {
+  theme: PropTypes.string,
+  setTheme: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
 export default ThemeChanger;