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

Merge pull request #22 from rahuldkjain/slave

Browse Source 
add: tooltip, fix: github-validation
This commit is contained in:
Rahul Jain
2020-07-21 18:26:23 +05:30
committed by GitHub
parent 04dd7a4f11 48b39e92a5
commit 29878d1fe8
6 changed files with 98 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/markdownPreview.js
+1 -1
View File
@@ -100,7 +100,7 @@ const MarkdownPreview = (props) => {
var listSkills = []
skills.forEach((skill) => {
if(props.skills[skill]) {
listSkills.push(<img className="skill-preview-icon" src={icons[skill]} alt={skill} />)
listSkills.push(<img className="skill-preview-icon" key={skill} src={icons[skill]} alt={skill} />)
}
});
return listSkills.length > 0 ? <div className='skills-preview'>{listSkills}</div> : ''
src/components/skills.js
+3 -2
View File
@@ -7,8 +7,9 @@ const Skills = (props) => {
<label htmlFor={skill} className="skillCheckboxLabel">
<input id={skill} type="checkbox" checked={props.skills[skill]}
onChange={event => props.handleSkillsChange(skill)} />
<img className="skill-icon" src={icons[skill]}
alt={skill} />
<img className="skill-icon" src={icons[skill]}
alt={skill} />
<span className="tooltiptext">{skill}</span>
</label>
</div>
);
src/constants/skills.js
+2 -2
View File
@@ -1,5 +1,5 @@
//const baseURL = 'https://konpa.github.io/devicon/devicon.git/icons/';
const skills = ['vuejs', 'react', 'angularjs', 'amazonwebservices', 'android', 'backbonejs',
const skills = ['vuejs', 'react', 'angularjs', 'aws', 'android', 'backbonejs',
'bootstrap', 'c', 'coffeescript',
'cplusplus', 'css3', 'csharp', 'd3js', 'django', 'docker', 'dotnet', 'electron', 'go',
'gulp', 'html5', 'java', 'javascript', 'typescript', 'laravel', 'mongodb', 'mysql', 'php', 'postgresql',
@@ -10,7 +10,7 @@ const icons = {
vuejs: 'https://konpa.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg',
react: 'https://konpa.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg',
angularjs: 'https://konpa.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg',
amazonwebservices: 'https://konpa.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg',
aws: 'https://konpa.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg',
android: 'https://konpa.github.io/devicon/devicon.git/icons/android/android-original-wordmark.svg',
backbonejs: 'https://konpa.github.io/devicon/devicon.git/icons/backbonejs/backbonejs-original-wordmark.svg',
bootstrap: 'https://konpa.github.io/devicon/devicon.git/icons/bootstrap/bootstrap-plain.svg',
src/pages/index.css
+31 -1
View File
@@ -104,7 +104,7 @@ input:focus {
margin: 1% 0%;
}
.skillCheckboxLabel {
width: 25%;
width: 70%;
font-weight: 500;
cursor: pointer;
display: flex;
@@ -286,6 +286,30 @@ a {
height: 40px;
margin: 1%;
}
/* Tooltip css */
.tooltiptext {
visibility: hidden;
display: flex;
align-items: center;
color: var(--grey-05);
margin-left: 8%;
background: var(--grey-90);
padding: 1px 5%;
font-size: 14px;
}
.skillCheckboxLabel:hover .tooltiptext {
visibility: visible;
}
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent var(--grey-90) transparent transparent;
}
@media only screen and (max-width: 1199px) {
h1, h2, h3, h4 {
margin: 2% 0% !important;
@@ -345,4 +369,10 @@ a {
#markdown-content {
word-break: break-all;
}
.tooltiptext {
visibility: hidden;
}
.skillCheckboxLabel:hover .tooltiptext {
visibility: hidden;
}
}
src/pages/index.js
+55 -31
View File
@@ -13,9 +13,9 @@ import gsap from 'gsap';
import Loader from '../components/loader';
import Footer from '../components/footer';
import './index.css'
import { ArrowLeftIcon, CopyIcon, DownloadIcon, EyeIcon, CheckIcon } from '@primer/octicons-react';
import { ArrowLeftIcon, CopyIcon, DownloadIcon, EyeIcon, CheckIcon, MarkdownIcon } from '@primer/octicons-react';
import SEO from '../components/seo';
import { isGithubUsernameValid } from '../utils/validation';
const IndexPage = () => {
const [prefix, setPrefix] = useState({
title: "Hi 👋, I'm",
@@ -70,8 +70,12 @@ const IndexPage = () => {
const [generateMarkdown, setGenerateMarkdown] = useState(false);
const [displayLoader, setDisplayLoader] = useState(false);
const [copyObj, setcopyObj] = useState({
isCopied:false,
copiedText:'copy-markdown'
isCopied: false,
copiedText: 'copy-markdown'
});
const [previewMarkdown, setPreviewMarkdown] = useState({
isPreview: false,
buttonText: 'preview'
});
const handleSkillsChange = (field) => {
let change = { ...skills }
@@ -124,15 +128,21 @@ const IndexPage = () => {
});
}, 3000);
}
const trimDataValues = () => {
const dataObj = { ...data };
const trimDataValues = (item, setItem) => {
const dataObj = { ...item };
Object.keys(dataObj).forEach(k => (typeof dataObj[k] === 'string') ? dataObj[k] = dataObj[k].trim() : null);
setData(dataObj);
setItem(dataObj);
}
const handleGenerate = () => {
trimDataValues();
trimDataValues(data, setData);
trimDataValues(social, setSocial);
trimDataValues(link, setLink);
if (data.visitorsBadge || data.githubStats) {
if (social.github) {
if (social.github && isGithubUsernameValid(social.github)) {
generate();
}
} else if (social.github) {
if (isGithubUsernameValid(social.github)) {
generate();
}
} else {
@@ -146,35 +156,36 @@ const IndexPage = () => {
gsap.set('.copy-button', {
visibility: 'hidden'
});
document.getElementById('preview-markdown').innerHTML = 'markdown'
setPreviewMarkdown({
isPreview: true,
buttonText: 'markdown'
})
} else {
gsap.set('.copy-button', {
visibility: 'visible'
});
gsap.set('#copy-markdown', {
innerHTML: 'copy-markdown',
color: '#0a0a23',
});
gsap.to('.copy-button', {
border: '2px solid #3b3b4f',
duration: 1
});
document.getElementById('preview-markdown').innerHTML = 'preview'
setPreviewMarkdown({
isPreview: false,
buttonText: 'preview'
})
resetCopyMarkdownButton();
}
}
const resetCopyMarkdownButton = () => {
gsap.set('#copy-markdown', {
color: '#0a0a23',
});
setcopyObj({
isCopied:false,
copiedText:'copy-markdown'
isCopied: false,
copiedText: 'copy-markdown'
});
}
const handleCopyToClipboard = () => {
var range = document.createRange();
range.selectNode(document.getElementById("markdown-content"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();
const setCopyMarkdownButton = () => {
gsap.set('#copy-markdown', {
innerHTML: 'copied',
color: '#00471b',
});
gsap.fromTo('.copy-button', {
@@ -186,10 +197,20 @@ const IndexPage = () => {
duration: 0.5
});
setcopyObj({
isCopied:true,
copiedText:'copied'
isCopied: true,
copiedText: 'copied'
});
}
const handleCopyToClipboard = () => {
var range = document.createRange();
range.selectNode(document.getElementById("markdown-content"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();
setCopyMarkdownButton();
}
const handleDownload = () => {
var markdownContent = document.getElementById("markdown-content");
@@ -211,6 +232,7 @@ const IndexPage = () => {
gsap.to('.generate', {
scale: 1,
});
resetCopyMarkdownButton();
}
useEffect(() => {
gsap.fromTo(".generate", {
@@ -235,6 +257,8 @@ const IndexPage = () => {
<div className="section">
{(data.visitorsBadge || data.githubStats) && !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> : ''}
</div>
<div className="submit">
<div className="button generate" tabIndex="0" role="button" onClick={handleGenerate}>Generate README</div>
@@ -250,9 +274,9 @@ const IndexPage = () => {
<div className="copy-button" tabIndex="0" role="button" onClick={handleCopyToClipboard}>
{
copyObj.isCopied === true ?
<CheckIcon size={24} />
:
<CopyIcon size={24} />
<CheckIcon size={24} />
:
<CopyIcon size={24} />
}
<span className="hide-on-mobile" id="copy-markdown"> {copyObj.copiedText} </span>
</div>
@@ -260,7 +284,7 @@ const IndexPage = () => {
<DownloadIcon size={24} /> <span className="hide-on-mobile" id="download-markdown"> download </span>
</div>
<div className="preview-button" tabIndex="0" role="button" onClick={handleGeneratePreview}>
<EyeIcon size={16} /> <span className="hide-on-mobile" id="preview-markdown"> preview</span>
{previewMarkdown.isPreview ? <MarkdownIcon size={16} /> : <EyeIcon size={16} />} <span className="hide-on-mobile" id="preview-markdown">{previewMarkdown.buttonText}</span>
</div>
</div>
<div className="markdown">
src/utils/validation.js
+6
View File
@@ -0,0 +1,6 @@
const isGithubUsernameValid = (username) => {
var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
return pattern.test(username)
}
export {isGithubUsernameValid};