aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add top lang customize

Browse Source
This commit is contained in:
Christine Yu
2020-10-08 22:37:44 -04:00
parent acaa15dacf
commit a2d8a661a6
5 changed files with 84 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/addons.js
+54 -31
View File
@@ -106,14 +106,13 @@ const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) => {
)
}
const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => {
return (
const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
<>
<label htmlFor="github-stats-theme">Theme:&nbsp;
<label htmlFor={`${prefix}-theme`}>Theme:&nbsp;
<select
id="github-stats-theme"
onChange={({target: { value }}) => onStatsUpdate("theme", value)}
value={githubStatsOptions.theme}
id={`${prefix}-theme`}
onChange={({target: { value }}) => onUpdate("theme", value)}
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"
defaultValue={`#${githubStatsOptions.titleColor}`}
id={`${prefix}-title-color`}
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"
defaultValue={`#${githubStatsOptions.textColor}`}
id={`${prefix}-text-color`}
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"
defaultValue={`#${githubStatsOptions.bgColor}`}
id={`${prefix}-bg-color`}
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}
onChange={(e) => onStatsUpdate('hideBorder', e.target.checked)}
checked={options.hideBorder}
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
+7 -11
View File
@@ -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 => {
if (props.show) {
const GitHubStats = ({ show, github, options }) => {
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
+6 -9
View File
@@ -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 => {
let link =
"https://github-readme-stats.vercel.app/api/top-langs/?username=" +
props.github +
"&layout=compact"
if (props.show) {
const TopLanguagesPreview = ({github, options, show})=> {
if (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
+9 -2
View File
@@ -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
+8 -5
View File
@@ -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 link
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`