aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

top languages addon

Browse Source
This commit is contained in:
rahuldkjain
2020-08-03 11:04:43 +05:30
parent 8be1423b93
commit a7cf1eb891
5 changed files with 64 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/addons.js
+6
View File
@@ -38,6 +38,12 @@ const Addons = (props) => {
onChange={event => props.handleCheckChange('githubStats')} />  display github profile stats card
</label>
</div>
<div className="checkbox">
<label htmlFor="top-languages" className="checkboxLabel">
<input id="top-languages" type="checkbox" checked={props.data.topLanguages}
onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
</label>
</div>
<div className="checkbox">
<label htmlFor="dev-dynamic-blogs" className="checkboxLabel">
<input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
src/components/markdown.js
+12 -1
View File
@@ -55,7 +55,7 @@ const Markdown = (props) => {
const GithubStats = (props) => {
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
if (props.show) {
return (<>{`<p align="center"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
return (<>{`<img align="center" src="${link}" alt="${props.github}" />`}<br /><br /></>);
}
return '';
}
@@ -82,6 +82,16 @@ const Markdown = (props) => {
}
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 (<>{`<img align="center" src="${link}" alt="${props.github}" />`}<br /><br /></>);
}
return (<>{`<img align="left" src="${link}" alt="${props.github}" />`}<br /><br /></>);
}
return '';
}
return (
<div id="markdown-content">
<><Title prefix={props.prefix.title} title={props.data.title} /></>
@@ -101,6 +111,7 @@ const Markdown = (props) => {
<><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'
src/components/markdownPreview.js
+19 -9
View File
@@ -1,5 +1,5 @@
import React from 'react';
import {icons, skills } from '../constants/skills';
import { icons, skills } from '../constants/skills';
const MarkdownPreview = (props) => {
const TitlePreview = (props) => {
@@ -75,11 +75,11 @@ const MarkdownPreview = (props) => {
<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://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} />
</div>
)
}
@@ -93,14 +93,21 @@ const MarkdownPreview = (props) => {
const GithubStatsPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
if (props.show) {
return (<div className="card"> <img className="cardImage" src={link} alt={props.github} /> </div>)
return (<div className="github-stats-card"><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="top-languages-card"><img src={link} alt={props.github} /></div>)
}
return <div className="top-languages-card"> &nbsp;</div>;
}
const SkillsPreview = (props) => {
var listSkills = []
skills.forEach((skill) => {
if(props.skills[skill]) {
if (props.skills[skill]) {
listSkills.push(<img className="skill-preview-icon" key={skill} src={icons[skill]} alt={skill} />)
}
});
@@ -113,7 +120,10 @@ const MarkdownPreview = (props) => {
<VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
<WorkPreview work={props} />
<SkillsPreview skills={props.skills} />
<GithubStatsPreview show={props.data.githubStats} github={props.social.github} />
<div className="github-cards">
<TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
<GithubStatsPreview show={props.data.githubStats} github={props.social.github} />
</div>
<SocialPreview social={props.social} />
</div>
)
src/pages/index.css
+24 -7
View File
@@ -251,10 +251,16 @@ input:focus {
text-align: left;
}
.card {
text-align: center;
.github-cards {
display: flex;
justify-content: center;
}
.github-stats-card {
margin: 1%;
}
.top-languages-card {
margin: 1%;
}
.social {
width: 100%;
display: flex;
@@ -405,10 +411,6 @@ a {
margin: 2% 0%;
font-size: 14px;
}
.cardImage {
width: 200px;
height: 100px;
}
.badgeImage {
height: 15px;
}
@@ -462,4 +464,19 @@ a {
.workflow {
font-size: 12px;
}
.github-cards {
display: block;
}
.github-stats-card{
text-align: center;
}
.top-languages-card {
text-align: center;
}
.github-stats-card > img{
width: 80%;
}
.top-languages-card > img{
width: 80%;
}
}
src/pages/index.js
+3 -2
View File
@@ -41,6 +41,7 @@ const IndexPage = () => {
funFact: '',
visitorsBadge: false,
githubStats: false,
topLanguages: false,
devDynamicBlogs: false,
mediumDynamicBlogs: false,
});
@@ -142,7 +143,7 @@ const IndexPage = () => {
trimDataValues(social, setSocial);
trimDataValues(link, setLink);
resetCopyMarkdownButton();
if (data.visitorsBadge || data.githubStats) {
if (data.visitorsBadge || data.githubStats || data.topLanguages) {
if (social.github && isGithubUsernameValid(social.github)) {
generate();
}
@@ -265,7 +266,7 @@ const IndexPage = () => {
<Social social={social} handleSocialChange={handleSocialChange} />
<Addons data={data} social={social} handleCheckChange={handleCheckChange} />
<div className="section">
{(data.visitorsBadge || data.githubStats) && !social.github ?
{(data.visitorsBadge || data.githubStats || data.topLanguages) && !social.github ?
<div className="warning">* Please add github username to use these add-ons</div> : ''}
{social.github && !isGithubUsernameValid(social.github) ?
<div className="warning">* Github username is invalid, please add a valid username</div> : ''}