make query selector an id, not a class

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -142,7 +142,7 @@ function scrollToActive() {
   // Inspired on source of revealjs.com
   let storedScrollTop = parseInt(
     sessionStorage.getItem("sidebar-scroll-top"),
-    10
+    10,
   );
 
   if (!isNaN(storedScrollTop)) {
@@ -194,7 +194,7 @@ var findSearchInput = () => {
     } else {
       // must be at least one persistent form, use the first persistent one
       form = document.querySelector(
-        "div:not(.search-button__search-container) > form.bd-search"
+        "div:not(.search-button__search-container) > form.bd-search",
       );
     }
     return form.querySelector("input");
@@ -255,7 +255,7 @@ var addEventListenerForSearchKeyboard = () => {
         toggleSearchField();
       }
     },
-    true
+    true,
   );
 };
 
@@ -278,7 +278,7 @@ var changeSearchShortcutKey = () => {
   let shortcuts = document.querySelectorAll(".search-button__kbd-shortcut");
   if (useCommandKey) {
     shortcuts.forEach(
-      (f) => (f.querySelector("kbd.kbd-shortcut__modifier").innerText = "⌘")
+      (f) => (f.querySelector("kbd.kbd-shortcut__modifier").innerText = "⌘"),
     );
   }
 };
@@ -331,13 +331,13 @@ var getCurrentUrlPath = () => {
  * @param {event} event the event that trigger the check
  */
 async function DismissBannerAndStorePref(event) {
-  const banner = document.querySelector(".bd-header-version-warning");
+  const banner = document.querySelector("#bd-header-version-warning");
   banner.remove();
   let version = DOCUMENTATION_OPTIONS.VERSION;
   let now = new Date();
   let banner_pref = JSON.parse(localStorage.getItem("pst_banner_pref") || "{}");
   console.debug(
-    `[PST] Dismissing the version warning banner on ${version} starting ${now}.`
+    `[PST] Dismissing the version warning banner on ${version} starting ${now}.`,
   );
   banner_pref[version] = now;
   localStorage.setItem("pst_banner_pref", JSON.stringify(banner_pref));
@@ -436,7 +436,7 @@ function populateVersionSwitcher(data, versionSwitcherBtns) {
     const anchor = document.createElement("a");
     anchor.setAttribute(
       "class",
-      "dropdown-item list-group-item list-group-item-action py-1"
+      "dropdown-item list-group-item list-group-item-action py-1",
     );
     anchor.setAttribute("href", `${entry.url}${currentFilePath}`);
     anchor.setAttribute("role", "option");
@@ -496,7 +496,7 @@ function showVersionWarningBanner(data) {
   if (preferredEntries.length !== 1) {
     const howMany = preferredEntries.length == 0 ? "No" : "Multiple";
     console.log(
-      `[PST] ${howMany} versions marked "preferred" found in versions JSON, ignoring.`
+      `[PST] ${howMany} versions marked "preferred" found in versions JSON, ignoring.`,
     );
     return;
   }
@@ -505,28 +505,31 @@ function showVersionWarningBanner(data) {
   // if already on preferred version, nothing to do
   const versionsAreComparable = validate(version) && validate(preferredVersion);
   if (versionsAreComparable && compare(version, preferredVersion, "=")) {
+    console.log(
+      "This is the prefered version of the docs, not showing the warning banner.",
+    );
     return;
   }
   // check if banner has been dismissed recently
   const dismiss_date_str = JSON.parse(
-    localStorage.getItem("pst_banner_pref") || "{}"
+    localStorage.getItem("pst_banner_pref") || "{}",
   )[version];
   if (dismiss_date_str != null) {
     const dismiss_date = new Date(dismiss_date_str);
     const now = new Date();
-    const milisecond_in_a_day = 24 * 60 * 60 * 100;
-    const days_passed = (now - dismiss_date) / milisecond_in_a_day;
+    const milliseconds_in_a_day = 24 * 60 * 60 * 1000;
+    const days_passed = (now - dismiss_date) / milliseconds_in_a_day;
     const timeout_in_days = 14;
     if (days_passed < timeout_in_days) {
       console.info(
-        `[PST] Suppressing version warning banner; was dismissed ${days_passed} day(s) ago`
+        `[PST] Suppressing version warning banner; was dismissed ${days_passed} day(s) ago`,
       );
       return;
     }
   }
 
   // now construct the warning banner
-  const banner = document.querySelector(".bd-header-version-warning");
+  const banner = document.querySelector("#bd-header-version-warning");
   const middle = document.createElement("div");
   const inner = document.createElement("div");
   const bold = document.createElement("strong");
@@ -607,17 +610,17 @@ async function fetchAndUseVersions() {
   // fetch the JSON version data (only once), then use it to populate the version
   // switcher and maybe show the version warning bar
   var versionSwitcherBtns = document.querySelectorAll(
-    ".version-switcher__button"
+    ".version-switcher__button",
   );
   const hasSwitcherMenu = versionSwitcherBtns.length > 0;
   const hasVersionsJSON = DOCUMENTATION_OPTIONS.hasOwnProperty(
-    "theme_switcher_json_url"
+    "theme_switcher_json_url",
   );
   const wantsWarningBanner = DOCUMENTATION_OPTIONS.show_version_warning_banner;
 
   if (hasVersionsJSON && (hasSwitcherMenu || wantsWarningBanner)) {
     const data = await fetchVersionSwitcherJSON(
-      DOCUMENTATION_OPTIONS.theme_switcher_json_url
+      DOCUMENTATION_OPTIONS.theme_switcher_json_url,
     );
     // TODO: remove the `if(data)` once the `return null` is fixed within fetchVersionSwitcherJSON.
     // We don't really want the switcher and warning bar to silently not work.
@@ -641,7 +644,7 @@ function setupMobileSidebarKeyboardHandlers() {
   // allows the mobile sidebars to be hidden or revealed via CSS.
   const primaryToggle = document.getElementById("pst-primary-sidebar-checkbox");
   const secondaryToggle = document.getElementById(
-    "pst-secondary-sidebar-checkbox"
+    "pst-secondary-sidebar-checkbox",
   );
   const primarySidebar = document.querySelector(".bd-sidebar-primary");
   const secondarySidebar = document.querySelector(".bd-sidebar-secondary");
@@ -754,7 +757,7 @@ async function setupAnnouncementBanner() {
     const response = await fetch(pstAnnouncementUrl);
     if (!response.ok) {
       throw new Error(
-        `[PST]: HTTP response status not ok: ${response.status} ${response.statusText}`
+        `[PST]: HTTP response status not ok: ${response.status} ${response.statusText}`,
       );
     }
     const data = await response.text();
@@ -788,7 +791,7 @@ async function fetchRevealBannersTogether() {
   // Add together the heights of the element's children
   const height = Array.from(revealer.children).reduce(
     (height, el) => height + el.offsetHeight,
-    0
+    0,
   );
 
   // Use the calculated height to give the revealer a non-zero height (if

src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss

@@ -12,7 +12,7 @@
   }
 }
 
-.bd-header-version-warning,
+#bd-header-version-warning,
 .bd-header-announcement {
   min-height: 3rem;
   width: 100%;
@@ -69,6 +69,6 @@
   background-color: var(--pst-color-secondary-bg);
 }
 
-.bd-header-version-warning {
+#bd-header-version-warning {
   background-color: var(--pst-color-danger-bg);
 }

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html

@@ -1,7 +1,7 @@
 {#- The "revealer" allows async banners to be loaded, revealed, and animated together in a controlled way -#}
 <div class="pst-async-banner-revealer d-none">
 {#- Version warning banner is always loaded remotely/asynchronously #}
-  <aside class="bd-header-version-warning d-none d-print-none" aria-label="{{ _('Version warning') }}"></aside>
+  <aside id="bd-header-version-warning" class="d-none d-print-none" aria-label="{{ _('Version warning') }}"></aside>
 {#- But the announcement banner might be loaded locally or remotely -#}
 {%- set announcement_banner_label = _("Announcement") -%}
 {%- set announcement_banner_classes = "bd-header-announcement d-print-none" -%}