jaideepghosh
693 lines
20 KiB
JavaScript
693 lines
20 KiB
JavaScript
import React, { useState, useEffect } from "react"
|
||
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"
|
||
import Social from "../components/social"
|
||
import Addons from "../components/addons"
|
||
import Skills from "../components/skills"
|
||
import Donate from "../components/donate"
|
||
import { initialSkillState } from "../constants/skills"
|
||
import gsap from "gsap"
|
||
import Loader from "../components/loader"
|
||
// import Footer from "../components/footer"
|
||
import "./index.css"
|
||
import {
|
||
ArrowLeftIcon,
|
||
CopyIcon,
|
||
DownloadIcon,
|
||
EyeIcon,
|
||
CheckIcon,
|
||
MarkdownIcon,
|
||
FileCodeIcon,
|
||
} from "@primer/octicons-react"
|
||
import SEO from "../components/seo"
|
||
import {
|
||
isGitHubUsernameValid,
|
||
isMediumUsernameValid,
|
||
} from "../utils/validation"
|
||
import Layout from "../components/layout"
|
||
|
||
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",
|
||
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: "",
|
||
visitorsBadge: false,
|
||
githubStats: false,
|
||
topLanguages: false,
|
||
devDynamicBlogs: false,
|
||
mediumDynamicBlogs: false,
|
||
rssDynamicBlogs: false,
|
||
}
|
||
|
||
const DEFAULT_LINK = {
|
||
currentWork: "",
|
||
collaborateOn: "",
|
||
helpWith: "",
|
||
portfolio: "",
|
||
blog: "",
|
||
}
|
||
|
||
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: "",
|
||
rssurl: "",
|
||
}
|
||
|
||
const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
|
||
useEffect(() => {
|
||
localStorage.setItem(
|
||
"cache",
|
||
JSON.stringify({
|
||
prefix,
|
||
data,
|
||
link,
|
||
social,
|
||
skills,
|
||
})
|
||
)
|
||
}, [prefix, data, link, social, skills])
|
||
}
|
||
|
||
const DEFAULT_SKILLS = initialSkillState
|
||
|
||
const IndexPage = () => {
|
||
const [prefix, setPrefix] = useState(DEFAULT_PREFIX)
|
||
const [data, setData] = useState(DEFAULT_DATA)
|
||
const [link, setLink] = useState(DEFAULT_LINK)
|
||
const [social, setSocial] = useState(DEFAULT_SOCIAL)
|
||
const [skills, setSkills] = useState(DEFAULT_SKILLS)
|
||
|
||
const [restore, setRestore] = useState("")
|
||
const [generatePreview, setGeneratePreview] = useState(false)
|
||
const [generateMarkdown, setGenerateMarkdown] = useState(false)
|
||
const [displayLoader, setDisplayLoader] = useState(false)
|
||
const [showConfig, setShowConfig] = useState(true)
|
||
const [copyObj, setcopyObj] = useState({
|
||
isCopied: false,
|
||
copiedText: "copy-markdown",
|
||
})
|
||
const [previewMarkdown, setPreviewMarkdown] = useState({
|
||
isPreview: false,
|
||
buttonText: "preview",
|
||
})
|
||
|
||
const handleSkillsChange = field => {
|
||
let change = { ...skills }
|
||
change[field] = !change[field]
|
||
setSkills(change)
|
||
}
|
||
|
||
const handlePrefixChange = (field, e) => {
|
||
let change = { ...prefix }
|
||
change[field] = e.target.value
|
||
setPrefix(change)
|
||
}
|
||
|
||
const handleDataChange = (field, e) => {
|
||
let change = { ...data }
|
||
change[field] = e.target.value
|
||
setData(change)
|
||
}
|
||
|
||
const handleLinkChange = (field, e) => {
|
||
let change = { ...link }
|
||
change[field] = e.target.value
|
||
setLink(change)
|
||
}
|
||
|
||
const handleSocialChange = (field, e) => {
|
||
let change = { ...social }
|
||
change[field] = e.target.value.toLowerCase()
|
||
setSocial(change)
|
||
}
|
||
|
||
const handleCheckChange = field => {
|
||
let change = { ...data }
|
||
change[field] = !change[field]
|
||
setData(change)
|
||
}
|
||
|
||
const generate = () => {
|
||
setShowConfig(false)
|
||
var tl = new gsap.timeline()
|
||
tl.to(".generate", {
|
||
scale: 0,
|
||
duration: 0.5,
|
||
ease: "Linear.easeNone",
|
||
})
|
||
tl.set("#form", { display: "none" })
|
||
setDisplayLoader(true)
|
||
setTimeout(() => {
|
||
setDisplayLoader(false)
|
||
setGenerateMarkdown(!generateMarkdown)
|
||
gsap.fromTo(
|
||
"#markdown-box",
|
||
{
|
||
scale: 0.2,
|
||
},
|
||
{
|
||
scale: 1,
|
||
duration: 0.5,
|
||
ease: "Linear.easeNone",
|
||
}
|
||
)
|
||
gsap.fromTo(
|
||
"#support",
|
||
{
|
||
autoAlpha: 0,
|
||
},
|
||
{
|
||
autoAlpha: 1,
|
||
duration: 2,
|
||
ease: "Linear.easeNone",
|
||
}
|
||
)
|
||
document.body.scrollTop = 0 // For Safari
|
||
document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
|
||
}, 3000)
|
||
}
|
||
|
||
const trimDataValues = (item, setItem) => {
|
||
const dataObj = { ...item }
|
||
Object.keys(dataObj).forEach(k =>
|
||
typeof dataObj[k] === "string" ? (dataObj[k] = dataObj[k].trim()) : null
|
||
)
|
||
setItem(dataObj)
|
||
}
|
||
|
||
const handleGenerate = () => {
|
||
trimDataValues(data, setData)
|
||
trimDataValues(social, setSocial)
|
||
trimDataValues(link, setLink)
|
||
resetCopyMarkdownButton()
|
||
if (data.visitorsBadge || data.githubStats || data.topLanguages) {
|
||
if (social.github && isGitHubUsernameValid(social.github)) {
|
||
generate()
|
||
}
|
||
} else if (social.github) {
|
||
if (isGitHubUsernameValid(social.github)) {
|
||
generate()
|
||
}
|
||
} else {
|
||
generate()
|
||
}
|
||
}
|
||
|
||
const handleGeneratePreview = () => {
|
||
setGenerateMarkdown(!generateMarkdown)
|
||
setGeneratePreview(!generatePreview)
|
||
if (!generatePreview) {
|
||
gsap.set("#copy-button, #download-md-button, #download-json-button", {
|
||
visibility: "hidden",
|
||
})
|
||
setPreviewMarkdown({
|
||
isPreview: true,
|
||
buttonText: "markdown",
|
||
})
|
||
} else {
|
||
gsap.set("#copy-button, #download-md-button, #download-json-button", {
|
||
visibility: "visible",
|
||
})
|
||
gsap.to("#copy-button", {
|
||
border: "2px solid #3b3b4f",
|
||
duration: 1,
|
||
})
|
||
setPreviewMarkdown({
|
||
isPreview: false,
|
||
buttonText: "preview",
|
||
})
|
||
resetCopyMarkdownButton()
|
||
}
|
||
}
|
||
|
||
const resetCopyMarkdownButton = () => {
|
||
var el = document.getElementById("copy-markdown")
|
||
if (el) {
|
||
gsap.set("#copy-markdown", {
|
||
color: "#0a0a23",
|
||
})
|
||
}
|
||
setcopyObj({
|
||
isCopied: false,
|
||
copiedText: "copy-markdown",
|
||
})
|
||
}
|
||
|
||
const setCopyMarkdownButton = () => {
|
||
var el = document.getElementById("copy-markdown")
|
||
if (el) {
|
||
gsap.set("#copy-markdown", {
|
||
color: "#00471b",
|
||
})
|
||
}
|
||
gsap.fromTo(
|
||
"#copy-button",
|
||
{
|
||
scale: 0.5,
|
||
},
|
||
{
|
||
scale: 1,
|
||
ease: "elastic.in",
|
||
border: "2px solid #00471b",
|
||
duration: 0.5,
|
||
}
|
||
)
|
||
setcopyObj({
|
||
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 handleDownloadMarkdown = () => {
|
||
var markdownContent = document.getElementById("markdown-content")
|
||
var tempElement = document.createElement("a")
|
||
tempElement.setAttribute(
|
||
"href",
|
||
"data:text/markdown;charset=utf-8," +
|
||
encodeURIComponent(markdownContent.innerText)
|
||
)
|
||
tempElement.setAttribute("download", "README.md")
|
||
tempElement.style.display = "none"
|
||
document.body.appendChild(tempElement)
|
||
tempElement.click()
|
||
document.body.removeChild(tempElement)
|
||
}
|
||
|
||
const handleDownloadJson = () => {
|
||
var tempElement = document.createElement("a")
|
||
tempElement.setAttribute(
|
||
"href",
|
||
`data:text/json;charset=utf-8,${encodeURIComponent(
|
||
JSON.stringify({ prefix, data, link, social, skills })
|
||
)}`
|
||
)
|
||
tempElement.setAttribute("download", "data.json")
|
||
tempElement.style.display = "none"
|
||
document.body.appendChild(tempElement)
|
||
tempElement.click()
|
||
document.body.removeChild(tempElement)
|
||
}
|
||
|
||
const handleBackToEdit = () => {
|
||
setGeneratePreview(false)
|
||
setGenerateMarkdown(false)
|
||
setShowConfig(true)
|
||
gsap.set("#form", {
|
||
display: "",
|
||
})
|
||
gsap.to(".generate", {
|
||
scale: 1,
|
||
})
|
||
}
|
||
|
||
const setInitialValues = () => {
|
||
const cache = JSON.parse(localStorage.getItem("cache"))
|
||
|
||
if (!cache) {
|
||
return
|
||
}
|
||
|
||
setPrefix(cache.prefix || DEFAULT_PREFIX)
|
||
setData(cache.data || DEFAULT_DATA)
|
||
setLink(cache.link || DEFAULT_LINK)
|
||
setSocial(cache.social || DEFAULT_SOCIAL)
|
||
|
||
const cacheSkills = mergeDefaultWithNewDataSkills(
|
||
DEFAULT_SKILLS,
|
||
cache.skills
|
||
)
|
||
setSkills(cacheSkills || DEFAULT_SKILLS)
|
||
}
|
||
|
||
useEffect(() => {
|
||
gsap.fromTo(
|
||
".generate",
|
||
{
|
||
boxShadow: "0 0 0 0px rgba(59, 59, 79, 0.4)",
|
||
},
|
||
{
|
||
boxShadow: "0 0 0 10px rgba(59, 59, 79, 0)",
|
||
repeat: -1,
|
||
duration: 1,
|
||
}
|
||
)
|
||
|
||
// set initial values
|
||
setInitialValues()
|
||
}, [])
|
||
|
||
// keep cache updated
|
||
KeepCacheUpdated({ prefix, data, link, social, skills })
|
||
|
||
const handleResetForm = () => {
|
||
setPrefix(DEFAULT_PREFIX)
|
||
setData(DEFAULT_DATA)
|
||
setLink(DEFAULT_LINK)
|
||
setSocial(DEFAULT_SOCIAL)
|
||
setSkills(DEFAULT_SKILLS)
|
||
}
|
||
|
||
const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) => {
|
||
return Object.keys(defaultSkills).reduce((previous, currentKey) => {
|
||
let currentSelected = false
|
||
|
||
if (newSkills[currentKey]) {
|
||
currentSelected = true
|
||
}
|
||
|
||
return {
|
||
...previous,
|
||
[currentKey]: currentSelected,
|
||
}
|
||
}, {})
|
||
}
|
||
|
||
const handleRestore = () => {
|
||
try {
|
||
const restoreData = JSON.parse(restore)
|
||
|
||
if (!restoreData) {
|
||
return
|
||
}
|
||
|
||
setPrefix(restoreData.prefix || DEFAULT_PREFIX)
|
||
setData(restoreData.data || DEFAULT_DATA)
|
||
setLink(restoreData.link || DEFAULT_LINK)
|
||
setSocial(restoreData.social || DEFAULT_SOCIAL)
|
||
|
||
const restoreDataSkills = mergeDefaultWithNewDataSkills(
|
||
DEFAULT_SKILLS,
|
||
restoreData.skills
|
||
)
|
||
setSkills(restoreDataSkills || DEFAULT_SKILLS)
|
||
} catch (error) {
|
||
} finally {
|
||
setRestore("")
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="m-4 sm:p-4">
|
||
<SEO title="GitHub Profile Readme Generator" />
|
||
<div id="form">
|
||
<Title
|
||
data={data}
|
||
prefix={prefix}
|
||
handleDataChange={handleDataChange}
|
||
handlePrefixChange={handlePrefixChange}
|
||
/>
|
||
<Subtitle data={data} handleDataChange={handleDataChange} />
|
||
<Work
|
||
prefix={prefix}
|
||
data={data}
|
||
link={link}
|
||
handlePrefixChange={handlePrefixChange}
|
||
handleLinkChange={handleLinkChange}
|
||
handleDataChange={handleDataChange}
|
||
/>
|
||
<Skills skills={skills} handleSkillsChange={handleSkillsChange} />
|
||
<Social social={social} handleSocialChange={handleSocialChange} />
|
||
<Addons
|
||
data={data}
|
||
social={social}
|
||
handleCheckChange={handleCheckChange}
|
||
/>
|
||
<div className="section">
|
||
{(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>
|
||
) : (
|
||
""
|
||
)}
|
||
{social.medium && !isMediumUsernameValid(social.medium) ? (
|
||
<div className="warning">
|
||
* Medium username is invalid, please add a valid username (with
|
||
@)
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
{data.mediumDynamicBlogs && !social.medium ? (
|
||
<div className="warning">
|
||
* Please add medium username to display latest blogs dynamically
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
{data.devDynamicBlogs && !social.dev ? (
|
||
<div className="warning">
|
||
* Please add dev.to username to display latest blogs dynamically
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
{data.rssDynamicBlogs && !social.rssurl ? (
|
||
<div className="warning">
|
||
* Please add your rss feed url to display latest blogs
|
||
dynamically from your personal blog
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-center w-full">
|
||
<div
|
||
className="text-xs sm:text-xl font-medium border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 sm:py-2 px-2 sm:px-4 generate"
|
||
tabIndex="0"
|
||
role="button"
|
||
onClick={handleGenerate}
|
||
>
|
||
Generate README
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{displayLoader ? <Loader /> : ""}
|
||
|
||
{generateMarkdown || generatePreview ? (
|
||
<div className="markdown-section p-4 sm:py-4 sm:px-10">
|
||
<div className="w-full flex justify-between items-center">
|
||
<div
|
||
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||
tabIndex="0"
|
||
role="button"
|
||
onClick={handleBackToEdit}
|
||
>
|
||
<ArrowLeftIcon size={16} />
|
||
<span className="hidden sm:block"> back to edit</span>
|
||
</div>
|
||
|
||
<div
|
||
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||
tabIndex="0"
|
||
id="copy-button"
|
||
role="button"
|
||
onClick={handleCopyToClipboard}
|
||
>
|
||
{copyObj.isCopied === true ? (
|
||
<CheckIcon size={24} />
|
||
) : (
|
||
<CopyIcon size={24} />
|
||
)}
|
||
<span className="hidden sm:block" id="copy-markdown">
|
||
{copyObj.copiedText}
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||
tabIndex="0"
|
||
id="download-md-button"
|
||
role="button"
|
||
onClick={handleDownloadMarkdown}
|
||
>
|
||
<DownloadIcon size={24} />
|
||
<span className="hidden sm:block" id="download-markdown">
|
||
download markdown
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||
tabIndex="0"
|
||
id="download-json-button"
|
||
role="button"
|
||
onClick={handleDownloadJson}
|
||
>
|
||
<FileCodeIcon size={24} />
|
||
<span className="hidden sm:block" id="download-json">
|
||
download backup
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||
tabIndex="0"
|
||
role="button"
|
||
onClick={handleGeneratePreview}
|
||
>
|
||
{previewMarkdown.isPreview ? (
|
||
<MarkdownIcon size={16} />
|
||
) : (
|
||
<EyeIcon size={16} />
|
||
)}
|
||
<span className="hidden sm:block ml-1" id="preview-markdown">
|
||
{previewMarkdown.buttonText}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full flex justify-center items-center">
|
||
<div
|
||
className="w-full text-sm text-gray-900 shadow-xl mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800"
|
||
id="markdown-box"
|
||
>
|
||
{generatePreview ? (
|
||
<MarkdownPreview
|
||
prefix={prefix}
|
||
data={data}
|
||
link={link}
|
||
social={social}
|
||
skills={skills}
|
||
/>
|
||
) : (
|
||
""
|
||
)}
|
||
{generateMarkdown ? (
|
||
<Markdown
|
||
prefix={prefix}
|
||
data={data}
|
||
link={link}
|
||
social={social}
|
||
skills={skills}
|
||
/>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="mt-10" id="support">
|
||
<Donate />
|
||
</div>
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
<div
|
||
className={
|
||
"w-full shadow flex flex-col justify-center items-start mt-16 border-2 border-solid border-gray-600 py-2 px-4 " +
|
||
(!showConfig ? "hidden" : "block")
|
||
}
|
||
>
|
||
<div className="flex justify-between items-center w-full">
|
||
<div className="text-lg sm:text-2xl font-bold font-title mt-2 mb-2">
|
||
Config options
|
||
<span className="bg-green-800 text-white text-xs sm:text-sm p-1 ml-1">
|
||
new feature
|
||
</span>
|
||
</div>
|
||
<div
|
||
className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
|
||
role="button"
|
||
tabIndex="0"
|
||
onClick={handleResetForm}
|
||
>
|
||
Reset form
|
||
</div>
|
||
</div>
|
||
<div className="w-full flex justify-start items-center my-4">
|
||
<input
|
||
type="text"
|
||
className="outline-none w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
|
||
placeholder="JSON Backup"
|
||
value={restore}
|
||
onChange={e => setRestore(e.target.value)}
|
||
/>
|
||
<div
|
||
className="text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
|
||
role="button"
|
||
tabIndex="0"
|
||
onClick={handleRestore}
|
||
>
|
||
Restore
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col items-start justify-center">
|
||
<div className="text-green-700 font-medium">Tips</div>
|
||
<div className="text-sm sm:text-lg text-gray-700">
|
||
* Enter the downloaded JSON text to restore.
|
||
</div>
|
||
<div className="text-sm sm:text-lg text-gray-700">
|
||
* Press reset to reset the form.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
)
|
||
}
|
||
|
||
export default IndexPage
|