Merge pull request #4673 from shraddhabang/dynbanner

Add dynamic annoucement banner for live docs

Author: k8s-ci-robot

docs/theme_overrides/assets/javascripts/announcements.js

@@ -0,0 +1,69 @@
+(function () {
+  var REPO = "kubernetes-sigs/aws-load-balancer-controller";
+  var LABEL = "announcement";
+  var API_URL =
+    "https://api.github.com/repos/" +
+    REPO +
+    "/issues?labels=" +
+    LABEL +
+    "&state=open&per_page=5&sort=created&direction=desc";
+
+  function escapeHtml(text) {
+    var div = document.createElement("div");
+    div.appendChild(document.createTextNode(text));
+    return div.innerHTML;
+  }
+
+  function renderAnnouncements(issues) {
+    if (issues.length === 0) return;
+
+    var banner = document.getElementById("gh-announcements");
+    if (!banner) return;
+
+    var issueLinks = issues
+      .map(function (issue) {
+        return (
+          '<li class="gh-announcement-item">' +
+          '<a href="' + issue.html_url + '" target="_blank" rel="noopener">' +
+          escapeHtml(issue.title) +
+          "</a>" +
+          "</li>"
+        );
+      })
+      .join("");
+
+    banner.innerHTML =
+      '<details class="gh-announcement-details">' +
+      '<summary class="gh-announcement-summary">' +
+      "⚠️ Known Issues — " +
+      "We are aware of some issues and are actively working on fixes. " +
+      "Click to view details and workarounds." +
+      "</summary>" +
+      '<div class="gh-announcement-body">' +
+      '<ul class="gh-announcement-list">' +
+      issueLinks +
+      "</ul>" +
+      "</div>" +
+      "</details>";
+
+    banner.style.display = "block";
+  }
+
+  function fetchAnnouncements() {
+    fetch(API_URL)
+      .then(function (res) {
+        if (!res.ok) throw new Error("GitHub API error: " + res.status);
+        return res.json();
+      })
+      .then(renderAnnouncements)
+      .catch(function (err) {
+        console.warn("Could not load announcements:", err);
+      });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", fetchAnnouncements);
+  } else {
+    fetchAnnouncements();
+  }
+})();

docs/theme_overrides/assets/stylesheets/announcements.css

@@ -0,0 +1,67 @@
+#gh-announcements {
+  display: none;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff3e0;
+  border-bottom: 2px solid #ff9800;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: #4e342e;
+}
+
+[data-md-color-scheme="slate"] #gh-announcements {
+  background: #3e2723;
+  border-bottom-color: #ff9800;
+  color: #ffe0b2;
+}
+
+.gh-announcement-details {
+  max-width: 61rem;
+  margin: 0 auto;
+  padding: 6px 24px;
+}
+
+.gh-announcement-summary {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 2px 0;
+  list-style: none;
+  user-select: none;
+}
+
+.gh-announcement-summary::-webkit-details-marker {
+  display: none;
+}
+
+.gh-announcement-summary::before {
+  content: "▸ ";
+}
+
+.gh-announcement-details[open] > .gh-announcement-summary::before {
+  content: "▾ ";
+}
+
+.gh-announcement-body {
+  padding: 4px 0 2px;
+}
+
+.gh-announcement-list {
+  margin: 0;
+  padding-left: 18px;
+  list-style: disc;
+}
+
+.gh-announcement-item {
+  padding: 1px 0;
+}
+
+.gh-announcement-item a {
+  color: #e65100;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+[data-md-color-scheme="slate"] .gh-announcement-item a {
+  color: #ffb74d;
+}

docs/theme_overrides/main.html

@@ -3,9 +3,16 @@
 {% block styles %}
     {{ super() }}
     <link rel="stylesheet" href="{{ 'assets/stylesheets/version-select.css' | url }}">
+    <link rel="stylesheet" href="{{ 'assets/stylesheets/announcements.css' | url }}">
+{% endblock %}
+
+{% block tabs %}
+    {{ super() }}
+    <div id="gh-announcements"></div>
 {% endblock %}
 
 {% block scripts %}
     {{ super() }}
     <script src="{{ 'assets/javascripts/version-select.js' | url }}"></script>
-{% endblock %}
+    <script src="{{ 'assets/javascripts/announcements.js' | url }}"></script>
+{% endblock %}