feat: add dismiss button to announcement banner (#2287)

Addresses #1384

Using essentially the same approach as was used for the version warning
banner in #1763

Some questions for the announcement banner compared to the versions:

- Do we also want to only remember it for 14 days, or just forever for a
certain announcement?
- Ideally the stored dismiss state takes into account the content of the
announcement, so that when you add a new announcement, all users see it?
- I am assuming that for a general announcement banner, we do _not_ want
this to be version specific (i.e. remember it separately per version)

Note: I only tested it with a remote announcement that gets injected,
not yet with a local snippet.

Author: jorisvandenbossche

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

@@ -922,6 +922,28 @@ function debounce(callback, wait) {
  */
 async function setupAnnouncementBanner() {
   const banner = document.querySelector(".bd-header-announcement");
+
+  // check if banner has been dismissed recently
+  const dismiss_date_str = JSON.parse(
+    localStorage.getItem("pst_announcement_banner_pref") || "{}",
+  )["closed"];
+  if (dismiss_date_str != null) {
+    const dismiss_date = new Date(dismiss_date_str);
+    const now = new Date();
+    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 announcement banner; was dismissed ${Math.floor(
+          days_passed,
+        )} day(s) ago`,
+      );
+      banner.remove();
+      return;
+    }
+  }
+
   const { pstAnnouncementUrl } = banner ? banner.dataset : null;
 
   if (!pstAnnouncementUrl) {
@@ -947,6 +969,31 @@ async function setupAnnouncementBanner() {
     console.log(`[PST]: Failed to load announcement at: ${pstAnnouncementUrl}`);
     console.error(_error);
   }
+
+  // Add close button
+  console.debug("[PST] Adding close button to announcement banner");
+  const close_btn = document.createElement("a");
+  close_btn.classList = "ms-3 my-1 align-baseline";
+  const close_x = document.createElement("i");
+  close_btn.append(close_x);
+  close_x.classList = "fa-solid fa-xmark";
+  close_btn.onclick = DismissAnnouncementBannerAndStorePref;
+  banner.append(close_btn);
+}
+
+async function DismissAnnouncementBannerAndStorePref(event) {
+  const banner = document.querySelector(".bd-header-announcement");
+  banner.remove();
+  const now = new Date();
+  const banner_pref = JSON.parse(
+    localStorage.getItem("pst_announcement_banner_pref") || "{}",
+  );
+  console.debug(`[PST] Dismissing the announcement banner starting ${now}.`);
+  banner_pref["closed"] = now.toISOString();
+  localStorage.setItem(
+    "pst_announcement_banner_pref",
+    JSON.stringify(banner_pref),
+  );
 }
 
 /*******************************************************************************

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

@@ -37,6 +37,13 @@
   // Ensure there is enough contrast against the background
   a {
     color: var(--pst-color-link-higher-contrast);
+
+    &:hover {
+      // applying the same style as the SD "buttons"
+      @include link-style-hover;
+
+      cursor: pointer;
+    }
   }
 
   // The "Switch to stable version" link (styled like a button)