Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed the colored-icon issue #170

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,31 +142,31 @@ export const iconData = {
editors: [
{
name: "VS Code",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/visualstudiocode.svg",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/visualstudiocode-colored.svg",
iTag: "visualstudiocode",
link: "https://code.visualstudio.com/",
},
{
name: "Vim",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vim.svg",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/vim-colored.svg",
iTag: "vim",
link: "https://www.vim.org/",
},
{
name: "Neovim",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/neovim.svg",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/neovim-colored.svg",
iTag: "neovim",
link: "https://neovim.io/",
},
{
name: "Sublime Text",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/sublimetext.svg",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/sublimetext-colored.svg",
iTag: "sublimetext",
link: "https://www.sublimetext.com/index2",
},
{
name: "XCode",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/xcode.svg",
path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/xcode-colored.svg",
iTag: "xcode",
link: "https://www.xcode.com",
},
Expand Down
98 changes: 65 additions & 33 deletions pages/create-profile.js
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export default function CreateProfile() {
});
};

const handleIconToggle = (iconCategory, iconObj, i) => {
const handleIconToggle = (iconCategory, iconObj) => {
const currentIndex = Object.keys(state.skills).reduce(
(length, iconCategory) => length + state.skills[iconCategory].length,
0
Expand Down Expand Up @@ -343,7 +343,8 @@ export default function CreateProfile() {
<section
className={`input-column-wrapper ${
state.sidebarOpen ? "ml-0 md:ml-64 " : ""
}`}>
}`}
>
{/* Section Displays */}
{state.section === "introduction" ? (
<Introduction ref={introductionAnchorRef} />
Expand Down Expand Up @@ -379,23 +380,27 @@ export default function CreateProfile() {
}}
className={`btn-sm ${
state.renderMode === "preview" ? "btn-brand" : "btn-gray"
}`}>
}`}
>
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
></path>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
></path>
</svg>
Preview
</button>
Expand All @@ -410,18 +415,21 @@ export default function CreateProfile() {
}}
className={`btn-sm mr-auto ${
state.renderMode === "markdown" ? "btn-brand" : "btn-gray"
}`}>
}`}
>
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
d="M19 14l-7 7m0 0l-7-7m7 7V3"
></path>
</svg>
Markdown
</button>
Expand All @@ -440,12 +448,14 @@ export default function CreateProfile() {
type: ACTIONS.TOGGLE_COPY_MODAL,
payload: true,
});
}}>
}}
>
<svg
className="w-4 h-4 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
Expand All @@ -458,7 +468,8 @@ export default function CreateProfile() {
id="preview-container"
className={`${
state.renderMode === "preview" ? "relative" : "hidden"
}`}>
}`}
>
{/* Introduce Section Preview */}
<div
ref={introductionRef}
Expand All @@ -478,7 +489,8 @@ export default function CreateProfile() {
state.introduction.additionalInfo
? "mb-4"
: ""
}`}>
}`}
>
{!state.introduction.name ? null : (
<div>
{state.introduction.animatedHand == 0 && (
Expand Down Expand Up @@ -525,7 +537,8 @@ export default function CreateProfile() {
state.introduction.additionalInfo
? "mt-4 "
: ""
}list-disc list-inside`}>
}list-disc list-inside`}
>
{state.introduction.location ? (
<li>
🌍&nbsp; I&apos;m based in {state.introduction.location}
Expand All @@ -538,7 +551,8 @@ export default function CreateProfile() {
<a
href={`http://${state.introduction.portfolioLink}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
{state.introduction.portfolioTitle}
</a>
</li>
Expand All @@ -558,7 +572,8 @@ export default function CreateProfile() {
<a
href={`http://${state.introduction.workingOnLink}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
{state.introduction.workingOnTitle}
</a>
</li>
Expand Down Expand Up @@ -587,7 +602,8 @@ export default function CreateProfile() {
state.badges.twitterFollowers.selected
? "mb-4"
: "mb-0"
}`}>
}`}
>
{state.badges.githubFollowers.selected ? (
<img
src={`https://img.shields.io/github/followers/${state.socials.github.linkSuffix}?logo=github&style=for-the-badge&color=${state.badges.cardStyle.iconColor}&labelColor=${state.badges.cardStyle.bgColor}`}
Expand Down Expand Up @@ -640,7 +656,8 @@ export default function CreateProfile() {
state.skills.other.length < 1
? "mb-0"
: "mb-4"
}`}>
}`}
>
{/* Icons Display */}
{Object.values(state.skills).some((arr) => arr.length > 0) ? (
<div className="flex gap-x-1.5 flex-wrap gap-y-1.5">
Expand All @@ -652,7 +669,8 @@ export default function CreateProfile() {
<a
href={`${icon.link}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
{icon.darkPath ? (
<img
src={
Expand Down Expand Up @@ -690,7 +708,8 @@ export default function CreateProfile() {
ref={socialsRef}
className={`flex flex-wrap gap-x-2 gap-y-2 ${
socialsShowing ? "mb-4" : ""
}`}>
}`}
>
{Object.entries(state.socials).map((profile) => {
return profile[1].linkSuffix ? (
<a
Expand All @@ -701,7 +720,8 @@ export default function CreateProfile() {
profile[1].linkSuffixTwo
? `${profile[1].linkSuffixTwo}`
: ""
}`}>
}`}
>
<img
height="32"
width="32"
Expand All @@ -725,7 +745,8 @@ export default function CreateProfile() {
{/* Badges Section Preview */}
<div
ref={badgesRef}
className="flex flex-col items-start gap-x-2 gap-y-2">
className="flex flex-col items-start gap-x-2 gap-y-2"
>
{state.badges.githubStatsCard.selected ||
state.badges.githubCommitsGraph.selected ||
state.badges.githubStreak.selected ||
Expand All @@ -737,7 +758,8 @@ export default function CreateProfile() {
<a
href={`http://www.github.com/${state.socials.github.linkSuffix}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api?username=${
state.socials.github.linkSuffix
Expand Down Expand Up @@ -765,7 +787,8 @@ export default function CreateProfile() {
<a
href={`http://www.github.com/${state.socials.github.linkSuffix}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-streak-stats.herokuapp.com/?user=${state.socials.github.linkSuffix}&stroke=${state.badges.cardStyle.textColor}&background=${state.badges.cardStyle.bgColor}&ring=${state.badges.cardStyle.titleColor}&fire=${state.badges.cardStyle.titleColor}&currStreakNum=${state.badges.cardStyle.textColor}&currStreakLabel=${state.badges.cardStyle.titleColor}&sideNums=${state.badges.cardStyle.textColor}&sideLabels=${state.badges.cardStyle.textColor}&dates=${state.badges.cardStyle.textColor}&hide_border=true`}
className="object-scale-down"
Expand All @@ -777,7 +800,8 @@ export default function CreateProfile() {
<a
href={`http://www.github.com/${state.socials.github.linkSuffix}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-activity-graph.cyclic.app/graph?username=${state.socials.github.linkSuffix}&bg_color=${state.badges.cardStyle.bgColor}&color=${state.badges.cardStyle.textColor}&line=${state.badges.cardStyle.iconColor}&point=${state.badges.cardStyle.textColor}&area_color=${state.badges.cardStyle.bgColor}&area=true&hide_border=true&custom_title=GitHub%20Commits%20Graph`}
/>
Expand All @@ -788,7 +812,8 @@ export default function CreateProfile() {
<a
href={`http://www.github.com/${state.socials.github.linkSuffix}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api/top-langs/?username=danielcranney&langs_count=10&title_color=${state.badges.cardStyle.titleColor}&text_color=${state.badges.cardStyle.textColor}&icon_color=${state.badges.cardStyle.iconColor}&bg_color=${state.badges.cardStyle.bgColor}&hide_border=true&locale=en&custom_title=Top%20%Languages`}
/>
Expand All @@ -804,7 +829,8 @@ export default function CreateProfile() {
<a
href={`https://www.github.com/${state.socials.github.linkSuffix}/${state.badges.reposCard.repoOne}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api/pin/?username=${state.socials.github.linkSuffix}&repo=${state.badges.reposCard.repoOne}&title_color=${state.badges.cardStyle.titleColor}&text_color=${state.badges.cardStyle.textColor}&icon_color=${state.badges.cardStyle.iconColor}&bg_color=${state.badges.cardStyle.bgColor}&hide_border=true&locale=en`}
/>
Expand All @@ -819,7 +845,8 @@ export default function CreateProfile() {
<a
href={`https://www.github.com/${state.socials.github.linkSuffix}/${state.badges.reposCard.repoTwo}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api/pin/?username=${state.socials.github.linkSuffix}&repo=${state.badges.reposCard.repoTwo}&title_color=${state.badges.cardStyle.titleColor}&text_color=${state.badges.cardStyle.textColor}&icon_color=${state.badges.cardStyle.iconColor}&bg_color=${state.badges.cardStyle.bgColor}&hide_border=true&locale=en`}
/>
Expand All @@ -830,7 +857,8 @@ export default function CreateProfile() {
<a
href={`https://www.github.com/${state.socials.github.linkSuffix}/${state.badges.reposCard.repoThree}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api/pin/?username=${state.socials.github.linkSuffix}&repo=${state.badges.reposCard.repoThree}&title_color=${state.badges.cardStyle.titleColor}&text_color=${state.badges.cardStyle.textColor}&icon_color=${state.badges.cardStyle.iconColor}&bg_color=${state.badges.cardStyle.bgColor}&hide_border=true&locale=en`}
/>
Expand All @@ -841,7 +869,8 @@ export default function CreateProfile() {
<a
href={`https://www.github.com/${state.socials.github.linkSuffix}/${state.badges.reposCard.repoFour}`}
target="_blank"
rel="noreferrer">
rel="noreferrer"
>
<img
src={`https://github-readme-stats.vercel.app/api/pin/?username=${state.socials.github.linkSuffix}&repo=${state.badges.reposCard.repoFour}&title_color=${state.badges.cardStyle.titleColor}&text_color=${state.badges.cardStyle.textColor}&icon_color=${state.badges.cardStyle.iconColor}&bg_color=${state.badges.cardStyle.bgColor}&hide_border=true&locale=en`}
/>
Expand All @@ -856,7 +885,8 @@ export default function CreateProfile() {
ref={supportRef}
className={`flex flex-col gap-x-2 gap-y-2 ${
!!withSupport ? "mt-4" : ""
}`}>
}`}
>
{!!withSupport && (
<>
<h3>Support</h3>
Expand All @@ -866,7 +896,8 @@ export default function CreateProfile() {
value && value.linkSuffix ? (
<li
className="inline-block p-1"
key={assembleSupportLink(key)}>
key={assembleSupportLink(key)}
>
<a href={assembleSupportLink(key)}>
<img
src={getSupportPreviewIMG(key, value)}
Expand All @@ -889,7 +920,8 @@ export default function CreateProfile() {
ref={markdownRef}
className={`${
state.renderMode === "markdown" ? "relative" : "hidden"
}`}>
}`}
>
{!renderedMarkdown ? (
<div>You have not rendered any code yet</div>
) : (
Expand Down