signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add comprehensive internationalization (i18n) with Spanish language support

Browse source 
This major feature introduces complete internationalization architecture with Spanish (Mexico) as the first additional language:

## New Features:
- **I18n Architecture**: Complete client-side and server-side internationalization system
- **Spanish (Mexico) Support**: Full es-MX translations for all user-facing text
- **Language Selector**: Dynamic language switching UI component in header
- **API Endpoints**: RESTful endpoints for serving translations (/api/i18n)
- **Progressive Enhancement**: Language detection via Accept-Language header and cookies

## Technical Implementation:
- **Frontend**: Client-side i18n.js with automatic DOM translation and language selector
- **Backend**: Server-side i18n service with locale detection middleware
- **Build Process**: Automated copying of translation files to dist/ directory
- **Responsive Design**: Language selector integrated into header controls layout

## Files Added:
- public/i18n.js - Client-side internationalization library
- src/i18n/index.ts - Server-side i18n service
- src/i18n/locales/en.json - English translations
- src/i18n/locales/es-MX.json - Spanish (Mexico) translations
- src/routes/i18n.ts - API endpoints for translations

## Files Modified:
- package.json - Updated build process to include i18n files
- public/index.html - Added i18n attributes and language selector
- public/app.js - Integrated dynamic translation updates
- src/server.ts - Added locale detection middleware
- src/scss/pages/_index.scss - Language selector styling

This implementation supports easy addition of future languages and maintains backward compatibility while providing a seamless multilingual experience.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Code 2025-07-07 12:25:44 -04:00
parent 9b7325a9dd
commit 8b1787ec47
10 changed files with 1006 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

28
public/index.html
View file

@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Lakes Ice Report</title>
<title data-i18n="common.appName">Great Lakes Ice Report</title>
<!-- PWA Meta Tags -->
<meta name="description" content="Community-driven winter road conditions and icy hazards tracker for the Great Lakes region">
<meta name="description" content="Community-driven winter road conditions and icy hazards tracker for the Great Lakes region" data-i18n="meta.description">
<meta name="theme-color" content="#2196F3">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
@ -44,18 +44,24 @@
.nojs-fallback { display: block !important; }
</style>
</noscript>
<!-- Internationalization -->
<script src="i18n.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="header-content">
<div class="header-text">
<h1>❄️ Great Lakes Ice Report</h1>
<p>Community-reported ICEy road conditions and winter hazards (auto-expire after 48 hours)</p>
<h1 data-i18n="common.appName">❄️ Great Lakes Ice Report</h1>
<p data-i18n="meta.subtitle">Community-reported ICEy road conditions and winter hazards (auto-expire after 48 hours)</p>
</div>
<div class="header-controls">
<div id="language-selector-container" class="language-selector-container"></div>
<button id="theme-toggle" class="theme-toggle js-only" title="Toggle dark mode" data-i18n="common.darkMode">
<span class="theme-icon">🌙</span>
</button>
</div>
<button id="theme-toggle" class="theme-toggle js-only" title="Toggle dark mode">
<span class="theme-icon">🌙</span>
</button>
</div>
</header>
@ -69,10 +75,10 @@
</noscript>
<div class="form-section">
<h2>Report ICEy Conditions</h2>
<h2 data-i18n="form.reportConditions">Report ICEy Conditions</h2>
<form id="location-form" method="POST" action="/submit-report">
<div class="form-group">
<label for="address">Address or Location *</label>
<label for="address" data-i18n="form.addressLabel">Address or Location *</label>
<div class="autocomplete-container">
<input type="text" id="address" name="address" required
placeholder="Enter address, intersection (e.g., Main St & Second St, City), or landmark"
@ -102,8 +108,8 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
<div class="reports-header">
<h2>Current Reports</h2>
<div class="view-toggle js-only">
<button id="map-view-btn" class="toggle-btn active">📍 Map View</button>
<button id="table-view-btn" class="toggle-btn">📋 Table View</button>
<button id="map-view-btn" class="toggle-btn active" data-i18n="navigation.mapView">📍 Map View</button>
<button id="table-view-btn" class="toggle-btn" data-i18n="navigation.tableView">📋 Table View</button>
<a href="/table" class="toggle-btn" style="text-decoration: none; line-height: normal;" title="Server-side view that works without JavaScript">📊 Basic View</a>
</div>
<noscript>