Merge branch 'master' into master

src/components/footer.js

@@ -1,27 +1,85 @@
 import React from "react"
 import links from "../constants/page-links"
+import logo from "../images/mdg.png"
+import discord from "../images/Discord-Logo.png"
 import { Link } from "gatsby"
 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 justify-evenly items-center py-2 text-orange-500">
-        <div>
-          <Link to={links.about} activeStyle={{ color: "#002ead" }}>
-            About
-          </Link>
+      <div className="w-full flex justify-evenly py-2">
+        <div className="mr-6">
+          <h1 className="text-base font-bold font-title sm:text-2xl flex-col items-end">
+            <img
+              src={logo}
+              className="h-24"
+              alt="github profile markdown generator logo"
+            />
+            GitHub Profile README Generator
+          </h1>
         </div>
         <div>
-          <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
-            Addons
-          </Link>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>Pages</strong>
+          </div>
+          <div>
+            <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
+              Addons
+            </Link>
+          </div>
+          <div>
+            <Link to={links.support} activeStyle={{ color: "#002ead" }}>
+              Support
+            </Link>
+          </div>
+          <div>
+            <Link to={links.about} activeStyle={{ color: "#002ead" }}>
+              About
+            </Link>
+          </div>
         </div>
         <div>
-          <Link to={links.support} activeStyle={{ color: "#002ead" }}>
-            Support
-          </Link>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>More</strong>
+          </div>
+          <div>
+            <a
+              href="https://github.com/rahuldkjain/github-profile-readme-generator"
+              aria-label="Github rahuldkjain/github-profile-readme-generator"
+              target="blank"
+            >
+              Github
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
+              aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
+              target="blank"
+            >
+              Releases
+            </a>
+          </div>
+        </div>
+        <div>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>Community</strong>
+          </div>
+          <div>
+            <a
+              href="https://discord.gg/HHMs7Eg"
+              aria-label="Discord of the community"
+              target="blank"
+            >
+              <img
+                src={discord}
+                className="h-12"
+                alt="Discord of the community"
+              />
+            </a>
+          </div>
         </div>
       </div>
-      <div className="py-2">
+      <div className="py-2 mt-2">
         Developed in India{" "}
         <span role="img" aria-label="india">
           {" "}

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 }