Liquid Layout Templates & Hooks

_layouts/
├── default.html      # Renders <h2 id="-google-translate-module-translatejs">🌐 Google Translate Module (<code class="language-yaml highlighter-rouge"><span class="s">translate.js</span></code>)</h2>

<p>The translation engine operates in a self-executing closure:</p>
<ol>
  <li>Reads the <code class="language-yaml highlighter-rouge"><span class="s">googtrans</span></code> cookie or URL query <code class="language-yaml highlighter-rouge"><span class="s">?lang=&lt;code&gt;</span></code>.</li>
  <li>Suppresses default Google Translate banners and tooltips.</li>
  <li>Automatically triggers hidden <code class="language-yaml highlighter-rouge"><span class="s">goog-te-combo</span></code> select elements on change.</li>
  <li>Preserves language selection across page reloads and relative navigation.</li>
</ol>

<hr />

<h2 id="️-mermaid-integration-mermaid-initjs">🧜‍♀️ Mermaid Integration (<code class="language-yaml highlighter-rouge"><span class="s">mermaid-init.js</span></code>)</h2>

<p>The Mermaid module dynamically enhances pages after DOM content loads:</p>
<ol>
  <li>Scans the DOM for <code class="language-yaml highlighter-rouge"><span class="s">&lt;pre class="language-mermaid"&gt;</span></code> or <code class="language-yaml highlighter-rouge"><span class="s">&lt;div class="language-mermaid"&gt;</span></code>.</li>
  <li>Extracts raw Mermaid diagram syntax.</li>
  <li>Initializes Mermaid with custom dark mode variables (<code class="language-yaml highlighter-rouge"><span class="c1">#07111f</span></code>, <code class="language-yaml highlighter-rouge"><span class="c1">#48d8f2</span></code>).</li>
  <li>Replaces code blocks with <code class="language-yaml highlighter-rouge"><span class="s">&lt;pre class="mermaid"&gt;</span></code> and executes <code class="language-yaml highlighter-rouge"><span class="s">mermaid.run()</span></code>.</li>
  <li>Automatically wraps bare <code class="language-yaml highlighter-rouge"><span class="s">&lt;table&gt;</span></code> elements in responsive <code class="language-yaml highlighter-rouge"><span class="s">.table-wrap</span></code> divs.</li>
</ol>
 in <article class="doc-section documentation-content">
├── docs.html         # Renders breadcrumbs, reading pager, and docs content
├── wiki.html         # Renders interactive search filter, topic tree, and wiki content
└── catalogue.html    # Extends default.html with .catalogue-layout wrapper