From 8d4ac6d3941db095f7d6e08ec921c0cd0e0288ca Mon Sep 17 00:00:00 2001 From: Christine Yu Date: Wed, 7 Oct 2020 20:15:32 -0400 Subject: [PATCH 1/6] CustomizeOptions component --- src/components/addons.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/addons.js b/src/components/addons.js index a4d33df..5f54f99 100644 --- a/src/components/addons.js +++ b/src/components/addons.js @@ -5,6 +5,26 @@ import links from "../constants/page-links" import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation" import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"; +const CustomizeOptions = ({title, CustomizationOptions}) => { + const [open, setOpen] = useState(false) + const Icon = open ? XCircleIcon : ToolsIcon + + return ( + <> + + {open &&
+
{ title }
+
+
+ {CustomizationOptions} +
+
} + + ) +} + const AddonsItem = ({inputId, inputChecked, onInputChange, Icon, onIconClick, ...props}) => { return (
@@ -182,6 +202,7 @@ const Addons = props => { onInputChange={() => props.handleCheckChange("githubStats")} > display github profile stats card + test
}/> Date: Thu, 8 Oct 2020 20:27:31 -0400 Subject: [PATCH 2/6] Make customize box logic reusable by pulling up into AddonsItem and creating CustomizeOptions component --- src/components/addons.js | 112 ++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 59 deletions(-) diff --git a/src/components/addons.js b/src/components/addons.js index 5f54f99..ae7e5a5 100644 --- a/src/components/addons.js +++ b/src/components/addons.js @@ -5,55 +5,54 @@ import links from "../constants/page-links" import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation" import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"; -const CustomizeOptions = ({title, CustomizationOptions}) => { - const [open, setOpen] = useState(false) - const Icon = open ? XCircleIcon : ToolsIcon +const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick, ...props }) => { + const [open, setOpen] = useState(false); + const Icon = open ? XCircleIcon : ToolsIcon; return ( <> - - {open &&
-
{ title }
-
-
- {CustomizationOptions} -
-
} - - ) -} - -const AddonsItem = ({inputId, inputChecked, onInputChange, Icon, onIconClick, ...props}) => { - return ( -
- - { - Icon? - - :'' - } + )} +
+ {Options && open && Options} + + ); +}; + +const CustomizeOptions = ({ title, CustomizationOptions }) => ( +
+
{title}
+
+
+ {CustomizationOptions}
- ) -} +
+); + const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) => { return ( -
-
Customize Badge
-
-
+ <> + ) +} + const Addons = props => { const [debounce, setDebounce] = useState(undefined); const [badgeOptions, setBadgeOptions] = useState({ @@ -122,6 +146,10 @@ const Addons = props => { }) }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel]) + const [githubStatsOptions, setGithubStatsOptions] = useState({ + theme: "" + }); + const blogPostPorkflow = () => { let payload = { dev: { @@ -159,6 +187,13 @@ const Addons = props => { clearTimeout(debounce); setDebounce(setTimeout(callback, 300)); } + + const onStatsUpdate = (option, value) => { + const newStatsOptions = {...githubStatsOptions, [option]: value} + setGithubStatsOptions(newStatsOptions) + props.handleDataChange("githubStatsOptions", {target: {value: newStatsOptions}}) + } + return (
@@ -194,7 +229,14 @@ const Addons = props => { inputId="github-stats" inputChecked={props.data.githubStats} onInputChange={() => props.handleCheckChange("githubStats")} - Options={test
}/>} + Options={ + + } + /> + } > display github profile stats card diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js index 05b6070..c4eba86 100644 --- a/src/components/markdownPreview.js +++ b/src/components/markdownPreview.js @@ -267,12 +267,16 @@ const MarkdownPreview = props => { } return null } - const GitHubStatsPreview = props => { - let link = - "https://github-readme-stats.vercel.app/api?username=" + - props.github + - "&show_icons=true" - if (props.show) { + 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}` + + if (show) { return (
{props.github} @@ -352,6 +356,7 @@ const MarkdownPreview = props => {
diff --git a/src/pages/index.js b/src/pages/index.js index c4b3d0a..b6b295b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -63,6 +63,9 @@ const DEFAULT_DATA = { badgeLabel: "Profile views", githubProfileTrophy: false, githubStats: false, + githubStatsOptions: { + theme: "" + }, topLanguages: false, devDynamicBlogs: false, mediumDynamicBlogs: false, @@ -154,6 +157,7 @@ const IndexPage = () => { } const handleDataChange = (field, e) => { + debugger let change = { ...data } change[field] = e.target.value setData(change) From ff65cfbd8c741412beec11b3a5769aaa3597208e Mon Sep 17 00:00:00 2001 From: Christine Yu Date: Thu, 8 Oct 2020 21:25:28 -0400 Subject: [PATCH 4/6] add link-generators util --- src/components/addons.js | 6 ++++++ src/components/markdown.js | 10 ++++------ src/components/markdownPreview.js | 12 +++--------- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/addons.js b/src/components/addons.js index 0cc8fd4..06d05b2 100644 --- a/src/components/addons.js +++ b/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: { diff --git a/src/components/markdown.js b/src/components/markdown.js index 7fc96a7..faf3139 100644 --- a/src/components/markdown.js +++ b/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 ( <> - {`

 ${props.github}

`} + {`

 ${props.github}

`}

@@ -497,10 +495,10 @@ const Markdown = props => {
) } - export default Markdown diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js index c4eba86..ab62d8e 100644 --- a/src/components/markdownPreview.js +++ b/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 (
- {props.github} + {github}
) } From acaa15dacfd11a83dd432533988fa701a4ba48c9 Mon Sep 17 00:00:00 2001 From: Christine Yu Date: Thu, 8 Oct 2020 21:57:47 -0400 Subject: [PATCH 5/6] add all github stats options --- src/components/addons.js | 96 ++++++++++++++++++++++++++++-------- src/pages/index.js | 10 +++- src/utils/link-generators.js | 17 +++++++ 3 files changed, 101 insertions(+), 22 deletions(-) create mode 100644 src/utils/link-generators.js diff --git a/src/components/addons.js b/src/components/addons.js index 06d05b2..af66e53 100644 --- a/src/components/addons.js +++ b/src/components/addons.js @@ -108,25 +108,81 @@ const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) => { const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => { return ( - + <> + + + + + + + + ) } @@ -147,7 +203,7 @@ const Addons = props => { }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel]) const [githubStatsOptions, setGithubStatsOptions] = useState({ - theme: "" + ...props.data.githubStatsOptions, }); useEffect(() => { diff --git a/src/pages/index.js b/src/pages/index.js index b6b295b..74b88e7 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -64,7 +64,13 @@ const DEFAULT_DATA = { githubProfileTrophy: false, githubStats: false, githubStatsOptions: { - theme: "" + theme: "", + titleColor: "", + textColor: "", + bgColor: "", + hideBorder: false, + cacheSeconds: null, + locale: "en", }, topLanguages: false, devDynamicBlogs: false, @@ -459,7 +465,7 @@ const IndexPage = () => { setRestore("") } } - +console.log(data.githubStatsOptions) return (
diff --git a/src/utils/link-generators.js b/src/utils/link-generators.js new file mode 100644 index 0000000..a7fb9b9 --- /dev/null +++ b/src/utils/link-generators.js @@ -0,0 +1,17 @@ +export const githubStatsLinkGenerator = ({github, options, show}) => { + const params = { + username: github, + show_icons: true, + ...(options.theme && options.theme !== "none") && { theme: options.theme }, + ...options.titleColor && { "title_color": options.titleColor }, + ...options.textColor && { "text_color": options.textColor}, + ...options.bgColor && { "bg_color": options.bgColor}, + ...options.hideBorder && { "hide_border": options.hideBorder}, + ...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 link +} From a2d8a661a609edf0c63fdd72bd68017c1b1e5be0 Mon Sep 17 00:00:00 2001 From: Christine Yu Date: Thu, 8 Oct 2020 22:37:44 -0400 Subject: [PATCH 6/6] add top lang customize --- src/components/addons.js | 85 ++++++++++++++++++++----------- src/components/markdown.js | 18 +++---- src/components/markdownPreview.js | 15 +++--- src/pages/index.js | 11 +++- src/utils/link-generators.js | 13 +++-- 5 files changed, 84 insertions(+), 58 deletions(-) diff --git a/src/components/addons.js b/src/components/addons.js index af66e53..eb6d609 100644 --- a/src/components/addons.js +++ b/src/components/addons.js @@ -106,14 +106,13 @@ const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) => { ) } -const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => { - return ( +const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => <> -