diff --git a/src/components/footer.js b/src/components/footer.js index 03f150a..1fc10e4 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -92,7 +92,7 @@ const Footer = () => {
Join Community
-
+
{ - const Title = props => { - if (props.prefix && props.title) { - return ( - <> - {`

${props.prefix + " " + props.title}

`} -
- - ) - } - return "" - } - const SubTitle = props => { - if (props.subtitle) { - return ( - <> - {`

${props.subtitle}

`} -
-
- - ) - } - return "" - } - const SectionTitle = props => { - if (props.label) { - return ( - <> - {`

${props.label}

`} -
- - ) - } - return "" - } - const DisplayWork = props => { - if (props.prefix && props.project) { - if (props.link) { - return ( - <> - {`- ${props.prefix} [${props.project}](${props.link})`} -
-
- - ) - } else { - return ( - <> - {`- ${props.prefix} **${props.project}**`} -
-
- - ) - } - } - if (props.prefix && props.link) { - return ( - <> - {`- ${props.prefix} [${props.link}](${props.link})`} -
-
- - ) - } - return "" - } - const DisplaySocial = props => { - if (props.username) { - return ( - <> - {`${props.username}`} -
- - ) - } - 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 ( - <> - {`

${props.github}

`} -
-
- - ) - } - return "" - } - const TwitterBadge = props => { - let link = - "https://img.shields.io/twitter/follow/" + - props.twitter + - "?logo=twitter&style=for-the-badge" - if (props.show) { - return ( - <> - {`

${props.twitter}

`} -
-
- - ) - } - return "" - } - const GithubProfileTrophy = props => { - let link = - "https://github-profile-trophy.vercel.app/?username=" + props.github - if (props.show) { - return ( - <> - {`

${props.github}

`} -
-
- - ) - } - return "" - } - const GitHubStats = ({ show, github, options }) => { - if (show) { - return ( - <> - {`

 ${github}

`} -
-
- - ) - } - 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 + <> + {`

${props.prefix + " " + props.title}

`} +
+ ) } - const DisplaySkills = props => { - const listChosenSkills = [] - skills.forEach(skill => { - if (props.skills[skill]) { - listChosenSkills.push( - ` - - ${skill} - - ` - ) - } - }) - return listChosenSkills.length > 0 ? ( + return "" +} +const SubTitle = props => { + if (props.subtitle) { + return ( <> - - {`

${listChosenSkills.join(" ")}

`} + {`

${props.subtitle}

`}

- ) : ( - "" ) } - const DisplayDynamicBlogs = props => { - if (props.show) { + return "" +} +const SectionTitle = props => { + if (props.label) { + return ( + <> + {`

${props.label}

`} +
+ + ) + } + return "" +} +const DisplayWork = props => { + if (props.prefix && props.project) { + if (props.link) { return ( <> - {`### Blogs posts`} + {`- ${props.prefix} [${props.project}](${props.link})`} +
+
+ + ) + } else { + return ( + <> + {`- ${props.prefix} **${props.project}**`}
- {``}
- {``} -

) } - return "" } - const DisplayTopLanguages = props => { - if (props.show) { - if (!props.showStats) { - return ( - <> - {`

${props.github}

`} -
-
- - ) - } + if (props.prefix && props.link) { + return ( + <> + {`- ${props.prefix} [${props.link}](${props.link})`} +
+
+ + ) + } + return "" +} +const DisplaySocial = props => { + if (props.username) { + return ( + <> + {`${props.username}`} +
+ + ) + } + 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 ( + <> + {`

${props.github}

`} +
+
+ + ) + } + return "" +} +const TwitterBadge = props => { + let link = + "https://img.shields.io/twitter/follow/" + + props.twitter + + "?logo=twitter&style=for-the-badge" + if (props.show) { + return ( + <> + {`

${props.twitter}

`} +
+
+ + ) + } + return "" +} +const GithubProfileTrophy = props => { + let link = + "https://github-profile-trophy.vercel.app/?username=" + props.github + if (props.show) { + return ( + <> + {`

${props.github}

`} +
+
+ + ) + } + return "" +} +const GitHubStats = ({ show, github, options }) => { + if (show) { + return ( + <> + {`

 ${github}

`} +
+
+ + ) + } + 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( + ` + + ${skill} + + ` + ) + } + }) + return listChosenSkills.length > 0 ? ( + <> + + {`

${listChosenSkills.join(" ")}

`} +
+
+ + ) : ( + "" + ) +} +const DisplayDynamicBlogs = props => { + if (props.show) { + return ( + <> + {`### Blogs posts`} +
+ {``} +
+ {``} +

+ + ) + } + return "" +} +const DisplayTopLanguages = props => { + if (props.show) { + if (!props.showStats) { return ( <> - {`

${props.github}

`} @@ -237,23 +224,57 @@ const Markdown = props => { ) } - return "" + return ( + <> + {`

${props.github}

`} +
+
+ + ) } - const DisplayStreakStats = props => { - if (props.show) { - return ( - <> - {`

${props.github}

`} -
-
- - ) + return "" +} +const DisplayStreakStats = props => { + if (props.show) { + return ( + <> + {`

${props.github}

`} +
+
+ + ) + } + return "" +} +const DisplaySupport = props => { + let viewSupport = false + Object.keys(props.support).forEach(key => { + if (props.support[key]) { + viewSupport = true } - return "" - } + }) + return viewSupport ? ( +
+ + {`

`} + {props.support.buyMeACoffee && + ` + ${props.support.buyMeACoffee}`} + {`



`} +
+
+
+ ) : ( + "" + ) +} +const Markdown = props => { return (
<> @@ -524,6 +545,9 @@ const Markdown = props => { <> + <> + + <> { @@ -299,10 +299,7 @@ export const GitHubStatsPreview = ({ github, options, show }) => { if (show) { return (
- {github} + {github}
) } @@ -327,10 +324,7 @@ export const StreakStatsPreview = ({ github, options, show }) => { if (show) { return (
- {github} + {github}
) } @@ -342,10 +336,14 @@ export const SkillsPreview = props => { skills.forEach(skill => { if (props.skills[skill]) { listSkills.push( - + {skill} @@ -359,12 +357,39 @@ export const SkillsPreview = props => { {listSkills}
) : ( - "" - ) + "" + ) +} + +export const SupportPreview = props => { + let viewSupport = false + Object.keys(props.support).forEach(key => { + if (props.support[key]) { + viewSupport = true + } + }) + return ( +
+ + {props.support.buyMeACoffee && ( + + )} +
+ ) } const MarkdownPreview = props => { - return (
@@ -389,6 +414,7 @@ const MarkdownPreview = props => { +
{ + return ( +
+
+ Support +
+
+
+ buymeacoffee + props.handleSupportChange("buyMeACoffee", event)} + /> +
+
+
+ ) +} + +export default Support diff --git a/src/constants/defaults.js b/src/constants/defaults.js new file mode 100644 index 0000000..00b2670 --- /dev/null +++ b/src/constants/defaults.js @@ -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: "" +} diff --git a/src/pages/index.js b/src/pages/index.js index 608f57c..394c5bf 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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} /> +
{(data.visitorsBadge || data.githubProfileTrophy || data.githubStats || - data.topLanguages || + data.topLanguages || data.streakStats) && !social.github ? (
@@ -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} /> ) : ( ""