Maint: do not use document.write

See #1920, this removes every usage of document.write in favor of
display:none with a noscript tag.

I did have to be  a little more specific for buttons as the css rule in
boostrap were overwriting the *.jsonly.

Note that this does not solves #1920 as some things (like the more
dropdown in nav bar) still require JS to work.

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-logo.html

@@ -28,7 +28,7 @@
     {% endif %}
     {% set js_mode = "light" if default_mode == "dark" else "dark" %}
     <img src="{{ theme_logo['image_relative'][default_mode] }}" class="logo__image only-{{ default_mode }}" alt="{{ alt }}"/>
-    <script>document.write(`<img src="{{ theme_logo['image_relative'][js_mode] }}" class="logo__image only-{{ js_mode }}" alt="{{ alt }}"/>`);</script>
+    <img src="{{ theme_logo['image_relative'][js_mode] }}" class="logo__image only-{{ js_mode }} jsonly" alt="{{ alt }}"/>
   {% endif %}
   {% if not is_logo or theme_logo.get("text") %}
     <p class="title logo__title">{{ theme_logo.get("text") or docstitle }}</p>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html

@@ -1,11 +1,7 @@
 {# Displays a search field image that opens a search overlay when clicked. #}
 {# As this function will only work when JavaScript is enabled, we add it through JavaScript. #}
- <script>
- document.write(`
-   <button class="btn search-button-field search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <i class="fa-solid fa-magnifying-glass"></i>
-    <span class="search-button__default-text">{{ _('Search') }}</span>
-    <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
-   </button>
- `);
- </script>
+<button class="btn search-button-field search-button__button jsonly" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+ <i class="fa-solid fa-magnifying-glass"></i>
+ <span class="search-button__default-text">{{ _('Search') }}</span>
+ <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
+</button>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html

@@ -1,9 +1,6 @@
 {# Displays a magnifying glass icon that opens a search overlay when clicked. #}
-{# As this function will only work when JavaScript is enabled, we add it through JavaScript. #}
-<script>
-document.write(`
-  <button class="btn btn-sm pst-navbar-icon search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+{# As this function will only work when JavaScript is enabled, we hide it with jsonly #}
+<button class="btn btn-sm pst-navbar-icon search-button search-button__button jsonly" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
     <i class="fa-solid fa-magnifying-glass fa-lg"></i>
-  </button>
+</button>
 `);
-</script>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -1,11 +1,7 @@
 {# Displays an icon to switch between light mode, dark mode, and auto (use browser's setting). #}
-{# As the theme switcher will only work when JavaScript is enabled, we add it through JavaScript. #}
-<script>
-document.write(`
-  <button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
-    <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
-    <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
-  </button>
-`);
-</script>
+{# As the theme switcher will only work when JavaScript is enabled, we hide it with `jsonly`. #}
+<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+  <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
+  <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
+  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
+</button>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

@@ -1,26 +1,22 @@
 {# Displays a dropdown box for switching among different versions of your documentation. #}
 {%- set button_id = unique_html_id("pst-version-switcher-button") -%}
 {%- set dropdown_id = unique_html_id("pst-version-switcher-list") -%}
-{# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript. #}
-<script>
-document.write(`
-  <div class="version-switcher__container dropdown">
-    <button id="{{ button_id }}"
-      type="button"
-      class="version-switcher__button btn btn-sm dropdown-toggle"
-      data-bs-toggle="dropdown"
-      aria-haspopup="listbox"
-      aria-controls="{{ dropdown_id }}"
-      aria-label="Version switcher list"
-    >
-      Choose version  <!-- this text may get changed later by javascript -->
-      <span class="caret"></span>
-    </button>
-    <div id="{{ dropdown_id }}"
-      class="version-switcher__menu dropdown-menu list-group-flush py-0"
-      role="listbox" aria-labelledby="{{ button_id }}">
-      <!-- dropdown will be populated by javascript on page load -->
-    </div>
+{# As the version switcher will only work when JavaScript is enabled, we hide it with jsonly #}
+<div class="version-switcher__container dropdown jsonly">
+  <button id="{{ button_id }}"
+    type="button"
+    class="version-switcher__button btn btn-sm dropdown-toggle"
+    data-bs-toggle="dropdown"
+    aria-haspopup="listbox"
+    aria-controls="{{ dropdown_id }}"
+    aria-label="Version switcher list"
+  >
+    Choose version  <!-- this text may get changed later by javascript -->
+    <span class="caret"></span>
+  </button>
+  <div id="{{ dropdown_id }}"
+    class="version-switcher__menu dropdown-menu list-group-flush py-0"
+    role="listbox" aria-labelledby="{{ button_id }}">
+    <!-- dropdown will be populated by javascript on page load -->
   </div>
-`);
-</script>
+</div>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -17,6 +17,15 @@
     document.documentElement.dataset.mode = localStorage.getItem("mode") || "{{ default_mode }}";
     document.documentElement.dataset.theme = localStorage.getItem("theme") || "{{ default_mode }}";
   </script>
+  <!-- 
+    this give us a css class that will be invisible only if js is disabled 
+  -->
+  <noscript>
+    <style>
+      *.jsonly, *.btn.jsonly { display: none; } 
+
+    </style>
+  </noscript>
   {{ _webpack.head_pre_assets() }}
   {{ _webpack.head_pre_icons() }}
   {{- css() }}

tests/test_build/navbar_switcher.html

@@ -1,22 +1,18 @@
-<script>
- document.write(`
-  <div class="version-switcher__container dropdown">
-    <button id="pst-version-switcher-button-2"
-      type="button"
-      class="version-switcher__button btn btn-sm dropdown-toggle"
-      data-bs-toggle="dropdown"
-      aria-haspopup="listbox"
-      aria-controls="pst-version-switcher-list-2"
-      aria-label="Version switcher list"
-    >
-      Choose version  <!-- this text may get changed later by javascript -->
-      <span class="caret"></span>
-    </button>
-    <div id="pst-version-switcher-list-2"
-      class="version-switcher__menu dropdown-menu list-group-flush py-0"
-      role="listbox" aria-labelledby="pst-version-switcher-button-2">
-      <!-- dropdown will be populated by javascript on page load -->
-    </div>
+<div class="version-switcher__container dropdown jsonly">
+  <button id="pst-version-switcher-button-2"
+    type="button"
+    class="version-switcher__button btn btn-sm dropdown-toggle"
+    data-bs-toggle="dropdown"
+    aria-haspopup="listbox"
+    aria-controls="pst-version-switcher-list-2"
+    aria-label="Version switcher list"
+  >
+    Choose version  <!-- this text may get changed later by javascript -->
+    <span class="caret"></span>
+  </button>
+  <div id="pst-version-switcher-list-2"
+    class="version-switcher__menu dropdown-menu list-group-flush py-0"
+    role="listbox" aria-labelledby="pst-version-switcher-button-2">
+    <!-- dropdown will be populated by javascript on page load -->
   </div>
-`);
-</script>
+</div>

tests/test_build/navbar_theme.html

@@ -1,9 +1,5 @@
-<script>
- document.write(`
-  <button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
-    <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
-    <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
-  </button>
-`);
-</script>
+<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
+  <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
+  <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
+  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
+</button>

tests/test_build/sidebar_subpage.html

@@ -33,15 +33,11 @@
   </div>
   <div class="sidebar-header-items__end">
    <div class="navbar-item">
-    <script>
-     document.write(`
-  <button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
-    <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
-    <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
-  </button>
-`);
-    </script>
+    <button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button jsonly" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
+      <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
+      <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
+      <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
+    </button>
    </div>
   </div>
  </div>