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

[add]: GitHub streak stats

Author: rahuldkjain

.eslintrc.json

@@ -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
+}

.prettierrc

@@ -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

README.md

@@ -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",

package.json

@@ -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/addons.js

@@ -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/markdown.js

@@ -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/components/markdownPreview.js

@@ -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/markdown-pages/addons.md

@@ -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/pages/index.js

@@ -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)}`