docs: move color-mode script (#37658)

* docs: move color-mode script

* Move color-modes.js in static folder

* Async load color-modes.js

* Switch to DOMContentLoaded

* Revert async loading

diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md
index 929075cbb46e2249ba7c7798493a77c03c54f3a0..bf1692ae16cacc444f52f1020e78ecfb52361062 100644 (file)
--- a/site/content/docs/5.2/customize/color-modes.md
+++ b/site/content/docs/5.2/customize/color-modes.md
@@ -248,7 +248,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc
 
 {{< example lang="js" show_preview="false" >}}
 {{< js.inline >}}
-{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}}
+{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
 {{< /js.inline >}}
 {{< /example >}}
 

diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 327ed14888e7c69aa2a8c4d8eb0a4ee8d914ce1e..22528ae47b0c897216baf6bb9ab6b890248cb42f 100644 (file)
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,6 +1,3 @@
-{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
-<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
-
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
@@ -22,6 +19,9 @@
 <meta name="robots" content="{{ . }}">
 {{- end }}
 
+{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
+<script src="{{ $colorModeJS | relURL }}"></script>
+
 {{ partial "stylesheet" . }}
 {{ partial "favicons" . }}
 {{ partial "social" . }}

diff --git a/site/assets/js/color-modes/index.js b/site/static/docs/5.2/assets/js/color-modes.js
similarity index 97%
rename from site/assets/js/color-modes/index.js
rename to site/static/docs/5.2/assets/js/color-modes.js
index 51bfd40a71da5a99deae1e83f5c9178a56a3bd86..41b6b893e274adcc7996b1e1c5a0bf9b01061c80 100644 (file)
--- a/site/assets/js/color-modes/index.js
+++ b/site/static/docs/5.2/assets/js/color-modes.js
@@ -46,7 +46,7 @@
     }
   })
 
-  window.addEventListener('load', () => {
+  window.addEventListener('DOMContentLoaded', () => {
     showActiveTheme(getPreferredTheme())
 
     document.querySelectorAll('[data-bs-theme-value]')