[add]: buymeacoffee support

2020-12-04 16:34:31 +05:30
parent d9469f4eda
commit ec78c6ba05
6 changed files with 444 additions and 338 deletions
@@ -92,7 +92,7 @@ const Footer = () => {
          <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
            <strong>Join Community</strong>
          </div>
-          <div class="ml-2 sm:ml-0">
+          <div className="ml-2 sm:ml-0">
            <a
              href="https://discord.gg/HHMs7Eg"
              aria-label="Discord of the community"
@@ -4,231 +4,218 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
  githubStatsLinkGenerator,
  topLanguagesLinkGenerator,
-  streakStatsLinkGenerator
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"
-
-const Markdown = props => {
-  const Title = props => {
-    if (props.prefix && props.title) {
-      return (
-        <>
-          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const SubTitle = props => {
-    if (props.subtitle) {
-      return (
-        <>
-          {`<h3 align="center">${props.subtitle}</h3>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const SectionTitle = props => {
-    if (props.label) {
-      return (
-        <>
-          {`<h3 align="left">${props.label}</h3>`}
-          <br />
-        </>
-      )
-    }
-    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 />
-          </>
-        )
-      }
-    }
-    if (props.prefix && props.link) {
-      return (
-        <>
-          {`- ${props.prefix} [${props.link}](${props.link})`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    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="40" /></a>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const VisitorsBadge = props => {
-    let link =
-      "https://komarev.com/ghpvc/?username=" +
-      props.github +
-      `&label=${props.badgeOptions.badgeLabel}` +
-      `&color=${props.badgeOptions.badgeColor}` +
-      `&style=${props.badgeOptions.badgeStyle}`
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const TwitterBadge = props => {
-    let link =
-      "https://img.shields.io/twitter/follow/" +
-      props.twitter +
-      "?logo=twitter&style=for-the-badge"
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const GithubProfileTrophy = props => {
-    let link =
-      "https://github-profile-trophy.vercel.app/?username=" + props.github
-    if (props.show) {
-      return (
-        <>
-          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const GitHubStats = ({ show, github, options }) => {
-    if (show) {
-      return (
-        <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
-            github: github,
-            options,
-          })}" alt="${github}" /></p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const isSocial = social => {
+const Title = props => {
+  if (props.prefix && props.title) {
    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 ||
-      social.discord ||
-      social.rssurl
+      <>
+        {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+        <br />
+      </>
    )
  }
-  const DisplaySkills = props => {
-    const listChosenSkills = []
-    skills.forEach(skill => {
-      if (props.skills[skill]) {
-        listChosenSkills.push(
-          `
-          <a href="${skillWebsites[skill]}" target="_blank">
-            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
-          </a>
-          `
-        )
-      }
-    })
-    return listChosenSkills.length > 0 ? (
+  return ""
+}
+const SubTitle = props => {
+  if (props.subtitle) {
+    return (
      <>
-        <SectionTitle label="Languages and Tools:" />
-        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        {`<h3 align="center">${props.subtitle}</h3>`}
        <br />
        <br />
      </>
-    ) : (
-      ""
    )
  }
-  const DisplayDynamicBlogs = props => {
-    if (props.show) {
+  return ""
+}
+const SectionTitle = props => {
+  if (props.label) {
+    return (
+      <>
+        {`<h3 align="left">${props.label}</h3>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayWork = props => {
+  if (props.prefix && props.project) {
+    if (props.link) {
      return (
        <>
-          {`### Blogs posts`}
+          {`- ${props.prefix} [${props.project}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
+    } else {
+      return (
+        <>
+          {`- ${props.prefix} **${props.project}**`}
          <br />
-          {`<!-- BLOG-POST-LIST:START -->`}
          <br />
-          {`<!-- BLOG-POST-LIST:END -->`}
-          <br /> <br />
        </>
      )
    }
-    return ""
  }
-  const DisplayTopLanguages = props => {
-    if (props.show) {
-      if (!props.showStats) {
-        return (
-          <>
-            {`<p><img align="center" src="${topLanguagesLinkGenerator({
-              github: props.github,
-              options: props.options,
-            })}" alt="${props.github}" /></p>`}
-            <br />
-            <br />
-          </>
-        )
-      }
+  if (props.prefix && props.link) {
+    return (
+      <>
+        {`- ${props.prefix} [${props.link}](${props.link})`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  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="40" /></a>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const VisitorsBadge = props => {
+  let link =
+    "https://komarev.com/ghpvc/?username=" +
+    props.github +
+    `&label=${props.badgeOptions.badgeLabel}` +
+    `&color=${props.badgeOptions.badgeColor}` +
+    `&style=${props.badgeOptions.badgeStyle}`
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const TwitterBadge = props => {
+  let link =
+    "https://img.shields.io/twitter/follow/" +
+    props.twitter +
+    "?logo=twitter&style=for-the-badge"
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GithubProfileTrophy = props => {
+  let link =
+    "https://github-profile-trophy.vercel.app/?username=" + props.github
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GitHubStats = ({ show, github, options }) => {
+  if (show) {
+    return (
+      <>
+        {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+          github: github,
+          options,
+        })}" alt="${github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+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 ||
+    social.discord ||
+    social.rssurl
+  )
+}
+const DisplaySkills = props => {
+  const listChosenSkills = []
+  skills.forEach(skill => {
+    if (props.skills[skill]) {
+      listChosenSkills.push(
+        `
+        <a href="${skillWebsites[skill]}" target="_blank">
+          <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
+        </a>
+        `
+      )
+    }
+  })
+  return listChosenSkills.length > 0 ? (
+    <>
+      <SectionTitle label="Languages and Tools:" />
+      {`<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 => {
+  if (props.show) {
+    if (!props.showStats) {
      return (
        <>
-          {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          {`<p><img align="center" src="${topLanguagesLinkGenerator({
            github: props.github,
            options: props.options,
          })}" alt="${props.github}" /></p>`}
@@ -237,23 +224,57 @@ const Markdown = props => {
        </>
      )
    }
-    return ""
+    return (
+      <>
+        {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
  }
-  const DisplayStreakStats = props => {
-    if (props.show) {
-      return (
-        <>
-          {`<p><img align="center" src="${streakStatsLinkGenerator({
-            github: props.github,
-            options: props.options,
-          })}" alt="${props.github}" /></p>`}
-          <br />
-          <br />
-        </>
-      )
+  return ""
+}
+const DisplayStreakStats = props => {
+  if (props.show) {
+    return (
+      <>
+        {`<p><img align="center" src="${streakStatsLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySupport = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
    }
-    return ""
-  }
+  })
+  return viewSupport ? (
+    <div>
+      <SectionTitle label="Support:" />
+      {`<p>`}
+      {props.support.buyMeACoffee &&
+        `<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
+      <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
+      {`</p><br><br>`}
+      <br />
+      <br />
+    </div>
+  ) : (
+    ""
+  )
+}
+const Markdown = props => {
  return (
    <div id="markdown-content" className="break-words">
      <>
@@ -524,6 +545,9 @@ const Markdown = props => {
      <>
        <DisplaySkills skills={props.skills} />
      </>
+      <>
+        <DisplaySupport support={props.support} />
+      </>
      <>
        <DisplayTopLanguages
          show={props.data.topLanguages}
@@ -3,7 +3,7 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
  githubStatsLinkGenerator,
  topLanguagesLinkGenerator,
-  streakStatsLinkGenerator
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"

 export const TitlePreview = props => {
@@ -299,10 +299,7 @@ export const GitHubStatsPreview = ({ github, options, show }) => {
  if (show) {
    return (
      <div className="text-center mx-4 mb-4">
-        <img
-          src={githubStatsLinkGenerator({ github, options })}
-          alt={github}
-        />
+        <img src={githubStatsLinkGenerator({ github, options })} alt={github} />
      </div>
    )
  }
@@ -327,10 +324,7 @@ export const StreakStatsPreview = ({ github, options, show }) => {
  if (show) {
    return (
      <div className="text-center mx-4 mb-4">
-        <img
-          src={streakStatsLinkGenerator({ github, options })}
-          alt={github}
-        />
+        <img src={streakStatsLinkGenerator({ github, options })} alt={github} />
      </div>
    )
  }
@@ -342,10 +336,14 @@ export const SkillsPreview = props => {
  skills.forEach(skill => {
    if (props.skills[skill]) {
      listSkills.push(
-        <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
+        <a
+          href={skillWebsites[skill]}
+          key={skill}
+          target="_blank"
+          rel="noreferrer"
+        >
          <img
            className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
-            key={skill}
            src={icons[skill]}
            alt={skill}
          />
@@ -359,12 +357,39 @@ export const SkillsPreview = props => {
      {listSkills}
    </div>
  ) : (
-      ""
-    )
+    ""
+  )
+}
+
+export const SupportPreview = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return (
+    <div className="mb-4">
+      <SectionTitle label="Support:" visible={viewSupport} />
+      {props.support.buyMeACoffee && (
+        <div style={{ width: "210px" }}>
+          <a
+            href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
+            target="_blank"
+          >
+            <img
+              src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+              alt="Buy Me A Coffee"
+              className="w-36 h-8 sm:w-52 sm:h-12"
+            />
+          </a>
+        </div>
+      )}
+    </div>
+  )
 }

 const MarkdownPreview = props => {
-
  return (
    <div id="markdown-preview">
      <TitlePreview prefix={props.prefix.title} title={props.data.title} />
@@ -389,6 +414,7 @@ const MarkdownPreview = props => {
      <WorkPreview work={props} />
      <SocialPreview social={props.social} />
      <SkillsPreview skills={props.skills} />
+      <SupportPreview support={props.support} />
      <div className="block sm:flex sm:justify-center sm:items-start">
        <TopLanguagesPreview
          show={props.data.topLanguages}
@@ -0,0 +1,29 @@
+import React from "react"
+
+const Support = 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">
+        Support
+      </div>
+      <div className="flex flex-wrap justify-start items-center">
+        <div className="w-2/5 flex justify-between items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+            className="w-36 h-8 sm:w-52 sm:h-12"
+            alt="buymeacoffee"
+          />
+          <input
+            id="buy-me-a-coffee"
+            placeholder="buymeacoffee username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            value={props.support.buyMeACoffee || ""}
+            onChange={event => props.handleSupportChange("buyMeACoffee", event)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Support
@@ -0,0 +1,97 @@
+export const DEFAULT_PREFIX = {
+  title: "Hi 👋, I'm",
+  currentWork: "🔭 I’m currently working on",
+  currentLearn: "🌱 I’m currently learning",
+  collaborateOn: "👯 I’m looking to collaborate on",
+  helpWith: "🤝 I’m looking for help with",
+  ama: "💬 Ask me about",
+  contact: "📫 How to reach me",
+  resume: "📄 Know about my experiences",
+  funFact: "⚡ Fun fact",
+  portfolio: "👨‍💻 All of my projects are available at",
+  blog: "📝 I regularly write articles on",
+}
+
+export const DEFAULT_DATA = {
+  title: "",
+  subtitle: "A passionate frontend developer from India",
+  currentWork: "",
+  currentLearn: "",
+  collaborateOn: "",
+  helpWith: "",
+  ama: "",
+  contact: "",
+  funFact: "",
+  twitterBadge: false,
+  visitorsBadge: false,
+  badgeStyle: "flat",
+  badgeColor: "0e75b6",
+  badgeLabel: "Profile views",
+  githubProfileTrophy: false,
+  githubStats: false,
+  githubStatsOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  topLanguages: false,
+  topLanguagesOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  streakStats: false,
+  streakStatsOptions: {
+    theme: "",
+  },
+  devDynamicBlogs: false,
+  mediumDynamicBlogs: false,
+  rssDynamicBlogs: false,
+}
+
+export const DEFAULT_LINK = {
+  currentWork: "",
+  collaborateOn: "",
+  helpWith: "",
+  portfolio: "",
+  blog: "",
+  resume: "",
+}
+
+export const DEFAULT_SOCIAL = {
+  github: "",
+  dev: "",
+  linkedin: "",
+  codepen: "",
+  stackoverflow: "",
+  kaggle: "",
+  codesandbox: "",
+  fb: "",
+  instagram: "",
+  twitter: "",
+  dribbble: "",
+  behance: "",
+  medium: "",
+  youtube: "",
+  codechef: "",
+  hackerrank: "",
+  codeforces: "",
+  leetcode: "",
+  topcoder: "",
+  hackerearth: "",
+  geeks_for_geeks: "",
+  discord: "",
+  rssurl: "",
+}
+
+export const DEFAULT_SUPPORT = {
+    buyMeACoffee: ""
+}
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
+import gsap from "gsap"
 import MarkdownPreview from "../components/markdownPreview"
 import Markdown from "../components/markdown"
-// import Header from "../components/header"
 import Title from "../components/title"
 import Subtitle from "../components/subtitle"
 import Work from "../components/work"
@@ -9,10 +9,11 @@ import Social from "../components/social"
 import Addons from "../components/addons"
 import Skills from "../components/skills"
 import Donate from "../components/donate"
+import Support from "../components/support"
 import { initialSkillState } from "../constants/skills"
-import gsap from "gsap"
 import Loader from "../components/loader"
-// import Footer from "../components/footer"
+import SEO from "../components/seo"
+import Layout from "../components/layout"
 import "./index.css"
 import {
  ArrowLeftIcon,
@@ -23,109 +24,20 @@ import {
  MarkdownIcon,
  FileCodeIcon,
 } from "@primer/octicons-react"
-import SEO from "../components/seo"
 import {
  isGitHubUsernameValid,
  isMediumUsernameValid,
  isTwitterUsernameValid,
 } from "../utils/validation"
-import Layout from "../components/layout"
+import {
+  DEFAULT_PREFIX,
+  DEFAULT_DATA,
+  DEFAULT_LINK,
+  DEFAULT_SOCIAL,
+  DEFAULT_SUPPORT,
+} from "../constants/defaults"

-const DEFAULT_PREFIX = {
-  title: "Hi 👋, I'm",
-  currentWork: "🔭 I’m currently working on",
-  currentLearn: "🌱 I’m currently learning",
-  collaborateOn: "👯 I’m looking to collaborate on",
-  helpWith: "🤝 I’m looking for help with",
-  ama: "💬 Ask me about",
-  contact: "📫 How to reach me",
-  resume: "📄 Know about my experiences",
-  funFact: "⚡ Fun fact",
-  portfolio: "👨‍💻 All of my projects are available at",
-  blog: "📝 I regulary write articles on",
-}
-
-const DEFAULT_DATA = {
-  title: "",
-  subtitle: "A passionate frontend developer from India",
-  currentWork: "",
-  currentLearn: "",
-  collaborateOn: "",
-  helpWith: "",
-  ama: "",
-  contact: "",
-  funFact: "",
-  twitterBadge: false,
-  visitorsBadge: false,
-  badgeStyle: "flat",
-  badgeColor: "0e75b6",
-  badgeLabel: "Profile views",
-  githubProfileTrophy: false,
-  githubStats: false,
-  githubStatsOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  topLanguages: false,
-  topLanguagesOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  streakStats: false,
-  streakStatsOptions: {
-    theme: "",
-  },
-  devDynamicBlogs: false,
-  mediumDynamicBlogs: false,
-  rssDynamicBlogs: false,
-}
-
-const DEFAULT_LINK = {
-  currentWork: "",
-  collaborateOn: "",
-  helpWith: "",
-  portfolio: "",
-  blog: "",
-  resume: "",
-}
-
-const DEFAULT_SOCIAL = {
-  github: "",
-  dev: "",
-  linkedin: "",
-  codepen: "",
-  stackoverflow: "",
-  kaggle: "",
-  codesandbox: "",
-  fb: "",
-  instagram: "",
-  twitter: "",
-  dribbble: "",
-  behance: "",
-  medium: "",
-  youtube: "",
-  codechef: "",
-  hackerrank: "",
-  codeforces: "",
-  leetcode: "",
-  topcoder: "",
-  hackerearth: "",
-  geeks_for_geeks: "",
-  discord: "",
-  rssurl: "",
-}
-
-const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
+const KeepCacheUpdated = ({ prefix, data, link, social, skills, support }) => {
  useEffect(() => {
    localStorage.setItem(
      "cache",
@@ -135,9 +47,10 @@ const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
        link,
        social,
        skills,
+        support,
      })
    )
-  }, [prefix, data, link, social, skills])
+  }, [prefix, data, link, social, skills, support])
 }

 const DEFAULT_SKILLS = initialSkillState
@@ -148,6 +61,7 @@ const IndexPage = () => {
  const [link, setLink] = useState(DEFAULT_LINK)
  const [social, setSocial] = useState(DEFAULT_SOCIAL)
  const [skills, setSkills] = useState(DEFAULT_SKILLS)
+  const [support, setSupport] = useState(DEFAULT_SUPPORT)

  const [restore, setRestore] = useState("")
  const [generatePreview, setGeneratePreview] = useState(false)
@@ -194,6 +108,12 @@ const IndexPage = () => {
    setSocial(change)
  }

+  const handleSupportChange = (field, e) => {
+    let change = { ...support }
+    change[field] = e.target.value
+    setSupport(change)
+  }
+
  const handleCheckChange = field => {
    let change = { ...data }
    change[field] = !change[field]
@@ -415,6 +335,10 @@ const IndexPage = () => {
      cache.skills
    )
    setSkills(cacheSkills || DEFAULT_SKILLS)
+
+    setSupport(
+      cache.support ? { ...DEFAULT_SUPPORT, ...cache.support } : DEFAULT_SUPPORT
+    )
  }

  useEffect(() => {
@@ -435,7 +359,7 @@ const IndexPage = () => {
  }, [])

  // keep cache updated
-  KeepCacheUpdated({ prefix, data, link, social, skills })
+  KeepCacheUpdated({ prefix, data, link, social, skills, support })

  const handleResetForm = () => {
    setPrefix(DEFAULT_PREFIX)
@@ -521,11 +445,15 @@ const IndexPage = () => {
            handleCheckChange={handleCheckChange}
            handleDataChange={handleDataChange}
          />
+          <Support
+            support={support}
+            handleSupportChange={handleSupportChange}
+          />
          <div className="section">
            {(data.visitorsBadge ||
              data.githubProfileTrophy ||
              data.githubStats ||
-              data.topLanguages || 
+              data.topLanguages ||
              data.streakStats) &&
            !social.github ? (
              <div className="warning">
@@ -676,6 +604,7 @@ const IndexPage = () => {
                    link={link}
                    social={social}
                    skills={skills}
+                    support={support}
                  />
                ) : (
                  ""
@@ -687,6 +616,7 @@ const IndexPage = () => {
                    link={link}
                    social={social}
                    skills={skills}
+                    support={support}
                  />
                ) : (
                  ""