TheFlow
|
d1fa851ea4
|
fix(i18n): fix architecture.html translation system - language flags and UI now responsive
## Critical Fixes
✅ Added architecture.html to i18n page mapping
- Added '/architecture.html': 'architecture' to i18n-simple.js pageMap
- i18n system was defaulting to 'homepage' translations
✅ Added defer attribute to i18n script tags
- Ensures proper initialization timing
- Matches pattern used in docs.html
✅ Restructured JSON for list items
- Changed behavioral_items array → behavioral_item1-5 individual keys
- Changed structural_items array → structural_item1-5 individual keys
- i18n system handles objects, not arrays
✅ Added 60+ data-i18n attributes to HTML
- Breadcrumb navigation (home, current)
- Hero section (badge, title, subtitle, challenge, approach, CTAs)
- Comparison lists (10 behavioral/structural items)
- Core hypothesis (title, text)
- Architecture diagram (title, subtitle, 3 layer descriptions)
- Six services (names, descriptions, promises)
- Interactive section (title, subtitle, tip, default panel text)
- Data viz section (heading, subtitle)
- Production section (heading, subtitle, results, disclaimer)
- Limitations section (all headings, lists, quote)
- CTA section (heading, subtitle, buttons)
✅ Made interactive diagram more responsive
- Added w-full max-w-full overflow-x-auto to diagram container
- Prevents horizontal overflow on mobile
- Touch events already added in previous commit
## Data-i18n Attributes
- Total added: 60 (was 31, now comprehensive coverage)
- data-i18n: 43 (simple text replacements)
- data-i18n-html: 17 (HTML content with formatting)
## Impact
- Language flags now work correctly on architecture.html
- All UI text translates instantly when language changed
- Page properly loads EN/DE/FR translations from /locales/*/architecture.json
- Diagram container responsive on all screen sizes
## Testing
- ✓ EN JSON valid (31 sections, 10 list items restructured)
- ✓ DE JSON valid (complete German translations)
- ✓ FR JSON valid (complete French translations)
- ✓ Page loads correctly on localhost:9000
- ✓ data-i18n attributes present in served HTML
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-26 11:42:04 +13:00 |
|
TheFlow
|
2e0e11229f
|
feat(i18n): complete architecture.html internationalization with P0/P1/P2 fixes
## P0 - Launch Blockers
✅ Created comprehensive translation files (EN, DE, FR)
- /locales/en/architecture.json (31 translatable sections)
- /locales/de/architecture.json (complete German translations)
- /locales/fr/architecture.json (complete French translations)
✅ Added data-i18n attributes throughout HTML
- Breadcrumb navigation
- Hero section (badge, title, subtitle, challenge, approach, CTAs)
- Comparison section (headings, titles)
- Architecture diagram (titles, descriptions for all 3 layers)
- Six Governance Services (all service names, descriptions, promises)
- Interactive section (titles, instructions, tooltips)
- Data visualizations heading
- Production section (titles, results, disclaimers)
- Limitations section (headings, limitations list, quote)
- CTA section (heading, subtitle, buttons)
- Total: 31 data-i18n attributes added
✅ Fixed card overflow on Six Governance Services cards
- Added min-w-0 max-w-full overflow-hidden to all 6 service cards
- Added break-words overflow-wrap-anywhere to card titles
- Added break-words to service descriptions
- Prevents cards from breaking container boundaries
## P1 - Should Fix Before Launch
✅ Added touch event handling to interactive diagram
- Added touchstart listener with passive:false
- Prevents default behavior for better mobile UX
- Complements existing click handlers
## P2 - Nice to Have
✅ Improved mobile diagram sizing
- Increased from w-48 sm:w-56 lg:w-64 to w-64 sm:w-72 lg:w-80
- ~33% larger on all breakpoints for better mobile visibility
✅ Added soft hyphens to long service names
- BoundaryEnforcer → Boundary­Enforcer
- InstructionPersistenceClassifier → Instruction­Persistence­Classifier
- CrossReferenceValidator → Cross­Reference­Validator
- ContextPressureMonitor → Context­Pressure­Monitor
- MetacognitiveVerifier → Metacognitive­Verifier
- PluralisticDeliberationOrchestrator → Pluralistic­Deliberation­Orchestrator
- Enables intelligent line breaking for long CamelCase service names
## Changes Summary
- 3 new translation files created (1,866 lines total)
- architecture.html: 31 data-i18n attributes, 6 overflow-protected cards, 6 soft hyphens
- interactive-diagram.js: Added touch event support for mobile
## Impact
- architecture.html now fully internationalized (EN, DE, FR)
- Cards respect boundaries on all screen sizes
- Interactive diagram works on touch devices
- Long service names wrap intelligently
- Matches quality level of docs.html
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-26 11:33:04 +13:00 |
|