added markdown, organized templates, fixed email overflow issue in pikachu

package-lock.json

@@ -3100,6 +3100,11 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
+    "bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -3588,6 +3593,21 @@
         "supports-color": "^5.3.0"
       }
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3808,6 +3828,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "collapse-white-space": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
+      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -6699,6 +6724,53 @@
         }
       }
     },
+    "html-to-react": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.2.tgz",
+      "integrity": "sha512-TdTfxd95sRCo6QL8admCkE7mvNNrXtGoVr1dyS+7uvc8XCqAymnf/6ckclvnVbQNUo2Nh21VPwtfEHd0khiV7g==",
+      "requires": {
+        "domhandler": "^3.0",
+        "htmlparser2": "^4.0",
+        "lodash.camelcase": "^4.3.0",
+        "ramda": "^0.26"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        },
+        "domhandler": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.0.0.tgz",
+          "integrity": "sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==",
+          "requires": {
+            "dom-serializer": "^0.2.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "4.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",
@@ -7064,6 +7136,20 @@
         "kind-of": "^3.0.2"
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
@@ -7126,6 +7212,11 @@
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
       "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -7181,6 +7272,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+    },
     "is-in-browser": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
@@ -7292,11 +7388,21 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-whitespace-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
+    "is-word-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA=="
+    },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@@ -8781,6 +8887,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8919,6 +9030,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-escapes": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
+      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8929,6 +9045,14 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-add-list-metadata": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz",
+      "integrity": "sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==",
+      "requires": {
+        "unist-util-visit-parents": "1.1.2"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -9900,6 +10024,19 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-entities": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -11604,6 +11741,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "ramda": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
+      "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -11876,6 +12018,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-markdown": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.3.1.tgz",
+      "integrity": "sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==",
+      "requires": {
+        "html-to-react": "^1.3.4",
+        "mdast-add-list-metadata": "1.0.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "remark-parse": "^5.0.0",
+        "unified": "^6.1.5",
+        "unist-util-visit": "^1.3.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -12155,6 +12312,28 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
+    "remark-parse": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
+      "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
+      "requires": {
+        "collapse-white-space": "^1.0.2",
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "is-word-character": "^1.0.0",
+        "markdown-escapes": "^1.0.0",
+        "parse-entities": "^1.1.0",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "trim": "0.0.1",
+        "trim-trailing-lines": "^1.0.0",
+        "unherit": "^1.0.4",
+        "unist-util-remove-position": "^1.0.0",
+        "vfile-location": "^2.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -12222,6 +12401,11 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "replace-ext": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13180,6 +13364,11 @@
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
       "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
     },
+    "state-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
+      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ=="
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -13919,6 +14108,21 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+    },
+    "trim-trailing-lines": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz",
+      "integrity": "sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA=="
+    },
+    "trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
+    },
     "ts-pnp": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@@ -13987,6 +14191,15 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "unherit": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
+      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
+      "requires": {
+        "inherits": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14011,6 +14224,19 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
+    "unified": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
+      "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
+      "requires": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^1.1.0",
+        "trough": "^1.0.0",
+        "vfile": "^2.0.0",
+        "x-is-string": "^0.1.0"
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -14048,6 +14274,47 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unist-util-is": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+    },
+    "unist-util-remove-position": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
+      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
+      "requires": {
+        "unist-util-visit": "^1.1.0"
+      }
+    },
+    "unist-util-stringify-position": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
+      "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
+    },
+    "unist-util-visit": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "requires": {
+        "unist-util-visit-parents": "^2.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz",
+      "integrity": "sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q=="
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -14237,6 +14504,30 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vfile": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
+      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
+      "requires": {
+        "is-buffer": "^1.1.4",
+        "replace-ext": "1.0.0",
+        "unist-util-stringify-position": "^1.0.0",
+        "vfile-message": "^1.0.0"
+      }
+    },
+    "vfile-location": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA=="
+    },
+    "vfile-message": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
+      "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
+      "requires": {
+        "unist-util-stringify-position": "^1.1.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -16119,6 +16410,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "x-is-string": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI="
+    },
     "xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "lodash": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-markdown": "^4.3.1",
     "react-scripts": "3.4.1",
     "react-toastify": "^5.5.0",
     "uuid": "^7.0.2"

src/components/LeftSidebar/tabs/Awards.js

@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
+import TextArea from '../../../shared/TextArea';
 
 const AwardsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
     id: uuidv4(),
     title: '',
     subtitle: '',
+    description: '',
   });
 
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
@@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
       id: uuidv4(),
       title: '',
       subtitle: '',
+      description: '',
     });
 
     setOpen(false);
@@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
           onChange={v => onChange('subtitle', v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange('description', v)}
+        />
+
         <button
           type="button"
           onClick={addItem}
@@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange(`${identifier}.description`, v)}
+        />
+
         <div className="flex justify-between">
           <button
             type="button"

src/components/LeftSidebar/tabs/Certifications.js

@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
+import TextArea from '../../../shared/TextArea';
 
 const CertificationsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
     id: uuidv4(),
     title: '',
     subtitle: '',
+    description: '',
   });
 
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
@@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
       id: uuidv4(),
       title: '',
       subtitle: '',
+      description: '',
     });
 
     setOpen(false);
@@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
           onChange={v => onChange('subtitle', v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange('description', v)}
+        />
+
         <button
           type="button"
           onClick={addItem}
@@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange(`${identifier}.description`, v)}
+        />
+
         <div className="flex justify-between">
           <button
             type="button"

src/components/LeftSidebar/tabs/Objective.js

@@ -26,7 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
 
       <TextArea
         rows="15"
-        className="mb-6"
+        className="mb-4"
         label="Objective"
         placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
         value={data.objective.body}

src/index.css

@@ -18,6 +18,11 @@ body {
   font-family: 'Montserrat', sans-serif;
 }
 
+li {
+  list-style: disc;
+  list-style-position: inside !important;
+}
+
 @media screen {
   input:checked + i.material-icons {
     display: block;

src/shared/MarkdownHelpText.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const MarkdownHelpText = ({ className }) => {
+  return (
+    <div className={className}>
+      <p className="text-gray-800 text-xs">
+        You can use{' '}
+        <a
+          className="text-blue-600 hover:underline"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
+        >
+          GitHub Flavored Markdown
+        </a>{' '}
+        to style this section of text.
+      </p>
+    </div>
+  );
+};
+
+export default MarkdownHelpText;

src/shared/TabBar.js

@@ -28,13 +28,13 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
       <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
         {tabs.map(tab =>
           currentTab === tab ? (
-            <li key={tab} className="mx-1">
+            <li key={tab} className="mx-1 list-none">
               <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
                 {tab}
               </div>
             </li>
           ) : (
-            <li key={tab} className="mx-1">
+            <li key={tab} className="mx-1 list-none">
               <div
                 className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
                 onClick={() => setCurrentTab(tab)}

src/shared/TextArea.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import MarkdownHelpText from './MarkdownHelpText';
 
 const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 }) => (
   <div className={`w-full flex flex-col ${className}`}>
@@ -12,6 +13,8 @@ const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 })
       onChange={e => onChange(e.target.value)}
       placeholder={placeholder}
     />
+
+    <MarkdownHelpText className="mt-2" />
   </div>
 );
 

src/templates/gengar/Gengar.js

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 import { hexToRgb } from '../../utils';
 
@@ -9,6 +11,25 @@ const Gengar = () => {
 
   const { r, g, b } = hexToRgb(theme.colors.accent);
 
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <img
+        className="w-24 h-24 rounded-full mr-4 object-cover border-4"
+        style={{
+          borderColor: theme.colors.background,
+        }}
+        src={data.profile.photo}
+        alt="Resume Photograph"
+      />
+    );
+
+  const FullName = () => (
+    <div>
+      <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
+      <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
+    </div>
+  );
+
   const ContactItem = ({ icon, value }) =>
     value && (
       <div className="flex items-center mb-3">
@@ -31,12 +52,28 @@ const Gengar = () => {
     <h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
   );
 
+  const Objective = () =>
+    data.objective.enable && (
+      <div className="h-full flex flex-col justify-center items-start">
+        <Heading title={data.objective.heading} />
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    );
+
   const SkillItem = x => (
     <li key={x} className="text-sm py-1">
       {x}
     </li>
   );
 
+  const Skills = () =>
+    data.skills.enable && (
+      <div className="mb-8">
+        <Heading title={data.skills.heading} />
+        <ul>{data.skills.items.map(SkillItem)}</ul>
+      </div>
+    );
+
   const EducationItem = x => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
@@ -59,14 +96,45 @@ const Gengar = () => {
           </span>
         </div>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
-  const AwardCertificationItem = x => (
+  const Education = () =>
+    data.education.enable && (
+      <div className="mb-8">
+        <Heading title={data.education.heading} />
+        {data.education.items.map(EducationItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () => (
+    <div className="mb-8">
+      <Heading title={data.certifications.heading} />
+      {data.certifications.items.map(CertificationItem)}
+    </div>
+  );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () => (
+    <div className="mb-8">
+      <Heading title={data.awards.heading} />
+      {data.awards.items.map(AwardItem)}
     </div>
   );
 
@@ -81,10 +149,35 @@ const Gengar = () => {
           ({x.start} - {x.end})
         </span>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Work = () =>
+    data.work.enable && (
+      <div className="mb-8">
+        <Heading title={data.work.heading} />
+        {data.work.items.map(WorkItem)}
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.key}>
+      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
+      <td className="border px-4 py-2 text-sm">{x.value}</td>
+    </tr>
+  );
+
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="table-auto">
+          <tbody>{data.extras.items.map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -99,20 +192,8 @@ const Gengar = () => {
           style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
         >
           <div className="flex items-center">
-            {data.profile.photo !== '' && (
+            <Photo />
-              <img
+            <FullName />
-                className="w-24 h-24 rounded-full mr-4 object-cover border-4"
-                style={{
-                  borderColor: theme.colors.background,
-                }}
-                src={data.profile.photo}
-                alt="Resume Photograph"
-              />
-            )}
-            <div>
-              <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
-              <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
-            </div>
           </div>
 
           <hr className="w-1/4 my-5 opacity-50" />
@@ -127,70 +208,23 @@ const Gengar = () => {
           className="col-span-3 px-6 py-8"
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
-          {data.objective.enable && (
+          <Objective />
-            <div className="h-full flex flex-col justify-center items-start">
-              <Heading title={data.objective.heading} />
-              <p className="text-sm whitespace-pre-wrap">{data.objective.body}</p>
-            </div>
-          )}
         </div>
 
         <div
           className="col-span-2 px-6 py-8"
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
-          {data.skills.enable && (
+          <Skills />
-            <div className="mb-8">
+          <Education />
-              <Heading title={data.skills.heading} />
-              <ul className="list-disc ml-5">{data.skills.items.map(SkillItem)}</ul>
-            </div>
-          )}
 
-          {data.education.enable && (
+          <Certifications />
-            <div className="mb-8">
-              <Heading title={data.education.heading} />
-              {data.education.items.map(EducationItem)}
-            </div>
-          )}
-
-          {data.certifications.enable && (
-            <div className="mb-8">
-              <Heading title={data.certifications.heading} />
-              {data.certifications.items.map(AwardCertificationItem)}
-            </div>
-          )}
         </div>
 
         <div className="col-span-3 px-6 py-8">
-          {data.work.enable && (
+          <Work />
-            <div className="mb-8">
+          <Awards />
-              <Heading title={data.work.heading} />
+          <Extras />
-              {data.work.items.map(WorkItem)}
-            </div>
-          )}
-
-          {data.awards.enable && (
-            <div className="mb-8">
-              <Heading title={data.awards.heading} />
-              {data.awards.items.map(AwardCertificationItem)}
-            </div>
-          )}
-
-          {data.extras.enable && (
-            <div>
-              <Heading title={data.extras.heading} />
-              <table className="table-auto">
-                <tbody>
-                  {data.extras.items.map(x => (
-                    <tr key={x.key}>
-                      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-                      <td className="border px-4 py-2 text-sm">{x.value}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
         </div>
       </div>
     </div>

src/templates/onyx/Onyx.js

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 
 const Onyx = () => {
@@ -6,6 +8,174 @@ const Onyx = () => {
   const { state } = context;
   const { data, theme } = state;
 
+  const Photo = () =>
+    data.profile.photo && (
+      <img
+        className="rounded object-cover mr-4"
+        src={data.profile.photo}
+        alt="Resume Photograph"
+        style={{ width: '120px', height: '120px' }}
+      />
+    );
+
+  const Profile = () => (
+    <div>
+      <h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
+        {data.profile.firstName} {data.profile.lastName}
+      </h1>
+      <h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
+
+      <div className="flex flex-col mt-4 text-xs">
+        <span>{data.profile.address.line1}</span>
+        <span>{data.profile.address.line2}</span>
+        <span>{data.profile.address.line3}</span>
+      </div>
+    </div>
+  );
+
+  const ContactItem = ({ icon, value }) =>
+    value && (
+      <div className="flex items-center my-3">
+        <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+          {icon}
+        </span>
+        <span className="font-medium">{value}</span>
+      </div>
+    );
+
+  const Heading = ({ title }) => (
+    <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
+      {title}
+    </h6>
+  );
+
+  const Objective = () =>
+    data.objective.enable && (
+      <div>
+        <Heading title={data.objective.heading} />
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    );
+
+  const WorkItem = x => (
+    <div key={x.title} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold">{x.title}</h6>
+          <p className="text-xs">{x.role}</p>
+        </div>
+        <span className="text-xs font-medium">
+          ({x.start} - {x.end})
+        </span>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        {data.work.items.map(WorkItem)}
+      </div>
+    );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-sm font-bold">{x.grade}</span>
+          <span className="text-xs font-medium">
+            ({x.start} - {x.end})
+          </span>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Education = () =>
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        {data.education.items.map(EducationItem)}
+      </div>
+    );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mt-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () =>
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        {data.awards.items.map(AwardItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mt-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        {data.certifications.items.map(CertificationItem)}
+      </div>
+    );
+
+  const SkillItem = x => (
+    <span
+      key={x}
+      className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
+      style={{
+        backgroundColor: theme.colors.primary,
+        color: theme.colors.background,
+      }}
+    >
+      {x}
+    </span>
+  );
+
+  const Skills = () =>
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <div className="mt-1 flex flex-wrap">{data.skills.items.map(SkillItem)}</div>
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.key}>
+      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
+      <td className="border px-4 py-2 text-sm">{x.value}</td>
+    </tr>
+  );
+
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="w-2/3 table-auto">
+          <tbody>{data.extras.items.map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -16,203 +186,30 @@ const Onyx = () => {
     >
       <div className="grid grid-cols-4 items-center">
         <div className="col-span-3 flex items-center">
-          {data.profile.photo && (
+          <Photo />
-            <img
+          <Profile />
-              className="rounded object-cover mr-4"
-              src={data.profile.photo}
-              alt="Resume Photograph"
-              style={{ width: '120px', height: '120px' }}
-            />
-          )}
-          <div>
-            <h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
-              {data.profile.firstName} {data.profile.lastName}
-            </h1>
-            <h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
-
-            <div className="flex flex-col mt-4 text-xs">
-              <span>{data.profile.address.line1}</span>
-              <span>{data.profile.address.line2}</span>
-              <span>{data.profile.address.line3}</span>
-            </div>
-          </div>
         </div>
+
         <div className="col-span-1 text-xs">
-          {data.profile.phone && (
+          <ContactItem icon="phone" value={data.profile.phone} />
-            <div className="flex items-center my-3">
+          <ContactItem icon="language" value={data.profile.website} />
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+          <ContactItem icon="alternate_email" value={data.profile.email} />
-                phone
-              </span>
-              <span className="font-medium">{data.profile.phone}</span>
-            </div>
-          )}
-          {data.profile.website && (
-            <div className="flex items-center my-3">
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-                language
-              </span>
-              <span className="font-medium">{data.profile.website}</span>
-            </div>
-          )}
-          {data.profile.email && (
-            <div className="flex items-center my-3">
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-                alternate_email
-              </span>
-              <span className="font-medium">{data.profile.email}</span>
-            </div>
-          )}
         </div>
       </div>
 
       <hr className="my-6" />
 
-      {data.objective.enable && (
+      <Objective />
-        <div>
+      <Work />
-          <h6
+      <Education />
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.objective.heading}
-          </h6>
-          <p className="text-sm">{data.objective.body}</p>
-        </div>
-      )}
-
-      {data.work.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.work.heading}
-          </h6>
-          {data.work.items.map(exp => (
-            <div key={exp.title} className="mt-3">
-              <div className="flex justify-between">
-                <div>
-                  <h6 className="font-semibold">{exp.title}</h6>
-                  <p className="text-xs">{exp.role}</p>
-                </div>
-                <span className="text-xs font-medium">
-                  ({exp.start} - {exp.end})
-                </span>
-              </div>
-              <p className="mt-2 text-sm">{exp.description}</p>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {data.education.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.education.heading}
-          </h6>
-          {data.education.items.map(edu => (
-            <div key={edu.name} className="mt-3">
-              <div className="flex justify-between">
-                <div>
-                  <h6 className="font-semibold">{edu.name}</h6>
-                  <p className="text-xs">{edu.major}</p>
-                </div>
-                <div className="flex flex-col items-end">
-                  <span className="text-sm font-bold">{edu.grade}</span>
-                  <span className="text-xs font-medium">
-                    ({edu.start} - {edu.end})
-                  </span>
-                </div>
-              </div>
-              <p className="mt-2 text-sm">{edu.description}</p>
-            </div>
-          ))}
-        </div>
-      )}
 
       <div className="grid grid-cols-2">
-        {data.awards.enable && (
+        <Awards />
-          <div>
+        <Certifications />
-            <h6
-              className="text-xs font-bold uppercase mt-6 mb-2"
-              style={{ color: theme.colors.accent }}
-            >
-              {data.awards.heading}
-            </h6>
-            {data.awards.items.map(x => (
-              <div key={x.title} className="mt-3">
-                <h6 className="font-semibold">{x.title}</h6>
-                <p className="text-xs">{x.subtitle}</p>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {data.certifications.enable && (
-          <div>
-            <h6
-              className="text-xs font-bold uppercase mt-6 mb-2"
-              style={{ color: theme.colors.accent }}
-            >
-              {data.certifications.heading}
-            </h6>
-            {data.certifications.items.map(x => (
-              <div key={x.title} className="mt-3">
-                <h6 className="font-semibold">{x.title}</h6>
-                <p className="text-xs">{x.subtitle}</p>
-              </div>
-            ))}
-          </div>
-        )}
       </div>
 
-      {data.skills.enable && (
+      <Skills />
-        <div>
+      <Extras />
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.skills.heading}
-          </h6>
-          <div className="mt-1 flex flex-wrap">
-            {data.skills.items.map(x => (
-              <span
-                key={x}
-                className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
-                style={{
-                  backgroundColor: theme.colors.primary,
-                  color: theme.colors.background,
-                }}
-              >
-                {x}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {data.extras.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.extras.heading}
-          </h6>
-          <table className="w-2/3 table-auto">
-            <tbody>
-              {data.extras.items.map(x => (
-                <tr key={x.key}>
-                  <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-                  <td className="border px-4 py-2 text-sm">{x.value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
     </div>
   );
 };

src/templates/pikachu/Pikachu.js

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 
 const Pikachu = () => {
@@ -6,7 +8,12 @@ const Pikachu = () => {
   const { state } = context;
   const { data, theme } = state;
 
-  const Photo = () => <img className="rounded-full object-cover" src={data.profile.photo} alt="" />;
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <div className="self-center col-span-3">
+        <img className="rounded-full object-cover" src={data.profile.photo} alt="" />
+      </div>
+    );
 
   const Header = () => (
     <div
@@ -21,7 +28,7 @@ const Pikachu = () => {
 
         <hr className="my-4 opacity-50" />
 
-        <div className="text-sm">{data.objective.body}</div>
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
       </div>
     </div>
   );
@@ -32,11 +39,11 @@ const Pikachu = () => {
         <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
           {icon}
         </span>
-        <span className="font-medium">{value}</span>
+        <span className="font-medium break-all">{value}</span>
       </div>
     );
 
-  const SectionHeading = ({ title }) => (
+  const Heading = ({ title }) => (
     <div
       className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
       style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
@@ -54,6 +61,13 @@ const Pikachu = () => {
     </span>
   );
 
+  const Skills = () => (
+    <div>
+      <Heading title={data.skills.heading} />
+      <div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
+    </div>
+  );
+
   const ExtraItem = x => (
     <div key={x.key} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
@@ -61,6 +75,14 @@ const Pikachu = () => {
     </div>
   );
 
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
+      </div>
+    );
+
   const WorkItem = x => (
     <div key={x.title} className="mb-3">
       <div className="flex justify-between items-center">
@@ -72,10 +94,18 @@ const Pikachu = () => {
           ({x.start} - {x.end})
         </span>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Work = () =>
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        <div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
+      </div>
+    );
+
   const EducationItem = x => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
@@ -92,17 +122,50 @@ const Pikachu = () => {
           </span>
         </div>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
-  const AwardCertificationItem = x => (
+  const Education = () =>
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        <div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
+      </div>
+    );
+
+  const AwardItem = x => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Awards = () =>
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        <div className="flex flex-col mb-2">{data.awards.items.map(AwardItem)}</div>
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        <div className="flex flex-col mb-2">{data.certifications.items.map(CertificationItem)}</div>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -111,18 +174,14 @@ const Pikachu = () => {
         color: theme.colors.primary,
       }}
     >
-      <div className="grid grid-cols-8 col-gap-6 row-gap-8">
+      <div className="grid grid-cols-12 col-gap-6 row-gap-8">
-        {data.profile.photo !== '' && (
+        <Photo />
-          <div className="self-center col-span-2">
-            <Photo />
-          </div>
-        )}
 
-        <div className={`${data.profile.photo !== '' ? 'col-span-6' : 'col-span-8'}`}>
+        <div className={`${data.profile.photo !== '' ? 'col-span-9' : 'col-span-12'}`}>
           <Header />
         </div>
 
-        <div className="col-span-2">
+        <div className="col-span-3 overflow-hidden">
           <div className="text-sm mb-6">
             <ContactItem icon="phone" value={data.profile.phone} />
             <ContactItem icon="language" value={data.profile.website} />
@@ -130,53 +189,15 @@ const Pikachu = () => {
             <ContactItem icon="location_on" value={data.profile.address.line3} />
           </div>
 
-          {data.skills.enable && (
+          <Skills />
-            <div>
+          <Extras />
-              <SectionHeading title={data.skills.heading} />
-              <div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
-            </div>
-          )}
-
-          {data.extras.enable && (
-            <div>
-              <SectionHeading title={data.extras.heading} />
-              <div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
-            </div>
-          )}
         </div>
 
-        <div className="col-span-6">
+        <div className="col-span-9">
-          {data.work.enable && (
+          <Work />
-            <div>
+          <Education />
-              <SectionHeading title={data.work.heading} />
+          <Awards />
-              <div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
+          <Certifications />
-            </div>
-          )}
-
-          {data.education.enable && (
-            <div>
-              <SectionHeading title={data.education.heading} />
-              <div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
-            </div>
-          )}
-
-          {data.awards.enable && (
-            <div>
-              <SectionHeading title={data.awards.heading} />
-              <div className="flex flex-col mb-4">
-                {data.awards.items.map(AwardCertificationItem)}
-              </div>
-            </div>
-          )}
-
-          {data.certifications.enable && (
-            <div>
-              <SectionHeading title={data.certifications.heading} />
-              <div className="flex flex-col mb-4">
-                {data.certifications.items.map(AwardCertificationItem)}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>