starred/github-profile-readme-generator
1
0
Fork 0
mirror of https://github.com/rahuldkjain/github-profile-readme-generator.git synced 2026-09-24 23:40:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

[add]: tailwind-complete

Browse Source
This commit is contained in:
rahuldkjain
2020-09-04 21:16:18 +05:30
parent 1f03dca892
commit 1b866474b9
14 changed files with 244 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gatsby-config.js
+17 -17
View File
@@ -7,20 +7,6 @@ module.exports = {
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
@@ -66,8 +52,22 @@ module.exports = {
// other options
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
}
},
],
// 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`,
}
src/components/addons.js
+1 -1
View File
@@ -25,7 +25,7 @@ const Addons = (props) => {
document.body.removeChild(tempElement);
}
return (
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<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">
src/components/footer.js
+1 -1
View File
@@ -4,7 +4,7 @@ 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 justify-evenly items-center py-2 text-blue-500">
<div className="w-full flex justify-evenly items-center py-2 text-orange-500">
<div>
<Link to={links.about} activeStyle={{ color: "#002ead" }}>
About
src/components/markdown.js
+1 -1
View File
@@ -93,7 +93,7 @@ const Markdown = (props) => {
return '';
}
return (
<div id="markdown-content" className="break-all">
<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/skills.js
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { Fragment } from "react"
import React from "react"
import { icons, categorizedSkills } from "../constants/skills"
const Skills = props => {
@@ -20,7 +20,7 @@ const Skills = props => {
}
return (
<div className="px-2 sm:px-6 mb-4">
<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 => (
src/components/social.js
-12
View File
@@ -19,18 +19,6 @@ const Social = (props) => {
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="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="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<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" />
src/components/subtitle.js
+1 -1
View File
@@ -2,7 +2,7 @@ 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-4">
<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)} />
src/components/title.js
+2 -2
View File
@@ -2,11 +2,11 @@ import React from 'react';
const Title = (props) => {
return (
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<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-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 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}
src/components/work.js
+22 -22
View File
@@ -2,7 +2,7 @@ import React from "react"
const Work = props => {
return (
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<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>
@@ -10,21 +10,21 @@ const Work = props => {
<input
id="currentWork-prefix"
placeholder="Hi, I'm "
className="placeholder-gray-700 mr-4 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"
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-4 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"
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 text-blue-700 mr-4 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"
className="placeholder-gray-700 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)}
/>
@@ -32,21 +32,21 @@ const Work = props => {
<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-4 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"
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-4 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"
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 text-blue-700 mr-4 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"
className="placeholder-gray-700 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)}
/>
@@ -54,21 +54,21 @@ const Work = props => {
<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-4 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"
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-4 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"
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 text-blue-700 mr-4 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"
className="placeholder-gray-700 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)}
/>
@@ -77,14 +77,14 @@ const Work = props => {
<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-4 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"
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 mr-4 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"
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)}
/>
@@ -92,14 +92,14 @@ const Work = props => {
<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-4 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"
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-4 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"
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.ama}
onChange={event => props.handleDataChange("ama", event)}
/>
@@ -108,14 +108,14 @@ const Work = props => {
<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-4 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"
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-4 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"
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.contact}
onChange={event => props.handleDataChange("contact", event)}
/>
@@ -124,14 +124,14 @@ const Work = props => {
<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-4 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"
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 text-blue-700 mr-4 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"
className="placeholder-gray-700 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)}
/>
@@ -139,14 +139,14 @@ const Work = props => {
<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-4 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"
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 text-blue-700 mr-4 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"
className="placeholder-gray-700 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)}
/>
@@ -154,14 +154,14 @@ const Work = props => {
<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-4 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"
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-4 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"
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.funFact}
onChange={event => props.handleDataChange("funFact", event)}
/>
src/markdown-pages/about.md
+3 -1
View File
@@ -16,13 +16,15 @@ 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>
<hr/>
src/pages/index.css
+74 -74
View File
@@ -22,22 +22,22 @@
html,
body {
/* margin: 1%; */
padding: 0% 0.5%;
/* 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;
@@ -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,34 +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%;
}
} */
/*
.checkboxLabel {
font-weight: 500;
cursor: pointer;
}
} */
.submit {
/* .submit {
display: flex;
justify-content: center;
}
} */
.warning {
color: var(--red);
@@ -137,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);
@@ -166,7 +166,7 @@ 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 {
background: var(--grey-05);
@@ -195,7 +195,7 @@ input:focus {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
margin-top: 4%;
} */
/*
.preview-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
@@ -205,7 +205,7 @@ input:focus {
justify-self: end;
padding: 2% 0%;
align-self: center;
}
} */
.loader {
height: 100vh;
@@ -216,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;
@@ -225,7 +225,7 @@ input:focus {
justify-self: start;
padding: 2% 0%;
align-self: center;
}
} */
/*
.title {
text-align: center;
@@ -272,35 +272,35 @@ input:focus {
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;
@@ -308,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;
@@ -321,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;
@@ -353,7 +353,7 @@ a {
width: 40px;
height: 40px;
object-fit: contain;
}
} */
/* .skill-preview-icon {
width: 40px;
@@ -395,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);
}
@@ -428,16 +428,16 @@ a {
.actions .data input {
flex: 1;
}
} */
@media only screen and (max-width: 1199px) {
.section-title {
/* .section-title {
font-size: 18px;
margin: 2% 0% !important;
}
.inputField {
font-size: 10px;
}
} */
/* .icon {
width: 20px;
height: 20px;
@@ -445,15 +445,15 @@ a {
.checkbox {
font-size: 12px;
}
.button {
/* .button {
width: 60%;
margin: 2% 0%;
font-size: 14px;
}
} */
/* .badgeImage {
height: 15px;
} */
.heading {
/* .heading {
font-size: 18px;
}
.footer {
@@ -464,17 +464,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);
}
@@ -482,15 +482,15 @@ a {
margin-left: 12%;
width: 25px;
height: 25px;
}
} */
/* .skill-preview-icon {
width: 20px;
height: 20px;
margin: 1%;
} */
.hide-on-mobile {
/* .hide-on-mobile {
display: none;
}
} */
/* #markdown-content {
word-break: break-all;
} */
@@ -518,14 +518,14 @@ a {
/* .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
+9 -10
View File
@@ -164,7 +164,7 @@ const IndexPage = () => {
duration: 0.5,
ease: "Linear.easeNone",
})
tl.set(".form", { display: "none" })
tl.set("#form", { display: "none" });
setDisplayLoader(true)
setTimeout(() => {
setDisplayLoader(false)
@@ -320,7 +320,7 @@ const IndexPage = () => {
const handleBackToEdit = () => {
setGeneratePreview(false)
setGenerateMarkdown(false)
gsap.set(".form", {
gsap.set("#form", {
display: "",
})
gsap.to(".generate", {
@@ -416,10 +416,9 @@ const IndexPage = () => {
return (
<Layout>
<>
<div className="m-4 sm:p-4">
<SEO title="GitHub Profile Readme Generator" />
<div className="form">
<div id="form">
<Title
data={data}
prefix={prefix}
@@ -481,7 +480,7 @@ const IndexPage = () => {
""
)}
</div>
<div className="submit">
<div className="flex items-center justify-center w-full">
<div
className="text-xs sm:text-xl font-medium border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 sm:py-2 px-2 sm:px-4 generate"
tabIndex="0"
@@ -489,14 +488,14 @@ const IndexPage = () => {
onClick={handleGenerate}
>
Generate README
</div>
</div>
</div>
</div>
{displayLoader ? <Loader /> : ""}
{generateMarkdown || generatePreview ? (
<div className="markdown-section">
<div className="markdown-section p-4 sm:py-4 sm:px-10">
<div className="w-full flex justify-between items-center">
<div
className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
@@ -569,7 +568,7 @@ const IndexPage = () => {
</div>
<div className="w-full flex justify-center items-center">
<div className="w-full text-sm text-gray-900 shadow-lg mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800" id="markdown-box">
<div className="w-full text-sm text-gray-900 shadow-xl mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800" id="markdown-box">
{generatePreview ? (
<MarkdownPreview
prefix={prefix}
@@ -638,7 +637,7 @@ const IndexPage = () => {
<div className="text-sm sm:text-lg text-gray-700">* Press reset to reset the form.</div>
</div>
</div>
</>
</div>
</Layout>
)
}
src/styles/tailwind.css
+101 -1
View File
@@ -4,4 +4,104 @@
@tailwind utilities;
@tailwind @screens;
@tailwind @screens;
.markdown {
@apply leading-relaxed text-sm;
}
@screen sm {
.markdown {
@apply text-base;
}
}
@screen lg {
.markdown {
@apply text-lg;
}
}
.text-shadow {
text-shadow: 1px 1px 1px rgba(0,0,0,0.55);
}
/* Headers */
.markdown h1,
.markdown h2 {
@apply text-xl my-4 font-semibold;
}
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
@apply text-lg my-1 font-semibold;
}
@screen sm {
.markdown h1,
.markdown h2 {
@apply text-2xl;
}
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
@apply text-xl;
}
}
/* Links */
.markdown a {
@apply text-blue-800 my-1;
}
.markdown a:hover {
@apply underline;
}
/* Paragraph */
.markdown p {
@apply mb-2;
}
/* Lists */
.markdown ul,
.markdown ol {
@apply mb-2 ml-8;
}
.markdown li > p,
.markdown li > ul,
.markdown li > ol {
@apply mb-0;
}
.markdown ol {
@apply list-decimal;
}
.markdown ul {
@apply list-disc;
}
/* Blockquotes */
.markdown blockquote {
@apply p-2 mx-6 bg-gray-100 mb-4 border-l-4 border-gray-400 italic;
}
.markdown blockquote > p {
@apply mb-0;
}
/* Tables */
.markdown td,
.markdown th {
@apply px-2 py-1 border border-gray-400;
}
.markdown tr:nth-child(odd) {
@apply bg-gray-100;
}
.markdown table {
@apply mb-6;
}
/* Wrap any inline highlights `that are really long`, but don't modify
the setting for codeblocks (inside ```), which are rendered in as:
<pre><code>...
*/
.markdown :not(pre) > code.language-text {
white-space: pre-line;
}
/* purgecss end ignore */
src/templates/blogTemplate.js
+10 -9
View File
@@ -1,7 +1,8 @@
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 Layout from "../components/layout";
export default function Template({
data, // this prop will be injected by the GraphQL query below.
@@ -9,20 +10,20 @@ 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" /> */}
<div className="m-4 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>
)
}