From 8a1fe3e7faa2eb1b2423bf6711178eef8f2f8214 Mon Sep 17 00:00:00 2001 From: Marc Date: Mon, 2 Jun 2025 17:37:00 +0200 Subject: [PATCH 1/2] fix(card): add Gradient Style Option --- src/components/ProfileCard.tsx | 12 ++++++++---- src/utils/extractSearchParams.ts | 1 + src/utils/parameters.ts | 12 ++++++++++++ 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index e9629aa..9531bf8 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -37,6 +37,7 @@ export const ProfileCard: React.FC = ({ showDisplayName, theme = "dark", bg, + gradient, clanBackgroundColor, borderRadius = "10px", idleMessage = "I'm not currently doing anything!", @@ -53,9 +54,12 @@ export const ProfileCard: React.FC = ({ } = images; let avatarBorderColor: string = "#747F8D"; - const backgroundColor: string = - bg ?? (theme === "light" ? "ededed" : "1a1c1f"); - + let backgroundColor, background: string; + if (bg) backgroundColor = bg; + else + backgroundColor = theme === "light" ? "ededed" : "1a1c1f"; // Default background color based on theme + if (gradient) background = gradient; + else background = `#${backgroundColor}`; switch (data.discord_status) { case "online": avatarBorderColor = "#43B581"; @@ -139,7 +143,7 @@ export const ProfileCard: React.FC = ({ width: "400px", height: `${divHeight}px`, inset: 0, - backgroundColor: `#${backgroundColor}`, + background: background, color: theme === "dark" ? "#fff" : "#000", fontFamily: `'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`, fontSize: "16px", diff --git a/src/utils/extractSearchParams.ts b/src/utils/extractSearchParams.ts index feb192b..b8dd75a 100644 --- a/src/utils/extractSearchParams.ts +++ b/src/utils/extractSearchParams.ts @@ -63,6 +63,7 @@ export function extractSearchParams( optimized, theme: params.theme, bg: params.bg, + gradient: params.gradient, clanBackgroundColor: params.clanBackgroundColor ?? clanBackgroundColor, borderRadius: params.borderRadius, idleMessage: params.idleMessage, diff --git a/src/utils/parameters.ts b/src/utils/parameters.ts index 69834af..eef2fcb 100644 --- a/src/utils/parameters.ts +++ b/src/utils/parameters.ts @@ -1,6 +1,7 @@ export type ProfileSettings = { theme?: string; bg?: string; + gradient?: string; clanBackgroundColor?: string; animated?: boolean; animatedDecoration?: boolean; @@ -23,6 +24,7 @@ export type ProfileSettings = { export type SearchParams = { theme?: string; bg?: "dark" | "light" | string; + gradient?: string; clanBackgroundColor?: string; animated?: string; animatedDecoration?: string; @@ -105,6 +107,16 @@ export const PARAMETER_INFO: IParameterInfo = [ omit: ["#"], }, }, + { + parameter: "gradient", + type: "string", + title: "Gradient Background", + description: + "Changes the background to a gradient. Follows the CSS spec.", + options: { + placeholder: "linear-gradient(45deg, #ff0000, #0000ff)", + }, + }, { parameter: "borderRadius", type: "string", From de00e91b06f2abe7ee638cbd224df88dcd0a0a7e Mon Sep 17 00:00:00 2001 From: Marc Date: Thu, 11 Sep 2025 10:02:25 +0200 Subject: [PATCH 2/2] refactor(card): remove aditional gradient option - add function to check if hex code - add handling for hex with/without # - support for all background option that are url encoded --- src/components/ProfileCard.tsx | 79 +++++++++++++++++++------------- src/utils/extractSearchParams.ts | 1 - src/utils/parameters.ts | 17 +------ 3 files changed, 48 insertions(+), 49 deletions(-) diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index 9531bf8..e1ba8de 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -18,11 +18,15 @@ interface ProfileCardProps { }; } +function isHexColor(value: string) { + return /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(value.trim()); +} + export const ProfileCard: React.FC = ({ - settings, - data, - images, -}: ProfileCardProps) => { + settings, + data, + images, + }: ProfileCardProps) => { const { hideStatus, hideTimestamp, @@ -37,7 +41,6 @@ export const ProfileCard: React.FC = ({ showDisplayName, theme = "dark", bg, - gradient, clanBackgroundColor, borderRadius = "10px", idleMessage = "I'm not currently doing anything!", @@ -55,11 +58,21 @@ export const ProfileCard: React.FC = ({ let avatarBorderColor: string = "#747F8D"; let backgroundColor, background: string; - if (bg) backgroundColor = bg; - else - backgroundColor = theme === "light" ? "ededed" : "1a1c1f"; // Default background color based on theme - if (gradient) background = gradient; - else background = `#${backgroundColor}`; + if (bg) { + if (isHexColor(bg)) { + backgroundColor = bg.startsWith('#') ? bg : `#${bg}`; + background = bg.startsWith('#') ? bg : `#${bg}`; + } + else { + background = bg; + backgroundColor = theme === "light" ? "ededed" : "1a1c1f"; + } + } + else { + backgroundColor = theme === "light" ? "ededed" : "1a1c1f"; + background = theme === "light" ? "ededed" : "1a1c1f"; + } // Default background color based on theme + switch (data.discord_status) { case "online": avatarBorderColor = "#43B581"; @@ -169,10 +182,10 @@ export const ProfileCard: React.FC = ({ !data.listening_to_spotify) ? "none" : `solid 0.5px ${ - theme === "dark" - ? "hsl(0, 0%, 100%, 10%)" - : "hsl(0, 0%, 0%, 10%)" - }`, + theme === "dark" + ? "hsl(0, 0%, 100%, 10%)" + : "hsl(0, 0%, 0%, 10%)" + }`, }} >
= ({ {!!hideBadges ? null : flags.map((v) => ( - {v} - ))} + {v} + ))}
{showDisplayName ? ( @@ -369,12 +382,12 @@ export const ProfileCard: React.FC = ({ !userStatus.emoji.id ? `${userStatus.emoji.name} ${userStatus.state}` : userStatus.state - ? userStatus.state - : !userStatus.state && + ? userStatus.state + : !userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id - ? userStatus.emoji.name - : null} + ? userStatus.emoji.name + : null}

) : null} @@ -520,7 +533,7 @@ export const ProfileCard: React.FC = ({ !activity && !hideSpotify && data.activities[Object.keys(data.activities).length - 1].type === - 2 ? ( + 2 ? (
spec.", - options: { - placeholder: "linear-gradient(45deg, #ff0000, #0000ff)", + placeholder: "1A1C1F/#1A1C1F/rgb(26,28,31)/rgba(26,28,31,0.5)/linear-gradient(45deg, #ff0000, #0000ff)" }, }, {