Fork on GitHub
@@ -89,3 +81,6 @@ const Header = (props) => {
};
export default Header;
+Header.propTypes = {
+ heading: PropTypes.string.isRequired,
+};
diff --git a/src/components/layout.js b/src/components/layout.js
deleted file mode 100644
index 53435748..00000000
--- a/src/components/layout.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import Header from './header';
-import Footer from './footer';
-
-const Layout = ({ children }) => {
- return (
-
-
- {children}
-
-
- );
-};
-export default Layout;
diff --git a/src/components/layout.jsx b/src/components/layout.jsx
new file mode 100644
index 00000000..2e8a6ffa
--- /dev/null
+++ b/src/components/layout.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Header from './header';
+import Footer from './footer';
+
+const Layout = ({ children }) => (
+
+
+ {children}
+
+
+);
+export default Layout;
+
+Layout.defaultProps = {
+ children: '',
+};
+
+Layout.propTypes = {
+ children: PropTypes.element,
+};
diff --git a/src/components/loader.js b/src/components/loader.jsx
similarity index 50%
rename from src/components/loader.js
rename to src/components/loader.jsx
index 73abc820..1fcb1609 100644
--- a/src/components/loader.js
+++ b/src/components/loader.jsx
@@ -1,9 +1,10 @@
import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';
+
const Loader = () => {
- let arrow = useRef([]);
+ const arrow = useRef([]);
useEffect(() => {
- var tl = new gsap.timeline({ repeat: -1 });
+ const tl = gsap.timeline({ repeat: -1 });
tl.fromTo(
arrow.current,
{
@@ -16,7 +17,7 @@ const Loader = () => {
stagger: 0.1,
duration: 0.5,
ease: 'Linear.easeNone',
- }
+ },
);
tl.add('cp');
tl.fromTo(
@@ -32,16 +33,46 @@ const Loader = () => {
duration: 0.5,
ease: 'Linear.easeNone',
},
- 'cp-=0.3'
+ 'cp-=0.3',
);
});
return (
- (arrow.current[0] = el)}>↓
- (arrow.current[1] = el)}>↓
- (arrow.current[2] = el)}>↓
- (arrow.current[3] = el)}>↓
- (arrow.current[4] = el)}>↓
+ {
+ arrow.current[0] = el;
+ }}
+ >
+ ↓
+
+ {
+ arrow.current[1] = el;
+ }}
+ >
+ ↓
+
+ {
+ arrow.current[2] = el;
+ }}
+ >
+ ↓
+
+ {
+ arrow.current[3] = el;
+ }}
+ >
+ ↓
+
+ {
+ arrow.current[4] = el;
+ }}
+ >
+ ↓
+
);
};
diff --git a/src/components/markdown.js b/src/components/markdown.js
deleted file mode 100644
index 5e769e3a..00000000
--- a/src/components/markdown.js
+++ /dev/null
@@ -1,521 +0,0 @@
-import React from 'react';
-import { isMediumUsernameValid } from '../utils/validation';
-import { icons, skills, skillWebsites } from '../constants/skills';
-import {
- githubStatsLinkGenerator,
- topLanguagesLinkGenerator,
- streakStatsLinkGenerator,
-} from '../utils/link-generators';
-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 (
- <>
- {`
`}
-
-
- );
- }
- 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 (
- <>
- {`
`}
-
-
-
- );
- }
- return '';
-};
-const TwitterBadge = (props) => {
- let link = 'https://img.shields.io/twitter/follow/' + props.twitter + '?logo=twitter&style=for-the-badge';
- if (props.show) {
- return (
- <>
- {`
`}
-
-
-
- );
- }
- return '';
-};
-const GithubProfileTrophy = (props) => {
- let link = 'https://github-profile-trophy.vercel.app/?username=' + props.github;
- if (props.show) {
- return (
- <>
- {`
`}
-
-
-
- );
- }
- return '';
-};
-const GitHubStats = ({ show, github, options }) => {
- if (show) {
- return (
- <>
- {`
})
`}
-
-
-
- );
- }
- 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(
- `
-
- 
-
- `
- );
- }
- });
- 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 (
- <>
- {`
})
`}
-
-
-
- );
- }
- return (
- <>
- {`
})
`}
-
-
-
- );
- }
- return '';
-};
-const DisplayStreakStats = (props) => {
- if (props.show) {
- return (
- <>
- {`
})
`}
-
-
-
- );
- }
- return '';
-};
-const DisplaySupport = (props) => {
- let viewSupport = false;
- Object.keys(props.support).forEach((key) => {
- if (props.support[key]) {
- viewSupport = true;
- }
- });
- return viewSupport ? (
-
-
- {`
`}
- {props.support.buyMeACoffee &&
- `
- 
`}
- {props.support.buyMeAKofi &&
- `
- 
`}
- {`
`}
-
-
-
- ) : (
- ''
- );
-};
-const Markdown = (props) => {
- const icon_base_url =
- 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
-
- return (
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- {isSocial(props.social) ? (
- <>
-
- {`
`}
-
- ) : (
- ''
- )}
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- {isSocial(props.social) ? (
- <>
- {`
`}
-
-
-
- ) : (
- ''
- )}
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
- );
-};
-export default Markdown;
diff --git a/src/components/markdown.jsx b/src/components/markdown.jsx
new file mode 100644
index 00000000..27a4501c
--- /dev/null
+++ b/src/components/markdown.jsx
@@ -0,0 +1,685 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isMediumUsernameValid } from '../utils/validation';
+import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
+import { githubStatsLinkGenerator, topLanguagesLinkGenerator, streakStatsLinkGenerator } from '../utils/link-generators';
+import { DEFAULT_DATA, DEFAULT_LINK, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
+
+const Title = (props) => {
+ const { prefix, title } = props;
+ if (prefix && title) {
+ return (
+ <>
+ {`
${`${prefix} ${title}`}
`}
+
+
+ );
+ }
+ return '';
+};
+
+Title.propTypes = {
+ prefix: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+};
+
+const SubTitle = (props) => {
+ const { subtitle } = props;
+ if (subtitle) {
+ return (
+ <>
+ {`
${subtitle}
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+SubTitle.propTypes = {
+ subtitle: PropTypes.string.isRequired,
+};
+
+const SectionTitle = (props) => {
+ const { label } = props;
+ if (label) {
+ return (
+ <>
+ {`
${label}
`}
+
+
+ );
+ }
+ return '';
+};
+
+SectionTitle.propTypes = {
+ label: PropTypes.string.isRequired,
+};
+
+const DisplayWork = (props) => {
+ const { prefix, project, link } = props;
+ if (prefix && project) {
+ if (link) {
+ return (
+ <>
+ {`- ${prefix} [${project}](${link})`}
+
+
+
+ );
+ }
+ return (
+ <>
+ {`- ${prefix} **${project}**`}
+
+
+
+ );
+ }
+ if (prefix && link) {
+ return (
+ <>
+ {`- ${prefix} [${link}](${link})`}
+
+
+
+ );
+ }
+ return '';
+};
+
+DisplayWork.defaultProps = {
+ prefix: '',
+ project: '',
+ link: '',
+};
+
+DisplayWork.propTypes = {
+ prefix: PropTypes.string,
+ project: PropTypes.string,
+ link: PropTypes.string,
+};
+
+const DisplaySocial = (props) => {
+ const { username, base, icon } = props;
+ if (username) {
+ return (
+ <>
+ {`
`}
+
+
+ );
+ }
+ return '';
+};
+
+DisplaySocial.propTypes = {
+ username: PropTypes.string.isRequired,
+ base: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired,
+};
+
+const VisitorsBadge = (props) => {
+ const { github, badgeOptions, show } = props;
+ const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
+ if (show) {
+ return (
+ <>
+ {`
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+VisitorsBadge.defaultProps = {
+ badgeOptions: {
+ badgeLabel: '',
+ badgeColor: '',
+ badgeStyle: '',
+ },
+};
+
+VisitorsBadge.propTypes = {
+ github: PropTypes.string.isRequired,
+ badgeOptions: {
+ badgeLabel: PropTypes.string.isRequired,
+ badgeColor: PropTypes.string.isRequired,
+ badgeStyle: PropTypes.string.isRequired,
+ },
+ show: PropTypes.bool.isRequired,
+};
+
+const TwitterBadge = (props) => {
+ const { twitter, show, base } = props;
+ const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
+ if (show) {
+ return (
+ <>
+ {`
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+TwitterBadge.propTypes = {
+ twitter: PropTypes.string.isRequired,
+ base: PropTypes.string.isRequired,
+ show: PropTypes.bool.isRequired,
+};
+
+const GithubProfileTrophy = (props) => {
+ const { show, github } = props;
+ const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
+ if (show) {
+ return (
+ <>
+ {`
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+GithubProfileTrophy.propTypes = {
+ github: PropTypes.string.isRequired,
+ show: PropTypes.bool.isRequired,
+};
+
+const GitHubStats = (props) => {
+ const { show, github, options } = props;
+ if (show) {
+ return (
+ <>
+ {`
})
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+GitHubStats.defaultProps = {
+ options: {
+ theme: '',
+ titleColor: '',
+ textColor: '',
+ bgColor: '',
+ hideBorder: '',
+ cacheSeconds: 0,
+ locale: '',
+ },
+};
+
+GitHubStats.propTypes = {
+ github: PropTypes.string.isRequired,
+ options: {
+ theme: PropTypes.string,
+ titleColor: PropTypes.string,
+ textColor: PropTypes.string,
+ bgColor: PropTypes.string,
+ hideBorder: PropTypes.string,
+ cacheSeconds: PropTypes.number,
+ locale: PropTypes.string,
+ },
+ show: PropTypes.bool.isRequired,
+};
+
+const isSocial = (social) => {
+ let status = false;
+ const SOCIAL_KEYS = Object.keys(DEFAULT_SOCIAL);
+ Object.keys(social).forEach((key) => {
+ if (SOCIAL_KEYS.includes(key)) {
+ status = true;
+ }
+ });
+ return status;
+};
+
+const DisplaySkills = (props) => {
+ const { skills } = props;
+ const listChosenSkills = [];
+ SKILLS.forEach((skill) => {
+ if (skills[skill]) {
+ listChosenSkills.push(
+ `
+
+
+
+ `,
+ );
+ }
+ });
+ return listChosenSkills.length > 0 ? (
+ <>
+
+ {`
${listChosenSkills.join(' ')}
`}
+
+
+
+ ) : (
+ ''
+ );
+};
+
+DisplaySkills.defaultProps = {
+ skills: [],
+};
+
+DisplaySkills.propTypes = {
+ skills: [],
+};
+
+const DisplayDynamicBlogs = (props) => {
+ const { show } = props;
+ if (show) {
+ return (
+ <>
+ ### Blogs posts
+
+ {''}
+
+ {''}
+
+
+
+ );
+ }
+ return '';
+};
+
+DisplayDynamicBlogs.defaultProps = {
+ show: false,
+};
+
+DisplayDynamicBlogs.propTypes = {
+ show: PropTypes.bool,
+};
+
+const DisplayTopLanguages = (props) => {
+ const { show, showStats, github, options } = props;
+ if (show) {
+ if (!showStats) {
+ return (
+ <>
+ {`
})
`}
+
+
+
+ );
+ }
+ return (
+ <>
+ {`
})
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+DisplayTopLanguages.defaultProps = {
+ options: {
+ theme: '',
+ titleColor: '',
+ textColor: '',
+ bgColor: '',
+ hideBorder: '',
+ cacheSeconds: '',
+ locale: '',
+ },
+};
+
+DisplayTopLanguages.propTypes = {
+ github: PropTypes.string.isRequired,
+ options: {
+ theme: PropTypes.string,
+ titleColor: PropTypes.string,
+ textColor: PropTypes.string,
+ bgColor: PropTypes.string,
+ hideBorder: PropTypes.string,
+ cacheSeconds: PropTypes.number,
+ locale: PropTypes.string,
+ },
+ show: PropTypes.bool.isRequired,
+ showStats: PropTypes.bool.isRequired,
+};
+
+const DisplayStreakStats = (props) => {
+ const { show, github, options } = props;
+ if (show) {
+ return (
+ <>
+ {`
})
`}
+
+
+
+ );
+ }
+ return '';
+};
+
+DisplayStreakStats.defaultProps = {
+ options: {
+ theme: '',
+ titleColor: '',
+ textColor: '',
+ bgColor: '',
+ hideBorder: '',
+ cacheSeconds: '',
+ locale: '',
+ },
+};
+
+DisplayStreakStats.propTypes = {
+ github: PropTypes.string.isRequired,
+ options: {
+ theme: PropTypes.string,
+ titleColor: PropTypes.string,
+ textColor: PropTypes.string,
+ bgColor: PropTypes.string,
+ hideBorder: PropTypes.string,
+ cacheSeconds: PropTypes.number,
+ locale: PropTypes.string,
+ },
+ show: PropTypes.bool.isRequired,
+};
+
+const DisplaySupport = (props) => {
+ const { support } = props;
+ let viewSupport = false;
+ Object.keys(support).forEach((key) => {
+ if (support[key]) {
+ viewSupport = true;
+ }
+ });
+ return viewSupport ? (
+
+
+ {'
'}
+ {support.buyMeACoffee &&
+ `
+ `}
+ {support.buyMeAKofi &&
+ `
+ `}
+ {'
'}
+
+
+
+ ) : (
+ ''
+ );
+};
+
+DisplaySupport.defaultProps = {
+ support: {
+ buyMeACoffee: '',
+ buyMeAKofi: '',
+ },
+};
+
+DisplaySupport.propTypes = {
+ support: {
+ buyMeACoffee: PropTypes.string,
+ buyMeAKofi: PropTypes.string,
+ },
+};
+
+const Markdown = (props) => {
+ const { prefix, data, link, social, skills, support } = props;
+ const iconBaseUrl = 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
+ return (
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ {isSocial(social) ? (
+ <>
+
+ {'
'}
+
+ ) : (
+ ''
+ )}
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ {isSocial(social) ? (
+ <>
+ {'
'}
+
+
+
+ ) : (
+ ''
+ )}
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ );
+};
+export default Markdown;
+
+Markdown.defaultProps = {
+ prefix: DEFAULT_PREFIX,
+ data: DEFAULT_DATA,
+ link: DEFAULT_LINK,
+ social: DEFAULT_SOCIAL,
+ support: DEFAULT_SUPPORT,
+ skills: [],
+};
+Markdown.propTypes = {
+ prefix: {
+ title: PropTypes.string,
+ currentWork: PropTypes.string,
+ currentLearn: PropTypes.string,
+ collaborateOn: PropTypes.string,
+ helpWith: PropTypes.string,
+ ama: PropTypes.string,
+ contact: PropTypes.string,
+ resume: PropTypes.string,
+ funFact: PropTypes.string,
+ portfolio: PropTypes.string,
+ blog: PropTypes.string,
+ },
+ data: {
+ title: PropTypes.string,
+ subtitle: PropTypes.string,
+ currentWork: PropTypes.string,
+ currentLearn: PropTypes.string,
+ collaborateOn: PropTypes.string,
+ helpWith: PropTypes.string,
+ ama: PropTypes.string,
+ contact: PropTypes.string,
+ funFact: PropTypes.string,
+ twitterBadge: false,
+ visitorsBadge: false,
+ badgeStyle: PropTypes.string,
+ badgeColor: PropTypes.string,
+ badgeLabel: PropTypes.string,
+ githubProfileTrophy: false,
+ githubStats: false,
+ githubStatsOptions: {
+ theme: PropTypes.string,
+ titleColor: PropTypes.string,
+ textColor: PropTypes.string,
+ bgColor: PropTypes.string,
+ hideBorder: false,
+ cacheSeconds: null,
+ locale: PropTypes.string,
+ },
+ topLanguages: false,
+ topLanguagesOptions: {
+ theme: PropTypes.string,
+ titleColor: PropTypes.string,
+ textColor: PropTypes.string,
+ bgColor: PropTypes.string,
+ hideBorder: false,
+ cacheSeconds: null,
+ locale: PropTypes.string,
+ },
+ streakStats: false,
+ streakStatsOptions: {
+ theme: PropTypes.string,
+ },
+ devDynamicBlogs: false,
+ mediumDynamicBlogs: false,
+ rssDynamicBlogs: false,
+ },
+ link: {},
+ social: {},
+ skills: {},
+ support: {},
+};
diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js
deleted file mode 100644
index 9bca18ab..00000000
--- a/src/components/markdownPreview.js
+++ /dev/null
@@ -1,412 +0,0 @@
-import React from 'react';
-import { icons, skills, skillWebsites } from '../constants/skills';
-import {
- githubStatsLinkGenerator,
- topLanguagesLinkGenerator,
- streakStatsLinkGenerator,
-} from '../utils/link-generators';
-
-export const TitlePreview = (props) => {
- if (props.prefix && props.title) {
- return
{props.prefix + ' ' + props.title}
;
- }
- return null;
-};
-
-export const SubTitlePreview = (props) => {
- if (props.subtitle) {
- return
{props.subtitle}
;
- }
- return null;
-};
-
-export const SectionTitle = (props) => {
- if (!props.visible) return null;
- else if (props.label) {
- return
{props.label}
;
- }
- return null;
-};
-
-export const DisplayWork = (props) => {
- if (props.prefix && props.project) {
- if (props.link) {
- return (
-
- );
- } else {
- return (
-
- {props.prefix + ' '}
- {props.project}
-
- );
- }
- }
- if (props.prefix && props.link) {
- return (
-
- );
- }
- return null;
-};
-
-export const WorkPreview = (props) => {
- const prefix = props.work.prefix;
- const data = props.work.data;
- const link = props.work.link;
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export const DisplaySocial = (props) => {
- if (props.username) {
- return (
-
- 
-
- );
- }
- return null;
-};
-
-export const SocialPreview = (props) => {
- let viewSocial = false;
- const icon_base_url =
- 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
- Object.keys(props.social).forEach((key) => {
- if (props.social[key] && key !== 'github') viewSocial = true;
- });
- return (
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
- );
-};
-
-export const VisitorsBadgePreview = (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 (
-
- {' '}
-
{' '}
-
- );
- }
- return null;
-};
-
-export const TwitterBadgePreview = (props) => {
- let link = 'https://img.shields.io/twitter/follow/' + props.twitter + '?logo=twitter&style=for-the-badge';
- if (props.show) {
- return (
-
- {' '}
-
-
- {' '}
-
- );
- }
- return null;
-};
-
-export const GithubProfileTrophyPreview = (props) => {
- let link = 'https://github-profile-trophy.vercel.app/?username=' + props.github;
- if (props.show) {
- return (
-
- {' '}
-
-
- {' '}
-
- );
- }
- return null;
-};
-
-export const GitHubStatsPreview = ({ github, options, show }) => {
- if (show) {
- return (
-
-
-
- );
- }
- return null;
-};
-
-export const TopLanguagesPreview = ({ github, options, show }) => {
- if (show) {
- return (
-
-
-
- );
- }
- return
;
-};
-
-export const StreakStatsPreview = ({ github, options, show }) => {
- if (show) {
- return (
-
-
-
- );
- }
- return null;
-};
-
-export const SkillsPreview = (props) => {
- var listSkills = [];
- skills.forEach((skill) => {
- if (props.skills[skill]) {
- listSkills.push(
-
- 
-
- );
- }
- });
- return listSkills.length > 0 ? (
-
-
- {listSkills}
-
- ) : (
- ''
- );
-};
-
-export const SupportPreview = (props) => {
- let viewSupport = false;
- Object.keys(props.support).forEach((key) => {
- if (props.support[key]) {
- viewSupport = true;
- }
- });
- return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
-
-
- {props.support.buyMeACoffee && (
-
-
-
- )}
- {props.support.buyMeAKofi && (
-
-
-
- )}
-
- ) : (
- ''
- );
-};
-
-const MarkdownPreview = (props) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default MarkdownPreview;
diff --git a/src/components/markdownPreview.jsx b/src/components/markdownPreview.jsx
new file mode 100644
index 00000000..925e9c21
--- /dev/null
+++ b/src/components/markdownPreview.jsx
@@ -0,0 +1,454 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
+import { githubStatsLinkGenerator, topLanguagesLinkGenerator, streakStatsLinkGenerator } from '../utils/link-generators';
+import { DEFAULT_DATA, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
+
+export const TitlePreview = (props) => {
+ const { prefix, title } = props;
+ if (prefix && title) {
+ return
{`${prefix} ${title}`}
;
+ }
+ return null;
+};
+TitlePreview.propTypes = {
+ prefix: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+};
+
+export const SubTitlePreview = (props) => {
+ const { subtitle } = props;
+ if (subtitle) {
+ return
{subtitle}
;
+ }
+ return null;
+};
+SubTitlePreview.propTypes = {
+ subtitle: PropTypes.string.isRequired,
+};
+
+export const SectionTitle = (props) => {
+ const { visible, label } = props;
+ if (!visible) return null;
+ if (label) {
+ return
{label}
;
+ }
+ return null;
+};
+SectionTitle.defaultProps = {
+ visible: false,
+};
+SectionTitle.propTypes = {
+ visible: PropTypes.bool,
+ label: PropTypes.string.isRequired,
+};
+
+export const DisplayWork = (props) => {
+ const { prefix, project, link } = props;
+ if (prefix && project) {
+ if (link) {
+ return (
+
+ );
+ }
+ return (
+
+ {`${prefix} `}
+ {project}
+
+ );
+ }
+ if (prefix && link) {
+ return (
+
+ );
+ }
+ return null;
+};
+
+DisplayWork.defaultProps = {
+ prefix: '',
+ project: '',
+ link: '',
+};
+
+DisplayWork.propTypes = {
+ prefix: PropTypes.string,
+ project: PropTypes.string,
+ link: PropTypes.string,
+};
+
+export const WorkPreview = (props) => {
+ const { work } = props;
+ const { prefix, data, link } = work;
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+WorkPreview.propTypes = {
+ work: PropTypes.object.isRequired,
+};
+
+export const DisplaySocial = (props) => {
+ const { username, base, icon } = props;
+ if (username) {
+ return (
+
+ 
+
+ );
+ }
+ return null;
+};
+DisplaySocial.defaultProps = {
+ username: '',
+ base: '',
+ icon: '',
+};
+DisplaySocial.propTypes = {
+ username: PropTypes.string,
+ base: PropTypes.string,
+ icon: PropTypes.string,
+};
+
+export const SocialPreview = (props) => {
+ const { social } = props;
+ let viewSocial = false;
+ const iconBaseUrl = 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
+ Object.keys(social).forEach((key) => {
+ if (social[key] && key !== 'github') viewSocial = true;
+ });
+ return (
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ );
+};
+SocialPreview.propTypes = {
+ social: PropTypes.object.isRequired,
+};
+
+export const VisitorsBadgePreview = (props) => {
+ const { github, show, badgeOptions } = props;
+ const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
+ if (show) {
+ return (
+
+ {' '}
+
{' '}
+
+ );
+ }
+ return null;
+};
+VisitorsBadgePreview.defaultProps = {
+ github: '',
+ show: false,
+ badgeOptions: {},
+};
+VisitorsBadgePreview.propTypes = {
+ github: PropTypes.string,
+ show: PropTypes.bool,
+ badgeOptions: PropTypes.object,
+};
+
+export const TwitterBadgePreview = (props) => {
+ const { twitter, show } = props;
+ const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
+ if (show) {
+ return (
+
+ {' '}
+
+
+ {' '}
+
+ );
+ }
+ return null;
+};
+TwitterBadgePreview.defaultProps = {
+ twitter: '',
+ show: false,
+};
+TwitterBadgePreview.propTypes = {
+ twitter: PropTypes.string,
+ show: PropTypes.bool,
+};
+
+export const GithubProfileTrophyPreview = (props) => {
+ const { github, show } = props;
+ const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
+ if (show) {
+ return (
+
+ {' '}
+
+
+ {' '}
+
+ );
+ }
+ return null;
+};
+GithubProfileTrophyPreview.defaultProps = {
+ github: '',
+ show: false,
+};
+GithubProfileTrophyPreview.propTypes = {
+ github: PropTypes.string,
+ show: PropTypes.bool,
+};
+
+export const GitHubStatsPreview = ({ github, options, show }) => {
+ if (show) {
+ return (
+
+
+
+ );
+ }
+ return null;
+};
+GitHubStatsPreview.defaultProps = {
+ github: '',
+ options: {},
+ show: false,
+};
+GitHubStatsPreview.propTypes = {
+ github: PropTypes.string,
+ options: PropTypes.object,
+ show: PropTypes.bool,
+};
+
+export const TopLanguagesPreview = ({ github, options, show }) => {
+ if (show) {
+ return (
+
+
+
+ );
+ }
+ return
;
+};
+TopLanguagesPreview.defaultProps = {
+ github: '',
+ options: {},
+ show: false,
+};
+TopLanguagesPreview.propTypes = {
+ github: PropTypes.string,
+ options: PropTypes.object,
+ show: PropTypes.bool,
+};
+
+export const StreakStatsPreview = ({ github, options, show }) => {
+ if (show) {
+ return (
+
+
+
+ );
+ }
+ return null;
+};
+StreakStatsPreview.defaultProps = {
+ github: '',
+ options: {},
+ show: false,
+};
+StreakStatsPreview.propTypes = {
+ github: PropTypes.string,
+ options: PropTypes.object,
+ show: PropTypes.bool,
+};
+
+export const SkillsPreview = (props) => {
+ const { skills } = props;
+ const listSkills = [];
+ SKILLS.forEach((skill) => {
+ if (skills[skill]) {
+ listSkills.push(
+
+
+ ,
+ );
+ }
+ });
+ return listSkills.length > 0 ? (
+
+
+ {listSkills}
+
+ ) : (
+ ''
+ );
+};
+SkillsPreview.propTypes = {
+ skills: PropTypes.array.isRequired,
+};
+
+export const SupportPreview = (props) => {
+ const { support } = props;
+ let viewSupport = false;
+ Object.keys(support).forEach((key) => {
+ if (support[key]) {
+ viewSupport = true;
+ }
+ });
+ return support.buyMeACoffee || support.buyMeAKofi ? (
+
+
+ {support.buyMeACoffee && (
+
+
+
+ )}
+ {support.buyMeAKofi && (
+
+
+
+ )}
+
+ ) : (
+ ''
+ );
+};
+SupportPreview.propTypes = {
+ support: PropTypes.object.isRequired,
+};
+
+const MarkdownPreview = (props) => {
+ const { prefix, data, social, skills, support } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MarkdownPreview;
+
+MarkdownPreview.defaultProps = {
+ prefix: DEFAULT_PREFIX,
+ data: DEFAULT_DATA,
+ social: DEFAULT_SOCIAL,
+ support: DEFAULT_SUPPORT,
+ skills: [],
+};
+
+MarkdownPreview.propTypes = {
+ prefix: PropTypes.object,
+ data: PropTypes.object,
+ social: PropTypes.object,
+ skills: PropTypes.object,
+ support: PropTypes.object,
+};
diff --git a/src/components/seo.js b/src/components/seo.jsx
similarity index 99%
rename from src/components/seo.js
rename to src/components/seo.jsx
index ea1290f9..0481b377 100644
--- a/src/components/seo.js
+++ b/src/components/seo.jsx
@@ -22,7 +22,7 @@ function SEO({ description, lang, meta, title }) {
}
}
}
- `
+ `,
);
const metaDescription = description || site.siteMetadata.description;
diff --git a/src/components/skills.js b/src/components/skills.jsx
similarity index 56%
rename from src/components/skills.js
rename to src/components/skills.jsx
index 95bc2499..3e2cc953 100644
--- a/src/components/skills.js
+++ b/src/components/skills.jsx
@@ -1,29 +1,23 @@
import React, { useState } from 'react';
-import { icons, categorizedSkills } from '../constants/skills';
+import PropTypes from 'prop-types';
import { SearchIcon, XIcon } from '@primer/octicons-react';
+import { icons, categorizedSkills } from '../constants/skills';
const Skills = (props) => {
+ const { skills, handleSkillsChange } = props;
const [search, setSearch] = useState('');
const [debounce, setDebounce] = useState(undefined);
const inputRef = React.createRef();
- const createSkill = (skill) => {
- return (
-
- );
- };
+ const createSkill = (skill) => (
+
+ );
const onSearchChange = (value) => {
const callback = () => {
@@ -38,16 +32,11 @@ const Skills = (props) => {
Skills
-
onSearchChange(e.target.value)}
- className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
- placeholder="Search Skills"
- ref={inputRef}
- />
+
onSearchChange(e.target.value)} className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700" placeholder="Search Skills" ref={inputRef} />
{search !== '' ? (
-
- Let the world know how you feel using this tool. Share with others on twitter.
- 
- Buy me a ko-fi
-
- {/* Paypal */}
-
- 
- {/* 
- Paypal */}
-
- {/* BuyMeACoffee */}
-
- 
- Buy me a coffee
-
-