Update documentation with comprehensive i18n features

README.md:
- Add multilingual support badge and live demo link
- Document Norwegian and English language switching
- Add i18n API section with language functions
- Include instructions for adding new languages
- Update file listing with current filenames

CLAUDE.md:
- Add internationalization system architecture details
- Document language preference persistence
- Include i18n testing commands and API usage
- Add customization points for translations
- Update key files section with favicon info

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-09-08 13:19:26 +02:00
commit 6e5a771321
2 changed files with 79 additions and 5 deletions

View file

@ -2,19 +2,30 @@
A lightweight, user-friendly JavaScript solution for implementing GDPR-compliant optional tracking on websites. By default, only minimal tracking is enabled, and users can opt-in to enhanced tracking with a fun "Plz trac me!" button.
**🌐 Now with full Norwegian and English language support!**
## Features
- 🔒 **GDPR Compliant by Default**: Minimal tracking until user consents
- 🌐 **Multilingual Support**: Norwegian and English with instant language switching
- 🎨 **Beautiful UI**: Gradient button with hover effects and smooth animations
- 📱 **Mobile Responsive**: Works perfectly on all device sizes
- ⚡ **Lightweight**: Pure vanilla JavaScript, no dependencies
- 🔧 **Easy Integration**: Drop-in solution for any website
- 🍪 **Cookie Management**: Automatic cleanup when tracking is disabled
- 📊 **Analytics Ready**: Google Analytics consent mode integration
- 💾 **Persistent Preferences**: Language and consent choices remembered between visits
## Demo
Open `gdpr-tracking-consent.html` in your browser to see the button in action!
**🚀 Live Demo:** [https://kode.naiv.no/olemd/gdpr](https://kode.naiv.no/olemd/gdpr)
Open `index.html` in your browser to see the button in action!
**Language Support:**
- Click **EN/NO** toggle in the top-right corner to switch languages
- All content translates instantly without page reload
- Language preference persists between visits
## Quick Start
@ -134,6 +145,45 @@ window.trackingConsent.enableTracking();
window.trackingConsent.disableTracking();
```
## Internationalization (i18n)
### Language Support
Supports **Norwegian (Bokmål)** and **English** with:
- Complete UI translation including consent modal
- Proper Norwegian capitalization and compound words
- Real-time language switching
- Persistent language preference
### Language API
```javascript
// Switch language programmatically
setLanguage('no'); // Norwegian
setLanguage('en'); // English
// Get current language
const currentLang = localStorage.getItem('gdpr-language') || 'en';
// Listen for language changes
document.addEventListener('DOMContentLoaded', () => {
// Language is automatically loaded from localStorage
});
```
### Adding New Languages
1. Add translations to the `translations` object:
```javascript
const translations = {
en: { /* English translations */ },
no: { /* Norwegian translations */ },
de: { /* German translations */ }
};
```
2. Add language button:
```html
<button class="lang-btn" onclick="setLanguage('de')" id="langDe">DE</button>
```
## Browser Support
- Modern browsers (ES6+)
@ -142,9 +192,11 @@ window.trackingConsent.disableTracking();
## Files
- `gdpr-tracking-consent.html` - Complete demo with all features
- `index.html` - Complete demo with all features and i18n support
- `integration-example.js` - Integration examples for different frameworks
- `README.md` - This documentation
- `CLAUDE.md` - Repository guidance for Claude Code
- `favicon.svg`, `favicon.ico` - Privacy-themed favicon files
## Legal Compliance