updates top banner

ploomber · Nov 8, 2024 · 6b21303 · 6b21303
1 parent f4f1ea8
commit 6b21303
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 3 deletions.
diff --git a/doc/_static/marketing.css b/doc/_static/marketing.css
@@ -0,0 +1,28 @@
+.bd-header-announcement {
+    color: white;
+    padding: 8px;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.bd-header-announcement a {
+    color: white;
+    font-weight: bold;
+    text-decoration: underline;
+    animation: pulse 4s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/doc/_static/marketing.js b/doc/_static/marketing.js
@@ -0,0 +1,58 @@
+document.addEventListener("DOMContentLoaded", (event) => {
+    options = [
+        {
+            text: "Deploy Streamlit apps for free on ",
+            link: "Ploomber Cloud!",
+            url: "https://platform.ploomber.io/register/?utm_medium=readthedocs&utm_source=jupysql",
+        },
+        {
+            text: "Deploy Shiny apps for free on ",
+            link: "Ploomber Cloud!",
+            url: "https://platform.ploomber.io/register/?utm_medium=readthedocs&utm_source=jupysql",
+        },
+        {
+            text: "Deploy Dash apps for free on ",
+            link: "Ploomber Cloud!",
+            url: "https://platform.ploomber.io/register/?utm_medium=readthedocs&utm_source=jupysql",
+        },
+        {
+            text: "Try our new Streamlit ",
+            link: "AI Editor!",
+            url: "https://editor.ploomber.io/?utm_medium=readthedocs&utm_source=jupysql",
+        }
+    ]
+    const announcementElement = document.querySelector("#ploomber-top-announcement");
+    if (announcementElement) {
+        const updateAnnouncement = (firstTime = false) => {
+            let randomIndex;
+            let currentContent = announcementElement.textContent;
+
+            // Keep selecting a new random index until we get a different announcement
+            do {
+                randomIndex = Math.floor(Math.random() * options.length);
+            } while (options[randomIndex].text + options[randomIndex].link === currentContent);
+
+            const option = options[randomIndex];
+
+            if (firstTime) {
+                // First time - just set content without transition
+                announcementElement.innerHTML = `${option.text}<a href="${option.url}" target="_blank" rel="noopener noreferrer">${option.link}</a>`;
+            } else {
+                // Subsequent updates - use transition
+                announcementElement.style.opacity = 0;
+                announcementElement.style.transition = 'opacity 0.5s ease';
+
+                setTimeout(() => {
+                    announcementElement.innerHTML = `${option.text}<a href="${option.url}" target="_blank" rel="noopener noreferrer">${option.link}</a>`;
+                    announcementElement.style.opacity = 1;
+                }, 500);
+            }
+        };
+
+        // Set initial content without transition
+        updateAnnouncement(true);
+
+        // Update every 5 seconds with transition
+        setInterval(() => updateAnnouncement(false), 5000);
+    }
+});
diff --git a/doc/conf.py b/doc/conf.py
@@ -69,9 +69,11 @@
     "analytics": {"google_analytics_id": "G-JBZ8NNQSLN"},
     "home_page_in_toc": True,
     "announcement": (
-        "Deploy AI apps for free on  "
+        "<div id='ploomber-top-announcement'>"
+        "Deploy Streamlit apps for free on  "
         "<a href='https://ploomber.io/?utm_medium=readthedocs&utm_source=jupysql'>"
         "Ploomber Cloud!</a>"
+        "</div>"
     ),
     "use_repository_button": True,
     "use_edit_page_button": False,
@@ -113,7 +115,11 @@
 html_static_path = ["_static"]
 
 # Load custom stylesheets to support Algolia search.
-html_css_files = ["algolia.css", "https://cdn.jsdelivr.net/npm/@docsearch/css@3"]
+html_css_files = [
+    "marketing.css",
+    "algolia.css",
+    "https://cdn.jsdelivr.net/npm/@docsearch/css@3",
+]
 
 # Load custom javascript to support Algolia search. Note that the sequence
 # defined below (external first) is intentional!
@@ -122,5 +128,12 @@
         "https://cdn.jsdelivr.net/npm/@docsearch/js@3.3.3/dist/umd/index.js",
         {"defer": "defer"},
     ),
-    ("algolia.js", {"defer": "defer"}),
+    (
+        "algolia.js",
+        {"defer": "defer"},
+    ),
+    (
+        "marketing.js",
+        {"defer": "defer"},
+    ),
 ]