Remove usage and inclusion of jquery (#6360)

Now that bootstrap 4 (which required jquery) has been removed, we can
remove our final usages of jquery and the inclusion of the file.

Closes #3849

src/_includes/head.html

@@ -74,10 +74,6 @@
   {% endfor -%}
   {% endif -%}
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
-          integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"
           integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ=="
           crossorigin="anonymous"

src/_sass/_site.scss

@@ -82,7 +82,7 @@
 
 #site-content-title {
   margin-bottom: 1.5rem;
-  scroll-margin: 4rem;
+  scroll-margin: 2rem;
 }
 
 #page-footer {
@@ -301,7 +301,7 @@ main .content {
   h6 {
     // Push # link targets clear of page header.
     &[id] {
-      scroll-margin: $site-header-height + 1rem;
+      scroll-margin: 1.5rem;
     }
 
     // Let the wrapper set the bottom margin.
@@ -310,7 +310,7 @@ main .content {
 
   // Push # link targets clear of page header.
   a[id] {
-    scroll-margin: $site-header-height + 1rem;
+    scroll-margin: 1.5rem;
   }
 
   .header-wrapper {

src/_sass/components/_card.scss

@@ -18,7 +18,7 @@
     background-color: var(--card-container-color, rgb(242, 245, 255));
     height: auto;
 
-    scroll-margin: $site-header-height + 1rem;
+    scroll-margin: 2rem;
 
     &.hidden {
       display: none;

src/_sass/core/_utils.scss

@@ -17,4 +17,4 @@
 
 .text-center {
   text-align: center;
-}
+}

src/content/assets/js/main.js

@@ -8,31 +8,31 @@ function handleSearchShortcut(event) {
   }
 
   let parentElement;
-  // If the sidebar is open, focus its search field
+  // If the sidebar is open, focus its search field.
   if (document.body.classList.contains('open_menu')) {
     parentElement = document.getElementById('sidenav');
   } else {
     const bodySearch = document.getElementById('in-content-search');
-    // If the page has a search field in the body, focus that
+    // If the page has a search field in the body, focus that.
     if (bodySearch !== null) {
       parentElement = bodySearch;
     } else {
-      // Otherwise, fallback to the top navbar search field
+      // Otherwise, fallback to the top navbar search field.
       parentElement = document.getElementById('cse-search-box');
     }
   }
 
-  // If we found a search field, focus that
+  // If we found any search field, focus it.
   if (parentElement !== null) {
     parentElement
         .querySelector('.search-field')
         .focus();
-    // Prevent the initial slash from showing up in the search field
+    // Prevent the initial slash from showing up in the search field.
     event.preventDefault();
   }
 }
 
-function scrollSidenavIntoView() {
+function setupSidenav() {
   const sidenav = document.getElementById('sidenav');
   if (!sidenav) {
     return;
@@ -77,9 +77,6 @@ function createGallery() {
   }
 }
 
-/**
- * Activate the cookie notice footer
- */
 function initCookieNotice() {
   const notice = document.getElementById('cookie-notice');
   const agreeBtn = document.getElementById('cookie-consent');
@@ -144,22 +141,11 @@ function setupCopyButtons() {
   });
 }
 
-$(function() {
+function _setupSite() {
+  setupSidenav();
   setupOsTabs();
   initCookieNotice();
 
-  // open - close mobile navigation
-  $('#menu-toggle').on('click', function (e) {
-    e.stopPropagation();
-    $(document.body).toggleClass('open_menu');
-  });
-
-  window.addEventListener('resize', function() {
-    if (window.innerWidth > 1025) {
-      document.body.classList.remove('open_menu');
-    }
-  });
-
   // Set up collapse and expand for sidenav buttons.
   const toggles = document.querySelectorAll('.nav-link.collapsible');
   toggles.forEach(function (toggle) {
@@ -169,22 +155,34 @@ $(function() {
     });
   });
 
-  var topLevelMenuTogglers = ['#page-header', '.banner', '#page-content', '#page-footer'];
-  for (var i = 0; i < topLevelMenuTogglers.length; i++) {
-    $(topLevelMenuTogglers[i]).on('click', function (e) {
-      if ($(document.body).hasClass('open_menu')) {
+  document.getElementById('menu-toggle')?.addEventListener('click', function (e) {
+    e.stopPropagation();
+    document.body.classList.toggle('open_menu');
+  });
+
+  window.addEventListener('resize', function() {
+    if (window.innerWidth > 1025) {
+      document.body.classList.remove('open_menu');
+    }
+  });
+
+  const topLevelMenuTogglers = ['#page-header', '.banner', '#page-content', '#page-footer'];
+  topLevelMenuTogglers.forEach(function (togglerSelector) {
+    const toggler = document.querySelector(togglerSelector);
+    toggler?.addEventListener('click', function (e) {
+      const bodyClassList = document.body.classList;
+      if (bodyClassList.contains('open_menu')) {
         e.preventDefault();
-        $(document.body).removeClass("open_menu");
+        bodyClassList.remove('open_menu');
       }
     });
-  }
-
-  scrollSidenavIntoView();
+  });
 
-  // Collapsible inline TOC expand/collapse
-  $(".site-toc--inline__toggle").on('click', function () {
-    var root = $("#site-toc--inline");
-    root.toggleClass('toc-collapsed');
+  // Collapsible inline TOC expand/collapse.
+  document.querySelectorAll('.site-toc--inline__toggle').forEach(function (toggle) {
+      toggle.addEventListener('click', (e) => {
+        document.getElementById('site-toc--inline')?.classList.toggle('toc-collapsed');
+      });
   });
 
   document.addEventListener('keydown', handleSearchShortcut);
@@ -199,4 +197,11 @@ $(function() {
   );
 
   setupCopyButtons();
-});
+}
+
+// Run setup if DOM is loaded, otherwise do it after it has loaded.
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', _setupSite);
+} else {
+  _setupSite();
+}