[update]: jest threshold

[add]: buymeacoffee support
Merge pull request #325 from DenverCoderOne/add-github-streak-stats
2020-12-04 16:43:42 +05:30 · 2020-12-04 16:34:31 +05:30 · 2020-11-29 12:46:17 +05:30 · 2020-11-04 04:36:18 +02:00 · 2020-10-31 22:12:22 +05:30 · 2020-10-31 21:37:21 +05:30
20 changed files with 5224 additions and 451 deletions
@@ -76,6 +76,8 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C

 - **GitHub Top Skills**

+- **GitHub Streak Stats**
+
 - **Dynamic Dev(.)to Blogs** (GitHub Action)

 - **Dynamic Medium Blogs** (GitHub Action)
@@ -84,6 +86,8 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C

 - **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)

+- **Buy Me A Coffee button**
+
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.

@@ -132,6 +136,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
 - [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
+- [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
 - [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)

 ## 🙇 Sponsors
@@ -158,32 +163,6 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>

-## Contributors ✨
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Hardik0307"><img src="https://avatars3.githubusercontent.com/u/41434099?v=4" width="100px;" alt=""/><br /><sub><b>Hardik Bagada</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Hardik0307" title="Code">💻</a></td>
-    <td align="center"><a href="https://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
-    <td align="center"><a href="https://kkvanonymous.github.io/"><img src="https://avatars3.githubusercontent.com/u/58628586?v=4" width="100px;" alt=""/><br /><sub><b>Kunal Kumar Verma</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=KKVANONYMOUS" title="Code">💻</a></td>
-    <td align="center"><a href="http://jaideepghosh.blogspot.com"><img src="https://avatars2.githubusercontent.com/u/3909648?v=4" width="100px;" alt=""/><br /><sub><b>Jaideep Ghosh</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=jaideepghosh" title="Code">💻</a></td>
-    <td align="center"><a href="http://yashkandalkar.github.io"><img src="https://avatars0.githubusercontent.com/u/35102959?v=4" width="100px;" alt=""/><br /><sub><b>yash</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=YashKandalkar" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/abhijit-hota"><img src="https://avatars0.githubusercontent.com/u/8116174?v=4" width="100px;" alt=""/><br /><sub><b>Abhijit Hota</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Code">💻</a> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://maddoxx88.github.io/"><img src="https://avatars1.githubusercontent.com/u/34238672?v=4" width="100px;" alt=""/><br /><sub><b>Sunit Shirke</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Maddoxx88" title="Code">💻</a></td>
-    <td align="center"><a href="https://www.gsavitha.in"><img src="https://avatars0.githubusercontent.com/u/31612459?v=4" width="100px;" alt=""/><br /><sub><b>Savitha Gollamudi</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=g-savitha" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
-<!-- ALL-CONTRIBUTORS-LIST:END -->

 <hr>
 <p align="center">
@@ -10,6 +10,7 @@ module.exports = {
  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
  globals: {
    __PATH_PREFIX__: ``,
+    __BASE_PATH__: ``, 
  },
  setupFiles: [`<rootDir>/loadershim.js`],
  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
@@ -17,7 +18,7 @@ module.exports = {
  coverageThreshold: {
    global: {
      branches: 0,
-      functions: 76,
+      functions: 75,
      lines: 68,
      statements: 68,
    },
@@ -1,6 +1,6 @@
 {
-  "name": "gh-profile-reamde-generator",
-  "version": "0.1.0",
+  "name": "github-profile-readme-generator",
+  "version": "1.1.10",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -3633,6 +3633,62 @@
      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
    },
+    "@eslint/eslintrc": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",
+      "integrity": "sha512-XRUeBZ5zBWLYgSANMpThFddrZZkEbGHgUdt5UJjZfnlN9BGCiUBrf+nvbRupSjMvqzwnQN0qwCmOxITt1cfywA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "lodash": "^4.17.19",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        }
+      }
+    },
    "@fullhuman/postcss-purgecss": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
@@ -8078,6 +8134,15 @@
        }
      }
    },
+    "call-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
+      "integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.0"
+      }
+    },
    "call-me-maybe": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -10585,6 +10650,23 @@
        }
      }
    },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+          "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+          "dev": true
+        }
+      }
+    },
    "entities": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
@@ -10767,21 +10849,24 @@
      }
    },
    "eslint": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
-      "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.12.1.tgz",
+      "integrity": "sha512-HlMTEdr/LicJfN08LB3nM1rRYliDXOmfoO4vj39xN6BLpFzF00hbwBoqHk8UcJ2M/3nlARZWy/mslvGEuZFvsg==",
+      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.0.0",
+        "@eslint/eslintrc": "^0.2.1",
        "ajv": "^6.10.0",
-        "chalk": "^2.1.0",
-        "cross-spawn": "^6.0.5",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
        "debug": "^4.0.1",
        "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.3",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
-        "esquery": "^1.0.1",
+        "enquirer": "^2.3.5",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.0",
+        "esquery": "^1.2.0",
        "esutils": "^2.0.2",
        "file-entry-cache": "^5.0.1",
        "functional-red-black-tree": "^1.0.1",
@@ -10790,51 +10875,122 @@
        "ignore": "^4.0.6",
        "import-fresh": "^3.0.0",
        "imurmurhash": "^0.1.4",
-        "inquirer": "^7.0.0",
        "is-glob": "^4.0.0",
        "js-yaml": "^3.13.1",
        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.14",
+        "levn": "^0.4.1",
+        "lodash": "^4.17.19",
        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.3",
+        "optionator": "^0.9.1",
        "progress": "^2.0.0",
-        "regexpp": "^2.0.1",
-        "semver": "^6.1.2",
-        "strip-ansi": "^5.2.0",
-        "strip-json-comments": "^3.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
        "table": "^5.2.3",
        "text-table": "^0.2.0",
        "v8-compile-cache": "^2.0.3"
      },
      "dependencies": {
        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
        },
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
          "requires": {
-            "ms": "^2.1.1"
+            "color-convert": "^2.0.1"
          }
        },
-        "eslint-utils": {
-          "version": "1.4.3",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
-          "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
          "requires": {
-            "eslint-visitor-keys": "^1.1.0"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
+          "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+          "dev": true
+        },
+        "esrecurse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+          "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+          "dev": true,
+          "requires": {
+            "estraverse": "^5.2.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+              "dev": true
+            }
          }
        },
        "glob-parent": {
          "version": "5.1.1",
          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
          "requires": {
            "is-glob": "^4.0.1"
          }
@@ -10843,37 +10999,121 @@
          "version": "12.4.0",
          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
          "requires": {
            "type-fest": "^0.8.1"
          }
        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
        "ignore": {
          "version": "4.0.6",
          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
        },
-        "regexpp": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "dev": true,
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+          "dev": true
        },
        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
        },
        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
          "requires": {
-            "ansi-regex": "^4.1.0"
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1"
          }
        },
        "v8-compile-cache": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
-          "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ=="
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
+          "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
        }
      }
    },
@@ -11088,20 +11328,20 @@
      }
    },
    "eslint-plugin-react": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.2.tgz",
-      "integrity": "sha512-J3BdtsPNbcF/CG9HdyLx7jEtC7tuODODGldkS9P1zU2WMoHPdcsN2enUopgIaec5f9eYhSFI5zQAaWA/dgv2zw==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz",
+      "integrity": "sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==",
      "requires": {
        "array-includes": "^3.1.1",
        "array.prototype.flatmap": "^1.2.3",
        "doctrine": "^2.1.0",
        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.4.1",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
        "object.entries": "^1.1.2",
        "object.fromentries": "^2.0.2",
        "object.values": "^1.1.1",
        "prop-types": "^15.7.2",
-        "resolve": "^1.17.0",
+        "resolve": "^1.18.1",
        "string.prototype.matchall": "^4.0.2"
      },
      "dependencies": {
@@ -11112,6 +11352,15 @@
          "requires": {
            "esutils": "^2.0.2"
          }
+        },
+        "resolve": {
+          "version": "1.18.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
+          "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==",
+          "requires": {
+            "is-core-module": "^2.0.0",
+            "path-parse": "^1.0.6"
+          }
        }
      }
    },
@@ -11143,13 +11392,22 @@
      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
    },
    "espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz",
+      "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==",
+      "dev": true,
      "requires": {
-        "acorn": "^7.1.1",
+        "acorn": "^7.4.0",
        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
+        "eslint-visitor-keys": "^1.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
      }
    },
    "esprima": {
@@ -11166,9 +11424,9 @@
      },
      "dependencies": {
        "estraverse": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
-          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw=="
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
        }
      }
    },
@@ -13089,6 +13347,141 @@
            "which": "^2.0.1"
          }
        },
+        "eslint": {
+          "version": "6.8.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
+          "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "ajv": "^6.10.0",
+            "chalk": "^2.1.0",
+            "cross-spawn": "^6.0.5",
+            "debug": "^4.0.1",
+            "doctrine": "^3.0.0",
+            "eslint-scope": "^5.0.0",
+            "eslint-utils": "^1.4.3",
+            "eslint-visitor-keys": "^1.1.0",
+            "espree": "^6.1.2",
+            "esquery": "^1.0.1",
+            "esutils": "^2.0.2",
+            "file-entry-cache": "^5.0.1",
+            "functional-red-black-tree": "^1.0.1",
+            "glob-parent": "^5.0.0",
+            "globals": "^12.1.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.0.0",
+            "imurmurhash": "^0.1.4",
+            "inquirer": "^7.0.0",
+            "is-glob": "^4.0.0",
+            "js-yaml": "^3.13.1",
+            "json-stable-stringify-without-jsonify": "^1.0.1",
+            "levn": "^0.3.0",
+            "lodash": "^4.17.14",
+            "minimatch": "^3.0.4",
+            "mkdirp": "^0.5.1",
+            "natural-compare": "^1.4.0",
+            "optionator": "^0.8.3",
+            "progress": "^2.0.0",
+            "regexpp": "^2.0.1",
+            "semver": "^6.1.2",
+            "strip-ansi": "^5.2.0",
+            "strip-json-comments": "^3.0.1",
+            "table": "^5.2.3",
+            "text-table": "^0.2.0",
+            "v8-compile-cache": "^2.0.3"
+          },
+          "dependencies": {
+            "cross-spawn": {
+              "version": "6.0.5",
+              "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+              "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+              "requires": {
+                "nice-try": "^1.0.4",
+                "path-key": "^2.0.1",
+                "semver": "^5.5.0",
+                "shebang-command": "^1.2.0",
+                "which": "^1.2.9"
+              },
+              "dependencies": {
+                "semver": {
+                  "version": "5.7.1",
+                  "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+                  "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+                }
+              }
+            },
+            "debug": {
+              "version": "4.2.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+              "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+              "requires": {
+                "ms": "2.1.2"
+              }
+            },
+            "globals": {
+              "version": "12.4.0",
+              "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+              "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+              "requires": {
+                "type-fest": "^0.8.1"
+              }
+            },
+            "path-key": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+              "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+            },
+            "semver": {
+              "version": "6.3.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+            },
+            "shebang-command": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+              "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+              "requires": {
+                "shebang-regex": "^1.0.0"
+              }
+            },
+            "shebang-regex": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+              "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+            },
+            "v8-compile-cache": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
+              "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q=="
+            },
+            "which": {
+              "version": "1.3.1",
+              "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+              "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+              "requires": {
+                "isexe": "^2.0.0"
+              }
+            }
+          }
+        },
+        "eslint-utils": {
+          "version": "1.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
+          "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
+          "requires": {
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "espree": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+          "requires": {
+            "acorn": "^7.1.1",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
        "fill-range": {
          "version": "7.0.1",
          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -13626,6 +14019,11 @@
            "lru-cache": "^6.0.0"
          }
        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+        },
        "is-binary-path": {
          "version": "2.1.0",
          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -13745,6 +14143,11 @@
            "picomatch": "^2.2.1"
          }
        },
+        "regexpp": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
+          "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
+        },
        "remark-mdx": {
          "version": "2.0.0-next.8",
          "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.0.0-next.8.tgz",
@@ -14648,6 +15051,16 @@
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
    },
+    "get-intrinsic": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.1.tgz",
+      "integrity": "sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
    "get-nonce": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
@@ -16606,6 +17019,14 @@
        "rgba-regex": "^1.0.0"
      }
    },
+    "is-core-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.0.0.tgz",
+      "integrity": "sha512-jq1AH6C8MuteOoBPwkxHafmByhL9j5q4OaPGdbuD+ZtQJVzH+i6E3BJDQcBA09k57i2Hh2yQbEG8yObZ0jdlWw==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
    "is-cwebp-readable": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-cwebp-readable/-/is-cwebp-readable-2.0.1.tgz",
@@ -25365,12 +25786,57 @@
      "optional": true
    },
    "side-channel": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz",
-      "integrity": "sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
+      "integrity": "sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==",
      "requires": {
-        "es-abstract": "^1.17.0-next.1",
-        "object-inspect": "^1.7.0"
+        "es-abstract": "^1.18.0-next.0",
+        "object-inspect": "^1.8.0"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0-next.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+          "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.2",
+            "is-negative-zero": "^2.0.0",
+            "is-regex": "^1.1.1",
+            "object-inspect": "^1.8.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.1",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+          "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA=="
+        },
+        "is-regex": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
+          "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
+          "requires": {
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        }
      }
    },
    "signal-exit": {
@@ -26370,9 +26836,9 @@
      }
    },
    "strip-json-comments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
-      "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
    },
    "strip-outer": {
      "version": "1.0.1",
@@ -1,8 +1,8 @@
 {
-  "name": "gh-profile-readme-generator",
+  "name": "github-profile-readme-generator",
  "private": true,
  "description": "A simple react app to generate beautiful github profile readme in md(markdown)",
-  "version": "0.1.0",
+  "version": "1.1.10",
  "author": "Rahul Jain <rahuldkjain@gmail.com>",
  "dependencies": {
    "@primer/octicons-react": "^10.0.0",
@@ -56,9 +56,9 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator"
+    "url": "https://github.com/rahuldkjain/github-profile-readme-generator"
  },
  "bugs": {
-    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator/issues"
+    "url": "https://github.com/rahuldkjain/github-profile-readme-generator/issues"
  }
 }
@@ -1,69 +1,578 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`DisplaySocial Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`DisplaySocial Preview renders correctly 1`] = `
+<a
+  className="no-underline text-blue-700 m-2"
+  href="https://codepen.io/dummy"
+  target="blank"
+>
+  <img
+    alt="props.username"
+    className="w-6 h-6"
+    src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+  />
+</a>
+`;

-exports[`DisplaySocial Preview renders correctly with no username 1`] = `ShallowWrapper {}`;
+exports[`DisplaySocial Preview renders correctly with no username 1`] = `""`;

-exports[`DisplayWork Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly 1`] = `
+<div
+  className="my-2"
+>
+  [object Object] 
+  <a
+    className="no-underline text-blue-700"
+    href="https://dummy.com"
+    target="blank"
+  >
+    readme-generator
+  </a>
+</div>
+`;

-exports[`DisplayWork Preview renders correctly with no link 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no link 1`] = `
+<div
+  className="my-2"
+>
+  [object Object] 
+  <b>
+    readme-generator
+  </b>
+</div>
+`;

-exports[`DisplayWork Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no prefix 1`] = `""`;

-exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `""`;

-exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `""`;

-exports[`DisplayWork Preview renders correctly with no project 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no project 1`] = `
+<div
+  className="my-2"
+>
+  [object Object] 
+  <a
+    className="no-underline text-blue-700"
+    href="https://dummy.com"
+    target="blank"
+  >
+    https://dummy.com
+  </a>
+</div>
+`;

-exports[`DisplayWork Preview renders correctly with no project and link 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no project and link 1`] = `""`;

-exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `ShallowWrapper {}`;
+exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `""`;

-exports[`GitHubStats Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`GitHubStats Preview renders correctly 1`] = `""`;

-exports[`GitHubStats Preview renders correctly 2`] = `ShallowWrapper {}`;
+exports[`GitHubStats Preview renders correctly 2`] = `
+<div
+  className="text-center mx-4 mb-4"
+>
+  <img
+    alt=""
+    src="https://github-readme-stats.vercel.app/api?username=&show_icons=true&locale=en"
+  />
+</div>
+`;

-exports[`GithubProfileTrophy Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`GithubProfileTrophy Preview renders correctly 1`] = `""`;

-exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
+<div
+  className="text-left my-2"
+>
+   
+  <a
+    href="https://github.com/ryo-ma/github-profile-trophy"
+  >
+    <img
+      alt=""
+      src="https://github-profile-trophy.vercel.app/?username="
+    />
+  </a>
+   
+</div>
+`;

-exports[`Markdown Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`Markdown Preview renders correctly 1`] = `
+<div
+  id="markdown-preview"
+>
+  <TitlePreview
+    prefix="Hi 👋, I'm"
+    title="dummy"
+  />
+  <SubTitlePreview
+    subtitle="A passionate frontend developer from India"
+  />
+  <VisitorsBadgePreview
+    badgeOptions={
+      Object {
+        "badgeColor": "0e75b6",
+        "badgeLabel": "Profile%20views",
+        "badgeStyle": "flat",
+      }
+    }
+    github=""
+    show={false}
+  />
+  <GithubProfileTrophyPreview
+    github=""
+    show={false}
+  />
+  <TwitterBadgePreview
+    show={false}
+    twitter=""
+  />
+  <WorkPreview
+    work={
+      Object {
+        "data": Object {
+          "ama": "",
+          "badgeColor": "0e75b6",
+          "badgeLabel": "Profile views",
+          "badgeStyle": "flat",
+          "collaborateOn": "",
+          "contact": "",
+          "currentLearn": "",
+          "currentWork": "readme-generator",
+          "devDynamicBlogs": false,
+          "funFact": "",
+          "githubProfileTrophy": false,
+          "githubStats": false,
+          "githubStatsOptions": Object {
+            "bgColor": "",
+            "cacheSeconds": null,
+            "hideBorder": false,
+            "locale": "en",
+            "textColor": "",
+            "theme": "",
+            "titleColor": "",
+          },
+          "helpWith": "",
+          "mediumDynamicBlogs": false,
+          "rssDynamicBlogs": false,
+          "subtitle": "A passionate frontend developer from India",
+          "title": "dummy",
+          "topLanguages": false,
+          "topLanguagesOptions": Object {
+            "bgColor": "",
+            "cacheSeconds": null,
+            "hideBorder": false,
+            "locale": "en",
+            "textColor": "",
+            "theme": "",
+            "titleColor": "",
+          },
+          "twitterBadge": false,
+          "visitorsBadge": false,
+        },
+        "link": Object {
+          "blog": "",
+          "collaborateOn": "",
+          "currentWork": "https://dummy.com",
+          "helpWith": "",
+          "portfolio": "",
+          "resume": "",
+        },
+        "prefix": Object {
+          "ama": "💬 Ask me about",
+          "blog": "📝 I regulary write articles on",
+          "collaborateOn": "👯 I’m looking to collaborate on",
+          "contact": "📫 How to reach me",
+          "currentLearn": "🌱 I’m currently learning",
+          "currentWork": "🔭 I’m currently working on",
+          "funFact": "⚡ Fun fact",
+          "helpWith": "🤝 I’m looking for help with",
+          "portfolio": "👨‍💻 All of my projects are available at",
+          "resume": "📄 Know about my experiences",
+          "title": "Hi 👋, I'm",
+        },
+        "skills": Object {},
+        "social": Object {
+          "behance": "",
+          "codechef": "",
+          "codeforces": "",
+          "codepen": "dummy",
+          "codesandbox": "",
+          "dev": "",
+          "discord": "",
+          "dribbble": "",
+          "fb": "",
+          "geeks_for_geeks": "",
+          "github": "",
+          "hackerearth": "",
+          "hackerrank": "",
+          "instagram": "",
+          "kaggle": "",
+          "leetcode": "",
+          "linkedin": "",
+          "medium": "",
+          "rssurl": "",
+          "stackoverflow": "",
+          "topcoder": "",
+          "twitter": "",
+          "youtube": "",
+        },
+      }
+    }
+  />
+  <SocialPreview
+    social={
+      Object {
+        "behance": "",
+        "codechef": "",
+        "codeforces": "",
+        "codepen": "dummy",
+        "codesandbox": "",
+        "dev": "",
+        "discord": "",
+        "dribbble": "",
+        "fb": "",
+        "geeks_for_geeks": "",
+        "github": "",
+        "hackerearth": "",
+        "hackerrank": "",
+        "instagram": "",
+        "kaggle": "",
+        "leetcode": "",
+        "linkedin": "",
+        "medium": "",
+        "rssurl": "",
+        "stackoverflow": "",
+        "topcoder": "",
+        "twitter": "",
+        "youtube": "",
+      }
+    }
+  />
+  <SkillsPreview
+    skills={Object {}}
+  />
+  <div
+    className="block sm:flex sm:justify-center sm:items-start"
+  >
+    <TopLanguagesPreview
+      github=""
+      options={
+        Object {
+          "bgColor": "",
+          "cacheSeconds": null,
+          "hideBorder": false,
+          "locale": "en",
+          "textColor": "",
+          "theme": "",
+          "titleColor": "",
+        }
+      }
+      show={false}
+    />
+    <GitHubStatsPreview
+      github=""
+      options={
+        Object {
+          "bgColor": "",
+          "cacheSeconds": null,
+          "hideBorder": false,
+          "locale": "en",
+          "textColor": "",
+          "theme": "",
+          "titleColor": "",
+        }
+      }
+      show={false}
+    />
+  </div>
+</div>
+`;

-exports[`SectionTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`SectionTitle Preview renders correctly 1`] = `
+<h3
+  className="w-full text-lg sm:text-xl"
+>
+  dummy
+</h3>
+`;

-exports[`SectionTitle Preview renders correctly with no label 1`] = `ShallowWrapper {}`;
+exports[`SectionTitle Preview renders correctly with no label 1`] = `""`;

-exports[`SectionTitle Preview renders correctly with visible false 1`] = `ShallowWrapper {}`;
+exports[`SectionTitle Preview renders correctly with visible false 1`] = `""`;

-exports[`Skills Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`Skills Preview renders correctly 1`] = `
+<div
+  className="flex flex-wrap justify-start items-center"
+>
+  <SectionTitle
+    label="Languages and Tools:"
+    visible={true}
+  />
+  <a
+    href="https://unity.com/"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="unity"
+      className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
+      key="unity"
+      src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
+    />
+  </a>
+</div>
+`;

-exports[`Skills Preview renders correctly with no skills 1`] = `ShallowWrapper {}`;
+exports[`Skills Preview renders correctly with no skills 1`] = `""`;

-exports[`Social Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`Social Preview renders correctly 1`] = `
+<div
+  className="flex justify-start items-end flex-wrap"
+>
+  <SectionTitle
+    label="Connect with me:"
+    visible={true}
+  />
+  <DisplaySocial
+    base="https://codepen.io"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+    username="dummy"
+  />
+  <DisplaySocial
+    base="https://dev.to"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://twitter.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://linkedin.com/in"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://stackoverflow.com/users"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://codesandbox.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://kaggle.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://fb.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://instagram.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://dribbble.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.behance.net"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://medium.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.youtube.com/c"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.codechef.com/users"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://codeforces.com/profile"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.hackerrank.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://auth.geeksforgeeks.org/user"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.hackerearth.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.topcoder.com/members"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.leetcode.com"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://discord.gg"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+    username=""
+  />
+  <DisplaySocial
+    base=""
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+    username=""
+  />
+</div>
+`;

-exports[`SubTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`SubTitle Preview renders correctly 1`] = `
+<h3
+  className="text-center font-medium"
+>
+  A passionate frontend developer from India
+</h3>
+`;

-exports[`SubTitle Preview renders correctly with no subtitle 1`] = `ShallowWrapper {}`;
+exports[`SubTitle Preview renders correctly with no subtitle 1`] = `""`;

-exports[`Title Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`Title Preview renders correctly 1`] = `
+<h1
+  className="text-center text-xl font-bold"
+>
+  Hi 👋, I'm dummy
+</h1>
+`;

-exports[`Title Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
+exports[`Title Preview renders correctly with no prefix 1`] = `""`;

-exports[`Title Preview renders correctly with no title 1`] = `ShallowWrapper {}`;
+exports[`Title Preview renders correctly with no title 1`] = `""`;

-exports[`Title Preview renders correctly with no title and prefix 1`] = `ShallowWrapper {}`;
+exports[`Title Preview renders correctly with no title and prefix 1`] = `""`;

-exports[`TopLanguages Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`TopLanguages Preview renders correctly 1`] = `
+<div
+  className="text-center mx-4 mb-4"
+>
+    
+</div>
+`;

-exports[`TopLanguages Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+exports[`TopLanguages Preview renders correctly with show true 1`] = `
+<div
+  className="text-center mx-4 mb-4"
+>
+  <img
+    alt=""
+    src="https://github-readme-stats.vercel.app/api/top-langs?username=&show_icons=true&locale=en&layout=compact"
+  />
+</div>
+`;

-exports[`TwitterBadgePreview Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`TwitterBadgePreview Preview renders correctly 1`] = `""`;

-exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
+<div
+  className="text-left my-2"
+>
+   
+  <a
+    href="https://twitter.com/\${props.twitter}"
+    target="blank"
+  >
+    <img
+      alt=""
+      className="h-4 sm:h-6"
+      src="https://img.shields.io/twitter/follow/?logo=twitter&style=for-the-badge"
+    />
+  </a>
+   
+</div>
+`;

-exports[`VisitorsBadge Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`VisitorsBadge Preview renders correctly 1`] = `""`;

-exports[`VisitorsBadge Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+exports[`VisitorsBadge Preview renders correctly with show true 1`] = `
+<div
+  className="text-left my-2"
+>
+   
+  <img
+    alt=""
+    className="h-4 sm:h-6"
+    src="https://komarev.com/ghpvc/?username=&label=Profile%20views&color=0e75b6&style=flat"
+  />
+   
+</div>
+`;

-exports[`Work Preview renders correctly 1`] = `ShallowWrapper {}`;
+exports[`Work Preview renders correctly 1`] = `
+<Fragment>
+  <DisplayWork
+    link="https://dummy.com"
+    prefix="🔭 I’m currently working on"
+    project="readme-generator"
+  />
+  <DisplayWork
+    prefix="🌱 I’m currently learning"
+    project=""
+  />
+  <DisplayWork
+    link=""
+    prefix="🤝 I’m looking for help with"
+    project=""
+  />
+  <DisplayWork
+    link=""
+    prefix="👯 I’m looking to collaborate on"
+    project=""
+  />
+  <DisplayWork
+    prefix="💬 Ask me about"
+    project=""
+  />
+  <DisplayWork
+    link=""
+    prefix="👨‍💻 All of my projects are available at"
+  />
+  <DisplayWork
+    link=""
+    prefix="📝 I regulary write articles on"
+  />
+  <DisplayWork
+    link=""
+    prefix="📄 Know about my experiences"
+  />
+  <DisplayWork
+    prefix="📫 How to reach me"
+    project=""
+  />
+  <DisplayWork
+    prefix="⚡ Fun fact"
+    project=""
+  />
+</Fragment>
+`;
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skills renders correctly 1`] = `
+<div
+  className="px-2 sm:px-6 mb-10 "
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between"
+  >
+    Skills
+    <div
+      className="relative flex"
+    >
+      <input
+        className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
+        onChange={[Function]}
+        placeholder="Search Skills"
+        type="text"
+      />
+      <span
+        className="absolute"
+        style={
+          Object {
+            "right": "10px",
+          }
+        }
+      >
+        <SearchIcon
+          className="mb-1 transform scale-100 md:scale-125"
+          size={16}
+          verticalAlign="text-bottom"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    className="divide-y divide-gray-500"
+    key="language"
+  >
+    <div
+      className="text-sm sm:text-xl text-gray-900 text-left py-1"
+    >
+      Programming Languages
+    </div>
+    <div
+      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
+    >
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="javascript"
+      >
+        <label
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          htmlFor="javascript"
+        >
+          <input
+            checked={true}
+            id="javascript"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <img
+            alt="javascript"
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src="javascript.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            javascript
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="divide-y divide-gray-500"
+    key="frontend_dev"
+  >
+    <div
+      className="text-sm sm:text-xl text-gray-900 text-left py-1"
+    >
+      Frontend Development
+    </div>
+    <div
+      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
+    >
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="react"
+      >
+        <label
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          htmlFor="react"
+        >
+          <input
+            id="react"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <img
+            alt="react"
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src="react.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            react
+          </span>
+        </label>
+      </div>
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="svelte"
+      >
+        <label
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          htmlFor="svelte"
+        >
+          <input
+            id="svelte"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <img
+            alt="svelte"
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src="svelte.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            svelte
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <span
+    className="flex justify-center text-gray-900"
+  />
+</div>
+`;
@@ -0,0 +1,383 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social renders correctly 1`] = `
+<div
+  className="px-2 sm:px-6 mb-4"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Social
+  </div>
+  <div
+    className="flex flex-wrap justify-center items-center"
+  >
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="github"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
+        id="github"
+        onChange={[Function]}
+        placeholder="github username"
+        value="github "
+      />
+    </div>
+    <div
+      className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="twitter"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="twitter"
+        onChange={[Function]}
+        placeholder="twitter username"
+        value="twitter"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dev.to"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="dev"
+        onChange={[Function]}
+        placeholder="dev.to username"
+        value="dev"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codepen"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="codepen"
+        onChange={[Function]}
+        placeholder="codepen username"
+        value="codepen"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codesandbox"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="codesandbox"
+        onChange={[Function]}
+        placeholder="codesandbox username"
+        value="codesandbodx"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="stackoverflow"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="stackoverflow"
+        onChange={[Function]}
+        placeholder="stackoverflow user ID"
+        value="stackoverflow"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="linkedin"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="linkedin"
+        onChange={[Function]}
+        placeholder="linkedin username"
+        value="linkedin"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="kaggle"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="kaggle"
+        onChange={[Function]}
+        placeholder="kaggle username"
+        value="kaggle"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="facebook"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="fb"
+        onChange={[Function]}
+        placeholder="facebook username"
+        value="fb"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="instagram"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="instagram"
+        onChange={[Function]}
+        placeholder="instagram username"
+        value="instagram"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dribbble"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="dribbble"
+        onChange={[Function]}
+        placeholder="dribbble username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="behance"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="behance"
+        onChange={[Function]}
+        placeholder="behance username"
+        value="behance"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="medium"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="medium"
+        onChange={[Function]}
+        placeholder="medium username (with @)"
+        value="medium"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="youtube"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="youtube"
+        onChange={[Function]}
+        placeholder="youtube channel name"
+        value="youtube"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codechef"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="codechef"
+        onChange={[Function]}
+        placeholder="codechef username"
+        value="codechef"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerrank"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="hackerrank"
+        onChange={[Function]}
+        placeholder="hackerrank username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codeforces"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="codeforces"
+        onChange={[Function]}
+        placeholder="codeforces username"
+        value="codeforces"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="leetcode"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="leetcode"
+        onChange={[Function]}
+        placeholder="leetcode username"
+        value="leetcode"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="topcoder"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="topcoder"
+        onChange={[Function]}
+        placeholder="topcoder username"
+        value="topcoder"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerearth"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="hackerearth"
+        onChange={[Function]}
+        placeholder="hackerearth user (with @)"
+        value="@hackerearth"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="geeksforgeeks"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="geeksforgeeks"
+        onChange={[Function]}
+        placeholder="GFG (<username>/profile)"
+        value="geeks_for_geeks"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="discord"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="discord"
+        onChange={[Function]}
+        placeholder="discord invite (only code)"
+        value="discord"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="rssfeed"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"
+      />
+      <input
+        className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        id="rssurl"
+        onChange={[Function]}
+        placeholder="RSS feed URL"
+        value="rssurl"
+      />
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,766 @@
+import React from "react"
+import toJson from "enzyme-to-json"
+import { shallow, mount } from "enzyme"
+
+import Addons from "../addons"
+
+jest.useFakeTimers();
+
+describe("Addons", () => {
+  const dataInput = {
+    title: "",
+    subtitle: "A passionate frontend developer from India",
+    currentWork: "",
+    currentLearn: "",
+    collaborateOn: "",
+    helpWith: "",
+    ama: "",
+    contact: "",
+    funFact: "",
+    twitterBadge: false,
+    visitorsBadge: false,
+    badgeStyle: "flat",
+    badgeColor: "0e75b6",
+    badgeLabel: "Profile views",
+    githubProfileTrophy: false,
+    githubStats: false,
+    githubStatsOptions: {
+      theme: "",
+      titleColor: "",
+      textColor: "",
+      bgColor: "",
+      hideBorder: false,
+      cacheSeconds: null,
+      locale: "en",
+    },
+    topLanguages: false,
+    topLanguagesOptions: {
+      theme: "",
+      titleColor: "",
+      textColor: "",
+      bgColor: "",
+      hideBorder: false,
+      cacheSeconds: null,
+      locale: "en",
+    },
+    devDynamicBlogs: false,
+    mediumDynamicBlogs: false,
+    rssDynamicBlogs: false,
+  };
+  const socialInput = {
+    github: "",
+    dev: "",
+    linkedin: "",
+    codepen: "",
+    stackoverflow: "",
+    kaggle: "",
+    codesandbox: "",
+    fb: "",
+    instagram: "",
+    twitter: "",
+    dribbble: "",
+    behance: "",
+    medium: "",
+    youtube: "",
+    codechef: "",
+    hackerrank: "",
+    codeforces: "",
+    leetcode: "",
+    topcoder: "",
+    hackerearth: "",
+    geeks_for_geeks: "",
+    discord: "",
+    rssurl: "",
+  };
+
+  let mockHandleCheckChange;
+  let mockHandleDataChange;
+  beforeEach(() => {
+    mockHandleCheckChange = jest.fn();
+    mockHandleDataChange = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders correctly", () => {
+    const addOnComponent = shallow(<Addons
+      data={dataInput}
+      social={socialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    expect(toJson(addOnComponent)).toMatchSnapshot();
+  });
+
+  it("should render Customize Badges", () => {
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
+    
+    expect(addOnComponent).toMatchSnapshot();
+  });
+
+  it("should handle data change when badge style is changed", () => {
+    const mockEvent = { target: { value: "style-new" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "title-abcd",
+        textColor: "some-color",
+        bgColor: "abcd",
+        hideBorder: false,
+        cacheSeconds: null,
+        locale: "en",
+      },
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
+    addOnComponent.find("#badge-style").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeStyle',{target: {value: "style-new" }});
+  });
+  
+  it("should handle data change when badge color is changed", () => {
+    const mockEvent = { target: { value: "new-color-abcd" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
+    addOnComponent.find("#badge-color").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeColor',{target: {value: "new-color-abcd" }});
+  });
+  
+  it("should handle data change when badge-label-text is changed", () => {
+    const mockEvent = { target: { value: "label-abcd-random" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
+    addOnComponent.find("#badge-label-text").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeLabel',{target: {value: "label-abcd-random" }});
+  });
+
+  it("should render Customize Github stats card", () => {
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    
+    expect(addOnComponent).toMatchSnapshot();
+  });
+
+  it("should handle data change when stats theme is changed", () => {
+    const mockEvent = { target: { value: "new-theme-for-stats" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        titleColor: "title-abcd",
+        textColor: "some-color",
+        bgColor: "abcd",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-theme").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "title-abcd",
+          textColor: "some-color",
+          bgColor: "abcd",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  });
+
+  it("should handle data change when stats title color is changed", () => {
+    const mockEvent = { target: { value: "red-color" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        textColor: "some-color",
+        bgColor: "abcd",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-title-color").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "red-color",
+          textColor: "some-color",
+          bgColor: "abcd",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  });
+  
+  it("should handle data change when stats bg color is changed", () => {
+    const mockEvent = { target: { value: "random-color" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "some-color",
+        textColor: "abcd",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-bg-color").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "some-color",
+          textColor: "abcd",
+          bgColor: "random-color",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  });
+
+  it("should handle data change when stats cache seconds is changed", () => {
+    const mockEvent = { target: { value: 1900 } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "some-color",
+        textColor: "abcd",
+        bgColor: "random-color",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-cache-seconds").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "some-color",
+          textColor: "abcd",
+          bgColor: "random-color",
+          hideBorder: false,
+          cacheSeconds: 1900,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  });
+
+  it("should handle data change when stats text color is changed", () => {
+    const mockEvent = { target: { value: "black-color" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "some-color",
+        bgColor: "abcd",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-text-color").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "some-color",
+          textColor: "black-color",
+          bgColor: "abcd",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  });
+
+  it("should handle data change when stats local is changed", () => {
+    const mockEvent = { target: { value: 'uk' } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "some-color",
+        textColor: "abcd",
+        bgColor: "random-color",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click", {});
+    addOnComponent.find("#stats-locale").simulate("change", mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "some-color",
+          textColor: "abcd",
+          bgColor: "random-color",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "uk",
+        }
+      }
+    });
+  });
+
+  it("should handle data change when stats local is changed", () => {
+    const mockEvent = { target: { checked: true } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      githubStatsOptions: {
+        theme: "theme-1",
+        titleColor: "some-color",
+        textColor: "abcd",
+        bgColor: "random-color",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "new-theme-for-stats",
+        locale: "en",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#github-stats-open-btn").simulate("click",{});
+    addOnComponent.find("#stats-hide-border").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
+      target: {
+        value: {
+          theme: "theme-1",
+          titleColor: "some-color",
+          textColor: "abcd",
+          bgColor: "random-color",
+          hideBorder: true,
+          cacheSeconds: null,
+          theme: "new-theme-for-stats",
+          locale: "en",
+        }
+      } 
+    });
+  })
+
+  it("should render Customize Top Skills Card", () => {
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#top-languages-open-btn").simulate("click",{});
+    
+    expect(addOnComponent).toMatchSnapshot();
+  });
+
+  it("should handle data change when top skills theme is changed", () => {
+    const mockEvent = { target: { value: "theme-xyz" } }
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value",
+      topLanguagesOptions : {
+        theme: "theme-2",
+        titleColor: "title-abcd-new",
+        textColor: "random-some-color",
+        bgColor: "1234",
+        hideBorder: false,
+        cacheSeconds: null,
+        theme: "theme-xyz",
+        locale: "us",
+      }
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = mount(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#top-languages-open-btn").simulate("click",{});
+    addOnComponent.find("#top-lang-theme").simulate("change",mockEvent);
+   
+    jest.runAllTimers();
+    
+    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
+    expect(mockHandleDataChange).toHaveBeenCalledWith('topLanguagesOptions', {
+      target: {
+        value: {
+          theme: "theme-2",
+          titleColor: "title-abcd-new",
+          textColor: "random-some-color",
+          bgColor: "1234",
+          hideBorder: false,
+          cacheSeconds: null,
+          theme: "theme-xyz",
+          locale: "us",
+        }
+      } 
+    });
+  });
+
+  it("should handle check change when add on item inputs are changed", () => {
+    const mockEvent = { target: { value: "This is a mock event" } }
+
+    const addOnComponent = mount(<Addons
+      data={dataInput}
+      social={socialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#visitors-count").simulate("change", mockEvent);
+    addOnComponent.find("#github-profile-trophy").simulate("change", mockEvent);
+    addOnComponent.find("#github-stats").simulate("change", mockEvent);
+    addOnComponent.find("#top-languages").simulate("change", mockEvent);
+    addOnComponent.find("#twitter-badge").simulate("change", mockEvent);
+    addOnComponent.find("#dev-dynamic-blogs").simulate("change", mockEvent);
+    addOnComponent.find("#rss-dynamic-blogs").simulate("change", mockEvent);
+    addOnComponent.find("#medium-dynamic-blogs").simulate("change", mockEvent);
+    
+    expect(mockHandleCheckChange).toHaveBeenCalledTimes(8);
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(1,"visitorsBadge");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(2,"githubProfileTrophy");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(3,"githubStats");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(4,"topLanguages");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(5,"twitterBadge");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(6,"devDynamicBlogs");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(7,"rssDynamicBlogs");
+    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(8,"mediumDynamicBlogs");
+  });
+  
+  it("should display workflow details if devDynamicBlogs and dev social data are available", () => {
+    const newDataInput = {
+      ...dataInput,
+      devDynamicBlogs: "some-value"
+    };
+
+    const newSocialInput = {
+      dev: "some-value-123",
+    };
+
+    const addOnComponent = shallow(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    const workflowElement = addOnComponent.find(".workflow");
+    expect(workflowElement).toMatchSnapshot();
+  });
+
+  it("should display workflow details if rssDynamicBlogs and rss url data are available", () => {
+    const newDataInput = {
+      ...dataInput,
+      rssDynamicBlogs: "some-rss-value"
+    };
+
+    const newSocialInput = {
+      rssurl: "url-random",
+    };
+
+    const addOnComponent = shallow(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    const workflowElement = addOnComponent.find(".workflow");
+    expect(workflowElement).toMatchSnapshot();
+  });
+
+  it("should display workflow details if mediumDynamicBlogs, medium social data are available", () => {
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = shallow(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    const workflowElement = addOnComponent.find(".workflow");
+    expect(workflowElement).toMatchSnapshot();
+  });
+  
+  it("should call document create element when blog post workflow is clicked", () => {
+    let someElement = document.createElement("abcd");
+    document.createElement = jest.fn().mockReturnValueOnce(someElement);
+  
+    const newDataInput = {
+      ...dataInput,
+      mediumDynamicBlogs: "some-medium-blogs-value"
+    };
+
+    const newSocialInput = {
+      medium: "@abcd",
+    };
+
+    const addOnComponent = shallow(<Addons
+      data={newDataInput}
+      social={newSocialInput}
+      handleCheckChange={mockHandleCheckChange}
+      handleDataChange={mockHandleDataChange}
+    />);
+
+    addOnComponent.find("#blog-post-worklow-span").simulate("click", {});
+    expect(document.createElement).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,42 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Skills from "../skills"
+
+jest.mock("../../constants/skills", () => ({
+  __esModule: true,
+  categorizedSkills: {
+    language: {
+      title: "Programming Languages",
+      skills: ["javascript"],
+    },
+    frontend_dev: {
+      title: "Frontend Development",
+      skills: ["react", "svelte"],
+    },
+  },
+  icons: {
+    javascript: "javascript.svg",
+    react: "react.svg",
+    svelte: "svelte.svg",
+  },
+}))
+
+describe("Skills", () => {
+  it("renders correctly", () => {
+    const component = shallow(<Skills skills={{ javascript: true }} />)
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("calls handleSkillsChange prop when a skill is clicked", () => {
+    const mockFn = jest.fn()
+    const component = shallow(
+      <Skills skills={{ javascript: true }} handleSkillsChange={mockFn} />
+    )
+
+    component.find("#javascript").simulate("change")
+
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+})
@@ -0,0 +1,44 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Social from "../social"
+
+describe("Social", () => {
+  const mockEvent = { target: { value: "This is a mock event" } }
+  const props = {
+    social: {
+      github: "github ",
+      twitter: "twitter",
+      dev: "dev",
+      codepen: "codepen",
+      codesandbox: "codesandbodx",
+      stackoverflow: "stackoverflow",
+      linkedin: "linkedin",
+      kaggle: "kaggle",
+      fb: "fb",
+      instagram: "instagram",
+      dribble: "dribble",
+      behance: "behance",
+      medium: "medium",
+      youtube: "youtube",
+      codechef: "codechef",
+      hackerrack: "hackerranck",
+      codeforces: "codeforces",
+      leetcode: "leetcode",
+      topcoder: "topcoder",
+      hackerearth: "@hackerearth",
+      geeks_for_geeks: "geeks_for_geeks",
+      discord: "discord",
+      rssurl: "rssurl",
+    },
+    handleSocialChange: jest.fn().mockReturnValue({}),
+  }
+  it("renders correctly", () => {
+    const component = shallow(<Social {...props} />)
+    for (let i = 0; i < component.find("input").length; i++) {
+      component.find("input").at(i).simulate("change", mockEvent)
+    }
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})
@@ -23,6 +23,7 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick
        </label>
        {Options && (
          <button
+            id={`${inputId}-open-btn`}
            onClick={() => setOpen(!open)}
            className="flex ml-3 focus:bg-gray-400"
            style={{ outline: "none" }}
@@ -185,6 +186,23 @@ const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
      </label>
    </>

+const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
+  <>
+    <label htmlFor={`${prefix}-theme`}>
+      Theme:&nbsp;
+      <select
+        id={`${prefix}-theme`}
+        onChange={({ target: { value } }) => onUpdate("theme", value)}
+        defaultValue={options.theme}
+      >
+        <option value="default">default</option>
+        <option value="dark">dark</option>
+        <option value="highcontrast">highcontrast</option>
+      </select>
+    </label>
+  </>
+)
+
 const Addons = props => {
  const [debounce, setDebounce] = useState(undefined);
  const [badgeOptions, setBadgeOptions] = useState({
@@ -221,6 +239,16 @@ const Addons = props => {
    })
  }, [props.data.topLanguagesOptions])

+  const [streakStatsOptions, setStreakStatsOptions] = useState({
+    ...props.data.streakStatsOptions,
+  });
+
+  useEffect(() => {
+    setStreakStatsOptions({
+      ...props.data.streakStatsOptions
+    })
+  }, [props.data.streakStatsOptions])
+
  const blogPostPorkflow = () => {
    let payload = {
      dev: {
@@ -271,6 +299,12 @@ const Addons = props => {
    props.handleDataChange("topLanguagesOptions", {target: {value: newLangOptions}})
  }

+  const onStreakStatsUpdate = (option, value) => {
+    const newStreakStatsOptions = {...streakStatsOptions, [option]: value}
+    setStreakStatsOptions(newStreakStatsOptions)
+    props.handleDataChange("streakStatsOptions", {target: {value: newStreakStatsOptions}})
+  }
+
  return (
    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
@@ -332,6 +366,21 @@ const Addons = props => {
      >
        display top skills
      </AddonsItem>
+      <AddonsItem
+        inputId="streak-stats"
+        inputChecked={props.data.streakStats}
+        onInputChange={() => props.handleCheckChange("streakStats")}
+        Options={
+          <CustomizeOptions
+            title="Customize Streak Stats Card"
+            CustomizationOptions={
+            <CustomizeStreakStats prefix="streak-stats" options={streakStatsOptions} onUpdate={onStreakStatsUpdate}/>
+            }
+          />
+        }
+      >
+        display streak stats
+      </AddonsItem>
      <AddonsItem
        inputId="twitter-badge"
        inputChecked={props.data.twitterBadge}
@@ -370,6 +419,7 @@ const Addons = props => {
          <div>
            download
            <span
+              id="blog-post-worklow-span"
              onClick={blogPostPorkflow}
              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
              role="button"
@@ -92,7 +92,7 @@ const Footer = () => {
          <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
            <strong>Join Community</strong>
          </div>
-          <div class="ml-2 sm:ml-0">
+          <div className="ml-2 sm:ml-0">
            <a
              href="https://discord.gg/HHMs7Eg"
              aria-label="Discord of the community"
@@ -4,230 +4,218 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
  githubStatsLinkGenerator,
  topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"
-
-const Markdown = props => {
-  const Title = props => {
-    if (props.prefix && props.title) {
-      return (
-        <>
-          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const SubTitle = props => {
-    if (props.subtitle) {
-      return (
-        <>
-          {`<h3 align="center">${props.subtitle}</h3>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const SectionTitle = props => {
-    if (props.label) {
-      return (
-        <>
-          {`<h3 align="left">${props.label}</h3>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const DisplayWork = props => {
-    if (props.prefix && props.project) {
-      if (props.link) {
-        return (
-          <>
-            {`- ${props.prefix} [${props.project}](${props.link})`}
-            <br />
-            <br />
-          </>
-        )
-      } else {
-        return (
-          <>
-            {`- ${props.prefix} **${props.project}**`}
-            <br />
-            <br />
-          </>
-        )
-      }
-    }
-    if (props.prefix && props.link) {
-      return (
-        <>
-          {`- ${props.prefix} [${props.link}](${props.link})`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const DisplaySocial = props => {
-    if (props.username) {
-      return (
-        <>
-          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="40" /></a>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const VisitorsBadge = props => {
-    let link =
-      "https://komarev.com/ghpvc/?username=" +
-      props.github +
-      `&label=${props.badgeOptions.badgeLabel}` +
-      `&color=${props.badgeOptions.badgeColor}` +
-      `&style=${props.badgeOptions.badgeStyle}`
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const TwitterBadge = props => {
-    let link =
-      "https://img.shields.io/twitter/follow/" +
-      props.twitter +
-      "?logo=twitter&style=for-the-badge"
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const GithubProfileTrophy = props => {
-    let link =
-      "https://github-profile-trophy.vercel.app/?username=" + props.github
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const GitHubStats = ({ show, github, options }) => {
-    if (show) {
-      return (
-        <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
-            github: github,
-            options,
-          })}" alt="${github}" /></p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const isSocial = social => {
+const Title = props => {
+  if (props.prefix && props.title) {
    return (
-      social.dev ||
-      social.twitter ||
-      social.codepen ||
-      social.codesandbox ||
-      social.stackoverflow ||
-      social.linkedin ||
-      social.kaggle ||
-      social.instagram ||
-      social.fb ||
-      social.dribbble ||
-      social.behance ||
-      social.medium ||
-      social.youtube ||
-      social.codechef ||
-      social.hackerrank ||
-      social.codeforces ||
-      social.leetcode ||
-      social.topcoder ||
-      social.hackerearth ||
-      social.geeks_for_geeks ||
-      social.discord ||
-      social.rssurl
+      <>
+        {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+        <br />
+      </>
    )
  }
-  const DisplaySkills = props => {
-    const listChosenSkills = []
-    skills.forEach(skill => {
-      if (props.skills[skill]) {
-        listChosenSkills.push(
-          `
-          <a href="${skillWebsites[skill]}" target="_blank">
-            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
-          </a>
-          `
-        )
-      }
-    })
-    return listChosenSkills.length > 0 ? (
+  return ""
+}
+const SubTitle = props => {
+  if (props.subtitle) {
+    return (
      <>
-        <SectionTitle label="Languages and Tools:" />
-        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        {`<h3 align="center">${props.subtitle}</h3>`}
        <br />
        <br />
      </>
-    ) : (
-      ""
    )
  }
-  const DisplayDynamicBlogs = props => {
-    if (props.show) {
+  return ""
+}
+const SectionTitle = props => {
+  if (props.label) {
+    return (
+      <>
+        {`<h3 align="left">${props.label}</h3>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayWork = props => {
+  if (props.prefix && props.project) {
+    if (props.link) {
      return (
        <>
-          {`### Blogs posts`}
+          {`- ${props.prefix} [${props.project}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
+    } else {
+      return (
+        <>
+          {`- ${props.prefix} **${props.project}**`}
          <br />
-          {`<!-- BLOG-POST-LIST:START -->`}
          <br />
-          {`<!-- BLOG-POST-LIST:END -->`}
-          <br /> <br />
        </>
      )
    }
-    return ""
  }
-  const DisplayTopLanguages = props => {
-    if (props.show) {
-      if (!props.showStats) {
-        return (
-          <>
-            {`<p><img align="center" src="${topLanguagesLinkGenerator({
-              github: props.github,
-              options: props.options,
-            })}" alt="${props.github}" /></p>`}
-            <br />
-            <br />
-          </>
-        )
-      }
+  if (props.prefix && props.link) {
+    return (
+      <>
+        {`- ${props.prefix} [${props.link}](${props.link})`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySocial = props => {
+  if (props.username) {
+    return (
+      <>
+        {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="40" /></a>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const VisitorsBadge = props => {
+  let link =
+    "https://komarev.com/ghpvc/?username=" +
+    props.github +
+    `&label=${props.badgeOptions.badgeLabel}` +
+    `&color=${props.badgeOptions.badgeColor}` +
+    `&style=${props.badgeOptions.badgeStyle}`
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const TwitterBadge = props => {
+  let link =
+    "https://img.shields.io/twitter/follow/" +
+    props.twitter +
+    "?logo=twitter&style=for-the-badge"
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GithubProfileTrophy = props => {
+  let link =
+    "https://github-profile-trophy.vercel.app/?username=" + props.github
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GitHubStats = ({ show, github, options }) => {
+  if (show) {
+    return (
+      <>
+        {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+          github: github,
+          options,
+        })}" alt="${github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const isSocial = social => {
+  return (
+    social.dev ||
+    social.twitter ||
+    social.codepen ||
+    social.codesandbox ||
+    social.stackoverflow ||
+    social.linkedin ||
+    social.kaggle ||
+    social.instagram ||
+    social.fb ||
+    social.dribbble ||
+    social.behance ||
+    social.medium ||
+    social.youtube ||
+    social.codechef ||
+    social.hackerrank ||
+    social.codeforces ||
+    social.leetcode ||
+    social.topcoder ||
+    social.hackerearth ||
+    social.geeks_for_geeks ||
+    social.discord ||
+    social.rssurl
+  )
+}
+const DisplaySkills = props => {
+  const listChosenSkills = []
+  skills.forEach(skill => {
+    if (props.skills[skill]) {
+      listChosenSkills.push(
+        `
+        <a href="${skillWebsites[skill]}" target="_blank">
+          <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
+        </a>
+        `
+      )
+    }
+  })
+  return listChosenSkills.length > 0 ? (
+    <>
+      <SectionTitle label="Languages and Tools:" />
+      {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+      <br />
+      <br />
+    </>
+  ) : (
+    ""
+  )
+}
+const DisplayDynamicBlogs = props => {
+  if (props.show) {
+    return (
+      <>
+        {`### Blogs posts`}
+        <br />
+        {`<!-- BLOG-POST-LIST:START -->`}
+        <br />
+        {`<!-- BLOG-POST-LIST:END -->`}
+        <br /> <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayTopLanguages = props => {
+  if (props.show) {
+    if (!props.showStats) {
      return (
        <>
-          {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          {`<p><img align="center" src="${topLanguagesLinkGenerator({
            github: props.github,
            options: props.options,
          })}" alt="${props.github}" /></p>`}
@@ -236,9 +224,57 @@ const Markdown = props => {
        </>
      )
    }
-    return ""
+    return (
+      <>
+        {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
  }
-
+  return ""
+}
+const DisplayStreakStats = props => {
+  if (props.show) {
+    return (
+      <>
+        {`<p><img align="center" src="${streakStatsLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySupport = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return viewSupport ? (
+    <div>
+      <SectionTitle label="Support:" />
+      {`<p>`}
+      {props.support.buyMeACoffee &&
+        `<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
+      <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
+      {`</p><br><br>`}
+      <br />
+      <br />
+    </div>
+  ) : (
+    ""
+  )
+}
+const Markdown = props => {
  return (
    <div id="markdown-content" className="break-words">
      <>
@@ -509,6 +545,9 @@ const Markdown = props => {
      <>
        <DisplaySkills skills={props.skills} />
      </>
+      <>
+        <DisplaySupport support={props.support} />
+      </>
      <>
        <DisplayTopLanguages
          show={props.data.topLanguages}
@@ -524,6 +563,13 @@ const Markdown = props => {
          options={props.data.githubStatsOptions}
        />
      </>
+      <>
+        <DisplayStreakStats
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
+        />
+      </>
    </div>
  )
 }
@@ -3,6 +3,7 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
  githubStatsLinkGenerator,
  topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"

 export const TitlePreview = props => {
@@ -298,10 +299,7 @@ export const GitHubStatsPreview = ({ github, options, show }) => {
  if (show) {
    return (
      <div className="text-center mx-4 mb-4">
-        <img
-          src={githubStatsLinkGenerator({ github, options })}
-          alt={github}
-        />
+        <img src={githubStatsLinkGenerator({ github, options })} alt={github} />
      </div>
    )
  }
@@ -322,15 +320,30 @@ export const TopLanguagesPreview = ({ github, options, show }) => {
  return <div className="text-center mx-4 mb-4"> &nbsp;</div>
 }

+export const StreakStatsPreview = ({ github, options, show }) => {
+  if (show) {
+    return (
+      <div className="text-center mx-4 mb-4">
+        <img src={streakStatsLinkGenerator({ github, options })} alt={github} />
+      </div>
+    )
+  }
+  return null
+}
+
 export const SkillsPreview = props => {
  var listSkills = []
  skills.forEach(skill => {
    if (props.skills[skill]) {
      listSkills.push(
-        <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
+        <a
+          href={skillWebsites[skill]}
+          key={skill}
+          target="_blank"
+          rel="noreferrer"
+        >
          <img
            className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
-            key={skill}
            src={icons[skill]}
            alt={skill}
          />
@@ -344,12 +357,39 @@ export const SkillsPreview = props => {
      {listSkills}
    </div>
  ) : (
-      ""
-    )
+    ""
+  )
+}
+
+export const SupportPreview = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return (
+    <div className="mb-4">
+      <SectionTitle label="Support:" visible={viewSupport} />
+      {props.support.buyMeACoffee && (
+        <div style={{ width: "210px" }}>
+          <a
+            href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
+            target="_blank"
+          >
+            <img
+              src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+              alt="Buy Me A Coffee"
+              className="w-36 h-8 sm:w-52 sm:h-12"
+            />
+          </a>
+        </div>
+      )}
+    </div>
+  )
 }

 const MarkdownPreview = props => {
-
  return (
    <div id="markdown-preview">
      <TitlePreview prefix={props.prefix.title} title={props.data.title} />
@@ -374,6 +414,7 @@ const MarkdownPreview = props => {
      <WorkPreview work={props} />
      <SocialPreview social={props.social} />
      <SkillsPreview skills={props.skills} />
+      <SupportPreview support={props.support} />
      <div className="block sm:flex sm:justify-center sm:items-start">
        <TopLanguagesPreview
          show={props.data.topLanguages}
@@ -385,6 +426,11 @@ const MarkdownPreview = props => {
          github={props.social.github}
          options={props.data.githubStatsOptions}
        />
+        <StreakStatsPreview
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
+        />
      </div>
    </div>
  )
@@ -0,0 +1,29 @@
+import React from "react"
+
+const Support = props => {
+  return (
+    <div className="px-2 sm:px-6 mb-4">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Support
+      </div>
+      <div className="flex flex-wrap justify-start items-center">
+        <div className="w-2/5 flex justify-between items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+            className="w-36 h-8 sm:w-52 sm:h-12"
+            alt="buymeacoffee"
+          />
+          <input
+            id="buy-me-a-coffee"
+            placeholder="buymeacoffee username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            value={props.support.buyMeACoffee || ""}
+            onChange={event => props.handleSupportChange("buyMeACoffee", event)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Support
@@ -0,0 +1,97 @@
+export const DEFAULT_PREFIX = {
+  title: "Hi 👋, I'm",
+  currentWork: "🔭 I’m currently working on",
+  currentLearn: "🌱 I’m currently learning",
+  collaborateOn: "👯 I’m looking to collaborate on",
+  helpWith: "🤝 I’m looking for help with",
+  ama: "💬 Ask me about",
+  contact: "📫 How to reach me",
+  resume: "📄 Know about my experiences",
+  funFact: "⚡ Fun fact",
+  portfolio: "👨‍💻 All of my projects are available at",
+  blog: "📝 I regularly write articles on",
+}
+
+export const DEFAULT_DATA = {
+  title: "",
+  subtitle: "A passionate frontend developer from India",
+  currentWork: "",
+  currentLearn: "",
+  collaborateOn: "",
+  helpWith: "",
+  ama: "",
+  contact: "",
+  funFact: "",
+  twitterBadge: false,
+  visitorsBadge: false,
+  badgeStyle: "flat",
+  badgeColor: "0e75b6",
+  badgeLabel: "Profile views",
+  githubProfileTrophy: false,
+  githubStats: false,
+  githubStatsOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  topLanguages: false,
+  topLanguagesOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  streakStats: false,
+  streakStatsOptions: {
+    theme: "",
+  },
+  devDynamicBlogs: false,
+  mediumDynamicBlogs: false,
+  rssDynamicBlogs: false,
+}
+
+export const DEFAULT_LINK = {
+  currentWork: "",
+  collaborateOn: "",
+  helpWith: "",
+  portfolio: "",
+  blog: "",
+  resume: "",
+}
+
+export const DEFAULT_SOCIAL = {
+  github: "",
+  dev: "",
+  linkedin: "",
+  codepen: "",
+  stackoverflow: "",
+  kaggle: "",
+  codesandbox: "",
+  fb: "",
+  instagram: "",
+  twitter: "",
+  dribbble: "",
+  behance: "",
+  medium: "",
+  youtube: "",
+  codechef: "",
+  hackerrank: "",
+  codeforces: "",
+  leetcode: "",
+  topcoder: "",
+  hackerearth: "",
+  geeks_for_geeks: "",
+  discord: "",
+  rssurl: "",
+}
+
+export const DEFAULT_SUPPORT = {
+    buyMeACoffee: ""
+}
@@ -28,6 +28,18 @@ You can customize the theme too. See how to customize yours [here](https://githu

 <br/>

+## [GitHub Readme Streak Stats](https://github.com/DenverCoder1/github-readme-streak-stats)
+
+Stay motivated while contributing to open source by displaying your current contribution streak
+
+![rahuldkjain](https://github-readme-streak-stats.herokuapp.com/?user=rahuldkjain)
+
+Developed by by [Jonah Lawrence](https://github.com/DenverCoder1).
+
+See how to customize the theme [here](https://github.com/DenverCoder1/github-readme-streak-stats)
+
+<br/>
+
 ## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)

 It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
+import gsap from "gsap"
 import MarkdownPreview from "../components/markdownPreview"
 import Markdown from "../components/markdown"
-// import Header from "../components/header"
 import Title from "../components/title"
 import Subtitle from "../components/subtitle"
 import Work from "../components/work"
@@ -9,10 +9,11 @@ import Social from "../components/social"
 import Addons from "../components/addons"
 import Skills from "../components/skills"
 import Donate from "../components/donate"
+import Support from "../components/support"
 import { initialSkillState } from "../constants/skills"
-import gsap from "gsap"
 import Loader from "../components/loader"
-// import Footer from "../components/footer"
+import SEO from "../components/seo"
+import Layout from "../components/layout"
 import "./index.css"
 import {
  ArrowLeftIcon,
@@ -23,105 +24,20 @@ import {
  MarkdownIcon,
  FileCodeIcon,
 } from "@primer/octicons-react"
-import SEO from "../components/seo"
 import {
  isGitHubUsernameValid,
  isMediumUsernameValid,
  isTwitterUsernameValid,
 } from "../utils/validation"
-import Layout from "../components/layout"
+import {
+  DEFAULT_PREFIX,
+  DEFAULT_DATA,
+  DEFAULT_LINK,
+  DEFAULT_SOCIAL,
+  DEFAULT_SUPPORT,
+} from "../constants/defaults"

-const DEFAULT_PREFIX = {
-  title: "Hi 👋, I'm",
-  currentWork: "🔭 I’m currently working on",
-  currentLearn: "🌱 I’m currently learning",
-  collaborateOn: "👯 I’m looking to collaborate on",
-  helpWith: "🤝 I’m looking for help with",
-  ama: "💬 Ask me about",
-  contact: "📫 How to reach me",
-  resume: "📄 Know about my experiences",
-  funFact: "⚡ Fun fact",
-  portfolio: "👨‍💻 All of my projects are available at",
-  blog: "📝 I regulary write articles on",
-}
-
-const DEFAULT_DATA = {
-  title: "",
-  subtitle: "A passionate frontend developer from India",
-  currentWork: "",
-  currentLearn: "",
-  collaborateOn: "",
-  helpWith: "",
-  ama: "",
-  contact: "",
-  funFact: "",
-  twitterBadge: false,
-  visitorsBadge: false,
-  badgeStyle: "flat",
-  badgeColor: "0e75b6",
-  badgeLabel: "Profile views",
-  githubProfileTrophy: false,
-  githubStats: false,
-  githubStatsOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  topLanguages: false,
-  topLanguagesOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  devDynamicBlogs: false,
-  mediumDynamicBlogs: false,
-  rssDynamicBlogs: false,
-}
-
-const DEFAULT_LINK = {
-  currentWork: "",
-  collaborateOn: "",
-  helpWith: "",
-  portfolio: "",
-  blog: "",
-  resume: "",
-}
-
-const DEFAULT_SOCIAL = {
-  github: "",
-  dev: "",
-  linkedin: "",
-  codepen: "",
-  stackoverflow: "",
-  kaggle: "",
-  codesandbox: "",
-  fb: "",
-  instagram: "",
-  twitter: "",
-  dribbble: "",
-  behance: "",
-  medium: "",
-  youtube: "",
-  codechef: "",
-  hackerrank: "",
-  codeforces: "",
-  leetcode: "",
-  topcoder: "",
-  hackerearth: "",
-  geeks_for_geeks: "",
-  discord: "",
-  rssurl: "",
-}
-
-const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
+const KeepCacheUpdated = ({ prefix, data, link, social, skills, support }) => {
  useEffect(() => {
    localStorage.setItem(
      "cache",
@@ -131,9 +47,10 @@ const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
        link,
        social,
        skills,
+        support,
      })
    )
-  }, [prefix, data, link, social, skills])
+  }, [prefix, data, link, social, skills, support])
 }

 const DEFAULT_SKILLS = initialSkillState
@@ -144,6 +61,7 @@ const IndexPage = () => {
  const [link, setLink] = useState(DEFAULT_LINK)
  const [social, setSocial] = useState(DEFAULT_SOCIAL)
  const [skills, setSkills] = useState(DEFAULT_SKILLS)
+  const [support, setSupport] = useState(DEFAULT_SUPPORT)

  const [restore, setRestore] = useState("")
  const [generatePreview, setGeneratePreview] = useState(false)
@@ -190,6 +108,12 @@ const IndexPage = () => {
    setSocial(change)
  }

+  const handleSupportChange = (field, e) => {
+    let change = { ...support }
+    change[field] = e.target.value
+    setSupport(change)
+  }
+
  const handleCheckChange = field => {
    let change = { ...data }
    change[field] = !change[field]
@@ -253,7 +177,8 @@ const IndexPage = () => {
      data.visitorsBadge ||
      data.githubProfileTrophy ||
      data.githubStats ||
-      data.topLanguages
+      data.topLanguages ||
+      data.streakStats
    ) {
      if (social.github && isGitHubUsernameValid(social.github)) {
        generate()
@@ -410,6 +335,10 @@ const IndexPage = () => {
      cache.skills
    )
    setSkills(cacheSkills || DEFAULT_SKILLS)
+
+    setSupport(
+      cache.support ? { ...DEFAULT_SUPPORT, ...cache.support } : DEFAULT_SUPPORT
+    )
  }

  useEffect(() => {
@@ -430,7 +359,7 @@ const IndexPage = () => {
  }, [])

  // keep cache updated
-  KeepCacheUpdated({ prefix, data, link, social, skills })
+  KeepCacheUpdated({ prefix, data, link, social, skills, support })

  const handleResetForm = () => {
    setPrefix(DEFAULT_PREFIX)
@@ -516,11 +445,16 @@ const IndexPage = () => {
            handleCheckChange={handleCheckChange}
            handleDataChange={handleDataChange}
          />
+          <Support
+            support={support}
+            handleSupportChange={handleSupportChange}
+          />
          <div className="section">
            {(data.visitorsBadge ||
              data.githubProfileTrophy ||
              data.githubStats ||
-              data.topLanguages) &&
+              data.topLanguages ||
+              data.streakStats) &&
            !social.github ? (
              <div className="warning">
                * Please add github username to use these add-ons
@@ -670,6 +604,7 @@ const IndexPage = () => {
                    link={link}
                    social={social}
                    skills={skills}
+                    support={support}
                  />
                ) : (
                  ""
@@ -681,6 +616,7 @@ const IndexPage = () => {
                    link={link}
                    social={social}
                    skills={skills}
+                    support={support}
                  />
                ) : (
                  ""
@@ -13,8 +13,19 @@ const githubStatsStylingQueryString = options => {
  return query_string
 }

+const streakStatsStylingQueryString = options => {
+  const params = {
+    ...(options.theme && options.theme !== "none") && { theme: options.theme },
+  }
+  const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
+  return query_string
+}
+
 export const githubStatsLinkGenerator = ({github, options}) =>
  `https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`

 export const topLanguagesLinkGenerator = ({github, options}) =>
 `https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
+
+export const streakStatsLinkGenerator = ({github, options}) =>
+ `https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`
Author	SHA1	Message	Date
zolostays	5723c38dc9	[update]: jest threshold	2020-12-04 16:43:42 +05:30
zolostays	ec78c6ba05	[add]: buymeacoffee support	2020-12-04 16:34:31 +05:30
Rahul Jain	d9469f4eda	Merge pull request #325 from DenverCoderOne/add-github-streak-stats [add]: GitHub streak stats	2020-11-29 12:46:17 +05:30
DenverCoder1	c7c7e1c357	Merge branch 'master' of https://github.com/rahuldkjain/github-profile-readme-generator into add-github-streak-stats	2020-11-04 04:36:18 +02:00
Rahul Jain	4ffebfb792	Merge pull request #329 from ankurchaudhary627/master [add]: prettier and eslint config files	2020-10-31 22:12:22 +05:30
Ankur Chaudhary	779ba7827e	Added prettier and eslint config files	2020-10-31 21:37:21 +05:30
DenverCoder1	5d542208ca	Added highcontrast theme for streak stats	2020-10-30 04:52:31 +02:00
DenverCoder1	96037f3ff5	Merge branch 'master' into add-github-streak-stats Checks were failing in the previously merged master branch	2020-10-29 13:57:44 +02:00
Kate Dainovich	f11ef643bc	Merge pull request #311 from emilpalsson/skills-test Add unit test cases for skills component	2020-10-28 22:39:56 +03:00
Kate Dainovich	b3e4a1a0a9	Merge pull request #318 from Tekipeps/master Add unit test for Social component	2020-10-28 22:36:05 +03:00
Rahul Jain	fbbb95f61f	Merge pull request #328 from rahuldkjain/improve-readme [fix]: readme and package.json	2020-10-28 11:34:56 +05:30
zolostays	1d672fe879	[fix]: readme and package.json	2020-10-28 11:32:39 +05:30
emilpalsson	ac15f4ae45	Add unit test cases for skills component	2020-10-27 22:43:38 +01:00
Tekena Solomon	55951c9ef5	Merge remote-tracking branch 'upstream/master' into master	2020-10-27 19:23:44 +01:00
Kate Dainovich	e29ddc1637	Merge pull request #314 from anusha5695/ISSUE-294	2020-10-27 18:25:01 +03:00
Rahul Jain	a18dc59933	Merge pull request #327 from rahuldkjain/new-sponsors [add]: new sponsors	2020-10-27 11:05:20 +05:30
Anusha S	a93d958944	tech: add more test cases for coverage	2020-10-27 01:50:39 +05:30
Tekena Solomon	07b18b4c8a	revert all other changes not related to social component	2020-10-26 20:47:40 +01:00
Jonah Lawrence	050d0b3a04	Merge branch 'master' into add-github-streak-stats	2020-10-26 19:09:34 +02:00
anusha5695	12315be78b	Merge branch 'master' into ISSUE-294	2020-10-26 21:31:00 +05:30
Anusha S	3d296812e8	tech: use enzyme to json instead of react test renderer	2020-10-26 12:42:37 +05:30
Citrinin	d82a367616	fix tests & update config	2020-10-26 12:42:37 +05:30
DenverCoder1	b243675abd	Added to features list	2020-10-26 04:49:11 +02:00
DenverCoder1	1ca5906aa9	Added to readme	2020-10-26 04:46:39 +02:00
DenverCoder1	d13c451cc0	Using streak stats options menu	2020-10-26 04:41:24 +02:00
DenverCoder1	12279914f1	Fixed link generator name and theme query string	2020-10-26 04:37:49 +02:00
DenverCoder1	25a1bf4110	Add GitHub Streak Stats	2020-10-26 03:57:34 +02:00
Tekena Solomon	444c84407c	Merge remote-tracking branch 'upstream/master' into master	2020-10-26 00:33:31 +01:00
Tekena Solomon	5803097e9d	Add unit test for Social component	2020-10-24 15:13:32 +01:00
Anusha S	eafa964cb9	tech: add snapshot test for add ons component	2020-10-24 14:18:03 +05:30