Merge pull request #108 from g-savitha/prettier

[fix]: code formatting to the whole project

.github/FUNDING.yml

@@ -9,4 +9,5 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://paypal.me/rahuldkjain', 'https://www.buymeacoffee.com/rahuldkjain']
+custom:
+  ["https://paypal.me/rahuldkjain", "https://www.buymeacoffee.com/rahuldkjain"]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature-enhancement-request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature/Enhancement request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

README.md

@@ -43,11 +43,13 @@
 </p>
 
 #### Tired of editing GitHub Profile README with new features?
-This tool provides an easy way to create github profile readme with latest addons like `visitors count`, `github stats` etc. 
+
+This tool provides an easy way to create github profile readme with latest addons like `visitors count`, `github stats` etc.
 
 #### 🚀 Try it out: [Live demo](https://rahuldkjain.github.io/gh-profile-readme-generator)
 
 ## 🧐 Features
+
 Just fill the details like `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog` etc. with a minimal UI.
 
 Click on `Generate README` to get your README in `markdown`.
@@ -56,36 +58,47 @@ You can preview the README too.
 You can add latest addons like `visitors count`, `shields`, `dev icons`, `github stats` etc to your README in just one click.
 
 ## Installation Steps
+
 1. Clone the repository
+
 ```bash
 git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
 ```
+
 2. Change the working directory
+
 ```bash
 cd github-profile-readme-generator
 ```
+
 3. Install dependencies
+
 ```bash
 npm install
 ```
+
 4. Run the app
+
 ```bash
 npm start
 ```
+
 🌟 You are all set!
 
-
 ## Special Thanks 🙇
+
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
 - [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
 - [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
 
 ## Sponsors 🙇
+
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
 - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
 
 ## Support 🙏
+
 <p align="left">
 <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
 </a>

gatsby-browser.js

@@ -1,2 +1,2 @@
-import "./src/styles/tailwind.css";
-require("prismjs/themes/prism-okaidia.css");
+import "./src/styles/tailwind.css"
+require("prismjs/themes/prism-okaidia.css")

gatsby-config.js

@@ -24,10 +24,8 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [
-          `gatsby-remark-prismjs`,
-        ]
-      }
+        plugins: [`gatsby-remark-prismjs`],
+      },
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
@@ -56,7 +54,7 @@ module.exports = {
       resolve: `gatsby-plugin-postcss`,
       options: {
         postCssPlugins: [require("tailwindcss")],
-      }
+      },
     },
     {
       resolve: `gatsby-plugin-purgecss`,
@@ -64,9 +62,9 @@ module.exports = {
         printRejected: false,
         develop: false,
         tailwind: true,
-      }
+      },
     },
-    `gatsby-plugin-twitter`
+    `gatsby-plugin-twitter`,
   ],
   // this (optional) plugin enables Progressive Web App + Offline functionality
   // To learn more, visit: https://gatsby.dev/offline

gatsby-node.js

@@ -1,39 +1,39 @@
 exports.createPages = async ({ actions, graphql, reporter }) => {
-    const { createPage } = actions
-  
-    const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
-  
-    const result = await graphql(`
-      {
-        allMarkdownRemark(
-          sort: { order: DESC, fields: [frontmatter___date] }
-          limit: 1000
-        ) {
-          edges {
-            node {
-              frontmatter {
-                slug
-              }
+  const { createPage } = actions
+
+  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
+
+  const result = await graphql(`
+    {
+      allMarkdownRemark(
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
+        edges {
+          node {
+            frontmatter {
+              slug
             }
           }
         }
       }
-    `)
-  
-    // Handle errors
-    if (result.errors) {
-      reporter.panicOnBuild(`Error while running GraphQL query.`)
-      return
     }
-  
-    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      createPage({
-        path: node.frontmatter.slug,
-        component: blogPostTemplate,
-        context: {
-          // additional data can be passed via context
-          slug: node.frontmatter.slug,
-        },
-      })
+  `)
+
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    createPage({
+      path: node.frontmatter.slug,
+      component: blogPostTemplate,
+      context: {
+        // additional data can be passed via context
+        slug: node.frontmatter.slug,
+      },
     })
-  }
+  })
+}

src/components/addons.js

@@ -1,73 +1,126 @@
 import React from "react"
-import { withPrefix } from 'gatsby'
+import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
 import { isMediumUsernameValid } from "../utils/validation"
-const Addons = (props) => {
-    const blogPostPorkflow = () => {
-        let payload = {
-            dev: {
-                show: props.data.devDynamicBlogs,
-                username: props.social.dev,
-            },
-            medium: {
-                show: props.data.mediumDynamicBlogs,
-                username: props.social.medium,
-            }
-        }
-        var actionContent = latestBlogs(payload);
-        var tempElement = document.createElement('a');
-        tempElement.setAttribute('href', 'data:text/yaml;charset=utf-8,' + encodeURIComponent(actionContent));
-        tempElement.setAttribute('download', 'blog-post-workflow.yml');
-        tempElement.style.display = 'none';
-        document.body.appendChild(tempElement);
-        tempElement.click();
-        document.body.removeChild(tempElement);
+const Addons = props => {
+  const blogPostPorkflow = () => {
+    let payload = {
+      dev: {
+        show: props.data.devDynamicBlogs,
+        username: props.social.dev,
+      },
+      medium: {
+        show: props.data.mediumDynamicBlogs,
+        username: props.social.medium,
+      },
     }
-    return (
-        <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">Add-ons</div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="visitors-count" className="cursor-pointer">
-                    <input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
-                        onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="github-stats" className="cursor-pointer">
-                    <input id="github-stats" type="checkbox" checked={props.data.githubStats}
-                        onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="top-languages" className="cursor-pointer">
-                    <input id="top-languages" type="checkbox" checked={props.data.topLanguages}
-                        onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
-                    <input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
-                        onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
-                    <input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
-                        onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
-                </label>
-            </div>
-
-            {(props.data.devDynamicBlogs && props.social.dev) || (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium)) ?
-                <div className="workflow">
-                    <div>
-                        download
-                        <span onClick={blogPostPorkflow} role="button" tabIndex="0" style={{ cursor: 'pointer', color: '#002ead' }}> blog-post-workflow.yml</span> file(learn
-                        <a href={withPrefix(links.addons)} target="blank" style={{ color: '#002ead' }}> how to setup</a>)
-                    </div>
-                </div> : ''}
-        </div>
+    var actionContent = latestBlogs(payload)
+    var tempElement = document.createElement("a")
+    tempElement.setAttribute(
+      "href",
+      "data:text/yaml;charset=utf-8," + encodeURIComponent(actionContent)
     )
+    tempElement.setAttribute("download", "blog-post-workflow.yml")
+    tempElement.style.display = "none"
+    document.body.appendChild(tempElement)
+    tempElement.click()
+    document.body.removeChild(tempElement)
+  }
+  return (
+    <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">
+        Add-ons
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="visitors-count" className="cursor-pointer">
+          <input
+            type="checkbox"
+            id="visitors-count"
+            checked={props.data.visitorsBadge}
+            onChange={event => props.handleCheckChange("visitorsBadge")}
+          />
+          &nbsp; display visitors count badge
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="github-stats" className="cursor-pointer">
+          <input
+            id="github-stats"
+            type="checkbox"
+            checked={props.data.githubStats}
+            onChange={event => props.handleCheckChange("githubStats")}
+          />
+          &nbsp; display github profile stats card
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="top-languages" className="cursor-pointer">
+          <input
+            id="top-languages"
+            type="checkbox"
+            checked={props.data.topLanguages}
+            onChange={event => props.handleCheckChange("topLanguages")}
+          />
+          &nbsp; display top skills
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="dev-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.devDynamicBlogs}
+            onChange={event => props.handleCheckChange("devDynamicBlogs")}
+          />
+          &nbsp; display latest dev.to blogs dynamically (GitHub Action)
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="medium-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.mediumDynamicBlogs}
+            onChange={event => props.handleCheckChange("mediumDynamicBlogs")}
+          />
+          &nbsp; display latest medium blogs dynamically (GitHub Action)
+        </label>
+      </div>
+
+      {(props.data.devDynamicBlogs && props.social.dev) ||
+      (props.data.mediumDynamicBlogs &&
+        props.social.medium &&
+        isMediumUsernameValid(props.social.medium)) ? (
+        <div className="workflow">
+          <div>
+            download
+            <span
+              onClick={blogPostPorkflow}
+              role="button"
+              tabIndex="0"
+              style={{ cursor: "pointer", color: "#002ead" }}
+            >
+              {" "}
+              blog-post-workflow.yml
+            </span>{" "}
+            file(learn
+            <a
+              href={withPrefix(links.addons)}
+              target="blank"
+              style={{ color: "#002ead" }}
+            >
+              {" "}
+              how to setup
+            </a>
+            )
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  )
 }
 
-export default Addons;
+export default Addons

src/components/footer.js

@@ -1,30 +1,34 @@
-import React from 'react';
-import links from '../constants/page-links'
-import { Link } from 'gatsby'
+import React from "react"
+import links from "../constants/page-links"
+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>
-                <div>
-                    <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
-                        Addons
-                    </Link>
-                </div>
-                <div>
-                    <Link to={links.support} activeStyle={{ color: "#002ead" }}>
-                        Support
-                    </Link>
-                </div>
-            </div>
-            <div className="py-2">
-                Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
-            </div>
+  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>
-    )
+        <div>
+          <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
+            Addons
+          </Link>
+        </div>
+        <div>
+          <Link to={links.support} activeStyle={{ color: "#002ead" }}>
+            Support
+          </Link>
+        </div>
+      </div>
+      <div className="py-2">
+        Developed in India{" "}
+        <span role="img" aria-label="india">
+          {" "}
+          🇮🇳
+        </span>
+      </div>
+    </div>
+  )
 }
-export default Footer;
+export default Footer

src/components/header.js

@@ -61,8 +61,11 @@ const Header = props => {
           className="mr-2"
         >
           <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />Star this repo
-            <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
+            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
+            Star this repo
+            <span className="github-count px-1 sm:px-2">
+              {stats.starsCount}
+            </span>
           </div>
         </a>
         <a
@@ -71,8 +74,15 @@ const Header = props => {
           target="blank"
         >
           <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
-            <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
+            <RepoForkedIcon
+              size={16}
+              id="fork-icon"
+              className="px-1 w-6 fork"
+            />
+            Fork on GitHub
+            <span className="github-count px-1 sm:px-2">
+              {stats.forksCount}
+            </span>
           </div>
         </a>
       </div>

src/components/layout.js

@@ -1,21 +1,18 @@
-import React from "react";
-import Header from "./header";
-import Footer from "./footer";
+import React from "react"
+import Header from "./header"
+import Footer from "./footer"
 
-
-const Layout = ({children}) => {
-    return (
-        <div className="flex flex-col min-h-screen">
-            <header>
-                <Header heading="GitHub Profile README Generator" />
-            </header>
-            <main className="flex-grow">
-                {children}
-            </main>
-            <footer>
-                <Footer />
-            </footer>
-        </div>
-    )
-};
-export default Layout;
+const Layout = ({ children }) => {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <header>
+        <Header heading="GitHub Profile README Generator" />
+      </header>
+      <main className="flex-grow">{children}</main>
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  )
+}
+export default Layout

src/components/loader.js

@@ -1,40 +1,49 @@
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
+import React, { useRef, useEffect } from "react"
+import gsap from "gsap"
 const Loader = () => {
-    let arrow = useRef([]);
-    useEffect(() => {
-        var tl = new gsap.timeline({repeat: -1});
-        tl.fromTo(arrow.current, {
-            y: 0,
-            color: '#3b3b4f',
-        }, {
-            y: -50,
-            color: '#d0d0d5',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        });
-        tl.add('cp')
-        tl.fromTo(arrow.current, {
-            y: -50,
-            color: '#d0d0d5',
-        }, {
-            y: 0,
-            color: '#3b3b4f',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        }, 'cp-=0.3');
-    });
-    return (
-        <div className="loader">
-            <span ref={el => (arrow.current[0] = el)}>↓</span>
-            <span ref={el => (arrow.current[1] = el)}>↓</span>
-            <span ref={el => (arrow.current[2] = el)}>↓</span>
-            <span ref={el => (arrow.current[3] = el)}>↓</span>
-            <span ref={el => (arrow.current[4] = el)}>↓</span>
-        </div>
+  let arrow = useRef([])
+  useEffect(() => {
+    var tl = new gsap.timeline({ repeat: -1 })
+    tl.fromTo(
+      arrow.current,
+      {
+        y: 0,
+        color: "#3b3b4f",
+      },
+      {
+        y: -50,
+        color: "#d0d0d5",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      }
     )
+    tl.add("cp")
+    tl.fromTo(
+      arrow.current,
+      {
+        y: -50,
+        color: "#d0d0d5",
+      },
+      {
+        y: 0,
+        color: "#3b3b4f",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      },
+      "cp-=0.3"
+    )
+  })
+  return (
+    <div className="loader">
+      <span ref={el => (arrow.current[0] = el)}>↓</span>
+      <span ref={el => (arrow.current[1] = el)}>↓</span>
+      <span ref={el => (arrow.current[2] = el)}>↓</span>
+      <span ref={el => (arrow.current[3] = el)}>↓</span>
+      <span ref={el => (arrow.current[4] = el)}>↓</span>
+    </div>
+  )
 }
 
-export default Loader;
+export default Loader

src/components/markdown.js

@@ -1,162 +1,420 @@
-import React from 'react';
-import { isMediumUsernameValid } from '../utils/validation'
-import { icons, skills } from '../constants/skills';
+import React from "react"
+import { isMediumUsernameValid } from "../utils/validation"
+import { icons, skills } from "../constants/skills"
 
-const Markdown = (props) => {
-    const Title = (props) => {
-        if (props.prefix && props.title) {
-            return (
-                <>
-                    {`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
-                    <br />
-                </>
-            );
-        }
-        return '';
+const Markdown = props => {
+  const Title = props => {
+    if (props.prefix && props.title) {
+      return (
+        <>
+          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+          <br />
+        </>
+      )
     }
-    const SubTitle = (props) => {
-        if (props.subtitle) {
-            return (
-                <>
-                    {`<h3 align="center">${props.subtitle}</h3>`}
-                    <br />
-                    <br />
-                </>
-            );
-        }
-        return '';
+    return ""
+  }
+  const SubTitle = props => {
+    if (props.subtitle) {
+      return (
+        <>
+          {`<h3 align="center">${props.subtitle}</h3>`}
+          <br />
+          <br />
+        </>
+      )
     }
-    const DisplayWork = (props) => {
-        if (props.prefix && props.project) {
-            if (props.link) {
-                return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
-            } else {
-                return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
-            }
-        }
-        if (props.prefix && props.link) {
-            return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
-        }
-        return '';
+    return ""
+  }
+  const DisplayWork = props => {
+    if (props.prefix && props.project) {
+      if (props.link) {
+        return (
+          <>
+            {`- ${props.prefix} [${props.project}](${props.link})`}
+            <br />
+            <br />
+          </>
+        )
+      } else {
+        return (
+          <>
+            {`- ${props.prefix} **${props.project}**`}
+            <br />
+            <br />
+          </>
+        )
+      }
     }
-    const DisplaySocial = (props) => {
-        if (props.username) {
-            return (<>{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}<br /></>);
-        }
-        return '';
+    if (props.prefix && props.link) {
+      return (
+        <>
+          {`- ${props.prefix} [${props.link}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
     }
-    const VisitorsBadge = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
-        if (props.show) {
-            return (<>{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
-        }
-        return '';
+    return ""
+  }
+  const DisplaySocial = props => {
+    if (props.username) {
+      return (
+        <>
+          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
+          <br />
+        </>
+      )
     }
-    const GitHubStats = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
-        if (props.show) {
-            return (<>{`<p>&nbsp;<img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
-        }
-        return '';
+    return ""
+  }
+  const VisitorsBadge = props => {
+    let link = "https://komarev.com/ghpvc/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
     }
-    const isSocial = (social) => {
-        return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow
-            || social.linkedin || social.kaggle || social.instagram || social.fb || social.dribbble || social.behance || social.medium || social.youtube|| social.codechef|| social.hackerrank|| social.codeforces|| social.leetcode|| social.topcoder|| social.hackerearth|| social.geeks_for_geeks);
-    }
-    const DisplaySkills = (props) => {
-        const listChosenSkills = [];
-        skills.forEach(skill => {
-            if (props.skills[skill]) {
-                listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
-            }
-        });
-        return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
-    }
-    const DisplayDynamicBlogs = (props) => {
-        if (props.show) {
-            return (<>{`### Blogs posts`}
-                <br />
-                {`<!-- BLOG-POST-LIST:START -->`}
-                <br />
-                {`<!-- BLOG-POST-LIST:END -->`}<br /> <br /></>)
-        }
-        return '';
-    }
-    const DisplayTopLanguages = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
-        if (props.show) {
-            if (!props.showStats) {
-                return (<>{`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
-            }
-            return (<>{`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
-        }
-        return '';
+    return ""
+  }
+  const GitHubStats = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api?username=" +
+      props.github +
+      "&show_icons=true"
+    if (props.show) {
+      return (
+        <>
+          {`<p>&nbsp;<img align="center" src="${link}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
     }
+    return ""
+  }
+  const isSocial = social => {
     return (
-        <div id="markdown-content" className="break-words">
-            <><Title prefix={props.prefix.title} title={props.data.title} /></>
-            <><SubTitle subtitle={props.data.subtitle} /></>
-            <><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></>
+      social.dev ||
+      social.twitter ||
+      social.codepen ||
+      social.codesandbox ||
+      social.stackoverflow ||
+      social.linkedin ||
+      social.kaggle ||
+      social.instagram ||
+      social.fb ||
+      social.dribbble ||
+      social.behance ||
+      social.medium ||
+      social.youtube ||
+      social.codechef ||
+      social.hackerrank ||
+      social.codeforces ||
+      social.leetcode ||
+      social.topcoder ||
+      social.hackerearth ||
+      social.geeks_for_geeks
+    )
+  }
+  const DisplaySkills = props => {
+    const listChosenSkills = []
+    skills.forEach(skill => {
+      if (props.skills[skill]) {
+        listChosenSkills.push(
+          `<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`
+        )
+      }
+    })
+    return listChosenSkills.length > 0 ? (
+      <>
+        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        <br />
+        <br />
+      </>
+    ) : (
+      ""
+    )
+  }
+  const DisplayDynamicBlogs = props => {
+    if (props.show) {
+      return (
+        <>
+          {`### Blogs posts`}
+          <br />
+          {`<!-- BLOG-POST-LIST:START -->`}
+          <br />
+          {`<!-- BLOG-POST-LIST:END -->`}
+          <br /> <br />
+        </>
+      )
+    }
+    return ""
+  }
+  const DisplayTopLanguages = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
+      props.github +
+      "&layout=compact&hide=html"
+    if (props.show) {
+      if (!props.showStats) {
+        return (
+          <>
+            {`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}
+            <br />
+            <br />
+          </>
+        )
+      }
+      return (
+        <>
+          {`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
+  return (
+    <div id="markdown-content" className="break-words">
+      <>
+        <Title prefix={props.prefix.title} title={props.data.title} />
+      </>
+      <>
+        <SubTitle subtitle={props.data.subtitle} />
+      </>
+      <>
+        <VisitorsBadge
+          show={props.data.visitorsBadge}
+          github={props.social.github}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentWork}
+          project={props.data.currentWork}
+          link={props.link.currentWork}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentLearn}
+          project={props.data.currentLearn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.collaborateOn}
+          project={props.data.collaborateOn}
+          link={props.link.collaborateOn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.helpWith}
+          project={props.data.helpWith}
+          link={props.link.helpWith}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.portfolio}
+          link={props.link.portfolio}
+        />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.blog} link={props.link.blog} />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.ama} project={props.data.ama} />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.contact}
+          project={props.data.contact}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.funFact}
+          project={props.data.funFact}
+        />
+      </>
+      <>
+        <DisplayDynamicBlogs
+          show={
+            (props.data.devDynamicBlogs && props.social.dev) ||
+            (props.data.mediumDynamicBlogs &&
+              props.social.medium &&
+              isMediumUsernameValid(props.social.medium))
+          }
+        />
+      </>
+      <>
+        <DisplaySkills skills={props.skills} />
+      </>
+      <>
+        <DisplayTopLanguages
+          show={props.data.topLanguages}
+          showStats={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+      <>
+        <GitHubStats
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+      {isSocial(props.social) ? `<p align="center">` : ""} <br />
+      <>
+        <DisplaySocial
+          base="https://codepen.io"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          username={props.social.codepen}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dev.to"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          username={props.social.dev}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://twitter.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          username={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          username={props.social.linkedin}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          username={props.social.stackoverflow}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          username={props.social.codesandbox}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          username={props.social.kaggle}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://fb.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          username={props.social.fb}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://instagram.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          username={props.social.instagram}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          username={props.social.dribbble}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          username={props.social.behance}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://medium.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          username={props.social.medium}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          username={props.social.youtube}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          username={props.social.hackerrank}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          username={props.social.codeforces}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          username={props.social.leetcode}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          username={props.social.hackerearth}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          username={props.social.geeks_for_geeks}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          username={props.social.topcoder}
+        />
+      </>
+      {isSocial(props.social) ? `</p>` : ""}
+    </div>
+  )
+}
 
-            <><DisplayWork prefix={props.prefix.currentWork} project={props.data.currentWork} link={props.link.currentWork} /></>
-            <><DisplayWork prefix={props.prefix.currentLearn} project={props.data.currentLearn} /></>
-            <><DisplayWork prefix={props.prefix.collaborateOn} project={props.data.collaborateOn} link={props.link.collaborateOn} /></>
-            <><DisplayWork prefix={props.prefix.helpWith} project={props.data.helpWith} link={props.link.helpWith} /></>
-            <><DisplayWork prefix={props.prefix.portfolio} link={props.link.portfolio} /></>
-            <><DisplayWork prefix={props.prefix.blog} link={props.link.blog} /></>
-            <><DisplayWork prefix={props.prefix.ama} project={props.data.ama} /></>
-            <><DisplayWork prefix={props.prefix.contact} project={props.data.contact} /></>
-            <><DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /></>
-
-            <><DisplayDynamicBlogs show={(props.data.devDynamicBlogs && props.social.dev) ||
-                (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium))} /></>
-            <><DisplaySkills skills={props.skills} /></>
-            <><DisplayTopLanguages show={props.data.topLanguages} showStats={props.data.githubStats} github={props.social.github} /></>
-            <><GitHubStats show={props.data.githubStats} github={props.social.github} /></>
-            {isSocial(props.social) ? `<p align="center">` : ''} <br />
-            <><DisplaySocial base='https://codepen.io' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg'
-                username={props.social.codepen} /></>
-            <><DisplaySocial base='https://dev.to' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg'
-                username={props.social.dev} /></>
-            <><DisplaySocial base='https://twitter.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg'
-                username={props.social.twitter} /></>
-            <><DisplaySocial base='https://linkedin.com/in' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg'
-                username={props.social.linkedin} /></>
-            <><DisplaySocial base='https://stackoverflow.com/users'
-                icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg' username={props.social.stackoverflow} /></>
-            <><DisplaySocial base='https://codesandbox.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg'
-                username={props.social.codesandbox} /></>
-            <><DisplaySocial base='https://kaggle.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg'
-                username={props.social.kaggle} /></>
-            <><DisplaySocial base='https://fb.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg'
-                username={props.social.fb} /></>
-            <><DisplaySocial base='https://instagram.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg'
-                username={props.social.instagram} /></>
-            <><DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg'
-                username={props.social.dribbble} /></>
-            <><DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg'
-                username={props.social.behance} /></>
-            <><DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg'
-                username={props.social.medium} /></>
-            <><DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg'
-                username={props.social.youtube} /></>
-            <><DisplaySocial base='https://www.codechef.com/users' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg'
-                username={props.social.codechef} /></>
-            <><DisplaySocial base='https://www.hackerrank.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg'
-                username={props.social.hackerrank} /></>
-            <><DisplaySocial base='https://codeforces.com/profile' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg'
-                username={props.social.codeforces} /></>
-            <><DisplaySocial base='https://www.leetcode.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg'
-                username={props.social.leetcode} /></>
-            <><DisplaySocial base='https://www.hackerearth.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg'
-                username={props.social.hackerearth} /></>
-            <><DisplaySocial base='https://auth.geeksforgeeks.org/user' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg'
-                username={props.social.geeks_for_geeks} /></>
-            <><DisplaySocial base='https://www.topcoder.com/members' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg'
-                username={props.social.topcoder} /></>
-            {isSocial(props.social) ? `</p>` : ''}
-        </div>
-    );
-};
-
-export default Markdown;
+export default Markdown

src/components/markdownPreview.js

@@ -1,140 +1,299 @@
-import React from 'react';
-import { icons, skills } from '../constants/skills';
+import React from "react"
+import { icons, skills } from "../constants/skills"
 
-const MarkdownPreview = (props) => {
-    const TitlePreview = (props) => {
-        if (props.prefix && props.title) {
-            return (
-                <h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
-            )
-        }
-        return null;
+const MarkdownPreview = props => {
+  const TitlePreview = props => {
+    if (props.prefix && props.title) {
+      return (
+        <h1 className="text-center text-xl font-bold">
+          {props.prefix + " " + props.title}
+        </h1>
+      )
     }
-    const SubTitlePreview = (props) => {
-        if (props.subtitle) {
-            return (
-                <h3 className="text-center font-medium">{props.subtitle}</h3>
-            )
-        }
-        return null;
+    return null
+  }
+  const SubTitlePreview = props => {
+    if (props.subtitle) {
+      return <h3 className="text-center font-medium">{props.subtitle}</h3>
     }
-    const DisplayWork = (props) => {
-        if (props.prefix && props.project) {
-            if (props.link) {
-                return (
-                    <div className="my-2">
-                        {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.project}</a>
-                    </div>
-                );
-            } else {
-                return (<div className="my-2">{props.prefix + ' '}<b>{props.project}</b></div>);
-            }
-        }
-        if (props.prefix && props.link) {
-            return (
-                <div className="my-2">
-                    {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
-                </div>
-            );
-        }
-        return null;
-    }
-    const WorkPreview = (props) => {
-        const prefix = props.work.prefix
-        const data = props.work.data
-        const link = props.work.link
+    return null
+  }
+  const DisplayWork = props => {
+    if (props.prefix && props.project) {
+      if (props.link) {
         return (
-            <>
-                <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
-                <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
-                <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
-                <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn}
-                    link={link.collaborateOn} />
-                <DisplayWork prefix={prefix.ama} project={data.ama} />
-                <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
-                <DisplayWork prefix={prefix.blog} link={link.blog} />
-                <DisplayWork prefix={prefix.contact} project={data.contact} />
-                <DisplayWork prefix={prefix.funFact} project={data.funFact} />
-            </>
+          <div className="my-2">
+            {props.prefix + " "}
+            <a
+              href={props.link}
+              className="no-underline text-blue-700"
+              target="blank"
+            >
+              {props.project}
+            </a>
+          </div>
         )
-    }
-    const DisplaySocial = (props) => {
-        if (props.username) {
-            return (<a className="no-underline text-blue-700 m-2" href={props.base + '/' + props.username} target="blank"><img className="w-6 h-6" src={props.icon} alt="props.username" /></a>)
-        }
-        return null;
-    }
-    const SocialPreview = (props) => {
+      } else {
         return (
-            <div className="flex justify-center items-end">
-                <DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} />
-                <DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} />
-                <DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} />
-                <DisplaySocial base="https://linkedin.com/in" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" username={props.social.linkedin} />
-                <DisplaySocial base="https://stackoverflow.com/users" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" username={props.social.stackoverflow} />
-                <DisplaySocial base="https://codesandbox.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg" username={props.social.codesandbox} />
-                <DisplaySocial base="https://kaggle.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg" username={props.social.kaggle} />
-                <DisplaySocial base="https://fb.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" username={props.social.fb} />
-                <DisplaySocial base="https://instagram.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" username={props.social.instagram} />
-                <DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg' username={props.social.dribbble} />
-                <DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg' username={props.social.behance} />
-                <DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg' username={props.social.medium} />
-                <DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg' username={props.social.youtube} />
-                
-                <DisplaySocial base='https://www.codechef.com/users' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg' username={props.social.codechef} />
-                <DisplaySocial base='https://codeforces.com/profile' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg' username={props.social.codeforces} />
-                <DisplaySocial base='https://www.hackerrank.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg' username={props.social.hackerrank} />
-                <DisplaySocial base='https://auth.geeksforgeeks.org/user' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg' username={props.social.geeks_for_geeks} />
-                <DisplaySocial base='https://www.hackerearth.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg' username={props.social.hackerearth} />
-                <DisplaySocial base='https://www.topcoder.com/members' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg' username={props.social.topcoder} />
-                <DisplaySocial base='https://www.leetcode.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg' username={props.social.leetcode} />
-            </div>
+          <div className="my-2">
+            {props.prefix + " "}
+            <b>{props.project}</b>
+          </div>
         )
+      }
     }
-    const VisitorsBadgePreview = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
-        if (props.show) {
-            return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
-        }
-        return null;
-    }
-    const GitHubStatsPreview = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
-        if (props.show) {
-            return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
-        }
-        return null;
-    }
-    const TopLanguagesPreview = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
-        if (props.show) {
-            return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
-        }
-        return <div className="text-center mx-4 mb-4"> &nbsp;</div>;
-    }
-    const SkillsPreview = (props) => {
-        var listSkills = []
-        skills.forEach((skill) => {
-            if (props.skills[skill]) {
-                listSkills.push(<img className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10" key={skill} src={icons[skill]} alt={skill} />)
-            }
-        });
-        return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{listSkills}</div> : ''
-    }
-    return (
-        <div id="markdown-preview">
-            <TitlePreview prefix={props.prefix.title} title={props.data.title} />
-            <SubTitlePreview subtitle={props.data.subtitle} />
-            <VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
-            <WorkPreview work={props} />
-            <SkillsPreview skills={props.skills} />
-            <div className="block sm:flex sm:justify-center sm:items-start">
-                <TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
-                <GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
-            </div>
-            <SocialPreview social={props.social} />
+    if (props.prefix && props.link) {
+      return (
+        <div className="my-2">
+          {props.prefix + " "}
+          <a
+            href={props.link}
+            className="no-underline text-blue-700"
+            target="blank"
+          >
+            {props.link}
+          </a>
         </div>
+      )
+    }
+    return null
+  }
+  const WorkPreview = props => {
+    const prefix = props.work.prefix
+    const data = props.work.data
+    const link = props.work.link
+    return (
+      <>
+        <DisplayWork
+          prefix={prefix.currentWork}
+          project={data.currentWork}
+          link={link.currentWork}
+        />
+        <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
+        <DisplayWork
+          prefix={prefix.helpWith}
+          project={data.helpWith}
+          link={link.helpWith}
+        />
+        <DisplayWork
+          prefix={prefix.collaborateOn}
+          project={data.collaborateOn}
+          link={link.collaborateOn}
+        />
+        <DisplayWork prefix={prefix.ama} project={data.ama} />
+        <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
+        <DisplayWork prefix={prefix.blog} link={link.blog} />
+        <DisplayWork prefix={prefix.contact} project={data.contact} />
+        <DisplayWork prefix={prefix.funFact} project={data.funFact} />
+      </>
     )
+  }
+  const DisplaySocial = props => {
+    if (props.username) {
+      return (
+        <a
+          className="no-underline text-blue-700 m-2"
+          href={props.base + "/" + props.username}
+          target="blank"
+        >
+          <img className="w-6 h-6" src={props.icon} alt="props.username" />
+        </a>
+      )
+    }
+    return null
+  }
+  const SocialPreview = props => {
+    return (
+      <div className="flex justify-center items-end">
+        <DisplaySocial
+          base="https://codepen.io"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          username={props.social.codepen}
+        />
+        <DisplaySocial
+          base="https://dev.to"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          username={props.social.dev}
+        />
+        <DisplaySocial
+          base="https://twitter.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          username={props.social.twitter}
+        />
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          username={props.social.linkedin}
+        />
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          username={props.social.stackoverflow}
+        />
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          username={props.social.codesandbox}
+        />
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          username={props.social.kaggle}
+        />
+        <DisplaySocial
+          base="https://fb.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          username={props.social.fb}
+        />
+        <DisplaySocial
+          base="https://instagram.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          username={props.social.instagram}
+        />
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          username={props.social.dribbble}
+        />
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          username={props.social.behance}
+        />
+        <DisplaySocial
+          base="https://medium.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          username={props.social.medium}
+        />
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          username={props.social.youtube}
+        />
+
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          username={props.social.codeforces}
+        />
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          username={props.social.hackerrank}
+        />
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          username={props.social.geeks_for_geeks}
+        />
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          username={props.social.hackerearth}
+        />
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          username={props.social.topcoder}
+        />
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          username={props.social.leetcode}
+        />
+      </div>
+    )
+  }
+  const VisitorsBadgePreview = props => {
+    let link = "https://komarev.com/ghpvc/?username=" + props.github
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
+  const GitHubStatsPreview = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api?username=" +
+      props.github +
+      "&show_icons=true"
+    if (props.show) {
+      return (
+        <div className="text-center mx-4 mb-4">
+          <img src={link} alt={props.github} />
+        </div>
+      )
+    }
+    return null
+  }
+  const TopLanguagesPreview = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
+      props.github +
+      "&layout=compact&hide=html"
+    if (props.show) {
+      return (
+        <div className="text-center mx-4 mb-4">
+          <img src={link} alt={props.github} />
+        </div>
+      )
+    }
+    return <div className="text-center mx-4 mb-4"> &nbsp;</div>
+  }
+  const SkillsPreview = props => {
+    var listSkills = []
+    skills.forEach(skill => {
+      if (props.skills[skill]) {
+        listSkills.push(
+          <img
+            className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10"
+            key={skill}
+            src={icons[skill]}
+            alt={skill}
+          />
+        )
+      }
+    })
+    return listSkills.length > 0 ? (
+      <div className="flex flex-wrap justify-start items-center">
+        {listSkills}
+      </div>
+    ) : (
+      ""
+    )
+  }
+  return (
+    <div id="markdown-preview">
+      <TitlePreview prefix={props.prefix.title} title={props.data.title} />
+      <SubTitlePreview subtitle={props.data.subtitle} />
+      <VisitorsBadgePreview
+        show={props.data.visitorsBadge}
+        github={props.social.github}
+      />
+      <WorkPreview work={props} />
+      <SkillsPreview skills={props.skills} />
+      <div className="block sm:flex sm:justify-center sm:items-start">
+        <TopLanguagesPreview
+          show={props.data.topLanguages}
+          github={props.social.github}
+        />
+        <GitHubStatsPreview
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </div>
+      <SocialPreview social={props.social} />
+    </div>
+  )
 }
 
-export default MarkdownPreview;
+export default MarkdownPreview

src/components/skills.js

@@ -5,14 +5,21 @@ const Skills = props => {
   const createSkill = skill => {
     return (
       <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
-        <label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
+        <label
+          htmlFor={skill}
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+        >
           <input
             id={skill}
             type="checkbox"
             checked={props.skills[skill]}
-            onChange={(event) => props.handleSkillsChange(skill)}
+            onChange={event => props.handleSkillsChange(skill)}
+          />
+          <img
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src={icons[skill]}
+            alt={skill}
           />
-          <img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
           <span className="tooltiptext">{skill}</span>
         </label>
       </div>
@@ -21,7 +28,9 @@ const Skills = props => {
 
   return (
     <div className="px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Skills
+      </div>
 
       {Object.keys(categorizedSkills).map(key => (
         <div key={key}>

src/components/social.js

@@ -1,141 +1,311 @@
-import React from 'react';
+import React from "react"
 
-const Social = (props) => {
-    return (
-        <div className="px-2 sm:px-6 mb-4">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
-            <div className="flex flex-wrap justify-center items-center">
-                <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.0.1/icons/github.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
-                    <input id="github" placeholder="github username"
-                        className="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-1 sm:px-2 focus:border-blue-700"
-                        value={props.social.github} onChange={event => props.handleSocialChange('github', 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@v3/icons/twitter.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
-                    <input id="twitter" placeholder="twitter username"
-                        className="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.twitter} onChange={event => props.handleSocialChange('twitter', 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.0.1/icons/dev-dot-to.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
-                    <input id="dev" placeholder="dev.to username" className="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.dev} onChange={event => props.handleSocialChange('dev', 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.0.1/icons/codepen.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
-                    <input id="codepen" placeholder="codepen username" className="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.codepen} onChange={event => props.handleSocialChange('codepen', 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.0.1/icons/codesandbox.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
-                    <input id="codesandbox" placeholder="codesandbox username" className="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.codesandbox} onChange={event => props.handleSocialChange('codesandbox', 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.0.1/icons/stackoverflow.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
-                    <input id="stackoverflow" placeholder="stackoverflow user ID" className="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.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', 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.0.1/icons/linkedin.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
-                    <input id="linkedin" placeholder="linkedin username" className="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.linkedin} onChange={event => props.handleSocialChange('linkedin', 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.0.1/icons/kaggle.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
-                    <input id="kaggle" placeholder="kaggle username" className="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.kaggle} onChange={event => props.handleSocialChange('kaggle', 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.0.1/icons/facebook.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
-                    <input id="fb" placeholder="facebook username" className="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.fb} onChange={event => props.handleSocialChange('fb', 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.0.1/icons/instagram.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
-                    <input id="instagram" placeholder="instagram username" className="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.instagram} onChange={event => props.handleSocialChange('instagram', 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/dribbble.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
-                    <input id="dribbble" placeholder="dribbble username" className="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.dribbble} onChange={event => props.handleSocialChange('dribbble', 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/behance.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
-                    <input id="behance" placeholder="behance username" className="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.behance} onChange={event => props.handleSocialChange('behance', 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/medium.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
-                    <input id="medium" placeholder="medium username (with @)" className="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.medium} onChange={event => props.handleSocialChange('medium', 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/youtube.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
-                    <input id="youtube" placeholder="youtube channel name" className="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.youtube} onChange={event => props.handleSocialChange('youtube', 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/codechef.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codechef" />
-                    <input id="codechef" placeholder="codechef username" className="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.codechef} onChange={event => props.handleSocialChange('codechef', 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/hackerrank.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="hackerrank" />
-                    <input id="hackerrank" placeholder="hackerrank username" className="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.hackerrank} onChange={event => props.handleSocialChange('hackerrank', 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/codeforces.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codeforces" />
-                    <input id="codeforces" placeholder="codeforces username" className="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.codeforces} onChange={event => props.handleSocialChange('codeforces', 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/leetcode.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="leetcode" />
-                    <input id="leetcode" placeholder="leetcode username" className="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.leetcode} onChange={event => props.handleSocialChange('leetcode', 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/topcoder.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="topcoder" />
-                    <input id="topcoder" placeholder="topcoder username" className="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.topcoder} onChange={event => props.handleSocialChange('topcoder', 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/hackerearth.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="hackerearth" />
-                    <input id="hackerearth" placeholder="hackerearth user (with @)" className="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.hackerearth} onChange={event => props.handleSocialChange('hackerearth', 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/geeksforgeeks.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="geeksforgeeks" />
-                    <input id="geeksforgeeks" placeholder="GFG (<username>/profile)" className="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.geeks_for_geeks} onChange={event => props.handleSocialChange('geeks_for_geeks', event)} />
-                </div>
-            </div>
+const Social = props => {
+  return (
+    <div className="px-2 sm:px-6 mb-4">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Social
+      </div>
+      <div className="flex flex-wrap justify-center items-center">
+        <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.0.1/icons/github.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="github"
+          />
+          <input
+            id="github"
+            placeholder="github username"
+            className="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-1 sm:px-2 focus:border-blue-700"
+            value={props.social.github}
+            onChange={event => props.handleSocialChange("github", 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@v3/icons/twitter.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="twitter"
+          />
+          <input
+            id="twitter"
+            placeholder="twitter username"
+            className="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.twitter}
+            onChange={event => props.handleSocialChange("twitter", 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.0.1/icons/dev-dot-to.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="dev.to"
+          />
+          <input
+            id="dev"
+            placeholder="dev.to username"
+            className="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.dev}
+            onChange={event => props.handleSocialChange("dev", 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.0.1/icons/codepen.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codepen"
+          />
+          <input
+            id="codepen"
+            placeholder="codepen username"
+            className="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.codepen}
+            onChange={event => props.handleSocialChange("codepen", 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.0.1/icons/codesandbox.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codesandbox"
+          />
+          <input
+            id="codesandbox"
+            placeholder="codesandbox username"
+            className="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.codesandbox}
+            onChange={event => props.handleSocialChange("codesandbox", 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.0.1/icons/stackoverflow.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="stackoverflow"
+          />
+          <input
+            id="stackoverflow"
+            placeholder="stackoverflow user ID"
+            className="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.stackoverflow}
+            onChange={event => props.handleSocialChange("stackoverflow", 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.0.1/icons/linkedin.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="linkedin"
+          />
+          <input
+            id="linkedin"
+            placeholder="linkedin username"
+            className="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.linkedin}
+            onChange={event => props.handleSocialChange("linkedin", 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.0.1/icons/kaggle.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="kaggle"
+          />
+          <input
+            id="kaggle"
+            placeholder="kaggle username"
+            className="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.kaggle}
+            onChange={event => props.handleSocialChange("kaggle", 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.0.1/icons/facebook.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="facebook"
+          />
+          <input
+            id="fb"
+            placeholder="facebook username"
+            className="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.fb}
+            onChange={event => props.handleSocialChange("fb", 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.0.1/icons/instagram.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="instagram"
+          />
+          <input
+            id="instagram"
+            placeholder="instagram username"
+            className="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.instagram}
+            onChange={event => props.handleSocialChange("instagram", 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/dribbble.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="dribbble"
+          />
+          <input
+            id="dribbble"
+            placeholder="dribbble username"
+            className="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.dribbble}
+            onChange={event => props.handleSocialChange("dribbble", 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/behance.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="behance"
+          />
+          <input
+            id="behance"
+            placeholder="behance username"
+            className="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.behance}
+            onChange={event => props.handleSocialChange("behance", 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/medium.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="medium"
+          />
+          <input
+            id="medium"
+            placeholder="medium username (with @)"
+            className="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.medium}
+            onChange={event => props.handleSocialChange("medium", 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/youtube.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="youtube"
+          />
+          <input
+            id="youtube"
+            placeholder="youtube channel name"
+            className="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.youtube}
+            onChange={event => props.handleSocialChange("youtube", 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/codechef.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codechef"
+          />
+          <input
+            id="codechef"
+            placeholder="codechef username"
+            className="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.codechef}
+            onChange={event => props.handleSocialChange("codechef", 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/hackerrank.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="hackerrank"
+          />
+          <input
+            id="hackerrank"
+            placeholder="hackerrank username"
+            className="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.hackerrank}
+            onChange={event => props.handleSocialChange("hackerrank", 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/codeforces.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codeforces"
+          />
+          <input
+            id="codeforces"
+            placeholder="codeforces username"
+            className="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.codeforces}
+            onChange={event => props.handleSocialChange("codeforces", 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/leetcode.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="leetcode"
+          />
+          <input
+            id="leetcode"
+            placeholder="leetcode username"
+            className="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.leetcode}
+            onChange={event => props.handleSocialChange("leetcode", 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/topcoder.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="topcoder"
+          />
+          <input
+            id="topcoder"
+            placeholder="topcoder username"
+            className="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.topcoder}
+            onChange={event => props.handleSocialChange("topcoder", 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/hackerearth.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="hackerearth"
+          />
+          <input
+            id="hackerearth"
+            placeholder="hackerearth user (with @)"
+            className="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.hackerearth}
+            onChange={event => props.handleSocialChange("hackerearth", 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/geeksforgeeks.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="geeksforgeeks"
+          />
+          <input
+            id="geeksforgeeks"
+            placeholder="GFG (<username>/profile)"
+            className="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.geeks_for_geeks}
+            onChange={event =>
+              props.handleSocialChange("geeks_for_geeks", event)
+            }
+          />
+        </div>
+      </div>
+    </div>
+  )
 }
 
-export default Social;
+export default Social

src/components/subtitle.js

@@ -1,13 +1,19 @@
-import React from 'react';
+import React from "react"
 
-const Subtitle = (props) => {
-    return (
-        <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">Subtitle</div>
-            <input id="subtitle" className="w-full text-xs sm:text-lg 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.data.subtitle} 
-            onChange={event => props.handleDataChange('subtitle', event)} />
-        </div>
-    );
+const Subtitle = props => {
+  return (
+    <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">
+        Subtitle
+      </div>
+      <input
+        id="subtitle"
+        className="w-full text-xs sm:text-lg 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.data.subtitle}
+        onChange={event => props.handleDataChange("subtitle", event)}
+      />
+    </div>
+  )
 }
 
-export default Subtitle;
+export default Subtitle

src/components/title.js

@@ -1,19 +1,28 @@
-import React from 'react';
+import React from "react"
 
-const Title = (props) => {
-    return (
-        <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 id="title-prefix"
-                    className="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"
-                    value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
-                <input id="title-name" placeholder="name" className="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" 
-                value={props.data.title}
-                    onChange={event => props.handleDataChange('title', event)} />
-            </div>
-        </div>
-    );
+const Title = props => {
+  return (
+    <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
+          id="title-prefix"
+          className="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"
+          value={props.prefix.title}
+          onChange={event => props.handlePrefixChange("title", event)}
+        />
+        <input
+          id="title-name"
+          placeholder="name"
+          className="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"
+          value={props.data.title}
+          onChange={event => props.handleDataChange("title", event)}
+        />
+      </div>
+    </div>
+  )
 }
 
-export default Title;
+export default Title

src/constants/page-links.js

@@ -1,7 +1,7 @@
 const links = {
-    home: '/',
-    about: '/about',
-    addons: '/addons',
-    support: '/support'
+  home: "/",
+  about: "/about",
+  addons: "/addons",
+  support: "/support",
 }
-export default links
+export default links

src/constants/skills.js

@@ -352,13 +352,16 @@ const icons = {
   qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
   wx_widgets:
     "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
-  ember: "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
+  ember:
+    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
 }
 
 const initialSkillState = {}
 
-const skillsArray = Object.keys(categorizedSkills).map(key => categorizedSkills[key].skills);
-const skills = [].concat.apply([], skillsArray).sort();
+const skillsArray = Object.keys(categorizedSkills).map(
+  key => categorizedSkills[key].skills
+)
+const skills = [].concat.apply([], skillsArray).sort()
 
 skills.forEach(skill => {
   initialSkillState[skill] = false

src/html.js

@@ -12,7 +12,17 @@ export default function HTML(props) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         {props.headComponents}
-        <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Loved the tool🚀. Buy me a coffee to support the work!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
+        <script
+          data-name="BMC-Widget"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="rahuldkjain"
+          data-description="Support me on Buy me a coffee!"
+          data-message="Loved the tool🚀. Buy me a coffee to support the work!"
+          data-color="#FF813F"
+          data-position=""
+          data-x_margin="18"
+          data-y_margin="18"
+        ></script>
       </head>
       <body {...props.bodyAttributes}>
         {props.preBodyComponents}

src/markdown-pages/about.md

@@ -3,6 +3,7 @@ slug: "/about"
 date: "2019-05-04"
 title: "👨‍💻 About"
 ---
+
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
 <img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
 </a>
@@ -16,6 +17,7 @@ The profile should be neat and minimal to give a clear overview of the work. Non
 To solve this, GitHub Profile README Generator came into existence.
 
 So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
+
 <p align="left">
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
 <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
@@ -27,24 +29,29 @@ So many developers contributed to the project and made it more awesome to use. Y
 </p>
 
 ### Contributors 🙏
+
 List of the developers who contributed to the project. A big shout out for them.
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
-  <img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
+<img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
 </a>
+
 <hr/>
 
 ## How do I create a profile README?
+
 The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is **rahuldkjain** so I created a new repository with the name **rahuldkjain**. Note: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username.
+
 1. Create a new repository with the same name (including casing) as your GitHub username: https://github.com/new
 
 2. Create a README.md file inside the new repo with content (text, GIFs, images, emojis, etc.)
 
 3. Commit your fancy new README!
-    - If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile)
+   - If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile)
 4. Push changes to GitHub (if you made changes locally i.e., on your computer and not github.com)
 <hr/>
 
 ## How to use?
+
 Tired of editing profile README(.md) to add new features like visitors-count badge, github-stats etc?
 
 Don't worry. Keep calm, fill the form and let the tool do the work for you
@@ -55,6 +62,7 @@ alt="github profile readme generator" width="320" /><br/><br/>
 <hr/>
 
 ## Why visitors count keeps on increasing?
+
 So many users raised an issue that the counter keeps on increasing everytime the page reloads.
 
 Well it is visitors count not "unique" visitors count. The goal of the addon is to provide a good stat of how well the github profile is doing.

src/markdown-pages/addons.md

@@ -7,14 +7,17 @@ title: "🚀 Addons"
 GitHub Profile README Generator tool uses few open-source addons developed by other developers. Including such features makes the tool useful. The developers of this tool is very grateful to use these awesome addons.
 
 ## [GitHub README Stats](https://github.com/anuraghazra/github-readme-stats)
+
 ⚡️ Dynamically generated stats for your github readmes
 
 #### GitHub Stats Card
+
 <a href="https://github.com/rahuldkjain" target="blank">
   <img src="https://github-readme-stats.vercel.app/api?username=rahuldkjain&show_icons=true" width="320" alt="Rahul's github stats"/>
 </a>
 
 #### Top Skills Card
+
 <a href="https://github.com/rahuldkjain" target="blank">
   <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=rahuldkjain&layout=compact&hide=html" width="320" alt="Rahul's github top skills"/>
 </a>
@@ -26,7 +29,8 @@ You can customize the theme too. See how to customize yours [here](https://githu
 <br/>
 
 ## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)
-It counts how many times your GitHub profile has been viewed. Free cloud micro-service.  
+
+It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
 
 ![rahuldkjain](https://komarev.com/ghpvc/?username=rahuldkjain&style=flat-square)
 
@@ -37,27 +41,34 @@ You can customize the color, label and style too. See how to customize [here](ht
 <br/>
 
 ## [Dynamic Latest Blog Posts](https://github.com/gautamkrishnar/blog-post-workflow)
+
 Show your latest blog posts from any sources(like dev(.)to, medium etc) or StackOverflow activity on your GitHub profile/project readme automatically using the RSS feed.
 
 <img src="https://user-images.githubusercontent.com/8397274/88047382-29b8b280-cb6f-11ea-9efb-2af2b10f3e0c.png" width="320" alt="dynamic latest blog example"/>
 
 Developed by [Gautam Krishna R](https://github.com/gautamkrishnar)
+
 ### How to use
+
 - Go to your repository
-- Add the following section to your **README.md** file, you can give whatever title you want. Just make sure that you use **<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->** in your readme. The workflow will replace this comment with the actual blog post list: 
+- Add the following section to your **README.md** file, you can give whatever title you want. Just make sure that you use **<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->** in your readme. The workflow will replace this comment with the actual blog post list:
+
 ```markdown
 # Blog posts
+
 <!-- BLOG-POST-LIST:START -->
 <!-- BLOG-POST-LIST:END -->
 ```
+
 - Create a folder named `.github` and create `workflows` folder inside it if it doesn't exist.
 - Create a new file named `blog-post-workflow.yml` with the following contents inside the workflows folder:
+
 ```yaml
 name: Latest blog post workflow
 on:
   schedule:
     # Runs every hour
-    - cron: '0 * * * *'
+    - cron: "0 * * * *"
 jobs:
   update-readme-with-blog:
     name: Update this repo's README with latest blog posts
@@ -72,4 +83,4 @@ jobs:
 - Replace the above url list with your own rss feed urls. See [popular-sources](#popular-sources) for a list of common RSS feed urls.
 - Commit and wait for it to run
 
-To know more, check out the [official github repository](https://github.com/gautamkrishnar/blog-post-workflow)
+To know more, check out the [official github repository](https://github.com/gautamkrishnar/blog-post-workflow)

src/markdown-pages/support.md

@@ -6,7 +6,7 @@ title: "💵 Support OSS"
 
 > Think of giving not as a duty but as a privilege --John D. Rockefeller Hr.
 
-🚀 GitHub Profile README Generator tool is free and will always be free. Numerous developers has put their time and efforts to make this tool more powerful. However, these developers are doing their full time job along with open-source contributions. 
+🚀 GitHub Profile README Generator tool is free and will always be free. Numerous developers has put their time and efforts to make this tool more powerful. However, these developers are doing their full time job along with open-source contributions.
 
 You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.
 
@@ -14,21 +14,23 @@ You can come forward to support the developers by making small donations. You wi
   <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
   </a>
 
-  <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
-  </a>
-  
-  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
-  </a>
+<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
+</a>
+
+<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
+</a>
+
 </p>
 
 ## Social Support 🤝
+
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
 </a>
 
 Let the world know how you feel using this tool. Share with others on twitter.
 
-<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is a great tool to generate customized GitHub profile README: <a href="https://t.co/dTpnz0iTP2">https://t.co/dTpnz0iTP2</a> <a href="https://t.co/WcEkK2DKz0">pic.twitter.com/WcEkK2DKz0</a></p>&mdash; Alisher Abdulkhaev (@alisher_ai) <a href="https://twitter.com/alisher_ai/status/1298858350885576704?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
 
@@ -36,8 +38,7 @@ Let the world know how you feel using this tool. Share with others on twitter.
 
 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>&mdash; Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
 
-
-<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote> 
+<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
 
 <blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>&mdash; Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
 
@@ -45,23 +46,19 @@ Let the world know how you feel using this tool. Share with others on twitter.
 
 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This morning I set up my <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> profile readme, really amazing what great tools the users have already created to make this easier.<br><br>Big shout out to <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a>!<a href="https://t.co/bL0XwfJ78B">https://t.co/bL0XwfJ78B</a> <a href="https://t.co/xBLVFOJegt">pic.twitter.com/xBLVFOJegt</a></p>&mdash; Max Schmitt (@maxibanki) <a href="https://twitter.com/maxibanki/status/1296408691273498624?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote>
 
-<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
-
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 <blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>&mdash; Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
 
-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&amp;ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>&mdash; Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
 
-
-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by ⁦<a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>⁩. <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> ⁦<a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a>⁩ <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&amp;ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>&mdash; Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
 
-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>&mdash; Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>
 
-<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 ## Sponsors 🙇
+
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
 - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.

src/pages/index.css

@@ -69,7 +69,6 @@ a {
   color: var(--dark-purple);
 }
 
-
 .tooltiptext {
   visibility: hidden;
   display: flex;
@@ -109,7 +108,6 @@ a {
 }
 
 @media only screen and (max-width: 1199px) {
-
   .checkbox {
     font-size: 12px;
   }
@@ -128,7 +126,4 @@ a {
   .workflow {
     font-size: 12px;
   }
-
 }
-
-

src/pages/using-typescript.tsx

@@ -13,10 +13,26 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
   <div>
     <SEO title="Using TypeScript" />
     <h1>Gatsby supports TypeScript by default!</h1>
-    <p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
-    <p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
-    <p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
-    <p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
+    <p>
+      This means that you can create and write <em>.ts/.tsx</em> files for your
+      pages, components etc. Please note that the <em>gatsby-*.js</em> files
+      (like gatsby-node.js) currently don't support TypeScript yet.
+    </p>
+    <p>
+      For type checking you'll want to install <em>typescript</em> via npm and
+      run <em>tsc --init</em> to create a <em>.tsconfig</em> file.
+    </p>
+    <p>
+      You're currently on the page "{path}" which was built on{" "}
+      {data.site.buildTime}.
+    </p>
+    <p>
+      To learn more, head over to our{" "}
+      <a href="https://www.gatsbyjs.org/docs/typescript/">
+        documentation about TypeScript
+      </a>
+      .
+    </p>
     <Link to="/">Go back to the homepage</Link>
   </div>
 )

src/templates/blogTemplate.js

@@ -2,32 +2,35 @@ import React from "react"
 import { graphql } from "gatsby"
 // import Header from '../components/header'
 // import Footer from '../components/footer'
-import {Helmet} from "react-helmet";
-import Layout from "../components/layout";
+import { Helmet } from "react-helmet"
+import Layout from "../components/layout"
 
 export default function Template({
-    data, // this prop will be injected by the GraphQL query below.
+  data, // this prop will be injected by the GraphQL query below.
 }) {
-    const { markdownRemark } = data // data.markdownRemark holds your post data
-    const { frontmatter, html } = markdownRemark
-    return (
-        <Layout>
-            <Helmet>
-              <meta charSet="utf-8" />
-              <title>{frontmatter.title}</title>
-              <link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
-            </Helmet>
-            <div className="m-4 sm:p-10">
-                <div className="blog-post">
-                    <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
-                    <div
-                        className="markdown"
-                        dangerouslySetInnerHTML={{ __html: html }}
-                    />
-                </div>
-            </div>
-        </Layout>
-    )
+  const { markdownRemark } = data // data.markdownRemark holds your post data
+  const { frontmatter, html } = markdownRemark
+  return (
+    <Layout>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{frontmatter.title}</title>
+        <link
+          rel="canonical"
+          href={`https://rahuldkjain.github.io/gh-profile-readme-generator`}
+        />
+      </Helmet>
+      <div className="m-4 sm:p-10">
+        <div className="blog-post">
+          <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
+          <div
+            className="markdown"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
+      </div>
+    </Layout>
+  )
 }
 
 export const pageQuery = graphql`
@@ -41,4 +44,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`

src/utils/validation.js

@@ -1,12 +1,12 @@
-const isGitHubUsernameValid = (username) => {
-    var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
-    return pattern.test(username)
+const isGitHubUsernameValid = username => {
+  var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
+  return pattern.test(username)
 }
-const isMediumUsernameValid = (username) => {
-    if (username) {
-        return username[0] === '@'
-    }
-    return true
+const isMediumUsernameValid = username => {
+  if (username) {
+    return username[0] === "@"
+  }
+  return true
 }
 
-export { isGitHubUsernameValid, isMediumUsernameValid };
+export { isGitHubUsernameValid, isMediumUsernameValid }

src/utils/workflows.js

@@ -1,15 +1,25 @@
 import { isMediumUsernameValid } from "../utils/validation"
 
-const latestBlogs = (payload) => {
-    let rssFeed = ''
-    if (payload.dev.show && payload.dev.username && payload.medium.show && payload.medium.username && isMediumUsernameValid(payload.medium.username)) {
-        rssFeed = 'https://dev.to/feed/' + payload.dev.username + ', https://medium.com/feed/' + payload.medium.username
-    } else if(payload.dev.show && payload.dev.username) {
-        rssFeed = 'https://dev.to/feed/' + payload.dev.username
-    } else {
-        rssFeed = 'https://medium.com/feed/' + payload.medium.username
-    }
-    let data = `name: Latest blog post workflow
+const latestBlogs = payload => {
+  let rssFeed = ""
+  if (
+    payload.dev.show &&
+    payload.dev.username &&
+    payload.medium.show &&
+    payload.medium.username &&
+    isMediumUsernameValid(payload.medium.username)
+  ) {
+    rssFeed =
+      "https://dev.to/feed/" +
+      payload.dev.username +
+      ", https://medium.com/feed/" +
+      payload.medium.username
+  } else if (payload.dev.show && payload.dev.username) {
+    rssFeed = "https://dev.to/feed/" + payload.dev.username
+  } else {
+    rssFeed = "https://medium.com/feed/" + payload.medium.username
+  }
+  let data = `name: Latest blog post workflow
 on: 
     schedule:
         - cron: '0 * * * *'
@@ -22,9 +32,9 @@ jobs:
             - uses: gautamkrishnar / blog - post - workflow@master
               with: 
                 max_post_count: "4",
-                feed_list: "${rssFeed}"`;
+                feed_list: "${rssFeed}"`
 
-    return data
+  return data
 }
 
-export { latestBlogs }
+export { latestBlogs }

tailwind.config.js

@@ -3,24 +3,24 @@ module.exports = {
   theme: {
     extend: {},
     fontSize: {
-      'xxs': '.60rem',
-      'xs': '.75rem',
-      'sm': '.875rem',
-      'tiny': '.875rem',
-      'base': '1rem',
-      'lg': '1.125rem',
-      'xl': '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-      '7xl': '5rem',
+      xxs: ".60rem",
+      xs: ".75rem",
+      sm: ".875rem",
+      tiny: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
     },
     fontFamily: {
-      'title': ['Lato', 'sans-serif'],
-      'body': ['Roboto Mono', 'monospace'],
-    }
+      title: ["Lato", "sans-serif"],
+      body: ["Roboto Mono", "monospace"],
+    },
   },
   variants: {},
   plugins: [],