Merge pull request #108 from g-savitha/prettier
[fix]: code formatting to the whole project
This commit is contained in:
Rahul Jain
+2
-1
@@ -9,4 +9,5 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: ['https://paypal.me/rahuldkjain', 'https://www.buymeacoffee.com/rahuldkjain']
|
||||
custom:
|
||||
["https://paypal.me/rahuldkjain", "https://www.buymeacoffee.com/rahuldkjain"]
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
title: ""
|
||||
labels: bug
|
||||
assignees: ''
|
||||
|
||||
assignees: ""
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
@@ -24,11 +24,13 @@ A clear and concise description of what you expected to happen.
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
---
|
||||
name: Feature/Enhancement request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
title: ""
|
||||
labels: enhancement
|
||||
assignees: ''
|
||||
|
||||
assignees: ""
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
|
||||
@@ -43,11 +43,13 @@
|
||||
</p>
|
||||
|
||||
#### Tired of editing GitHub Profile README with new features?
|
||||
|
||||
This tool provides an easy way to create github profile readme with latest addons like `visitors count`, `github stats` etc.
|
||||
|
||||
#### 🚀 Try it out: [Live demo](https://rahuldkjain.github.io/gh-profile-readme-generator)
|
||||
|
||||
## 🧐 Features
|
||||
|
||||
Just fill the details like `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog` etc. with a minimal UI.
|
||||
|
||||
Click on `Generate README` to get your README in `markdown`.
|
||||
@@ -56,36 +58,47 @@ You can preview the README too.
|
||||
You can add latest addons like `visitors count`, `shields`, `dev icons`, `github stats` etc to your README in just one click.
|
||||
|
||||
## Installation Steps
|
||||
|
||||
1. Clone the repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
|
||||
```
|
||||
|
||||
2. Change the working directory
|
||||
|
||||
```bash
|
||||
cd github-profile-readme-generator
|
||||
```
|
||||
|
||||
3. Install dependencies
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
4. Run the app
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
🌟 You are all set!
|
||||
|
||||
|
||||
## Special Thanks 🙇
|
||||
|
||||
- [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
|
||||
- [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
|
||||
- [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
|
||||
- [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
|
||||
|
||||
## Sponsors 🙇
|
||||
|
||||
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
|
||||
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
|
||||
|
||||
## Support 🙏
|
||||
|
||||
<p align="left">
|
||||
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
|
||||
</a>
|
||||
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
import "./src/styles/tailwind.css";
|
||||
require("prismjs/themes/prism-okaidia.css");
|
||||
import "./src/styles/tailwind.css"
|
||||
require("prismjs/themes/prism-okaidia.css")
|
||||
|
||||
+5
-7
@@ -24,10 +24,8 @@ module.exports = {
|
||||
{
|
||||
resolve: `gatsby-transformer-remark`,
|
||||
options: {
|
||||
plugins: [
|
||||
`gatsby-remark-prismjs`,
|
||||
]
|
||||
}
|
||||
plugins: [`gatsby-remark-prismjs`],
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-sharp`,
|
||||
@@ -56,7 +54,7 @@ module.exports = {
|
||||
resolve: `gatsby-plugin-postcss`,
|
||||
options: {
|
||||
postCssPlugins: [require("tailwindcss")],
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-purgecss`,
|
||||
@@ -64,9 +62,9 @@ module.exports = {
|
||||
printRejected: false,
|
||||
develop: false,
|
||||
tailwind: true,
|
||||
}
|
||||
},
|
||||
`gatsby-plugin-twitter`
|
||||
},
|
||||
`gatsby-plugin-twitter`,
|
||||
],
|
||||
// this (optional) plugin enables Progressive Web App + Offline functionality
|
||||
// To learn more, visit: https://gatsby.dev/offline
|
||||
|
||||
+80
-27
@@ -1,9 +1,9 @@
|
||||
import React from "react"
|
||||
import { withPrefix } from 'gatsby'
|
||||
import { withPrefix } from "gatsby"
|
||||
import { latestBlogs } from "../utils/workflows"
|
||||
import links from "../constants/page-links"
|
||||
import { isMediumUsernameValid } from "../utils/validation"
|
||||
const Addons = (props) => {
|
||||
const Addons = props => {
|
||||
const blogPostPorkflow = () => {
|
||||
let payload = {
|
||||
dev: {
|
||||
@@ -13,61 +13,114 @@ const Addons = (props) => {
|
||||
medium: {
|
||||
show: props.data.mediumDynamicBlogs,
|
||||
username: props.social.medium,
|
||||
},
|
||||
}
|
||||
}
|
||||
var actionContent = latestBlogs(payload);
|
||||
var tempElement = document.createElement('a');
|
||||
tempElement.setAttribute('href', 'data:text/yaml;charset=utf-8,' + encodeURIComponent(actionContent));
|
||||
tempElement.setAttribute('download', 'blog-post-workflow.yml');
|
||||
tempElement.style.display = 'none';
|
||||
document.body.appendChild(tempElement);
|
||||
tempElement.click();
|
||||
document.body.removeChild(tempElement);
|
||||
var actionContent = latestBlogs(payload)
|
||||
var tempElement = document.createElement("a")
|
||||
tempElement.setAttribute(
|
||||
"href",
|
||||
"data:text/yaml;charset=utf-8," + encodeURIComponent(actionContent)
|
||||
)
|
||||
tempElement.setAttribute("download", "blog-post-workflow.yml")
|
||||
tempElement.style.display = "none"
|
||||
document.body.appendChild(tempElement)
|
||||
tempElement.click()
|
||||
document.body.removeChild(tempElement)
|
||||
}
|
||||
return (
|
||||
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Add-ons
|
||||
</div>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor="visitors-count" className="cursor-pointer">
|
||||
<input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
|
||||
onChange={event => props.handleCheckChange('visitorsBadge')} /> display visitors count badge
|
||||
<input
|
||||
type="checkbox"
|
||||
id="visitors-count"
|
||||
checked={props.data.visitorsBadge}
|
||||
onChange={event => props.handleCheckChange("visitorsBadge")}
|
||||
/>
|
||||
display visitors count badge
|
||||
</label>
|
||||
</div>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor="github-stats" className="cursor-pointer">
|
||||
<input id="github-stats" type="checkbox" checked={props.data.githubStats}
|
||||
onChange={event => props.handleCheckChange('githubStats')} /> display github profile stats card
|
||||
<input
|
||||
id="github-stats"
|
||||
type="checkbox"
|
||||
checked={props.data.githubStats}
|
||||
onChange={event => props.handleCheckChange("githubStats")}
|
||||
/>
|
||||
display github profile stats card
|
||||
</label>
|
||||
</div>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor="top-languages" className="cursor-pointer">
|
||||
<input id="top-languages" type="checkbox" checked={props.data.topLanguages}
|
||||
onChange={event => props.handleCheckChange('topLanguages')} /> display top skills
|
||||
<input
|
||||
id="top-languages"
|
||||
type="checkbox"
|
||||
checked={props.data.topLanguages}
|
||||
onChange={event => props.handleCheckChange("topLanguages")}
|
||||
/>
|
||||
display top skills
|
||||
</label>
|
||||
</div>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
|
||||
<input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
|
||||
onChange={event => props.handleCheckChange('devDynamicBlogs')} /> display latest dev.to blogs dynamically (GitHub Action)
|
||||
<input
|
||||
id="dev-dynamic-blogs"
|
||||
type="checkbox"
|
||||
checked={props.data.devDynamicBlogs}
|
||||
onChange={event => props.handleCheckChange("devDynamicBlogs")}
|
||||
/>
|
||||
display latest dev.to blogs dynamically (GitHub Action)
|
||||
</label>
|
||||
</div>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
|
||||
<input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
|
||||
onChange={event => props.handleCheckChange('mediumDynamicBlogs')} /> display latest medium blogs dynamically (GitHub Action)
|
||||
<input
|
||||
id="medium-dynamic-blogs"
|
||||
type="checkbox"
|
||||
checked={props.data.mediumDynamicBlogs}
|
||||
onChange={event => props.handleCheckChange("mediumDynamicBlogs")}
|
||||
/>
|
||||
display latest medium blogs dynamically (GitHub Action)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{(props.data.devDynamicBlogs && props.social.dev) || (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium)) ?
|
||||
{(props.data.devDynamicBlogs && props.social.dev) ||
|
||||
(props.data.mediumDynamicBlogs &&
|
||||
props.social.medium &&
|
||||
isMediumUsernameValid(props.social.medium)) ? (
|
||||
<div className="workflow">
|
||||
<div>
|
||||
download
|
||||
<span onClick={blogPostPorkflow} role="button" tabIndex="0" style={{ cursor: 'pointer', color: '#002ead' }}> blog-post-workflow.yml</span> file(learn
|
||||
<a href={withPrefix(links.addons)} target="blank" style={{ color: '#002ead' }}> how to setup</a>)
|
||||
<span
|
||||
onClick={blogPostPorkflow}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
style={{ cursor: "pointer", color: "#002ead" }}
|
||||
>
|
||||
{" "}
|
||||
blog-post-workflow.yml
|
||||
</span>{" "}
|
||||
file(learn
|
||||
<a
|
||||
href={withPrefix(links.addons)}
|
||||
target="blank"
|
||||
style={{ color: "#002ead" }}
|
||||
>
|
||||
{" "}
|
||||
how to setup
|
||||
</a>
|
||||
)
|
||||
</div>
|
||||
</div> : ''}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Addons;
|
||||
export default Addons
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import links from '../constants/page-links'
|
||||
import { Link } from 'gatsby'
|
||||
import React from "react"
|
||||
import links from "../constants/page-links"
|
||||
import { Link } from "gatsby"
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
|
||||
@@ -22,9 +22,13 @@ const Footer = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
|
||||
Developed in India{" "}
|
||||
<span role="img" aria-label="india">
|
||||
{" "}
|
||||
🇮🇳
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footer;
|
||||
export default Footer
|
||||
|
||||
@@ -61,8 +61,11 @@ const Header = props => {
|
||||
className="mr-2"
|
||||
>
|
||||
<div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
|
||||
<StarIcon size={16} id="star-icon" className="px-1 w-6 star" />Star this repo
|
||||
<span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
|
||||
<StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
|
||||
Star this repo
|
||||
<span className="github-count px-1 sm:px-2">
|
||||
{stats.starsCount}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
@@ -71,8 +74,15 @@ const Header = props => {
|
||||
target="blank"
|
||||
>
|
||||
<div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
|
||||
<RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
|
||||
<span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
|
||||
<RepoForkedIcon
|
||||
size={16}
|
||||
id="fork-icon"
|
||||
className="px-1 w-6 fork"
|
||||
/>
|
||||
Fork on GitHub
|
||||
<span className="github-count px-1 sm:px-2">
|
||||
{stats.forksCount}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import Header from "./header";
|
||||
import Footer from "./footer";
|
||||
|
||||
import React from "react"
|
||||
import Header from "./header"
|
||||
import Footer from "./footer"
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
return (
|
||||
@@ -9,13 +8,11 @@ const Layout = ({children}) => {
|
||||
<header>
|
||||
<Header heading="GitHub Profile README Generator" />
|
||||
</header>
|
||||
<main className="flex-grow">
|
||||
{children}
|
||||
</main>
|
||||
<main className="flex-grow">{children}</main>
|
||||
<footer>
|
||||
<Footer />
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
export default Layout;
|
||||
}
|
||||
export default Layout
|
||||
|
||||
+28
-19
@@ -1,31 +1,40 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
import React, { useRef, useEffect } from "react"
|
||||
import gsap from "gsap"
|
||||
const Loader = () => {
|
||||
let arrow = useRef([]);
|
||||
let arrow = useRef([])
|
||||
useEffect(() => {
|
||||
var tl = new gsap.timeline({repeat: -1});
|
||||
tl.fromTo(arrow.current, {
|
||||
var tl = new gsap.timeline({ repeat: -1 })
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
}, {
|
||||
color: "#3b3b4f",
|
||||
},
|
||||
{
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
color: "#d0d0d5",
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone'
|
||||
});
|
||||
tl.add('cp')
|
||||
tl.fromTo(arrow.current, {
|
||||
ease: "Linear.easeNone",
|
||||
}
|
||||
)
|
||||
tl.add("cp")
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
}, {
|
||||
color: "#d0d0d5",
|
||||
},
|
||||
{
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
color: "#3b3b4f",
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone'
|
||||
}, 'cp-=0.3');
|
||||
});
|
||||
ease: "Linear.easeNone",
|
||||
},
|
||||
"cp-=0.3"
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className="loader">
|
||||
<span ref={el => (arrow.current[0] = el)}>↓</span>
|
||||
@@ -37,4 +46,4 @@ const Loader = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
export default Loader
|
||||
|
||||
+365
-107
@@ -1,20 +1,20 @@
|
||||
import React from 'react';
|
||||
import { isMediumUsernameValid } from '../utils/validation'
|
||||
import { icons, skills } from '../constants/skills';
|
||||
import React from "react"
|
||||
import { isMediumUsernameValid } from "../utils/validation"
|
||||
import { icons, skills } from "../constants/skills"
|
||||
|
||||
const Markdown = (props) => {
|
||||
const Title = (props) => {
|
||||
const Markdown = props => {
|
||||
const Title = props => {
|
||||
if (props.prefix && props.title) {
|
||||
return (
|
||||
<>
|
||||
{`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
|
||||
{`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const SubTitle = (props) => {
|
||||
const SubTitle = props => {
|
||||
if (props.subtitle) {
|
||||
return (
|
||||
<>
|
||||
@@ -22,141 +22,399 @@ const Markdown = (props) => {
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const DisplayWork = (props) => {
|
||||
const DisplayWork = props => {
|
||||
if (props.prefix && props.project) {
|
||||
if (props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} [${props.project}](${props.link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} **${props.project}**`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
if (props.prefix && props.link) {
|
||||
return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} [${props.link}](${props.link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const DisplaySocial = (props) => {
|
||||
const DisplaySocial = props => {
|
||||
if (props.username) {
|
||||
return (<>{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}<br /></>);
|
||||
return (
|
||||
<>
|
||||
{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const VisitorsBadge = (props) => {
|
||||
const VisitorsBadge = props => {
|
||||
let link = "https://komarev.com/ghpvc/?username=" + props.github
|
||||
if (props.show) {
|
||||
return (<>{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const GitHubStats = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
|
||||
const GitHubStats = props => {
|
||||
let link =
|
||||
"https://github-readme-stats.vercel.app/api?username=" +
|
||||
props.github +
|
||||
"&show_icons=true"
|
||||
if (props.show) {
|
||||
return (<>{`<p> <img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`<p> <img align="center" src="${link}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
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);
|
||||
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
|
||||
)
|
||||
}
|
||||
const DisplaySkills = (props) => {
|
||||
const listChosenSkills = [];
|
||||
const DisplaySkills = props => {
|
||||
const listChosenSkills = []
|
||||
skills.forEach(skill => {
|
||||
if (props.skills[skill]) {
|
||||
listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
|
||||
listChosenSkills.push(
|
||||
`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`
|
||||
)
|
||||
}
|
||||
});
|
||||
return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
|
||||
})
|
||||
return listChosenSkills.length > 0 ? (
|
||||
<>
|
||||
{`<p align="left">${listChosenSkills.join(" ")}</p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
const DisplayDynamicBlogs = (props) => {
|
||||
const DisplayDynamicBlogs = props => {
|
||||
if (props.show) {
|
||||
return (<>{`### Blogs posts`}
|
||||
return (
|
||||
<>
|
||||
{`### Blogs posts`}
|
||||
<br />
|
||||
{`<!-- BLOG-POST-LIST:START -->`}
|
||||
<br />
|
||||
{`<!-- BLOG-POST-LIST:END -->`}<br /> <br /></>)
|
||||
{`<!-- BLOG-POST-LIST:END -->`}
|
||||
<br /> <br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
const DisplayTopLanguages = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
|
||||
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 (<>{`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (<>{`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
return ""
|
||||
}
|
||||
return (
|
||||
<div id="markdown-content" className="break-words">
|
||||
<><Title prefix={props.prefix.title} title={props.data.title} /></>
|
||||
<><SubTitle subtitle={props.data.subtitle} /></>
|
||||
<><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></>
|
||||
|
||||
<><DisplayWork prefix={props.prefix.currentWork} project={props.data.currentWork} link={props.link.currentWork} /></>
|
||||
<><DisplayWork prefix={props.prefix.currentLearn} project={props.data.currentLearn} /></>
|
||||
<><DisplayWork prefix={props.prefix.collaborateOn} project={props.data.collaborateOn} link={props.link.collaborateOn} /></>
|
||||
<><DisplayWork prefix={props.prefix.helpWith} project={props.data.helpWith} link={props.link.helpWith} /></>
|
||||
<><DisplayWork prefix={props.prefix.portfolio} link={props.link.portfolio} /></>
|
||||
<><DisplayWork prefix={props.prefix.blog} link={props.link.blog} /></>
|
||||
<><DisplayWork prefix={props.prefix.ama} project={props.data.ama} /></>
|
||||
<><DisplayWork prefix={props.prefix.contact} project={props.data.contact} /></>
|
||||
<><DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /></>
|
||||
|
||||
<><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'
|
||||
username={props.social.codepen} /></>
|
||||
<><DisplaySocial base='https://dev.to' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg'
|
||||
username={props.social.dev} /></>
|
||||
<><DisplaySocial base='https://twitter.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg'
|
||||
username={props.social.twitter} /></>
|
||||
<><DisplaySocial base='https://linkedin.com/in' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg'
|
||||
username={props.social.linkedin} /></>
|
||||
<><DisplaySocial base='https://stackoverflow.com/users'
|
||||
icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg' username={props.social.stackoverflow} /></>
|
||||
<><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://www.codechef.com/users' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg'
|
||||
username={props.social.codechef} /></>
|
||||
<><DisplaySocial base='https://www.hackerrank.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg'
|
||||
username={props.social.hackerrank} /></>
|
||||
<><DisplaySocial base='https://codeforces.com/profile' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg'
|
||||
username={props.social.codeforces} /></>
|
||||
<><DisplaySocial base='https://www.leetcode.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg'
|
||||
username={props.social.leetcode} /></>
|
||||
<><DisplaySocial base='https://www.hackerearth.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg'
|
||||
username={props.social.hackerearth} /></>
|
||||
<><DisplaySocial base='https://auth.geeksforgeeks.org/user' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg'
|
||||
username={props.social.geeks_for_geeks} /></>
|
||||
<><DisplaySocial base='https://www.topcoder.com/members' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg'
|
||||
username={props.social.topcoder} /></>
|
||||
{isSocial(props.social) ? `</p>` : ''}
|
||||
<>
|
||||
<Title prefix={props.prefix.title} title={props.data.title} />
|
||||
</>
|
||||
<>
|
||||
<SubTitle subtitle={props.data.subtitle} />
|
||||
</>
|
||||
<>
|
||||
<VisitorsBadge
|
||||
show={props.data.visitorsBadge}
|
||||
github={props.social.github}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.currentWork}
|
||||
project={props.data.currentWork}
|
||||
link={props.link.currentWork}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.currentLearn}
|
||||
project={props.data.currentLearn}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.collaborateOn}
|
||||
project={props.data.collaborateOn}
|
||||
link={props.link.collaborateOn}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.helpWith}
|
||||
project={props.data.helpWith}
|
||||
link={props.link.helpWith}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.portfolio}
|
||||
link={props.link.portfolio}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={props.prefix.blog} link={props.link.blog} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={props.prefix.ama} project={props.data.ama} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.contact}
|
||||
project={props.data.contact}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.funFact}
|
||||
project={props.data.funFact}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<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"
|
||||
username={props.social.codepen}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://dev.to"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
|
||||
username={props.social.dev}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://twitter.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
|
||||
username={props.social.twitter}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
|
||||
username={props.social.linkedin}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
|
||||
username={props.social.stackoverflow}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<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://www.codechef.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
|
||||
username={props.social.codechef}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerrank.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
|
||||
username={props.social.hackerrank}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
|
||||
username={props.social.codeforces}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
|
||||
username={props.social.leetcode}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
|
||||
username={props.social.hackerearth}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
|
||||
username={props.social.geeks_for_geeks}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
|
||||
username={props.social.topcoder}
|
||||
/>
|
||||
</>
|
||||
{isSocial(props.social) ? `</p>` : ""}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Markdown;
|
||||
export default Markdown
|
||||
|
||||
@@ -1,55 +1,85 @@
|
||||
import React from 'react';
|
||||
import { icons, skills } from '../constants/skills';
|
||||
import React from "react"
|
||||
import { icons, skills } from "../constants/skills"
|
||||
|
||||
const MarkdownPreview = (props) => {
|
||||
const TitlePreview = (props) => {
|
||||
const MarkdownPreview = props => {
|
||||
const TitlePreview = props => {
|
||||
if (props.prefix && props.title) {
|
||||
return (
|
||||
<h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
|
||||
<h1 className="text-center text-xl font-bold">
|
||||
{props.prefix + " " + props.title}
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const SubTitlePreview = (props) => {
|
||||
const SubTitlePreview = props => {
|
||||
if (props.subtitle) {
|
||||
return (
|
||||
<h3 className="text-center font-medium">{props.subtitle}</h3>
|
||||
)
|
||||
return <h3 className="text-center font-medium">{props.subtitle}</h3>
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const DisplayWork = (props) => {
|
||||
const DisplayWork = props => {
|
||||
if (props.prefix && props.project) {
|
||||
if (props.link) {
|
||||
return (
|
||||
<div className="my-2">
|
||||
{props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.project}</a>
|
||||
{props.prefix + " "}
|
||||
<a
|
||||
href={props.link}
|
||||
className="no-underline text-blue-700"
|
||||
target="blank"
|
||||
>
|
||||
{props.project}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
} else {
|
||||
return (<div className="my-2">{props.prefix + ' '}<b>{props.project}</b></div>);
|
||||
return (
|
||||
<div className="my-2">
|
||||
{props.prefix + " "}
|
||||
<b>{props.project}</b>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
if (props.prefix && props.link) {
|
||||
return (
|
||||
<div className="my-2">
|
||||
{props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
|
||||
{props.prefix + " "}
|
||||
<a
|
||||
href={props.link}
|
||||
className="no-underline text-blue-700"
|
||||
target="blank"
|
||||
>
|
||||
{props.link}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const WorkPreview = (props) => {
|
||||
const WorkPreview = props => {
|
||||
const prefix = props.work.prefix
|
||||
const data = props.work.data
|
||||
const link = props.work.link
|
||||
return (
|
||||
<>
|
||||
<DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
|
||||
<DisplayWork
|
||||
prefix={prefix.currentWork}
|
||||
project={data.currentWork}
|
||||
link={link.currentWork}
|
||||
/>
|
||||
<DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
|
||||
<DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
|
||||
<DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn}
|
||||
link={link.collaborateOn} />
|
||||
<DisplayWork
|
||||
prefix={prefix.helpWith}
|
||||
project={data.helpWith}
|
||||
link={link.helpWith}
|
||||
/>
|
||||
<DisplayWork
|
||||
prefix={prefix.collaborateOn}
|
||||
project={data.collaborateOn}
|
||||
link={link.collaborateOn}
|
||||
/>
|
||||
<DisplayWork prefix={prefix.ama} project={data.ama} />
|
||||
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
|
||||
<DisplayWork prefix={prefix.blog} link={link.blog} />
|
||||
@@ -58,83 +88,212 @@ const MarkdownPreview = (props) => {
|
||||
</>
|
||||
)
|
||||
}
|
||||
const DisplaySocial = (props) => {
|
||||
const DisplaySocial = props => {
|
||||
if (props.username) {
|
||||
return (<a className="no-underline text-blue-700 m-2" href={props.base + '/' + props.username} target="blank"><img className="w-6 h-6" src={props.icon} alt="props.username" /></a>)
|
||||
return (
|
||||
<a
|
||||
className="no-underline text-blue-700 m-2"
|
||||
href={props.base + "/" + props.username}
|
||||
target="blank"
|
||||
>
|
||||
<img className="w-6 h-6" src={props.icon} alt="props.username" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const SocialPreview = (props) => {
|
||||
const SocialPreview = props => {
|
||||
return (
|
||||
<div className="flex justify-center items-end">
|
||||
<DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} />
|
||||
<DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} />
|
||||
<DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} />
|
||||
<DisplaySocial base="https://linkedin.com/in" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" username={props.social.linkedin} />
|
||||
<DisplaySocial base="https://stackoverflow.com/users" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" username={props.social.stackoverflow} />
|
||||
<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://codepen.io"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
username={props.social.codepen}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://dev.to"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
|
||||
username={props.social.dev}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://twitter.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
|
||||
username={props.social.twitter}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
|
||||
username={props.social.linkedin}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
|
||||
username={props.social.stackoverflow}
|
||||
/>
|
||||
<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://www.codechef.com/users' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg' username={props.social.codechef} />
|
||||
<DisplaySocial base='https://codeforces.com/profile' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg' username={props.social.codeforces} />
|
||||
<DisplaySocial base='https://www.hackerrank.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg' username={props.social.hackerrank} />
|
||||
<DisplaySocial base='https://auth.geeksforgeeks.org/user' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg' username={props.social.geeks_for_geeks} />
|
||||
<DisplaySocial base='https://www.hackerearth.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg' username={props.social.hackerearth} />
|
||||
<DisplaySocial base='https://www.topcoder.com/members' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg' username={props.social.topcoder} />
|
||||
<DisplaySocial base='https://www.leetcode.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg' username={props.social.leetcode} />
|
||||
<DisplaySocial
|
||||
base="https://www.codechef.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
|
||||
username={props.social.codechef}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
|
||||
username={props.social.codeforces}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerrank.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
|
||||
username={props.social.hackerrank}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
|
||||
username={props.social.geeks_for_geeks}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
|
||||
username={props.social.hackerearth}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
|
||||
username={props.social.topcoder}
|
||||
/>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
|
||||
username={props.social.leetcode}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const VisitorsBadgePreview = (props) => {
|
||||
const VisitorsBadgePreview = props => {
|
||||
let link = "https://komarev.com/ghpvc/?username=" + props.github
|
||||
if (props.show) {
|
||||
return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{" "}
|
||||
<img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const GitHubStatsPreview = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
|
||||
const GitHubStatsPreview = props => {
|
||||
let link =
|
||||
"https://github-readme-stats.vercel.app/api?username=" +
|
||||
props.github +
|
||||
"&show_icons=true"
|
||||
if (props.show) {
|
||||
return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={link} alt={props.github} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const TopLanguagesPreview = (props) => {
|
||||
let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
|
||||
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="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={link} alt={props.github} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div className="text-center mx-4 mb-4"> </div>;
|
||||
return <div className="text-center mx-4 mb-4"> </div>
|
||||
}
|
||||
const SkillsPreview = (props) => {
|
||||
const SkillsPreview = props => {
|
||||
var listSkills = []
|
||||
skills.forEach((skill) => {
|
||||
skills.forEach(skill => {
|
||||
if (props.skills[skill]) {
|
||||
listSkills.push(<img className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10" key={skill} src={icons[skill]} alt={skill} />)
|
||||
listSkills.push(
|
||||
<img
|
||||
className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10"
|
||||
key={skill}
|
||||
src={icons[skill]}
|
||||
alt={skill}
|
||||
/>
|
||||
)
|
||||
}
|
||||
});
|
||||
return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{listSkills}</div> : ''
|
||||
})
|
||||
return listSkills.length > 0 ? (
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
{listSkills}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div id="markdown-preview">
|
||||
<TitlePreview prefix={props.prefix.title} title={props.data.title} />
|
||||
<SubTitlePreview subtitle={props.data.subtitle} />
|
||||
<VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
|
||||
<VisitorsBadgePreview
|
||||
show={props.data.visitorsBadge}
|
||||
github={props.social.github}
|
||||
/>
|
||||
<WorkPreview work={props} />
|
||||
<SkillsPreview skills={props.skills} />
|
||||
<div className="block sm:flex sm:justify-center sm:items-start">
|
||||
<TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
|
||||
<GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
|
||||
<TopLanguagesPreview
|
||||
show={props.data.topLanguages}
|
||||
github={props.social.github}
|
||||
/>
|
||||
<GitHubStatsPreview
|
||||
show={props.data.githubStats}
|
||||
github={props.social.github}
|
||||
/>
|
||||
</div>
|
||||
<SocialPreview social={props.social} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkdownPreview;
|
||||
export default MarkdownPreview
|
||||
|
||||
@@ -5,14 +5,21 @@ const Skills = props => {
|
||||
const createSkill = skill => {
|
||||
return (
|
||||
<div className="w-1/3 sm:w-1/4 my-6" key={skill}>
|
||||
<label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
|
||||
<label
|
||||
htmlFor={skill}
|
||||
className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
|
||||
>
|
||||
<input
|
||||
id={skill}
|
||||
type="checkbox"
|
||||
checked={props.skills[skill]}
|
||||
onChange={(event) => props.handleSkillsChange(skill)}
|
||||
onChange={event => props.handleSkillsChange(skill)}
|
||||
/>
|
||||
<img
|
||||
className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
|
||||
src={icons[skill]}
|
||||
alt={skill}
|
||||
/>
|
||||
<img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
|
||||
<span className="tooltiptext">{skill}</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -21,7 +28,9 @@ const Skills = props => {
|
||||
|
||||
return (
|
||||
<div className="px-2 sm:px-6 mb-10">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Skills
|
||||
</div>
|
||||
|
||||
{Object.keys(categorizedSkills).map(key => (
|
||||
<div key={key}>
|
||||
|
||||
+259
-89
@@ -1,141 +1,311 @@
|
||||
import React from 'react';
|
||||
import React from "react"
|
||||
|
||||
const Social = (props) => {
|
||||
const Social = props => {
|
||||
return (
|
||||
<div className="px-2 sm:px-6 mb-4">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Social
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center items-center">
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
|
||||
<input id="github" placeholder="github username"
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="github"
|
||||
/>
|
||||
<input
|
||||
id="github"
|
||||
placeholder="github username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
|
||||
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
|
||||
value={props.social.github}
|
||||
onChange={event => props.handleSocialChange("github", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
|
||||
<input id="twitter" placeholder="twitter username"
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="twitter"
|
||||
/>
|
||||
<input
|
||||
id="twitter"
|
||||
placeholder="twitter username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
|
||||
value={props.social.twitter}
|
||||
onChange={event => props.handleSocialChange("twitter", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
|
||||
<input id="dev" placeholder="dev.to username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="dev.to"
|
||||
/>
|
||||
<input
|
||||
id="dev"
|
||||
placeholder="dev.to username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.dev}
|
||||
onChange={event => props.handleSocialChange("dev", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
|
||||
<input id="codepen" placeholder="codepen username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="codepen"
|
||||
/>
|
||||
<input
|
||||
id="codepen"
|
||||
placeholder="codepen username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codepen}
|
||||
onChange={event => props.handleSocialChange("codepen", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
|
||||
<input id="codesandbox" placeholder="codesandbox username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="codesandbox"
|
||||
/>
|
||||
<input
|
||||
id="codesandbox"
|
||||
placeholder="codesandbox username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codesandbox}
|
||||
onChange={event => props.handleSocialChange("codesandbox", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
|
||||
<input id="stackoverflow" placeholder="stackoverflow user ID" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="stackoverflow"
|
||||
/>
|
||||
<input
|
||||
id="stackoverflow"
|
||||
placeholder="stackoverflow user ID"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.stackoverflow}
|
||||
onChange={event => props.handleSocialChange("stackoverflow", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
|
||||
<input id="linkedin" placeholder="linkedin username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="linkedin"
|
||||
/>
|
||||
<input
|
||||
id="linkedin"
|
||||
placeholder="linkedin username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.linkedin}
|
||||
onChange={event => props.handleSocialChange("linkedin", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
|
||||
<input id="kaggle" placeholder="kaggle username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="kaggle"
|
||||
/>
|
||||
<input
|
||||
id="kaggle"
|
||||
placeholder="kaggle username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.kaggle}
|
||||
onChange={event => props.handleSocialChange("kaggle", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
|
||||
<input id="fb" placeholder="facebook username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="facebook"
|
||||
/>
|
||||
<input
|
||||
id="fb"
|
||||
placeholder="facebook username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.fb}
|
||||
onChange={event => props.handleSocialChange("fb", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
|
||||
<input id="instagram" placeholder="instagram username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="instagram"
|
||||
/>
|
||||
<input
|
||||
id="instagram"
|
||||
placeholder="instagram username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.instagram}
|
||||
onChange={event => props.handleSocialChange("instagram", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
|
||||
<input id="dribbble" placeholder="dribbble username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="dribbble"
|
||||
/>
|
||||
<input
|
||||
id="dribbble"
|
||||
placeholder="dribbble username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.dribbble}
|
||||
onChange={event => props.handleSocialChange("dribbble", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
|
||||
<input id="behance" placeholder="behance username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="behance"
|
||||
/>
|
||||
<input
|
||||
id="behance"
|
||||
placeholder="behance username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.behance}
|
||||
onChange={event => props.handleSocialChange("behance", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
|
||||
<input id="medium" placeholder="medium username (with @)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="medium"
|
||||
/>
|
||||
<input
|
||||
id="medium"
|
||||
placeholder="medium username (with @)"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.medium}
|
||||
onChange={event => props.handleSocialChange("medium", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
|
||||
<input id="youtube" placeholder="youtube channel name" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="youtube"
|
||||
/>
|
||||
<input
|
||||
id="youtube"
|
||||
placeholder="youtube channel name"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.youtube}
|
||||
onChange={event => props.handleSocialChange("youtube", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codechef" />
|
||||
<input id="codechef" placeholder="codechef username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codechef} onChange={event => props.handleSocialChange('codechef', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="codechef"
|
||||
/>
|
||||
<input
|
||||
id="codechef"
|
||||
placeholder="codechef username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codechef}
|
||||
onChange={event => props.handleSocialChange("codechef", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="hackerrank" />
|
||||
<input id="hackerrank" placeholder="hackerrank username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.hackerrank} onChange={event => props.handleSocialChange('hackerrank', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="hackerrank"
|
||||
/>
|
||||
<input
|
||||
id="hackerrank"
|
||||
placeholder="hackerrank username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.hackerrank}
|
||||
onChange={event => props.handleSocialChange("hackerrank", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codeforces" />
|
||||
<input id="codeforces" placeholder="codeforces username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codeforces} onChange={event => props.handleSocialChange('codeforces', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="codeforces"
|
||||
/>
|
||||
<input
|
||||
id="codeforces"
|
||||
placeholder="codeforces username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.codeforces}
|
||||
onChange={event => props.handleSocialChange("codeforces", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="leetcode" />
|
||||
<input id="leetcode" placeholder="leetcode username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.leetcode} onChange={event => props.handleSocialChange('leetcode', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="leetcode"
|
||||
/>
|
||||
<input
|
||||
id="leetcode"
|
||||
placeholder="leetcode username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.leetcode}
|
||||
onChange={event => props.handleSocialChange("leetcode", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="topcoder" />
|
||||
<input id="topcoder" placeholder="topcoder username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.topcoder} onChange={event => props.handleSocialChange('topcoder', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="topcoder"
|
||||
/>
|
||||
<input
|
||||
id="topcoder"
|
||||
placeholder="topcoder username"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.topcoder}
|
||||
onChange={event => props.handleSocialChange("topcoder", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="hackerearth" />
|
||||
<input id="hackerearth" placeholder="hackerearth user (with @)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.hackerearth} onChange={event => props.handleSocialChange('hackerearth', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="hackerearth"
|
||||
/>
|
||||
<input
|
||||
id="hackerearth"
|
||||
placeholder="hackerearth user (with @)"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.hackerearth}
|
||||
onChange={event => props.handleSocialChange("hackerearth", event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="geeksforgeeks" />
|
||||
<input id="geeksforgeeks" placeholder="GFG (<username>/profile)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.geeks_for_geeks} onChange={event => props.handleSocialChange('geeks_for_geeks', event)} />
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="geeksforgeeks"
|
||||
/>
|
||||
<input
|
||||
id="geeksforgeeks"
|
||||
placeholder="GFG (<username>/profile)"
|
||||
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.social.geeks_for_geeks}
|
||||
onChange={event =>
|
||||
props.handleSocialChange("geeks_for_geeks", event)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default Social;
|
||||
export default Social
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
import React from 'react';
|
||||
import React from "react"
|
||||
|
||||
const Subtitle = (props) => {
|
||||
const Subtitle = props => {
|
||||
return (
|
||||
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
|
||||
<input id="subtitle" className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" value={props.data.subtitle}
|
||||
onChange={event => props.handleDataChange('subtitle', event)} />
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Subtitle
|
||||
</div>
|
||||
);
|
||||
<input
|
||||
id="subtitle"
|
||||
className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.data.subtitle}
|
||||
onChange={event => props.handleDataChange("subtitle", event)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Subtitle;
|
||||
export default Subtitle
|
||||
|
||||
+18
-9
@@ -1,19 +1,28 @@
|
||||
import React from 'react';
|
||||
import React from "react"
|
||||
|
||||
const Title = (props) => {
|
||||
const Title = props => {
|
||||
return (
|
||||
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Title
|
||||
</div>
|
||||
<div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
|
||||
<input id="title-prefix"
|
||||
<input
|
||||
id="title-prefix"
|
||||
className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
|
||||
value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
|
||||
<input id="title-name" placeholder="name" className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.prefix.title}
|
||||
onChange={event => props.handlePrefixChange("title", event)}
|
||||
/>
|
||||
<input
|
||||
id="title-name"
|
||||
placeholder="name"
|
||||
className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.data.title}
|
||||
onChange={event => props.handleDataChange('title', event)} />
|
||||
onChange={event => props.handleDataChange("title", event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default Title;
|
||||
export default Title
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const links = {
|
||||
home: '/',
|
||||
about: '/about',
|
||||
addons: '/addons',
|
||||
support: '/support'
|
||||
home: "/",
|
||||
about: "/about",
|
||||
addons: "/addons",
|
||||
support: "/support",
|
||||
}
|
||||
export default links
|
||||
@@ -352,13 +352,16 @@ const icons = {
|
||||
qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
|
||||
wx_widgets:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
|
||||
ember: "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
|
||||
ember:
|
||||
"https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
|
||||
}
|
||||
|
||||
const initialSkillState = {}
|
||||
|
||||
const skillsArray = Object.keys(categorizedSkills).map(key => categorizedSkills[key].skills);
|
||||
const skills = [].concat.apply([], skillsArray).sort();
|
||||
const skillsArray = Object.keys(categorizedSkills).map(
|
||||
key => categorizedSkills[key].skills
|
||||
)
|
||||
const skills = [].concat.apply([], skillsArray).sort()
|
||||
|
||||
skills.forEach(skill => {
|
||||
initialSkillState[skill] = false
|
||||
|
||||
+11
-1
@@ -12,7 +12,17 @@ export default function HTML(props) {
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
{props.headComponents}
|
||||
<script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Loved the tool🚀. Buy me a coffee to support the work!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
|
||||
<script
|
||||
data-name="BMC-Widget"
|
||||
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
|
||||
data-id="rahuldkjain"
|
||||
data-description="Support me on Buy me a coffee!"
|
||||
data-message="Loved the tool🚀. Buy me a coffee to support the work!"
|
||||
data-color="#FF813F"
|
||||
data-position=""
|
||||
data-x_margin="18"
|
||||
data-y_margin="18"
|
||||
></script>
|
||||
</head>
|
||||
<body {...props.bodyAttributes}>
|
||||
{props.preBodyComponents}
|
||||
|
||||
@@ -3,6 +3,7 @@ slug: "/about"
|
||||
date: "2019-05-04"
|
||||
title: "👨💻 About"
|
||||
---
|
||||
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
|
||||
<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
|
||||
</a>
|
||||
@@ -16,6 +17,7 @@ The profile should be neat and minimal to give a clear overview of the work. Non
|
||||
To solve this, GitHub Profile README Generator came into existence.
|
||||
|
||||
So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
|
||||
|
||||
<p align="left">
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
|
||||
<img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
|
||||
@@ -27,14 +29,18 @@ So many developers contributed to the project and made it more awesome to use. Y
|
||||
</p>
|
||||
|
||||
### Contributors 🙏
|
||||
|
||||
List of the developers who contributed to the project. A big shout out for them.
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
|
||||
<img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
|
||||
</a>
|
||||
|
||||
<hr/>
|
||||
|
||||
## How do I create a profile README?
|
||||
|
||||
The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is **rahuldkjain** so I created a new repository with the name **rahuldkjain**. Note: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username.
|
||||
|
||||
1. Create a new repository with the same name (including casing) as your GitHub username: https://github.com/new
|
||||
|
||||
2. Create a README.md file inside the new repo with content (text, GIFs, images, emojis, etc.)
|
||||
@@ -45,6 +51,7 @@ The profile README is created by creating a new repository that’s the same nam
|
||||
<hr/>
|
||||
|
||||
## How to use?
|
||||
|
||||
Tired of editing profile README(.md) to add new features like visitors-count badge, github-stats etc?
|
||||
|
||||
Don't worry. Keep calm, fill the form and let the tool do the work for you
|
||||
@@ -55,6 +62,7 @@ alt="github profile readme generator" width="320" /><br/><br/>
|
||||
<hr/>
|
||||
|
||||
## Why visitors count keeps on increasing?
|
||||
|
||||
So many users raised an issue that the counter keeps on increasing everytime the page reloads.
|
||||
|
||||
Well it is visitors count not "unique" visitors count. The goal of the addon is to provide a good stat of how well the github profile is doing.
|
||||
|
||||
@@ -7,14 +7,17 @@ title: "🚀 Addons"
|
||||
GitHub Profile README Generator tool uses few open-source addons developed by other developers. Including such features makes the tool useful. The developers of this tool is very grateful to use these awesome addons.
|
||||
|
||||
## [GitHub README Stats](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
⚡️ Dynamically generated stats for your github readmes
|
||||
|
||||
#### GitHub Stats Card
|
||||
|
||||
<a href="https://github.com/rahuldkjain" target="blank">
|
||||
<img src="https://github-readme-stats.vercel.app/api?username=rahuldkjain&show_icons=true" width="320" alt="Rahul's github stats"/>
|
||||
</a>
|
||||
|
||||
#### Top Skills Card
|
||||
|
||||
<a href="https://github.com/rahuldkjain" target="blank">
|
||||
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=rahuldkjain&layout=compact&hide=html" width="320" alt="Rahul's github top skills"/>
|
||||
</a>
|
||||
@@ -26,6 +29,7 @@ You can customize the theme too. See how to customize yours [here](https://githu
|
||||
<br/>
|
||||
|
||||
## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)
|
||||
|
||||
It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
|
||||
|
||||
|
||||
@@ -37,27 +41,34 @@ You can customize the color, label and style too. See how to customize [here](ht
|
||||
<br/>
|
||||
|
||||
## [Dynamic Latest Blog Posts](https://github.com/gautamkrishnar/blog-post-workflow)
|
||||
|
||||
Show your latest blog posts from any sources(like dev(.)to, medium etc) or StackOverflow activity on your GitHub profile/project readme automatically using the RSS feed.
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/8397274/88047382-29b8b280-cb6f-11ea-9efb-2af2b10f3e0c.png" width="320" alt="dynamic latest blog example"/>
|
||||
|
||||
Developed by [Gautam Krishna R](https://github.com/gautamkrishnar)
|
||||
|
||||
### How to use
|
||||
|
||||
- Go to your repository
|
||||
- Add the following section to your **README.md** file, you can give whatever title you want. Just make sure that you use **<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->** in your readme. The workflow will replace this comment with the actual blog post list:
|
||||
|
||||
```markdown
|
||||
# Blog posts
|
||||
|
||||
<!-- BLOG-POST-LIST:START -->
|
||||
<!-- BLOG-POST-LIST:END -->
|
||||
```
|
||||
|
||||
- Create a folder named `.github` and create `workflows` folder inside it if it doesn't exist.
|
||||
- Create a new file named `blog-post-workflow.yml` with the following contents inside the workflows folder:
|
||||
|
||||
```yaml
|
||||
name: Latest blog post workflow
|
||||
on:
|
||||
schedule:
|
||||
# Runs every hour
|
||||
- cron: '0 * * * *'
|
||||
- cron: "0 * * * *"
|
||||
jobs:
|
||||
update-readme-with-blog:
|
||||
name: Update this repo's README with latest blog posts
|
||||
|
||||
@@ -19,9 +19,11 @@ You can come forward to support the developers by making small donations. You wi
|
||||
|
||||
<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
|
||||
</a>
|
||||
|
||||
</p>
|
||||
|
||||
## Social Support 🤝
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
|
||||
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
|
||||
</a>
|
||||
@@ -36,7 +38,6 @@ Let the world know how you feel using this tool. Share with others on twitter.
|
||||
|
||||
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>— Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
|
||||
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&ref_src=twsrc%5Etfw">#github</a></p>— Steve "ardalis" Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>— Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
|
||||
@@ -47,21 +48,17 @@ Let the world know how you feel using this tool. Share with others on twitter.
|
||||
|
||||
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone's repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>— 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>— Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
|
||||
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>— Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
|
||||
|
||||
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>. <a href="https://twitter.com/hashtag/rstats?src=hash&ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&ref_src=twsrc%5Etfw">#github</a> <a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a> <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>— Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
|
||||
|
||||
|
||||
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>— Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>
|
||||
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
## Sponsors 🙇
|
||||
|
||||
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
|
||||
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
|
||||
|
||||
@@ -69,7 +69,6 @@ a {
|
||||
color: var(--dark-purple);
|
||||
}
|
||||
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
@@ -109,7 +108,6 @@ a {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
|
||||
.checkbox {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -128,7 +126,4 @@ a {
|
||||
.workflow {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
+18
-6
@@ -39,7 +39,7 @@ const DEFAULT_PREFIX = {
|
||||
contact: "📫 How to reach me",
|
||||
funFact: "⚡ Fun fact",
|
||||
portfolio: "👨💻 All of my projects are available at",
|
||||
blog: "📝 I regularly write articles on",
|
||||
blog: "📝 I regulary write articles on",
|
||||
}
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
@@ -171,7 +171,7 @@ const IndexPage = () => {
|
||||
duration: 0.5,
|
||||
ease: "Linear.easeNone",
|
||||
})
|
||||
tl.set("#form", { display: "none" });
|
||||
tl.set("#form", { display: "none" })
|
||||
setDisplayLoader(true)
|
||||
setTimeout(() => {
|
||||
setDisplayLoader(false)
|
||||
@@ -575,7 +575,10 @@ const IndexPage = () => {
|
||||
</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">
|
||||
<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}
|
||||
@@ -604,7 +607,12 @@ const IndexPage = () => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<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 " + (generateMarkdown || generatePreview ? "hidden" : "block")}>
|
||||
<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 " +
|
||||
(generateMarkdown || generatePreview ? "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
|
||||
@@ -640,8 +648,12 @@ const IndexPage = () => {
|
||||
</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 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>
|
||||
|
||||
@@ -13,10 +13,26 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
|
||||
<div>
|
||||
<SEO title="Using TypeScript" />
|
||||
<h1>Gatsby supports TypeScript by default!</h1>
|
||||
<p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
|
||||
<p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
|
||||
<p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
|
||||
<p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
|
||||
<p>
|
||||
This means that you can create and write <em>.ts/.tsx</em> files for your
|
||||
pages, components etc. Please note that the <em>gatsby-*.js</em> files
|
||||
(like gatsby-node.js) currently don't support TypeScript yet.
|
||||
</p>
|
||||
<p>
|
||||
For type checking you'll want to install <em>typescript</em> via npm and
|
||||
run <em>tsc --init</em> to create a <em>.tsconfig</em> file.
|
||||
</p>
|
||||
<p>
|
||||
You're currently on the page "{path}" which was built on{" "}
|
||||
{data.site.buildTime}.
|
||||
</p>
|
||||
<p>
|
||||
To learn more, head over to our{" "}
|
||||
<a href="https://www.gatsbyjs.org/docs/typescript/">
|
||||
documentation about TypeScript
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
// import Header from '../components/header'
|
||||
// import Footer from '../components/footer'
|
||||
import {Helmet} from "react-helmet";
|
||||
import Layout from "../components/layout";
|
||||
import { Helmet } from "react-helmet"
|
||||
import Layout from "../components/layout"
|
||||
|
||||
export default function Template({
|
||||
data, // this prop will be injected by the GraphQL query below.
|
||||
@@ -15,7 +15,10 @@ export default function Template({
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title>{frontmatter.title}</title>
|
||||
<link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
|
||||
<link
|
||||
rel="canonical"
|
||||
href={`https://rahuldkjain.github.io/gh-profile-readme-generator`}
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="m-4 sm:p-10">
|
||||
<div className="blog-post">
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
const isGitHubUsernameValid = (username) => {
|
||||
const isGitHubUsernameValid = username => {
|
||||
var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
|
||||
return pattern.test(username)
|
||||
}
|
||||
const isMediumUsernameValid = (username) => {
|
||||
const isMediumUsernameValid = username => {
|
||||
if (username) {
|
||||
return username[0] === '@'
|
||||
return username[0] === "@"
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
export { isGitHubUsernameValid, isMediumUsernameValid };
|
||||
export { isGitHubUsernameValid, isMediumUsernameValid }
|
||||
|
||||
+17
-7
@@ -1,13 +1,23 @@
|
||||
import { isMediumUsernameValid } from "../utils/validation"
|
||||
|
||||
const latestBlogs = (payload) => {
|
||||
let rssFeed = ''
|
||||
if (payload.dev.show && payload.dev.username && payload.medium.show && payload.medium.username && isMediumUsernameValid(payload.medium.username)) {
|
||||
rssFeed = 'https://dev.to/feed/' + payload.dev.username + ', https://medium.com/feed/' + payload.medium.username
|
||||
const latestBlogs = payload => {
|
||||
let rssFeed = ""
|
||||
if (
|
||||
payload.dev.show &&
|
||||
payload.dev.username &&
|
||||
payload.medium.show &&
|
||||
payload.medium.username &&
|
||||
isMediumUsernameValid(payload.medium.username)
|
||||
) {
|
||||
rssFeed =
|
||||
"https://dev.to/feed/" +
|
||||
payload.dev.username +
|
||||
", https://medium.com/feed/" +
|
||||
payload.medium.username
|
||||
} else if (payload.dev.show && payload.dev.username) {
|
||||
rssFeed = 'https://dev.to/feed/' + payload.dev.username
|
||||
rssFeed = "https://dev.to/feed/" + payload.dev.username
|
||||
} else {
|
||||
rssFeed = 'https://medium.com/feed/' + payload.medium.username
|
||||
rssFeed = "https://medium.com/feed/" + payload.medium.username
|
||||
}
|
||||
let data = `name: Latest blog post workflow
|
||||
on:
|
||||
@@ -22,7 +32,7 @@ jobs:
|
||||
- uses: gautamkrishnar / blog - post - workflow@master
|
||||
with:
|
||||
max_post_count: "4",
|
||||
feed_list: "${rssFeed}"`;
|
||||
feed_list: "${rssFeed}"`
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
+16
-16
@@ -3,24 +3,24 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {},
|
||||
fontSize: {
|
||||
'xxs': '.60rem',
|
||||
'xs': '.75rem',
|
||||
'sm': '.875rem',
|
||||
'tiny': '.875rem',
|
||||
'base': '1rem',
|
||||
'lg': '1.125rem',
|
||||
'xl': '1.25rem',
|
||||
'2xl': '1.5rem',
|
||||
'3xl': '1.875rem',
|
||||
'4xl': '2.25rem',
|
||||
'5xl': '3rem',
|
||||
'6xl': '4rem',
|
||||
'7xl': '5rem',
|
||||
xxs: ".60rem",
|
||||
xs: ".75rem",
|
||||
sm: ".875rem",
|
||||
tiny: ".875rem",
|
||||
base: "1rem",
|
||||
lg: "1.125rem",
|
||||
xl: "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "3rem",
|
||||
"6xl": "4rem",
|
||||
"7xl": "5rem",
|
||||
},
|
||||
fontFamily: {
|
||||
'title': ['Lato', 'sans-serif'],
|
||||
'body': ['Roboto Mono', 'monospace'],
|
||||
}
|
||||
title: ["Lato", "sans-serif"],
|
||||
body: ["Roboto Mono", "monospace"],
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
|
||||
Reference in New Issue
Block a user