Merge pull request #241 from Mohitmadhav/Issue-#228

[update] gatsby-plugin-sharp version

.all-contributorsrc

@@ -14,6 +14,15 @@
         "code"
       ]
     },
+    {
+      "login": "Hardik0307",
+      "name": "Hardik Bagada",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/41434099?v=4",
+      "profile": "https://github.com/Hardik0307",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "antonkomarev",
       "name": "Anton Komarev",
@@ -22,6 +31,61 @@
       "contributions": [
         "plugin"
       ]
+    },
+    {
+      "login": "KKVANONYMOUS",
+      "name": "Kunal Kumar Verma",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/58628586?v=4",
+      "profile": "https://kkvanonymous.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jaideepghosh",
+      "name": "Jaideep Ghosh",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3909648?v=4",
+      "profile": "http://jaideepghosh.blogspot.com",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "YashKandalkar",
+      "name": "yash",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/35102959?v=4",
+      "profile": "http://yashkandalkar.github.io",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "abhijit-hota",
+      "name": "Abhijit Hota",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/8116174?v=4",
+      "profile": "https://github.com/abhijit-hota",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "Maddoxx88",
+      "name": "Sunit Shirke",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/34238672?v=4",
+      "profile": "https://maddoxx88.github.io/",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "g-savitha",
+      "name": "Savitha Gollamudi",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/31612459?v=4",
+      "profile": "https://www.gsavitha.in",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,43 @@
+<!--
+     For Work In Progress Pull Requests, please use the Draft PR feature,
+     see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
+
+     For a timely review/response, please avoid force-pushing additional
+     commits if your PR already received reviews or comments.
+
+     Before submitting a Pull Request, please ensure you've done the following:
+     - 📖 Read the Contributing Guide: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CONTRIBUTING.md#create-a-pull-request.
+     - 📖 Read the Code of Conduct: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CODE_OF_CONDUCT.md.
+     - 👷‍♀️ Create small PRs. In most cases this will be possible.
+     - ✅ Provide issue number with link.
+     - 📝 Use descriptive commit messages.
+     - 📗 Update any related documentation and include any relevant screenshots.
+-->
+
+## What type of PR is this? (check all applicable)
+
+- [ ] Refactor
+- [ ] Feature
+- [ ] Bug Fix
+- [ ] Enhancement
+- [ ] Documentation Update
+
+## Description
+
+## Related Tickets & Documents
+
+## QA Instructions, Screenshots, Recordings
+
+_Please replace this line with instructions on how to test your changes, as well
+as any relevant images for UI changes._
+
+<!-- ## Added tests?
+
+- [ ] yes
+- [ ] no, because they aren't needed
+- [ ] no, because I need help -->
+
+## Added to documentation?
+
+- [ ] readme
+

README.md

@@ -157,7 +157,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 
 ## Contributors ✨
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
@@ -167,7 +167,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tr>
     <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Hardik0307"><img src="https://avatars3.githubusercontent.com/u/41434099?v=4" width="100px;" alt=""/><br /><sub><b>Hardik Bagada</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Hardik0307" title="Code">💻</a></td>
     <td align="center"><a href="https://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://kkvanonymous.github.io/"><img src="https://avatars3.githubusercontent.com/u/58628586?v=4" width="100px;" alt=""/><br /><sub><b>Kunal Kumar Verma</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=KKVANONYMOUS" title="Code">💻</a></td>
+    <td align="center"><a href="http://jaideepghosh.blogspot.com"><img src="https://avatars2.githubusercontent.com/u/3909648?v=4" width="100px;" alt=""/><br /><sub><b>Jaideep Ghosh</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=jaideepghosh" title="Code">💻</a></td>
+    <td align="center"><a href="http://yashkandalkar.github.io"><img src="https://avatars0.githubusercontent.com/u/35102959?v=4" width="100px;" alt=""/><br /><sub><b>yash</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=YashKandalkar" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/abhijit-hota"><img src="https://avatars0.githubusercontent.com/u/8116174?v=4" width="100px;" alt=""/><br /><sub><b>Abhijit Hota</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Code">💻</a> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://maddoxx88.github.io/"><img src="https://avatars1.githubusercontent.com/u/34238672?v=4" width="100px;" alt=""/><br /><sub><b>Sunit Shirke</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Maddoxx88" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.gsavitha.in"><img src="https://avatars0.githubusercontent.com/u/31612459?v=4" width="100px;" alt=""/><br /><sub><b>Savitha Gollamudi</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=g-savitha" title="Code">💻</a></td>
   </tr>
 </table>
 

__mocks__/file-mock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub"

__mocks__/gatsby.js

@@ -0,0 +1,27 @@
+const React = require("react")
+const gatsby = jest.requireActual("gatsby")
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}

jest-preprocess.js

@@ -0,0 +1,5 @@
+const babelOptions = {
+  presets: ["babel-preset-gatsby"],
+}
+
+module.exports = require("babel-jest").createTransformer(babelOptions)

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+}

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+}

package.json

@@ -12,7 +12,7 @@
     "gatsby-plugin-manifest": "^2.4.14",
     "gatsby-plugin-offline": "^3.2.13",
     "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sharp": "2.6.14",
     "gatsby-remark-prismjs": "^3.5.10",
     "gatsby-source-filesystem": "^2.3.23",
     "gatsby-transformer-remark": "^2.8.27",
@@ -25,12 +25,17 @@
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
+    "babel-jest": "26.3.0",
+    "babel-preset-gatsby": "0.5.11",
     "gatsby-plugin-postcss": "^2.3.11",
     "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-twitter": "^2.3.10",
     "gatsby-remark-embedder": "^3.0.0",
     "gh-pages": "^3.1.0",
+    "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": [
@@ -44,7 +49,7 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title 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"
+  >
+    Title
+  </div>
+  <div
+    className="flex justify-start items-center w-full text-regular text-xs sm:text-lg"
+  >
+    <input
+      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"
+    />
+    <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=""
+    />
+  </div>
+</div>
+`;

src/components/__tests__/title.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Title from "../title"
+
+describe("Title", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

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/constants/skills.js

@@ -184,6 +184,7 @@ const categorizedSkills = {
       "scully",
       "sculpin",
       "sapper",
+      "vuepress"
     ],
   },
 
@@ -360,7 +361,7 @@ const icons = {
   nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
   reactnative: "https://reactnative.dev/img/header_logo.svg",
   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
-  cockroachdb:  "https://worldvectorlogo.com/es/download/cockroachdb.svg",
+  cockroachdb:  "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
   objectivec:
     "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
   clojure:
@@ -406,6 +407,8 @@ const icons = {
     "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
   sapper:
     "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg", 
+  vuepress:
+    "https://raw.githubusercontent.com/AliasIO/wappalyzer/master/src/drivers/webextension/images/icons/VuePress.svg",
   unity:
     "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
 }
@@ -538,6 +541,7 @@ const skillWebsites = {
   sculpin: "https://sculpin.io/",
   "11ty": "https://www.11ty.dev/",
   sapper: "https://sapper.svelte.dev/",
+  vuepress: "https://vuepress.vuejs.org/",
   unity: "https://unity.com/"
 }
 

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 }