feat: Add gradient style option

[TheGameProfi]

This pull request enhances the renderCard function in src/utils/renderCard.tsx by introducing support for gradient backgrounds and improving background handling. The changes include updating logic for background assignment, adding support for all other background options alongside gradient options, and modifying the card's styling to use the new background property.

Enhancements to background handling:

• Introduced a background variable in renderCard to handle both solid color and gradient backgrounds.
• Modified the card's inline styles to use the background property instead of backgroundColor.
• Updating bg option to support either hex code with and without # and usage of any other background css option

See following Issue => #69

[vercel]

@TheGameProfi is attempting to deploy a commit to the Conrad's projects Team on Vercel.

A member of the Team first needs to authorize it.

[TheGameProfi]

Hey,
just updated the Code so it has the latest changes included 😄

[cnrad]

Sorry for the delay - here's what I think would work best, and it's a little tricky since we need to avoid using hashes:

Let's keep the background parameter and not worry about adding another parameter for gradient - rather, it can use the background value as given. That is, you could have ?background=2500dc or ?background=linear-gradient(45deg,f00,0f0) and it will work both ways. If the length of the background parameter is 3 or 6 (for pure hex codes), append a # to the beginning if it is. If not, split by comma and then run the same check (length is 3 or 6) and append the # if necessary. With this method, they should be able to use rgb or rgba as well, just without the commas.

After all that, if you don't mind updating the readme to be in line with this too, that'd be great. Make sure to specify that hex codes should be used without the #

[TheGameProfi]

Hey there, no worries at all and thanks again for the detailed input!

I see where you're coming from, and I agree that supporting both plain hex and gradients through a single background parameter can be convenient. That said, I’m personally not a big fan of auto-appending the # to hex values, especially because handling that inside linear-gradient() gets tricky. The gradient syntax allows for a lot of variation, and reliably parsing and modifying it to prepend # could easily lead to edge cases or unexpected behavior.

I also wanted to explain why I originally kept the parameters separate:
The color of the border around the online status also uses the background parameter. If we unify everything under this one parameter, we lose the ability to have both a gradient background and a separate custom color for the online status border, since gradients can’t be applied to borders. In that case, we’d probably also need to implement a fallback or validation step to avoid errors if a gradient gets mistakenly applied to the border.

All in all, I think your current direction works well, I just wanted to share the reasoning behind the original design choices in case it helps clarify things!

[cnrad]

The gradient syntax allows for a lot of variation, and reliably parsing and modifying it to prepend # could easily lead to edge cases or unexpected behavior.

Could you list some examples of edge cases? My current idea is this:

• parse for linear-gradient( and )
• whatever is enclosed, split by comma
• check the length of each segment and if it's 3 or 6, append the #
• join back together

As of now, I don't see how that could really go wrong (assuming users will follow the README for syntax - if they don't, skill issue). Either way, your original code doesn't handle hashes, so the styling will break for anything after the gradient in the query params anyways. I wish things were as easy as they seem

The color of the border around the online status also uses the background parameter

This is a good point that I forgot about completely - however, there are ways to create a mask around elements to let the background naturally act as a border, see this demo. This is probably a bit complex though, so it's understandable if you don't want to tackle that

Let me know your thoughts on all of this

[TheGameProfi]

I currently know of two cases off the top of my head that would need a bit of special handling:

• linear-gradient(145deg, 103204 10%, 10%, blue)

  • The 145deg part would incorrectly trigger the hex check, but that’s fixable with an extra condition to filter out angles.
  • The 103204 10% part wouldn’t trigger the check at all since it's longer than a valid hex code for which we would need a special checking to maybe split again for spaces?

"Either way, your original code doesn't handle hashes, so the styling will break for anything after the gradient in the query params anyways."

Could you clarify what you mean by that? Not sure I fully follow. Are you referring to how the query string is parsed or something else?

"There are ways to create a mask around elements to let the background naturally act as a border."

That sounds interesting. I’ll look into that approach. If I run into issues trying to get it working, I’ll reach out.

[cnrad]

Good examples, I see how it'll be harder than I thought

Re: hashes - these are actually referred to as fragment URLs, but basically if there is a # in the URL, it will treat the whole rest of the URL as a fragment, so everything after that won't be parsed as a query string, thus breaking the styling. Example below

[TheGameProfi]

Ah, that’s what you meant. I didn’t know it was called that.
There’s actually a solution already used in the landing UI where you can configure the Card. It uses URL encoding: https://www.w3schools.com/tags/ref\_urlencode.ASP
That replaces special chars with valid URL text. For example, bg=#400 becomes bg=%23400. We also need it anyway for whitespaces in the gradient option.

[nilscrafthd]

Nice

[TheGameProfi]

Sorry I thought I pushed the code but i totally forgot it 😅
I removed the additional gradient option and updated the bg to support hex code with and without #, and it should now support all background css options as long as it is url encoded. So you either need to just url encode it manually or just use the creation dashboard which auto encode it.

[TheGameProfi]

No comments since 7 months.
Bumping @cnrad