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

[add]: tailwind css

Browse Source
This commit is contained in:
rahuldkjain
2020-09-05 17:25:33 +05:30
parent 1b1c1c366f e742df1b98
commit 588bb821d6
25 changed files with 1708 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -4
View File
@@ -82,16 +82,22 @@ npm start
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
<p align="center">
## Support 🙏
<p align="left">
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
</a>
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
</a>
</p>
<p align="center">
<a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/>
<p align="left">
<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
</a>
<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 🇮🇳
</p>
gatsby-browser.js
+2 -1
View File
@@ -1 +1,2 @@
require("prismjs/themes/prism-okaidia.css")
import "./src/styles/tailwind.css";
require("prismjs/themes/prism-okaidia.css");
gatsby-config.js
+18 -3
View File
@@ -52,8 +52,23 @@ module.exports = {
// other options
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
}
},
`gatsby-plugin-twitter`
],
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
}
package-lock.json
Generated
+379
View File
@@ -1059,6 +1059,16 @@
"to-fast-properties": "^2.0.0"
}
},
"@fullhuman/postcss-purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
"integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
"dev": true,
"requires": {
"postcss": "7.0.32",
"purgecss": "^2.3.0"
}
},
"@graphql-tools/schema": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-6.0.11.tgz",
@@ -2435,6 +2445,23 @@
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
"integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
},
"acorn-node": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
"dev": true,
"requires": {
"acorn": "^7.0.0",
"acorn-walk": "^7.0.0",
"xtend": "^4.0.2"
}
},
"acorn-walk": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
"dev": true
},
"address": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -2822,6 +2849,12 @@
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
"dev": true
},
"atob": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -5107,6 +5140,12 @@
}
}
},
"css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
"dev": true
},
"css-what": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -5578,6 +5617,12 @@
}
}
},
"defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
"dev": true
},
"del": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
@@ -5684,6 +5729,17 @@
}
}
},
"detective": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
"dev": true,
"requires": {
"acorn-node": "^1.6.1",
"defined": "^1.0.0",
"minimist": "^1.1.1"
}
},
"devcert": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/devcert/-/devcert-1.1.1.tgz",
@@ -7344,6 +7400,12 @@
"pend": "~1.2.0"
}
},
"fetch-retry": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.0.1.tgz",
"integrity": "sha512-EhIeVBkq9T2z1ANDr2kmLujoHOTdLvR9t/nzLSdX4PMIFinLyyZFYX9T6Fb3LrbiHQEhujq1O7ElsqjuqYIsEA==",
"dev": true
},
"figgy-pudding": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -8060,6 +8122,68 @@
"micromatch": "^3.1.10"
}
},
"gatsby-plugin-postcss": {
"version": "2.3.11",
"resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.3.11.tgz",
"integrity": "sha512-IHZ2s0iLspL3spYKpFz4SUqQHPPImvPhvVAFEBkGNRA65ffmgOLqucsaXzINjFcpdy5o3+dS+GJuMePaSGYIbg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.3",
"postcss-loader": "^3.0.0"
}
},
"gatsby-plugin-purgecss": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-purgecss/-/gatsby-plugin-purgecss-5.0.0.tgz",
"integrity": "sha512-vzBQSBfZuzmm6+P5qedw+LCgtQm0HRzdDUjytdCwgYCBRuxUjxSkHAFBpemSXqkklfWxs6jcLjRuElVqSDLT1w==",
"dev": true,
"requires": {
"fs-extra": "^9.0.0",
"loader-utils": "^2.0.0",
"purgecss": "^2.1.0"
},
"dependencies": {
"fs-extra": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
"dev": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^1.0.0"
}
},
"jsonfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^1.0.0"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"universalify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
"dev": true
}
}
},
"gatsby-plugin-react-helmet": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.6.tgz",
@@ -8104,6 +8228,15 @@
}
}
},
"gatsby-plugin-twitter": {
"version": "2.3.10",
"resolved": "https://registry.npmjs.org/gatsby-plugin-twitter/-/gatsby-plugin-twitter-2.3.10.tgz",
"integrity": "sha512-WQzjGpeKCdxujzAWE2yFOKaI494J/Qb6vhDdLvtevOAZVXSaMdTSfwSSUr17jsu8TV5s47fasKox+h/0uRlJUw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.3"
}
},
"gatsby-plugin-typescript": {
"version": "2.4.8",
"resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.8.tgz",
@@ -8353,6 +8486,52 @@
}
}
},
"gatsby-remark-embedder": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/gatsby-remark-embedder/-/gatsby-remark-embedder-3.0.0.tgz",
"integrity": "sha512-Do0NA09+ehs8mycfGTx0VbA6Ti4ALIILCMLax/zbspXVFaRfgbOoB/CgIEW9Raai98oMpiJtpAr0T6UR76AImA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.5",
"fetch-retry": "^4.0.1",
"node-fetch": "^2.6.0",
"unist-util-visit": "^2.0.3"
},
"dependencies": {
"@babel/runtime": {
"version": "7.11.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
"integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"node-fetch": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
"dev": true
},
"unist-util-is": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.2.tgz",
"integrity": "sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==",
"dev": true
},
"unist-util-visit": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
"unist-util-is": "^4.0.0",
"unist-util-visit-parents": "^3.0.0"
}
}
}
},
"gatsby-remark-prismjs": {
"version": "3.5.10",
"resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.10.tgz",
@@ -12824,6 +13003,12 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
},
"normalize.css": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
"dev": true
},
"npm-conf": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -13782,6 +13967,53 @@
"postcss": "^7.0.26"
}
},
"postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
"dev": true,
"requires": {
"glob": "^7.1.2",
"object-assign": "^4.1.1",
"postcss": "^6.0.9",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"postcss-js": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
"integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
"dev": true,
"requires": {
"camelcase-css": "^2.0.1",
"postcss": "^7.0.18"
}
},
"postcss-load-config": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
@@ -14073,6 +14305,16 @@
}
}
},
"postcss-nested": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
"dev": true,
"requires": {
"postcss": "^7.0.32",
"postcss-selector-parser": "^6.0.2"
}
},
"postcss-normalize-charset": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -14437,6 +14679,12 @@
}
}
},
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
"prismjs": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
@@ -14609,6 +14857,26 @@
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
},
"purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
"integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
"dev": true,
"requires": {
"commander": "^5.0.0",
"glob": "^7.0.0",
"postcss": "7.0.32",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
"dev": true
}
}
},
"q": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -15203,6 +15471,24 @@
}
}
},
"reduce-css-calc": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
"integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
"dev": true,
"requires": {
"css-unit-converter": "^1.1.1",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
}
}
},
"redux": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
@@ -17470,6 +17756,99 @@
}
}
},
"tailwindcss": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.7.6.tgz",
"integrity": "sha512-focAhU3ciM1/UYBHQVKKzede4zC3y9+IHzU2N/ZF6mbZbhY8S96lOxrO2Y6LMU08+Dbh2xBLmO1bsioLk3Egig==",
"dev": true,
"requires": {
"@fullhuman/postcss-purgecss": "^2.1.2",
"autoprefixer": "^9.4.5",
"browserslist": "^4.12.0",
"bytes": "^3.0.0",
"chalk": "^3.0.0 || ^4.0.0",
"color": "^3.1.2",
"detective": "^5.2.0",
"fs-extra": "^8.0.0",
"lodash": "^4.17.20",
"node-emoji": "^1.8.1",
"normalize.css": "^8.0.1",
"object-hash": "^2.0.3",
"postcss": "^7.0.11",
"postcss-functions": "^3.0.0",
"postcss-js": "^2.0.0",
"postcss-nested": "^4.1.1",
"postcss-selector-parser": "^6.0.0",
"postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3",
"reduce-css-calc": "^2.1.6",
"resolve": "^1.14.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"dev": true
},
"object-hash": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
"integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
"dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"tapable": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
package.json
+6 -1
View File
@@ -25,8 +25,13 @@
"react-helmet": "^6.1.0"
},
"devDependencies": {
"gatsby-plugin-postcss": "^2.3.11",
"gatsby-plugin-purgecss": "^5.0.0",
"gatsby-plugin-twitter": "^2.3.10",
"gatsby-remark-embedder": "^3.0.0",
"gh-pages": "^3.1.0",
"prettier": "2.0.5"
"prettier": "2.0.5",
"tailwindcss": "^1.7.6"
},
"keywords": [
"gatsby"
src/components/addons.js
+12 -12
View File
@@ -25,34 +25,34 @@ const Addons = (props) => {
document.body.removeChild(tempElement);
}
return (
<div className="section">
<div className="section-title">Add-ons</div>
<div className="checkbox">
<label htmlFor="visitors-count" className="checkboxLabel">
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="visitors-count" className="cursor-pointer">
<input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
</label>
</div>
<div className="checkbox">
<label htmlFor="github-stats" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="github-stats" className="cursor-pointer">
<input id="github-stats" type="checkbox" checked={props.data.githubStats}
onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
</label>
</div>
<div className="checkbox">
<label htmlFor="top-languages" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="top-languages" className="cursor-pointer">
<input id="top-languages" type="checkbox" checked={props.data.topLanguages}
onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
</label>
</div>
<div className="checkbox">
<label htmlFor="dev-dynamic-blogs" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
<input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
</label>
</div>
<div className="checkbox">
<label htmlFor="medium-dynamic-blogs" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
<input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
</label>
src/components/footer.js
+3 -3
View File
@@ -3,8 +3,8 @@ import links from '../constants/page-links'
import { Link } from 'gatsby'
const Footer = () => {
return (
<div className="footer">
<div className="footer-pages">
<div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
<div className="w-full flex justify-evenly items-center py-2 text-orange-500">
<div>
<Link to={links.about} activeStyle={{ color: "#002ead" }}>
About
@@ -21,7 +21,7 @@ const Footer = () => {
</Link>
</div>
</div>
<div className="footer-proud">
<div className="py-2">
Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
</div>
</div>
src/components/header.js
+16 -17
View File
@@ -4,9 +4,9 @@ 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 { Link } from "gatsby"
const Header = (props) => {
const Header = props => {
const fetchData = async () => {
var response = await axios.get(
"https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
@@ -29,10 +29,10 @@ const Header = (props) => {
fetchData()
setInterval(fetchData, 60000)
gsap.set(".star-icon, .fork-icon", {
gsap.set(".star, .fork", {
transformOrigin: "center",
})
gsap.to(".star-icon, .fork-icon", {
gsap.to(".star, .fork", {
rotateZ: "360",
duration: 2,
ease: "elastic.inOut",
@@ -42,28 +42,27 @@ const Header = (props) => {
}, [])
return (
<div className="header">
<div className="shadow flex items-center justify-center flex-col mb-2 py-2">
<Link to={links.home}>
<h1 className="heading">
<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="logo"
className="w-12 h-12"
alt="github profile markdown generator logo"
/>
<div>
{props.heading}
</div>
<div>{props.heading}</div>
</h1>
</Link>
<div className="github">
<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="github-button">
<StarIcon size={16} className="star-icon" /> Star this repo{" "}
<span className="github-count">{stats.starsCount}</span>
<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
@@ -71,9 +70,9 @@ const Header = (props) => {
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
target="blank"
>
<div className="github-button">
<RepoForkedIcon size={16} className="fork-icon" /> Fork on GitHub{" "}
<span className="github-count">{stats.forksCount}</span>
<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>
src/components/layout.js
+21
View File
@@ -0,0 +1,21 @@
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;
src/components/markdown.js
+2 -2
View File
@@ -70,7 +70,7 @@ const Markdown = (props) => {
listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
}
});
return listChosenSkills.length > 0 ? `<p align="left">${listChosenSkills.join(' ')}</p>` : '';
return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
}
const DisplayDynamicBlogs = (props) => {
if (props.show) {
@@ -93,7 +93,7 @@ const Markdown = (props) => {
return '';
}
return (
<div id="markdown-content">
<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} /></>
src/components/markdownPreview.js
+16 -16
View File
@@ -5,7 +5,7 @@ const MarkdownPreview = (props) => {
const TitlePreview = (props) => {
if (props.prefix && props.title) {
return (
<h1 className="title">{props.prefix + ' ' + props.title}</h1>
<h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
)
}
return null;
@@ -13,7 +13,7 @@ const MarkdownPreview = (props) => {
const SubTitlePreview = (props) => {
if (props.subtitle) {
return (
<h3 className="subtitle">{props.subtitle}</h3>
<h3 className="text-center font-medium">{props.subtitle}</h3>
)
}
return null;
@@ -22,18 +22,18 @@ const MarkdownPreview = (props) => {
if (props.prefix && props.project) {
if (props.link) {
return (
<div>
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.project}</a>
<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>{props.prefix + ' '}<b>{props.project}</b></div>);
return (<div className="my-2">{props.prefix + ' '}<b>{props.project}</b></div>);
}
}
if (props.prefix && props.link) {
return (
<div>
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.link}</a>
<div className="my-2">
{props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
</div>
);
}
@@ -60,13 +60,13 @@ const MarkdownPreview = (props) => {
}
const DisplaySocial = (props) => {
if (props.username) {
return (<a className="link social-icon" href={props.base + '/' + props.username} target="blank"><img className="icon" src={props.icon} alt="props.username" /></a>)
return (<a className="no-underline text-blue-700 m-2" href={props.base + '/' + props.username} target="blank"><img className="w-6 h-6" src={props.icon} alt="props.username" /></a>)
}
return null;
}
const SocialPreview = (props) => {
return (
<div className="social">
<div className="flex justify-center items-end">
<DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} />
<DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} />
<DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} />
@@ -94,32 +94,32 @@ const MarkdownPreview = (props) => {
const VisitorsBadgePreview = (props) => {
let link = "https://komarev.com/ghpvc/?username=" + props.github
if (props.show) {
return (<div className="badge"> <img className="badgeImage" src={link} alt={props.github} /> </div>)
return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
}
return null;
}
const GitHubStatsPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
if (props.show) {
return (<div className="github-stats-card"><img src={link} alt={props.github} /></div>)
return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
}
return null;
}
const TopLanguagesPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
if (props.show) {
return (<div className="top-languages-card"><img src={link} alt={props.github} /></div>)
return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
}
return <div className="top-languages-card"> &nbsp;</div>;
return <div className="text-center mx-4 mb-4"> &nbsp;</div>;
}
const SkillsPreview = (props) => {
var listSkills = []
skills.forEach((skill) => {
if (props.skills[skill]) {
listSkills.push(<img className="skill-preview-icon" key={skill} src={icons[skill]} alt={skill} />)
listSkills.push(<img className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10" key={skill} src={icons[skill]} alt={skill} />)
}
});
return listSkills.length > 0 ? <div className='skills-preview'>{listSkills}</div> : ''
return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{listSkills}</div> : ''
}
return (
<div id="markdown-preview">
@@ -128,7 +128,7 @@ const MarkdownPreview = (props) => {
<VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
<WorkPreview work={props} />
<SkillsPreview skills={props.skills} />
<div className="github-cards">
<div className="block sm:flex sm:justify-center sm:items-start">
<TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
<GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
</div>
src/components/skills.js
+9 -9
View File
@@ -1,18 +1,18 @@
import React, { Fragment } from "react"
import React from "react"
import { icons, categorizedSkills } from "../constants/skills"
const Skills = props => {
const createSkill = skill => {
return (
<div className="skillCheckbox" key={skill}>
<label htmlFor={skill} className="skillCheckboxLabel">
<div className="w-1/3 sm:w-1/4 my-6" key={skill}>
<label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
<input
id={skill}
type="checkbox"
checked={props.skills[skill]}
onChange={event => props.handleSkillsChange(skill)}
onChange={(event) => props.handleSkillsChange(skill)}
/>
<img className="skill-icon" src={icons[skill]} alt={skill} />
<img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
<span className="tooltiptext">{skill}</span>
</label>
</div>
@@ -20,15 +20,15 @@ const Skills = props => {
}
return (
<div>
<div className="section-title">Skills</div>
<div className="px-2 sm:px-6 mb-10">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
{Object.keys(categorizedSkills).map(key => (
<div key={key}>
<h4 className="skills-category-title">
<h4 className="text-sm sm:text-xl text-gray-900 text-center">
{categorizedSkills[key].title}
</h4>
<div className="skills">
<div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
{categorizedSkills[key].skills.map(skill => createSkill(skill))}
</div>
</div>
src/components/social.js
+89 -85
View File
@@ -2,91 +2,95 @@ import React from 'react';
const Social = (props) => {
return (
<div className="section">
<div className="section-title">Social</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
className="icon" alt="github" />
<input id="github" placeholder="github username" className="inputField lg"
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
className="icon" alt="twitter" />
<input id="twitter" placeholder="twitter username" className="inputField lg"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
className="icon" alt="dev.to" />
<input id="dev" placeholder="dev.to username" className="inputField lg"
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
className="icon" alt="codepen" />
<input id="codepen" placeholder="codepen username" className="inputField lg"
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
className="icon" alt="codesandbox" />
<input id="codesandbox" placeholder="codesandbox username" className="inputField lg"
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
className="icon" alt="stackoverflow" />
<input id="stackoverflow" placeholder="stackoverflow user ID" className="inputField lg"
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
className="icon" alt="linkedin" />
<input id="linkedin" placeholder="linkedin username" className="inputField lg"
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
className="icon" alt="kaggle" />
<input id="kaggle" placeholder="kaggle username" className="inputField lg"
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
className="icon" alt="facebook" />
<input id="fb" placeholder="facebook username" className="inputField lg"
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
className="icon" alt="instagram" />
<input id="instagram" placeholder="instagram username" className="inputField lg"
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
className="icon" alt="dribbble" />
<input id="dribbble" placeholder="dribbble username" className="inputField lg"
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
className="icon" alt="behance" />
<input id="behance" placeholder="behance username" className="inputField lg"
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
className="icon" alt="medium" />
<input id="medium" placeholder="medium username (with @)" className="inputField lg"
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
className="icon" alt="youtube" />
<input id="youtube" placeholder="youtube channel name" className="inputField lg"
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
<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="flex flex-wrap justify-center items-center">
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
<input id="github" placeholder="github username"
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
<input id="twitter" placeholder="twitter username"
className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
<input id="dev" placeholder="dev.to username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
<input id="codepen" placeholder="codepen username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
<input id="codesandbox" placeholder="codesandbox username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
<input id="stackoverflow" placeholder="stackoverflow user ID" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
<input id="linkedin" placeholder="linkedin username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
<input id="kaggle" placeholder="kaggle username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
<input id="fb" placeholder="facebook username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
<input id="instagram" placeholder="instagram username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
<input id="dribbble" placeholder="dribbble username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
<input id="behance" placeholder="behance username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
<input id="medium" placeholder="medium username (with @)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
<input id="youtube" placeholder="youtube channel name" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
</div>
</div>
<div className="container">
src/components/subtitle.js
+3 -3
View File
@@ -2,9 +2,9 @@ import React from 'react';
const Subtitle = (props) => {
return (
<div className="section">
<div className="section-title">Subtitle</div>
<input id="subtitle" className="inputField lg prefix" value={props.data.subtitle}
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
<input id="subtitle" className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" value={props.data.subtitle}
onChange={event => props.handleDataChange('subtitle', event)} />
</div>
);
src/components/title.js
+10 -6
View File
@@ -2,12 +2,16 @@ import React from 'react';
const Title = (props) => {
return (
<div className="section">
<div className="section-title">Title</div>
<input id="title-prefix" className="inputField sm prefix" value={props.prefix.title}
onChange={event => props.handlePrefixChange('title', event)} />
<input id="title-name" placeholder="name" className="inputField md" value={props.data.title}
onChange={event => props.handleDataChange('title', event)} />
<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="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
<input id="title-prefix"
className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
<input id="title-name" placeholder="name" className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.title}
onChange={event => props.handleDataChange('title', event)} />
</div>
</div>
);
}
src/components/work.js
+169 -70
View File
@@ -1,74 +1,173 @@
import React from 'react';
import React from "react"
const Work = (props) => {
return (
<div className="section">
<div className="section-title">Work</div>
<div className="row">
<input id="currentWork-prefix" className="inputField md prefix" value={props.prefix.currentWork}
onChange={event => props.handlePrefixChange('currentWork', event)} />
<input id="currentWork" placeholder="project name" className="inputField sm" value={props.data.currentWork}
onChange={event => props.handleDataChange('currentWork', event)} />
<input id="currentWork-link" placeholder="project link" className="inputField md link"
value={props.link.currentWork} onChange={event => props.handleLinkChange('currentWork', event)} />
</div>
<div className="row">
<input id="collaborateOn-prefix" className="inputField md prefix" value={props.prefix.collaborateOn}
onChange={event => props.handlePrefixChange('collaborateOn', event)} />
<input id="collaborateOn" placeholder="project name" className="inputField sm"
value={props.data.collaborateOn} onChange={event => props.handleDataChange('collaborateOn', event)} />
<input id="collaborateOn-link" placeholder="project link" className="inputField md link"
value={props.link.collaborateOn} onChange={event => props.handleLinkChange('collaborateOn', event)} />
</div>
<div className="row">
<input id="helpWith-prefix" className="inputField md prefix" value={props.prefix.helpWith}
onChange={event => props.handlePrefixChange('helpWith', event)} />
<input id="helpWith" placeholder="project name" className="inputField sm"
value={props.data.helpWith} onChange={event => props.handleDataChange('helpWith', event)} />
<input id="helpWith-link" placeholder="project link" className="inputField md link"
value={props.link.helpWith} onChange={event => props.handleLinkChange('helpWith', event)} />
</div>
<div className="row">
<input id="currentLearn-prefix" className="inputField md prefix" value={props.prefix.currentLearn}
onChange={event => props.handlePrefixChange('currentLearn', event)} />
<input id="currentLearn" placeholder="Frameworks, courses etc." className="inputField md"
value={props.data.currentLearn} onChange={event => props.handleDataChange('currentLearn', event)} />
</div>
<div className="row">
<input id="ama-prefix" className="inputField md prefix" value={props.prefix.ama}
onChange={event => props.handlePrefixChange('ama', event)} />
<input id="ama" placeholder="react, vue and gsap" className="inputField md"
value={props.data.ama} onChange={event => props.handleDataChange('ama', event)} />
</div>
<div className="row">
<input id="contact-prefix" className="inputField md prefix" value={props.prefix.contact}
onChange={event => props.handlePrefixChange('contact', event)} />
<input id="contact" placeholder="example@gmail.com" className="inputField md"
value={props.data.contact} onChange={event => props.handleDataChange('contact', event)} />
</div>
const Work = 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-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="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)}
/>
<input
id="currentWork"
placeholder="project name"
className="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)}
/>
<input
id="currentWork-link"
placeholder="project link"
className="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)}
/>
</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="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)}
/>
<input
id="collaborateOn"
placeholder="project name"
className="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)}
/>
<input
id="collaborateOn-link"
placeholder="project link"
className="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)}
/>
</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="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)}
/>
<input
id="helpWith"
placeholder="project name"
className="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)}
/>
<input
id="helpWith-link"
placeholder="project link"
className="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)}
/>
</div>
<div className="row">
<input id="portfolio-prefix" className="inputField md prefix" value={props.prefix.portfolio}
onChange={event => props.handlePrefixChange('portfolio', event)} />
<input id="portfolio" placeholder="portfolio link" className="inputField md"
value={props.link.portfolio} onChange={event => props.handleLinkChange('portfolio', event)} />
</div>
<div className="row">
<input id="blog-prefix" className="inputField md prefix" value={props.prefix.blog}
onChange={event => props.handlePrefixChange('blog', event)} />
<input id="blog" placeholder="blog link" className="inputField md"
value={props.link.blog} onChange={event => props.handleLinkChange('blog', event)} />
</div>
<div className="row">
<input id="funFact-prefix" className="inputField md prefix" value={props.prefix.funFact}
onChange={event => props.handlePrefixChange('funFact', event)} />
<input id="funFact" placeholder="Chai over Coffee" className="inputField md"
value={props.data.funFact} onChange={event => props.handleDataChange('funFact', event)} />
</div>
</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="currentLearn-prefix"
className="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)}
/>
<input
id="currentLearn"
placeholder="Frameworks, courses etc."
className="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)}
/>
</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="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)}
/>
<input
id="ama"
placeholder="react, vue and gsap"
className="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)}
/>
</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="contact-prefix"
className="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)}
/>
<input
id="contact"
placeholder="example@gmail.com"
className="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)}
/>
</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="portfolio-prefix"
className="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)}
/>
<input
id="portfolio"
placeholder="portfolio link"
className="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)}
/>
</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="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)}
/>
<input
id="blog"
placeholder="blog link"
className="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)}
/>
</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="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)}
/>
<input
id="funFact"
placeholder="Chai over Coffee"
className="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)}
/>
</div>
</div>
)
}
export default Work;
export default Work
src/html.js
+37
View File
@@ -0,0 +1,37 @@
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="Thank you for visiting. You can now buy me a coffee!" 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,
}
src/markdown-pages/about.md
+8 -1
View File
@@ -16,14 +16,21 @@ The profile should be neat and minimal to give a clear overview of the work. Non
To solve this, GitHub Profile README Generator came into existence.
So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
<p align="left">
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
<img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
</a>
<br>
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
<img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
</a>
</p>
### Contributors 🙏
List of the developers who contributed to the project. A big shout out for them.
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
<img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
</a>
<hr/>
## How do I create a profile README?
src/markdown-pages/support.md
+48 -5
View File
@@ -10,14 +10,57 @@ title: "💵 Support OSS"
You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.
<p align="center">
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
</p>
<p align="center">
<a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/>
<p align="left">
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
</a>
<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
</a>
<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
</a>
</p>
## Social Support 🤝
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
</a>
Let the world know how you feel using this tool. Share with others on twitter.
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is a great tool to generate customized GitHub profile README: <a href="https://t.co/dTpnz0iTP2">https://t.co/dTpnz0iTP2</a> <a href="https://t.co/WcEkK2DKz0">pic.twitter.com/WcEkK2DKz0</a></p>&mdash; Alisher Abdulkhaev (@alisher_ai) <a href="https://twitter.com/alisher_ai/status/1298858350885576704?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">github profile readme generator: <a href="https://t.co/fQDUBdE0jz">https://t.co/fQDUBdE0jz</a></p>&mdash; merve (@mervenoyann) <a href="https://twitter.com/mervenoyann/status/1301436574475976706?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>&mdash; Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>&mdash; Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">I finally updated my github readme <a href="https://t.co/8rcyuW1UTM">https://t.co/8rcyuW1UTM</a> <br>thanks to this generator : <a href="https://t.co/c0GHc4n1S6">https://t.co/c0GHc4n1S6</a> plus some changes.<br><br>Thank you <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> for this great generator, saved me a lot of time.</p>&mdash; Abir El Halimi (@abiir07) <a href="https://twitter.com/abiir07/status/1299013498178076673?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This morning I set up my <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> profile readme, really amazing what great tools the users have already created to make this easier.<br><br>Big shout out to <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a>!<a href="https://t.co/bL0XwfJ78B">https://t.co/bL0XwfJ78B</a> <a href="https://t.co/xBLVFOJegt">pic.twitter.com/xBLVFOJegt</a></p>&mdash; Max Schmitt (@maxibanki) <a href="https://twitter.com/maxibanki/status/1296408691273498624?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>&mdash; Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&amp;ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>&mdash; Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by ⁦<a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>⁩. <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> ⁦<a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a>⁩ <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&amp;ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>&mdash; Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>&mdash; Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
## Sponsors 🙇
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
src/pages/index.css
+126 -130
View File
@@ -21,23 +21,23 @@
html,
body {
margin: 1%;
padding: 1%;
/* margin: 1%; */
/* padding: 0% 0.5%; */
font-family: "Roboto Mono", monospace;
color: var(--grey-90);
}
.section-title {
/* .section-title {
margin: 0 !important;
font-family: "Lato", sans-serif;
padding-left: 2%;
font-size: 24px;
font-weight: 600;
}
} */
input:focus {
/* input:focus {
outline: none;
}
} */
[type="checkbox"] {
-webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
@@ -47,10 +47,10 @@ input:focus {
border-radius: 0px !important;
}
.icon {
/* .icon {
width: 25px;
height: 25px;
}
} */
.section {
width: 100%;
@@ -58,27 +58,27 @@ input:focus {
margin: 2% 0%;
}
.inputField {
/* .inputField {
border: 0px solid;
border-bottom: 1px solid grey;
margin: 2%;
padding: 1% 2% 1% 1%;
font-size: 18px;
height: 25px;
}
} */
/*
.row {
width: 100%;
display: flex;
/* justify-content: flex-start; */
}
justify-content: flex-start;
} */
.inputField:focus {
/* .inputField:focus {
border-bottom: 1px solid var(--dark-blue);
color: var(--grey-90);
}
} */
.sm {
/* .sm {
width: 15%;
}
@@ -88,13 +88,13 @@ input:focus {
.lg {
width: 50%;
}
} */
.prefix {
/* .prefix {
color: var(--grey-80);
}
} */
.button {
/* .button {
padding: 1% 0%;
background: var(--grey-05);
border: 2px solid var(--grey-85);
@@ -102,41 +102,34 @@ input:focus {
width: 25%;
text-align: center;
cursor: pointer;
}
} */
.container {
/* .container {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
} */
.checkbox {
/* .checkbox {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 2%;
margin: 1% 0%;
}
.skillCheckboxLabel {
width: 70%;
font-weight: 500;
cursor: pointer;
display: flex;
margin: 8%;
}
} */
/*
.checkboxLabel {
font-weight: 500;
cursor: pointer;
}
} */
.submit {
/* .submit {
display: flex;
justify-content: center;
}
} */
.warning {
color: var(--red);
@@ -144,26 +137,26 @@ input:focus {
margin-left: 2%;
padding: 1%;
}
/*
.preview {
border: 2px solid var(--grey-75);
-webkit-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
-moz-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
padding: 0% 2%;
}
} */
.markdown-section {
min-height: calc(100vh - 100px);
}
/*
.markdown {
width: 100%;
display: flex;
justify-content: center;
}
} */
.markdown-box {
/* .markdown-box {
width: 100%;
font-size: 12px;
color: var(--grey-85);
@@ -173,9 +166,9 @@ input:focus {
box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
padding: 1% 2% 0.5% 2%;
margin-top: 0.5%;
}
} */
.copy-button {
/* .copy-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
text-align: center;
@@ -184,9 +177,9 @@ input:focus {
justify-self: center;
padding: 2% 0%;
align-self: center;
}
} */
.download-button {
/* .download-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
text-align: center;
@@ -195,14 +188,14 @@ input:focus {
justify-self: center;
padding: 2% 0%;
align-self: center;
}
} */
.utils {
/* .utils {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
margin-top: 4%;
}
} */
/*
.preview-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
@@ -212,7 +205,7 @@ input:focus {
justify-self: end;
padding: 2% 0%;
align-self: center;
}
} */
.loader {
height: 100vh;
@@ -223,7 +216,7 @@ input:focus {
font-size: 24px;
}
.back-button {
/* .back-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
text-align: center;
@@ -232,82 +225,82 @@ input:focus {
justify-self: start;
padding: 2% 0%;
align-self: center;
}
} */
/*
.title {
text-align: center;
}
} */
.subtitle {
/* .subtitle {
text-align: center;
}
} */
.link {
/* .link {
text-decoration: none;
color: var(--dark-blue);
}
} */
.social-icon {
/* .social-icon {
margin: 1%;
}
} */
.badge {
/* .badge {
text-align: left;
}
} */
.github-cards {
/* .github-cards {
display: flex;
justify-content: center;
}
.github-stats-card {
} */
/* .github-stats-card {
margin: 1%;
}
.top-languages-card {
} */
/* .top-languages-card {
margin: 1%;
}
.social {
} */
/* .social {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
} */
/*
.icon {
width: 25px;
height: 25px;
margin: 1%;
cursor: pointer;
}
} */
.header {
/* .header {
width: 100%;
text-align: center;
display: inline-block;
}
} */
.heading {
/* .heading {
color: var(--dark-blue);
font-family: "Lato", sans-serif;
cursor: pointer;
}
} */
.footer {
/* .footer {
margin-top: 2%;
width: 100%;
text-align: center;
padding: 1%;
}
.footer-pages {
} */
/* .footer-pages {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(min(calc(20% + 20vmin), 100%), 1fr)
);
color: var(--grey-75);
}
.footer-proud {
} */
/* .footer-proud {
margin: 2% 0%;
}
} */
a {
text-decoration: none;
@@ -315,11 +308,11 @@ a {
color: inherit;
}
.github {
/* .github {
display: inline-flex;
}
} */
.github-button {
/* .github-button {
color: var(--grey-90);
font-size: 12px;
font-weight: bolder;
@@ -328,18 +321,18 @@ a {
border: 2px solid var(--grey-85);
margin: 1%;
width: 230px;
}
} */
.github-count {
color: var(--dark-purple);
}
/*
.logo {
width: 40px;
height: 40px;
}
} */
.skills {
/* .skills {
margin: 1%;
width: 100%;
display: grid;
@@ -360,13 +353,13 @@ a {
width: 40px;
height: 40px;
object-fit: contain;
}
} */
.skill-preview-icon {
/* .skill-preview-icon {
width: 40px;
height: 40px;
margin: 1%;
}
} */
/* Tooltip css */
@@ -377,7 +370,7 @@ a {
color: var(--grey-05);
margin-left: 8%;
background: var(--grey-90);
padding: 1px 5%;
padding: 2% 5%;
font-size: 14px;
}
@@ -402,20 +395,20 @@ a {
background: var(--grey-05);
}
.config-options {
/* .config-options {
margin-top: 48px;
padding: 1% 1% 1% 2%;
font-weight: 700;
font-size: 12px;
border: 2px solid var(--grey-15);
}
.new-tag {
} */
/* .new-tag {
font-size: 14px;
padding: 2px 4px;
background: var(--dark-green);
color: white;
}
.actions {
} */
/* .actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@@ -435,7 +428,7 @@ a {
.actions .data input {
flex: 1;
}
} */
@media only screen and (max-width: 580px) {
.tooltiptext {
@@ -444,29 +437,29 @@ a {
}
@media only screen and (max-width: 1199px) {
.section-title {
/* .section-title {
font-size: 18px;
margin: 2% 0% !important;
}
.inputField {
font-size: 10px;
}
.icon {
} */
/* .icon {
width: 20px;
height: 20px;
}
} */
.checkbox {
font-size: 12px;
}
.button {
/* .button {
width: 60%;
margin: 2% 0%;
font-size: 14px;
}
.badgeImage {
} */
/* .badgeImage {
height: 15px;
}
.heading {
} */
/* .heading {
font-size: 18px;
}
.footer {
@@ -477,17 +470,17 @@ a {
auto-fill,
minmax(min(calc(10% + 20vmin), 100%), 1fr)
);
}
.github-button {
} */
/* .github-button {
font-size: 10px !important;
padding: 2% 1% !important;
width: 140px;
}
} */
.logo {
width: 20px;
height: 20px;
}
.skills {
/* .skills {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@@ -495,17 +488,20 @@ a {
margin-left: 12%;
width: 25px;
height: 25px;
}
.skill-preview-icon {
} */
/* .skill-preview-icon {
width: 20px;
height: 20px;
margin: 1%;
}
.hide-on-mobile {
} */
/* .hide-on-mobile {
display: none;
}
#markdown-content {
} */
/* #markdown-content {
word-break: break-all;
} */
.tooltiptext {
display: none;
}
.warning {
font-size: 10px;
@@ -513,29 +509,29 @@ a {
.workflow {
font-size: 12px;
}
.github-cards {
/* .github-cards {
display: block;
}
.github-stats-card{
} */
/* .github-stats-card{
text-align: center;
}
.top-languages-card {
} */
/* .top-languages-card {
text-align: center;
}
.github-stats-card > img{
} */
/* .github-stats-card > img{
width: 80%;
}
.top-languages-card > img{
} */
/* .top-languages-card > img{
width: 80%;
}
.skills-category-title {
} */
/* .skills-category-title {
font-size: 14px;
}
.actions {
grid-template-columns: 1fr;
flex-direction: column;
}
} */
}
src/pages/index.js
+567 -551
View File
File diff suppressed because it is too large Load Diff
src/pages/tl.css
View File
src/styles/tailwind.css
+114
View File
@@ -0,0 +1,114 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind @screens;
/* Additional vertical padding used by kbd tag. */
.py-05 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.markdown {
@apply text-gray-900 leading-normal break-words;
}
.markdown > * + * {
@apply mt-0 mb-4;
}
/* .markdown p {
@apply flex justify-start items-center;
} */
.markdown li + li {
@apply mt-1;
}
.markdown li > p + p {
@apply mt-6;
}
.markdown strong {
@apply font-semibold;
}
.markdown a {
@apply text-blue-600 font-semibold;
}
.markdown strong a {
@apply font-bold;
}
.markdown h1 {
@apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h2 {
@apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h3 {
@apply leading-snug text-lg font-semibold mb-4 mt-6;
}
.markdown h4 {
@apply leading-none text-base font-semibold mb-4 mt-6;
}
.markdown h5 {
@apply leading-tight text-sm font-semibold mb-4 mt-6;
}
.markdown h6 {
@apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
}
.markdown blockquote {
@apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
}
.markdown code {
@apply font-body text-sm inline bg-gray-200 rounded px-1 py-05;
}
.markdown pre {
@apply bg-gray-900 text-white overflow-scroll rounded p-4;
}
.markdown pre code {
@apply block p-0 rounded-none text-white;
}
.markdown ul {
@apply text-base pl-8 list-disc;
}
.markdown ol {
@apply text-base pl-8 list-decimal;
}
.markdown kbd {
@apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-body shadow;
}
.markdown table {
@apply text-base border-gray-600;
}
.markdown th {
@apply border py-1 px-3;
}
.markdown td {
@apply border py-1 px-3;
}
/* Override pygments style background color. */
.markdown .highlight pre {
@apply bg-gray-100 !important;
}
src/templates/blogTemplate.js
+16 -9
View File
@@ -1,7 +1,9 @@
import React from "react"
import { graphql } from "gatsby"
import Header from '../components/header'
import Footer from '../components/footer'
// import Header from '../components/header'
// import Footer from '../components/footer'
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.
@@ -9,20 +11,25 @@ export default function Template({
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark
return (
<>
<Header heading="GitHub Profile README Generator" />
<div className="blog-post-container">
<Layout>
{/* <Header heading="GitHub Profile README Generator" /> */}
<Helmet>
<meta charSet="utf-8" />
<title>{frontmatter.title}</title>
<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>{frontmatter.title}</h1>
<h1 className="text-4xl font-bold">{frontmatter.title}</h1>
{/* <h2>{frontmatter.date}</h2> */}
<div
className="blog-post-content"
className="markdown"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
<Footer />
</>
{/* <Footer /> */}
</Layout>
)
}
tailwind.config.js
+27
View File
@@ -0,0 +1,27 @@
module.exports = {
purge: [],
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',
},
fontFamily: {
'title': ['Lato', 'sans-serif'],
'body': ['Roboto Mono', 'monospace'],
}
},
variants: {},
plugins: [],
}