[FEATURE] Customisable Profile Themes

[Vyvy-vi]

Description

In light of the changes made in #513, I think it would be really great if this gradient config is an "optional" enhancement that people could use in their profiles. An option in the data config files for a hex code or a "trigger" string, which defines the background for the page would be really great. Maybe we can call it "theme"

/public/data/<file>.json

{
  "name": "J. Doe",
  "bio": "Lorem Ipsum",
  "avatar": "https://github.com/<name>.png",
  "theme": "gradient", // or "0xffff00" or "0xfc0bb8" or "default"
  "links": [
    {
      "name": "Follow me on GitHub",
      "url": "https://github.com/<name>",
      "icon": "github"
    },
    {
      "name": "Follow me on Twitter",
      "url": "https://twitter.com/<name>",
      "icon": "twitter"
    }
  ]
}

Screenshots

No response

Additional information

Stems from #513 and this is a feature that linktree and other projects also include.

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[Vyvy-vi]

I would like to work on this, unless someone else wants to :)

[Panquesito7]

I would like to work on this, unless someone else wants to :)

I think you can work on it! 😄

[Tejas-Teju]

@Vyvy-vi @Panquesito7 I am new to open source, can I work on this?

[Panquesito7]

@Vyvy-vi @Panquesito7 I am new to open source, can I work on this?

@Vyvy-vi, will you still work on this? 😅

[Vyvy-vi]

If you want to work on this, go ahead! :)

[Tejas-Teju]

Should we add a button called theme and select the color or gradient from color picker? and then save the value to the .json file?

[gptkrsh]

Should we add a button called theme and select the color or gradient from color picker? and then save the value to the .json file?

that will be weird to integrate 😅 I think we can allow the user to add a gradient in the JSON directly...

[Vyvy-vi]

yes, I think for colours, we can have some default color text values(like 'red', 'blue', etc etc. or maybe 'classic', 'modern', 'xyz' and if those aren't present, it uses colour hashes)

[gptkrsh]

yes, I think for colours, we can have some default color text values(like 'red', 'blue', etc etc. or maybe 'classic', 'modern', 'xyz' and if those aren't present, it uses colour hashes)

looks cool, a gradient could be a linear-gradient property... opening support for custom hex codes as well

[Vyvy-vi]

looks cool, a gradient could be a linear-gradient property... opening support for custom hex codes as well

That can be neat! There's so much room to customise in here, once an MVP version of this is created.

[Tejas-Teju]

Can anyone help me understand it a bit more? any other platform to discuss more on this than GitHub?

[gptkrsh]

Can anyone help me understand it a bit more? any other platform to discuss more on this than GitHub?

Discord?

[gptkrsh]

looks cool, a gradient could be a linear-gradient property... opening support for custom hex codes as well

That can be neat! There's so much room to customise in here, once an MVP version of this is created.

so it would be styles={{ background: profile.background ?? '#fff' }} I believe.

[Vyvy-vi]

Can anyone help me understand it a bit more? any other platform to discuss more on this than GitHub?

I think it makes sense to discuss this in the issue itself so that we can maintain the context. But certainly, feel free to ask any questions on our discord server - http://discord.eddiehub.org/

[Tejas-Teju]

I am following below to customize the background, please let me know the right method:

1. In public/data/.json file I am assuming there is a key called "theme" where the users will add background-color Note: At present there is no key called "theme" in the JSON files, but in case if it is present then add the customized theme else add default value i.e. White.
2. Background should remain White in the Home.js page but when the user navigates to their respective ProfilePage.js then the background theme should apply

I tried 2 methods:

1. Apply the background to the body using document object but the issue is it applies to the Home page as well

ProfilePage.js

2. Create a div tag and add background to it but it doesn't cover the whole body. This just wraps Profile and Link components but I am not sure how to apply this theme to the body for individual users I need help on this.

ProfilePage.js

[Vyvy-vi]

I think you'd want to modify the https://github.com/EddieHubCommunity/LinkFree/blob/main/src/Components/UserProfile/User.js file

[Tejas-Teju]

@Vyvy-vi, I made changes and created a PR-820 please review it.

[github-actions[bot]]

Stale issue message

[eddiejaoude]

A new version of LinkFree got released. We have a lot more flexibility now

I will close this and a new issue can be created