Discuss what should be customizable

[2byrds]

The KERIA provider will provide a URL that allows you to download the customization needs (color pallete, icons, fonts?, etc) that will make it look like their website. We should make a list of things that could be customized. @HunnySajid will research what can be changed and post it here.

Also, post two separate versions that are configured differently to show the difference.

[2byrds]

From our meeting today:

• In terms of settings, instead of just a KERIA URL, you give a configuration URL for KERIA agent, theming, etc. That should be 'basic' settings/configuration.

[HunnySajid]

@rodolfomiranda @2byrds
These are my findings regarding how we can approach white-label customization.

I have set up a fake JSON server hosted at my-json-server.typicode.com

Host Permissions:
To make a network request to a certain host, we have to add the host under host_permissions in manifest.json v3.

// manifest.json
"host_permissions": ["*://*.typicode.com/"]

UPDATE: We don't need host_permissions for fetch request.

Vendors are supposed to do so too. We can either utilize the my-json-server or make our own. The point is, that every host should be listed in manifest.json. We will build a consensus on the structure of JSON.

A user would enter the JSON URL provided by the Vendor to fetch the theme.

---

⚠️ Caveats

Tailwind CSS is a static utility-first CSS framework, and its configuration is determined at build time. Although it helps with all its utilities for rapid development, the limitation is that we can not build a fully dynamic theme with it. There could be different variants of theme e.g vendor1-dark, vendor2-light but theme files should exist e.g tailwind.vendor1-dark.config.js, tailwind.vendor2-light.config.js on the system.

💡Alternate Approach

We can either go for

• Dynamic CSS Injection:
  Create a dynamic CSS file that includes variables for customizable values (colors, fonts, etc.). When the vendor updates the JSON, generate the CSS file dynamically on the server and serve it to your extension.

• Styled-Components:
  styled-components allows the creation of components with scoped styles. We can dynamically change styles based on data from JSON files and inject them as themes in ThemeProvider.

In both cases, we would be replacing the current Tailwind-based implementation. Styled-components is a robust css-in-js framework that works well with React and also offers composability. If we are going this way, would suggest replacing tailwind with style components.

[2byrds]

@rodolfomiranda @2byrds
These are my findings regarding how we can approach white-label customization.

I have set up a fake JSON server hosted at my-json-server.typicode.com

Host Permissions:
To make a network request to a certain host, we have to add the host under host_permissions in manifest.json v3.

// manifest.json
"host_permissions": ["*://*.typicode.com/"]

Vendors are supposed to do so too. We can either utilize the my-json-server or make our own. The point is, that every host should be listed in manifest.json. We will build a consensus on the structure of JSON.

A user would enter the JSON URL provided by the Vendor to fetch the theme.

---

⚠️ Caveats

Tailwind CSS is a static utility-first CSS framework, and its configuration is determined at build time. Although it helps with all its utilities for rapid development, the limitation is that we can not build a fully dynamic theme with it. There could be different variants of theme e.g vendor1-dark, vendor2-light but theme files should exist e.g tailwind.vendor1-dark.config.js, tailwind.vendor2-light.config.js on the system.

💡Alternate Approach

We can either go for

• Dynamic CSS Injection:
  Create a dynamic CSS file that includes variables for customizable values (colors, fonts, etc.). When the vendor updates the JSON, generate the CSS file dynamically on the server and serve it to your extension.

• Styled-Components:
  styled-components allows the creation of components with scoped styles. We can dynamically change styles based on data from JSON files and inject them as themes in ThemeProvider.

In both cases, we would be replacing the current Tailwind-based implementation. Styled-components is a robust css-in-js framework that works well with React and also offers composability. If we are going this way, would suggest replacing tailwind with style components.

Thank you @HunnySajid . Looking forward to discussing

[HunnySajid]

Based on the discussion in our call today, just figured out we don't need host permissions to make a fetch call.

[2byrds]

@HunnySajid will provide the JSON on this issue to show what is customizable.

[HunnySajid]

White Label Customization Demo

Screen.Recording.2024-01-26.at.9.47.53.PM.mov

[HunnySajid]

JSON Example

{
  "title": "FaceBook",
  "logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Facebook_Logo_2023.png/1200px-Facebook_Logo_2023.png",
  "icon":"https://cdn-icons-png.flaticon.com/128/3955/3955011.png",
  "theme": {
    "colors": {
      "primary": "#4c6edf",
      "secondary": "#2ad881",
      "error": "#f55877",
      "heading": "#273444",
      "text": "#5A5252",
      "subtext": "#d3dce6",
      "white": "#ffffff",
      "black": "#373e49",
      "body": "#252430",
      "str":"asd"
    }
  }
}

[2byrds]

White Label Customization Demo

Screen.Recording.2024-01-26.at.9.47.53.PM.mov

awesome @HunnySajid