add link-generators util

src/components/addons.js

@@ -150,6 +150,12 @@ const Addons = props => {
     theme: ""
   });
 
+  useEffect(() => {
+    setGithubStatsOptions({
+      ...props.data.githubStatsOptions
+    })
+  }, [props.data.githubStatsOptions])
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {

src/components/markdown.js

@@ -1,6 +1,8 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
 import { icons, skills, skillWebsites } from "../constants/skills"
+import { githubStatsLinkGenerator } from "../utils/link-generators"
+
 
 const Markdown = props => {
   const Title = props => {
@@ -124,14 +126,10 @@ const Markdown = props => {
     return ""
   }
   const GitHubStats = props => {
-    let link =
-      "https://github-readme-stats.vercel.app/api?username=" +
-      props.github +
-      "&show_icons=true"
     if (props.show) {
       return (
         <>
-          {`<p>&nbsp;<img align="center" src="${link}" alt="${props.github}" /></p>`}
+          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator(props)}" alt="${props.github}" /></p>`}
           <br />
           <br />
         </>
@@ -497,10 +495,10 @@ const Markdown = props => {
         <GitHubStats
           show={props.data.githubStats}
           github={props.social.github}
+          options={props.data.githubStatsOptions}
         />
       </>
     </div>
   )
 }
-
 export default Markdown

src/components/markdownPreview.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { icons, skills, skillWebsites } from "../constants/skills"
+import { githubStatsLinkGenerator } from "../utils/link-generators"
 
 const MarkdownPreview = props => {
   const TitlePreview = props => {
@@ -267,19 +268,12 @@ const MarkdownPreview = props => {
     }
     return null
   }
-  const GitHubStatsPreview = ({github, options, show })=> {
-    const params = {
-      username: github,
-      show_icons: true,
-      ...options.theme && { theme: options.theme }
-    }
-    const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
-    const link = `https://github-readme-stats.vercel.app/api?${query_string}`
 
+  const GitHubStatsPreview = ({github, options, show })=> {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={link} alt={props.github} />
+          <img src={githubStatsLinkGenerator({github, options, show})} alt={github} />
         </div>
       )
     }