Initial commit: Complete multilingual website with translation system

example_usage.md

@@ -0,0 +1,167 @@
+# JSON-Based Translation System for Kobelly
+
+## 🎉 Benefits of This System
+
+✅ **No compilation needed** - Just edit JSON files directly  
+✅ **Edit English without breaking translations** - Each language is independent  
+✅ **Simple and lightweight** - No complex dependencies  
+✅ **Real-time updates** - Changes appear immediately after restart  
+✅ **Easy to maintain** - Clear JSON structure  
+
+## 📁 File Structure
+
+```
+translations/
+├── en.json    # English translations
+├── de.json    # German translations  
+├── fr.json    # French translations
+└── nl.json    # Dutch translations
+```
+
+## 🔧 How to Use
+
+### 1. In Templates
+
+Replace Babel syntax with the new system:
+
+**Old (Babel):**
+```html
+<h1>{{ _('Welcome to Kobelly Web Solutions') }}</h1>
+<p>{{ _('We create stunning, modern websites') }}</p>
+```
+
+**New (JSON-based):**
+```html
+<h1>{{ translate('Welcome to Kobelly Web Solutions') }}</h1>
+<p>{{ translate('We create stunning, modern websites') }}</p>
+
+<!-- Or use the short alias -->
+<h1>{{ t('Welcome to Kobelly Web Solutions') }}</h1>
+<p>{{ t('We create stunning, modern websites') }}</p>
+```
+
+### 2. Adding New Translations
+
+1. **Add the string to your template:**
+```html
+<h2>{{ t('New Section Title') }}</h2>
+```
+
+2. **Add it to the translation files:**
+```json
+// translations/en.json
+{
+  "New Section Title": "New Section Title"
+}
+
+// translations/de.json  
+{
+  "New Section Title": "Neuer Abschnittstitel"
+}
+```
+
+3. **Restart your Flask app** - Changes appear immediately!
+
+### 3. Language Switching
+
+The system automatically detects language from:
+- URL parameter: `?lang=de`
+- Session storage
+- Browser preferences
+
+**Manual language switching:**
+```html
+<a href="?lang=en">English</a>
+<a href="?lang=de">Deutsch</a>
+<a href="?lang=fr">Français</a>
+<a href="?lang=nl">Nederlands</a>
+```
+
+**Or use the built-in selector:**
+```html
+{{ create_language_selector() | safe }}
+```
+
+## 🛠️ Management Scripts
+
+### Extract New Strings
+```bash
+python extract_translations.py
+```
+
+### Clean Translation Files
+```bash
+python clean_translations.py
+```
+
+### Add New Language
+1. Add language code to `SUPPORTED_LANGUAGES` in `translation_manager.py`
+2. Create `translations/[lang].json`
+3. Add translations
+
+## 📝 Example Translation File
+
+```json
+{
+  "Home": "Home",
+  "Services": "Services", 
+  "About": "About",
+  "Contact": "Contact",
+  "Welcome to Kobelly Web Solutions": "Welcome to Kobelly Web Solutions",
+  "We create stunning, modern websites that drive results": "We create stunning, modern websites that drive results"
+}
+```
+
+## 🔄 Migration from Babel
+
+1. **Replace template syntax:**
+   - `{{ _('text') }}` → `{{ t('text') }}`
+   - `{{ gettext('text') }}` → `{{ translate('text') }}`
+
+2. **Remove Babel dependencies:**
+   - Remove `Flask-Babel` from requirements.txt
+   - Remove `babel.cfg`
+
+3. **Update app.py:**
+   - Remove Babel imports and configuration
+   - Add translation manager imports
+
+## 🚀 Getting Started
+
+1. **Start the app:**
+```bash
+python app.py
+```
+
+2. **Edit translations:**
+   - Open `translations/[language].json`
+   - Replace English text with translations
+   - Save and restart app
+
+3. **Test language switching:**
+   - Visit `http://localhost:5000?lang=de`
+   - Or use the language selector
+
+## 💡 Tips
+
+- **Keep keys descriptive** - Use full sentences as keys
+- **Use consistent naming** - Follow the same pattern for similar content
+- **Test all languages** - Make sure translations fit in your layout
+- **Backup your translations** - JSON files are easy to version control
+
+## 🔧 Troubleshooting
+
+**Translations not showing?**
+- Check that the key exists in the JSON file
+- Restart the Flask application
+- Check browser console for errors
+
+**Language not switching?**
+- Clear browser cache
+- Check session storage
+- Verify language code is in `SUPPORTED_LANGUAGES`
+
+**New strings not appearing?**
+- Run `python extract_translations.py` to extract new strings
+- Add translations to all language files
+- Restart the application