[add]: new sponsors

[add]: unit test for Markdown Preview

.github/ISSUE_TEMPLATE/bug_report.md

@@ -39,5 +39,11 @@ If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.
 
+
 Join the **Discord Server** for further discussions.
+
+<a href="https://discord.gg/HHMs7Eg">
+<img src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg" alt="GPRG Discord Server Link" width="300px"/>
+</a>
+
 Server Link: https://discord.gg/HHMs7Eg

.github/ISSUE_TEMPLATE/feature-enhancement-request.md

@@ -2,7 +2,7 @@
 name: Feature/Enhancement request
 about: Suggest an idea for this project
 title: ""
-labels: enhancement
+labels: enhancement, hacktoberfest
 assignees: ""
 ---
 
@@ -20,4 +20,8 @@ Add any other context or screenshots about the feature request here.
 
 Join the **Discord Server** for further discussions.
 
+<a href="https://discord.gg/HHMs7Eg">
+<img src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg" alt="GPRG Discord Server Link" width="300px"/>
+</a>
+
 Server Link: https://discord.gg/HHMs7Eg

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "stable"
+cache:
+  directories:
+    - "node_modules"

CODE_STYLE_GUIDE.md

@@ -0,0 +1,91 @@
+# Coding Style
+
+## File Layout (`src/components/*.js`)
+
+1. Imports
+2. Reusabe components needed for the main component
+3. Main component (Eg: Addons in addons.js)
+4. export default \<MainComponent\>;
+
+## Reusable components
+
+* Do not make a new file for smaller components.
+* Smaller, reusable components neeeded in the main components should be added **above** the main component, **not** inside it.
+* Use ES6 arrow functions for defining components.
+
+## Spacing
+
+1. **JS:**
+    * Use a space after `if`, `for`, `while`, `switch`.
+    * Do not use a space after the opening `(` and before the closing `)`.
+    * Use a space before and after destructuring objects.
+    ```js
+        //good
+        const { apple, mangoes } = fruits;
+        
+        //bad
+        const {apple, mangoes} = fruits;
+
+
+        //Same for destructuring props:
+        //good
+        const BeautifulComponent = ({ prop1, prop2 }) => {}
+
+        //bad
+        const UglyComponent = ({prop1, prop2}) => {}
+    ```
+
+2. **JSX:**
+    * Use a space before the forward slash (`/`) of a self-closing tag
+    ```js
+    //good
+    <Foo />
+
+    //bad 
+    <Foo/>
+    ```
+    * Do **not** use spaces for JSX curly braces
+    ```js
+    //good
+    <Foo bar={baz} />
+
+    //bad
+    <Foo bar={ baz } />
+    ```
+
+## **Props:**
+
+* Use camelCase for prop names, or PascalCase if the prop value is a React component.
+* Use new lines when props do not fit on the same line.
+    ```js
+    //good
+    <Foo 
+        prop1={value1}
+        prop2={value2}
+        prop3={value3}
+    />
+
+    //bad
+    <Foo prop1={value1} prop2={value2} prop3={value3} />
+    ```
+
+## **Best practices:**
+
+* **Always** add semicolons after a line.
+* Use ES6 arrow functions.
+* Keep the indentation in your code correct.
+* Use 4 spaces for tabs.
+* Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
+* **Always** add alt prop to `img` tags.
+* Add `rel="noopener"` for `a` tags which has `target="_blank"`.
+* Don't do `outline: none` on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.
+
+### Other things to note
+
+* We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
+* Try to not commit changes in `package.json`, `package-lock.json`. 
+* Disscuss with contributors on discord if you're planning to add/remove a package.
+
+## Further reading:
+
+This guide is based on [airbnb's react guide](https://github.com/airbnb/javascript/tree/master/react). You can read all the best practices there.

README.md

@@ -138,6 +138,9 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first-ever grant to this tool. A big thanks to him.
 - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed support with his donation. Thanks a lot.
+- [Aadit Kamat](https://github.com/aaditkamat) find the tool useful and showed support with his donation. A big thanks to him.
+- [Jean-Michel Fayard](https://github.com/jmfayard) used the generator to create his GitHub Profile README and he loved it. Thanks to him for showing support to the tool with the donation.
+
 
 ## 🙏 Support
 

jest.config.js

@@ -12,4 +12,14 @@ module.exports = {
     __PATH_PREFIX__: ``,
   },
   setupFiles: [`<rootDir>/loadershim.js`],
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  coverageThreshold: {
+    global: {
+      branches: 0,
+      functions: 76,
+      lines: 68,
+      statements: 68,
+    },
+  },
 }

package-lock.json

@@ -5676,6 +5676,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.22",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.22.tgz",
+      "integrity": "sha512-05DYX4zU96IBfZFY+t3Mh88nlwSMtmmzSYaQkKN48T495VV1dkHSah6qYyDTN5ngaS0i0VonH37m+RuzSM0YiA==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -6271,6 +6279,22 @@
         "indent-string": "^4.0.0"
       }
     },
+    "airbnb-prop-types": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
+      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
+      "requires": {
+        "array.prototype.find": "^2.1.1",
+        "function.prototype.name": "^1.1.2",
+        "is-regex": "^1.1.0",
+        "object-is": "^1.1.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.2",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.13.1"
+      }
+    },
     "ajv": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
@@ -6508,6 +6532,15 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "array.prototype.find": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz",
+      "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.4"
+      }
+    },
     "array.prototype.flat": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz",
@@ -10143,6 +10176,11 @@
         "path-type": "^4.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo="
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -10552,6 +10590,83 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
       "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
     },
+    "enzyme": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
+      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
+      "requires": {
+        "array.prototype.flat": "^1.2.3",
+        "cheerio": "^1.0.0-rc.3",
+        "enzyme-shallow-equal": "^1.0.1",
+        "function.prototype.name": "^1.1.2",
+        "has": "^1.0.3",
+        "html-element-map": "^1.2.0",
+        "is-boolean-object": "^1.0.1",
+        "is-callable": "^1.1.5",
+        "is-number-object": "^1.0.4",
+        "is-regex": "^1.0.5",
+        "is-string": "^1.0.5",
+        "is-subset": "^0.1.1",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.7.0",
+        "object-is": "^1.0.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.1",
+        "object.values": "^1.1.1",
+        "raf": "^3.4.1",
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.2.1"
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.5.tgz",
+      "integrity": "sha512-33yUJGT1nHFQlbVI5qdo5Pfqvu/h4qPwi1o0a6ZZsjpiqq92a3HjynDhwd1IeED+Su60HDWV8mxJqkTnLYdGkw==",
+      "requires": {
+        "enzyme-adapter-utils": "^1.13.1",
+        "enzyme-shallow-equal": "^1.0.4",
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.1.tgz",
+      "integrity": "sha512-5A9MXXgmh/Tkvee3bL/9RCAAgleHqFnsurTYCbymecO4ohvtNO5zqIhHxV370t7nJAwaCfkgtffarKpC0GPt0g==",
+      "requires": {
+        "airbnb-prop-types": "^2.16.0",
+        "function.prototype.name": "^1.1.2",
+        "object.assign": "^4.1.0",
+        "object.fromentries": "^2.0.2",
+        "prop-types": "^15.7.2",
+        "semver": "^5.7.1"
+      }
+    },
+    "enzyme-shallow-equal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz",
+      "integrity": "sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==",
+      "requires": {
+        "has": "^1.0.3",
+        "object-is": "^1.1.2"
+      }
+    },
+    "enzyme-to-json": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.1.tgz",
+      "integrity": "sha512-15tXuONeq5ORoZjV/bUo2gbtZrN2IH+Z6DvL35QmZyKHgbY1ahn6wcnLd9Xv9OjiwbAXiiP8MRZwbZrCv1wYNg==",
+      "requires": {
+        "@types/cheerio": "^0.22.22",
+        "lodash": "^4.17.15",
+        "react-is": "^16.12.0"
+      }
+    },
     "eol": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/eol/-/eol-0.9.1.tgz",
@@ -12201,11 +12316,26 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "function.prototype.name": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.2.tgz",
+      "integrity": "sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1",
+        "functions-have-names": "^1.2.0"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "functions-have-names": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.1.tgz",
+      "integrity": "sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA=="
+    },
     "gatsby": {
       "version": "2.23.12",
       "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.23.12.tgz",
@@ -15380,6 +15510,21 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "html-element-map": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.2.0.tgz",
+      "integrity": "sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==",
+      "requires": {
+        "array-filter": "^1.0.0"
+      },
+      "dependencies": {
+        "array-filter": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+          "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM="
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -16417,6 +16562,11 @@
         "binary-extensions": "^1.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.1.tgz",
+      "integrity": "sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ=="
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -16603,6 +16753,11 @@
       "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
       "integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg="
     },
+    "is-negative-zero": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
+      "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -16621,6 +16776,11 @@
         }
       }
     },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw=="
+    },
     "is-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -16745,6 +16905,11 @@
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
       "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
     },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY="
+    },
     "is-svg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
@@ -20039,6 +20204,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
+    },
     "lodash.every": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
@@ -20054,6 +20224,11 @@
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
       "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.map": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
@@ -20870,6 +21045,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
       "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
     },
+    "moo": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
+      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -20974,6 +21154,18 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
+    "nearley": {
+      "version": "2.19.7",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.7.tgz",
+      "integrity": "sha512-Y+KNwhBPcSJKeyQCFjn8B/MIe+DDlhaaDgjVldhy5xtFewIbiQgcbZV8k2gCVwkI1ZsKCnjIYZbR+0Fim5QYgg==",
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6",
+        "semver": "^5.4.1"
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -22977,6 +23169,16 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "requires": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
     "proper-lockfile": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.1.tgz",
@@ -23159,6 +23361,28 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234="
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -23633,7 +23857,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
       "integrity": "sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==",
-      "dev": true,
       "requires": {
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
@@ -23645,7 +23868,6 @@
           "version": "0.19.1",
           "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
           "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-          "dev": true,
           "requires": {
             "loose-envify": "^1.1.0",
             "object-assign": "^4.1.1"
@@ -23837,6 +24059,11 @@
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
       "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
     },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -24655,6 +24882,15 @@
         "inherits": "^2.0.1"
       }
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -25964,6 +26200,60 @@
         "side-channel": "^1.0.2"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.2.tgz",
+      "integrity": "sha512-b5yrbl3BXIjHau9Prk7U0RRYcUYdN4wGSVaqoBQS50CCE3KBuYU0TYRNPFCP7aVoNMX87HKThdMRVIP3giclKg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.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.1",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.1.tgz",
+          "integrity": "sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==",
+          "requires": {
+            "define-properties": "^1.1.3",
+            "es-abstract": "^1.18.0-next.0",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        }
+      }
+    },
     "string.prototype.trimend": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",

package.json

@@ -1,11 +1,14 @@
 {
-  "name": "gh-profile-reamde-generator",
+  "name": "gh-profile-readme-generator",
   "private": true,
   "description": "A simple react app to generate beautiful github profile readme in md(markdown)",
   "version": "0.1.0",
   "author": "Rahul Jain <rahuldkjain@gmail.com>",
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-google-analytics": "^2.3.11",
@@ -35,7 +38,6 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "26.4.2",
     "prettier": "2.0.5",
-    "react-test-renderer": "16.13.1",
     "tailwindcss": "^1.7.6"
   },
   "keywords": [
@@ -49,7 +51,7 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "jest",
+    "test": "jest -i -u --coverage",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {

setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from "enzyme"
+import Adapter from "enzyme-adapter-react-16"
+
+configure({ adapter: new Adapter() })

src/components/__tests__/__snapshots__/donate.test.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Donate renders correctly 1`] = `
+<Fragment>
+  <div
+    className="text-center text-4xl my-2"
+  >
+    Support 
+    <span
+      aria-label="praying hand emoji"
+      role="img"
+    >
+      🙏
+    </span>
+  </div>
+  <div
+    className="flex flex-col sm:flex-row items-start justify-between"
+  >
+    <div
+      className="w-full sm:w-2/3"
+    >
+      <div
+        className="text-2xl mb-2"
+      >
+        Are you using the tool and happy with it to create your GitHub Profile?
+      </div>
+      <div
+        className="text-lg"
+      >
+        Your kind support keeps open-source tools like this free for others.
+      </div>
+      <div
+        className="mt-4"
+      >
+        <a
+          className="flex items-center justify-start w-20"
+          href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+        >
+          <img
+            alt="tweet github profile readme generator"
+            className="w-20"
+            src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+          />
+        </a>
+        Let the world know how you feel using this tool. Share with others on twitter.
+      </div>
+    </div>
+    <div
+      className="w-full sm:w-1/3 flex flex-col justify-center items-center"
+    >
+      <span>
+        Tip
+        <span
+          aria-label="Dollar medal"
+          role="img"
+        >
+          💰
+        </span>
+      </span>
+      <a
+        className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+        href="https://ko-fi.com/A0A81XXSX"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Buy ko-fi for rahuldkjain"
+          className="w-6 h-6 mr-2"
+          src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+        />
+        Buy me a ko-fi
+      </a>
+      <a
+        className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+        href="https://www.paypal.me/rahuldkjain/10"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Donate rahuldkjain via paypal"
+          className="w-6 h-6 mr-2"
+          src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+        />
+        Paypal
+      </a>
+      <a
+        className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+        href="https://www.buymeacoffee.com/rahuldkjain"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Buy rahuldkjain A Coffee"
+          className="w-6 h-6 mr-2"
+          src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+        />
+        Buy me a coffee
+      </a>
+    </div>
+  </div>
+</Fragment>
+`;

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer component renders correctly 1`] = `
+<div
+  className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2"
+>
+  <div
+    className="w-full flex flex-col sm:flex-row justify-evenly py-2"
+  >
+    <div
+      className="sm:ml-0 sm:mr-6 order-last sm:order-none flex"
+    >
+      <h1
+        className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0"
+      >
+        <div
+          className="flex sm:flex-col items-start mb-3 sm:mb-0"
+        >
+          <img
+            alt="github profile markdown generator logo"
+            className="hidden sm:block h-24"
+            src="test-file-stub"
+          />
+          <div
+            className="mr-2 sm:mr-0"
+          >
+            GitHub Profile
+             
+            <img
+              alt="github profile markdown generator logo"
+              className="inline sm:hidden h-12"
+              src="test-file-stub"
+            />
+            <span
+              className="block sm:inline"
+            >
+              README Generator
+            </span>
+          </div>
+        </div>
+      </h1>
+    </div>
+    <div
+      className="text-xl sm:text-base font-light sm:font-normal"
+    >
+      <div
+        className="font-title font-bold mb-4 sm:mb-2"
+      >
+        <strong>
+          Pages
+        </strong>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <mockConstructor
+          activeStyle={
+            Object {
+              "color": "#002ead",
+            }
+          }
+          to="/addons"
+        >
+          Addons
+        </mockConstructor>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <mockConstructor
+          activeStyle={
+            Object {
+              "color": "#002ead",
+            }
+          }
+          to="/support"
+        >
+          Support
+        </mockConstructor>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <mockConstructor
+          activeStyle={
+            Object {
+              "color": "#002ead",
+            }
+          }
+          to="/about"
+        >
+          About
+        </mockConstructor>
+      </div>
+    </div>
+    <div
+      className="text-xl sm:text-base font-light sm:font-normal"
+    >
+      <div
+        className="font-title font-bold my-4 sm:my-0 sm:mb-2"
+      >
+        <strong>
+          More
+        </strong>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Github rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator"
+          target="blank"
+        >
+          Github
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
+          target="blank"
+        >
+          Releases
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Issues in rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
+          target="blank"
+        >
+          Issues
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
+          target="blank"
+        >
+          Pull Requests
+        </a>
+      </div>
+    </div>
+    <div>
+      <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"
+      >
+        <a
+          aria-label="Discord of the community"
+          href="https://discord.gg/HHMs7Eg"
+          target="blank"
+        >
+          <img
+            alt="Discord of the community"
+            className="h-12"
+            src="test-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+  <div
+    className="py-2 mt-2"
+  >
+    Developed in India
+     
+    <span
+      aria-label="india"
+      role="img"
+    >
+       
+      🇮🇳
+    </span>
+  </div>
+</div>
+`;

src/components/__tests__/__snapshots__/header.test.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header renders correctly 1`] = `
+<div
+  className="shadow flex items-center justify-center flex-col mb-2 py-2"
+>
+  <mockConstructor
+    to="/"
+  >
+    <h1
+      className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col"
+    >
+      <img
+        alt="github profile markdown generator logo"
+        className="w-12 h-12"
+        src="test-file-stub"
+      />
+      <div>
+        heading
+      </div>
+    </h1>
+  </mockConstructor>
+  <div
+    className="flex justify-center items-center"
+  >
+    <a
+      aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
+      className="mr-2"
+      href="https://github.com/rahuldkjain/github-profile-readme-generator"
+      target="blank"
+    >
+      <div
+        className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2"
+      >
+        <StarIcon
+          className="px-1 w-6 star"
+          id="star-icon"
+          size={16}
+          verticalAlign="text-bottom"
+        />
+        Star this repo
+        <span
+          className="github-count px-1 sm:px-2"
+        >
+          0
+        </span>
+      </div>
+    </a>
+    <a
+      aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
+      href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
+      target="blank"
+    >
+      <div
+        className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2"
+      >
+        <RepoForkedIcon
+          className="px-1 w-6 fork"
+          id="fork-icon"
+          size={16}
+          verticalAlign="text-bottom"
+        />
+        Fork on GitHub
+        <span
+          className="github-count px-1 sm:px-2"
+        >
+          0
+        </span>
+      </div>
+    </a>
+  </div>
+</div>
+`;

src/components/__tests__/__snapshots__/loader.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader renders correctly 1`] = `
+<div
+  className="loader"
+>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+</div>
+`;

src/components/__tests__/__snapshots__/markdownPreview.test.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplaySocial Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`DisplaySocial Preview renders correctly with no username 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no link 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no project 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no project and link 1`] = `ShallowWrapper {}`;
+
+exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `ShallowWrapper {}`;
+
+exports[`GitHubStats Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`GitHubStats Preview renders correctly 2`] = `ShallowWrapper {}`;
+
+exports[`GithubProfileTrophy Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+
+exports[`Markdown Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`SectionTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`SectionTitle Preview renders correctly with no label 1`] = `ShallowWrapper {}`;
+
+exports[`SectionTitle Preview renders correctly with visible false 1`] = `ShallowWrapper {}`;
+
+exports[`Skills Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`Skills Preview renders correctly with no skills 1`] = `ShallowWrapper {}`;
+
+exports[`Social Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`SubTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`SubTitle Preview renders correctly with no subtitle 1`] = `ShallowWrapper {}`;
+
+exports[`Title Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`Title Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
+
+exports[`Title Preview renders correctly with no title 1`] = `ShallowWrapper {}`;
+
+exports[`Title Preview renders correctly with no title and prefix 1`] = `ShallowWrapper {}`;
+
+exports[`TopLanguages Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`TopLanguages Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+
+exports[`TwitterBadgePreview Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+
+exports[`VisitorsBadge Preview renders correctly 1`] = `ShallowWrapper {}`;
+
+exports[`VisitorsBadge Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
+
+exports[`Work Preview renders correctly 1`] = `ShallowWrapper {}`;

src/components/__tests__/__snapshots__/subtitle.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subtitle renders correctly 1`] = `
+<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"
+  >
+    Subtitle
+  </div>
+  <input
+    className="outline-none w-full text-xs sm:text-lg 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="subtitle"
+    onChange={[Function]}
+    value="A frontend developer"
+  />
+</div>
+`;

src/components/__tests__/__snapshots__/title.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Title renders correctly 1`] = `
+exports[`Title renders title component correctly 1`] = `
 <div
   className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
 >
@@ -16,14 +16,14 @@ exports[`Title renders correctly 1`] = `
       className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
       id="title-prefix"
       onChange={[Function]}
-      value="Hi 👋, I'm"
+      value="test_title"
     />
     <input
       className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
       id="title-name"
       onChange={[Function]}
       placeholder="name"
-      value=""
+      value="test_data"
     />
   </div>
 </div>

src/components/__tests__/__snapshots__/work.test.js.snap

@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Work renders work component correctly 1`] = `
+<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"
+  >
+    Work
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork-prefix"
+      onChange={[Function]}
+      placeholder="Hi, I'm "
+      value="test_currentwork"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork-link"
+      onChange={[Function]}
+      placeholder="project link"
+      value="test_currentwork"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn-link"
+      onChange={[Function]}
+      placeholder="project link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith-link"
+      onChange={[Function]}
+      placeholder="project link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentLearn-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentLearn"
+      onChange={[Function]}
+      placeholder="Frameworks, courses etc."
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="ama-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="ama"
+      onChange={[Function]}
+      placeholder="react, vue and gsap"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="contact-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="contact"
+      onChange={[Function]}
+      placeholder="example@gmail.com"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="portfolio-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="portfolio"
+      onChange={[Function]}
+      placeholder="portfolio link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="blog-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="blog"
+      onChange={[Function]}
+      placeholder="blog link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="resume-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="resume"
+      onChange={[Function]}
+      placeholder="resume link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="funFact-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="funFact"
+      onChange={[Function]}
+      placeholder="I think I am funny"
+    />
+  </div>
+</div>
+`;

src/components/__tests__/donate.test.js

@@ -0,0 +1,12 @@
+import React from "react"
+import toJson from "enzyme-to-json"
+import { shallow } from "enzyme"
+
+import Donate from "../donate"
+
+describe("Donate", () => {
+  it("renders correctly", () => {
+    const component = shallow(<Donate />)
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/__tests__/footer.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Footer from "../footer"
+
+describe("Footer component", () => {
+  const component = shallow(<Footer />)
+
+  it("renders correctly", () => {
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/__tests__/header.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Header from "../header"
+
+describe("Header", () => {
+  const component = shallow(<Header heading="heading" />)
+
+  it("renders correctly", () => {
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/__tests__/loader.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Loader from "../loader"
+
+describe("Loader", () => {
+  const component = shallow(<Loader />)
+
+  it("renders correctly", () => {
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/__tests__/markdown.test.js

@@ -0,0 +1,215 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Markdown from "../markdown"
+
+describe("Markdown", () => {
+  const props = {
+    data: {
+      ama: '',
+      badgeColor: '0e75b6',
+      badgeLabel: 'Profile views',
+      badgeStyle: 'flat',
+      collaborateOn: '',
+      contact: '',
+      currentLearn: '',
+      currentWork: 'currentWork',
+      devDynamicBlogs: false,
+      funFact: '',
+      githubProfileTrophy: false,
+      githubStats: false,
+      githubStatsOptions: {
+        bgColor: '',
+        cacheSeconds: null,
+        hideBorder: false,
+        locale: 'en',
+        textColor: '',
+        theme: '',
+        titleColor: '',
+      },
+      helpWith: '',
+      mediumDynamicBlogs: false,
+      rssDynamicBlogs: false,
+      subtitle: 'A passionate frontend developer from India',
+      title: 'title',
+      topLanguages: false,
+      topLanguagesOptions: {
+        bgColor: '',
+        cacheSeconds: null,
+        hideBorder: false,
+        locale: 'en',
+        textColor: '',
+        theme: '',
+        titleColor: '',
+      },
+      twitterBadge: false,
+      visitorsBadge: false,
+    },
+    link: {
+      blog: 'blog',
+      collaborateOn: 'collaborateOn',
+      currentWork: 'currentWork',
+      helpWith: 'helpWith',
+      portfolio: 'portfolio',
+      resume: 'resume',
+    },
+    prefix: {
+      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: {
+      javascript: true,
+      express: false,
+    },
+    social: {
+      dev: 'dev',
+      codechef: '',
+    },
+  };
+
+
+  it("renders without subtitle", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            subtitle: '',
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders without prefix.title and data.title", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            title: '',
+          }}
+          prefix={{
+            ...props.prefix,
+            title: '',
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders topLanguages is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            topLanguages: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders topLanguages is true and githubStats is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            topLanguages: true,
+            githubStats: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders devDynamicBlogs is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            devDynamicBlogs: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders without link.currentWork", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          link={{
+            ...props.data,
+            currentWork: '',
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders visitorsBadge is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            visitorsBadge: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders twitterBadge is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            twitterBadge: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders githubProfileTrophy is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            githubProfileTrophy: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("renders githubProfileTrophy is true", () => {
+    const component = shallow(
+        <Markdown
+          {...props}
+          data={{
+            ...props.data,
+            githubProfileTrophy: true,
+          }}
+        />
+      )
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/__tests__/markdownPreview.test.js

@@ -0,0 +1,415 @@
+import React from "react";
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkdownPreview, { GithubProfileTrophyPreview, GitHubStatsPreview, SkillsPreview, SocialPreview, SubTitlePreview, TitlePreview, TopLanguagesPreview, TwitterBadgePreview, VisitorsBadgePreview, WorkPreview, SectionTitle, DisplayWork, DisplaySocial } from "../markdownPreview"
+
+configure({ adapter: new Adapter() });
+
+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: "dummy",
+    subtitle: "A passionate frontend developer from India",
+    currentWork: "readme-generator",
+    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: "https://dummy.com",
+    collaborateOn: "",
+    helpWith: "",
+    portfolio: "",
+    blog: "",
+    resume: "",
+}
+
+const DEFAULT_SOCIAL = {
+    github: "",
+    dev: "",
+    linkedin: "",
+    codepen: "dummy",
+    stackoverflow: "",
+    kaggle: "",
+    codesandbox: "",
+    fb: "",
+    instagram: "",
+    twitter: "",
+    dribbble: "",
+    behance: "",
+    medium: "",
+    youtube: "",
+    codechef: "",
+    hackerrank: "",
+    codeforces: "",
+    leetcode: "",
+    topcoder: "",
+    hackerearth: "",
+    geeks_for_geeks: "",
+    discord: "",
+    rssurl: "",
+}
+
+const DUMMY_SKILLS = {
+    skills: {
+        unity: true,
+        android: false,
+        angularjs: false,
+        apachecordova: false,
+    }
+}
+
+describe("Markdown Preview", () => {
+    it("renders correctly", () => {
+        let prefix = DEFAULT_PREFIX;
+        let data = DEFAULT_DATA;
+        let link = DEFAULT_LINK;
+        let social = DEFAULT_SOCIAL;
+        let skills = {}
+        const tree = shallow(<MarkdownPreview
+                prefix={prefix}
+                data={data}
+                link={link}
+                social={social}
+                skills={skills} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("Title Preview", () => {
+    it("renders correctly", () => {
+        let prefix = DEFAULT_PREFIX;
+        let data = DEFAULT_DATA;
+        const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no prefix", () => {
+        let prefix = DEFAULT_PREFIX;
+        const tree = shallow(<TitlePreview prefix={prefix.title} title={""} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no title", () => {
+        let data = DEFAULT_DATA;
+        const tree = shallow(<TitlePreview title={data.title} prefix={""} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no title and prefix", () => {
+        const tree = shallow(<TitlePreview />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("SubTitle Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no subtitle", () => {
+        const tree = shallow(<SubTitlePreview subtitle={""} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("SectionTitle Preview", () => {
+    it("renders correctly", () => {
+        const tree = shallow(<SectionTitle visible={true} label={"dummy"} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no label", () => {
+        const tree = shallow(<SectionTitle visible={true} label={""} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with visible false", () => {
+        const tree = shallow(<SectionTitle visible={false} label={"dummy"} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("DisplayWork Preview", () => {
+    it("renders correctly", () => {
+        let prefix = DEFAULT_PREFIX;
+        let data = DEFAULT_DATA;
+        let link = DEFAULT_LINK;
+        const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no prefix, link and project", () => {
+        const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no prefix", () => {
+        let data = DEFAULT_DATA;
+        let link = DEFAULT_LINK;
+        const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no project", () => {
+        let prefix = DEFAULT_PREFIX;
+        let link = DEFAULT_LINK;
+        const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no link", () => {
+        let prefix = DEFAULT_PREFIX;
+        let data = DEFAULT_DATA;
+        const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined}/>)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no prefix and link", () => {
+        let data = DEFAULT_DATA;
+        const tree = shallow(<DisplayWork project={data.currentWork} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no project and link", () => {
+        let prefix = DEFAULT_PREFIX;
+        const tree = shallow(<DisplayWork prefix={prefix} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no project and prefix", () => {
+        let link = DEFAULT_LINK;
+        const tree = shallow(<DisplayWork link={link.currentWork} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("DisplaySocial Preview", () => {
+    it("renders correctly", () => {
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<DisplaySocial
+                base="https://codepen.io"
+                icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+                username={social.codepen}
+            />
+            )
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no username", () => {
+        const tree = shallow(<DisplaySocial
+                base="https://codepen.io"
+                icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+                username={""}
+            />
+            )
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("VisitorsBadge Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<VisitorsBadgePreview
+                show={data.visitorsBadge}
+                github={social.github}
+                badgeOptions={{
+                    badgeLabel: encodeURI(data.badgeLabel),
+                    badgeColor: data.badgeColor,
+                    badgeStyle: data.badgeStyle,
+                }}
+            />
+            )
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with show true", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<VisitorsBadgePreview
+                show={true}
+                github={social.github}
+                badgeOptions={{
+                    badgeLabel: encodeURI(data.badgeLabel),
+                    badgeColor: data.badgeColor,
+                    badgeStyle: data.badgeStyle,
+                }}
+            />
+            )
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("GithubProfileTrophy Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<GithubProfileTrophyPreview
+                show={data.githubProfileTrophy}
+                github={social.github}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with show true", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<GithubProfileTrophyPreview
+                show={true}
+                github={social.github}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("TwitterBadgePreview Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<TwitterBadgePreview
+                show={data.twitterBadge}
+                twitter={social.twitter}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with show true", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<TwitterBadgePreview
+                show={true}
+                twitter={social.twitter}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("Work Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let prefix = DEFAULT_PREFIX;
+        let link = DEFAULT_LINK;
+        let props = { data: data, prefix: prefix, link: link }
+        const tree = shallow(<WorkPreview work={props} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("Social Preview", () => {
+    it("renders correctly", () => {
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<SocialPreview social={social} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("Skills Preview", () => {
+    it("renders correctly", () => {
+        let skills = DUMMY_SKILLS.skills
+        const tree = shallow(<SkillsPreview skills={skills} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with no skills", () => {
+        let skills = {}
+        const tree = shallow(<SkillsPreview skills={skills} />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("TopLanguages Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<TopLanguagesPreview
+                show={data.topLanguages}
+                github={social.github}
+                options={data.topLanguagesOptions}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly with show true", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<TopLanguagesPreview
+                show={true}
+                github={social.github}
+                options={data.topLanguagesOptions}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})
+describe("GitHubStats Preview", () => {
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<GitHubStatsPreview
+                show={data.githubStats}
+                github={social.github}
+                options={data.githubStatsOptions}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+    it("renders correctly", () => {
+        let data = DEFAULT_DATA;
+        let social = DEFAULT_SOCIAL;
+        const tree = shallow(<GitHubStatsPreview
+                show={true}
+                github={social.github}
+                options={data.githubStatsOptions}
+            />)
+            
+        expect(tree).toMatchSnapshot()
+    })
+})

src/components/__tests__/subtitle.test.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Subtitle from "../subtitle"
+
+describe("Subtitle", () => {
+  const mockEvent = { target: { value: "This is a mock event" } }
+  const props = {
+    data: {
+      subtitle: "A frontend developer",
+    },
+    handleDataChange: jest.fn().mockReturnValue({}),
+  }
+
+  const component = shallow(<Subtitle {...props} />)
+
+  it("renders correctly", () => {
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("calls onChange", () => {
+    component.find("input").at(0).simulate("change", mockEvent)
+    expect(props.handleDataChange).toBeCalledWith("subtitle", mockEvent)
+  })
+})

src/components/__tests__/title.test.js

@@ -1,13 +1,27 @@
 import React from "react"
-import renderer from "react-test-renderer"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
 
 import Title from "../title"
 
 describe("Title", () => {
-  it("renders correctly", () => {
+  const mockEvent = { target: { value: "This is a mock event" } }
-    const tree = renderer
+  const props = {
-      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+    prefix: {
-      .toJSON()
+      title: "test_title",
-    expect(tree).toMatchSnapshot()
+      currentWork: "test_currentwork",
+    },
+    data: { title: "test_data" },
+    link: { currentWork: "test_currentwork" },
+    handlePrefixChange: jest.fn().mockReturnValue({}),
+    handleLinkChange: jest.fn().mockReturnValue({}),
+    handleDataChange: jest.fn().mockReturnValue({}),
+  }
+
+  it("renders title component correctly", () => {
+    const component = shallow(<Title {...props} />)
+    component.find("input").at(0).simulate("change", mockEvent)
+    component.find("input").at(1).simulate("change", mockEvent)
+    expect(toJson(component)).toMatchSnapshot()
   })
 })

src/components/__tests__/work.test.js

@@ -0,0 +1,28 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Work from "../work"
+
+describe("Work", () => {
+  const mockEvent = { target: { value: "This is a mock event" } }
+  const props = {
+    prefix: {
+      title: "test_title",
+      currentWork: "test_currentwork",
+    },
+    data: { title: "test_data" },
+    link: { currentWork: "test_currentwork" },
+    handlePrefixChange: jest.fn().mockReturnValue({}),
+    handleLinkChange: jest.fn().mockReturnValue({}),
+    handleDataChange: jest.fn().mockReturnValue({}),
+  }
+
+  it("renders work component correctly", () => {
+    const component = shallow(<Work {...props} />)
+    for (let i = 0; i < component.find("input").length; i++) {
+      component.find("input").at(i).simulate("change", mockEvent)
+    }
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

src/components/footer.js

@@ -7,7 +7,7 @@ const Footer = () => {
   return (
     <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
       <div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
-        <div className="ml-2 sm:ml-0 sm:mr-6 order-last sm:order-none flex">
+        <div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
           <h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
             <div className="flex sm:flex-col items-start mb-3 sm:mb-0">
               <img
@@ -69,7 +69,7 @@ const Footer = () => {
               Releases
             </a>
           </div>
-          <div>
+          <div className="ml-2 sm:ml-0">
             <a
               href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
               aria-label="Issues in rahuldkjain/github-profile-readme-generator"
@@ -78,7 +78,7 @@ const Footer = () => {
               Issues
             </a>
           </div>
-          <div>
+          <div className="ml-2 sm:ml-0">
             <a
               href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
               aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
@@ -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>
+          <div class="ml-2 sm:ml-0">
             <a
               href="https://discord.gg/HHMs7Eg"
               aria-label="Discord of the community"

src/components/markdown.js

@@ -1,7 +1,10 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+} from "../utils/link-generators"
 
 const Markdown = props => {
   const Title = props => {
@@ -81,11 +84,12 @@ const Markdown = props => {
     return ""
   }
   const VisitorsBadge = props => {
-    let link = "https://komarev.com/ghpvc/?username=" 
+    let link =
-                + props.github
+      "https://komarev.com/ghpvc/?username=" +
-                + `&label=${props.badgeOptions.badgeLabel}`
+      props.github +
-                + `&color=${props.badgeOptions.badgeColor}`
+      `&label=${props.badgeOptions.badgeLabel}` +
-                + `&style=${props.badgeOptions.badgeStyle}`
+      `&color=${props.badgeOptions.badgeColor}` +
+      `&style=${props.badgeOptions.badgeStyle}`
     if (props.show) {
       return (
         <>
@@ -98,7 +102,10 @@ const Markdown = props => {
     return ""
   }
   const TwitterBadge = props => {
-    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    let link =
+      "https://img.shields.io/twitter/follow/" +
+      props.twitter +
+      "?logo=twitter&style=for-the-badge"
     if (props.show) {
       return (
         <>
@@ -128,7 +135,10 @@ const Markdown = props => {
     if (show) {
       return (
         <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({github: github, options})}" alt="${github}" /></p>`}
+          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+            github: github,
+            options,
+          })}" alt="${github}" /></p>`}
           <br />
           <br />
         </>
@@ -158,6 +168,7 @@ const Markdown = props => {
       social.topcoder ||
       social.hackerearth ||
       social.geeks_for_geeks ||
+      social.discord ||
       social.rssurl
     )
   }
@@ -205,7 +216,10 @@ const Markdown = props => {
       if (!props.showStats) {
         return (
           <>
-            {`<p><img align="center" src="${topLanguagesLinkGenerator({github: props.github, options: props.options})}" alt="${props.github}" /></p>`}
+            {`<p><img align="center" src="${topLanguagesLinkGenerator({
+              github: props.github,
+              options: props.options,
+            })}" alt="${props.github}" /></p>`}
             <br />
             <br />
           </>
@@ -213,7 +227,10 @@ const Markdown = props => {
       }
       return (
         <>
-          {`<p><img align="left" src="${topLanguagesLinkGenerator({github: props.github, options: props.options })}" alt="${props.github}" /></p>`}
+          {`<p><img align="left" src="${topLanguagesLinkGenerator({
+            github: props.github,
+            options: props.options,
+          })}" alt="${props.github}" /></p>`}
           <br />
           <br />
         </>
@@ -221,6 +238,7 @@ const Markdown = props => {
     }
     return ""
   }
+
   return (
     <div id="markdown-content" className="break-words">
       <>
@@ -236,7 +254,7 @@ const Markdown = props => {
           badgeOptions={{
             badgeLabel: encodeURI(props.data.badgeLabel),
             badgeColor: props.data.badgeColor,
-            badgeStyle: props.data.badgeStyle
+            badgeStyle: props.data.badgeStyle,
           }}
         />
       </>
@@ -320,7 +338,10 @@ const Markdown = props => {
         <>
           <SectionTitle label="Connect with me:" />
           {`<p align="left">`}
-        </>) : ""}
+        </>
+      ) : (
+        ""
+      )}
       <br />
       <>
         <DisplaySocial
@@ -462,6 +483,13 @@ const Markdown = props => {
           username={props.social.topcoder}
         />
       </>
+      <>
+        <DisplaySocial
+          base="https://discord.gg"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+          username={props.social.discord}
+        />
+      </>
       <>
         <DisplaySocial
           base=""

src/components/markdownPreview.js

@@ -1,57 +1,39 @@
 import React from "react"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+} from "../utils/link-generators"
 
-const MarkdownPreview = props => {
+export const TitlePreview = props => {
-  const TitlePreview = props => {
+  if (props.prefix && props.title) {
-    if (props.prefix && props.title) {
+    return (
-      return (
+      <h1 className="text-center text-xl font-bold">
-        <h1 className="text-center text-xl font-bold">
+        {props.prefix + " " + props.title}
-          {props.prefix + " " + props.title}
+      </h1>
-        </h1>
+    )
-      )
-    }
-    return null
   }
-  const SubTitlePreview = props => {
+  return null
-    if (props.subtitle) {
+}
-      return <h3 className="text-center font-medium">{props.subtitle}</h3>
+
-    }
+export const SubTitlePreview = props => {
-    return null
+  if (props.subtitle) {
+    return <h3 className="text-center font-medium">{props.subtitle}</h3>
   }
-  const SectionTitle = props => {
+  return null
-    if (!props.visible)
+}
-      return null
+
-    else if (props.label) {
+export const SectionTitle = props => {
-      return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
+  if (!props.visible) return null
-    }
+  else if (props.label) {
-    return null
+    return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
   }
-  const DisplayWork = props => {
+  return null
-    if (props.prefix && props.project) {
+}
-      if (props.link) {
+
-        return (
+export const DisplayWork = props => {
-          <div className="my-2">
+  if (props.prefix && props.project) {
-            {props.prefix + " "}
+    if (props.link) {
-            <a
-              href={props.link}
-              className="no-underline text-blue-700"
-              target="blank"
-            >
-              {props.project}
-            </a>
-          </div>
-        )
-      } else {
-        return (
-          <div className="my-2">
-            {props.prefix + " "}
-            <b>{props.project}</b>
-          </div>
-        )
-      }
-    }
-    if (props.prefix && props.link) {
       return (
         <div className="my-2">
           {props.prefix + " "}
@@ -60,267 +42,314 @@ const MarkdownPreview = props => {
             className="no-underline text-blue-700"
             target="blank"
           >
-            {props.link}
+            {props.project}
           </a>
         </div>
       )
-    }
+    } else {
-    return null
-  }
-  const WorkPreview = props => {
-    const prefix = props.work.prefix
-    const data = props.work.data
-    const link = props.work.link
-    return (
-      <>
-        <DisplayWork
-          prefix={prefix.currentWork}
-          project={data.currentWork}
-          link={link.currentWork}
-        />
-        <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
-        <DisplayWork
-          prefix={prefix.helpWith}
-          project={data.helpWith}
-          link={link.helpWith}
-        />
-        <DisplayWork
-          prefix={prefix.collaborateOn}
-          project={data.collaborateOn}
-          link={link.collaborateOn}
-        />
-        <DisplayWork prefix={prefix.ama} project={data.ama} />
-        <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
-        <DisplayWork prefix={prefix.blog} link={link.blog} />
-        <DisplayWork prefix={prefix.resume} link={link.resume} />
-        <DisplayWork prefix={prefix.contact} project={data.contact} />
-        <DisplayWork prefix={prefix.funFact} project={data.funFact} />
-      </>
-    )
-  }
-  const DisplaySocial = props => {
-    if (props.username) {
       return (
+        <div className="my-2">
+          {props.prefix + " "}
+          <b>{props.project}</b>
+        </div>
+      )
+    }
+  }
+  if (props.prefix && props.link) {
+    return (
+      <div className="my-2">
+        {props.prefix + " "}
         <a
-          className="no-underline text-blue-700 m-2"
+          href={props.link}
-          href={props.base + "/" + props.username}
+          className="no-underline text-blue-700"
           target="blank"
         >
-          <img className="w-6 h-6" src={props.icon} alt="props.username" />
+          {props.link}
+        </a>
+      </div>
+    )
+  }
+  return null
+}
+
+export const WorkPreview = props => {
+  const prefix = props.work.prefix
+  const data = props.work.data
+  const link = props.work.link
+  return (
+    <>
+      <DisplayWork
+        prefix={prefix.currentWork}
+        project={data.currentWork}
+        link={link.currentWork}
+      />
+      <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
+      <DisplayWork
+        prefix={prefix.helpWith}
+        project={data.helpWith}
+        link={link.helpWith}
+      />
+      <DisplayWork
+        prefix={prefix.collaborateOn}
+        project={data.collaborateOn}
+        link={link.collaborateOn}
+      />
+      <DisplayWork prefix={prefix.ama} project={data.ama} />
+      <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
+      <DisplayWork prefix={prefix.blog} link={link.blog} />
+      <DisplayWork prefix={prefix.resume} link={link.resume} />
+      <DisplayWork prefix={prefix.contact} project={data.contact} />
+      <DisplayWork prefix={prefix.funFact} project={data.funFact} />
+    </>
+  )
+}
+
+export const DisplaySocial = props => {
+  if (props.username) {
+    return (
+      <a
+        className="no-underline text-blue-700 m-2"
+        href={props.base + "/" + props.username}
+        target="blank"
+      >
+        <img className="w-6 h-6" src={props.icon} alt="props.username" />
+      </a>
+    )
+  }
+  return null
+}
+
+export const SocialPreview = props => {
+  let viewSocial = false
+  Object.keys(props.social).forEach(key => {
+    if (props.social[key] && key != "github") viewSocial = true
+  })
+  return (
+    <div className="flex justify-start items-end flex-wrap">
+      <SectionTitle label="Connect with me:" visible={viewSocial} />
+      <DisplaySocial
+        base="https://codepen.io"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+        username={props.social.codepen}
+      />
+      <DisplaySocial
+        base="https://dev.to"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+        username={props.social.dev}
+      />
+      <DisplaySocial
+        base="https://twitter.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+        username={props.social.twitter}
+      />
+      <DisplaySocial
+        base="https://linkedin.com/in"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+        username={props.social.linkedin}
+      />
+      <DisplaySocial
+        base="https://stackoverflow.com/users"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+        username={props.social.stackoverflow}
+      />
+      <DisplaySocial
+        base="https://codesandbox.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+        username={props.social.codesandbox}
+      />
+      <DisplaySocial
+        base="https://kaggle.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+        username={props.social.kaggle}
+      />
+      <DisplaySocial
+        base="https://fb.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+        username={props.social.fb}
+      />
+      <DisplaySocial
+        base="https://instagram.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+        username={props.social.instagram}
+      />
+      <DisplaySocial
+        base="https://dribbble.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+        username={props.social.dribbble}
+      />
+      <DisplaySocial
+        base="https://www.behance.net"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+        username={props.social.behance}
+      />
+      <DisplaySocial
+        base="https://medium.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+        username={props.social.medium}
+      />
+      <DisplaySocial
+        base="https://www.youtube.com/c"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+        username={props.social.youtube}
+      />
+
+      <DisplaySocial
+        base="https://www.codechef.com/users"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
+        username={props.social.codechef}
+      />
+      <DisplaySocial
+        base="https://codeforces.com/profile"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+        username={props.social.codeforces}
+      />
+      <DisplaySocial
+        base="https://www.hackerrank.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+        username={props.social.hackerrank}
+      />
+      <DisplaySocial
+        base="https://auth.geeksforgeeks.org/user"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+        username={props.social.geeks_for_geeks}
+      />
+      <DisplaySocial
+        base="https://www.hackerearth.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+        username={props.social.hackerearth}
+      />
+      <DisplaySocial
+        base="https://www.topcoder.com/members"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+        username={props.social.topcoder}
+      />
+      <DisplaySocial
+        base="https://www.leetcode.com"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+        username={props.social.leetcode}
+      />
+      <DisplaySocial
+        base="https://discord.gg"
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+        username={props.social.discord}
+      />
+      <DisplaySocial
+        base=""
+        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+        username={props.social.rssurl}
+      />
+    </div>
+  )
+}
+
+export const VisitorsBadgePreview = 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 (
+      <div className="text-left my-2">
+        {" "}
+        <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+export const TwitterBadgePreview = props => {
+  let link =
+    "https://img.shields.io/twitter/follow/" +
+    props.twitter +
+    "?logo=twitter&style=for-the-badge"
+  if (props.show) {
+    return (
+      <div className="text-left my-2">
+        {" "}
+        <a href="https://twitter.com/${props.twitter}" target="blank">
+          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
+        </a>{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+export const GithubProfileTrophyPreview = props => {
+  let link =
+    "https://github-profile-trophy.vercel.app/?username=" + props.github
+  if (props.show) {
+    return (
+      <div className="text-left my-2">
+        {" "}
+        <a href="https://github.com/ryo-ma/github-profile-trophy">
+          <img src={link} alt={props.github} />
+        </a>{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+export const GitHubStatsPreview = ({ github, options, show }) => {
+  if (show) {
+    return (
+      <div className="text-center mx-4 mb-4">
+        <img
+          src={githubStatsLinkGenerator({ github, options })}
+          alt={github}
+        />
+      </div>
+    )
+  }
+  return null
+}
+
+export const TopLanguagesPreview = ({ github, options, show }) => {
+  if (show) {
+    return (
+      <div className="text-center mx-4 mb-4">
+        <img
+          src={topLanguagesLinkGenerator({ github, options })}
+          alt={github}
+        />
+      </div>
+    )
+  }
+  return <div className="text-center mx-4 mb-4"> &nbsp;</div>
+}
+
+export const SkillsPreview = props => {
+  var listSkills = []
+  skills.forEach(skill => {
+    if (props.skills[skill]) {
+      listSkills.push(
+        <a href={skillWebsites[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}
+          />
         </a>
       )
     }
-    return null
+  })
-  }
+  return listSkills.length > 0 ? (
-  const SocialPreview = props => {
+    <div className="flex flex-wrap justify-start items-center">
-    let viewSocial = false;
+      <SectionTitle label="Languages and Tools:" visible={true} />
-    Object.keys(props.social).forEach(key => {
+      {listSkills}
-      if (props.social[key] && key != 'github')
+    </div>
-        viewSocial = true;
+  ) : (
-    })
-    return (
-      <div className="flex justify-start items-end flex-wrap">
-        <SectionTitle label="Connect with me:" visible={viewSocial}/>
-        <DisplaySocial
-          base="https://codepen.io"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-          username={props.social.codepen}
-        />
-        <DisplaySocial
-          base="https://dev.to"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
-          username={props.social.dev}
-        />
-        <DisplaySocial
-          base="https://twitter.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
-          username={props.social.twitter}
-        />
-        <DisplaySocial
-          base="https://linkedin.com/in"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
-          username={props.social.linkedin}
-        />
-        <DisplaySocial
-          base="https://stackoverflow.com/users"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
-          username={props.social.stackoverflow}
-        />
-        <DisplaySocial
-          base="https://codesandbox.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
-          username={props.social.codesandbox}
-        />
-        <DisplaySocial
-          base="https://kaggle.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
-          username={props.social.kaggle}
-        />
-        <DisplaySocial
-          base="https://fb.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
-          username={props.social.fb}
-        />
-        <DisplaySocial
-          base="https://instagram.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
-          username={props.social.instagram}
-        />
-        <DisplaySocial
-          base="https://dribbble.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
-          username={props.social.dribbble}
-        />
-        <DisplaySocial
-          base="https://www.behance.net"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
-          username={props.social.behance}
-        />
-        <DisplaySocial
-          base="https://medium.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
-          username={props.social.medium}
-        />
-        <DisplaySocial
-          base="https://www.youtube.com/c"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
-          username={props.social.youtube}
-        />
-
-        <DisplaySocial
-          base="https://www.codechef.com/users"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
-          username={props.social.codechef}
-        />
-        <DisplaySocial
-          base="https://codeforces.com/profile"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
-          username={props.social.codeforces}
-        />
-        <DisplaySocial
-          base="https://www.hackerrank.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
-          username={props.social.hackerrank}
-        />
-        <DisplaySocial
-          base="https://auth.geeksforgeeks.org/user"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
-          username={props.social.geeks_for_geeks}
-        />
-        <DisplaySocial
-          base="https://www.hackerearth.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
-          username={props.social.hackerearth}
-        />
-        <DisplaySocial
-          base="https://www.topcoder.com/members"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
-          username={props.social.topcoder}
-        />
-        <DisplaySocial
-          base="https://www.leetcode.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
-          username={props.social.leetcode}
-        />
-        <DisplaySocial
-          base=""
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
-          username={props.social.rssurl}
-        />
-      </div>
-    )
-  }
-  const VisitorsBadgePreview = 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 (
-        <div className="text-left my-2">
-          {" "}
-          <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
-        </div>
-      )
-    }
-    return null
-  }
-  const TwitterBadgePreview = props => {
-    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
-    if (props.show) {
-      return (
-        <div className="text-left my-2">
-          {" "}
-          <a href="https://twitter.com/${props.twitter}" target="blank">
-            <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
-          </a>{" "}
-        </div>
-      )
-    }
-    return null
-  }
-  const GithubProfileTrophyPreview = props => {
-    let link =
-      "https://github-profile-trophy.vercel.app/?username=" + props.github
-    if (props.show) {
-      return (
-        <div className="text-left my-2">
-          {" "}
-          <a href="https://github.com/ryo-ma/github-profile-trophy">
-            <img src={link} alt={props.github} />
-          </a>{" "}
-        </div>
-      )
-    }
-    return null
-  }
-
-  const GitHubStatsPreview = ({github, options, show })=> {
-    if (show) {
-      return (
-        <div className="text-center mx-4 mb-4">
-          <img src={githubStatsLinkGenerator({github, options})} alt={github} />
-        </div>
-      )
-    }
-    return null
-  }
-  const TopLanguagesPreview = ({github, options, show})=> {
-    if (show) {
-      return (
-        <div className="text-center mx-4 mb-4">
-          <img src={topLanguagesLinkGenerator({github, options})} alt={props.github} />
-        </div>
-      )
-    }
-    return <div className="text-center mx-4 mb-4"> &nbsp;</div>
-  }
-  const SkillsPreview = props => {
-    var listSkills = []
-    skills.forEach(skill => {
-      if (props.skills[skill]) {
-        listSkills.push(
-          <a href={skillWebsites[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}
-            />
-          </a>
-        )
-      }
-    })
-    return listSkills.length > 0 ? (
-      <div className="flex flex-wrap justify-start items-center">
-        <SectionTitle label="Languages and Tools:" visible={true}/>
-        {listSkills}
-      </div>
-    ) : (
       ""
     )
-  }
+}
+
+const MarkdownPreview = props => {
+
   return (
     <div id="markdown-preview">
       <TitlePreview prefix={props.prefix.title} title={props.data.title} />
@@ -331,7 +360,7 @@ const MarkdownPreview = props => {
         badgeOptions={{
           badgeLabel: encodeURI(props.data.badgeLabel),
           badgeColor: props.data.badgeColor,
-          badgeStyle: props.data.badgeStyle
+          badgeStyle: props.data.badgeStyle,
         }}
       />
       <GithubProfileTrophyPreview

src/components/social.js

@@ -303,6 +303,20 @@ const Social = props => {
             }
           />
         </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="discord"
+          />
+          <input
+            id="discord"
+            placeholder="discord invite (only code)"
+            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"
+            value={props.social.discord}
+            onChange={event => props.handleSocialChange("discord", event)}
+          />
+        </div>
         <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img
             src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"

src/constants/skills.js

@@ -105,6 +105,7 @@ const categorizedSkills = {
       "cockroachdb",
       "elasticsearch",
       "sqlite",
+      "mssql",
     ],
   },
 
@@ -424,8 +425,6 @@ const icons = {
     "https://raw.githubusercontent.com/kenangundogan/fontisto/036b7eca71aab1bef8e6a0518f7329f13ed62f6b/icons/svg/brand/unreal-engine.svg",
   elixir: "https://www.vectorlogo.zone/logos/elixir-lang/elixir-lang-icon.svg",
   heroku: "https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg",
-  coffeescript:
-    "https://www.vectorlogo.zone/logos/coffeescript/coffeescript-icon.svg",
   hexo: "https://www.vectorlogo.zone/logos/hexoio/hexoio-icon.svg",
   travisci: "https://www.vectorlogo.zone/logos/travis-ci/travis-ci-icon.svg",
   apachecordova:
@@ -434,8 +433,10 @@ const icons = {
   postman: "https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg",
   erlang: "https://www.vectorlogo.zone/logos/erlang/erlang-official.svg",
   sqlite: "https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg",
+  mssql: "https://cdn.worldvectorlogo.com/logos/microsoft-sql-server.svg",
   middleman:
     "https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg",
+  matlab: "https://raw.githubusercontent.com/simple-icons/simple-icons/master/icons/mathworks.svg",
 }
 
 const skillWebsites = {
@@ -579,8 +580,8 @@ const skillWebsites = {
   elixir: "https://elixir-lang.org",
   travisci: "https://travis-ci.org",
   apachecordova: "https://cordova.apache.org/",
-  coffeescript: "https://coffeescript.org/",
   sqlite: "https://www.sqlite.org/",
+  mssql: "https://www.microsoft.com/en-us/sql-server",
   postman: "https://postman.com",
   erlang: "https://www.erlang.org/",
   middleman: "https://middlemanapp.com/",

src/pages/index.js

@@ -27,7 +27,7 @@ import SEO from "../components/seo"
 import {
   isGitHubUsernameValid,
   isMediumUsernameValid,
-  isTwitterUsernameValid
+  isTwitterUsernameValid,
 } from "../utils/validation"
 import Layout from "../components/layout"
 
@@ -117,6 +117,7 @@ const DEFAULT_SOCIAL = {
   topcoder: "",
   hackerearth: "",
   geeks_for_geeks: "",
+  discord: "",
   rssurl: "",
 }
 
@@ -184,7 +185,8 @@ const IndexPage = () => {
 
   const handleSocialChange = (field, e) => {
     let change = { ...social }
-    change[field] = e.target.value.toLowerCase()
+    change[field] =
+      field === "discord" ? e.target.value : e.target.value.toLowerCase()
     setSocial(change)
   }
 
@@ -721,14 +723,14 @@ const IndexPage = () => {
               onChange={e => setRestore(e.target.value)}
             />
 
-            <div class="overflow-hidden relative w-64 mt-4 mb-4">
+            <div className="overflow-hidden relative w-64 mt-4 mb-4">
               <input
-                class="cursor-pointer absolute block opacity-0 pin-r pin-t before:cursor-pointer"
+                className="cursor-pointer absolute block opacity-0 pin-r pin-t before:cursor-pointer"
                 type="file"
                 name="vacancyImageFiles"
                 onChange={handleFileInput}
               />
-              <button class="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1">
+              <button className="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1">
                 Upload json file
               </button>
             </div>