add top lang customize

src/components/addons.js

@@ -106,14 +106,13 @@ const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
   )
 }
 
-const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => {
+const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
-  return (
     <>
-      <label htmlFor="github-stats-theme">Theme:&nbsp;
+      <label htmlFor={`${prefix}-theme`}>Theme:&nbsp;
         <select
-          id="github-stats-theme"
+          id={`${prefix}-theme`}
-          onChange={({target: { value }}) => onStatsUpdate("theme", value)}
+          onChange={({target: { value }}) => onUpdate("theme", value)}
-          value={githubStatsOptions.theme}
+          defaultValue={options.theme}
         >
           <option value="none">none</option>
           <option value="dark">Dark</option>
@@ -128,63 +127,63 @@ const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => {
           <option value="dracula">Dracula</option>
         </select>
       </label>
-      <label htmlFor="github-stats-title-color">Title Color:&nbsp;
+      <label htmlFor={`${prefix}-title-color`}>Title Color:&nbsp;
         <input
           type="color"
-          id="github-stats-title-color"
+          id={`${prefix}-title-color`}
-          defaultValue={`#${githubStatsOptions.titleColor}`}
+          defaultValue={`#${options.titleColor}`}
           className="w-6"
-          onChange={(e) => onStatsUpdate('titleColor', e.target.value.replace('#', ''))}
+          onChange={(e) => onUpdate('titleColor', e.target.value.replace('#', ''))}
         />
       </label>
-      <label htmlFor="github-stats-text-color">Text Color:&nbsp;
+      <label htmlFor={`${prefix}-text-color`}>Text Color:&nbsp;
         <input
           type="color"
-          id="github-stats-text-color"
+          id={`${prefix}-text-color`}
-          defaultValue={`#${githubStatsOptions.textColor}`}
+          defaultValue={`#${options.textColor}`}
           className="w-6"
-          onChange={(e) => onStatsUpdate('textColor', e.target.value.replace('#', ''))}
+          onChange={(e) => onUpdate('textColor', e.target.value.replace('#', ''))}
         />
       </label>
-      <label htmlFor="github-stats-bg-color">Background Color:&nbsp;
+      <label htmlFor={`${prefix}-bg-color`}>Background Color:&nbsp;
         <input
           type="color"
-          id="github-stats-bg-color"
+          id={`${prefix}-bg-color`}
-          defaultValue={`#${githubStatsOptions.bgColor}`}
+          defaultValue={`#${options.bgColor}`}
           className="w-6"
-          onChange={(e) => onStatsUpdate('bgColor', e.target.value.replace('#', ''))}
+          onChange={(e) => onUpdate('bgColor', e.target.value.replace('#', ''))}
         />
       </label>
-      <label htmlFor="github-stats-hide-border">Hide border:&nbsp;
+      <label htmlFor={`${prefix}-hide-border`}>Hide border:&nbsp;
         <input
-          id="github-stats-hide-border"
+          id={`${prefix}-hide-border`}
           type="checkbox"
-          checked={githubStatsOptions.hideBorder}
+          checked={options.hideBorder}
-          onChange={(e) => onStatsUpdate('hideBorder', e.target.checked)}
+          onChange={(e) => onUpdate('hideBorder', e.target.checked)}
         />
       </label>
-      <label htmlFor="github-stats-cache-seconds">Cache Seconds:&nbsp;
+      <label htmlFor={`${prefix}-cache-seconds`}>Cache Seconds:&nbsp;
         <input
-          id="github-stats-cache-seconds"
+          id={`${prefix}-cache-seconds`}
           type="number"
           min={1800}
           max={86400}
           placeholder={1800}
-          onChange={(e) => onStatsUpdate('cacheSeconds', e.target.value)}
+          defaultValue={options.cacheSeconds}
+          onChange={(e) => onUpdate('cacheSeconds', e.target.value)}
         />
       </label>
-      <label htmlFor="github-stats-locale">Locale:&nbsp;
+      <label htmlFor={`${prefix}-locale`}>Locale:&nbsp;
         <input
-          id="github-stats-locale"
+          id={`${prefix}-locale`}
           type="text"
           placeholder="en"
-          onChange={(e) => onStatsUpdate('locale', e.target.value)}
+          defaultValue={options.locale}
+          onChange={(e) => onUpdate('locale', e.target.value)}
           size="2"
         />
       </label>
     </>
-  )
-}
 
 const Addons = props => {
   const [debounce, setDebounce] = useState(undefined);
@@ -212,6 +211,16 @@ const Addons = props => {
     })
   }, [props.data.githubStatsOptions])
 
+  const [topLanguagesOptions, setTopLanguagesOptions] = useState({
+    ...props.data.topLanguagesOptions,
+  });
+
+  useEffect(() => {
+    setTopLanguagesOptions({
+      ...props.data.topLanguagesOptions
+    })
+  }, [props.data.topLanguagesOptions])
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {
@@ -256,6 +265,12 @@ const Addons = props => {
     props.handleDataChange("githubStatsOptions", {target: {value: newStatsOptions}})
   }
 
+  const onTopLangUpdate = (option, value) => {
+    const newLangOptions = {...topLanguagesOptions, [option]: value}
+    setTopLanguagesOptions(newLangOptions)
+    props.handleDataChange("topLanguagesOptions", {target: {value: newLangOptions}})
+  }
+
   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">
@@ -295,7 +310,7 @@ const Addons = props => {
           <CustomizeOptions
             title="Customize Github Stats Card"
             CustomizationOptions={
-          <CustomizeGithubStats githubStatsOptions={githubStatsOptions} onStatsUpdate={onStatsUpdate}/>
+          <CustomizeGithubStatsBase prefix="stats" options={githubStatsOptions} onUpdate={onStatsUpdate}/>
             }
           />
         }
@@ -306,6 +321,14 @@ const Addons = props => {
         inputId="top-languages"
         inputChecked={props.data.topLanguages}
         onInputChange={() => props.handleCheckChange("topLanguages")}
+        Options={
+          <CustomizeOptions
+            title="Customize Top Skills Card"
+            CustomizationOptions={
+            <CustomizeGithubStatsBase prefix="top-lang" options={topLanguagesOptions} onUpdate={onTopLangUpdate}/>
+            }
+          />
+        }
       >
         display top skills
       </AddonsItem>

src/components/markdown.js

@@ -1,8 +1,7 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator } from "../utils/link-generators"
+import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
-
 
 const Markdown = props => {
   const Title = props => {
@@ -125,11 +124,11 @@ const Markdown = props => {
     }
     return ""
   }
-  const GitHubStats = props => {
+  const GitHubStats = ({ show, github, options }) => {
-    if (props.show) {
+    if (show) {
       return (
         <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator(props)}" alt="${props.github}" /></p>`}
+          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({github: github, options})}" alt="${github}" /></p>`}
           <br />
           <br />
         </>
@@ -202,15 +201,11 @@ const Markdown = props => {
     return ""
   }
   const DisplayTopLanguages = props => {
-    let link =
-      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
-      props.github +
-      "&layout=compact"
     if (props.show) {
       if (!props.showStats) {
         return (
           <>
-            {`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}
+            {`<p><img align="center" src="${topLanguagesLinkGenerator({github: props.github, options: props.options})}" alt="${props.github}" /></p>`}
             <br />
             <br />
           </>
@@ -218,7 +213,7 @@ const Markdown = props => {
       }
       return (
         <>
-          {`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}
+          {`<p><img align="left" src="${topLanguagesLinkGenerator({github: props.github, options: props.options })}" alt="${props.github}" /></p>`}
           <br />
           <br />
         </>
@@ -489,6 +484,7 @@ const Markdown = props => {
           show={props.data.topLanguages}
           showStats={props.data.githubStats}
           github={props.social.github}
+          options={props.data.topLanguagesOptions}
         />
       </>
       <>

src/components/markdownPreview.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator } from "../utils/link-generators"
+import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
 
 const MarkdownPreview = props => {
   const TitlePreview = props => {
@@ -273,21 +273,17 @@ const MarkdownPreview = props => {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={githubStatsLinkGenerator({github, options, show})} alt={github} />
+          <img src={githubStatsLinkGenerator({github, options})} alt={github} />
         </div>
       )
     }
     return null
   }
-  const TopLanguagesPreview = props => {
+  const TopLanguagesPreview = ({github, options, show})=> {
-    let link =
+    if (show) {
-      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
-      props.github +
-      "&layout=compact"
-    if (props.show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={link} alt={props.github} />
+          <img src={topLanguagesLinkGenerator({github, options})} alt={props.github} />
         </div>
       )
     }
@@ -346,6 +342,7 @@ const MarkdownPreview = props => {
         <TopLanguagesPreview
           show={props.data.topLanguages}
           github={props.social.github}
+          options={props.data.topLanguagesOptions}
         />
         <GitHubStatsPreview
           show={props.data.githubStats}

src/pages/index.js

@@ -73,6 +73,15 @@ const DEFAULT_DATA = {
     locale: "en",
   },
   topLanguages: false,
+  topLanguagesOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
   devDynamicBlogs: false,
   mediumDynamicBlogs: false,
   rssDynamicBlogs: false,
@@ -163,7 +172,6 @@ const IndexPage = () => {
   }
 
   const handleDataChange = (field, e) => {
-    debugger
     let change = { ...data }
     change[field] = e.target.value
     setData(change)
@@ -465,7 +473,6 @@ const IndexPage = () => {
       setRestore("")
     }
   }
-console.log(data.githubStatsOptions)
   return (
     <Layout>
       <div className="m-4 sm:p-4">

src/utils/link-generators.js

@@ -1,6 +1,5 @@
-export const githubStatsLinkGenerator = ({github, options, show}) => {
+const githubStatsStylingQueryString = options => {
   const params = {
-    username: github,
     show_icons: true,
     ...(options.theme && options.theme !== "none") && { theme: options.theme },
     ...options.titleColor && { "title_color": options.titleColor },
@@ -10,8 +9,12 @@ export const githubStatsLinkGenerator = ({github, options, show}) => {
     ...options.cacheSeconds && { "cache_seconds": options.cacheSeconds},
     ...options.locale && { "locale": options.locale},
   }
-  console.log(params);
   const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
-  const link = `https://github-readme-stats.vercel.app/api?${query_string}`
+  return query_string
-  return link
 }
+
+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`