fix(i18n): add missing data-i18n-html attributes to homepage Alexander section

The previous commit added i18n attributes only to titles but missed
the descriptions. This adds data-i18n-html attributes to all 19
Alexander principles content blocks:

- Section heading & subtitle
- 5 principle descriptions (with HTML formatting)
- CTA card description & links
- Enforcement distinction paragraphs

French and German translations now properly display for all content.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-30 23:20:55 +13:00
parent 9a3af5b0f3
commit dd89c2cd0e

View file

@ -95,10 +95,10 @@
<!-- Section Header --> <!-- Section Header -->
<div class="text-center mb-12 animate-on-scroll" data-animation="fade-in"> <div class="text-center mb-12 animate-on-scroll" data-animation="fade-in">
<h2 class="text-4xl font-bold text-gray-900 mb-4"> <h2 class="text-4xl font-bold text-gray-900 mb-4" data-i18n="alexander_principles.heading">
Built on Living Systems Principles Built on Living Systems Principles
</h2> </h2>
<p class="text-xl text-gray-700 max-w-3xl mx-auto"> <p class="text-xl text-gray-700 max-w-3xl mx-auto" data-i18n-html="alexander_principles.subtitle">
Governance that evolves with your organization—not compliance theatre, but <strong>architectural enforcement</strong> woven into deployment. Governance that evolves with your organization—not compliance theatre, but <strong>architectural enforcement</strong> woven into deployment.
</p> </p>
</div> </div>
@ -114,7 +114,7 @@
</div> </div>
<h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.deep_interlock.title">Deep Interlock</h3> <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.deep_interlock.title">Deep Interlock</h3>
</div> </div>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.deep_interlock.description">
Six governance services <strong>coordinate</strong>, not operate in silos. When one detects an issue, others reinforce—creating resilient enforcement through mutual validation. Six governance services <strong>coordinate</strong>, not operate in silos. When one detects an issue, others reinforce—creating resilient enforcement through mutual validation.
</p> </p>
</div> </div>
@ -127,7 +127,7 @@
</div> </div>
<h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.structure_preserving.title">Structure-Preserving</h3> <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.structure_preserving.title">Structure-Preserving</h3>
</div> </div>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.structure_preserving.description">
Framework changes <strong>enhance without breaking</strong>. Audit logs remain interpretable, governance decisions stay valid—institutional memory preserved across evolution. Framework changes <strong>enhance without breaking</strong>. Audit logs remain interpretable, governance decisions stay valid—institutional memory preserved across evolution.
</p> </p>
</div> </div>
@ -140,7 +140,7 @@
</div> </div>
<h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.gradients.title">Gradients Not Binary</h3> <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.gradients.title">Gradients Not Binary</h3>
</div> </div>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.gradients.description">
Governance operates on <strong>intensity levels</strong> (NORMAL/ELEVATED/HIGH/CRITICAL), not yes/no switches. Nuanced response to risk—avoiding alert fatigue and mechanical enforcement. Governance operates on <strong>intensity levels</strong> (NORMAL/ELEVATED/HIGH/CRITICAL), not yes/no switches. Nuanced response to risk—avoiding alert fatigue and mechanical enforcement.
</p> </p>
</div> </div>
@ -153,7 +153,7 @@
</div> </div>
<h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.living_process.title">Living Process</h3> <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.living_process.title">Living Process</h3>
</div> </div>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.living_process.description">
Framework <strong>evolves from real failures</strong>, not predetermined plans. Grows smarter through operational experience—adaptive resilience, not static rulebook. Framework <strong>evolves from real failures</strong>, not predetermined plans. Grows smarter through operational experience—adaptive resilience, not static rulebook.
</p> </p>
</div> </div>
@ -166,7 +166,7 @@
</div> </div>
<h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.not_separateness.title">Not-Separateness</h3> <h3 class="text-lg font-bold text-gray-900" data-i18n="alexander_principles.principles.not_separateness.title">Not-Separateness</h3>
</div> </div>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-gray-700 text-sm leading-relaxed" data-i18n-html="alexander_principles.principles.not_separateness.description">
Governance <strong>woven into deployment architecture</strong>, not bolted on. Enforcement is structural, happening in the critical execution path before actions execute—bypasses require explicit flags and are logged. Governance <strong>woven into deployment architecture</strong>, not bolted on. Enforcement is structural, happening in the critical execution path before actions execute—bypasses require explicit flags and are logged.
</p> </p>
</div> </div>
@ -175,16 +175,16 @@
<div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-all animate-on-scroll flex flex-col justify-between" data-animation="slide-up" data-stagger="600"> <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-all animate-on-scroll flex flex-col justify-between" data-animation="slide-up" data-stagger="600">
<div> <div>
<h3 class="text-lg font-bold text-white mb-3" data-i18n="alexander_principles.cta_card.title">Architectural Principles</h3> <h3 class="text-lg font-bold text-white mb-3" data-i18n="alexander_principles.cta_card.title">Architectural Principles</h3>
<p class="text-gray-300 text-sm leading-relaxed mb-4"> <p class="text-gray-300 text-sm leading-relaxed mb-4" data-i18n-html="alexander_principles.cta_card.description">
These principles guide every framework change—ensuring coherence, adaptability, and structural enforcement rather than compliance theatre. These principles guide every framework change—ensuring coherence, adaptability, and structural enforcement rather than compliance theatre.
</p> </p>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<a href="/architecture.html" class="block text-center bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-sm"> <a href="/architecture.html" class="block text-center bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-sm">
See Technical Architecture → <span data-i18n="alexander_principles.cta_card.architecture_link">See Technical Architecture →</span>
</a> </a>
<a href="/values.html" class="block text-center bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold hover:bg-gray-600 transition-colors text-sm"> <a href="/values.html" class="block text-center bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold hover:bg-gray-600 transition-colors text-sm">
Values & Principles → <span data-i18n="alexander_principles.cta_card.values_link">Values & Principles →</span>
</a> </a>
</div> </div>
</div> </div>
@ -200,13 +200,13 @@
</div> </div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<h3 class="text-2xl font-bold text-gray-900 mb-3"> <h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="alexander_principles.enforcement_distinction.heading">
Architectural Enforcement vs Compliance Theatre Architectural Enforcement vs Compliance Theatre
</h3> </h3>
<p class="text-gray-700 leading-relaxed mb-4"> <p class="text-gray-700 leading-relaxed mb-4" data-i18n-html="alexander_principles.enforcement_distinction.compliance_theatre">
<strong>Compliance theatre</strong>: Documented policies AI can bypass, post-execution monitoring, voluntary adherence. <strong>Compliance theatre</strong>: Documented policies AI can bypass, post-execution monitoring, voluntary adherence.
</p> </p>
<p class="text-gray-700 leading-relaxed"> <p class="text-gray-700 leading-relaxed" data-i18n-html="alexander_principles.enforcement_distinction.architectural_enforcement">
<strong>Architectural enforcement</strong> (Tractatus): Governance services intercept actions <em>before execution</em> in the critical path. Services coordinate in real-time, blocking non-compliant operations at the architectural level—bypasses require explicit --no-verify flags and are logged. <strong>Architectural enforcement</strong> (Tractatus): Governance services intercept actions <em>before execution</em> in the critical path. Services coordinate in real-time, blocking non-compliant operations at the architectural level—bypasses require explicit --no-verify flags and are logged.
</p> </p>
</div> </div>