📝(documentation) adds customization for translations

Part of customization PoC

Author: rvveber

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to
 ## Added
 
 - 🚩 add homepage feature flag #861
-
+- ✨(frontend) add customization for translations #857
 
 ## [3.1.0] - 2025-04-07
 

docs/customization.md

@@ -0,0 +1,79 @@
+# Application Customization 🛠️
+This document outlines the various ways you can customize our application to suit your specific needs without modifying the core codebase.
+#### Available Customization Options
+> 1. [Runtime Theming 🎨](#runtime-theming-🎨)
+> 1. [Runtime Internationalization 🌐](#runtime-internationalization-🌐)
+
+<br>
+
+# Runtime Theming 🎨
+
+### How to Use
+
+To customize the application's appearance, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file:
+
+```javascript
+FRONTEND_CSS_URL=http://example.com/custom-style.css
+```
+
+Once you've set this variable, our application will load your custom CSS file and apply the styles to our frontend application.
+
+### Benefits
+
+- **Easy customization** 🔄: Customize the look and feel of our application without requiring any code changes.
+- **Flexibility** 🌈: Use any CSS styles to create a custom theme that meets your needs.
+- **Runtime theming** ⏱️: Change the theme of our application at runtime, without requiring a restart or recompilation.
+
+### Example Use Case
+
+Let's say you want to change the background color of our application to a custom color. Create a custom CSS file with the following contents:
+
+```css
+body {
+  background-color: #3498db;
+}
+```
+
+Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the background color to the custom color you specified.
+
+<br>
+
+# Runtime Internationalization 🌐
+
+### How to Use
+
+To provide custom translations, set the `FRONTEND_CUSTOM_TRANSLATIONS_URL` environment variable to the URL of your custom translations JSON file:
+
+```javascript
+FRONTEND_CUSTOM_TRANSLATIONS_URL=http://example.com/custom-translations.json
+```
+
+Once you've set this variable, our application will load your custom translations and apply them to the user interface.
+
+### Benefits
+
+- **Language control** 🌐: Customize terminology to match your organization's vocabulary.
+- **Context-specific language** 📝: Adapt text for your specific use case or industry.
+
+### Example Use Case
+
+Let's say you want to customize some key phrases in the application. Create a JSON file with your custom translations:
+
+```json
+{
+  "en": {
+    "translation": {
+      "Docs": "MyApp",
+      "Create New Document": "+"
+    }
+  },
+  "de": {
+    "translation": {
+      "Docs": "MeineApp",
+      "Create New Document": "+"
+    }
+  }
+}
+```
+
+Then set the `FRONTEND_CUSTOM_TRANSLATIONS_URL` environment variable to the URL of this JSON file. The application will load these translations and override the default ones where specified.

docs/env.md

@@ -53,6 +53,8 @@ These are the environmental variables you can set for the impress-backend contai
 | FRONTEND_FOOTER_VIEW_CACHE_TIMEOUT              | Cache duration of the json footer                                                             | 86400                                                   |
 | FRONTEND_URL_JSON_FOOTER                        | Url with a json to configure the footer                                                       |                                                         |
 | FRONTEND_THEME                                  | frontend theme to use                                                                         |                                                         |
+| FRONTEND_CSS_URL                                | URL to a custom CSS file for theming the application                                          |                                                         |
+| FRONTEND_CUSTOM_TRANSLATIONS_URL                | URL to a JSON file containing custom translations for the application                         |                                                         |
 | POSTHOG_KEY                                     | posthog key for analytics                                                                     |                                                         |
 | CRISP_WEBSITE_ID                                | crisp website id for support                                                                  |                                                         |
 | DJANGO_CELERY_BROKER_URL                        | celery broker url                                                                             | redis://redis:6379/0                                    |