Activate tabs based on browser's operating system

docs/conf.py

@@ -166,6 +166,10 @@
 # directly to the root of the documentation.
 # html_extra_path = []
 
+html_js_files = [
+    "js/activate_tab.js",
+]
+
 # If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
 # using the given strftime format.
 # html_last_updated_fmt = '%b %d, %Y'

docs/installation.rst

@@ -1,6 +1,14 @@
 Installation
 ============
 
+.. raw:: html
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      activateTab(getOS());
+    });
+    </script>
+
 Warnings
 --------
 

docs/resources/js/activate_tab.js

@@ -0,0 +1,42 @@
+// Based on https://stackoverflow.com/a/38241481/724176
+function getOS() {
+  const userAgent = window.navigator.userAgent,
+    platform =
+      window.navigator?.userAgentData?.platform || window.navigator.platform,
+    macosPlatforms = ["macOS", "Macintosh", "MacIntel", "MacPPC", "Mac68K"],
+    windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
+    iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  if (macosPlatforms.includes(platform)) {
+    return "macOS";
+  } else if (iosPlatforms.includes(platform)) {
+    return "iOS";
+  } else if (windowsPlatforms.includes(platform)) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+
+  return "unknown";
+}
+
+function activateTab(tabName) {
+  // Find all label elements containing the specified tab name
+  const labels = document.querySelectorAll(".tab-label");
+
+  labels.forEach((label) => {
+    if (label.textContent.includes(tabName)) {
+      // Find the associated input element using the 'for' attribute
+      const tabInputId = label.getAttribute("for");
+      const tabInput = document.getElementById(tabInputId);
+
+      // Check if the input element exists before attempting to set the "checked" attribute
+      if (tabInput) {
+        // Activate the tab by setting its "checked" attribute to true
+        tabInput.checked = true;
+      }
+    }
+  });
+}