Merge pull request #226 from Maddoxx88/patch-6

[add]: Twitter Username Validation

src/components/markdown.js

@@ -101,7 +101,7 @@ const Markdown = props => {
     if (props.show) {
       return (
         <>
-          {`<p align="left"> <img src="${link}" alt="${props.twitter}" /> </p>`}
+          {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
           <br />
           <br />
         </>
@@ -253,6 +253,7 @@ const Markdown = props => {
           github={props.social.github}
         />
         <TwitterBadge
+          base="https://twitter.com"
           show={props.data.twitterBadge}
           twitter={props.social.twitter}
         />

src/components/markdownPreview.js

@@ -244,7 +244,9 @@ const MarkdownPreview = props => {
       return (
         <div className="text-left my-2">
           {" "}
-          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />{" "}
+          <a href="https://twitter.com/${props.twitter}" target="blank">
+            <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
+          </a>{" "}
         </div>
       )
     }

src/pages/index.js

@@ -27,6 +27,7 @@ import SEO from "../components/seo"
 import {
   isGitHubUsernameValid,
   isMediumUsernameValid,
+  isTwitterUsernameValid
 } from "../utils/validation"
 import Layout from "../components/layout"
 
@@ -239,7 +240,7 @@ const IndexPage = () => {
         generate()
       }
     } else if (data.twitterBadge) {
-      if (social.twitter) {
+      if (social.twitter && isTwitterUsernameValid(social.twitter)) {
         generate()
       }
     } else if (social.github) {
@@ -532,13 +533,20 @@ const IndexPage = () => {
             ) : (
               ""
             )}
-            {(data.twitterBadge && !social.twitter) ? (
+            {data.twitterBadge && !social.twitter ? (
               <div className="warning">
                 * Please add twitter username to use these add-ons
               </div>
             ) : (
               ""
             )}
+            {social.twitter && !isTwitterUsernameValid(social.twitter) ? (
+              <div className="warning">
+                * Twitter username is invalid, please add a valid username
+              </div>
+            ) : (
+              ""
+            )}
           </div>
           <div className="flex items-center justify-center w-full">
             <div

src/utils/validation.js

@@ -9,4 +9,9 @@ const isMediumUsernameValid = username => {
   return true
 }
 
-export { isGitHubUsernameValid, isMediumUsernameValid }
+const isTwitterUsernameValid = username => {
+  var pattern = /^[a-zA-Z0-9_]{1,15}$/
+  return pattern.test(username)
+}
+
+export { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid }