diff --git a/docs/multi-language-support.md b/docs/multi-language-support.md new file mode 100644 index 0000000..e61bec7 --- /dev/null +++ b/docs/multi-language-support.md @@ -0,0 +1,99 @@ +# Multi-Language Support Developer Plan + +This document outlines the strategy for implementing a token-based multi-language system in VoxVera, covering the CLI, the generated landing page, and documentation. + +## 1. Core Architecture: The Token System + +All translatable strings will be centralized in JSON files located in `voxvera/locales/`. This allows for easy addition of new languages by simply dropping a new file. + +- **Storage:** `voxvera/locales/{lang_code}.json` (e.g., `en.json`, `es.json`). +- **Structure:** + ```json + { + "meta": { + "language_name": "English", + "flag": "🇺🇸" + }, + "cli": { + "welcome": "Welcome to VoxVera Setup", + "select_lang": "Select your preferred language", + "folder_prompt": "Enter folder name for this flyer:" + }, + "web": { + "title": "VoxVera - Anonymous Flyers", + "download_btn": "Download Flyer", + "onion_link_desc": "Scan to view on Tor", + "change_lang": "Change Language" + } + } + ``` + +## 2. CLI Implementation (`voxvera/cli.py`) + +The CLI will be updated to handle localization from the start of the user interaction. + +### Workflow: +1. **Initial Detection:** On startup, the CLI checks the system locale (`LANG` env var or `locale` module). +2. **Language Selection:** The first prompt in `voxvera init` will be a language selector, defaulting to the detected system locale. +3. **Session Loading:** Once selected, the CLI loads the corresponding JSON. All subsequent `InquirerPy` prompts will use these tokens. +4. **Configuration:** The chosen language code is saved in the flyer's `config.json` as a preference for that specific project. + +## 3. Web Implementation (`voxvera/src/index-master.html`) + +The landing page will support dynamic language switching without requiring server-side logic (essential for Tor-hidden services). + +### Detection Logic: +- **Avoid IP-based Detection:** Since VoxVera is hosted on Tor, IP lookups return the Tor Exit Node location, not the user's. +- **Browser-based Detection:** Use `navigator.language` to detect the user's browser preference. +- **Persistence:** Save the user's manual choice in `localStorage`. + +### Frontend Components: +1. **Attributes:** Use `data-i18n="web.token_name"` on HTML elements. +2. **Language Switcher:** A dropdown menu or text-link list (e.g., "EN | ES | FR") placed next to the **Download** button. +3. **I18n Engine:** A lightweight JavaScript snippet injected during the build process that: + - Loads the bundled locale data. + - Detects the best language (Manual Selection > Browser Setting > English Fallback). + - Updates all `data-i18n` elements. + +## 4. Build System Updates (`voxvera/build.py`) + +The `build` process will be updated to bundle the necessary translations. + +- **Multi-bundle:** By default, all available `web` tokens from all locale files will be injected into a single `