Add GitHub Streak Stats

Author: DenverCoder1

package-lock.json

@@ -221,6 +221,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: {
@@ -271,6 +281,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">
@@ -332,6 +348,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={
+            <CustomizeGithubStatsBase 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 => {
@@ -146,6 +147,21 @@ const Markdown = props => {
     }
     return ""
   }
+  const DisplayStreakStats = ({ show, github, options }) => {
+    if (show) {
+      return (
+        <>
+          {`<p>&nbsp;<img align="center" src="${streakStatsLinkGenerator({
+            github: github,
+            options,
+          })}" alt="${github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const isSocial = social => {
     return (
       social.dev ||
@@ -523,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"
 
 const MarkdownPreview = props => {
@@ -299,6 +300,19 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  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
+  }
   const TopLanguagesPreview = ({ github, options, show }) => {
     if (show) {
       return (
@@ -372,6 +386,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

@@ -18,3 +18,6 @@ export const githubStatsLinkGenerator = ({github, options}) =>
 
 export const topLanguagesLinkGenerator = ({github, options}) =>
  `https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
+
+export const githubStreakLinkGenerator = ({github, options}) =>
+ `https://github-readme-streak-stats.herokuapp.com/?user=${github}`