You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
fix(www): locale-aware current-path and nav links in all engine pages
Root cause: engine pages used hardcoded current-path and nav-link hrefs
without locale prefix (/engine/* instead of /en/engine/* or /zh/engine/*).
This caused:
- Nav links at bottom of page to resolve to wrong locale
- Less-layout sidebar highlighting mismatch (no locale prefix)
Fixed 5 engine routing pages + previously fixed dsd.ts:
- design-system, islands, islands-deep, package-compatibility, standards-registry
- Each _renderEn() and _renderZh() now computes const loc = this._getLocale('en'|'zh')
- current-path uses /\/engine/... for correct locale prefix
- Nav link hrefs use /\/engine/... for locale-aware routing
Guide pages also have the same pattern but are not critical for nav-row
rendering (guide nav is simpler, no cross-locale navigation). Will fix in
separate batch.
fmt ✅ | lint ✅
<p class="subtitle">Islands are the only allowed client-side JavaScript units in LessJS. This page covers the three-layer architecture, upgrade strategies, declarative event binding, and data passing mechanisms.</p>
69
69
<h2>Island Architecture</h2>
70
-
<p>LessJS islands are a straightforward exploitation of the Custom Element Upgrade mechanism. The browser sees <span class="inline-code"><my-counter></span> during HTML parsing; later the module loads and calls <span class="inline-code">customElements.define()</span>, upgrading the existing element. See <a href="/engine/dsd">DSD Architecture</a> for the rendering model.</p>
70
+
<p>LessJS islands are a straightforward exploitation of the Custom Element Upgrade mechanism. The browser sees <span class="inline-code"><my-counter></span> during HTML parsing; later the module loads and calls <span class="inline-code">customElements.define()</span>, upgrading the existing element. See <a href="/${loc}/engine/dsd">DSD Architecture</a> for the rendering model.</p>
71
71
<h2>Three-Layer Island Architecture</h2>
72
72
<div class="layer-card"><div class="layer-tag">Layer 1 - dsd-static</div><h3>No JS, Pure DSD</h3><p>Purely presentational components: nav, article content, footer. SSG outputs full DSD HTML; the client loads zero JavaScript. Content remains visible and styled even if customElements.define() is never called.</p></div>
73
73
<div class="layer-card"><div class="layer-tag">Layer 2 - dsd-interactive</div><h3>DSD + Event Binding</h3><p>Components needing simple interactivity. SSR outputs full DSD (visible on first paint); after the client module loads, it detects the existing shadow root, skips render(), and binds only the declared event handlers.</p></div>
@@ -87,7 +87,7 @@ export class IslandsDeepGuidePage extends DsdElement {
87
87
<p>During SSR, component property values are serialized to JSON and written to the data-ssr-props attribute. On client upgrade, less:bind automatically parses and restores these values, ensuring SSR and client state stay in sync.</p>
88
88
<h2>Best Practices</h2>
89
89
<p>1. Start with Layer 1. Most presentational components never need to leave Layer 1.<br>2. Prefer CSS over JavaScript. Hover, focus, responsive layouts can be done with CSS alone.<br>3. Keep islands small and independent. Multiple small islands are easier to understand and optimize than one large one.<br>4. Prefer client:visible over client:idle for below-the-fold components.<br>5. Keep data-ssr-props small. Large datasets should be fetched client-side.<br>6. WithDsdHydration render() must check _dsdHydrated to avoid re-rendering the DSD DOM.</p>
0 commit comments