Merge pull request #286 from datejer/master

[add]: Discord invite field in Social

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=" 
-                + props.github
-                + `&label=${props.badgeOptions.badgeLabel}`
-                + `&color=${props.badgeOptions.badgeColor}`
-                + `&style=${props.badgeOptions.badgeStyle}`
+    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 (
         <>
@@ -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 />
         </>
@@ -236,7 +253,7 @@ const Markdown = props => {
           badgeOptions={{
             badgeLabel: encodeURI(props.data.badgeLabel),
             badgeColor: props.data.badgeColor,
-            badgeStyle: props.data.badgeStyle
+            badgeStyle: props.data.badgeStyle,
           }}
         />
       </>
@@ -320,7 +337,10 @@ const Markdown = props => {
         <>
           <SectionTitle label="Connect with me:" />
           {`<p align="left">`}
-        </>) : ""}
+        </>
+      ) : (
+        ""
+      )}
       <br />
       <>
         <DisplaySocial
@@ -462,6 +482,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,6 +1,9 @@
 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 => {
   const TitlePreview = props => {
@@ -20,8 +23,7 @@ const MarkdownPreview = props => {
     return null
   }
   const SectionTitle = props => {
-    if (!props.visible)
-      return null
+    if (!props.visible) return null
     else if (props.label) {
       return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
     }
@@ -113,14 +115,13 @@ const MarkdownPreview = props => {
     return null
   }
   const SocialPreview = props => {
-    let viewSocial = false;
+    let viewSocial = false
     Object.keys(props.social).forEach(key => {
-      if (props.social[key] && key != 'github')
-        viewSocial = true;
+      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}/>
+        <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"
@@ -222,6 +223,11 @@ const MarkdownPreview = props => {
           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"
@@ -231,11 +237,12 @@ const MarkdownPreview = props => {
     )
   }
   const VisitorsBadgePreview = props => {
-    let link = "https://komarev.com/ghpvc/?username=" 
-                + props.github
-                + `&label=${props.badgeOptions.badgeLabel}`
-                + `&color=${props.badgeOptions.badgeColor}`
-                + `&style=${props.badgeOptions.badgeStyle}`
+    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">
@@ -247,7 +254,10 @@ const MarkdownPreview = props => {
     return null
   }
   const TwitterBadgePreview = 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 (
         <div className="text-left my-2">
@@ -276,21 +286,27 @@ const MarkdownPreview = props => {
     return null
   }
 
-  const GitHubStatsPreview = ({github, options, show })=> {
+  const GitHubStatsPreview = ({ github, options, show }) => {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={githubStatsLinkGenerator({github, options})} alt={github} />
+          <img
+            src={githubStatsLinkGenerator({ github, options })}
+            alt={github}
+          />
         </div>
       )
     }
     return null
   }
-  const TopLanguagesPreview = ({github, options, show})=> {
+  const TopLanguagesPreview = ({ github, options, show }) => {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={topLanguagesLinkGenerator({github, options})} alt={props.github} />
+          <img
+            src={topLanguagesLinkGenerator({ github, options })}
+            alt={props.github}
+          />
         </div>
       )
     }
@@ -314,7 +330,7 @@ const MarkdownPreview = props => {
     })
     return listSkills.length > 0 ? (
       <div className="flex flex-wrap justify-start items-center">
-        <SectionTitle label="Languages and Tools:" visible={true}/>
+        <SectionTitle label="Languages and Tools:" visible={true} />
         {listSkills}
       </div>
     ) : (
@@ -331,7 +347,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/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)
   }
 
@@ -472,7 +474,7 @@ const IndexPage = () => {
       )
       setSkills(restoreDataSkills || DEFAULT_SKILLS)
     } catch (error) {
-    } finally { 
+    } finally {
       setRestore("")
     }
   }
@@ -485,7 +487,7 @@ const IndexPage = () => {
       setRestore(reader.result)
     }
   }
-  
+
   return (
     <Layout>
       <div className="m-4 sm:p-4">
@@ -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>