Docs: Add transparency option

site/layouts/partials/docs-navbar.html

@@ -82,6 +82,15 @@
             <hr class="d-lg-none my-2 text-white-50">
           </li>
 
+          <li class="nav-item col-12 col-lg-auto">
+            <button class="nav-link transparency-toggle py-2 px-0 px-lg-2" title="Toggle examples' transparency (inactive)" aria-label="Toggle examples' transparency (inactive)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M0 6.5a6.5 6.5 0 0 1 12.346-2.846 6.5 6.5 0 1 1-8.691 8.691A6.5 6.5 0 0 1 0 6.5m5.144 6.358a5.5 5.5 0 1 0 7.714-7.714 6.5 6.5 0 0 1-7.714 7.714m-.733-1.269q.546.226 1.144.33l-1.474-1.474q.104.597.33 1.144m2.614.386a5.5 5.5 0 0 0 1.173-.242L4.374 7.91a6 6 0 0 0-.296 1.118zm2.157-.672q.446-.25.838-.576L5.418 6.126a6 6 0 0 0-.587.826zm1.545-1.284q.325-.39.576-.837L6.953 4.83a6 6 0 0 0-.827.587l4.6 4.602Zm1.006-1.822q.183-.562.242-1.172L9.028 4.078q-.58.096-1.118.296l3.823 3.824Zm.186-2.642a5.5 5.5 0 0 0-.33-1.144 5.5 5.5 0 0 0-1.144-.33z"/>
+              </svg>
+              <span class="d-lg-none" aria-hidden="true">Toggle examples' transparency (inactive)</span>
+            </button>
+          </li>
+
           <li class="nav-item dropdown">
             {{ partial "theme-toggler" . }}
           </li>

site/layouts/partials/scripts.html

@@ -37,4 +37,7 @@
 {{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
 {{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
 <script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
+
+{{- $transparencyJs := resources.Get "js/transparency.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/transparency.js") }}
+<script defer src="{{ $transparencyJs.RelPermalink }}"></script>
 {{- end -}}