Expand assistant docs (#16501)

This PR significantly expands the assistant documentation, breaking it
out into sections, adding examples and further documenting features.

This PR introduces a convention in docs for swapping keybindings for mac
vs linux:

`<kbd>cmd-enter|ctrl-enter</kbd>`

In the above example, the first will be shown for mac, the second for
linux or windows.

TODO:

- [ ] Fix table style (for `/assistant/configuration`)
- [x] Add script to swap keybindings based on platform
- It should take in this format: [`cmd-n` (mac)|`ctrl-n`(linux)] and
return just the correct binding for the viewer's platform.
- [ ] Add image/video assets (non-blocking)

Release Notes:

- Updated assistant documentation

docs/theme/index.hbs

@@ -23,6 +23,7 @@
         <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
+        <link rel="stylesheet" href="{{ path_to_root }}plugins.css">
         {{#if print_enable}}
         <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
         {{/if}}
@@ -251,9 +252,10 @@
         <script src="{{ path_to_root }}highlight.js"></script>
         <script src="{{ path_to_root }}book.js"></script>
 
-        <!-- Custom JS scripts -->
+         <!-- Custom JS scripts -->
         {{#each additional_js}}
         <script src="{{ ../path_to_root }}{{this}}"></script>
+        <script src="{{ path_to_root }}plugins.js"></script>
         {{/each}}
 
         {{#if is_print}}

docs/theme/plugins.css

@@ -0,0 +1,8 @@
+kbd.keybinding {
+  background-color: #f0f0f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: monospace;
+  display: inline-block;
+  margin: 0 2px;
+}

docs/theme/plugins.js

@@ -0,0 +1,50 @@
+function detectOS() {
+  var userAgent = navigator.userAgent;
+
+  var platform = navigator.platform;
+  var macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+  var windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+  var iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    return "Mac";
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    return "iOS";
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+
+  return "Unknown";
+}
+
+// Usage
+var os = detectOS();
+console.log("Operating System:", os);
+
+(function updateKeybindings() {
+  const os = detectOS();
+  const isMac = os === "Mac" || os === "iOS";
+
+  function processKeybinding(element) {
+    const [macKeybinding, linuxKeybinding] = element.textContent.split("|");
+    element.textContent = isMac ? macKeybinding : linuxKeybinding;
+    element.classList.add("keybinding");
+  }
+
+  function walkDOM(node) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.tagName.toLowerCase() === "kbd") {
+        processKeybinding(node);
+      } else {
+        Array.from(node.children).forEach(walkDOM);
+      }
+    }
+  }
+
+  // Start the process from the body
+  walkDOM(document.body);
+})();