Improve documentation of setting up custom themes

[SMG-elgonzalez]

Is your feature request related to a problem? Please describe. I find the current documentation incomplete for "Use webpack aliases to modify templates without changing the original files". It indicates that you can customize the converse.js themes only by adding them as dependencies and configuring Webpack with the aliases. Said previous steps are understood, however, it does not indicate what the next step would be to compile the project using that dependency library and generate the compile with the modified files.

Describe the solution you'd like It should indicate in the documentation how to import the converse.js library into an index.js file in your new project, which must have the same file so that it can generate the compile overwriting the modified files to generate a custom theming.

I appreciate the collaboration that can help improve the documentation and allow to make custom themes neatly.

[Omkar-Jawalkar]

Hey @Echolon, can you assign me this issue so that I can get started working on it?

[nishitiwari22]

Is this issue still open? I am looking to contribute to it.

[jcbrand]

Yes, this ticket is still open.

[nishitiwari22]

This is my first PR and I really want it to get merged therefore I want to be on the safer side this is what I wrote before actually making a pull request when I installed Converse.js and tried to understand if this is correct I'll quickly make a PR. Please review it.

1. Installing Converse.js Ensure that you have Converse.js installed as a dependency in your project. If you haven't already done so, you can add it to your project using npm or yarn:

npm install converse.js

or

yarn add converse.js

2. Configuring Webpack Aliases In your Webpack configuration file (usually webpack.config.js), set up aliases for Converse.js themes that you want to customize. This allows you to reference your modified theme files easily. For example:

const path = require('path');

module.exports = { // ... other webpack configuration ...

resolve: { alias: { 'converse-theme': path.resolve(__dirname, 'path-to-your-custom-theme'), }, }, };

Replace 'path-to-your-custom-theme' with the actual path to your modified Converse.js theme.

3. Importing Converse.js in Your Project In your project's JavaScript file (e.g., index.js), import Converse.js and the theme you want to customize. Make sure to import the theme using the alias you set in the webpack configuration:

import converse from 'converse.js'; import 'converse-theme'; // Use the alias you defined

4. Customize the Theme Now that you have imported the Converse.js library and the theme using the alias, you can make your customizations to the theme's files located in 'path-to-your-custom-theme'.

5. Compiling the Project To compile your project with the modified files, run your Webpack build process as you normally would. This will generate a custom-themed Converse.js package with your changes incorporated.

[jcbrand]

@nishitiwari22 Thanks for your effort so far.

Have you tried to actually follow your own instructions and create a custom theme?

I think that would be most instructive and useful to people, if you created an example repo that implements a custom theme and perhaps overrides some custom templates.

If it's good enough we can then move it into the conversejs organization.

In the documentation we can then point to this repo as an example of how to create a custom theme.

[olorunfemisamuel]

Is this issue still open?

[jcbrand]

Yes, this issue is still open.

[olorunfemisamuel]

Okay, can I be assigned to it?

[jcbrand]

No.

I'm tired of people asking to be assigned to our tickets and then disappearing. Seems like it's some kind of deception to try and get some GitHub activity that can be shown to prospective employers or something.

If you want to contribute, then do so, there's no need to have a ticket assigned.