Commit graph

2 commits

Author SHA1 Message Date
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&shy;Enforcer
  - InstructionPersistenceClassifier → Instruction&shy;Persistence&shy;Classifier
  - CrossReferenceValidator → Cross&shy;Reference&shy;Validator
  - ContextPressureMonitor → Context&shy;Pressure&shy;Monitor
  - MetacognitiveVerifier → Metacognitive&shy;Verifier
  - PluralisticDeliberationOrchestrator → Pluralistic&shy;Deliberation&shy;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