Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dependabot[bot]
|
a0161bfeac | ||
|
Rahul Jain
|
888aff31e1 | ||
|
Rahul Jain
|
f4b2f5cf88 | ||
|
Rahul Jain
|
c83a129e01 | ||
|
Rahul Jain
|
3461a5b865 | ||
|
Rahul Jain
|
c919601f7e | ||
|
Eliot Sanford
|
5e0cd2e639 | ||
|
Eliot Sanford
|
9b24ae64c9 | ||
|
Eliot Sanford
|
71d1fafbd6 | ||
|
Rahul Jain
|
8947cb3641 | ||
|
Rahul Jain
|
7898e38f8e | ||
|
Rahul Jain
|
b23cab5944 | ||
|
Rahul Jain
|
8899046e5e | ||
|
Rahul Jain
|
a0e34df02d | ||
|
Rahul Jain
|
9ba8ccff66 | ||
|
Rahul Jain
|
004401a8d1 | ||
|
Rahul Jain
|
fb6389f569 |
@@ -0,0 +1 @@
|
||||
node_modules/**
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
},
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": ["react"],
|
||||
"rules": {
|
||||
"react/forbid-prop-types": 0
|
||||
},
|
||||
"ignorePatterns": ["**/*.test.js"]
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ""
|
||||
title: ''
|
||||
labels: bug
|
||||
assignees: ""
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
@@ -39,7 +39,6 @@ If applicable, add screenshots to help explain your problem.
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
|
||||
|
||||
Join the **Discord Server** for further discussions.
|
||||
|
||||
<a href="https://discord.gg/HHMs7Eg">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
name: Feature/Enhancement request
|
||||
about: Suggest an idea for this project
|
||||
title: ""
|
||||
title: ''
|
||||
labels: enhancement, hacktoberfest
|
||||
assignees: ""
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
|
||||
@@ -40,4 +40,3 @@ as any relevant images for UI changes._
|
||||
## Added to documentation?
|
||||
|
||||
- [ ] readme
|
||||
|
||||
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install lint-staged
|
||||
+7
-2
@@ -1,4 +1,9 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"semi": false
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": false,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "all",
|
||||
"semi": true,
|
||||
"exclude": ["node_modules", "codepipeline"]
|
||||
}
|
||||
|
||||
+13
-13
@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
|
||||
Examples of behavior that contributes to creating a positive environment
|
||||
include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or
|
||||
advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic
|
||||
address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
|
||||
+58
-50
@@ -9,22 +9,25 @@
|
||||
|
||||
## Reusable components
|
||||
|
||||
* Do not make a new file for smaller components.
|
||||
* Smaller, reusable components needed in the main components should be added **above** the main component, **not** inside it.
|
||||
* Use ES6 arrow functions for defining components.
|
||||
- Do not make a new file for smaller components.
|
||||
- Smaller, reusable components needed in the main components should be added **above** the main component, **not** inside it.
|
||||
- Use ES6 arrow functions for defining components.
|
||||
|
||||
## Spacing
|
||||
|
||||
1. **JS:**
|
||||
* Use a space after `if`, `for`, `while`, `switch`.
|
||||
* Do not use a space after the opening `(` and before the closing `)`.
|
||||
* Use a space before and after destructuring objects.
|
||||
```js
|
||||
//good
|
||||
const { apple, mangoes } = fruits;
|
||||
|
||||
//bad
|
||||
const {apple, mangoes} = fruits;
|
||||
|
||||
- Use a space after `if`, `for`, `while`, `switch`.
|
||||
- Do not use a space after the opening `(` and before the closing `)`.
|
||||
- Use a space before and after destructuring objects.
|
||||
|
||||
```js
|
||||
//good
|
||||
const { apple, mangoes } = fruits;
|
||||
|
||||
//bad
|
||||
const { apple, mangoes } = fruits;
|
||||
```
|
||||
|
||||
|
||||
//Same for destructuring props:
|
||||
@@ -36,56 +39,61 @@
|
||||
```
|
||||
|
||||
2. **JSX:**
|
||||
* Use a space before the forward slash (`/`) of a self-closing tag
|
||||
```js
|
||||
//good
|
||||
<Foo />
|
||||
|
||||
//bad
|
||||
<Foo/>
|
||||
```
|
||||
* Do **not** use spaces for JSX curly braces
|
||||
```js
|
||||
//good
|
||||
<Foo bar={baz} />
|
||||
- Use a space before the forward slash (`/`) of a self-closing tag
|
||||
|
||||
//bad
|
||||
<Foo bar={ baz } />
|
||||
```
|
||||
```js
|
||||
//good
|
||||
<Foo />
|
||||
|
||||
//bad
|
||||
<Foo/>
|
||||
```
|
||||
|
||||
- Do **not** use spaces for JSX curly braces
|
||||
|
||||
```js
|
||||
//good
|
||||
<Foo bar={baz} />
|
||||
|
||||
//bad
|
||||
<Foo bar={ baz } />
|
||||
```
|
||||
|
||||
## **Props:**
|
||||
|
||||
* Use camelCase for prop names, or PascalCase if the prop value is a React component.
|
||||
* Use new lines when props do not fit on the same line.
|
||||
```js
|
||||
//good
|
||||
<Foo
|
||||
prop1={value1}
|
||||
prop2={value2}
|
||||
prop3={value3}
|
||||
/>
|
||||
- Use camelCase for prop names, or PascalCase if the prop value is a React component.
|
||||
- Use new lines when props do not fit on the same line.
|
||||
|
||||
//bad
|
||||
<Foo prop1={value1} prop2={value2} prop3={value3} />
|
||||
```
|
||||
```js
|
||||
//good
|
||||
<Foo
|
||||
prop1={value1}
|
||||
prop2={value2}
|
||||
prop3={value3}
|
||||
/>
|
||||
|
||||
//bad
|
||||
<Foo prop1={value1} prop2={value2} prop3={value3} />
|
||||
```
|
||||
|
||||
## **Best practices:**
|
||||
|
||||
* **Always** add semicolons after a line.
|
||||
* Use ES6 arrow functions.
|
||||
* Keep the indentation in your code correct.
|
||||
* Use 4 spaces for tabs.
|
||||
* Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
|
||||
* **Always** add alt prop to `img` tags.
|
||||
* Add `rel="noopener"` for `a` tags which has `target="_blank"`.
|
||||
* Don't do `outline: none` on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.
|
||||
- **Always** add semicolons after a line.
|
||||
- Use ES6 arrow functions.
|
||||
- Keep the indentation in your code correct.
|
||||
- Use 4 spaces for tabs.
|
||||
- Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
|
||||
- **Always** add alt prop to `img` tags.
|
||||
- Add `rel="noopener"` for `a` tags which has `target="_blank"`.
|
||||
- Don't do `outline: none` on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.
|
||||
|
||||
### Other things to note
|
||||
|
||||
* We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
|
||||
* Try to not commit changes in `package.json`, `package-lock.json`.
|
||||
* Discuss with contributors on discord if you're planning to add/remove a package.
|
||||
- We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
|
||||
- Try to not commit changes in `package.json`, `package-lock.json`.
|
||||
- Discuss with contributors on discord if you're planning to add/remove a package.
|
||||
|
||||
## Further reading:
|
||||
|
||||
This guide is based on [airbnb's react guide](https://github.com/airbnb/javascript/tree/master/react). You can read all the best practices there.
|
||||
This guide is based on [airbnb's react guide](https://github.com/airbnb/javascript/tree/master/react). You can read all the best practices there.
|
||||
|
||||
@@ -54,8 +54,8 @@
|
||||
|
||||
This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as `visitors count`, `github stats`, etc.
|
||||
|
||||
## 🚀 Demo
|
||||
|
||||
## 🚀 Demo
|
||||
<a href="https://rahuldkjain.github.io/gh-profile-readme-generator" target="blank">
|
||||
<img src="https://img.shields.io/website?url=https%3A%2F%2Frahuldkjain.github.io%2Fgh-profile-readme-generator&logo=github&style=flat-square" />
|
||||
</a>
|
||||
@@ -126,11 +126,11 @@ Please contribute using [GitHub Flow](https://guides.github.com/introduction/flo
|
||||
Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
|
||||
|
||||
## 💻 Built with
|
||||
|
||||
- [Gatsby](https://www.gatsbyjs.com/)
|
||||
- [Tailwind CSS](https://tailwindcss.com/): for styling
|
||||
- [GSAP](https://greensock.com/gsap/): for small SVG Animations
|
||||
|
||||
|
||||
## 🙇 Special Thanks
|
||||
|
||||
- [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
|
||||
@@ -138,6 +138,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
|
||||
- [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
|
||||
- [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
|
||||
- [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
|
||||
- [Eliot Sanford](https://github.com/techieeliot) for adding hashnode as a blog input
|
||||
|
||||
## 🙇 Sponsors
|
||||
|
||||
@@ -146,7 +147,6 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
|
||||
- [Aadit Kamat](https://github.com/aaditkamat) find the tool useful and showed support with his donation. A big thanks to him.
|
||||
- [Jean-Michel Fayard](https://github.com/jmfayard) used the generator to create his GitHub Profile README and he loved it. Thanks to him for showing support to the tool with the donation.
|
||||
|
||||
|
||||
## 🙏 Support
|
||||
|
||||
<p align="left">
|
||||
@@ -163,7 +163,6 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
|
||||
<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" />
|
||||
</p>
|
||||
|
||||
|
||||
<hr>
|
||||
<p align="center">
|
||||
Developed with ❤️ in India 🇮🇳
|
||||
|
||||
@@ -1 +1 @@
|
||||
module.exports = "test-file-stub"
|
||||
module.exports = 'test-file-stub';
|
||||
|
||||
+8
-16
@@ -1,27 +1,19 @@
|
||||
const React = require("react")
|
||||
const gatsby = jest.requireActual("gatsby")
|
||||
/* eslint-disable no-undef */
|
||||
const React = require('react');
|
||||
|
||||
const gatsby = jest.requireActual('gatsby');
|
||||
|
||||
module.exports = {
|
||||
...gatsby,
|
||||
graphql: jest.fn(),
|
||||
Link: jest.fn().mockImplementation(
|
||||
// these props are invalid for an `a` tag
|
||||
({
|
||||
activeClassName,
|
||||
activeStyle,
|
||||
getProps,
|
||||
innerRef,
|
||||
partiallyActive,
|
||||
ref,
|
||||
replace,
|
||||
to,
|
||||
...rest
|
||||
}) =>
|
||||
React.createElement("a", {
|
||||
({ activeClassName, activeStyle, getProps, innerRef, partiallyActive, ref, replace, to, ...rest }) =>
|
||||
React.createElement('a', {
|
||||
...rest,
|
||||
href: to,
|
||||
})
|
||||
}),
|
||||
),
|
||||
StaticQuery: jest.fn(),
|
||||
useStaticQuery: jest.fn(),
|
||||
}
|
||||
};
|
||||
|
||||
+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');
|
||||
|
||||
+3
-3
@@ -44,7 +44,7 @@ module.exports = {
|
||||
{
|
||||
resolve: `gatsby-plugin-google-analytics`,
|
||||
options: {
|
||||
trackingId: "UA-168596085-3",
|
||||
trackingId: 'UA-168596085-3',
|
||||
// this option places the tracking script into the head of the DOM
|
||||
head: true,
|
||||
// other options
|
||||
@@ -53,7 +53,7 @@ module.exports = {
|
||||
{
|
||||
resolve: `gatsby-plugin-postcss`,
|
||||
options: {
|
||||
postCssPlugins: [require("tailwindcss")],
|
||||
postCssPlugins: [require('tailwindcss')],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -69,4 +69,4 @@ module.exports = {
|
||||
// this (optional) plugin enables Progressive Web App + Offline functionality
|
||||
// To learn more, visit: https://gatsby.dev/offline
|
||||
// `gatsby-plugin-offline`,
|
||||
}
|
||||
};
|
||||
|
||||
+9
-12
@@ -1,14 +1,11 @@
|
||||
exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
const { createPage } = actions
|
||||
const { createPage } = actions;
|
||||
|
||||
const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
|
||||
const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`);
|
||||
|
||||
const result = await graphql(`
|
||||
{
|
||||
allMarkdownRemark(
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
limit: 1000
|
||||
) {
|
||||
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }, limit: 1000) {
|
||||
edges {
|
||||
node {
|
||||
frontmatter {
|
||||
@@ -18,12 +15,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
`);
|
||||
|
||||
// Handle errors
|
||||
if (result.errors) {
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`)
|
||||
return
|
||||
reporter.panicOnBuild(`Error while running GraphQL query.`);
|
||||
return;
|
||||
}
|
||||
|
||||
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
@@ -34,6 +31,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
// additional data can be passed via context
|
||||
slug: node.frontmatter.slug,
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
const babelOptions = {
|
||||
presets: ["babel-preset-gatsby"],
|
||||
}
|
||||
presets: ['babel-preset-gatsby'],
|
||||
};
|
||||
|
||||
module.exports = require("babel-jest").createTransformer(babelOptions)
|
||||
module.exports = require('babel-jest').createTransformer(babelOptions);
|
||||
|
||||
+7
-7
@@ -1,20 +1,20 @@
|
||||
module.exports = {
|
||||
transform: {
|
||||
"^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
|
||||
'^.+\\.jsx?$': `<rootDir>/jest-preprocess.js`,
|
||||
},
|
||||
moduleNameMapper: {
|
||||
".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
|
||||
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
|
||||
'.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
|
||||
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
|
||||
},
|
||||
testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
|
||||
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
|
||||
globals: {
|
||||
__PATH_PREFIX__: ``,
|
||||
__BASE_PATH__: ``,
|
||||
__BASE_PATH__: ``,
|
||||
},
|
||||
setupFiles: [`<rootDir>/loadershim.js`],
|
||||
setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
|
||||
snapshotSerializers: ["enzyme-to-json/serializer"],
|
||||
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
|
||||
snapshotSerializers: ['enzyme-to-json/serializer'],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 0,
|
||||
@@ -23,4 +23,4 @@ module.exports = {
|
||||
statements: 68,
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
global.___loader = {
|
||||
enqueue: jest.fn(),
|
||||
}
|
||||
};
|
||||
|
||||
Generated
+43631
-15710
File diff suppressed because it is too large
Load Diff
+34
-8
@@ -4,23 +4,39 @@
|
||||
"description": "A simple react app to generate beautiful github profile readme in md(markdown)",
|
||||
"version": "1.2.0",
|
||||
"author": "Rahul Jain <rahuldkjain@gmail.com>",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{html,css,less,ejs}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons-react": "^10.0.0",
|
||||
"axios": "^0.24.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"eslint": "^7.17.0",
|
||||
"gatsby": "^2.23.12",
|
||||
"gatsby": "^5.5.0",
|
||||
"gatsby-image": "^2.4.9",
|
||||
"gatsby-plugin-google-analytics": "^2.3.11",
|
||||
"gatsby-plugin-manifest": "^2.4.14",
|
||||
"gatsby-plugin-offline": "^3.2.13",
|
||||
"gatsby-plugin-manifest": "^5.5.0",
|
||||
"gatsby-plugin-offline": "^6.5.0",
|
||||
"gatsby-plugin-react-helmet": "^3.3.6",
|
||||
"gatsby-plugin-sharp": "2.6.14",
|
||||
"gatsby-plugin-sharp": "2.14.4",
|
||||
"gatsby-remark-prismjs": "^3.5.10",
|
||||
"gatsby-source-filesystem": "^2.3.23",
|
||||
"gatsby-transformer-remark": "^2.8.27",
|
||||
"gatsby-transformer-sharp": "^2.5.7",
|
||||
"gatsby-transformer-remark": "^6.5.0",
|
||||
"gatsby-transformer-sharp": "^5.5.0",
|
||||
"gsap": "^3.4.0",
|
||||
"prismjs": "^1.25.0",
|
||||
"prop-types": "^15.7.2",
|
||||
@@ -31,13 +47,23 @@
|
||||
"devDependencies": {
|
||||
"babel-jest": "26.3.0",
|
||||
"babel-preset-gatsby": "0.5.11",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-airbnb": "^18.2.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.25.2",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.26.1",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"gatsby-plugin-postcss": "^2.3.11",
|
||||
"gatsby-plugin-purgecss": "^5.0.0",
|
||||
"gatsby-plugin-twitter": "^2.3.10",
|
||||
"gatsby-remark-embedder": "^3.0.0",
|
||||
"gatsby-remark-embedder": "^6.0.1",
|
||||
"gh-pages": "^3.1.0",
|
||||
"husky": "^7.0.4",
|
||||
"identity-obj-proxy": "3.0.0",
|
||||
"jest": "26.4.2",
|
||||
"lint-staged": "^11.2.6",
|
||||
"prettier": "2.0.5",
|
||||
"tailwindcss": "^1.7.6"
|
||||
},
|
||||
|
||||
+3
-3
@@ -1,4 +1,4 @@
|
||||
import { configure } from "enzyme"
|
||||
import Adapter from "enzyme-adapter-react-16"
|
||||
import { configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
configure({ adapter: new Adapter() })
|
||||
configure({ adapter: new Adapter() });
|
||||
|
||||
@@ -368,7 +368,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -385,6 +385,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<XCircleIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -515,6 +516,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
>
|
||||
Preview:
|
||||
<img
|
||||
alt="profile-visitors-count"
|
||||
src="https://komarev.com/ghpvc/?username=undefined&label=Profile%20views&color=0e75b6&style=flat"
|
||||
/>
|
||||
</span>
|
||||
@@ -543,7 +545,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -595,7 +597,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -612,6 +614,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -685,7 +688,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -702,6 +705,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -763,7 +767,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -780,6 +784,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -831,7 +836,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -861,7 +866,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -891,7 +896,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -921,7 +926,7 @@ exports[`Addons should render Customize Badges 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1070,7 +1075,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1087,6 +1092,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -1138,7 +1144,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1190,7 +1196,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1207,6 +1213,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<XCircleIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -1406,7 +1413,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
@@ -1483,7 +1490,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1500,6 +1507,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -1561,7 +1569,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1578,6 +1586,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -1629,7 +1638,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1659,7 +1668,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1689,7 +1698,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1719,7 +1728,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1868,7 +1877,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1885,6 +1894,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -1936,7 +1946,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -1988,7 +1998,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2005,6 +2015,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -2078,7 +2089,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2095,6 +2106,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<XCircleIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -2294,7 +2306,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
@@ -2359,7 +2371,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2376,6 +2388,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<ToolsIcon
|
||||
className="transform scale-100 md:scale-125"
|
||||
@@ -2427,7 +2440,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2457,7 +2470,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2487,7 +2500,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
@@ -2517,7 +2530,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
|
||||
@@ -24,8 +24,7 @@ exports[`Footer component renders correctly 1`] = `
|
||||
<div
|
||||
className="mr-2 sm:mr-0"
|
||||
>
|
||||
GitHub Profile
|
||||
|
||||
GitHub Profile
|
||||
<img
|
||||
alt="github profile markdown generator logo"
|
||||
className="inline sm:hidden h-12"
|
||||
|
||||
@@ -35,6 +35,7 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -51,24 +52,30 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -181,7 +188,13 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -211,7 +224,19 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -250,6 +275,7 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -266,24 +292,30 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -396,7 +428,13 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -426,7 +464,19 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -465,6 +515,7 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -481,24 +532,30 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -611,7 +668,13 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -641,7 +704,19 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -680,6 +755,7 @@ exports[`Markdown renders topLanguages is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -696,24 +772,30 @@ exports[`Markdown renders topLanguages is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -826,7 +908,13 @@ exports[`Markdown renders topLanguages is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -856,7 +944,19 @@ exports[`Markdown renders topLanguages is true 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -895,6 +995,7 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -911,24 +1012,30 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -1041,7 +1148,13 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -1071,7 +1184,19 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
|
||||
}
|
||||
show={true}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1110,6 +1235,7 @@ exports[`Markdown renders twitterBadge is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -1126,24 +1252,30 @@ exports[`Markdown renders twitterBadge is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -1256,7 +1388,13 @@ exports[`Markdown renders twitterBadge is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -1286,7 +1424,19 @@ exports[`Markdown renders twitterBadge is true 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1325,6 +1475,7 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -1341,24 +1492,30 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -1471,7 +1628,13 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -1501,7 +1664,19 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1540,6 +1715,7 @@ exports[`Markdown renders without link.currentWork 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -1554,23 +1730,32 @@ exports[`Markdown renders without link.currentWork 1`] = `
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -1683,7 +1868,13 @@ exports[`Markdown renders without link.currentWork 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -1713,7 +1904,19 @@ exports[`Markdown renders without link.currentWork 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1752,6 +1955,7 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -1768,24 +1972,30 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -1898,7 +2108,13 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -1928,7 +2144,19 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1967,6 +2195,7 @@ exports[`Markdown renders without subtitle 1`] = `
|
||||
project="currentWork"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -1983,24 +2212,30 @@ exports[`Markdown renders without subtitle 1`] = `
|
||||
<DisplayWork
|
||||
link="portfolio"
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="blog"
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link="resume"
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
@@ -2113,7 +2348,13 @@ exports[`Markdown renders without subtitle 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplaySupport />
|
||||
<DisplaySupport
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<DisplayTopLanguages
|
||||
options={
|
||||
Object {
|
||||
@@ -2143,6 +2384,18 @@ exports[`Markdown renders without subtitle 1`] = `
|
||||
}
|
||||
show={false}
|
||||
/>
|
||||
<DisplayStreakStats />
|
||||
<DisplayStreakStats
|
||||
options={
|
||||
Object {
|
||||
"bgColor": "",
|
||||
"cacheSeconds": "",
|
||||
"hideBorder": "",
|
||||
"locale": "",
|
||||
"textColor": "",
|
||||
"theme": "",
|
||||
"titleColor": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -7,7 +7,7 @@ exports[`DisplaySocial Preview renders correctly 1`] = `
|
||||
target="blank"
|
||||
>
|
||||
<img
|
||||
alt="props.username"
|
||||
alt="username"
|
||||
className="w-6 h-6"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
/>
|
||||
@@ -219,6 +219,9 @@ exports[`Markdown Preview renders correctly 1`] = `
|
||||
"twitter": "",
|
||||
"youtube": "",
|
||||
},
|
||||
"support": Object {
|
||||
"buyMeACoffee": "",
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
@@ -254,7 +257,13 @@ exports[`Markdown Preview renders correctly 1`] = `
|
||||
<SkillsPreview
|
||||
skills={Object {}}
|
||||
/>
|
||||
<SupportPreview />
|
||||
<SupportPreview
|
||||
support={
|
||||
Object {
|
||||
"buyMeACoffee": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="block sm:flex sm:justify-center sm:items-start"
|
||||
>
|
||||
@@ -290,6 +299,8 @@ exports[`Markdown Preview renders correctly 1`] = `
|
||||
/>
|
||||
<StreakStatsPreview
|
||||
github=""
|
||||
options={Object {}}
|
||||
show={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -504,8 +515,9 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
|
||||
>
|
||||
|
||||
<a
|
||||
href="https://twitter.com/\${props.twitter}"
|
||||
target="blank"
|
||||
href="https://twitter.com/"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
@@ -541,6 +553,7 @@ exports[`Work Preview renders correctly 1`] = `
|
||||
project="readme-generator"
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="🌱 I’m currently learning"
|
||||
project=""
|
||||
/>
|
||||
@@ -555,26 +568,32 @@ exports[`Work Preview renders correctly 1`] = `
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="💬 Ask me about"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="👨💻 All of my projects are available at"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📝 I regularly write articles on"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📄 Know about my experiences"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="📫 How to reach me"
|
||||
project=""
|
||||
/>
|
||||
<DisplayWork
|
||||
link=""
|
||||
prefix="⚡ Fun fact"
|
||||
project=""
|
||||
/>
|
||||
|
||||
@@ -61,7 +61,7 @@ exports[`Skills renders correctly 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<img
|
||||
alt="javascript"
|
||||
@@ -104,7 +104,7 @@ exports[`Skills renders correctly 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<img
|
||||
alt="react"
|
||||
@@ -133,7 +133,7 @@ exports[`Skills renders correctly 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="checkbox-label__control"
|
||||
className="checkbox-label__control"
|
||||
/>
|
||||
<img
|
||||
alt="svelte"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,12 +1,11 @@
|
||||
import React from "react"
|
||||
import toJson from "enzyme-to-json"
|
||||
import { shallow } from "enzyme"
|
||||
import React from 'react';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import { shallow } from 'enzyme';
|
||||
import Donate from '../donate';
|
||||
|
||||
import Donate from "../donate"
|
||||
|
||||
describe("Donate", () => {
|
||||
it("renders correctly", () => {
|
||||
const component = shallow(<Donate />)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe('Donate', () => {
|
||||
it('renders correctly', () => {
|
||||
const component = shallow(<Donate />);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Footer from "../footer"
|
||||
import Footer from '../footer';
|
||||
|
||||
describe("Footer component", () => {
|
||||
const component = shallow(<Footer />)
|
||||
describe('Footer component', () => {
|
||||
const component = shallow(<Footer />);
|
||||
|
||||
it("renders correctly", () => {
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
it('renders correctly', () => {
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Header from "../header"
|
||||
import Header from '../header';
|
||||
|
||||
describe("Header", () => {
|
||||
const component = shallow(<Header heading="heading" />)
|
||||
describe('Header', () => {
|
||||
const component = shallow(<Header heading="heading" />);
|
||||
|
||||
it("renders correctly", () => {
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
it('renders correctly', () => {
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Loader from "../loader"
|
||||
import Loader from '../loader';
|
||||
|
||||
describe("Loader", () => {
|
||||
const component = shallow(<Loader />)
|
||||
describe('Loader', () => {
|
||||
const component = shallow(<Loader />);
|
||||
|
||||
it("renders correctly", () => {
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
it('renders correctly', () => {
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Markdown from "../markdown"
|
||||
import Markdown from '../markdown';
|
||||
|
||||
describe("Markdown", () => {
|
||||
describe('Markdown', () => {
|
||||
const props = {
|
||||
data: {
|
||||
ama: '',
|
||||
@@ -77,139 +77,138 @@ describe("Markdown", () => {
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
it("renders without subtitle", () => {
|
||||
it('renders without subtitle', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
subtitle: '',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
subtitle: '',
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders without prefix.title and data.title", () => {
|
||||
it('renders without prefix.title and data.title', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
title: '',
|
||||
}}
|
||||
prefix={{
|
||||
...props.prefix,
|
||||
title: '',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
title: '',
|
||||
}}
|
||||
prefix={{
|
||||
...props.prefix,
|
||||
title: '',
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders topLanguages is true", () => {
|
||||
it('renders topLanguages is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
topLanguages: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
topLanguages: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders topLanguages is true and githubStats is true", () => {
|
||||
it('renders topLanguages is true and githubStats is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
topLanguages: true,
|
||||
githubStats: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
topLanguages: true,
|
||||
githubStats: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders devDynamicBlogs is true", () => {
|
||||
it('renders devDynamicBlogs is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
devDynamicBlogs: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
devDynamicBlogs: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders without link.currentWork", () => {
|
||||
it('renders without link.currentWork', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
link={{
|
||||
...props.data,
|
||||
currentWork: '',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
link={{
|
||||
...props.data,
|
||||
currentWork: '',
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders visitorsBadge is true", () => {
|
||||
it('renders visitorsBadge is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
visitorsBadge: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
visitorsBadge: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders twitterBadge is true", () => {
|
||||
it('renders twitterBadge is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
twitterBadge: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
twitterBadge: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders githubProfileTrophy is true", () => {
|
||||
it('renders githubProfileTrophy is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
githubProfileTrophy: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
githubProfileTrophy: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders githubProfileTrophy is true", () => {
|
||||
it('renders githubProfileTrophy is true', () => {
|
||||
const component = shallow(
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
githubProfileTrophy: true,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
<Markdown
|
||||
{...props}
|
||||
data={{
|
||||
...props.data,
|
||||
githubProfileTrophy: true,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,415 +1,404 @@
|
||||
import React from "react";
|
||||
import React from 'react';
|
||||
import { shallow, configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
import MarkdownPreview, { GithubProfileTrophyPreview, GitHubStatsPreview, SkillsPreview, SocialPreview, SubTitlePreview, TitlePreview, TopLanguagesPreview, TwitterBadgePreview, VisitorsBadgePreview, WorkPreview, SectionTitle, DisplayWork, DisplaySocial } from "../markdownPreview"
|
||||
import MarkdownPreview, {
|
||||
GithubProfileTrophyPreview,
|
||||
GitHubStatsPreview,
|
||||
SkillsPreview,
|
||||
SocialPreview,
|
||||
SubTitlePreview,
|
||||
TitlePreview,
|
||||
TopLanguagesPreview,
|
||||
TwitterBadgePreview,
|
||||
VisitorsBadgePreview,
|
||||
WorkPreview,
|
||||
SectionTitle,
|
||||
DisplayWork,
|
||||
DisplaySocial,
|
||||
} from '../markdownPreview';
|
||||
|
||||
configure({ adapter: new Adapter() });
|
||||
|
||||
const DEFAULT_PREFIX = {
|
||||
title: "Hi 👋, I'm",
|
||||
currentWork: "🔭 I’m currently working on",
|
||||
currentLearn: "🌱 I’m currently learning",
|
||||
collaborateOn: "👯 I’m looking to collaborate on",
|
||||
helpWith: "🤝 I’m looking for help with",
|
||||
ama: "💬 Ask me about",
|
||||
contact: "📫 How to reach me",
|
||||
resume: "📄 Know about my experiences",
|
||||
funFact: "⚡ Fun fact",
|
||||
portfolio: "👨💻 All of my projects are available at",
|
||||
blog: "📝 I regularly write articles on",
|
||||
}
|
||||
title: "Hi 👋, I'm",
|
||||
currentWork: '🔭 I’m currently working on',
|
||||
currentLearn: '🌱 I’m currently learning',
|
||||
collaborateOn: '👯 I’m looking to collaborate on',
|
||||
helpWith: '🤝 I’m looking for help with',
|
||||
ama: '💬 Ask me about',
|
||||
contact: '📫 How to reach me',
|
||||
resume: '📄 Know about my experiences',
|
||||
funFact: '⚡ Fun fact',
|
||||
portfolio: '👨💻 All of my projects are available at',
|
||||
blog: '📝 I regularly write articles on',
|
||||
};
|
||||
|
||||
const DEFAULT_DATA = {
|
||||
title: "dummy",
|
||||
subtitle: "A passionate frontend developer from India",
|
||||
currentWork: "readme-generator",
|
||||
currentLearn: "",
|
||||
collaborateOn: "",
|
||||
helpWith: "",
|
||||
ama: "",
|
||||
contact: "",
|
||||
funFact: "",
|
||||
twitterBadge: false,
|
||||
visitorsBadge: false,
|
||||
badgeStyle: "flat",
|
||||
badgeColor: "0e75b6",
|
||||
badgeLabel: "Profile views",
|
||||
githubProfileTrophy: false,
|
||||
githubStats: false,
|
||||
githubStatsOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
},
|
||||
topLanguages: false,
|
||||
topLanguagesOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
},
|
||||
devDynamicBlogs: false,
|
||||
mediumDynamicBlogs: false,
|
||||
rssDynamicBlogs: false,
|
||||
}
|
||||
title: 'dummy',
|
||||
subtitle: 'A passionate frontend developer from India',
|
||||
currentWork: 'readme-generator',
|
||||
currentLearn: '',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
ama: '',
|
||||
contact: '',
|
||||
funFact: '',
|
||||
twitterBadge: false,
|
||||
visitorsBadge: false,
|
||||
badgeStyle: 'flat',
|
||||
badgeColor: '0e75b6',
|
||||
badgeLabel: 'Profile views',
|
||||
githubProfileTrophy: false,
|
||||
githubStats: false,
|
||||
githubStatsOptions: {
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: 'en',
|
||||
},
|
||||
topLanguages: false,
|
||||
topLanguagesOptions: {
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: 'en',
|
||||
},
|
||||
devDynamicBlogs: false,
|
||||
mediumDynamicBlogs: false,
|
||||
rssDynamicBlogs: false,
|
||||
};
|
||||
|
||||
const DEFAULT_LINK = {
|
||||
currentWork: "https://dummy.com",
|
||||
collaborateOn: "",
|
||||
helpWith: "",
|
||||
portfolio: "",
|
||||
blog: "",
|
||||
resume: "",
|
||||
}
|
||||
currentWork: 'https://dummy.com',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
portfolio: '',
|
||||
blog: '',
|
||||
resume: '',
|
||||
};
|
||||
|
||||
const DEFAULT_SOCIAL = {
|
||||
github: "",
|
||||
dev: "",
|
||||
linkedin: "",
|
||||
codepen: "dummy",
|
||||
stackoverflow: "",
|
||||
kaggle: "",
|
||||
codesandbox: "",
|
||||
fb: "",
|
||||
instagram: "",
|
||||
twitter: "",
|
||||
dribbble: "",
|
||||
behance: "",
|
||||
medium: "",
|
||||
youtube: "",
|
||||
codechef: "",
|
||||
hackerrank: "",
|
||||
codeforces: "",
|
||||
leetcode: "",
|
||||
topcoder: "",
|
||||
hackerearth: "",
|
||||
geeks_for_geeks: "",
|
||||
discord: "",
|
||||
rssurl: "",
|
||||
}
|
||||
github: '',
|
||||
dev: '',
|
||||
linkedin: '',
|
||||
codepen: 'dummy',
|
||||
stackoverflow: '',
|
||||
kaggle: '',
|
||||
codesandbox: '',
|
||||
fb: '',
|
||||
instagram: '',
|
||||
twitter: '',
|
||||
dribbble: '',
|
||||
behance: '',
|
||||
medium: '',
|
||||
youtube: '',
|
||||
codechef: '',
|
||||
hackerrank: '',
|
||||
codeforces: '',
|
||||
leetcode: '',
|
||||
topcoder: '',
|
||||
hackerearth: '',
|
||||
geeks_for_geeks: '',
|
||||
discord: '',
|
||||
rssurl: '',
|
||||
};
|
||||
|
||||
const DUMMY_SKILLS = {
|
||||
skills: {
|
||||
unity: true,
|
||||
android: false,
|
||||
angularjs: false,
|
||||
apachecordova: false,
|
||||
}
|
||||
}
|
||||
skills: {
|
||||
unity: true,
|
||||
android: false,
|
||||
angularjs: false,
|
||||
apachecordova: false,
|
||||
},
|
||||
};
|
||||
|
||||
describe("Markdown Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
let skills = {}
|
||||
const tree = shallow(<MarkdownPreview
|
||||
prefix={prefix}
|
||||
data={data}
|
||||
link={link}
|
||||
social={social}
|
||||
skills={skills} />)
|
||||
describe('Markdown Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
let skills = {};
|
||||
const tree = shallow(<MarkdownPreview prefix={prefix} data={data} link={link} social={social} skills={skills} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("Title Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('Title Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no prefix", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
const tree = shallow(<TitlePreview prefix={prefix.title} title={""} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no prefix', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
const tree = shallow(<TitlePreview prefix={prefix.title} title={''} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no title", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<TitlePreview title={data.title} prefix={""} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no title', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<TitlePreview title={data.title} prefix={''} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no title and prefix", () => {
|
||||
const tree = shallow(<TitlePreview />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no title and prefix', () => {
|
||||
const tree = shallow(<TitlePreview />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("SubTitle Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('SubTitle Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no subtitle", () => {
|
||||
const tree = shallow(<SubTitlePreview subtitle={""} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no subtitle', () => {
|
||||
const tree = shallow(<SubTitlePreview subtitle={''} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("SectionTitle Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
const tree = shallow(<SectionTitle visible={true} label={"dummy"} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('SectionTitle Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
const tree = shallow(<SectionTitle visible={true} label={'dummy'} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no label", () => {
|
||||
const tree = shallow(<SectionTitle visible={true} label={""} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no label', () => {
|
||||
const tree = shallow(<SectionTitle visible={true} label={''} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with visible false", () => {
|
||||
const tree = shallow(<SectionTitle visible={false} label={"dummy"} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with visible false', () => {
|
||||
const tree = shallow(<SectionTitle visible={false} label={'dummy'} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("DisplayWork Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('DisplayWork Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no prefix, link and project", () => {
|
||||
const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no prefix, link and project', () => {
|
||||
const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no prefix", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no prefix', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no project", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no project', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no link", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined}/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no link', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no prefix and link", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<DisplayWork project={data.currentWork} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no prefix and link', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
const tree = shallow(<DisplayWork project={data.currentWork} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no project and link", () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no project and link', () => {
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
const tree = shallow(<DisplayWork prefix={prefix} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no project and prefix", () => {
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork link={link.currentWork} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no project and prefix', () => {
|
||||
let link = DEFAULT_LINK;
|
||||
const tree = shallow(<DisplayWork link={link.currentWork} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("DisplaySocial Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
username={social.codepen}
|
||||
/>
|
||||
)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('DisplaySocial Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(
|
||||
<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
username={social.codepen}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no username", () => {
|
||||
const tree = shallow(<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
username={""}
|
||||
/>
|
||||
)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no username', () => {
|
||||
const tree = shallow(
|
||||
<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
|
||||
username={''}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("VisitorsBadge Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<VisitorsBadgePreview
|
||||
show={data.visitorsBadge}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('VisitorsBadge Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(
|
||||
<VisitorsBadgePreview
|
||||
show={data.visitorsBadge}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with show true", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<VisitorsBadgePreview
|
||||
show={true}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with show true', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(
|
||||
<VisitorsBadgePreview
|
||||
show={true}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("GithubProfileTrophy Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GithubProfileTrophyPreview
|
||||
show={data.githubProfileTrophy}
|
||||
github={social.github}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('GithubProfileTrophy Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GithubProfileTrophyPreview show={data.githubProfileTrophy} github={social.github} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with show true", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GithubProfileTrophyPreview
|
||||
show={true}
|
||||
github={social.github}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with show true', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GithubProfileTrophyPreview show={true} github={social.github} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("TwitterBadgePreview Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TwitterBadgePreview
|
||||
show={data.twitterBadge}
|
||||
twitter={social.twitter}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('TwitterBadgePreview Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TwitterBadgePreview show={data.twitterBadge} twitter={social.twitter} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with show true", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TwitterBadgePreview
|
||||
show={true}
|
||||
twitter={social.twitter}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with show true', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TwitterBadgePreview show={true} twitter={social.twitter} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("Work Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let link = DEFAULT_LINK;
|
||||
let props = { data: data, prefix: prefix, link: link }
|
||||
const tree = shallow(<WorkPreview work={props} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('Work Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let prefix = DEFAULT_PREFIX;
|
||||
let link = DEFAULT_LINK;
|
||||
let props = { data: data, prefix: prefix, link: link };
|
||||
const tree = shallow(<WorkPreview work={props} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("Social Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<SocialPreview social={social} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('Social Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<SocialPreview social={social} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("Skills Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let skills = DUMMY_SKILLS.skills
|
||||
const tree = shallow(<SkillsPreview skills={skills} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('Skills Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let skills = DUMMY_SKILLS.skills;
|
||||
const tree = shallow(<SkillsPreview skills={skills} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with no skills", () => {
|
||||
let skills = {}
|
||||
const tree = shallow(<SkillsPreview skills={skills} />)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with no skills', () => {
|
||||
let skills = {};
|
||||
const tree = shallow(<SkillsPreview skills={skills} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("TopLanguages Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TopLanguagesPreview
|
||||
show={data.topLanguages}
|
||||
github={social.github}
|
||||
options={data.topLanguagesOptions}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('TopLanguages Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(
|
||||
<TopLanguagesPreview show={data.topLanguages} github={social.github} options={data.topLanguagesOptions} />,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly with show true", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TopLanguagesPreview
|
||||
show={true}
|
||||
github={social.github}
|
||||
options={data.topLanguagesOptions}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly with show true', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<TopLanguagesPreview show={true} github={social.github} options={data.topLanguagesOptions} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
describe("GitHubStats Preview", () => {
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GitHubStatsPreview
|
||||
show={data.githubStats}
|
||||
github={social.github}
|
||||
options={data.githubStatsOptions}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('GitHubStats Preview', () => {
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(
|
||||
<GitHubStatsPreview show={data.githubStats} github={social.github} options={data.githubStatsOptions} />,
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
it("renders correctly", () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GitHubStatsPreview
|
||||
show={true}
|
||||
github={social.github}
|
||||
options={data.githubStatsOptions}
|
||||
/>)
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders correctly', () => {
|
||||
let data = DEFAULT_DATA;
|
||||
let social = DEFAULT_SOCIAL;
|
||||
const tree = shallow(<GitHubStatsPreview show={true} github={social.github} options={data.githubStatsOptions} />);
|
||||
|
||||
expect(tree).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,42 +1,40 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Skills from "../skills"
|
||||
import Skills from '../skills';
|
||||
|
||||
jest.mock("../../constants/skills", () => ({
|
||||
jest.mock('../../constants/skills', () => ({
|
||||
__esModule: true,
|
||||
categorizedSkills: {
|
||||
language: {
|
||||
title: "Programming Languages",
|
||||
skills: ["javascript"],
|
||||
title: 'Programming Languages',
|
||||
skills: ['javascript'],
|
||||
},
|
||||
frontend_dev: {
|
||||
title: "Frontend Development",
|
||||
skills: ["react", "svelte"],
|
||||
title: 'Frontend Development',
|
||||
skills: ['react', 'svelte'],
|
||||
},
|
||||
},
|
||||
icons: {
|
||||
javascript: "javascript.svg",
|
||||
react: "react.svg",
|
||||
svelte: "svelte.svg",
|
||||
javascript: 'javascript.svg',
|
||||
react: 'react.svg',
|
||||
svelte: 'svelte.svg',
|
||||
},
|
||||
}))
|
||||
}));
|
||||
|
||||
describe("Skills", () => {
|
||||
it("renders correctly", () => {
|
||||
const component = shallow(<Skills skills={{ javascript: true }} />)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
describe('Skills', () => {
|
||||
it('renders correctly', () => {
|
||||
const component = shallow(<Skills skills={{ javascript: true }} />);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("calls handleSkillsChange prop when a skill is clicked", () => {
|
||||
const mockFn = jest.fn()
|
||||
const component = shallow(
|
||||
<Skills skills={{ javascript: true }} handleSkillsChange={mockFn} />
|
||||
)
|
||||
it('calls handleSkillsChange prop when a skill is clicked', () => {
|
||||
const mockFn = jest.fn();
|
||||
const component = shallow(<Skills skills={{ javascript: true }} handleSkillsChange={mockFn} />);
|
||||
|
||||
component.find("#javascript").simulate("change")
|
||||
component.find('#javascript').simulate('change');
|
||||
|
||||
expect(mockFn).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
expect(mockFn).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Social from "../social"
|
||||
import Social from '../social';
|
||||
|
||||
describe("Social", () => {
|
||||
const mockEvent = { target: { value: "This is a mock event" } }
|
||||
describe('Social', () => {
|
||||
const mockEvent = { target: { value: 'This is a mock event' } };
|
||||
const props = {
|
||||
social: {
|
||||
github: "github ",
|
||||
twitter: "twitter",
|
||||
dev: "dev",
|
||||
codepen: "codepen",
|
||||
codesandbox: "codesandbodx",
|
||||
stackoverflow: "stackoverflow",
|
||||
linkedin: "linkedin",
|
||||
kaggle: "kaggle",
|
||||
fb: "fb",
|
||||
instagram: "instagram",
|
||||
dribble: "dribble",
|
||||
behance: "behance",
|
||||
medium: "medium",
|
||||
youtube: "youtube",
|
||||
codechef: "codechef",
|
||||
hackerrack: "hackerranck",
|
||||
codeforces: "codeforces",
|
||||
leetcode: "leetcode",
|
||||
topcoder: "topcoder",
|
||||
hackerearth: "@hackerearth",
|
||||
geeks_for_geeks: "geeks_for_geeks",
|
||||
discord: "discord",
|
||||
rssurl: "rssurl",
|
||||
github: 'github ',
|
||||
twitter: 'twitter',
|
||||
dev: 'dev',
|
||||
codepen: 'codepen',
|
||||
codesandbox: 'codesandbodx',
|
||||
stackoverflow: 'stackoverflow',
|
||||
linkedin: 'linkedin',
|
||||
kaggle: 'kaggle',
|
||||
fb: 'fb',
|
||||
instagram: 'instagram',
|
||||
dribble: 'dribble',
|
||||
behance: 'behance',
|
||||
medium: 'medium',
|
||||
youtube: 'youtube',
|
||||
codechef: 'codechef',
|
||||
hackerrack: 'hackerranck',
|
||||
codeforces: 'codeforces',
|
||||
leetcode: 'leetcode',
|
||||
topcoder: 'topcoder',
|
||||
hackerearth: '@hackerearth',
|
||||
geeks_for_geeks: 'geeks_for_geeks',
|
||||
discord: 'discord',
|
||||
rssurl: 'rssurl',
|
||||
},
|
||||
handleSocialChange: jest.fn().mockReturnValue({}),
|
||||
}
|
||||
it("renders correctly", () => {
|
||||
const component = shallow(<Social {...props} />)
|
||||
for (let i = 0; i < component.find("input").length; i++) {
|
||||
component.find("input").at(i).simulate("change", mockEvent)
|
||||
};
|
||||
it('renders correctly', () => {
|
||||
const component = shallow(<Social {...props} />);
|
||||
for (let i = 0; i < component.find('input').length; i++) {
|
||||
component.find('input').at(i).simulate('change', mockEvent);
|
||||
}
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Subtitle from "../subtitle"
|
||||
import Subtitle from '../subtitle';
|
||||
|
||||
describe("Subtitle", () => {
|
||||
const mockEvent = { target: { value: "This is a mock event" } }
|
||||
describe('Subtitle', () => {
|
||||
const mockEvent = { target: { value: 'This is a mock event' } };
|
||||
const props = {
|
||||
data: {
|
||||
subtitle: "A frontend developer",
|
||||
subtitle: 'A frontend developer',
|
||||
},
|
||||
handleDataChange: jest.fn().mockReturnValue({}),
|
||||
}
|
||||
};
|
||||
|
||||
const component = shallow(<Subtitle {...props} />)
|
||||
const component = shallow(<Subtitle {...props} />);
|
||||
|
||||
it("renders correctly", () => {
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
it('renders correctly', () => {
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("calls onChange", () => {
|
||||
component.find("input").at(0).simulate("change", mockEvent)
|
||||
expect(props.handleDataChange).toBeCalledWith("subtitle", mockEvent)
|
||||
})
|
||||
})
|
||||
it('calls onChange', () => {
|
||||
component.find('input').at(0).simulate('change', mockEvent);
|
||||
expect(props.handleDataChange).toBeCalledWith('subtitle', mockEvent);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Title from "../title"
|
||||
import Title from '../title';
|
||||
|
||||
describe("Title", () => {
|
||||
const mockEvent = { target: { value: "This is a mock event" } }
|
||||
describe('Title', () => {
|
||||
const mockEvent = { target: { value: 'This is a mock event' } };
|
||||
const props = {
|
||||
prefix: {
|
||||
title: "test_title",
|
||||
currentWork: "test_currentwork",
|
||||
title: 'test_title',
|
||||
currentWork: 'test_currentwork',
|
||||
},
|
||||
data: { title: "test_data" },
|
||||
link: { currentWork: "test_currentwork" },
|
||||
data: { title: 'test_data' },
|
||||
link: { currentWork: 'test_currentwork' },
|
||||
handlePrefixChange: jest.fn().mockReturnValue({}),
|
||||
handleLinkChange: jest.fn().mockReturnValue({}),
|
||||
handleDataChange: jest.fn().mockReturnValue({}),
|
||||
}
|
||||
};
|
||||
|
||||
it("renders title component correctly", () => {
|
||||
const component = shallow(<Title {...props} />)
|
||||
component.find("input").at(0).simulate("change", mockEvent)
|
||||
component.find("input").at(1).simulate("change", mockEvent)
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
it('renders title component correctly', () => {
|
||||
const component = shallow(<Title {...props} />);
|
||||
component.find('input').at(0).simulate('change', mockEvent);
|
||||
component.find('input').at(1).simulate('change', mockEvent);
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
import React from "react"
|
||||
import { shallow } from "enzyme"
|
||||
import toJson from "enzyme-to-json"
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import Work from "../work"
|
||||
import Work from '../work';
|
||||
|
||||
describe("Work", () => {
|
||||
const mockEvent = { target: { value: "This is a mock event" } }
|
||||
describe('Work', () => {
|
||||
const mockEvent = { target: { value: 'This is a mock event' } };
|
||||
const props = {
|
||||
prefix: {
|
||||
title: "test_title",
|
||||
currentWork: "test_currentwork",
|
||||
title: 'test_title',
|
||||
currentWork: 'test_currentwork',
|
||||
},
|
||||
data: { title: "test_data" },
|
||||
link: { currentWork: "test_currentwork" },
|
||||
data: { title: 'test_data' },
|
||||
link: { currentWork: 'test_currentwork' },
|
||||
handlePrefixChange: jest.fn().mockReturnValue({}),
|
||||
handleLinkChange: jest.fn().mockReturnValue({}),
|
||||
handleDataChange: jest.fn().mockReturnValue({}),
|
||||
}
|
||||
};
|
||||
|
||||
it("renders work component correctly", () => {
|
||||
const component = shallow(<Work {...props} />)
|
||||
for (let i = 0; i < component.find("input").length; i++) {
|
||||
component.find("input").at(i).simulate("change", mockEvent)
|
||||
it('renders work component correctly', () => {
|
||||
const component = shallow(<Work {...props} />);
|
||||
for (let i = 0; i < component.find('input').length; i++) {
|
||||
component.find('input').at(i).simulate('change', mockEvent);
|
||||
}
|
||||
expect(toJson(component)).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
expect(toJson(component)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,499 +0,0 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { withPrefix } from "gatsby"
|
||||
import { latestBlogs } from "../utils/workflows"
|
||||
import links from "../constants/page-links"
|
||||
import {
|
||||
isMediumUsernameValid,
|
||||
isGitHubUsernameValid,
|
||||
} from "../utils/validation"
|
||||
import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"
|
||||
|
||||
const AddonsItem = ({
|
||||
inputId,
|
||||
inputChecked,
|
||||
onInputChange,
|
||||
Options,
|
||||
onIconClick,
|
||||
...props
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
const Icon = open ? XCircleIcon : ToolsIcon
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor={inputId} className="checkbox-label flex items-center">
|
||||
<input
|
||||
id={inputId}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={inputChecked}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
<span class="checkbox-label__control" />
|
||||
<span className="pl-4">{props.children}</span>
|
||||
</label>
|
||||
{Options && (
|
||||
<button
|
||||
id={`${inputId}-open-btn`}
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex ml-3 focus:bg-gray-400"
|
||||
style={{ outline: "none" }}
|
||||
>
|
||||
<Icon className="transform scale-100 md:scale-125" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{Options && open && Options}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomizeOptions = ({ title, CustomizationOptions }) => (
|
||||
<div
|
||||
className={`border-2 border-solid border-gray-900 bg-gray-100 p-2 ml-8`}
|
||||
style={{ maxWidth: "21rem" }}
|
||||
>
|
||||
<header className="text-base sm:text-lg">{title}</header>
|
||||
<hr className="border-gray-500" />
|
||||
<div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">
|
||||
{CustomizationOptions}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => {
|
||||
return (
|
||||
<>
|
||||
<label htmlFor="badge-style">
|
||||
Style:
|
||||
<select
|
||||
id="badge-style"
|
||||
onChange={e => onBadgeUpdate("badgeStyle", e.target.value)}
|
||||
value={badgeOptions.badgeStyle}
|
||||
>
|
||||
<option value="flat">Flat</option>
|
||||
<option value="flat-square">Flat Square</option>
|
||||
<option value="plastic">Plastic</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label htmlFor="badge-color">
|
||||
Color:
|
||||
<input
|
||||
type="color"
|
||||
id="badge-color"
|
||||
defaultValue={`#${badgeOptions.badgeColor}`}
|
||||
className="w-6"
|
||||
onChange={e =>
|
||||
onBadgeUpdate("badgeColor", e.target.value.replace("#", ""))
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label htmlFor="badge-label-text">
|
||||
Label Text:
|
||||
<input
|
||||
type="text"
|
||||
id="badge-label-text"
|
||||
placeholder="Profile views"
|
||||
className="w-2/4 bg-gray-300 pl-2"
|
||||
onChange={e => onBadgeUpdate("badgeLabel", e.target.value.trim())}
|
||||
defaultValue={badgeOptions.badgeLabel}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<span className="mt-2 flex items-center">
|
||||
Preview:
|
||||
{isGitHubUsernameValid(githubName) ? (
|
||||
<img
|
||||
src={
|
||||
`https://komarev.com/ghpvc/` +
|
||||
`?username=${githubName}` +
|
||||
`&label=${encodeURI(badgeOptions.badgeLabel)}` +
|
||||
`&color=${badgeOptions.badgeColor}` +
|
||||
`&style=${badgeOptions.badgeStyle}`
|
||||
}
|
||||
alt="profile-visitors-count"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xxs md:text-sm text-red-600">
|
||||
Invalid GitHub username
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => (
|
||||
<>
|
||||
<label htmlFor={`${prefix}-theme`}>
|
||||
Theme:
|
||||
<select
|
||||
id={`${prefix}-theme`}
|
||||
onChange={({ target: { value } }) => onUpdate("theme", value)}
|
||||
defaultValue={options.theme}
|
||||
>
|
||||
<option value="none">none</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="radical">Radical</option>
|
||||
<option value="merko">Merko</option>
|
||||
<option value="gruvbox">Gruvbox</option>
|
||||
<option value="tokyonight">Tokyonight</option>
|
||||
<option value="onedark">Onedark</option>
|
||||
<option value="cobalt">Cobalt</option>
|
||||
<option value="synthwave">Synthwave</option>
|
||||
<option value="highcontrast">Highcontrast</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-title-color`}>
|
||||
Title Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-title-color`}
|
||||
defaultValue={`#${options.titleColor}`}
|
||||
className="w-6"
|
||||
onChange={e => onUpdate("titleColor", e.target.value.replace("#", ""))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-text-color`}>
|
||||
Text Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-text-color`}
|
||||
defaultValue={`#${options.textColor}`}
|
||||
className="w-6"
|
||||
onChange={e => onUpdate("textColor", e.target.value.replace("#", ""))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-bg-color`}>
|
||||
Background Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-bg-color`}
|
||||
defaultValue={`#${options.bgColor}`}
|
||||
className="w-6"
|
||||
onChange={e => onUpdate("bgColor", e.target.value.replace("#", ""))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-hide-border`} className="checkbox-label">
|
||||
Hide border:
|
||||
<input
|
||||
id={`${prefix}-hide-border`}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={options.hideBorder}
|
||||
onChange={e => onUpdate("hideBorder", e.target.checked)}
|
||||
/>
|
||||
<span class="checkbox-label__control" />
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-cache-seconds`}>
|
||||
Cache Seconds:
|
||||
<input
|
||||
id={`${prefix}-cache-seconds`}
|
||||
type="number"
|
||||
min={1800}
|
||||
max={86400}
|
||||
placeholder={1800}
|
||||
defaultValue={options.cacheSeconds}
|
||||
onChange={e => onUpdate("cacheSeconds", e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-locale`}>
|
||||
Locale:
|
||||
<input
|
||||
id={`${prefix}-locale`}
|
||||
type="text"
|
||||
placeholder="en"
|
||||
defaultValue={options.locale}
|
||||
onChange={e => onUpdate("locale", e.target.value)}
|
||||
size="2"
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
)
|
||||
|
||||
const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
|
||||
<>
|
||||
<label htmlFor={`${prefix}-theme`}>
|
||||
Theme:
|
||||
<select
|
||||
id={`${prefix}-theme`}
|
||||
onChange={({ target: { value } }) => onUpdate("theme", value)}
|
||||
defaultValue={options.theme}
|
||||
>
|
||||
<option value="default">default</option>
|
||||
<option value="dark">dark</option>
|
||||
<option value="highcontrast">highcontrast</option>
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
)
|
||||
|
||||
const Addons = props => {
|
||||
const [debounce, setDebounce] = useState(undefined)
|
||||
const [badgeOptions, setBadgeOptions] = useState({
|
||||
badgeStyle: props.data.badgeStyle,
|
||||
badgeColor: props.data.badgeColor,
|
||||
badgeLabel: props.data.badgeLabel,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setBadgeOptions({
|
||||
badgeStyle: props.data.badgeStyle,
|
||||
badgeColor: props.data.badgeColor,
|
||||
badgeLabel: props.data.badgeLabel,
|
||||
})
|
||||
}, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
|
||||
|
||||
const [githubStatsOptions, setGithubStatsOptions] = useState({
|
||||
...props.data.githubStatsOptions,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setGithubStatsOptions({
|
||||
...props.data.githubStatsOptions,
|
||||
})
|
||||
}, [props.data.githubStatsOptions])
|
||||
|
||||
const [topLanguagesOptions, setTopLanguagesOptions] = useState({
|
||||
...props.data.topLanguagesOptions,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setTopLanguagesOptions({
|
||||
...props.data.topLanguagesOptions,
|
||||
})
|
||||
}, [props.data.topLanguagesOptions])
|
||||
|
||||
const [streakStatsOptions, setStreakStatsOptions] = useState({
|
||||
...props.data.streakStatsOptions,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setStreakStatsOptions({
|
||||
...props.data.streakStatsOptions,
|
||||
})
|
||||
}, [props.data.streakStatsOptions])
|
||||
|
||||
const blogPostPorkflow = () => {
|
||||
let payload = {
|
||||
dev: {
|
||||
show: props.data.devDynamicBlogs,
|
||||
username: props.social.dev,
|
||||
},
|
||||
medium: {
|
||||
show: props.data.mediumDynamicBlogs,
|
||||
username: props.social.medium,
|
||||
},
|
||||
rssurl: {
|
||||
show: props.data.rssDynamicBlogs,
|
||||
username: props.social.rssurl,
|
||||
},
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
const onBadgeUpdate = (option, value) => {
|
||||
const callback = () => {
|
||||
let newVal =
|
||||
option === "badgeLabel" && value === "" ? "Profile views" : value
|
||||
setBadgeOptions({ ...badgeOptions, [option]: newVal })
|
||||
props.handleDataChange(option, { target: { value: newVal } })
|
||||
}
|
||||
clearTimeout(debounce)
|
||||
setDebounce(setTimeout(callback, 300))
|
||||
}
|
||||
|
||||
const onStatsUpdate = (option, value) => {
|
||||
const newStatsOptions = { ...githubStatsOptions, [option]: value }
|
||||
setGithubStatsOptions(newStatsOptions)
|
||||
props.handleDataChange("githubStatsOptions", {
|
||||
target: { value: newStatsOptions },
|
||||
})
|
||||
}
|
||||
|
||||
const onTopLangUpdate = (option, value) => {
|
||||
const newLangOptions = { ...topLanguagesOptions, [option]: value }
|
||||
setTopLanguagesOptions(newLangOptions)
|
||||
props.handleDataChange("topLanguagesOptions", {
|
||||
target: { value: newLangOptions },
|
||||
})
|
||||
}
|
||||
|
||||
const onStreakStatsUpdate = (option, value) => {
|
||||
const newStreakStatsOptions = { ...streakStatsOptions, [option]: value }
|
||||
setStreakStatsOptions(newStreakStatsOptions)
|
||||
props.handleDataChange("streakStatsOptions", {
|
||||
target: { value: newStreakStatsOptions },
|
||||
})
|
||||
}
|
||||
|
||||
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>
|
||||
<AddonsItem
|
||||
inputId="visitors-count"
|
||||
inputChecked={props.data.visitorsBadge}
|
||||
onInputChange={() => props.handleCheckChange("visitorsBadge")}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Badge"
|
||||
CustomizationOptions={
|
||||
<CustomizeBadge
|
||||
githubName={props.social.github}
|
||||
badgeOptions={badgeOptions}
|
||||
onBadgeUpdate={onBadgeUpdate}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display visitors count badge
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="github-profile-trophy"
|
||||
inputChecked={props.data.githubProfileTrophy}
|
||||
onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
|
||||
>
|
||||
display github trophy
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="github-stats"
|
||||
inputChecked={props.data.githubStats}
|
||||
onInputChange={() => props.handleCheckChange("githubStats")}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Github Stats Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeGithubStatsBase
|
||||
prefix="stats"
|
||||
options={githubStatsOptions}
|
||||
onUpdate={onStatsUpdate}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display github profile stats card
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="top-languages"
|
||||
inputChecked={props.data.topLanguages}
|
||||
onInputChange={() => props.handleCheckChange("topLanguages")}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Top Skills Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeGithubStatsBase
|
||||
prefix="top-lang"
|
||||
options={topLanguagesOptions}
|
||||
onUpdate={onTopLangUpdate}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display top skills
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="streak-stats"
|
||||
inputChecked={props.data.streakStats}
|
||||
onInputChange={() => props.handleCheckChange("streakStats")}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Streak Stats Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeStreakStats
|
||||
prefix="streak-stats"
|
||||
options={streakStatsOptions}
|
||||
onUpdate={onStreakStatsUpdate}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display github streak stats
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="twitter-badge"
|
||||
inputChecked={props.data.twitterBadge}
|
||||
onInputChange={() => props.handleCheckChange("twitterBadge")}
|
||||
>
|
||||
display twitter badge
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="dev-dynamic-blogs"
|
||||
inputChecked={props.data.devDynamicBlogs}
|
||||
onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
|
||||
>
|
||||
display latest dev.to blogs dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="medium-dynamic-blogs"
|
||||
inputChecked={props.data.mediumDynamicBlogs}
|
||||
onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
|
||||
>
|
||||
display latest medium blogs dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="rss-dynamic-blogs"
|
||||
inputChecked={props.data.rssDynamicBlogs}
|
||||
onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
|
||||
>
|
||||
display latest blogs from your personal blog dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
|
||||
{(props.data.devDynamicBlogs && props.social.dev) ||
|
||||
(props.data.rssDynamicBlogs && props.social.rssurl) ||
|
||||
(props.data.mediumDynamicBlogs &&
|
||||
props.social.medium &&
|
||||
isMediumUsernameValid(props.social.medium)) ? (
|
||||
<div className="workflow">
|
||||
<div>
|
||||
download
|
||||
<span
|
||||
id="blog-post-worklow-span"
|
||||
onClick={blogPostPorkflow}
|
||||
onKeyDown={e => e.keyCode === 13 && 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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Addons
|
||||
@@ -0,0 +1,482 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withPrefix } from 'gatsby';
|
||||
import { ToolsIcon, XCircleIcon } from '@primer/octicons-react';
|
||||
import latestBlogs from '../utils/workflows';
|
||||
import links from '../constants/page-links';
|
||||
import { isMediumUsernameValid, isGitHubUsernameValid } from '../utils/validation';
|
||||
|
||||
const AddonsItem = (props) => {
|
||||
const { inputId, inputChecked, onInputChange, Options, children } = props;
|
||||
const [open, setOpen] = useState(false);
|
||||
const Icon = open ? XCircleIcon : ToolsIcon;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
|
||||
<label htmlFor={inputId} className="checkbox-label flex items-center">
|
||||
<input
|
||||
id={inputId}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={inputChecked}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
<span className="checkbox-label__control" />
|
||||
<span className="pl-4">{children}</span>
|
||||
</label>
|
||||
{Options && (
|
||||
<button
|
||||
type="button"
|
||||
id={`${inputId}-open-btn`}
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex ml-3 focus:bg-gray-400"
|
||||
style={{ outline: 'none' }}
|
||||
>
|
||||
<Icon className="transform scale-100 md:scale-125" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{Options && open && Options}
|
||||
</>
|
||||
);
|
||||
};
|
||||
AddonsItem.propTypes = {
|
||||
inputId: PropTypes.string.isRequired,
|
||||
inputChecked: PropTypes.bool.isRequired,
|
||||
onInputChange: PropTypes.func.isRequired,
|
||||
Options: PropTypes.element.isRequired,
|
||||
children: PropTypes.element.isRequired,
|
||||
};
|
||||
|
||||
const CustomizeOptions = ({ title, CustomizationOptions }) => (
|
||||
<div className="border-2 border-solid border-gray-900 bg-gray-100 p-2 ml-8" style={{ maxWidth: '21rem' }}>
|
||||
<header className="text-base sm:text-lg">{title}</header>
|
||||
<hr className="border-gray-500" />
|
||||
<div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">{CustomizationOptions}</div>
|
||||
</div>
|
||||
);
|
||||
CustomizeOptions.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
CustomizationOptions: PropTypes.element.isRequired,
|
||||
};
|
||||
|
||||
const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => (
|
||||
<>
|
||||
<label htmlFor="badge-style">
|
||||
Style:
|
||||
<select
|
||||
id="badge-style"
|
||||
onChange={(e) => onBadgeUpdate('badgeStyle', e.target.value)}
|
||||
value={badgeOptions.badgeStyle}
|
||||
>
|
||||
<option value="flat">Flat</option>
|
||||
<option value="flat-square">Flat Square</option>
|
||||
<option value="plastic">Plastic</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label htmlFor="badge-color">
|
||||
Color:
|
||||
<input
|
||||
type="color"
|
||||
id="badge-color"
|
||||
defaultValue={`#${badgeOptions.badgeColor}`}
|
||||
className="w-6"
|
||||
onChange={(e) => onBadgeUpdate('badgeColor', e.target.value.replace('#', ''))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label htmlFor="badge-label-text">
|
||||
Label Text:
|
||||
<input
|
||||
type="text"
|
||||
id="badge-label-text"
|
||||
placeholder="Profile views"
|
||||
className="w-2/4 bg-gray-300 pl-2"
|
||||
onChange={(e) => onBadgeUpdate('badgeLabel', e.target.value.trim())}
|
||||
defaultValue={badgeOptions.badgeLabel}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<span className="mt-2 flex items-center">
|
||||
Preview:
|
||||
{isGitHubUsernameValid(githubName) ? (
|
||||
<img
|
||||
src={`https://komarev.com/ghpvc/?username=${githubName}&label=${encodeURI(badgeOptions.badgeLabel)}&color=${
|
||||
badgeOptions.badgeColor
|
||||
}&style=${badgeOptions.badgeStyle}`}
|
||||
alt="profile-visitors-count"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
CustomizeBadge.propTypes = {
|
||||
githubName: PropTypes.string.isRequired,
|
||||
badgeOptions: PropTypes.object.isRequired,
|
||||
onBadgeUpdate: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => (
|
||||
<>
|
||||
<label htmlFor={`${prefix}-theme`}>
|
||||
Theme:
|
||||
<select
|
||||
id={`${prefix}-theme`}
|
||||
onChange={({ target: { value } }) => onUpdate('theme', value)}
|
||||
defaultValue={options.theme}
|
||||
>
|
||||
<option value="none">none</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="radical">Radical</option>
|
||||
<option value="merko">Merko</option>
|
||||
<option value="gruvbox">Gruvbox</option>
|
||||
<option value="tokyonight">Tokyonight</option>
|
||||
<option value="onedark">Onedark</option>
|
||||
<option value="cobalt">Cobalt</option>
|
||||
<option value="synthwave">Synthwave</option>
|
||||
<option value="highcontrast">Highcontrast</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
</select>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-title-color`}>
|
||||
Title Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-title-color`}
|
||||
defaultValue={`#${options.titleColor}`}
|
||||
className="w-6"
|
||||
onChange={(e) => onUpdate('titleColor', e.target.value.replace('#', ''))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-text-color`}>
|
||||
Text Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-text-color`}
|
||||
defaultValue={`#${options.textColor}`}
|
||||
className="w-6"
|
||||
onChange={(e) => onUpdate('textColor', e.target.value.replace('#', ''))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-bg-color`}>
|
||||
Background Color:
|
||||
<input
|
||||
type="color"
|
||||
id={`${prefix}-bg-color`}
|
||||
defaultValue={`#${options.bgColor}`}
|
||||
className="w-6"
|
||||
onChange={(e) => onUpdate('bgColor', e.target.value.replace('#', ''))}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-hide-border`} className="checkbox-label">
|
||||
Hide border:
|
||||
<input
|
||||
id={`${prefix}-hide-border`}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={options.hideBorder}
|
||||
onChange={(e) => onUpdate('hideBorder', e.target.checked)}
|
||||
/>
|
||||
<span className="checkbox-label__control" />
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-cache-seconds`}>
|
||||
Cache Seconds:
|
||||
<input
|
||||
id={`${prefix}-cache-seconds`}
|
||||
type="number"
|
||||
min={1800}
|
||||
max={86400}
|
||||
placeholder={1800}
|
||||
defaultValue={options.cacheSeconds}
|
||||
onChange={(e) => onUpdate('cacheSeconds', e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor={`${prefix}-locale`}>
|
||||
Locale:
|
||||
<input
|
||||
id={`${prefix}-locale`}
|
||||
type="text"
|
||||
placeholder="en"
|
||||
defaultValue={options.locale}
|
||||
onChange={(e) => onUpdate('locale', e.target.value)}
|
||||
size="2"
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
CustomizeGithubStatsBase.propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
options: PropTypes.object.isRequired,
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
|
||||
<>
|
||||
<label htmlFor={`${prefix}-theme`}>
|
||||
Theme:
|
||||
<select
|
||||
id={`${prefix}-theme`}
|
||||
onChange={({ target: { value } }) => onUpdate('theme', value)}
|
||||
defaultValue={options.theme}
|
||||
>
|
||||
<option value="default">default</option>
|
||||
<option value="dark">dark</option>
|
||||
<option value="highcontrast">highcontrast</option>
|
||||
</select>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
CustomizeStreakStats.propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
options: PropTypes.object.isRequired,
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const Addons = (props) => {
|
||||
const { data, social, handleDataChange, handleCheckChange } = props;
|
||||
const [debounce, setDebounce] = useState(undefined);
|
||||
const [badgeOptions, setBadgeOptions] = useState({
|
||||
badgeStyle: data.badgeStyle,
|
||||
badgeColor: data.badgeColor,
|
||||
badgeLabel: data.badgeLabel,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setBadgeOptions({
|
||||
badgeStyle: data.badgeStyle,
|
||||
badgeColor: data.badgeColor,
|
||||
badgeLabel: data.badgeLabel,
|
||||
});
|
||||
}, [data.badgeStyle, data.badgeColor, data.badgeLabel]);
|
||||
|
||||
const [githubStatsOptions, setGithubStatsOptions] = useState({
|
||||
...data.githubStatsOptions,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setGithubStatsOptions({
|
||||
...data.githubStatsOptions,
|
||||
});
|
||||
}, [data.githubStatsOptions]);
|
||||
|
||||
const [topLanguagesOptions, setTopLanguagesOptions] = useState({
|
||||
...data.topLanguagesOptions,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setTopLanguagesOptions({
|
||||
...data.topLanguagesOptions,
|
||||
});
|
||||
}, [data.topLanguagesOptions]);
|
||||
|
||||
const [streakStatsOptions, setStreakStatsOptions] = useState({
|
||||
...data.streakStatsOptions,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setStreakStatsOptions({
|
||||
...data.streakStatsOptions,
|
||||
});
|
||||
}, [data.streakStatsOptions]);
|
||||
|
||||
const blogPostPorkflow = () => {
|
||||
const payload = {
|
||||
dev: {
|
||||
show: data.devDynamicBlogs,
|
||||
username: social.dev,
|
||||
},
|
||||
medium: {
|
||||
show: data.mediumDynamicBlogs,
|
||||
username: social.medium,
|
||||
},
|
||||
rssurl: {
|
||||
show: data.rssDynamicBlogs,
|
||||
username: social.rssurl,
|
||||
},
|
||||
};
|
||||
const actionContent = latestBlogs(payload);
|
||||
const 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);
|
||||
};
|
||||
|
||||
const onBadgeUpdate = (option, value) => {
|
||||
const callback = () => {
|
||||
const newVal = option === 'badgeLabel' && value === '' ? 'Profile views' : value;
|
||||
setBadgeOptions({ ...badgeOptions, [option]: newVal });
|
||||
handleDataChange(option, { target: { value: newVal } });
|
||||
};
|
||||
clearTimeout(debounce);
|
||||
setDebounce(setTimeout(callback, 300));
|
||||
};
|
||||
|
||||
const onStatsUpdate = (option, value) => {
|
||||
const newStatsOptions = { ...githubStatsOptions, [option]: value };
|
||||
setGithubStatsOptions(newStatsOptions);
|
||||
handleDataChange('githubStatsOptions', {
|
||||
target: { value: newStatsOptions },
|
||||
});
|
||||
};
|
||||
|
||||
const onTopLangUpdate = (option, value) => {
|
||||
const newLangOptions = { ...topLanguagesOptions, [option]: value };
|
||||
setTopLanguagesOptions(newLangOptions);
|
||||
handleDataChange('topLanguagesOptions', {
|
||||
target: { value: newLangOptions },
|
||||
});
|
||||
};
|
||||
|
||||
const onStreakStatsUpdate = (option, value) => {
|
||||
const newStreakStatsOptions = { ...streakStatsOptions, [option]: value };
|
||||
setStreakStatsOptions(newStreakStatsOptions);
|
||||
handleDataChange('streakStatsOptions', {
|
||||
target: { value: newStreakStatsOptions },
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
<AddonsItem
|
||||
inputId="visitors-count"
|
||||
inputChecked={data.visitorsBadge}
|
||||
onInputChange={() => handleCheckChange('visitorsBadge')}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Badge"
|
||||
CustomizationOptions={
|
||||
<CustomizeBadge githubName={social.github} badgeOptions={badgeOptions} onBadgeUpdate={onBadgeUpdate} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display visitors count badge
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="github-profile-trophy"
|
||||
inputChecked={data.githubProfileTrophy}
|
||||
onInputChange={() => handleCheckChange('githubProfileTrophy')}
|
||||
>
|
||||
display github trophy
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="github-stats"
|
||||
inputChecked={data.githubStats}
|
||||
onInputChange={() => handleCheckChange('githubStats')}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Github Stats Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeGithubStatsBase prefix="stats" options={githubStatsOptions} onUpdate={onStatsUpdate} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display github profile stats card
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="top-languages"
|
||||
inputChecked={data.topLanguages}
|
||||
onInputChange={() => handleCheckChange('topLanguages')}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Top Skills Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeGithubStatsBase prefix="top-lang" options={topLanguagesOptions} onUpdate={onTopLangUpdate} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display top skills
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="streak-stats"
|
||||
inputChecked={data.streakStats}
|
||||
onInputChange={() => handleCheckChange('streakStats')}
|
||||
Options={
|
||||
<CustomizeOptions
|
||||
title="Customize Streak Stats Card"
|
||||
CustomizationOptions={
|
||||
<CustomizeStreakStats prefix="streak-stats" options={streakStatsOptions} onUpdate={onStreakStatsUpdate} />
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
display github streak stats
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="twitter-badge"
|
||||
inputChecked={data.twitterBadge}
|
||||
onInputChange={() => handleCheckChange('twitterBadge')}
|
||||
>
|
||||
display twitter badge
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="dev-dynamic-blogs"
|
||||
inputChecked={data.devDynamicBlogs}
|
||||
onInputChange={() => handleCheckChange('devDynamicBlogs')}
|
||||
>
|
||||
display latest dev.to blogs dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="medium-dynamic-blogs"
|
||||
inputChecked={data.mediumDynamicBlogs}
|
||||
onInputChange={() => handleCheckChange('mediumDynamicBlogs')}
|
||||
>
|
||||
display latest medium blogs dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
<AddonsItem
|
||||
inputId="rss-dynamic-blogs"
|
||||
inputChecked={data.rssDynamicBlogs}
|
||||
onInputChange={() => handleCheckChange('rssDynamicBlogs')}
|
||||
>
|
||||
display latest blogs from your personal blog dynamically (GitHub Action)
|
||||
</AddonsItem>
|
||||
|
||||
{(data.devDynamicBlogs && social.dev) ||
|
||||
(data.rssDynamicBlogs && social.rssurl) ||
|
||||
(data.mediumDynamicBlogs && social.medium && isMediumUsernameValid(social.medium)) ? (
|
||||
<div className="workflow">
|
||||
<div>
|
||||
download
|
||||
<span
|
||||
id="blog-post-worklow-span"
|
||||
onClick={blogPostPorkflow}
|
||||
onKeyDown={(e) => e.keyCode === 13 && 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Addons;
|
||||
Addons.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
social: PropTypes.object.isRequired,
|
||||
handleDataChange: PropTypes.func.isRequired,
|
||||
handleCheckChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
import React from "react"
|
||||
const Donate = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="text-center text-4xl my-2">Support
|
||||
<span role="img" aria-label="praying hand emoji">🙏</span>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-start justify-between">
|
||||
<div className="w-full sm:w-2/3">
|
||||
<div className="text-2xl mb-2">
|
||||
Are you using the tool and happy with it to create your GitHub
|
||||
Profile?
|
||||
</div>
|
||||
<div className="text-lg">
|
||||
Your kind support keeps open-source tools like this free for others.
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<a
|
||||
className="flex items-center justify-start w-20"
|
||||
href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
|
||||
>
|
||||
<img
|
||||
className="w-20"
|
||||
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>
|
||||
Let the world know how you feel using this tool. Share with others
|
||||
on twitter.
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
|
||||
<span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
|
||||
{/* Ko-Fi */}
|
||||
<a
|
||||
href="https://ko-fi.com/A0A81XXSX"
|
||||
className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
|
||||
alt="Buy ko-fi for rahuldkjain"
|
||||
/>
|
||||
Buy me a ko-fi
|
||||
</a>
|
||||
{/* Paypal */}
|
||||
<a
|
||||
href="https://www.paypal.me/rahuldkjain/10"
|
||||
className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-32 h-4"
|
||||
src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
|
||||
alt="Donate rahuldkjain via paypal"
|
||||
/>
|
||||
{/* <img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.svg"
|
||||
alt="Donate rahuldkjain via paypal"
|
||||
/>
|
||||
Paypal */}
|
||||
</a>
|
||||
{/* BuyMeACoffee */}
|
||||
<a
|
||||
href="https://www.buymeacoffee.com/rahuldkjain"
|
||||
className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
|
||||
alt="Buy rahuldkjain A Coffee"
|
||||
/>
|
||||
Buy me a coffee
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Donate
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
|
||||
const Donate = () => (
|
||||
<>
|
||||
<div className="text-center text-4xl my-2">
|
||||
Support
|
||||
<span role="img" aria-label="praying hand emoji">
|
||||
🙏
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-start justify-between">
|
||||
<div className="w-full sm:w-2/3">
|
||||
<div className="text-2xl mb-2">Are you using the tool and happy with it to create your GitHub Profile?</div>
|
||||
<div className="text-lg">Your kind support keeps open-source tools like this free for others.</div>
|
||||
<div className="mt-4">
|
||||
<a
|
||||
className="flex items-center justify-start w-20"
|
||||
href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
|
||||
>
|
||||
<img
|
||||
className="w-20"
|
||||
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>
|
||||
Let the world know how you feel using this tool. Share with others on twitter.
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
|
||||
<span>
|
||||
Tip
|
||||
<span role="img" aria-label="Dollar medal">
|
||||
💰
|
||||
</span>
|
||||
</span>
|
||||
{/* Ko-Fi */}
|
||||
<a
|
||||
href="https://ko-fi.com/A0A81XXSX"
|
||||
className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
|
||||
alt="Buy ko-fi for rahuldkjain"
|
||||
/>
|
||||
Buy me a ko-fi
|
||||
</a>
|
||||
{/* Paypal */}
|
||||
<a
|
||||
href="https://www.paypal.me/rahuldkjain/10"
|
||||
className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-32 h-4"
|
||||
src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
|
||||
alt="Donate rahuldkjain via paypal"
|
||||
/>
|
||||
{/* <img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.svg"
|
||||
alt="Donate rahuldkjain via paypal"
|
||||
/>
|
||||
Paypal */}
|
||||
</a>
|
||||
{/* BuyMeACoffee */}
|
||||
<a
|
||||
href="https://www.buymeacoffee.com/rahuldkjain"
|
||||
className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="w-6 h-6 mr-2"
|
||||
src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
|
||||
alt="Buy rahuldkjain A Coffee"
|
||||
/>
|
||||
Buy me a coffee
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export default Donate;
|
||||
@@ -1,120 +0,0 @@
|
||||
import React from "react"
|
||||
import links from "../constants/page-links"
|
||||
import logo from "../images/mdg.png"
|
||||
import discord from "../images/Discord-Logo.png"
|
||||
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">
|
||||
<div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
|
||||
<div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
|
||||
<h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
|
||||
<div className="flex sm:flex-col items-start mb-3 sm:mb-0">
|
||||
<img
|
||||
src={logo}
|
||||
className="hidden sm:block h-24"
|
||||
alt="github profile markdown generator logo"
|
||||
/>
|
||||
<div className="mr-2 sm:mr-0">
|
||||
GitHub Profile{" "}
|
||||
<img
|
||||
src={logo}
|
||||
className="inline sm:hidden h-12"
|
||||
alt="github profile markdown generator logo"
|
||||
/>
|
||||
<span className="block sm:inline">README Generator</span>
|
||||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="text-xl sm:text-base font-light sm:font-normal">
|
||||
<div className="font-title font-bold mb-4 sm:mb-2">
|
||||
<strong>Pages</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.addons} activeStyle={{ color: "#002ead" }}>
|
||||
Addons
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.support} activeStyle={{ color: "#002ead" }}>
|
||||
Support
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.about} activeStyle={{ color: "#002ead" }}>
|
||||
About
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl sm:text-base font-light sm:font-normal">
|
||||
<div className="font-title font-bold my-4 sm:my-0 sm:mb-2">
|
||||
<strong>More</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
aria-label="Github rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
|
||||
aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Releases
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
|
||||
aria-label="Issues in rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Issues
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
|
||||
aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Pull Requests
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
|
||||
<strong>Join Community</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://discord.gg/HHMs7Eg"
|
||||
aria-label="Discord of the community"
|
||||
target="blank"
|
||||
>
|
||||
<img
|
||||
src={discord}
|
||||
className="h-12"
|
||||
alt="Discord of the community"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2 mt-2">
|
||||
Developed in India{" "}
|
||||
<span role="img" aria-label="india">
|
||||
{" "}
|
||||
🇮🇳
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Footer
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import links from '../constants/page-links';
|
||||
import logo from '../images/mdg.png';
|
||||
import discord from '../images/Discord-Logo.png';
|
||||
|
||||
const Footer = () => (
|
||||
<div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
|
||||
<div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
|
||||
<div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
|
||||
<h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
|
||||
<div className="flex sm:flex-col items-start mb-3 sm:mb-0">
|
||||
<img src={logo} className="hidden sm:block h-24" alt="github profile markdown generator logo" />
|
||||
<div className="mr-2 sm:mr-0">
|
||||
GitHub Profile{' '}
|
||||
<img src={logo} className="inline sm:hidden h-12" alt="github profile markdown generator logo" />
|
||||
<span className="block sm:inline">README Generator</span>
|
||||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div className="text-xl sm:text-base font-light sm:font-normal">
|
||||
<div className="font-title font-bold mb-4 sm:mb-2">
|
||||
<strong>Pages</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.addons} activeStyle={{ color: '#002ead' }}>
|
||||
Addons
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.support} activeStyle={{ color: '#002ead' }}>
|
||||
Support
|
||||
</Link>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<Link to={links.about} activeStyle={{ color: '#002ead' }}>
|
||||
About
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl sm:text-base font-light sm:font-normal">
|
||||
<div className="font-title font-bold my-4 sm:my-0 sm:mb-2">
|
||||
<strong>More</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
aria-label="Github rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
|
||||
aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Releases
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
|
||||
aria-label="Issues in rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Issues
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
|
||||
aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
|
||||
target="blank"
|
||||
>
|
||||
Pull Requests
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
|
||||
<strong>Join Community</strong>
|
||||
</div>
|
||||
<div className="ml-2 sm:ml-0">
|
||||
<a href="https://discord.gg/HHMs7Eg" aria-label="Discord of the community" target="blank">
|
||||
<img src={discord} className="h-12" alt="Discord of the community" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-2 mt-2">
|
||||
Developed in India{' '}
|
||||
<span role="img" aria-label="india">
|
||||
{' '}
|
||||
🇮🇳
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default Footer;
|
||||
@@ -1,105 +0,0 @@
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { StarIcon, RepoForkedIcon } from "@primer/octicons-react"
|
||||
import logo from "../images/mdg.png"
|
||||
import links from "../constants/page-links"
|
||||
import gsap from "gsap"
|
||||
import axios from "axios"
|
||||
import { Link } from "gatsby"
|
||||
import { act } from "react-dom/test-utils"
|
||||
|
||||
const Header = props => {
|
||||
const shouldRequestStats = () => {
|
||||
const isFirstRequest = stats.starsCount === 0
|
||||
const isVisible = window.document.visibilityState === "visible"
|
||||
const hasFocus = window.document.hasFocus()
|
||||
return isFirstRequest || (isVisible && hasFocus)
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
if (shouldRequestStats()) {
|
||||
var response = await axios.get(
|
||||
"https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
|
||||
)
|
||||
|
||||
const { stargazers_count, forks_count } = response.data
|
||||
|
||||
act(() =>
|
||||
setstats({
|
||||
starsCount: stargazers_count,
|
||||
forksCount: forks_count,
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const [stats, setstats] = useState({
|
||||
starsCount: 0,
|
||||
forksCount: 0,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
setInterval(fetchData, 60000)
|
||||
|
||||
gsap.set(".star, .fork", {
|
||||
transformOrigin: "center",
|
||||
})
|
||||
gsap.to(".star, .fork", {
|
||||
rotateZ: "360",
|
||||
duration: 2,
|
||||
ease: "elastic.inOut",
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="shadow flex items-center justify-center flex-col mb-2 py-2">
|
||||
<Link to={links.home}>
|
||||
<h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
|
||||
<img
|
||||
src={logo}
|
||||
className="w-12 h-12"
|
||||
alt="github profile markdown generator logo"
|
||||
/>
|
||||
<div>{props.heading}</div>
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex justify-center items-center">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
|
||||
target="blank"
|
||||
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>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
|
||||
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
|
||||
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>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,95 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { StarIcon, RepoForkedIcon } from '@primer/octicons-react';
|
||||
import gsap from 'gsap';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'gatsby';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import links from '../constants/page-links';
|
||||
import logo from '../images/mdg.png';
|
||||
|
||||
const Header = (props) => {
|
||||
const { heading } = props;
|
||||
const [stats, setstats] = useState({
|
||||
starsCount: 0,
|
||||
forksCount: 0,
|
||||
});
|
||||
|
||||
const shouldRequestStats = () => {
|
||||
const isFirstRequest = stats.starsCount === 0;
|
||||
const isVisible = window.document.visibilityState === 'visible';
|
||||
const hasFocus = window.document.hasFocus();
|
||||
return isFirstRequest || (isVisible && hasFocus);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
if (shouldRequestStats()) {
|
||||
const response = await axios.get('https://api.github.com/repos/rahuldkjain/github-profile-readme-generator');
|
||||
|
||||
const { stargazers_count: stargazersCount, forks_count: forksCount } = response.data;
|
||||
|
||||
act(() =>
|
||||
setstats({
|
||||
starsCount: stargazersCount,
|
||||
forksCount,
|
||||
}),
|
||||
);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
setInterval(fetchData, 60000);
|
||||
|
||||
gsap.set('.star, .fork', {
|
||||
transformOrigin: 'center',
|
||||
});
|
||||
gsap.to('.star, .fork', {
|
||||
rotateZ: '360',
|
||||
duration: 2,
|
||||
ease: 'elastic.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="shadow flex items-center justify-center flex-col mb-2 py-2">
|
||||
<Link to={links.home}>
|
||||
<h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
|
||||
<img src={logo} className="w-12 h-12" alt="github profile markdown generator logo" />
|
||||
<div>{heading}</div>
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex justify-center items-center">
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
||||
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
|
||||
target="blank"
|
||||
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>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
|
||||
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
|
||||
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>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Header.propTypes = {
|
||||
heading: PropTypes.string.isRequired,
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from "react"
|
||||
import Header from "./header"
|
||||
import Footer from "./footer"
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<header>
|
||||
<Header heading="GitHub Profile README Generator" />
|
||||
</header>
|
||||
<main className="flex-grow">{children}</main>
|
||||
<footer>
|
||||
<Footer />
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Layout
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Header from './header';
|
||||
import Footer from './footer';
|
||||
|
||||
const Layout = ({ children }) => (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<header>
|
||||
<Header heading="GitHub Profile README Generator" />
|
||||
</header>
|
||||
<main className="flex-grow">{children}</main>
|
||||
<footer>
|
||||
<Footer />
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
export default Layout;
|
||||
|
||||
Layout.defaultProps = {
|
||||
children: '',
|
||||
};
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.element,
|
||||
};
|
||||
@@ -1,49 +0,0 @@
|
||||
import React, { useRef, useEffect } from "react"
|
||||
import gsap from "gsap"
|
||||
const Loader = () => {
|
||||
let arrow = useRef([])
|
||||
useEffect(() => {
|
||||
var tl = new gsap.timeline({ repeat: -1 })
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: 0,
|
||||
color: "#3b3b4f",
|
||||
},
|
||||
{
|
||||
y: -50,
|
||||
color: "#d0d0d5",
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: "Linear.easeNone",
|
||||
}
|
||||
)
|
||||
tl.add("cp")
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: -50,
|
||||
color: "#d0d0d5",
|
||||
},
|
||||
{
|
||||
y: 0,
|
||||
color: "#3b3b4f",
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: "Linear.easeNone",
|
||||
},
|
||||
"cp-=0.3"
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className="loader">
|
||||
<span ref={el => (arrow.current[0] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[1] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[2] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[3] = el)}>↓</span>
|
||||
<span ref={el => (arrow.current[4] = el)}>↓</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loader
|
||||
@@ -0,0 +1,80 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
|
||||
const Loader = () => {
|
||||
const arrow = useRef([]);
|
||||
useEffect(() => {
|
||||
const tl = gsap.timeline({ repeat: -1 });
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
},
|
||||
{
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone',
|
||||
},
|
||||
);
|
||||
tl.add('cp');
|
||||
tl.fromTo(
|
||||
arrow.current,
|
||||
{
|
||||
y: -50,
|
||||
color: '#d0d0d5',
|
||||
},
|
||||
{
|
||||
y: 0,
|
||||
color: '#3b3b4f',
|
||||
stagger: 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'Linear.easeNone',
|
||||
},
|
||||
'cp-=0.3',
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div className="loader">
|
||||
<span
|
||||
ref={(el) => {
|
||||
arrow.current[0] = el;
|
||||
}}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
<span
|
||||
ref={(el) => {
|
||||
arrow.current[1] = el;
|
||||
}}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
<span
|
||||
ref={(el) => {
|
||||
arrow.current[2] = el;
|
||||
}}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
<span
|
||||
ref={(el) => {
|
||||
arrow.current[3] = el;
|
||||
}}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
<span
|
||||
ref={(el) => {
|
||||
arrow.current[4] = el;
|
||||
}}
|
||||
>
|
||||
↓
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
@@ -1,582 +0,0 @@
|
||||
import React from "react"
|
||||
import { isMediumUsernameValid } from "../utils/validation"
|
||||
import { icons, skills, skillWebsites } from "../constants/skills"
|
||||
import {
|
||||
githubStatsLinkGenerator,
|
||||
topLanguagesLinkGenerator,
|
||||
streakStatsLinkGenerator,
|
||||
} from "../utils/link-generators"
|
||||
const Title = props => {
|
||||
if (props.prefix && props.title) {
|
||||
return (
|
||||
<>
|
||||
{`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const SubTitle = props => {
|
||||
if (props.subtitle) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="center">${props.subtitle}</h3>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const SectionTitle = props => {
|
||||
if (props.label) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="left">${props.label}</h3>`}
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const DisplayWork = props => {
|
||||
if (props.prefix && props.project) {
|
||||
if (props.link) {
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} [${props.project}](${props.link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} **${props.project}**`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
if (props.prefix && props.link) {
|
||||
return (
|
||||
<>
|
||||
{`- ${props.prefix} [${props.link}](${props.link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
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="40" /></a>`}
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const VisitorsBadge = props => {
|
||||
let link =
|
||||
"https://komarev.com/ghpvc/?username=" +
|
||||
props.github +
|
||||
`&label=${props.badgeOptions.badgeLabel}` +
|
||||
`&color=${props.badgeOptions.badgeColor}` +
|
||||
`&style=${props.badgeOptions.badgeStyle}`
|
||||
if (props.show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const TwitterBadge = props => {
|
||||
let link =
|
||||
"https://img.shields.io/twitter/follow/" +
|
||||
props.twitter +
|
||||
"?logo=twitter&style=for-the-badge"
|
||||
if (props.show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const GithubProfileTrophy = props => {
|
||||
let link =
|
||||
"https://github-profile-trophy.vercel.app/?username=" + props.github
|
||||
if (props.show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const GitHubStats = ({ show, github, options }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p> <img align="center" src="${githubStatsLinkGenerator({
|
||||
github: github,
|
||||
options,
|
||||
})}" alt="${github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const isSocial = social => {
|
||||
return (
|
||||
social.dev ||
|
||||
social.twitter ||
|
||||
social.codepen ||
|
||||
social.codesandbox ||
|
||||
social.stackoverflow ||
|
||||
social.linkedin ||
|
||||
social.kaggle ||
|
||||
social.instagram ||
|
||||
social.fb ||
|
||||
social.dribbble ||
|
||||
social.behance ||
|
||||
social.medium ||
|
||||
social.youtube ||
|
||||
social.codechef ||
|
||||
social.hackerrank ||
|
||||
social.codeforces ||
|
||||
social.leetcode ||
|
||||
social.topcoder ||
|
||||
social.hackerearth ||
|
||||
social.geeks_for_geeks ||
|
||||
social.discord ||
|
||||
social.rssurl
|
||||
)
|
||||
}
|
||||
const DisplaySkills = props => {
|
||||
const listChosenSkills = []
|
||||
skills.forEach(skill => {
|
||||
if (props.skills[skill]) {
|
||||
listChosenSkills.push(
|
||||
`
|
||||
<a href="${skillWebsites[skill]}" target="_blank" rel="noreferrer">
|
||||
<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
|
||||
</a>
|
||||
`
|
||||
)
|
||||
}
|
||||
})
|
||||
return listChosenSkills.length > 0 ? (
|
||||
<>
|
||||
<SectionTitle label="Languages and Tools:" />
|
||||
{`<p align="left">${listChosenSkills.join(" ")}</p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
const DisplayDynamicBlogs = props => {
|
||||
if (props.show) {
|
||||
return (
|
||||
<>
|
||||
{`### Blogs posts`}
|
||||
<br />
|
||||
{`<!-- BLOG-POST-LIST:START -->`}
|
||||
<br />
|
||||
{`<!-- BLOG-POST-LIST:END -->`}
|
||||
<br /> <br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const DisplayTopLanguages = props => {
|
||||
if (props.show) {
|
||||
if (!props.showStats) {
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="center" src="${topLanguagesLinkGenerator({
|
||||
github: props.github,
|
||||
options: props.options,
|
||||
})}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="left" src="${topLanguagesLinkGenerator({
|
||||
github: props.github,
|
||||
options: props.options,
|
||||
})}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const DisplayStreakStats = props => {
|
||||
if (props.show) {
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="center" src="${streakStatsLinkGenerator({
|
||||
github: props.github,
|
||||
options: props.options,
|
||||
})}" alt="${props.github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
)
|
||||
}
|
||||
return ""
|
||||
}
|
||||
const DisplaySupport = props => {
|
||||
let viewSupport = false
|
||||
Object.keys(props.support).forEach(key => {
|
||||
if (props.support[key]) {
|
||||
viewSupport = true
|
||||
}
|
||||
})
|
||||
return viewSupport ? (
|
||||
<div>
|
||||
<SectionTitle label="Support:" />
|
||||
{`<p>`}
|
||||
{props.support.buyMeACoffee &&
|
||||
`<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
|
||||
<img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
|
||||
{props.support.buyMeAKofi &&
|
||||
`<a href="https://ko-fi.com/${props.support.buyMeAKofi}">
|
||||
<img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${props.support.buyMeAKofi}" /></a>`}
|
||||
{`</p><br><br>`}
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
const Markdown = props => {
|
||||
const icon_base_url =
|
||||
"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
|
||||
|
||||
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}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(props.data.badgeLabel),
|
||||
badgeColor: props.data.badgeColor,
|
||||
badgeStyle: props.data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<GithubProfileTrophy
|
||||
show={props.data.githubProfileTrophy}
|
||||
github={props.social.github}
|
||||
/>
|
||||
<TwitterBadge
|
||||
base="https://twitter.com"
|
||||
show={props.data.twitterBadge}
|
||||
twitter={props.social.twitter}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<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.resume} link={props.link.resume} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork
|
||||
prefix={props.prefix.funFact}
|
||||
project={props.data.funFact}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayDynamicBlogs
|
||||
show={
|
||||
(props.data.devDynamicBlogs && props.social.dev) ||
|
||||
(props.data.rssDynamicBlogs && props.social.rssurl) ||
|
||||
(props.data.mediumDynamicBlogs &&
|
||||
props.social.medium &&
|
||||
isMediumUsernameValid(props.social.medium))
|
||||
}
|
||||
/>
|
||||
</>
|
||||
{isSocial(props.social) ? (
|
||||
<>
|
||||
<SectionTitle label="Connect with me:" />
|
||||
{`<p align="left">`}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<br />
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon={icon_base_url + "codepen.svg"}
|
||||
username={props.social.codepen}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://dev.to"
|
||||
icon={icon_base_url + "devto.svg"}
|
||||
username={props.social.dev}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://twitter.com"
|
||||
icon={icon_base_url + "twitter.svg"}
|
||||
username={props.social.twitter}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon={icon_base_url + "linked-in-alt.svg"}
|
||||
username={props.social.linkedin}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon={icon_base_url + "stack-overflow.svg"}
|
||||
username={props.social.stackoverflow}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codesandbox.com"
|
||||
icon={icon_base_url + "codesandbox.svg"}
|
||||
username={props.social.codesandbox}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://kaggle.com"
|
||||
icon={icon_base_url + "kaggle.svg"}
|
||||
username={props.social.kaggle}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://fb.com"
|
||||
icon={icon_base_url + "facebook.svg"}
|
||||
username={props.social.fb}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://instagram.com"
|
||||
icon={icon_base_url + "instagram.svg"}
|
||||
username={props.social.instagram}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://dribbble.com"
|
||||
icon={icon_base_url + "dribbble.svg"}
|
||||
username={props.social.dribbble}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.behance.net"
|
||||
icon={icon_base_url + "behance.svg"}
|
||||
username={props.social.behance}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://medium.com"
|
||||
icon={icon_base_url + "medium.svg"}
|
||||
username={props.social.medium}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.youtube.com/c"
|
||||
icon={icon_base_url + "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={icon_base_url + "hackerrank.svg"}
|
||||
username={props.social.hackerrank}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon={icon_base_url + "codeforces.svg"}
|
||||
username={props.social.codeforces}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon={icon_base_url + "leet-code.svg"}
|
||||
username={props.social.leetcode}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon={icon_base_url + "hackerearth.svg"}
|
||||
username={props.social.hackerearth}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon={icon_base_url + "geeks-for-geeks.svg"}
|
||||
username={props.social.geeks_for_geeks}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon={icon_base_url + "topcoder.svg"}
|
||||
username={props.social.topcoder}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://discord.gg"
|
||||
icon={icon_base_url + "discord.svg"}
|
||||
username={props.social.discord}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base=""
|
||||
icon={icon_base_url + "rss.svg"}
|
||||
username={props.social.rssurl}
|
||||
/>
|
||||
</>
|
||||
{isSocial(props.social) ? (
|
||||
<>
|
||||
{`</p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<>
|
||||
<DisplaySkills skills={props.skills} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySupport support={props.support} />
|
||||
</>
|
||||
<>
|
||||
<DisplayTopLanguages
|
||||
show={props.data.topLanguages}
|
||||
showStats={props.data.githubStats}
|
||||
github={props.social.github}
|
||||
options={props.data.topLanguagesOptions}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<GitHubStats
|
||||
show={props.data.githubStats}
|
||||
github={props.social.github}
|
||||
options={props.data.githubStatsOptions}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplayStreakStats
|
||||
show={props.data.streakStats}
|
||||
github={props.social.github}
|
||||
options={props.data.streakStatsOptions}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Markdown
|
||||
@@ -0,0 +1,744 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isMediumUsernameValid } from '../utils/validation';
|
||||
import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
|
||||
import {
|
||||
githubStatsLinkGenerator,
|
||||
topLanguagesLinkGenerator,
|
||||
streakStatsLinkGenerator,
|
||||
} from '../utils/link-generators';
|
||||
import { DEFAULT_DATA, DEFAULT_LINK, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
|
||||
|
||||
const Title = (props) => {
|
||||
const { prefix, title } = props;
|
||||
if (prefix && title) {
|
||||
return (
|
||||
<>
|
||||
{`<h1 align="center">${`${prefix} ${title}`}</h1>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
Title.propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const SubTitle = (props) => {
|
||||
const { subtitle } = props;
|
||||
if (subtitle) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="center">${subtitle}</h3>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
SubTitle.propTypes = {
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const SectionTitle = (props) => {
|
||||
const { label } = props;
|
||||
if (label) {
|
||||
return (
|
||||
<>
|
||||
{`<h3 align="left">${label}</h3>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
SectionTitle.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const DisplayWork = (props) => {
|
||||
const { prefix, project, link } = props;
|
||||
if (prefix && project) {
|
||||
if (link) {
|
||||
return (
|
||||
<>
|
||||
{`- ${prefix} [${project}](${link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{`- ${prefix} **${project}**`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (prefix && link) {
|
||||
return (
|
||||
<>
|
||||
{`- ${prefix} [${link}](${link})`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
DisplayWork.defaultProps = {
|
||||
prefix: '',
|
||||
project: '',
|
||||
link: '',
|
||||
};
|
||||
|
||||
DisplayWork.propTypes = {
|
||||
prefix: PropTypes.string,
|
||||
project: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
};
|
||||
|
||||
const DisplaySocial = (props) => {
|
||||
const { username, base, icon } = props;
|
||||
if (username) {
|
||||
return (
|
||||
<>
|
||||
{`<a href="${base}/${username}" target="blank"><img align="center" src="${icon}" alt="${username}" height="30" width="40" /></a>`}
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
DisplaySocial.propTypes = {
|
||||
username: PropTypes.string.isRequired,
|
||||
base: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const VisitorsBadge = (props) => {
|
||||
const { github, badgeOptions, show } = props;
|
||||
const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <img src="${link}" alt="${github}" /> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
VisitorsBadge.defaultProps = {
|
||||
badgeOptions: {
|
||||
badgeLabel: '',
|
||||
badgeColor: '',
|
||||
badgeStyle: '',
|
||||
},
|
||||
};
|
||||
|
||||
VisitorsBadge.propTypes = {
|
||||
github: PropTypes.string.isRequired,
|
||||
badgeOptions: {
|
||||
badgeLabel: PropTypes.string.isRequired,
|
||||
badgeColor: PropTypes.string.isRequired,
|
||||
badgeStyle: PropTypes.string.isRequired,
|
||||
},
|
||||
show: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const TwitterBadge = (props) => {
|
||||
const { twitter, show, base } = props;
|
||||
const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <a href="${base}/${twitter}" target="blank"><img src="${link}" alt="${twitter}" /></a> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
TwitterBadge.propTypes = {
|
||||
twitter: PropTypes.string.isRequired,
|
||||
base: PropTypes.string.isRequired,
|
||||
show: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const GithubProfileTrophy = (props) => {
|
||||
const { show, github } = props;
|
||||
const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${github}" /></a> </p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
GithubProfileTrophy.propTypes = {
|
||||
github: PropTypes.string.isRequired,
|
||||
show: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const GitHubStats = (props) => {
|
||||
const { show, github, options } = props;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p> <img align="center" src="${githubStatsLinkGenerator({
|
||||
github,
|
||||
options,
|
||||
})}" alt="${github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
GitHubStats.defaultProps = {
|
||||
options: {
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: '',
|
||||
cacheSeconds: 0,
|
||||
locale: '',
|
||||
},
|
||||
};
|
||||
|
||||
GitHubStats.propTypes = {
|
||||
github: PropTypes.string.isRequired,
|
||||
options: {
|
||||
theme: PropTypes.string,
|
||||
titleColor: PropTypes.string,
|
||||
textColor: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
hideBorder: PropTypes.string,
|
||||
cacheSeconds: PropTypes.number,
|
||||
locale: PropTypes.string,
|
||||
},
|
||||
show: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const isSocial = (social) => {
|
||||
let status = false;
|
||||
const SOCIAL_KEYS = Object.keys(DEFAULT_SOCIAL);
|
||||
Object.keys(social).forEach((key) => {
|
||||
if (SOCIAL_KEYS.includes(key)) {
|
||||
status = true;
|
||||
}
|
||||
});
|
||||
return status;
|
||||
};
|
||||
|
||||
const DisplaySkills = (props) => {
|
||||
const { skills } = props;
|
||||
const listChosenSkills = [];
|
||||
SKILLS.forEach((skill) => {
|
||||
if (skills[skill]) {
|
||||
listChosenSkills.push(
|
||||
`
|
||||
<a href="${skillWebsites[skill]}" target="_blank" rel="noreferrer">
|
||||
<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
|
||||
</a>
|
||||
`,
|
||||
);
|
||||
}
|
||||
});
|
||||
return listChosenSkills.length > 0 ? (
|
||||
<>
|
||||
<SectionTitle label="Languages and Tools:" />
|
||||
{`<p align="left">${listChosenSkills.join(' ')}</p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
};
|
||||
|
||||
DisplaySkills.defaultProps = {
|
||||
skills: [],
|
||||
};
|
||||
|
||||
DisplaySkills.propTypes = {
|
||||
skills: [],
|
||||
};
|
||||
|
||||
const DisplayDynamicBlogs = (props) => {
|
||||
const { show } = props;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
### Blogs posts
|
||||
<br />
|
||||
{'<!-- BLOG-POST-LIST:START -->'}
|
||||
<br />
|
||||
{'<!-- BLOG-POST-LIST:END -->'}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
DisplayDynamicBlogs.defaultProps = {
|
||||
show: false,
|
||||
};
|
||||
|
||||
DisplayDynamicBlogs.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
const DisplayTopLanguages = (props) => {
|
||||
const { show, showStats, github, options } = props;
|
||||
if (show) {
|
||||
if (!showStats) {
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="center" src="${topLanguagesLinkGenerator({
|
||||
github,
|
||||
options,
|
||||
})}" alt="${github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="left" src="${topLanguagesLinkGenerator({
|
||||
github,
|
||||
options,
|
||||
})}" alt="${github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
DisplayTopLanguages.defaultProps = {
|
||||
options: {
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: '',
|
||||
cacheSeconds: '',
|
||||
locale: '',
|
||||
},
|
||||
};
|
||||
|
||||
DisplayTopLanguages.propTypes = {
|
||||
github: PropTypes.string.isRequired,
|
||||
options: {
|
||||
theme: PropTypes.string,
|
||||
titleColor: PropTypes.string,
|
||||
textColor: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
hideBorder: PropTypes.string,
|
||||
cacheSeconds: PropTypes.number,
|
||||
locale: PropTypes.string,
|
||||
},
|
||||
show: PropTypes.bool.isRequired,
|
||||
showStats: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const DisplayStreakStats = (props) => {
|
||||
const { show, github, options } = props;
|
||||
if (show) {
|
||||
return (
|
||||
<>
|
||||
{`<p><img align="center" src="${streakStatsLinkGenerator({
|
||||
github,
|
||||
options,
|
||||
})}" alt="${github}" /></p>`}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
DisplayStreakStats.defaultProps = {
|
||||
options: {
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: '',
|
||||
cacheSeconds: '',
|
||||
locale: '',
|
||||
},
|
||||
};
|
||||
|
||||
DisplayStreakStats.propTypes = {
|
||||
github: PropTypes.string.isRequired,
|
||||
options: {
|
||||
theme: PropTypes.string,
|
||||
titleColor: PropTypes.string,
|
||||
textColor: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
hideBorder: PropTypes.string,
|
||||
cacheSeconds: PropTypes.number,
|
||||
locale: PropTypes.string,
|
||||
},
|
||||
show: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const DisplaySupport = (props) => {
|
||||
const { support } = props;
|
||||
let viewSupport = false;
|
||||
Object.keys(support).forEach((key) => {
|
||||
if (support[key]) {
|
||||
viewSupport = true;
|
||||
}
|
||||
});
|
||||
return viewSupport ? (
|
||||
<div>
|
||||
<SectionTitle label="Support:" />
|
||||
{'<p>'}
|
||||
{support.buyMeACoffee &&
|
||||
`<a href="https://www.buymeacoffee.com/${support.buyMeACoffee}">
|
||||
<img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${support.buyMeACoffee}" /></a>`}
|
||||
{support.buyMeAKofi &&
|
||||
`<a href="https://ko-fi.com/${support.buyMeAKofi}">
|
||||
<img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${support.buyMeAKofi}" /></a>`}
|
||||
{'</p><br><br>'}
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
};
|
||||
|
||||
DisplaySupport.defaultProps = {
|
||||
support: {
|
||||
buyMeACoffee: '',
|
||||
buyMeAKofi: '',
|
||||
},
|
||||
};
|
||||
|
||||
DisplaySupport.propTypes = {
|
||||
support: {
|
||||
buyMeACoffee: PropTypes.string,
|
||||
buyMeAKofi: PropTypes.string,
|
||||
},
|
||||
};
|
||||
|
||||
const Markdown = (props) => {
|
||||
const { prefix, data, link, social, skills, support } = props;
|
||||
const iconBaseUrl =
|
||||
'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
|
||||
return (
|
||||
<div id="markdown-content" className="break-words">
|
||||
<>
|
||||
<Title prefix={prefix.title} title={data.title} />
|
||||
</>
|
||||
<>
|
||||
<SubTitle subtitle={data.subtitle} />
|
||||
</>
|
||||
<>
|
||||
<VisitorsBadge
|
||||
show={data.visitorsBadge}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<GithubProfileTrophy show={data.githubProfileTrophy} github={social.github} />
|
||||
<TwitterBadge base="https://twitter.com" show={data.twitterBadge} twitter={social.twitter} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn} link={link.collaborateOn} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.blog} link={link.blog} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.ama} project={data.ama} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.contact} project={data.contact} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.resume} link={link.resume} />
|
||||
</>
|
||||
<>
|
||||
<DisplayWork prefix={prefix.funFact} project={data.funFact} />
|
||||
</>
|
||||
<>
|
||||
<DisplayDynamicBlogs
|
||||
show={
|
||||
(data.devDynamicBlogs && social.dev) ||
|
||||
(data.rssDynamicBlogs && social.rssurl) ||
|
||||
(data.mediumDynamicBlogs && social.medium && isMediumUsernameValid(social.medium))
|
||||
}
|
||||
/>
|
||||
</>
|
||||
{isSocial(social) ? (
|
||||
<>
|
||||
<SectionTitle label="Connect with me:" />
|
||||
{'<p align="left">'}
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<br />
|
||||
<>
|
||||
<DisplaySocial base="https://codepen.io" icon={`${iconBaseUrl}codepen.svg`} username={social.codepen} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://dev.to" icon={`${iconBaseUrl}devto.svg`} username={social.dev} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://twitter.com" icon={`${iconBaseUrl}twitter.svg`} username={social.twitter} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon={`${iconBaseUrl}linked-in-alt.svg`}
|
||||
username={social.linkedin}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon={`${iconBaseUrl}stack-overflow.svg`}
|
||||
username={social.stackoverflow}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codesandbox.com"
|
||||
icon={`${iconBaseUrl}codesandbox.svg`}
|
||||
username={social.codesandbox}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://kaggle.com" icon={`${iconBaseUrl}kaggle.svg`} username={social.kaggle} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://fb.com" icon={`${iconBaseUrl}facebook.svg`} username={social.fb} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://instagram.com" icon={`${iconBaseUrl}instagram.svg`} username={social.instagram} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://dribbble.com" icon={`${iconBaseUrl}dribbble.svg`} username={social.dribbble} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://www.behance.net" icon={`${iconBaseUrl}behance.svg`} username={social.behance} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://hashnode.com" icon={`${iconBaseUrl}hashnode.svg`} username={social.hashnode} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://medium.com" icon={`${iconBaseUrl}medium.svg`} username={social.medium} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://www.youtube.com/c" icon={`${iconBaseUrl}youtube.svg`} username={social.youtube} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.codechef.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
|
||||
username={social.codechef}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerrank.com"
|
||||
icon={`${iconBaseUrl}hackerrank.svg`}
|
||||
username={social.hackerrank}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon={`${iconBaseUrl}codeforces.svg`}
|
||||
username={social.codeforces}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon={`${iconBaseUrl}leet-code.svg`}
|
||||
username={social.leetcode}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon={`${iconBaseUrl}hackerearth.svg`}
|
||||
username={social.hackerearth}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon={`${iconBaseUrl}geeks-for-geeks.svg`}
|
||||
username={social.geeks_for_geeks}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon={`${iconBaseUrl}topcoder.svg`}
|
||||
username={social.topcoder}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://discord.gg" icon={`${iconBaseUrl}discord.svg`} username={social.discord} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="" icon={`${iconBaseUrl}rss.svg`} username={social.rssurl} />
|
||||
</>
|
||||
{isSocial(social) ? (
|
||||
<>
|
||||
{'</p>'}
|
||||
<br />
|
||||
<br />
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<>
|
||||
<DisplaySkills skills={skills} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySupport support={support} />
|
||||
</>
|
||||
<>
|
||||
<DisplayTopLanguages
|
||||
show={data.topLanguages}
|
||||
showStats={data.githubStats}
|
||||
github={social.github}
|
||||
options={data.topLanguagesOptions}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<GitHubStats show={data.githubStats} github={social.github} options={data.githubStatsOptions} />
|
||||
</>
|
||||
<>
|
||||
<DisplayStreakStats show={data.streakStats} github={social.github} options={data.streakStatsOptions} />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Markdown;
|
||||
|
||||
Markdown.defaultProps = {
|
||||
prefix: DEFAULT_PREFIX,
|
||||
data: DEFAULT_DATA,
|
||||
link: DEFAULT_LINK,
|
||||
social: DEFAULT_SOCIAL,
|
||||
support: DEFAULT_SUPPORT,
|
||||
skills: [],
|
||||
};
|
||||
Markdown.propTypes = {
|
||||
prefix: {
|
||||
title: PropTypes.string,
|
||||
currentWork: PropTypes.string,
|
||||
currentLearn: PropTypes.string,
|
||||
collaborateOn: PropTypes.string,
|
||||
helpWith: PropTypes.string,
|
||||
ama: PropTypes.string,
|
||||
contact: PropTypes.string,
|
||||
resume: PropTypes.string,
|
||||
funFact: PropTypes.string,
|
||||
portfolio: PropTypes.string,
|
||||
blog: PropTypes.string,
|
||||
},
|
||||
data: {
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
currentWork: PropTypes.string,
|
||||
currentLearn: PropTypes.string,
|
||||
collaborateOn: PropTypes.string,
|
||||
helpWith: PropTypes.string,
|
||||
ama: PropTypes.string,
|
||||
contact: PropTypes.string,
|
||||
funFact: PropTypes.string,
|
||||
twitterBadge: false,
|
||||
visitorsBadge: false,
|
||||
badgeStyle: PropTypes.string,
|
||||
badgeColor: PropTypes.string,
|
||||
badgeLabel: PropTypes.string,
|
||||
githubProfileTrophy: false,
|
||||
githubStats: false,
|
||||
githubStatsOptions: {
|
||||
theme: PropTypes.string,
|
||||
titleColor: PropTypes.string,
|
||||
textColor: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: PropTypes.string,
|
||||
},
|
||||
topLanguages: false,
|
||||
topLanguagesOptions: {
|
||||
theme: PropTypes.string,
|
||||
titleColor: PropTypes.string,
|
||||
textColor: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: PropTypes.string,
|
||||
},
|
||||
streakStats: false,
|
||||
streakStatsOptions: {
|
||||
theme: PropTypes.string,
|
||||
},
|
||||
devDynamicBlogs: false,
|
||||
mediumDynamicBlogs: false,
|
||||
rssDynamicBlogs: false,
|
||||
},
|
||||
link: {},
|
||||
social: {},
|
||||
skills: {},
|
||||
support: {},
|
||||
};
|
||||
@@ -1,502 +0,0 @@
|
||||
import React from "react"
|
||||
import { icons, skills, skillWebsites } from "../constants/skills"
|
||||
import {
|
||||
githubStatsLinkGenerator,
|
||||
topLanguagesLinkGenerator,
|
||||
streakStatsLinkGenerator,
|
||||
} from "../utils/link-generators"
|
||||
|
||||
export const TitlePreview = props => {
|
||||
if (props.prefix && props.title) {
|
||||
return (
|
||||
<h1 className="text-center text-xl font-bold">
|
||||
{props.prefix + " " + props.title}
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const SubTitlePreview = props => {
|
||||
if (props.subtitle) {
|
||||
return <h3 className="text-center font-medium">{props.subtitle}</h3>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const SectionTitle = props => {
|
||||
if (!props.visible) return null
|
||||
else if (props.label) {
|
||||
return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export 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>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export 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.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.ama} project={data.ama} />
|
||||
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
|
||||
<DisplayWork prefix={prefix.blog} link={link.blog} />
|
||||
<DisplayWork prefix={prefix.resume} link={link.resume} />
|
||||
<DisplayWork prefix={prefix.contact} project={data.contact} />
|
||||
<DisplayWork prefix={prefix.funFact} project={data.funFact} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export 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 null
|
||||
}
|
||||
|
||||
export const SocialPreview = props => {
|
||||
let viewSocial = false
|
||||
const icon_base_url =
|
||||
"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
|
||||
Object.keys(props.social).forEach(key => {
|
||||
if (props.social[key] && key !== "github") viewSocial = true
|
||||
})
|
||||
return (
|
||||
<div className="flex justify-start items-end flex-wrap">
|
||||
<SectionTitle label="Connect with me:" visible={viewSocial} />
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codepen.io"
|
||||
icon={icon_base_url + "codepen.svg"}
|
||||
username={props.social.codepen}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://dev.to"
|
||||
icon={icon_base_url + "devto.svg"}
|
||||
username={props.social.dev}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://twitter.com"
|
||||
icon={icon_base_url + "twitter.svg"}
|
||||
username={props.social.twitter}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon={icon_base_url + "linked-in-alt.svg"}
|
||||
username={props.social.linkedin}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon={icon_base_url + "stack-overflow.svg"}
|
||||
username={props.social.stackoverflow}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codesandbox.com"
|
||||
icon={icon_base_url + "codesandbox.svg"}
|
||||
username={props.social.codesandbox}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://kaggle.com"
|
||||
icon={icon_base_url + "kaggle.svg"}
|
||||
username={props.social.kaggle}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://fb.com"
|
||||
icon={icon_base_url + "facebook.svg"}
|
||||
username={props.social.fb}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://instagram.com"
|
||||
icon={icon_base_url + "instagram.svg"}
|
||||
username={props.social.instagram}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://dribbble.com"
|
||||
icon={icon_base_url + "dribbble.svg"}
|
||||
username={props.social.dribbble}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.behance.net"
|
||||
icon={icon_base_url + "behance.svg"}
|
||||
username={props.social.behance}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://medium.com"
|
||||
icon={icon_base_url + "medium.svg"}
|
||||
username={props.social.medium}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.youtube.com/c"
|
||||
icon={icon_base_url + "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={icon_base_url + "hackerrank.svg"}
|
||||
username={props.social.hackerrank}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon={icon_base_url + "codeforces.svg"}
|
||||
username={props.social.codeforces}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon={icon_base_url + "leet-code.svg"}
|
||||
username={props.social.leetcode}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon={icon_base_url + "hackerearth.svg"}
|
||||
username={props.social.hackerearth}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon={icon_base_url + "geeks-for-geeks.svg"}
|
||||
username={props.social.geeks_for_geeks}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon={icon_base_url + "topcoder.svg"}
|
||||
username={props.social.topcoder}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://discord.gg"
|
||||
icon={icon_base_url + "discord.svg"}
|
||||
username={props.social.discord}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base=""
|
||||
icon={icon_base_url + "rss.svg"}
|
||||
username={props.social.rssurl}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const VisitorsBadgePreview = props => {
|
||||
let link =
|
||||
"https://komarev.com/ghpvc/?username=" +
|
||||
props.github +
|
||||
`&label=${props.badgeOptions.badgeLabel}` +
|
||||
`&color=${props.badgeOptions.badgeColor}` +
|
||||
`&style=${props.badgeOptions.badgeStyle}`
|
||||
if (props.show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{" "}
|
||||
<img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const TwitterBadgePreview = props => {
|
||||
let link =
|
||||
"https://img.shields.io/twitter/follow/" +
|
||||
props.twitter +
|
||||
"?logo=twitter&style=for-the-badge"
|
||||
if (props.show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{" "}
|
||||
<a
|
||||
href="https://twitter.com/${props.twitter}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img className="h-4 sm:h-6" src={link} alt={props.twitter} />
|
||||
</a>{" "}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const GithubProfileTrophyPreview = props => {
|
||||
let link =
|
||||
"https://github-profile-trophy.vercel.app/?username=" + props.github
|
||||
if (props.show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{" "}
|
||||
<a href="https://github.com/ryo-ma/github-profile-trophy">
|
||||
<img src={link} alt={props.github} />
|
||||
</a>{" "}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const GitHubStatsPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={githubStatsLinkGenerator({ github, options })} alt={github} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const TopLanguagesPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img
|
||||
src={topLanguagesLinkGenerator({ github, options })}
|
||||
alt={github}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div className="text-center mx-4 mb-4"> </div>
|
||||
}
|
||||
|
||||
export const StreakStatsPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={streakStatsLinkGenerator({ github, options })} alt={github} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const SkillsPreview = props => {
|
||||
var listSkills = []
|
||||
skills.forEach(skill => {
|
||||
if (props.skills[skill]) {
|
||||
listSkills.push(
|
||||
<a
|
||||
href={skillWebsites[skill]}
|
||||
key={skill}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
|
||||
src={icons[skill]}
|
||||
alt={skill}
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
})
|
||||
return listSkills.length > 0 ? (
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
<SectionTitle label="Languages and Tools:" visible={true} />
|
||||
{listSkills}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
|
||||
export const SupportPreview = props => {
|
||||
let viewSupport = false
|
||||
Object.keys(props.support).forEach(key => {
|
||||
if (props.support[key]) {
|
||||
viewSupport = true
|
||||
}
|
||||
})
|
||||
return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
<SectionTitle label="Support:" visible={viewSupport} />
|
||||
{props.support.buyMeACoffee && (
|
||||
<a
|
||||
href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
|
||||
alt="Buy Me A Coffee"
|
||||
className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{props.support.buyMeAKofi && (
|
||||
<a
|
||||
href={`https://ko-fi.com/` + props.support.buyMeAKofi}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
|
||||
alt="Buy Me A Ko-fi"
|
||||
className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
|
||||
const MarkdownPreview = props => {
|
||||
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}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(props.data.badgeLabel),
|
||||
badgeColor: props.data.badgeColor,
|
||||
badgeStyle: props.data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
<GithubProfileTrophyPreview
|
||||
show={props.data.githubProfileTrophy}
|
||||
github={props.social.github}
|
||||
/>
|
||||
<TwitterBadgePreview
|
||||
show={props.data.twitterBadge}
|
||||
twitter={props.social.twitter}
|
||||
/>
|
||||
<WorkPreview work={props} />
|
||||
<SocialPreview social={props.social} />
|
||||
<SkillsPreview skills={props.skills} />
|
||||
<SupportPreview support={props.support} />
|
||||
<div className="block sm:flex sm:justify-center sm:items-start">
|
||||
<TopLanguagesPreview
|
||||
show={props.data.topLanguages}
|
||||
github={props.social.github}
|
||||
options={props.data.topLanguagesOptions}
|
||||
/>
|
||||
<GitHubStatsPreview
|
||||
show={props.data.githubStats}
|
||||
github={props.social.github}
|
||||
options={props.data.githubStatsOptions}
|
||||
/>
|
||||
<StreakStatsPreview
|
||||
show={props.data.streakStats}
|
||||
github={props.social.github}
|
||||
options={props.data.streakStatsOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkdownPreview
|
||||
@@ -0,0 +1,510 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
|
||||
import {
|
||||
githubStatsLinkGenerator,
|
||||
topLanguagesLinkGenerator,
|
||||
streakStatsLinkGenerator,
|
||||
} from '../utils/link-generators';
|
||||
import { DEFAULT_DATA, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
|
||||
|
||||
export const TitlePreview = (props) => {
|
||||
const { prefix, title } = props;
|
||||
if (prefix && title) {
|
||||
return <h1 className="text-center text-xl font-bold">{`${prefix} ${title}`}</h1>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
TitlePreview.propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export const SubTitlePreview = (props) => {
|
||||
const { subtitle } = props;
|
||||
if (subtitle) {
|
||||
return <h3 className="text-center font-medium">{subtitle}</h3>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
SubTitlePreview.propTypes = {
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export const SectionTitle = (props) => {
|
||||
const { visible, label } = props;
|
||||
if (!visible) return null;
|
||||
if (label) {
|
||||
return <h3 className="w-full text-lg sm:text-xl">{label}</h3>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
SectionTitle.defaultProps = {
|
||||
visible: false,
|
||||
};
|
||||
SectionTitle.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
label: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export const DisplayWork = (props) => {
|
||||
const { prefix, project, link } = props;
|
||||
if (prefix && project) {
|
||||
if (link) {
|
||||
return (
|
||||
<div className="my-2">
|
||||
{`${prefix} `}
|
||||
<a href={link} className="no-underline text-blue-700" target="blank">
|
||||
{project}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="my-2">
|
||||
{`${prefix} `}
|
||||
<b>{project}</b>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (prefix && link) {
|
||||
return (
|
||||
<div className="my-2">
|
||||
{`${prefix} `}
|
||||
<a href={link} className="no-underline text-blue-700" target="blank">
|
||||
{link}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
DisplayWork.defaultProps = {
|
||||
prefix: '',
|
||||
project: '',
|
||||
link: '',
|
||||
};
|
||||
|
||||
DisplayWork.propTypes = {
|
||||
prefix: PropTypes.string,
|
||||
project: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
};
|
||||
|
||||
export const WorkPreview = (props) => {
|
||||
const { work } = props;
|
||||
const { prefix, data, link } = work;
|
||||
return (
|
||||
<>
|
||||
<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.ama} project={data.ama} />
|
||||
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
|
||||
<DisplayWork prefix={prefix.blog} link={link.blog} />
|
||||
<DisplayWork prefix={prefix.resume} link={link.resume} />
|
||||
<DisplayWork prefix={prefix.contact} project={data.contact} />
|
||||
<DisplayWork prefix={prefix.funFact} project={data.funFact} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
WorkPreview.propTypes = {
|
||||
work: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export const DisplaySocial = (props) => {
|
||||
const { username, base, icon } = props;
|
||||
if (username) {
|
||||
return (
|
||||
<a className="no-underline text-blue-700 m-2" href={`${base}/${username}`} target="blank">
|
||||
<img className="w-6 h-6" src={icon} alt="username" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
DisplaySocial.defaultProps = {
|
||||
username: '',
|
||||
base: '',
|
||||
icon: '',
|
||||
};
|
||||
DisplaySocial.propTypes = {
|
||||
username: PropTypes.string,
|
||||
base: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
};
|
||||
|
||||
export const SocialPreview = (props) => {
|
||||
const { social } = props;
|
||||
let viewSocial = false;
|
||||
const iconBaseUrl =
|
||||
'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
|
||||
Object.keys(social).forEach((key) => {
|
||||
if (social[key] && key !== 'github') viewSocial = true;
|
||||
});
|
||||
return (
|
||||
<div className="flex justify-start items-end flex-wrap">
|
||||
<SectionTitle label="Connect with me:" visible={viewSocial} />
|
||||
<>
|
||||
<DisplaySocial base="https://codepen.io" icon={`${iconBaseUrl}codepen.svg`} username={social.codepen} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://dev.to" icon={`${iconBaseUrl}devto.svg`} username={social.dev} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://twitter.com" icon={`${iconBaseUrl}twitter.svg`} username={social.twitter} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://linkedin.com/in"
|
||||
icon={`${iconBaseUrl}linked-in-alt.svg`}
|
||||
username={social.linkedin}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://stackoverflow.com/users"
|
||||
icon={`${iconBaseUrl}stack-overflow.svg`}
|
||||
username={social.stackoverflow}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codesandbox.com"
|
||||
icon={`${iconBaseUrl}codesandbox.svg`}
|
||||
username={social.codesandbox}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://kaggle.com" icon={`${iconBaseUrl}kaggle.svg`} username={social.kaggle} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://fb.com" icon={`${iconBaseUrl}facebook.svg`} username={social.fb} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://instagram.com" icon={`${iconBaseUrl}instagram.svg`} username={social.instagram} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://dribbble.com" icon={`${iconBaseUrl}dribbble.svg`} username={social.dribbble} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://www.behance.net" icon={`${iconBaseUrl}behance.svg`} username={social.behance} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://hashnode.com" icon={`${iconBaseUrl}hashnode.svg`} username={social.hashnode} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://medium.com" icon={`${iconBaseUrl}medium.svg`} username={social.medium} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://www.youtube.com/c" icon={`${iconBaseUrl}youtube.svg`} username={social.youtube} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.codechef.com/users"
|
||||
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
|
||||
username={social.codechef}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerrank.com"
|
||||
icon={`${iconBaseUrl}hackerrank.svg`}
|
||||
username={social.hackerrank}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://codeforces.com/profile"
|
||||
icon={`${iconBaseUrl}codeforces.svg`}
|
||||
username={social.codeforces}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.leetcode.com"
|
||||
icon={`${iconBaseUrl}leet-code.svg`}
|
||||
username={social.leetcode}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.hackerearth.com"
|
||||
icon={`${iconBaseUrl}hackerearth.svg`}
|
||||
username={social.hackerearth}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://auth.geeksforgeeks.org/user"
|
||||
icon={`${iconBaseUrl}geeks-for-geeks.svg`}
|
||||
username={social.geeks_for_geeks}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial
|
||||
base="https://www.topcoder.com/members"
|
||||
icon={`${iconBaseUrl}topcoder.svg`}
|
||||
username={social.topcoder}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="https://discord.gg" icon={`${iconBaseUrl}discord.svg`} username={social.discord} />
|
||||
</>
|
||||
<>
|
||||
<DisplaySocial base="" icon={`${iconBaseUrl}rss.svg`} username={social.rssurl} />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
SocialPreview.propTypes = {
|
||||
social: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export const VisitorsBadgePreview = (props) => {
|
||||
const { github, show, badgeOptions } = props;
|
||||
const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{' '}
|
||||
<img className="h-4 sm:h-6" src={link} alt={github} />{' '}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
VisitorsBadgePreview.defaultProps = {
|
||||
github: '',
|
||||
show: false,
|
||||
badgeOptions: {},
|
||||
};
|
||||
VisitorsBadgePreview.propTypes = {
|
||||
github: PropTypes.string,
|
||||
show: PropTypes.bool,
|
||||
badgeOptions: PropTypes.object,
|
||||
};
|
||||
|
||||
export const TwitterBadgePreview = (props) => {
|
||||
const { twitter, show } = props;
|
||||
const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{' '}
|
||||
<a href={`https://twitter.com/${twitter}`} target="_blank" rel="noreferrer">
|
||||
<img className="h-4 sm:h-6" src={link} alt={twitter} />
|
||||
</a>{' '}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
TwitterBadgePreview.defaultProps = {
|
||||
twitter: '',
|
||||
show: false,
|
||||
};
|
||||
TwitterBadgePreview.propTypes = {
|
||||
twitter: PropTypes.string,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
export const GithubProfileTrophyPreview = (props) => {
|
||||
const { github, show } = props;
|
||||
const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-left my-2">
|
||||
{' '}
|
||||
<a href="https://github.com/ryo-ma/github-profile-trophy">
|
||||
<img src={link} alt={github} />
|
||||
</a>{' '}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
GithubProfileTrophyPreview.defaultProps = {
|
||||
github: '',
|
||||
show: false,
|
||||
};
|
||||
GithubProfileTrophyPreview.propTypes = {
|
||||
github: PropTypes.string,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
export const GitHubStatsPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={githubStatsLinkGenerator({ github, options })} alt={github} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
GitHubStatsPreview.defaultProps = {
|
||||
github: '',
|
||||
options: {},
|
||||
show: false,
|
||||
};
|
||||
GitHubStatsPreview.propTypes = {
|
||||
github: PropTypes.string,
|
||||
options: PropTypes.object,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
export const TopLanguagesPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={topLanguagesLinkGenerator({ github, options })} alt={github} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div className="text-center mx-4 mb-4"> </div>;
|
||||
};
|
||||
TopLanguagesPreview.defaultProps = {
|
||||
github: '',
|
||||
options: {},
|
||||
show: false,
|
||||
};
|
||||
TopLanguagesPreview.propTypes = {
|
||||
github: PropTypes.string,
|
||||
options: PropTypes.object,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
export const StreakStatsPreview = ({ github, options, show }) => {
|
||||
if (show) {
|
||||
return (
|
||||
<div className="text-center mx-4 mb-4">
|
||||
<img src={streakStatsLinkGenerator({ github, options })} alt={github} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
StreakStatsPreview.defaultProps = {
|
||||
github: '',
|
||||
options: {},
|
||||
show: false,
|
||||
};
|
||||
StreakStatsPreview.propTypes = {
|
||||
github: PropTypes.string,
|
||||
options: PropTypes.object,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
export const SkillsPreview = (props) => {
|
||||
const { skills } = props;
|
||||
const listSkills = [];
|
||||
SKILLS.forEach((skill) => {
|
||||
if (skills[skill]) {
|
||||
listSkills.push(
|
||||
<a href={skillWebsites[skill]} key={skill} target="_blank" rel="noreferrer">
|
||||
<img className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10" src={icons[skill]} alt={skill} />
|
||||
</a>,
|
||||
);
|
||||
}
|
||||
});
|
||||
return listSkills.length > 0 ? (
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
<SectionTitle label="Languages and Tools:" visible />
|
||||
{listSkills}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
};
|
||||
SkillsPreview.propTypes = {
|
||||
skills: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export const SupportPreview = (props) => {
|
||||
const { support } = props;
|
||||
let viewSupport = false;
|
||||
Object.keys(support).forEach((key) => {
|
||||
if (support[key]) {
|
||||
viewSupport = true;
|
||||
}
|
||||
});
|
||||
return support.buyMeACoffee || support.buyMeAKofi ? (
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
<SectionTitle label="Support:" visible={viewSupport} />
|
||||
{support.buyMeACoffee && (
|
||||
<a href={`https://www.buymeacoffee.com/${support.buyMeACoffee}`} target="_blank" rel="noreferrer">
|
||||
<img
|
||||
src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
|
||||
alt="Buy Me A Coffee"
|
||||
className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
{support.buyMeAKofi && (
|
||||
<a href={`https://ko-fi.com/${support.buyMeAKofi}`} target="_blank" rel="noreferrer">
|
||||
<img
|
||||
src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
|
||||
alt="Buy Me A Ko-fi"
|
||||
className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
);
|
||||
};
|
||||
SupportPreview.propTypes = {
|
||||
support: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const MarkdownPreview = (props) => {
|
||||
const { prefix, data, social, skills, support } = props;
|
||||
return (
|
||||
<div id="markdown-preview">
|
||||
<TitlePreview prefix={prefix.title} title={data.title} />
|
||||
<SubTitlePreview subtitle={data.subtitle} />
|
||||
<VisitorsBadgePreview
|
||||
show={data.visitorsBadge}
|
||||
github={social.github}
|
||||
badgeOptions={{
|
||||
badgeLabel: encodeURI(data.badgeLabel),
|
||||
badgeColor: data.badgeColor,
|
||||
badgeStyle: data.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
<GithubProfileTrophyPreview show={data.githubProfileTrophy} github={social.github} />
|
||||
<TwitterBadgePreview show={data.twitterBadge} twitter={social.twitter} />
|
||||
<WorkPreview work={props} />
|
||||
<SocialPreview social={social} />
|
||||
<SkillsPreview skills={skills} />
|
||||
<SupportPreview support={support} />
|
||||
<div className="block sm:flex sm:justify-center sm:items-start">
|
||||
<TopLanguagesPreview show={data.topLanguages} github={social.github} options={data.topLanguagesOptions} />
|
||||
<GitHubStatsPreview show={data.githubStats} github={social.github} options={data.githubStatsOptions} />
|
||||
<StreakStatsPreview show={data.streakStats} github={social.github} options={data.streakStatsOptions} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkdownPreview;
|
||||
|
||||
MarkdownPreview.defaultProps = {
|
||||
prefix: DEFAULT_PREFIX,
|
||||
data: DEFAULT_DATA,
|
||||
social: DEFAULT_SOCIAL,
|
||||
support: DEFAULT_SUPPORT,
|
||||
skills: [],
|
||||
};
|
||||
|
||||
MarkdownPreview.propTypes = {
|
||||
prefix: PropTypes.object,
|
||||
data: PropTypes.object,
|
||||
social: PropTypes.object,
|
||||
skills: PropTypes.object,
|
||||
support: PropTypes.object,
|
||||
};
|
||||
@@ -5,10 +5,10 @@
|
||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Helmet } from "react-helmet"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
|
||||
function SEO({ description, lang, meta, title }) {
|
||||
const { site } = useStaticQuery(
|
||||
@@ -22,10 +22,10 @@ function SEO({ description, lang, meta, title }) {
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
`,
|
||||
);
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
const metaDescription = description || site.siteMetadata.description;
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
@@ -69,20 +69,20 @@ function SEO({ description, lang, meta, title }) {
|
||||
},
|
||||
].concat(meta)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
lang: `en`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
};
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
};
|
||||
|
||||
export default SEO
|
||||
export default SEO;
|
||||
@@ -1,106 +0,0 @@
|
||||
import React, {useState} from "react"
|
||||
import { icons, categorizedSkills } from "../constants/skills"
|
||||
import { SearchIcon, XIcon } from "@primer/octicons-react";
|
||||
|
||||
|
||||
const Skills = props => {
|
||||
const [search, setSearch] = useState('')
|
||||
const [debounce, setDebounce] = useState(undefined);
|
||||
const inputRef = React.createRef()
|
||||
const createSkill = skill => {
|
||||
return (
|
||||
<div className="w-1/3 sm:w-1/4 my-6" key={skill}>
|
||||
<label
|
||||
htmlFor={skill}
|
||||
className="checkbox-label flex items-center justify-start"
|
||||
>
|
||||
<input
|
||||
id={skill}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={props.skills[skill]}
|
||||
onChange={event => props.handleSkillsChange(skill)}
|
||||
/>
|
||||
<span class="checkbox-label__control" />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
const onSearchChange = (value) => {
|
||||
const callback = () => {
|
||||
setSearch(value)
|
||||
}
|
||||
clearTimeout(debounce)
|
||||
setDebounce(setTimeout(callback, 50))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-2 sm:px-6 mb-10 ">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
|
||||
Skills
|
||||
<div className="relative flex">
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
|
||||
placeholder="Search Skills"
|
||||
ref = {inputRef}
|
||||
/>
|
||||
<span className="absolute" style={{right:"10px"}}>
|
||||
{(search !== '')
|
||||
?<button className="focus:outline-none" onClick={() => {
|
||||
setSearch('')
|
||||
inputRef.current.value = ''
|
||||
}
|
||||
}>
|
||||
<XIcon size={16} className="mb-1 transform scale-100 md:scale-125"/>
|
||||
</button>
|
||||
:<SearchIcon size={16} className="mb-1 transform scale-100 md:scale-125"/>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Object.keys(categorizedSkills)
|
||||
.filter(key => {
|
||||
let filtered = categorizedSkills[key].skills.filter(skill => {
|
||||
return skill.includes(search.toLowerCase())
|
||||
})
|
||||
return filtered.length !== 0
|
||||
})
|
||||
.map(key => (
|
||||
<div key={key} className="divide-y divide-gray-500">
|
||||
<div className="text-sm sm:text-xl text-gray-900 text-left py-1">
|
||||
{categorizedSkills[key].title}
|
||||
</div>
|
||||
<div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
|
||||
{categorizedSkills[key].skills
|
||||
.filter(skill => {
|
||||
return skill.includes(search.toLowerCase())
|
||||
})
|
||||
.map(skill => createSkill(skill))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<span className="flex justify-center text-gray-900">
|
||||
{(Object.keys(categorizedSkills)
|
||||
.filter(key => {
|
||||
let filtered = categorizedSkills[key].skills.filter(skill => {
|
||||
return skill.includes(search.toLowerCase())
|
||||
})
|
||||
return filtered.length !== 0
|
||||
})
|
||||
.length === 0)?"No Results Found":""}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Skills
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SearchIcon, XIcon } from '@primer/octicons-react';
|
||||
import { icons, categorizedSkills } from '../constants/skills';
|
||||
|
||||
const Skills = (props) => {
|
||||
const { skills, handleSkillsChange } = props;
|
||||
const [search, setSearch] = useState('');
|
||||
const [debounce, setDebounce] = useState(undefined);
|
||||
const inputRef = React.createRef();
|
||||
const createSkill = (skill) => (
|
||||
<div className="w-1/3 sm:w-1/4 my-6" key={skill}>
|
||||
<label htmlFor={skill} className="checkbox-label flex items-center justify-start">
|
||||
<input
|
||||
id={skill}
|
||||
type="checkbox"
|
||||
className="checkbox-label__input"
|
||||
checked={skills[skill]}
|
||||
onChange={() => handleSkillsChange(skill)}
|
||||
/>
|
||||
<span className="checkbox-label__control" />
|
||||
<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>
|
||||
);
|
||||
|
||||
const onSearchChange = (value) => {
|
||||
const callback = () => {
|
||||
setSearch(value);
|
||||
};
|
||||
clearTimeout(debounce);
|
||||
setDebounce(setTimeout(callback, 50));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-2 sm:px-6 mb-10 ">
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
|
||||
Skills
|
||||
<div className="relative flex">
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
|
||||
placeholder="Search Skills"
|
||||
ref={inputRef}
|
||||
/>
|
||||
<span className="absolute" style={{ right: '10px' }}>
|
||||
{search !== '' ? (
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none"
|
||||
onClick={() => {
|
||||
setSearch('');
|
||||
inputRef.current.value = '';
|
||||
}}
|
||||
>
|
||||
<XIcon size={16} className="mb-1 transform scale-100 md:scale-125" />
|
||||
</button>
|
||||
) : (
|
||||
<SearchIcon size={16} className="mb-1 transform scale-100 md:scale-125" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Object.keys(categorizedSkills)
|
||||
.filter((key) => {
|
||||
const filtered = categorizedSkills[key].skills.filter((skill) => skill.includes(search.toLowerCase()));
|
||||
return filtered.length !== 0;
|
||||
})
|
||||
.map((key) => (
|
||||
<div key={key} className="divide-y divide-gray-500">
|
||||
<div className="text-sm sm:text-xl text-gray-900 text-left py-1">{categorizedSkills[key].title}</div>
|
||||
<div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
|
||||
{categorizedSkills[key].skills
|
||||
.filter((skill) => skill.includes(search.toLowerCase()))
|
||||
.map((skill) => createSkill(skill))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<span className="flex justify-center text-gray-900">
|
||||
{Object.keys(categorizedSkills).filter((key) => {
|
||||
const filtered = categorizedSkills[key].skills.filter((skill) => skill.includes(search.toLowerCase()));
|
||||
return filtered.length !== 0;
|
||||
}).length === 0
|
||||
? 'No Results Found'
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Skills;
|
||||
|
||||
Skills.propTypes = {
|
||||
skills: PropTypes.array.isRequired,
|
||||
handleSkillsChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from "react"
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Social = props => {
|
||||
const Social = (props) => {
|
||||
const { social, handleSocialChange } = 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
|
||||
@@ -17,8 +17,8 @@ const Social = props => {
|
||||
id="github"
|
||||
placeholder="github username"
|
||||
className="outline-none 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={social.github}
|
||||
onChange={(event) => 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">
|
||||
@@ -31,8 +31,8 @@ const Social = props => {
|
||||
id="twitter"
|
||||
placeholder="twitter username"
|
||||
className="outline-none 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={social.twitter}
|
||||
onChange={(event) => 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">
|
||||
@@ -45,8 +45,8 @@ const Social = props => {
|
||||
id="dev"
|
||||
placeholder="dev.to username"
|
||||
className="outline-none 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)}
|
||||
value={social.dev}
|
||||
onChange={(event) => 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">
|
||||
@@ -59,8 +59,8 @@ const Social = props => {
|
||||
id="codepen"
|
||||
placeholder="codepen username"
|
||||
className="outline-none 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)}
|
||||
value={social.codepen}
|
||||
onChange={(event) => 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">
|
||||
@@ -73,8 +73,8 @@ const Social = props => {
|
||||
id="codesandbox"
|
||||
placeholder="codesandbox username"
|
||||
className="outline-none 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)}
|
||||
value={social.codesandbox}
|
||||
onChange={(event) => 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">
|
||||
@@ -87,8 +87,8 @@ const Social = props => {
|
||||
id="stackoverflow"
|
||||
placeholder="stackoverflow user ID"
|
||||
className="outline-none 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)}
|
||||
value={social.stackoverflow}
|
||||
onChange={(event) => 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">
|
||||
@@ -101,8 +101,8 @@ const Social = props => {
|
||||
id="linkedin"
|
||||
placeholder="linkedin username"
|
||||
className="outline-none 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)}
|
||||
value={social.linkedin}
|
||||
onChange={(event) => 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">
|
||||
@@ -115,8 +115,8 @@ const Social = props => {
|
||||
id="kaggle"
|
||||
placeholder="kaggle username"
|
||||
className="outline-none 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)}
|
||||
value={social.kaggle}
|
||||
onChange={(event) => 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">
|
||||
@@ -129,8 +129,8 @@ const Social = props => {
|
||||
id="fb"
|
||||
placeholder="facebook username"
|
||||
className="outline-none 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)}
|
||||
value={social.fb}
|
||||
onChange={(event) => 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">
|
||||
@@ -143,8 +143,8 @@ const Social = props => {
|
||||
id="instagram"
|
||||
placeholder="instagram username"
|
||||
className="outline-none 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)}
|
||||
value={social.instagram}
|
||||
onChange={(event) => 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">
|
||||
@@ -157,8 +157,8 @@ const Social = props => {
|
||||
id="dribbble"
|
||||
placeholder="dribbble username"
|
||||
className="outline-none 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)}
|
||||
value={social.dribbble}
|
||||
onChange={(event) => 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">
|
||||
@@ -171,8 +171,22 @@ const Social = props => {
|
||||
id="behance"
|
||||
placeholder="behance username"
|
||||
className="outline-none 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)}
|
||||
value={social.behance}
|
||||
onChange={(event) => 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.0.1/icons/hashnode.svg"
|
||||
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
|
||||
alt="hashnode"
|
||||
/>
|
||||
<input
|
||||
id="hashnode"
|
||||
placeholder="hashnode username (with @)"
|
||||
className="outline-none 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={social.hashnode}
|
||||
onChange={(event) => handleSocialChange('hashnode', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
@@ -185,8 +199,8 @@ const Social = props => {
|
||||
id="medium"
|
||||
placeholder="medium username (with @)"
|
||||
className="outline-none 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)}
|
||||
value={social.medium}
|
||||
onChange={(event) => 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">
|
||||
@@ -199,8 +213,8 @@ const Social = props => {
|
||||
id="youtube"
|
||||
placeholder="youtube channel name"
|
||||
className="outline-none 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)}
|
||||
value={social.youtube}
|
||||
onChange={(event) => 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">
|
||||
@@ -213,8 +227,8 @@ const Social = props => {
|
||||
id="codechef"
|
||||
placeholder="codechef username"
|
||||
className="outline-none 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)}
|
||||
value={social.codechef}
|
||||
onChange={(event) => 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">
|
||||
@@ -227,8 +241,8 @@ const Social = props => {
|
||||
id="hackerrank"
|
||||
placeholder="hackerrank username"
|
||||
className="outline-none 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)}
|
||||
value={social.hackerrank}
|
||||
onChange={(event) => 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">
|
||||
@@ -241,8 +255,8 @@ const Social = props => {
|
||||
id="codeforces"
|
||||
placeholder="codeforces username"
|
||||
className="outline-none 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)}
|
||||
value={social.codeforces}
|
||||
onChange={(event) => 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">
|
||||
@@ -255,8 +269,8 @@ const Social = props => {
|
||||
id="leetcode"
|
||||
placeholder="leetcode username"
|
||||
className="outline-none 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)}
|
||||
value={social.leetcode}
|
||||
onChange={(event) => 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">
|
||||
@@ -269,8 +283,8 @@ const Social = props => {
|
||||
id="topcoder"
|
||||
placeholder="topcoder username"
|
||||
className="outline-none 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)}
|
||||
value={social.topcoder}
|
||||
onChange={(event) => 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">
|
||||
@@ -283,8 +297,8 @@ const Social = props => {
|
||||
id="hackerearth"
|
||||
placeholder="hackerearth user (with @)"
|
||||
className="outline-none 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)}
|
||||
value={social.hackerearth}
|
||||
onChange={(event) => 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">
|
||||
@@ -297,10 +311,8 @@ const Social = props => {
|
||||
id="geeksforgeeks"
|
||||
placeholder="GFG (<username>/profile)"
|
||||
className="outline-none 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)
|
||||
}
|
||||
value={social.geeks_for_geeks}
|
||||
onChange={(event) => handleSocialChange('geeks_for_geeks', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
@@ -313,8 +325,8 @@ const Social = props => {
|
||||
id="discord"
|
||||
placeholder="discord invite (only code)"
|
||||
className="outline-none 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.discord}
|
||||
onChange={event => props.handleSocialChange("discord", event)}
|
||||
value={social.discord}
|
||||
onChange={(event) => handleSocialChange('discord', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
@@ -327,13 +339,17 @@ const Social = props => {
|
||||
id="rssurl"
|
||||
placeholder="RSS feed URL"
|
||||
className="outline-none 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.rssurl}
|
||||
onChange={event => props.handleSocialChange("rssurl", event)}
|
||||
value={social.rssurl}
|
||||
onChange={(event) => handleSocialChange('rssurl', event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Social
|
||||
export default Social;
|
||||
Social.propTypes = {
|
||||
social: PropTypes.object.isRequired,
|
||||
handleSocialChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from "react"
|
||||
|
||||
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="outline-none 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
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Subtitle = (props) => {
|
||||
const { data, handleDataChange } = 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="outline-none 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={data.subtitle}
|
||||
onChange={(event) => handleDataChange('subtitle', event)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Subtitle;
|
||||
Subtitle.propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
handleDataChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from "react"
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Support = props => {
|
||||
const Support = (props) => {
|
||||
const { support, handleSupportChange } = 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">
|
||||
Support
|
||||
</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Support</div>
|
||||
<div className="flex flex-wrap justify-start items-center">
|
||||
<div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
<img
|
||||
@@ -17,8 +17,8 @@ const Support = props => {
|
||||
id="buy-me-a-coffee"
|
||||
placeholder="buymeacoffee username"
|
||||
className="outline-none 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 focus:border-blue-700"
|
||||
value={props.support.buyMeACoffee || ""}
|
||||
onChange={event => props.handleSupportChange("buyMeACoffee", event)}
|
||||
value={support.buyMeACoffee || ''}
|
||||
onChange={(event) => handleSupportChange('buyMeACoffee', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
|
||||
@@ -31,13 +31,17 @@ const Support = props => {
|
||||
id="buy-me-a-kofi"
|
||||
placeholder="Ko-fi username"
|
||||
className="outline-none 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 ml-2 sm:ml-0 focus:border-blue-700"
|
||||
value={props.support.buyMeAKofi || ""}
|
||||
onChange={event => props.handleSupportChange("buyMeAKofi", event)}
|
||||
value={support.buyMeAKofi || ''}
|
||||
onChange={(event) => handleSupportChange('buyMeAKofi', event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Support
|
||||
export default Support;
|
||||
Support.propTypes = {
|
||||
support: PropTypes.object.isRequired,
|
||||
handleSupportChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,28 +1,34 @@
|
||||
import React from "react"
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Title = props => {
|
||||
const Title = (props) => {
|
||||
const { data, prefix, handlePrefixChange, handleDataChange } = 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"
|
||||
className="outline-none 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)}
|
||||
value={prefix.title}
|
||||
onChange={(event) => handlePrefixChange('title', event)}
|
||||
/>
|
||||
<input
|
||||
id="title-name"
|
||||
placeholder="name"
|
||||
className="outline-none 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)}
|
||||
value={data.title}
|
||||
onChange={(event) => handleDataChange('title', event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Title
|
||||
export default Title;
|
||||
Title.propTypes = {
|
||||
prefix: PropTypes.object.isRequired,
|
||||
data: PropTypes.object.isRequired,
|
||||
handlePrefixChange: PropTypes.func.isRequired,
|
||||
handleDataChange: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,76 +1,76 @@
|
||||
import React from "react"
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Work = props => {
|
||||
const Work = (props) => {
|
||||
const { prefix, handlePrefixChange, data, handleDataChange, link, handleLinkChange } = 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">
|
||||
Work
|
||||
</div>
|
||||
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Work</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="currentWork-prefix"
|
||||
placeholder="Hi, I'm "
|
||||
className="outline-none placeholder-gray-700 mr-8 w-full 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.currentWork}
|
||||
onChange={event => props.handlePrefixChange("currentWork", event)}
|
||||
value={prefix.currentWork}
|
||||
onChange={(event) => handlePrefixChange('currentWork', event)}
|
||||
/>
|
||||
<input
|
||||
id="currentWork"
|
||||
placeholder="project name"
|
||||
className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 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.currentWork}
|
||||
onChange={event => props.handleDataChange("currentWork", event)}
|
||||
value={data.currentWork}
|
||||
onChange={(event) => handleDataChange('currentWork', event)}
|
||||
/>
|
||||
<input
|
||||
id="currentWork-link"
|
||||
placeholder="project link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.link.currentWork}
|
||||
onChange={event => props.handleLinkChange("currentWork", event)}
|
||||
value={link.currentWork}
|
||||
onChange={(event) => handleLinkChange('currentWork', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="collaborateOn-prefix"
|
||||
className="outline-none mr-8 w-full 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.collaborateOn}
|
||||
onChange={event => props.handlePrefixChange("collaborateOn", event)}
|
||||
value={prefix.collaborateOn}
|
||||
onChange={(event) => handlePrefixChange('collaborateOn', event)}
|
||||
/>
|
||||
<input
|
||||
id="collaborateOn"
|
||||
placeholder="project name"
|
||||
className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 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.collaborateOn}
|
||||
onChange={event => props.handleDataChange("collaborateOn", event)}
|
||||
value={data.collaborateOn}
|
||||
onChange={(event) => handleDataChange('collaborateOn', event)}
|
||||
/>
|
||||
<input
|
||||
id="collaborateOn-link"
|
||||
placeholder="project link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.link.collaborateOn}
|
||||
onChange={event => props.handleLinkChange("collaborateOn", event)}
|
||||
value={link.collaborateOn}
|
||||
onChange={(event) => handleLinkChange('collaborateOn', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="helpWith-prefix"
|
||||
className="outline-none placeholder-gray-700 mr-8 w-full 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.helpWith}
|
||||
onChange={event => props.handlePrefixChange("helpWith", event)}
|
||||
value={prefix.helpWith}
|
||||
onChange={(event) => handlePrefixChange('helpWith', event)}
|
||||
/>
|
||||
<input
|
||||
id="helpWith"
|
||||
placeholder="project name"
|
||||
className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 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.helpWith}
|
||||
onChange={event => props.handleDataChange("helpWith", event)}
|
||||
value={data.helpWith}
|
||||
onChange={(event) => handleDataChange('helpWith', event)}
|
||||
/>
|
||||
<input
|
||||
id="helpWith-link"
|
||||
placeholder="project link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
|
||||
value={props.link.helpWith}
|
||||
onChange={event => props.handleLinkChange("helpWith", event)}
|
||||
value={link.helpWith}
|
||||
onChange={(event) => handleLinkChange('helpWith', event)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,30 +78,30 @@ const Work = props => {
|
||||
<input
|
||||
id="currentLearn-prefix"
|
||||
className="outline-none mr-8 w-full 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.currentLearn}
|
||||
onChange={event => props.handlePrefixChange("currentLearn", event)}
|
||||
value={prefix.currentLearn}
|
||||
onChange={(event) => handlePrefixChange('currentLearn', event)}
|
||||
/>
|
||||
<input
|
||||
id="currentLearn"
|
||||
placeholder="Frameworks, courses etc."
|
||||
className="outline-none placeholder-gray-700 w-full 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.currentLearn}
|
||||
onChange={event => props.handleDataChange("currentLearn", event)}
|
||||
value={data.currentLearn}
|
||||
onChange={(event) => handleDataChange('currentLearn', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="ama-prefix"
|
||||
className="outline-none mr-8 w-full 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.ama}
|
||||
onChange={event => props.handlePrefixChange("ama", event)}
|
||||
value={prefix.ama}
|
||||
onChange={(event) => handlePrefixChange('ama', event)}
|
||||
/>
|
||||
<input
|
||||
id="ama"
|
||||
placeholder="react, vue and gsap"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full 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.ama}
|
||||
onChange={event => props.handleDataChange("ama", event)}
|
||||
value={data.ama}
|
||||
onChange={(event) => handleDataChange('ama', event)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -109,15 +109,15 @@ const Work = props => {
|
||||
<input
|
||||
id="contact-prefix"
|
||||
className="outline-none mr-8 w-full 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.contact}
|
||||
onChange={event => props.handlePrefixChange("contact", event)}
|
||||
value={prefix.contact}
|
||||
onChange={(event) => handlePrefixChange('contact', event)}
|
||||
/>
|
||||
<input
|
||||
id="contact"
|
||||
placeholder="example@gmail.com"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full 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.contact}
|
||||
onChange={event => props.handleDataChange("contact", event)}
|
||||
value={data.contact}
|
||||
onChange={(event) => handleDataChange('contact', event)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -125,65 +125,73 @@ const Work = props => {
|
||||
<input
|
||||
id="portfolio-prefix"
|
||||
className="outline-none mr-8 w-full 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.portfolio}
|
||||
onChange={event => props.handlePrefixChange("portfolio", event)}
|
||||
value={prefix.portfolio}
|
||||
onChange={(event) => handlePrefixChange('portfolio', event)}
|
||||
/>
|
||||
<input
|
||||
id="portfolio"
|
||||
placeholder="portfolio link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full 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.link.portfolio}
|
||||
onChange={event => props.handleLinkChange("portfolio", event)}
|
||||
value={link.portfolio}
|
||||
onChange={(event) => handleLinkChange('portfolio', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="blog-prefix"
|
||||
className="outline-none mr-8 w-full 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.blog}
|
||||
onChange={event => props.handlePrefixChange("blog", event)}
|
||||
value={prefix.blog}
|
||||
onChange={(event) => handlePrefixChange('blog', event)}
|
||||
/>
|
||||
<input
|
||||
id="blog"
|
||||
placeholder="blog link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full 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.link.blog}
|
||||
onChange={event => props.handleLinkChange("blog", event)}
|
||||
value={link.blog}
|
||||
onChange={(event) => handleLinkChange('blog', event)}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="resume-prefix"
|
||||
className="outline-none mr-8 w-full 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.resume}
|
||||
onChange={event => props.handlePrefixChange("resume", event)}
|
||||
value={prefix.resume}
|
||||
onChange={(event) => handlePrefixChange('resume', event)}
|
||||
/>
|
||||
<input
|
||||
id="resume"
|
||||
placeholder="resume link"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full 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.link.resume}
|
||||
onChange={event => props.handleLinkChange("resume", event)}
|
||||
value={link.resume}
|
||||
onChange={(event) => handleLinkChange('resume', event)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
|
||||
<input
|
||||
id="funFact-prefix"
|
||||
className="outline-none mr-8 w-full 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.funFact}
|
||||
onChange={event => props.handlePrefixChange("funFact", event)}
|
||||
value={prefix.funFact}
|
||||
onChange={(event) => handlePrefixChange('funFact', event)}
|
||||
/>
|
||||
<input
|
||||
id="funFact"
|
||||
placeholder="I think I am funny"
|
||||
className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full 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.funFact}
|
||||
onChange={event => props.handleDataChange("funFact", event)}
|
||||
value={data.funFact}
|
||||
onChange={(event) => handleDataChange('funFact', event)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Work
|
||||
export default Work;
|
||||
Work.propTypes = {
|
||||
prefix: PropTypes.object.isRequired,
|
||||
data: PropTypes.object.isRequired,
|
||||
link: PropTypes.object.isRequired,
|
||||
handlePrefixChange: PropTypes.func.isRequired,
|
||||
handleDataChange: PropTypes.func.isRequired,
|
||||
handleLinkChange: PropTypes.func.isRequired,
|
||||
};
|
||||
+68
-68
@@ -1,97 +1,97 @@
|
||||
export const DEFAULT_PREFIX = {
|
||||
title: "Hi 👋, I'm",
|
||||
currentWork: "🔭 I’m currently working on",
|
||||
currentLearn: "🌱 I’m currently learning",
|
||||
collaborateOn: "👯 I’m looking to collaborate on",
|
||||
helpWith: "🤝 I’m looking for help with",
|
||||
ama: "💬 Ask me about",
|
||||
contact: "📫 How to reach me",
|
||||
resume: "📄 Know about my experiences",
|
||||
funFact: "⚡ Fun fact",
|
||||
portfolio: "👨💻 All of my projects are available at",
|
||||
blog: "📝 I regularly write articles on",
|
||||
}
|
||||
currentWork: '🔭 I’m currently working on',
|
||||
currentLearn: '🌱 I’m currently learning',
|
||||
collaborateOn: '👯 I’m looking to collaborate on',
|
||||
helpWith: '🤝 I’m looking for help with',
|
||||
ama: '💬 Ask me about',
|
||||
contact: '📫 How to reach me',
|
||||
resume: '📄 Know about my experiences',
|
||||
funFact: '⚡ Fun fact',
|
||||
portfolio: '👨💻 All of my projects are available at',
|
||||
blog: '📝 I regularly write articles on',
|
||||
};
|
||||
|
||||
export const DEFAULT_DATA = {
|
||||
title: "",
|
||||
subtitle: "A passionate frontend developer from India",
|
||||
currentWork: "",
|
||||
currentLearn: "",
|
||||
collaborateOn: "",
|
||||
helpWith: "",
|
||||
ama: "",
|
||||
contact: "",
|
||||
funFact: "",
|
||||
title: '',
|
||||
subtitle: 'A passionate frontend developer from India',
|
||||
currentWork: '',
|
||||
currentLearn: '',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
ama: '',
|
||||
contact: '',
|
||||
funFact: '',
|
||||
twitterBadge: false,
|
||||
visitorsBadge: false,
|
||||
badgeStyle: "flat",
|
||||
badgeColor: "0e75b6",
|
||||
badgeLabel: "Profile views",
|
||||
badgeStyle: 'flat',
|
||||
badgeColor: '0e75b6',
|
||||
badgeLabel: 'Profile views',
|
||||
githubProfileTrophy: false,
|
||||
githubStats: false,
|
||||
githubStatsOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
locale: 'en',
|
||||
},
|
||||
topLanguages: false,
|
||||
topLanguagesOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
theme: '',
|
||||
titleColor: '',
|
||||
textColor: '',
|
||||
bgColor: '',
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
locale: 'en',
|
||||
},
|
||||
streakStats: false,
|
||||
streakStatsOptions: {
|
||||
theme: "",
|
||||
theme: '',
|
||||
},
|
||||
devDynamicBlogs: false,
|
||||
mediumDynamicBlogs: false,
|
||||
rssDynamicBlogs: false,
|
||||
}
|
||||
};
|
||||
|
||||
export const DEFAULT_LINK = {
|
||||
currentWork: "",
|
||||
collaborateOn: "",
|
||||
helpWith: "",
|
||||
portfolio: "",
|
||||
blog: "",
|
||||
resume: "",
|
||||
}
|
||||
currentWork: '',
|
||||
collaborateOn: '',
|
||||
helpWith: '',
|
||||
portfolio: '',
|
||||
blog: '',
|
||||
resume: '',
|
||||
};
|
||||
|
||||
export const DEFAULT_SOCIAL = {
|
||||
github: "",
|
||||
dev: "",
|
||||
linkedin: "",
|
||||
codepen: "",
|
||||
stackoverflow: "",
|
||||
kaggle: "",
|
||||
codesandbox: "",
|
||||
fb: "",
|
||||
instagram: "",
|
||||
twitter: "",
|
||||
dribbble: "",
|
||||
behance: "",
|
||||
medium: "",
|
||||
youtube: "",
|
||||
codechef: "",
|
||||
hackerrank: "",
|
||||
codeforces: "",
|
||||
leetcode: "",
|
||||
topcoder: "",
|
||||
hackerearth: "",
|
||||
geeks_for_geeks: "",
|
||||
discord: "",
|
||||
rssurl: "",
|
||||
}
|
||||
github: '',
|
||||
dev: '',
|
||||
linkedin: '',
|
||||
codepen: '',
|
||||
stackoverflow: '',
|
||||
kaggle: '',
|
||||
codesandbox: '',
|
||||
fb: '',
|
||||
instagram: '',
|
||||
twitter: '',
|
||||
dribbble: '',
|
||||
behance: '',
|
||||
medium: '',
|
||||
youtube: '',
|
||||
codechef: '',
|
||||
hackerrank: '',
|
||||
codeforces: '',
|
||||
leetcode: '',
|
||||
topcoder: '',
|
||||
hackerearth: '',
|
||||
geeks_for_geeks: '',
|
||||
discord: '',
|
||||
rssurl: '',
|
||||
};
|
||||
|
||||
export const DEFAULT_SUPPORT = {
|
||||
buyMeACoffee: ""
|
||||
}
|
||||
buyMeACoffee: '',
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const links = {
|
||||
home: "/",
|
||||
about: "/about",
|
||||
addons: "/addons",
|
||||
support: "/support",
|
||||
}
|
||||
export default links
|
||||
home: '/',
|
||||
about: '/about',
|
||||
addons: '/addons',
|
||||
support: '/support',
|
||||
};
|
||||
export default links;
|
||||
|
||||
+432
-549
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 395 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 968 KiB |
-47
@@ -1,47 +0,0 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
export default function HTML(props) {
|
||||
return (
|
||||
<html {...props.htmlAttributes}>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
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>
|
||||
</head>
|
||||
<body {...props.bodyAttributes}>
|
||||
{props.preBodyComponents}
|
||||
<div
|
||||
key={`body`}
|
||||
id="___gatsby"
|
||||
dangerouslySetInnerHTML={{ __html: props.body }}
|
||||
/>
|
||||
{props.postBodyComponents}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
htmlAttributes: PropTypes.object,
|
||||
headComponents: PropTypes.array,
|
||||
bodyAttributes: PropTypes.object,
|
||||
preBodyComponents: PropTypes.array,
|
||||
body: PropTypes.string,
|
||||
postBodyComponents: PropTypes.array,
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/* eslint-disable react/jsx-props-no-spreading */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function HTML(props) {
|
||||
const { htmlAttributes, headComponents, bodyAttributes, preBodyComponents, postBodyComponents, body } = props;
|
||||
return (
|
||||
<html {...htmlAttributes} lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
{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"
|
||||
/>
|
||||
</head>
|
||||
<body {...bodyAttributes}>
|
||||
{preBodyComponents}
|
||||
<div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: body }} />
|
||||
{postBodyComponents}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
htmlAttributes: PropTypes.object.isRequired,
|
||||
headComponents: PropTypes.array.isRequired,
|
||||
bodyAttributes: PropTypes.object.isRequired,
|
||||
preBodyComponents: PropTypes.array.isRequired,
|
||||
body: PropTypes.string.isRequired,
|
||||
postBodyComponents: PropTypes.array.isRequired,
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Hashnode icon</title><path d="M3.84 0h16.32A3.84 3.84 0 0 1 24 3.84v16.32A3.84 3.84 0 0 1 20.16 24H3.84A3.84 3.84 0 0 1 0 20.16V3.84A3.84 3.84 0 0 1 3.84 0zm14.175 21.638l-.004-.001a2.577 2.577 0 0 0 .209-5.139l-4.917-8.682c-.719-1.292-2.108-1.236-2.609.598-.43 1.736-.319 3.372-.444 5.348-.001.013-.01.024-.023.027s-.026-.002-.033-.013l-4.39-8.751c.358-.281.568-.711.569-1.167a1.459 1.459 0 1 0-1.459 1.459c.069 0 .125-.014.18-.014 1.848 4.75 3.904 10.293 4.64 11.571.5 1.222 2.209.833 2.251-.486l.18-6.932c0-.042.055-.042.07-.014l3.526 8.389a2.573 2.573 0 0 0 2.254 3.806z"/></svg>
|
||||
|
After Width: | Height: | Size: 661 B |
@@ -1,7 +1,7 @@
|
||||
---
|
||||
slug: "/about"
|
||||
date: "2019-05-04"
|
||||
title: "👨💻 About"
|
||||
slug: '/about'
|
||||
date: '2019-05-04'
|
||||
title: '👨💻 About'
|
||||
---
|
||||
|
||||
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
slug: "/addons"
|
||||
date: "2019-05-04"
|
||||
title: "🚀 Addons"
|
||||
slug: '/addons'
|
||||
date: '2019-05-04'
|
||||
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.
|
||||
@@ -80,7 +80,7 @@ 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
|
||||
@@ -89,7 +89,7 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: gautamkrishnar/blog-post-workflow@master
|
||||
with:
|
||||
feed_list: "https://dev.to/feed/rahuldkjain, https://medium.com/feed/@rahuldkjain"
|
||||
feed_list: 'https://dev.to/feed/rahuldkjain, https://medium.com/feed/@rahuldkjain'
|
||||
```
|
||||
|
||||
- Replace the above url list with your own rss feed urls. See [popular-sources](#popular-sources) for a list of common RSS feed urls.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
slug: "/support"
|
||||
date: "2019-05-04"
|
||||
title: "💵 Support OSS"
|
||||
slug: '/support'
|
||||
date: '2019-05-04'
|
||||
title: '💵 Support OSS'
|
||||
---
|
||||
|
||||
> Think of giving not as a duty but as a privilege --John D. Rockefeller Hr.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react"
|
||||
import SEO from "../components/seo"
|
||||
import React from 'react';
|
||||
import SEO from '../components/seo';
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<div>
|
||||
@@ -7,6 +7,6 @@ const NotFoundPage = () => (
|
||||
<h1>NOT FOUND</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
export default NotFoundPage
|
||||
export default NotFoundPage;
|
||||
@@ -1,20 +1,5 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import gsap from "gsap"
|
||||
import MarkdownPreview from "../components/markdownPreview"
|
||||
import Markdown from "../components/markdown"
|
||||
import Title from "../components/title"
|
||||
import Subtitle from "../components/subtitle"
|
||||
import Work from "../components/work"
|
||||
import Social from "../components/social"
|
||||
import Addons from "../components/addons"
|
||||
import Skills from "../components/skills"
|
||||
import Donate from "../components/donate"
|
||||
import Support from "../components/support"
|
||||
import { initialSkillState } from "../constants/skills"
|
||||
import Loader from "../components/loader"
|
||||
import SEO from "../components/seo"
|
||||
import Layout from "../components/layout"
|
||||
import "./index.css"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CopyIcon,
|
||||
@@ -23,24 +8,29 @@ import {
|
||||
CheckIcon,
|
||||
MarkdownIcon,
|
||||
FileCodeIcon,
|
||||
} from "@primer/octicons-react"
|
||||
import {
|
||||
isGitHubUsernameValid,
|
||||
isMediumUsernameValid,
|
||||
isTwitterUsernameValid,
|
||||
} from "../utils/validation"
|
||||
import {
|
||||
DEFAULT_PREFIX,
|
||||
DEFAULT_DATA,
|
||||
DEFAULT_LINK,
|
||||
DEFAULT_SOCIAL,
|
||||
DEFAULT_SUPPORT,
|
||||
} from "../constants/defaults"
|
||||
} from '@primer/octicons-react';
|
||||
import MarkdownPreview from '../components/markdownPreview';
|
||||
import Markdown from '../components/markdown';
|
||||
import Title from '../components/title';
|
||||
import Subtitle from '../components/subtitle';
|
||||
import Work from '../components/work';
|
||||
import Social from '../components/social';
|
||||
import Addons from '../components/addons';
|
||||
import Skills from '../components/skills';
|
||||
import Donate from '../components/donate';
|
||||
import Support from '../components/support';
|
||||
import { initialSkillState } from '../constants/skills';
|
||||
import Loader from '../components/loader';
|
||||
import SEO from '../components/seo';
|
||||
import Layout from '../components/layout';
|
||||
import './index.css';
|
||||
import { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid } from '../utils/validation';
|
||||
import { DEFAULT_PREFIX, DEFAULT_DATA, DEFAULT_LINK, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
|
||||
|
||||
const KeepCacheUpdated = ({ prefix, data, link, social, skills, support }) => {
|
||||
useEffect(() => {
|
||||
localStorage.setItem(
|
||||
"cache",
|
||||
'cache',
|
||||
JSON.stringify({
|
||||
prefix,
|
||||
data,
|
||||
@@ -48,378 +38,359 @@ const KeepCacheUpdated = ({ prefix, data, link, social, skills, support }) => {
|
||||
social,
|
||||
skills,
|
||||
support,
|
||||
})
|
||||
)
|
||||
}, [prefix, data, link, social, skills, support])
|
||||
}
|
||||
}),
|
||||
);
|
||||
}, [prefix, data, link, social, skills, support]);
|
||||
};
|
||||
|
||||
const DEFAULT_SKILLS = initialSkillState
|
||||
const DEFAULT_SKILLS = initialSkillState;
|
||||
|
||||
const IndexPage = () => {
|
||||
const [prefix, setPrefix] = useState(DEFAULT_PREFIX)
|
||||
const [data, setData] = useState(DEFAULT_DATA)
|
||||
const [link, setLink] = useState(DEFAULT_LINK)
|
||||
const [social, setSocial] = useState(DEFAULT_SOCIAL)
|
||||
const [skills, setSkills] = useState(DEFAULT_SKILLS)
|
||||
const [support, setSupport] = useState(DEFAULT_SUPPORT)
|
||||
const [prefix, setPrefix] = useState(DEFAULT_PREFIX);
|
||||
const [data, setData] = useState(DEFAULT_DATA);
|
||||
const [link, setLink] = useState(DEFAULT_LINK);
|
||||
const [social, setSocial] = useState(DEFAULT_SOCIAL);
|
||||
const [skills, setSkills] = useState(DEFAULT_SKILLS);
|
||||
const [support, setSupport] = useState(DEFAULT_SUPPORT);
|
||||
|
||||
const [restore, setRestore] = useState("")
|
||||
const [generatePreview, setGeneratePreview] = useState(false)
|
||||
const [generateMarkdown, setGenerateMarkdown] = useState(false)
|
||||
const [displayLoader, setDisplayLoader] = useState(false)
|
||||
const [showConfig, setShowConfig] = useState(true)
|
||||
const [restore, setRestore] = useState('');
|
||||
const [generatePreview, setGeneratePreview] = useState(false);
|
||||
const [generateMarkdown, setGenerateMarkdown] = useState(false);
|
||||
const [displayLoader, setDisplayLoader] = useState(false);
|
||||
const [showConfig, setShowConfig] = useState(true);
|
||||
const [copyObj, setcopyObj] = useState({
|
||||
isCopied: false,
|
||||
copiedText: "copy-markdown",
|
||||
})
|
||||
copiedText: 'copy-markdown',
|
||||
});
|
||||
const [previewMarkdown, setPreviewMarkdown] = useState({
|
||||
isPreview: false,
|
||||
buttonText: "preview",
|
||||
})
|
||||
buttonText: 'preview',
|
||||
});
|
||||
|
||||
const handleSkillsChange = field => {
|
||||
let change = { ...skills }
|
||||
change[field] = !change[field]
|
||||
setSkills(change)
|
||||
}
|
||||
const handleSkillsChange = (field) => {
|
||||
const change = { ...skills };
|
||||
change[field] = !change[field];
|
||||
setSkills(change);
|
||||
};
|
||||
|
||||
const handlePrefixChange = (field, e) => {
|
||||
let change = { ...prefix }
|
||||
change[field] = e.target.value
|
||||
setPrefix(change)
|
||||
}
|
||||
const change = { ...prefix };
|
||||
change[field] = e.target.value;
|
||||
setPrefix(change);
|
||||
};
|
||||
|
||||
const handleDataChange = (field, e) => {
|
||||
let change = { ...data }
|
||||
change[field] = e.target.value
|
||||
setData(change)
|
||||
}
|
||||
const change = { ...data };
|
||||
change[field] = e.target.value;
|
||||
setData(change);
|
||||
};
|
||||
|
||||
const handleLinkChange = (field, e) => {
|
||||
let change = { ...link }
|
||||
change[field] = e.target.value
|
||||
setLink(change)
|
||||
}
|
||||
const change = { ...link };
|
||||
change[field] = e.target.value;
|
||||
setLink(change);
|
||||
};
|
||||
|
||||
const handleSocialChange = (field, e) => {
|
||||
let change = { ...social }
|
||||
change[field] =
|
||||
field === "discord" ? e.target.value : e.target.value.toLowerCase()
|
||||
setSocial(change)
|
||||
}
|
||||
const change = { ...social };
|
||||
change[field] = field === 'discord' ? e.target.value : e.target.value.toLowerCase();
|
||||
setSocial(change);
|
||||
};
|
||||
|
||||
const handleSupportChange = (field, e) => {
|
||||
let change = { ...support }
|
||||
change[field] = e.target.value
|
||||
setSupport(change)
|
||||
}
|
||||
const change = { ...support };
|
||||
change[field] = e.target.value;
|
||||
setSupport(change);
|
||||
};
|
||||
|
||||
const handleCheckChange = field => {
|
||||
let change = { ...data }
|
||||
change[field] = !change[field]
|
||||
setData(change)
|
||||
}
|
||||
const handleCheckChange = (field) => {
|
||||
const change = { ...data };
|
||||
change[field] = !change[field];
|
||||
setData(change);
|
||||
};
|
||||
|
||||
const generate = () => {
|
||||
setShowConfig(false)
|
||||
var tl = new gsap.timeline()
|
||||
tl.to(".generate", {
|
||||
setShowConfig(false);
|
||||
const tl = gsap.timeline();
|
||||
tl.to('.generate', {
|
||||
scale: 0,
|
||||
duration: 0.5,
|
||||
ease: "Linear.easeNone",
|
||||
})
|
||||
tl.set("#form", { display: "none" })
|
||||
setDisplayLoader(true)
|
||||
ease: 'Linear.easeNone',
|
||||
});
|
||||
tl.set('#form', { display: 'none' });
|
||||
setDisplayLoader(true);
|
||||
setTimeout(() => {
|
||||
setDisplayLoader(false)
|
||||
setGenerateMarkdown(!generateMarkdown)
|
||||
setDisplayLoader(false);
|
||||
setGenerateMarkdown(!generateMarkdown);
|
||||
gsap.fromTo(
|
||||
"#markdown-box",
|
||||
'#markdown-box',
|
||||
{
|
||||
scale: 0.2,
|
||||
},
|
||||
{
|
||||
scale: 1,
|
||||
duration: 0.5,
|
||||
ease: "Linear.easeNone",
|
||||
}
|
||||
)
|
||||
ease: 'Linear.easeNone',
|
||||
},
|
||||
);
|
||||
gsap.fromTo(
|
||||
"#support",
|
||||
'#support',
|
||||
{
|
||||
autoAlpha: 0,
|
||||
},
|
||||
{
|
||||
autoAlpha: 1,
|
||||
duration: 2,
|
||||
ease: "Linear.easeNone",
|
||||
}
|
||||
)
|
||||
document.body.scrollTop = 0 // For Safari
|
||||
document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
|
||||
}, 3000)
|
||||
}
|
||||
ease: 'Linear.easeNone',
|
||||
},
|
||||
);
|
||||
document.body.scrollTop = 0; // For Safari
|
||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const trimDataValues = (item, setItem) => {
|
||||
const dataObj = { ...item }
|
||||
Object.keys(dataObj).forEach(k =>
|
||||
typeof dataObj[k] === "string" ? (dataObj[k] = dataObj[k].trim()) : null
|
||||
)
|
||||
setItem(dataObj)
|
||||
}
|
||||
|
||||
const handleGenerate = () => {
|
||||
trimDataValues(data, setData)
|
||||
trimDataValues(social, setSocial)
|
||||
trimDataValues(link, setLink)
|
||||
resetCopyMarkdownButton()
|
||||
if (
|
||||
data.visitorsBadge ||
|
||||
data.githubProfileTrophy ||
|
||||
data.githubStats ||
|
||||
data.topLanguages ||
|
||||
data.streakStats
|
||||
) {
|
||||
if (social.github && isGitHubUsernameValid(social.github)) {
|
||||
generate()
|
||||
const dataObj = { ...item };
|
||||
Object.keys(dataObj).forEach((k) => {
|
||||
if (typeof dataObj[k] === 'string') {
|
||||
dataObj[k] = dataObj[k].trim();
|
||||
}
|
||||
} else if (data.twitterBadge) {
|
||||
if (social.twitter && isTwitterUsernameValid(social.twitter)) {
|
||||
generate()
|
||||
}
|
||||
} else if (social.github) {
|
||||
if (isGitHubUsernameValid(social.github)) {
|
||||
generate()
|
||||
}
|
||||
} else {
|
||||
generate()
|
||||
}
|
||||
}
|
||||
|
||||
const handleGeneratePreview = () => {
|
||||
setGenerateMarkdown(!generateMarkdown)
|
||||
setGeneratePreview(!generatePreview)
|
||||
if (!generatePreview) {
|
||||
gsap.set("#copy-button, #download-md-button, #download-json-button", {
|
||||
visibility: "hidden",
|
||||
})
|
||||
setPreviewMarkdown({
|
||||
isPreview: true,
|
||||
buttonText: "markdown",
|
||||
})
|
||||
} else {
|
||||
gsap.set("#copy-button, #download-md-button, #download-json-button", {
|
||||
visibility: "visible",
|
||||
})
|
||||
gsap.to("#copy-button", {
|
||||
border: "2px solid #3b3b4f",
|
||||
duration: 1,
|
||||
})
|
||||
setPreviewMarkdown({
|
||||
isPreview: false,
|
||||
buttonText: "preview",
|
||||
})
|
||||
resetCopyMarkdownButton()
|
||||
}
|
||||
}
|
||||
});
|
||||
setItem(dataObj);
|
||||
};
|
||||
|
||||
const resetCopyMarkdownButton = () => {
|
||||
var el = document.getElementById("copy-markdown")
|
||||
const el = document.getElementById('copy-markdown');
|
||||
if (el) {
|
||||
gsap.set("#copy-markdown", {
|
||||
color: "#0a0a23",
|
||||
})
|
||||
gsap.set('#copy-markdown', {
|
||||
color: '#0a0a23',
|
||||
});
|
||||
}
|
||||
setcopyObj({
|
||||
isCopied: false,
|
||||
copiedText: "copy-markdown",
|
||||
})
|
||||
}
|
||||
copiedText: 'copy-markdown',
|
||||
});
|
||||
};
|
||||
const handleGenerate = () => {
|
||||
trimDataValues(data, setData);
|
||||
trimDataValues(social, setSocial);
|
||||
trimDataValues(link, setLink);
|
||||
resetCopyMarkdownButton();
|
||||
if (data.visitorsBadge || data.githubProfileTrophy || data.githubStats || data.topLanguages || data.streakStats) {
|
||||
if (social.github && isGitHubUsernameValid(social.github)) {
|
||||
generate();
|
||||
}
|
||||
} else if (data.twitterBadge) {
|
||||
if (social.twitter && isTwitterUsernameValid(social.twitter)) {
|
||||
generate();
|
||||
}
|
||||
} else if (social.github) {
|
||||
if (isGitHubUsernameValid(social.github)) {
|
||||
generate();
|
||||
}
|
||||
} else {
|
||||
generate();
|
||||
}
|
||||
};
|
||||
|
||||
const handleGeneratePreview = () => {
|
||||
setGenerateMarkdown(!generateMarkdown);
|
||||
setGeneratePreview(!generatePreview);
|
||||
if (!generatePreview) {
|
||||
gsap.set('#copy-button, #download-md-button, #download-json-button', {
|
||||
visibility: 'hidden',
|
||||
});
|
||||
setPreviewMarkdown({
|
||||
isPreview: true,
|
||||
buttonText: 'markdown',
|
||||
});
|
||||
} else {
|
||||
gsap.set('#copy-button, #download-md-button, #download-json-button', {
|
||||
visibility: 'visible',
|
||||
});
|
||||
gsap.to('#copy-button', {
|
||||
border: '2px solid #3b3b4f',
|
||||
duration: 1,
|
||||
});
|
||||
setPreviewMarkdown({
|
||||
isPreview: false,
|
||||
buttonText: 'preview',
|
||||
});
|
||||
resetCopyMarkdownButton();
|
||||
}
|
||||
};
|
||||
|
||||
const setCopyMarkdownButton = () => {
|
||||
var el = document.getElementById("copy-markdown")
|
||||
const el = document.getElementById('copy-markdown');
|
||||
if (el) {
|
||||
gsap.set("#copy-markdown", {
|
||||
color: "#00471b",
|
||||
})
|
||||
gsap.set('#copy-markdown', {
|
||||
color: '#00471b',
|
||||
});
|
||||
}
|
||||
gsap.fromTo(
|
||||
"#copy-button",
|
||||
'#copy-button',
|
||||
{
|
||||
scale: 0.5,
|
||||
},
|
||||
{
|
||||
scale: 1,
|
||||
ease: "elastic.in",
|
||||
border: "2px solid #00471b",
|
||||
ease: 'elastic.in',
|
||||
border: '2px solid #00471b',
|
||||
duration: 0.5,
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
setcopyObj({
|
||||
isCopied: true,
|
||||
copiedText: "copied",
|
||||
})
|
||||
}
|
||||
copiedText: 'copied',
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyToClipboard = () => {
|
||||
var range = document.createRange()
|
||||
range.selectNode(document.getElementById("markdown-content"))
|
||||
window.getSelection().removeAllRanges() // clear current selection
|
||||
window.getSelection().addRange(range) // to select text
|
||||
document.execCommand("copy")
|
||||
window.getSelection().removeAllRanges()
|
||||
const range = document.createRange();
|
||||
range.selectNode(document.getElementById('markdown-content'));
|
||||
window.getSelection().removeAllRanges(); // clear current selection
|
||||
window.getSelection().addRange(range); // to select text
|
||||
document.execCommand('copy');
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
setCopyMarkdownButton()
|
||||
}
|
||||
setCopyMarkdownButton();
|
||||
};
|
||||
|
||||
const handleDownloadMarkdown = () => {
|
||||
var markdownContent = document.getElementById("markdown-content")
|
||||
var tempElement = document.createElement("a")
|
||||
const markdownContent = document.getElementById('markdown-content');
|
||||
const tempElement = document.createElement('a');
|
||||
tempElement.setAttribute(
|
||||
"href",
|
||||
"data:text/markdown;charset=utf-8," +
|
||||
encodeURIComponent(markdownContent.innerText)
|
||||
)
|
||||
tempElement.setAttribute("download", "README.md")
|
||||
tempElement.style.display = "none"
|
||||
document.body.appendChild(tempElement)
|
||||
tempElement.click()
|
||||
document.body.removeChild(tempElement)
|
||||
}
|
||||
'href',
|
||||
`data:text/markdown;charset=utf-8,${encodeURIComponent(markdownContent.innerText)}`,
|
||||
);
|
||||
tempElement.setAttribute('download', 'README.md');
|
||||
tempElement.style.display = 'none';
|
||||
document.body.appendChild(tempElement);
|
||||
tempElement.click();
|
||||
document.body.removeChild(tempElement);
|
||||
};
|
||||
|
||||
const handleDownloadJson = () => {
|
||||
var tempElement = document.createElement("a")
|
||||
const tempElement = document.createElement('a');
|
||||
tempElement.setAttribute(
|
||||
"href",
|
||||
'href',
|
||||
`data:text/json;charset=utf-8,${encodeURIComponent(
|
||||
JSON.stringify({ prefix, data, link, social, skills, support })
|
||||
)}`
|
||||
)
|
||||
tempElement.setAttribute("download", "data.json")
|
||||
tempElement.style.display = "none"
|
||||
document.body.appendChild(tempElement)
|
||||
tempElement.click()
|
||||
document.body.removeChild(tempElement)
|
||||
}
|
||||
JSON.stringify({ prefix, data, link, social, skills, support }),
|
||||
)}`,
|
||||
);
|
||||
tempElement.setAttribute('download', 'data.json');
|
||||
tempElement.style.display = 'none';
|
||||
document.body.appendChild(tempElement);
|
||||
tempElement.click();
|
||||
document.body.removeChild(tempElement);
|
||||
};
|
||||
|
||||
const handleBackToEdit = () => {
|
||||
setGeneratePreview(false)
|
||||
setGenerateMarkdown(false)
|
||||
setShowConfig(true)
|
||||
gsap.set("#form", {
|
||||
display: "",
|
||||
})
|
||||
gsap.to(".generate", {
|
||||
setGeneratePreview(false);
|
||||
setGenerateMarkdown(false);
|
||||
setShowConfig(true);
|
||||
gsap.set('#form', {
|
||||
display: '',
|
||||
});
|
||||
gsap.to('.generate', {
|
||||
scale: 1,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const setInitialValues = () => {
|
||||
const cache = JSON.parse(localStorage.getItem("cache"))
|
||||
|
||||
if (!cache) {
|
||||
return
|
||||
}
|
||||
|
||||
setPrefix(
|
||||
cache.prefix ? { ...DEFAULT_PREFIX, ...cache.prefix } : DEFAULT_PREFIX
|
||||
)
|
||||
setData(cache.data ? { ...DEFAULT_DATA, ...cache.data } : DEFAULT_DATA)
|
||||
setLink(cache.link ? { ...DEFAULT_LINK, ...cache.link } : DEFAULT_LINK)
|
||||
setSocial(
|
||||
cache.social ? { ...DEFAULT_SOCIAL, ...cache.social } : DEFAULT_SOCIAL
|
||||
)
|
||||
|
||||
const cacheSkills = mergeDefaultWithNewDataSkills(
|
||||
DEFAULT_SKILLS,
|
||||
cache.skills
|
||||
)
|
||||
setSkills(cacheSkills || DEFAULT_SKILLS)
|
||||
|
||||
setSupport(
|
||||
cache.support ? { ...DEFAULT_SUPPORT, ...cache.support } : DEFAULT_SUPPORT
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
gsap.fromTo(
|
||||
".generate",
|
||||
{
|
||||
boxShadow: "0 0 0 0px rgba(59, 59, 79, 0.4)",
|
||||
},
|
||||
{
|
||||
boxShadow: "0 0 0 10px rgba(59, 59, 79, 0)",
|
||||
repeat: -1,
|
||||
duration: 1,
|
||||
}
|
||||
)
|
||||
|
||||
// set initial values
|
||||
setInitialValues()
|
||||
}, [])
|
||||
|
||||
// keep cache updated
|
||||
KeepCacheUpdated({ prefix, data, link, social, skills, support })
|
||||
|
||||
const handleResetForm = () => {
|
||||
setPrefix(DEFAULT_PREFIX)
|
||||
setData(DEFAULT_DATA)
|
||||
setLink(DEFAULT_LINK)
|
||||
setSocial(DEFAULT_SOCIAL)
|
||||
setSkills(DEFAULT_SKILLS)
|
||||
setSupport(DEFAULT_SUPPORT)
|
||||
}
|
||||
|
||||
const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) => {
|
||||
return Object.keys(defaultSkills).reduce((previous, currentKey) => {
|
||||
let currentSelected = false
|
||||
const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) =>
|
||||
Object.keys(defaultSkills).reduce((previous, currentKey) => {
|
||||
let currentSelected = false;
|
||||
|
||||
if (newSkills[currentKey]) {
|
||||
currentSelected = true
|
||||
currentSelected = true;
|
||||
}
|
||||
|
||||
return {
|
||||
...previous,
|
||||
[currentKey]: currentSelected,
|
||||
}
|
||||
}, {})
|
||||
}
|
||||
};
|
||||
}, {});
|
||||
|
||||
const setInitialValues = () => {
|
||||
const cache = JSON.parse(localStorage.getItem('cache'));
|
||||
|
||||
if (!cache) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPrefix(cache.prefix ? { ...DEFAULT_PREFIX, ...cache.prefix } : DEFAULT_PREFIX);
|
||||
setData(cache.data ? { ...DEFAULT_DATA, ...cache.data } : DEFAULT_DATA);
|
||||
setLink(cache.link ? { ...DEFAULT_LINK, ...cache.link } : DEFAULT_LINK);
|
||||
setSocial(cache.social ? { ...DEFAULT_SOCIAL, ...cache.social } : DEFAULT_SOCIAL);
|
||||
|
||||
const cacheSkills = mergeDefaultWithNewDataSkills(DEFAULT_SKILLS, cache.skills);
|
||||
setSkills(cacheSkills || DEFAULT_SKILLS);
|
||||
|
||||
setSupport(cache.support ? { ...DEFAULT_SUPPORT, ...cache.support } : DEFAULT_SUPPORT);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
gsap.fromTo(
|
||||
'.generate',
|
||||
{
|
||||
boxShadow: '0 0 0 0px rgba(59, 59, 79, 0.4)',
|
||||
},
|
||||
{
|
||||
boxShadow: '0 0 0 10px rgba(59, 59, 79, 0)',
|
||||
repeat: -1,
|
||||
duration: 1,
|
||||
},
|
||||
);
|
||||
|
||||
// set initial values
|
||||
setInitialValues();
|
||||
}, []);
|
||||
|
||||
// keep cache updated
|
||||
KeepCacheUpdated({ prefix, data, link, social, skills, support });
|
||||
|
||||
const handleResetForm = () => {
|
||||
setPrefix(DEFAULT_PREFIX);
|
||||
setData(DEFAULT_DATA);
|
||||
setLink(DEFAULT_LINK);
|
||||
setSocial(DEFAULT_SOCIAL);
|
||||
setSkills(DEFAULT_SKILLS);
|
||||
setSupport(DEFAULT_SUPPORT);
|
||||
};
|
||||
|
||||
const handleRestore = () => {
|
||||
try {
|
||||
const restoreData = JSON.parse(restore)
|
||||
const restoreData = JSON.parse(restore);
|
||||
|
||||
if (!restoreData) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
setPrefix(restoreData.prefix || DEFAULT_PREFIX)
|
||||
setData(restoreData.data || DEFAULT_DATA)
|
||||
setLink(restoreData.link || DEFAULT_LINK)
|
||||
setSocial(restoreData.social || DEFAULT_SOCIAL)
|
||||
setSupport(restoreData.support || DEFAULT_SUPPORT)
|
||||
setPrefix(restoreData.prefix || DEFAULT_PREFIX);
|
||||
setData(restoreData.data || DEFAULT_DATA);
|
||||
setLink(restoreData.link || DEFAULT_LINK);
|
||||
setSocial(restoreData.social || DEFAULT_SOCIAL);
|
||||
setSupport(restoreData.support || DEFAULT_SUPPORT);
|
||||
|
||||
const restoreDataSkills = mergeDefaultWithNewDataSkills(
|
||||
DEFAULT_SKILLS,
|
||||
restoreData.skills
|
||||
)
|
||||
setSkills(restoreDataSkills || DEFAULT_SKILLS)
|
||||
const restoreDataSkills = mergeDefaultWithNewDataSkills(DEFAULT_SKILLS, restoreData.skills);
|
||||
setSkills(restoreDataSkills || DEFAULT_SKILLS);
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
setRestore("")
|
||||
setRestore('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileInput = e => {
|
||||
const file = e.target.files[0]
|
||||
if (file && file.type === "application/json") {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(file, "UTF-8")
|
||||
const handleFileInput = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file && file.type === 'application/json') {
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
reader.onload = () => {
|
||||
setRestore(reader.result)
|
||||
}
|
||||
setRestore(reader.result);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@@ -449,10 +420,7 @@ const IndexPage = () => {
|
||||
handleCheckChange={handleCheckChange}
|
||||
handleDataChange={handleDataChange}
|
||||
/>
|
||||
<Support
|
||||
support={support}
|
||||
handleSupportChange={handleSupportChange}
|
||||
/>
|
||||
<Support support={support} handleSupportChange={handleSupportChange} />
|
||||
<div className="section">
|
||||
{(data.visitorsBadge ||
|
||||
data.githubProfileTrophy ||
|
||||
@@ -460,62 +428,46 @@ const IndexPage = () => {
|
||||
data.topLanguages ||
|
||||
data.streakStats) &&
|
||||
!social.github ? (
|
||||
<div className="warning">
|
||||
* Please add github username to use these add-ons
|
||||
</div>
|
||||
<div className="warning">* Please add github username to use these add-ons</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{social.github && !isGitHubUsernameValid(social.github) ? (
|
||||
<div className="warning">
|
||||
* GitHub username is invalid, please add a valid username
|
||||
</div>
|
||||
<div className="warning">* GitHub username is invalid, please add a valid username</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{social.medium && !isMediumUsernameValid(social.medium) ? (
|
||||
<div className="warning">
|
||||
* Medium username is invalid, please add a valid username (with
|
||||
@)
|
||||
</div>
|
||||
<div className="warning">* Medium username is invalid, please add a valid username (with @)</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{data.mediumDynamicBlogs && !social.medium ? (
|
||||
<div className="warning">
|
||||
* Please add medium username to display latest blogs dynamically
|
||||
</div>
|
||||
<div className="warning">* Please add medium username to display latest blogs dynamically</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{data.devDynamicBlogs && !social.dev ? (
|
||||
<div className="warning">
|
||||
* Please add dev.to username to display latest blogs dynamically
|
||||
</div>
|
||||
<div className="warning">* Please add dev.to username to display latest blogs dynamically</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{data.rssDynamicBlogs && !social.rssurl ? (
|
||||
<div className="warning">
|
||||
* Please add your rss feed url to display latest blogs
|
||||
dynamically from your personal blog
|
||||
* Please add your rss feed url to display latest blogs dynamically from your personal blog
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{data.twitterBadge && !social.twitter ? (
|
||||
<div className="warning">
|
||||
* Please add twitter username to use these add-ons
|
||||
</div>
|
||||
<div className="warning">* Please add twitter username to use these add-ons</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{social.twitter && !isTwitterUsernameValid(social.twitter) ? (
|
||||
<div className="warning">
|
||||
* Twitter username is invalid, please add a valid username
|
||||
</div>
|
||||
<div className="warning">* Twitter username is invalid, please add a valid username</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-full">
|
||||
@@ -524,19 +476,20 @@ const IndexPage = () => {
|
||||
tabIndex="0"
|
||||
role="button"
|
||||
onClick={handleGenerate}
|
||||
onKeyDown={e => e.keyCode === 13 && handleGenerate()}
|
||||
onKeyDown={(e) => e.keyCode === 13 && handleGenerate()}
|
||||
>
|
||||
Generate README
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{displayLoader ? <Loader /> : ""}
|
||||
{displayLoader ? <Loader /> : ''}
|
||||
|
||||
{generateMarkdown || generatePreview ? (
|
||||
<div className="markdown-section p-4 sm:py-4 sm:px-10">
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||||
onClick={handleBackToEdit}
|
||||
>
|
||||
@@ -545,21 +498,19 @@ const IndexPage = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||||
id="copy-button"
|
||||
onClick={handleCopyToClipboard}
|
||||
>
|
||||
{copyObj.isCopied === true ? (
|
||||
<CheckIcon size={24} />
|
||||
) : (
|
||||
<CopyIcon size={24} />
|
||||
)}
|
||||
{copyObj.isCopied === true ? <CheckIcon size={24} /> : <CopyIcon size={24} />}
|
||||
<span className="hidden sm:block" id="copy-markdown">
|
||||
{copyObj.copiedText}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||||
id="download-md-button"
|
||||
onClick={handleDownloadMarkdown}
|
||||
@@ -571,6 +522,7 @@ const IndexPage = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||||
id="download-json-button"
|
||||
onClick={handleDownloadJson}
|
||||
@@ -582,14 +534,11 @@ const IndexPage = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
|
||||
onClick={handleGeneratePreview}
|
||||
>
|
||||
{previewMarkdown.isPreview ? (
|
||||
<MarkdownIcon size={16} />
|
||||
) : (
|
||||
<EyeIcon size={16} />
|
||||
)}
|
||||
{previewMarkdown.isPreview ? <MarkdownIcon size={16} /> : <EyeIcon size={16} />}
|
||||
<span className="hidden sm:block ml-1" id="preview-markdown">
|
||||
{previewMarkdown.buttonText}
|
||||
</span>
|
||||
@@ -611,19 +560,12 @@ const IndexPage = () => {
|
||||
support={support}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
{generateMarkdown ? (
|
||||
<Markdown
|
||||
prefix={prefix}
|
||||
data={data}
|
||||
link={link}
|
||||
social={social}
|
||||
skills={skills}
|
||||
support={support}
|
||||
/>
|
||||
<Markdown prefix={prefix} data={data} link={link} social={social} skills={skills} support={support} />
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -632,22 +574,20 @@ const IndexPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
''
|
||||
)}
|
||||
<div
|
||||
className={
|
||||
"w-full shadow flex flex-col justify-center items-start mt-16 border-2 border-solid border-gray-600 py-2 px-4 " +
|
||||
(!showConfig ? "hidden" : "block")
|
||||
}
|
||||
className={`w-full shadow flex flex-col justify-center items-start mt-16 border-2 border-solid border-gray-600 py-2 px-4 ${
|
||||
!showConfig ? 'hidden' : 'block'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center w-full">
|
||||
<div className="text-lg sm:text-2xl font-bold font-title mt-2 mb-2">
|
||||
Config options
|
||||
<span className="bg-green-800 text-white text-xs sm:text-sm p-1 ml-1">
|
||||
new feature
|
||||
</span>
|
||||
<span className="bg-green-800 text-white text-xs sm:text-sm p-1 ml-1">new feature</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
@@ -660,7 +600,7 @@ const IndexPage = () => {
|
||||
className="outline-none w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
|
||||
placeholder="Paste JSON code or upload file"
|
||||
value={restore}
|
||||
onChange={e => setRestore(e.target.value)}
|
||||
onChange={(e) => setRestore(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="overflow-hidden relative w-64 mt-4 mb-4">
|
||||
@@ -670,12 +610,16 @@ const IndexPage = () => {
|
||||
name="vacancyImageFiles"
|
||||
onChange={handleFileInput}
|
||||
/>
|
||||
<button className="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1">
|
||||
<button
|
||||
type="button"
|
||||
className="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
|
||||
>
|
||||
Upload json file
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="mr-5 mb-10 text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
|
||||
onClick={handleRestore}
|
||||
>
|
||||
@@ -683,17 +627,13 @@ const IndexPage = () => {
|
||||
</button>
|
||||
<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>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexPage
|
||||
export default IndexPage;
|
||||
@@ -1,48 +0,0 @@
|
||||
// If you don't want to use TypeScript you can delete this file!
|
||||
import React from "react"
|
||||
import { PageProps, Link, graphql } from "gatsby"
|
||||
import SEO from "../components/seo"
|
||||
|
||||
type DataProps = {
|
||||
site: {
|
||||
buildTime: string
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default UsingTypescript
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
site {
|
||||
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,36 +1,30 @@
|
||||
import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
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.
|
||||
}) {
|
||||
const { markdownRemark } = data // data.markdownRemark holds your post data
|
||||
const { frontmatter, html } = markdownRemark
|
||||
const { markdownRemark } = data; // data.markdownRemark holds your post data
|
||||
const { frontmatter, html } = markdownRemark;
|
||||
return (
|
||||
<Layout>
|
||||
<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">
|
||||
<h1 className="text-4xl font-bold">{frontmatter.title}</h1>
|
||||
<div
|
||||
className="markdown"
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
<div className="markdown" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
@@ -44,4 +38,4 @@ export const pageQuery = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
@@ -1,30 +1,18 @@
|
||||
import {
|
||||
isGitHubUsernameValid,
|
||||
isMediumUsernameValid,
|
||||
isTwitterUsernameValid,
|
||||
} from "../validation"
|
||||
import { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid } from '../validation';
|
||||
|
||||
describe("validation", () => {
|
||||
it("isGitHubUsernameValid", () => {
|
||||
expect(
|
||||
isGitHubUsernameValid(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
|
||||
)
|
||||
).toBe(false)
|
||||
expect(isGitHubUsernameValid("rahuldkjain")).toBe(true)
|
||||
})
|
||||
describe('validation', () => {
|
||||
it('isGitHubUsernameValid', () => {
|
||||
expect(isGitHubUsernameValid('Lorem ipsum dolor sit amet, consectetur adipiscing elit')).toBe(false);
|
||||
expect(isGitHubUsernameValid('rahuldkjain')).toBe(true);
|
||||
});
|
||||
|
||||
it("isMediumUsernameValid", () => {
|
||||
expect(isMediumUsernameValid("rahuldkjain")).toBe(false)
|
||||
expect(isMediumUsernameValid("@rahuldkjain")).toBe(true)
|
||||
})
|
||||
it('isMediumUsernameValid', () => {
|
||||
expect(isMediumUsernameValid('rahuldkjain')).toBe(false);
|
||||
expect(isMediumUsernameValid('@rahuldkjain')).toBe(true);
|
||||
});
|
||||
|
||||
it("isTwitterUsernameValid", () => {
|
||||
expect(
|
||||
isTwitterUsernameValid(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
|
||||
)
|
||||
).toBe(false)
|
||||
expect(isTwitterUsernameValid("rahuldkjain")).toBe(true)
|
||||
})
|
||||
})
|
||||
it('isTwitterUsernameValid', () => {
|
||||
expect(isTwitterUsernameValid('Lorem ipsum dolor sit amet, consectetur adipiscing elit')).toBe(false);
|
||||
expect(isTwitterUsernameValid('rahuldkjain')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
const githubStatsStylingQueryString = options => {
|
||||
const githubStatsStylingQueryString = (options) => {
|
||||
const params = {
|
||||
show_icons: true,
|
||||
...(options.theme && options.theme !== "none") && { theme: options.theme },
|
||||
...options.titleColor && { "title_color": options.titleColor },
|
||||
...options.textColor && { "text_color": options.textColor},
|
||||
...options.bgColor && { "bg_color": options.bgColor},
|
||||
...options.hideBorder && { "hide_border": options.hideBorder},
|
||||
...options.cacheSeconds && { "cache_seconds": options.cacheSeconds},
|
||||
...options.locale && { "locale": options.locale},
|
||||
}
|
||||
const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
|
||||
return query_string
|
||||
}
|
||||
...(options.theme && options.theme !== 'none' && { theme: options.theme }),
|
||||
...(options.titleColor && { title_color: options.titleColor }),
|
||||
...(options.textColor && { text_color: options.textColor }),
|
||||
...(options.bgColor && { bg_color: options.bgColor }),
|
||||
...(options.hideBorder && { hide_border: options.hideBorder }),
|
||||
...(options.cacheSeconds && { cache_seconds: options.cacheSeconds }),
|
||||
...(options.locale && { locale: options.locale }),
|
||||
};
|
||||
const queryString = Object.entries(params)
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join('&');
|
||||
return queryString;
|
||||
};
|
||||
|
||||
const streakStatsStylingQueryString = options => {
|
||||
const streakStatsStylingQueryString = (options) => {
|
||||
const params = {
|
||||
...(options.theme && options.theme !== "none") && { theme: options.theme },
|
||||
}
|
||||
const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
|
||||
return query_string
|
||||
}
|
||||
...(options.theme && options.theme !== 'none' && { theme: options.theme }),
|
||||
};
|
||||
const queryString = Object.entries(params)
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join('&');
|
||||
return queryString;
|
||||
};
|
||||
|
||||
export const githubStatsLinkGenerator = ({github, options}) =>
|
||||
`https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`
|
||||
export const githubStatsLinkGenerator = ({ github, options }) =>
|
||||
`https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`;
|
||||
|
||||
export const topLanguagesLinkGenerator = ({github, options}) =>
|
||||
`https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
|
||||
export const topLanguagesLinkGenerator = ({ github, options }) =>
|
||||
`https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(
|
||||
options,
|
||||
)}&layout=compact`;
|
||||
|
||||
export const streakStatsLinkGenerator = ({github, options}) =>
|
||||
`https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`
|
||||
export const streakStatsLinkGenerator = ({ github, options }) =>
|
||||
`https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`;
|
||||
|
||||
+13
-13
@@ -1,17 +1,17 @@
|
||||
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 isGitHubUsernameValid = (username) => {
|
||||
const pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i;
|
||||
return pattern.test(username);
|
||||
};
|
||||
const isMediumUsernameValid = (username) => {
|
||||
if (username) {
|
||||
return username[0] === "@"
|
||||
return username[0] === '@';
|
||||
}
|
||||
return true
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const isTwitterUsernameValid = username => {
|
||||
var pattern = /^[a-zA-Z0-9_]{1,15}$/
|
||||
return pattern.test(username)
|
||||
}
|
||||
const isTwitterUsernameValid = (username) => {
|
||||
const pattern = /^[a-zA-Z0-9_]{1,15}$/;
|
||||
return pattern.test(username);
|
||||
};
|
||||
|
||||
export { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid }
|
||||
export { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid };
|
||||
|
||||
+15
-40
@@ -1,7 +1,7 @@
|
||||
import { isMediumUsernameValid } from "../utils/validation"
|
||||
import { isMediumUsernameValid } from './validation';
|
||||
|
||||
const latestBlogs = payload => {
|
||||
let rssFeed = ""
|
||||
export default function latestBlogs(payload) {
|
||||
let rssFeed = '';
|
||||
if (
|
||||
payload.dev.show &&
|
||||
payload.dev.username &&
|
||||
@@ -11,26 +11,11 @@ const latestBlogs = payload => {
|
||||
payload.medium.username &&
|
||||
isMediumUsernameValid(payload.medium.username)
|
||||
) {
|
||||
rssFeed =
|
||||
"https://dev.to/feed/" +
|
||||
payload.dev.username +
|
||||
", https://medium.com/feed/" +
|
||||
payload.medium.username +
|
||||
", " +
|
||||
payload.rssurl.username
|
||||
rssFeed = `https://dev.to/feed/${payload.dev.username}, https://medium.com/feed/${payload.medium.username}, ${payload.rssurl.username}`;
|
||||
}
|
||||
//when any two blog providers are selected
|
||||
else if (
|
||||
payload.dev.show &&
|
||||
payload.dev.username &&
|
||||
payload.rssurl.show &&
|
||||
payload.rssurl.username
|
||||
) {
|
||||
rssFeed =
|
||||
"https://dev.to/feed/" +
|
||||
payload.dev.username +
|
||||
", " +
|
||||
payload.rssurl.username
|
||||
// when any two blog providers are selected
|
||||
else if (payload.dev.show && payload.dev.username && payload.rssurl.show && payload.rssurl.username) {
|
||||
rssFeed = `https://dev.to/feed/${payload.dev.username}, ${payload.rssurl.username}`;
|
||||
} else if (
|
||||
payload.rssurl.show &&
|
||||
payload.rssurl.username &&
|
||||
@@ -38,11 +23,7 @@ const latestBlogs = payload => {
|
||||
payload.medium.username &&
|
||||
isMediumUsernameValid(payload.medium.username)
|
||||
) {
|
||||
rssFeed =
|
||||
"https://medium.com/feed/" +
|
||||
payload.medium.username +
|
||||
", " +
|
||||
payload.rssurl.username
|
||||
rssFeed = `https://medium.com/feed/${payload.medium.username}, ${payload.rssurl.username}`;
|
||||
} else if (
|
||||
payload.dev.show &&
|
||||
payload.dev.username &&
|
||||
@@ -50,21 +31,17 @@ const latestBlogs = payload => {
|
||||
payload.medium.username &&
|
||||
isMediumUsernameValid(payload.medium.username)
|
||||
) {
|
||||
rssFeed =
|
||||
"https://dev.to/feed/" +
|
||||
payload.dev.username +
|
||||
", https://medium.com/feed/" +
|
||||
payload.medium.username
|
||||
rssFeed = `https://dev.to/feed/${payload.dev.username}, https://medium.com/feed/${payload.medium.username}`;
|
||||
}
|
||||
// when only one blog provider is selected
|
||||
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 if (payload.rssurl.show && payload.rssurl.username) {
|
||||
rssFeed = payload.rssurl.username
|
||||
rssFeed = payload.rssurl.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
|
||||
const data = `name: Latest blog post workflow
|
||||
on:
|
||||
schedule:
|
||||
- cron: '0 * * * *'
|
||||
@@ -77,9 +54,7 @@ jobs:
|
||||
- uses: gautamkrishnar/blog-post-workflow@master
|
||||
with:
|
||||
max_post_count: "4"
|
||||
feed_list: "${rssFeed}"`
|
||||
feed_list: "${rssFeed}"`;
|
||||
|
||||
return data
|
||||
return data;
|
||||
}
|
||||
|
||||
export { latestBlogs }
|
||||
|
||||
+16
-16
@@ -3,25 +3,25 @@ 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