Dev

.github/workflows/deploy-docs-staging.yaml

@@ -49,8 +49,8 @@ jobs:
 
     - name: Deploy to S3
       run: |
-        aws s3 sync ./site s3://openobserve-website-staging/docs --exclude=".git/*"
+        aws s3 sync ./site s3://openobserve-website-staging/docs --exclude=".git/*" --delete
 
     - name: Invalidate CloudFront cache
       run: |
-        aws cloudfront create-invalidation --distribution-id E2GZJM0TJIDFRM --paths "/docs/*"
+        aws cloudfront create-invalidation --distribution-id E2GZJM0TJIDFRM --paths "/docs/*"

docs/js/feedback.js

@@ -0,0 +1,226 @@
+// feedback.js
+
+function feedbackModalInit() {
+  // Remove any previous event listeners by replacing the button and modal with clones
+  const oldBtn = document.querySelector("#feedbackButton");
+  const oldModal = document.querySelector("#feedbackModal");
+  if (oldBtn) {
+    const newBtn = oldBtn.cloneNode(true);
+    oldBtn.parentNode.replaceChild(newBtn, oldBtn);
+  }
+  if (oldModal) {
+    const newModal = oldModal.cloneNode(true);
+    oldModal.parentNode.replaceChild(newModal, oldModal);
+  }
+
+  // Now re-select after replacement  
+  const feedbackButton = document.querySelector("#feedbackButton");
+  const modal = document.querySelector("#feedbackModal");
+
+  if (!feedbackButton || !modal) {
+    return;
+  }
+
+  const form = modal.querySelector("form");
+  const successView = modal.querySelector(".success-view");
+  const formView = modal.querySelector(".form-view");
+  const errorView = modal.querySelector(".error-view");
+  const tabs = modal.querySelectorAll(".feedback-tab");
+  let lastActiveElement = null;
+
+  // Ensure the form exists before touching it
+  if (!form) {
+    return;
+  }
+
+  // ensure there's an input[name=type] for the form (hidden) so the submit code can read it
+  let typeInput = form.querySelector("input[name=type]");
+  if (!typeInput) {
+    typeInput = document.createElement("input");
+    typeInput.type = "hidden";
+    typeInput.name = "type";
+    typeInput.value = "Issue";
+    form.appendChild(typeInput);
+  }
+
+  function openModal() {
+    lastActiveElement = document.activeElement;
+    modal.classList.remove("tw-hidden");
+    calculatePosition();
+    const ta = modal.querySelector("textarea");
+    if (ta) ta.focus();
+  }
+
+  function closeModal() {
+    modal.classList.add("tw-hidden");
+    form.reset();
+    errorView.classList.add("tw-hidden");
+    successView.classList.add("tw-hidden");
+    successView.classList.remove("tw-flex");
+    try {
+      modal.style.top = "";
+      modal.style.bottom = "";
+    } catch (e) {}
+    formView.classList.remove("tw-hidden");
+    try {
+      if (lastActiveElement && typeof lastActiveElement.focus === "function") {
+        lastActiveElement.focus();
+      }
+    } catch (e) {}
+  }
+
+  function calculatePosition() {
+    try {
+      const btnRect = feedbackButton.getBoundingClientRect();
+      const screenHeight = window.innerHeight;
+      const buttonCenter = btnRect.top + btnRect.height / 2;
+      const placeAbove = buttonCenter > screenHeight / 2;
+      modal.classList.remove(
+        "tw-top-full",
+        "tw-bottom-full",
+        "tw-mt-4",
+        "tw-mb-4"
+      );
+      if (placeAbove) {
+        modal.classList.add("tw-bottom-full", "tw-mb-4");
+        modal.style.bottom = "100%";
+        modal.style.top = "";
+      } else {
+        modal.classList.add("tw-top-full", "tw-mt-4");
+        modal.style.top = "100%";
+        modal.style.bottom = "";
+      }
+      if (!modal.classList.contains("tw-right-0"))
+        modal.classList.add("tw-right-0");
+    } catch (err) {}
+  }
+
+  if (tabs && tabs.length) {
+    const setActiveTab = (index) => {
+      tabs.forEach((tb, i) => {
+        const selected = i === index;
+        tb.classList.toggle("tw-bg-white", selected);
+        tb.classList.toggle("tw-text-gray-900", selected);
+        tb.classList.toggle("tw-shadow-sm", selected);
+        tb.setAttribute("aria-selected", selected ? "true" : "false");
+        if (selected) {
+          const type = tb.getAttribute("data-type") || tb.textContent.trim();
+          typeInput.value = type;
+          const ta = modal.querySelector("textarea");
+          if (ta) ta.placeholder = `Type your ${type.toLowerCase()} here...`;
+        }
+      });
+    };
+
+    tabs.forEach((t, idx) => {
+      t.addEventListener("click", () => {
+        setActiveTab(idx);
+        t.focus();
+      });
+
+      t.addEventListener("keydown", (ev) => {
+        const key = ev.key;
+        let newIndex = null;
+        if (key === "ArrowRight") newIndex = (idx + 1) % tabs.length;
+        else if (key === "ArrowLeft")
+          newIndex = (idx - 1 + tabs.length) % tabs.length;
+        else if (key === "Home") newIndex = 0;
+        else if (key === "End") newIndex = tabs.length - 1;
+
+        if (newIndex !== null) {
+          ev.preventDefault();
+          setActiveTab(newIndex);
+          tabs[newIndex].focus();
+        }
+      });
+    });
+
+    setActiveTab(0);
+  }
+
+  feedbackButton.addEventListener("click", () => {
+    try {
+      if (modal.classList.contains("tw-hidden")) {
+        openModal();
+      } else {
+        closeModal();
+      }
+    } catch (err) {}
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") closeModal();
+  });
+
+  document.addEventListener("mousedown", (e) => {
+    if (!modal.contains(e.target) && !feedbackButton.contains(e.target)) {
+      closeModal();
+    }
+  });
+
+  window.addEventListener("resize", calculatePosition);
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (typeof form.reportValidity === "function") {
+      const ok = form.reportValidity();
+      if (!ok) {
+        return;
+      }
+    }
+    try {
+      errorView.classList.add("tw-hidden");
+    } catch (err) {}
+    const ta =
+      form.querySelector("textarea") || modal.querySelector("textarea");
+    const message = (ta && ta.value && ta.value.trim()) || "";
+    const data = {
+      type: (typeInput && typeInput.value) || "Issue",
+      message: message,
+      currentUrl: window.location.href,
+      userAgent: navigator.userAgent,
+      source: "feedback_form",
+    };
+    if (typeof window.trackFeedback === "function") {
+      try {
+        window.trackFeedback(data);
+      } catch (e) {}
+    }
+    formView.classList.add("tw-hidden");
+    successView.classList.add("tw-flex");
+    successView.classList.remove("tw-hidden");
+    setTimeout(closeModal, 1500);
+    fetch(
+      "https://script.google.com/macros/s/AKfycby5A7NSQCmG4KIBdM0HkRP-5zpRPy8aTrQHiQoe9uG_c_rv1VCiAnnZE8co7-kofgw-hg/exec",
+      {
+        method: "POST",
+        mode: "no-cors",
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" },
+      }
+    ).catch(() => {
+      try {
+        successView.classList.add("tw-hidden");
+        successView.classList.remove("tw-flex");
+        formView.classList.remove("tw-hidden");
+        if (errorView) {
+          errorView.textContent =
+            "Failed to submit feedback. Please try again.";
+          errorView.classList.remove("tw-hidden");
+        }
+        if (ta && typeof ta.focus === "function") ta.focus();
+      } catch (err) {}
+    });
+  });
+}
+
+// Run on DOMContentLoaded and MkDocs instant navigation
+if (typeof window.document$ !== "undefined") {
+  window.document$.subscribe(() => {
+    setTimeout(feedbackModalInit, 0);
+  });
+}
+// Always run on DOMContentLoaded (for initial load)
+document.addEventListener("DOMContentLoaded", () => {
+  setTimeout(feedbackModalInit, 0);
+});

docs/js/search-tracking.js

@@ -101,9 +101,7 @@
           // pageType,                // docs / blog / marketing (uncomment if needed)
           ...payload,
         }),
-      });      
       });
-
     } catch (error) {
       console.warn("Analytics API error:", error);
     }

docs/js/segment.js

@@ -0,0 +1,39 @@
+function getAnonymousId() {
+  let anonId = localStorage.getItem("segment_anonymous_id");
+  if (!anonId) {
+    anonId =
+      "anon_" + Math.random().toString(36).substr(2, 9) + "_" + Date.now();
+    localStorage.setItem("segment_anonymous_id", anonId);
+  }
+  return anonId;
+}
+
+function getSegmentProxyUrl() {
+  // Set your Segment proxy URL here or from a global variable
+  return "https://swisspipe.dev.zinclabs.dev/api/v1/4e5cac41-4d34-46f9-b862-e7ac551b5a8f/trigger"; // e.g., set in your template
+}
+
+function trackFeedback(feedbackData) {
+  const proxyUrl = getSegmentProxyUrl();
+  if (!proxyUrl) {
+    return;
+  }
+  const message = {
+    user: { anonymousId: getAnonymousId() },
+    event: "O2 Website Docs Feedback",
+    properties: feedbackData,
+    timestamp: new Date().toISOString(),
+    type: "track",
+  };
+  fetch(proxyUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(message),
+  })
+    .then((res) => {
+      return res.text().then((text) => {});
+    })
+    .catch((e) => {});
+}
+
+window.trackFeedback = trackFeedback;

docs/js/theme.js

@@ -0,0 +1,106 @@
+// Simple theme persistence - leverages MkDocs Material's built-in theme system
+(function () {
+  // Apply saved theme immediately to prevent flash
+  function applySavedTheme() {
+    const savedScheme = localStorage.getItem("theme-preference");
+    if (savedScheme) {
+      document.documentElement.setAttribute(
+        "data-md-color-scheme",
+        savedScheme
+      );
+      // Set the correct radio button as checked
+      var paletteForm = document.querySelector(
+        'form[data-md-component="palette"]'
+      );
+      if (paletteForm) {
+        var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
+        inputs.forEach(function (input) {
+          if (input.getAttribute("data-md-color-scheme") === savedScheme) {
+            input.checked = true;
+          } else {
+            input.checked = false;
+          }
+        });
+      }
+    }
+  }
+
+  // Save theme preference when changed
+  function attachPaletteListeners() {
+    var paletteForm = document.querySelector(
+      'form[data-md-component="palette"]'
+    );
+    if (!paletteForm) return false;
+    // avoid attaching twice to the same form
+    if (paletteForm.getAttribute("data-theme-listeners") === "1") return true;
+    var inputs = paletteForm.querySelectorAll('input[name="__palette"]');
+    inputs.forEach(function (input) {
+      input.addEventListener("change", function () {
+        if (this.checked) {
+          var scheme = this.getAttribute("data-md-color-scheme");
+          document.documentElement.setAttribute("data-md-color-scheme", scheme);
+          localStorage.setItem("theme-preference", scheme);
+        }
+      });
+    });
+    paletteForm.setAttribute("data-theme-listeners", "1");
+    return true;
+  }
+
+  // Observe changes to the documentElement attribute for scheme changes
+  function observeSchemeAttribute() {
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (mutation.attributeName === "data-md-color-scheme") {
+          const scheme = document.documentElement.getAttribute(
+            "data-md-color-scheme"
+          );
+          if (scheme) {
+            localStorage.setItem("theme-preference", scheme);
+          }
+        }
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-md-color-scheme"],
+    });
+  }
+
+  // Watch the body for insertions/replacements of the palette form and re-attach listeners
+  function observeBodyForPalette() {
+    // Try attach immediately in case it's already present
+    attachPaletteListeners();
+
+    const bodyObserver = new MutationObserver(function (mutations) {
+      // If nodes are added/removed we attempt to (re)attach listeners
+      for (var i = 0; i < mutations.length; i++) {
+        var mutation = mutations[i];
+        if (
+          mutation.type === "childList" &&
+          (mutation.addedNodes.length || mutation.removedNodes.length)
+        ) {
+          // small debounce: try attach; attachPaletteListeners is idempotent
+          attachPaletteListeners();
+        }
+      }
+    });
+    bodyObserver.observe(document.body || document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  // Setup theme persistence (apply + observe)
+  function setupThemePersistence() {
+    applySavedTheme();
+    observeSchemeAttribute();
+    observeBodyForPalette();
+  }
+
+  // Initial setup
+  setupThemePersistence();
+
+  // Re-apply on every DOMContentLoaded (instant navigation)
+  document.addEventListener("DOMContentLoaded", setupThemePersistence);
+})();