Hide announcement with JS if date is past (#556)

Author: ewels

docs/assets/overrides/main.html

@@ -16,10 +16,36 @@
     ></span>
   </a>
 </div>
-{% if not config.extra.announcement.active %}
 <style type="text/css">
   .md-banner {
     display: none;
   }
 </style>
+{% if config.extra.announcement.active %}
+<script>
+  (function () {
+    function hideAnnouncement() {
+      var announcementDate = new Date(
+        "{{ config.extra.announcement.hide_after }}T00:00:00Z",
+      );
+      var currentDate = new Date();
+      var banner = document.querySelector(".md-banner");
+      if (banner && currentDate <= announcementDate) {
+        banner.style.display = "block";
+      }
+    }
+
+    // Run on initial load
+    hideAnnouncement();
+
+    // Hook into XHR to run after each page update
+    var originalOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function () {
+      this.addEventListener("load", function () {
+        setTimeout(hideAnnouncement, 0); // Ensure it runs after the request completes
+      });
+      return originalOpen.apply(this, arguments);
+    };
+  })();
+</script>
 {% endif %} {% endblock %}

mkdocs.yml

@@ -117,6 +117,7 @@ extra:
     text_bold: March 10-14, 2025
     url: https://community.seqera.io/t/nextflow-training-week-2025-q1/1775/6
     url_text: More info
+    hide_after: 2025-03-15
   # Analytics
   analytics:
     provider: google