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

Merge pull request #325 from DenverCoderOne/add-github-streak-stats

Browse Source 
[add]: GitHub streak stats
This commit is contained in:
Rahul Jain
2020-11-29 12:46:17 +05:30
committed by GitHub
parent 4ffebfb792 c7c7e1c357
commit d9469f4eda
10 changed files with 127 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.json
-26
View File
@@ -1,26 +0,0 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"import"
],
"rules": {
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]}
]}
}
.prettierrc
+2 -21
View File
@@ -1,23 +1,4 @@
{
"arrowParens": "avoid",
"bracketSpacing": false,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"jsxBracketSameLine": false,
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
]
}
"semi": false
}
README.md
+3
View File
@@ -76,6 +76,8 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C
- **GitHub Top Skills**
- **GitHub Streak Stats**
- **Dynamic Dev(.)to Blogs** (GitHub Action)
- **Dynamic Medium Blogs** (GitHub Action)
@@ -132,6 +134,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
- [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
- [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
- [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
- [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
- [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
## 🙇 Sponsors
package.json
-4
View File
@@ -30,8 +30,6 @@
"devDependencies": {
"babel-jest": "26.3.0",
"babel-preset-gatsby": "0.5.11",
"eslint": "^7.12.1",
"eslint-plugin-react": "^7.21.5",
"gatsby-plugin-postcss": "^2.3.11",
"gatsby-plugin-purgecss": "^5.0.0",
"gatsby-plugin-twitter": "^2.3.10",
@@ -50,8 +48,6 @@
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
src/components/addons.js
+48
View File
@@ -186,6 +186,23 @@ const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
</label>
</>
const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
<>
<label htmlFor={`${prefix}-theme`}>
Theme:&nbsp;
<select
id={`${prefix}-theme`}
onChange={({ target: { value } }) => onUpdate("theme", value)}
defaultValue={options.theme}
>
<option value="default">default</option>
<option value="dark">dark</option>
<option value="highcontrast">highcontrast</option>
</select>
</label>
</>
)
const Addons = props => {
const [debounce, setDebounce] = useState(undefined);
const [badgeOptions, setBadgeOptions] = useState({
@@ -222,6 +239,16 @@ const Addons = props => {
})
}, [props.data.topLanguagesOptions])
const [streakStatsOptions, setStreakStatsOptions] = useState({
...props.data.streakStatsOptions,
});
useEffect(() => {
setStreakStatsOptions({
...props.data.streakStatsOptions
})
}, [props.data.streakStatsOptions])
const blogPostPorkflow = () => {
let payload = {
dev: {
@@ -272,6 +299,12 @@ const Addons = props => {
props.handleDataChange("topLanguagesOptions", {target: {value: newLangOptions}})
}
const onStreakStatsUpdate = (option, value) => {
const newStreakStatsOptions = {...streakStatsOptions, [option]: value}
setStreakStatsOptions(newStreakStatsOptions)
props.handleDataChange("streakStatsOptions", {target: {value: newStreakStatsOptions}})
}
return (
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
@@ -333,6 +366,21 @@ const Addons = props => {
>
display top skills
</AddonsItem>
<AddonsItem
inputId="streak-stats"
inputChecked={props.data.streakStats}
onInputChange={() => props.handleCheckChange("streakStats")}
Options={
<CustomizeOptions
title="Customize Streak Stats Card"
CustomizationOptions={
<CustomizeStreakStats prefix="streak-stats" options={streakStatsOptions} onUpdate={onStreakStatsUpdate}/>
}
/>
}
>
display streak stats
</AddonsItem>
<AddonsItem
inputId="twitter-badge"
inputChecked={props.data.twitterBadge}
src/components/markdown.js
+23 -1
View File
@@ -4,6 +4,7 @@ import { icons, skills, skillWebsites } from "../constants/skills"
import {
githubStatsLinkGenerator,
topLanguagesLinkGenerator,
streakStatsLinkGenerator
} from "../utils/link-generators"
const Markdown = props => {
@@ -238,7 +239,21 @@ const Markdown = props => {
}
return ""
}
const DisplayStreakStats = props => {
if (props.show) {
return (
<>
{`<p><img align="center" src="${streakStatsLinkGenerator({
github: props.github,
options: props.options,
})}" alt="${props.github}" /></p>`}
<br />
<br />
</>
)
}
return ""
}
return (
<div id="markdown-content" className="break-words">
<>
@@ -524,6 +539,13 @@ const Markdown = props => {
options={props.data.githubStatsOptions}
/>
</>
<>
<DisplayStreakStats
show={props.data.streakStats}
github={props.social.github}
options={props.data.streakStatsOptions}
/>
</>
</div>
)
}
src/components/markdownPreview.js
+20
View File
@@ -3,6 +3,7 @@ import { icons, skills, skillWebsites } from "../constants/skills"
import {
githubStatsLinkGenerator,
topLanguagesLinkGenerator,
streakStatsLinkGenerator
} from "../utils/link-generators"
export const TitlePreview = props => {
@@ -322,6 +323,20 @@ export const TopLanguagesPreview = ({ github, options, show }) => {
return <div className="text-center mx-4 mb-4"> &nbsp;</div>
}
export const StreakStatsPreview = ({ github, options, show }) => {
if (show) {
return (
<div className="text-center mx-4 mb-4">
<img
src={streakStatsLinkGenerator({ github, options })}
alt={github}
/>
</div>
)
}
return null
}
export const SkillsPreview = props => {
var listSkills = []
skills.forEach(skill => {
@@ -385,6 +400,11 @@ const MarkdownPreview = props => {
github={props.social.github}
options={props.data.githubStatsOptions}
/>
<StreakStatsPreview
show={props.data.streakStats}
github={props.social.github}
options={props.data.streakStatsOptions}
/>
</div>
</div>
)
src/markdown-pages/addons.md
+12
View File
@@ -28,6 +28,18 @@ You can customize the theme too. See how to customize yours [here](https://githu
<br/>
## [GitHub Readme Streak Stats](https://github.com/DenverCoder1/github-readme-streak-stats)
Stay motivated while contributing to open source by displaying your current contribution streak
![rahuldkjain](https://github-readme-streak-stats.herokuapp.com/?user=rahuldkjain)
Developed by by [Jonah Lawrence](https://github.com/DenverCoder1).
See how to customize the theme [here](https://github.com/DenverCoder1/github-readme-streak-stats)
<br/>
## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)
It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
src/pages/index.js
+8 -2
View File
@@ -81,6 +81,10 @@ const DEFAULT_DATA = {
cacheSeconds: null,
locale: "en",
},
streakStats: false,
streakStatsOptions: {
theme: "",
},
devDynamicBlogs: false,
mediumDynamicBlogs: false,
rssDynamicBlogs: false,
@@ -253,7 +257,8 @@ const IndexPage = () => {
data.visitorsBadge ||
data.githubProfileTrophy ||
data.githubStats ||
data.topLanguages
data.topLanguages ||
data.streakStats
) {
if (social.github && isGitHubUsernameValid(social.github)) {
generate()
@@ -520,7 +525,8 @@ const IndexPage = () => {
{(data.visitorsBadge ||
data.githubProfileTrophy ||
data.githubStats ||
data.topLanguages) &&
data.topLanguages ||
data.streakStats) &&
!social.github ? (
<div className="warning">
* Please add github username to use these add-ons
src/utils/link-generators.js
+11
View File
@@ -13,8 +13,19 @@ const githubStatsStylingQueryString = options => {
return query_string
}
const streakStatsStylingQueryString = options => {
const params = {
...(options.theme && options.theme !== "none") && { theme: options.theme },
}
const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
return query_string
}
export const githubStatsLinkGenerator = ({github, options}) =>
`https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`
export const topLanguagesLinkGenerator = ({github, options}) =>
`https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
export const streakStatsLinkGenerator = ({github, options}) =>
`https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`