Skip to content

Commit 0ab952a

Browse files
committed
docs(README): add multi-language support documentation
1 parent d08bc30 commit 0ab952a

File tree

1 file changed

+52
-2
lines changed

1 file changed

+52
-2
lines changed

README.md

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ Read more about the reasoning behind this project in the [relevant blog post](ht
2323
- **🔐 Vault-Backed Security**: Uses HashiCorp Vault's cubbyhole for tamper-proof storage
2424
- **🎫 One-Time Tokens**: Vault tokens with exactly 2 uses (create + retrieve)
2525
- **🚦 Rate Limiting**: Built-in protection (10 requests/second)
26+
- **🌍 Multi-Language Support**: Interface available in 5 languages (EN, FR, DE, ES, IT)
27+
- Automatic language detection from browser preferences
28+
- URL-based language selection (`?lang=fr`)
29+
- Dynamic switching without page reload
2630
- **🔒 TLS/HTTPS Support**:
2731
- Automatic TLS via [Let's Encrypt](https://letsencrypt.org/)
2832
- Manual certificate configuration
@@ -40,6 +44,7 @@ Read more about the reasoning behind this project in the [relevant blog post](ht
4044
- [Quick Start](#-quick-start)
4145
- [Deployment](#deployment)
4246
- [Configuration](#configuration-options)
47+
- [Multi-Language Support](#-multi-language-support)
4348
- [Command Line Usage](#command-line-usage)
4449
- [Helm Chart](#helm)
4550
- [API Reference](#-api-reference)
@@ -49,18 +54,24 @@ Read more about the reasoning behind this project in the [relevant blog post](ht
4954

5055
## Frontend Dependencies
5156

52-
The web interface is built with modern **vanilla JavaScript** and has minimal external dependencies:
57+
The web interface is built with modern **vanilla JavaScript** (ES6 modules) and has minimal external dependencies:
5358

5459
| Dependency | Size | Purpose |
5560
|------------|------|----------|
5661
| ClipboardJS v2.0.11 | 8.9KB | Copy to clipboard functionality |
5762
| Montserrat Font | 46KB | Self-hosted typography |
58-
| Custom CSS | 2.3KB | Application styling |
63+
| Custom CSS | 3.3KB | Application styling (minified) |
64+
| Translation files | ~1KB each | i18n support (loaded on-demand) |
5965

6066
**No external CDNs or tracking** - All dependencies are self-hosted for privacy and security.
6167

6268
📦 **Total JavaScript bundle size**: 8.9KB (previously 98KB with jQuery)
6369

70+
🌍 **Internationalization**: 5 languages supported (English, French, German, Spanish, Italian)
71+
- Translations loaded asynchronously on-demand
72+
- Browser language auto-detection
73+
- Seamless language switching without page reload
74+
6475
## 🚀 Quick Start
6576

6677
Get up and running in less than 2 minutes:
@@ -382,6 +393,45 @@ SUPERSECRETMESSAGE_TLS_CERT_FILEPATH=/mnt/ssl/cert_secrets.example.com.pem
382393
SUPERSECRETMESSAGE_TLS_CERT_KEY_FILEPATH=/mnt/ssl/key_secrets.example.com.pem
383394
```
384395

396+
## 🌍 Multi-Language Support
397+
398+
The application supports 5 languages with automatic detection and seamless switching:
399+
400+
### Supported Languages
401+
402+
| Language | Code | Translation Coverage |
403+
|----------|------|---------------------|
404+
| 🇬🇧 English | `en` | Complete (23 keys) |
405+
| 🇫🇷 French | `fr` | Complete (23 keys) |
406+
| 🇩🇪 German | `de` | Complete (23 keys) |
407+
| 🇪🇸 Spanish | `es` | Complete (23 keys) |
408+
| 🇮🇹 Italian | `it` | Complete (23 keys) |
409+
410+
### Usage
411+
412+
**Automatic Detection**: The application automatically detects the user's preferred language from:
413+
1. URL parameter: `https://example.com/?lang=fr`
414+
2. Browser language settings
415+
3. Defaults to English if no match
416+
417+
**Manual Selection**: Users can switch languages using the selector in the top-right corner.
418+
419+
**Features**:
420+
- ✅ No page reload required
421+
- ✅ Language preference persisted in URL
422+
- ✅ Dynamic updates of all UI elements
423+
- ✅ Translates meta tags for SEO
424+
- ✅ Updates HTML `lang` attribute for accessibility
425+
- ✅ Translations loaded asynchronously (only active language)
426+
427+
### Technical Implementation
428+
429+
- **ES6 Modules**: Modern JavaScript with proper import/export
430+
- **CSP-Compliant**: All event handlers use `addEventListener()`
431+
- **i18n System**: Centralized in `utils.js` with `data-i18n` attributes
432+
- **Translation Files**: JSON format in `/static/locales/`
433+
- **Size Impact**: ~1KB per language file (loaded on-demand)
434+
385435
## 📸 Screenshots
386436

387437
### Message Creation Interface

0 commit comments

Comments
 (0)