// ========== posthog.js ========== // ======================================== // POSTHOG INITIALIZATION (for custom events) // ======================================== // Mintlify initializes PostHog from docs.json with apiHost, apiKey, and sessionRecording // This script ensures autocapture and pageview capture are disabled to avoid duplicates (() => { // Check if PostHog is already fully initialized by Mintlify // We check for __loaded (set after full init) or _i being undefined (stub array has _i) const isPostHogLoaded = window.posthog && (window.posthog.__loaded === true || (typeof window.posthog.capture === "function" && !window.posthog._i)); if (isPostHogLoaded) { console.log("[PostHog] Using Mintlify-initialized instance"); // Disable autocapture and pageview since Mintlify handles them // Note: Mintlify should handle this via docs.json config return; } // Fallback: Initialize PostHog if Mintlify didn't console.log("[PostHog] Initializing fallback instance"); const ph = (window.posthog = []); ph._i = []; ph.init = (token, config, name) => { function f(fn) { return function () { const args = Array.prototype.slice.call(arguments); args.unshift(fn); ph.push(args); return ph; }; } const methods = [ "capture", "identify", "alias", "people.set", "onFeatureFlags", "reloadFeatureFlags", "register", "register_once", "unregister", "opt_out_capturing", "opt_in_capturing", "reset", ]; for (let i = 0; i < methods.length; i++) { ph[methods[i]] = f(methods[i]); } ph._i.push([token, config, name]); }; ph.__SV = 1; // Load PostHog script const script = document.createElement("script"); script.type = "text/javascript"; script.async = true; script.src = "https://us-assets.i.posthog.com/static/array.js"; const firstScript = document.getElementsByTagName("script")[0]; if (firstScript && firstScript.parentNode) { firstScript.parentNode.insertBefore(script, firstScript); } else { document.head.appendChild(script); } // Initialize with your project key (fallback only) ph.init("phc_xhC57kj0jUKFieH7EO1GEKaUQixVcPXguqJN4ep6UoQ", { api_host: "https://us.i.posthog.com", autocapture: false, // Mintlify already handles autocapture capture_pageview: false, // Mintlify already handles pageviews }); })(); // ========== init.js ========== // ======================================== // FEEDBACK SYSTEM STATE // ======================================== // Declared at top to ensure initialization before DOMContentLoaded fires. let feedbackListenersInitialized = false; let dialogKeydownListenerInitialized = false; let goodiesMenuListenersInitialized = false; let homepageScrollListenerInitialized = false; let selectionTimeout = null; let goodiesMenuOpen = false; let toastShownAt = 0; // Timestamp when toast was last shown (for Firefox race condition fix) // Wait for DOM to be ready if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initScripts); } else { initScripts(); } function initScripts() { // Remove FOUC by showing body after scripts initialize setTimeout(() => { document.body.classList.add("loaded"); }, 50); const logoContainer = document.querySelector( "#navbar > .max-w-8xl > div > .relative > .flex > .h-full > div:first-child", ); const navbar = document.querySelector("#navbar nav"); if (logoContainer && navbar) { logoContainer.appendChild(navbar); } // Apply text justification CSS applyTextJustification(); // Set page data attribute for CSS targeting setPageDataAttribute(); // Initialize persistent video background addPersistentVideoBackground(); // Setup homepage video fade on scroll setupHomepageVideoFade(); // Add changelog action buttons (like/share) addChangelogActionButtons(); // Collapse changelog sidebar groups by default collapseChangelogSidebar(); // Setup Toppie video pause on scroll setupToppieVideoPause(); // Make top-level navigation groups collapsible makeTopLevelGroupsCollapsible(); // Initialize feedback system initFeedbackSystem(); } // ========== text-justification.js ========== // Apply text justification CSS globally function applyTextJustification() { // Check if style already exists if (document.getElementById("text-justify-styles")) { return; } // Browser detection for logging purposes only // We now apply justified text to ALL browsers consistently const ua = navigator.userAgent.toLowerCase(); // Check for WebKit engine (Safari, Orion, and other WebKit browsers) const hasWebKit = ua.indexOf("webkit") !== -1; const hasChrome = ua.indexOf("chrome") !== -1; const hasChromium = ua.indexOf("chromium") !== -1; const hasEdg = ua.indexOf("edg") !== -1; // Edge const hasOPR = ua.indexOf("opr") !== -1; // Opera const hasOrion = ua.indexOf("orion") !== -1; // Safari: has webkit and safari, but NOT chrome/chromium/edge/opera const isSafari = hasWebKit && ua.indexOf("safari") !== -1 && !hasChrome && !hasChromium && !hasEdg && !hasOPR; // Orion: WebKit-based browser const isOrion = hasOrion || (hasWebKit && !hasChromium && !hasEdg && !hasOPR && (ua.indexOf("version/") !== -1 || !hasChrome)); const cssWebKitTest = CSS.supports && CSS.supports("-webkit-touch-callout", "none"); const isWebKit = isSafari || isOrion || cssWebKitTest; // FORCE JUSTIFIED TEXT ON ALL BROWSERS // Previously we used left-align for Safari/Orion, but now we want consistency const forceJustify = true; const style = document.createElement("style"); style.id = "text-justify-styles"; // Apply justified text to ALL browsers for consistency // Use forceJustify flag to override browser-specific behavior const textAlign = forceJustify ? "justify" : isWebKit ? "left" : "justify"; const textJustify = forceJustify ? "inter-word" : isWebKit ? "auto" : "inter-word"; const useHyphens = forceJustify ? "auto" : isWebKit ? "none" : "auto"; style.textContent = ` /* Apply text alignment to all paragraphs and list items in main content */ /* EXCLUDE elements with inline style attribute (they have their own settings) */ article p:not(pre p):not(code p):not([style]), article li:not(pre li):not(code li):not([style]), main p:not(pre p):not(code p):not([style]):not(.hero-gradient p), main li:not(pre li):not(code li):not([style]), [role="main"] p:not(pre p):not(code p):not([style]), [role="main"] li:not(pre li):not(code li):not([style]) { text-align: ${textAlign} !important; text-justify: ${textJustify} !important; hyphens: ${useHyphens} !important; -webkit-hyphens: ${useHyphens} !important; -ms-hyphens: ${useHyphens} !important; -webkit-font-smoothing: antialiased !important; } /* Elements with no-justify/no-hyphenate classes should NEVER be affected */ .no-justify, .no-hyphenate, .hero-gradient, .hero-gradient *, .hero-gradient p, .hero-gradient h1, .hero-gradient span, .hero-gradient div, h1.no-hyphenate, p.no-hyphenate, p.no-justify { text-align: left !important; hyphens: none !important; -webkit-hyphens: none !important; -moz-hyphens: none !important; -ms-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* Apply to mdx-content spans (Mintlify renders text as spans) */ .mdx-content > span:not(.last-updated-component span):not(.hero-gradient span), .mdx-content > div > span:not(.last-updated-component span):not(.hero-gradient span) { display: block !important; text-align: ${textAlign} !important; text-justify: ${textJustify} !important; hyphens: ${useHyphens} !important; -webkit-hyphens: ${useHyphens} !important; -ms-hyphens: ${useHyphens} !important; -webkit-font-smoothing: antialiased !important; margin-bottom: 1.5rem !important; } /* Ensure last-updated component span is not affected */ .last-updated-component span { display: inline-flex !important; margin-bottom: 0 !important; } /* Apply to Steps component content - target all possible selectors */ .steps .prose span, .step .prose span, .prose.dark\\:prose-invert span, [class*="step"] p, [class*="step"] span, [class*="Step"] p, [class*="Step"] span, ol[class*="step"] li, ol[class*="step"] li p, ol[class*="step"] li span, ul[class*="step"] li, ul[class*="step"] li p, ul[class*="step"] li span, li[class*="step"] p, li[class*="step"] span, /* Mintlify Steps component specific selectors */ [data-component="steps"] p, [data-component="steps"] span, [data-component="steps"] li, [data-component="step"] p, [data-component="step"] span, /* Generic numbered list items that might be Steps */ ol > li > div > p, ol > li > div > span, ol > li > p, ol > li > span { text-align: ${textAlign} !important; text-justify: ${textJustify} !important; hyphens: ${useHyphens} !important; -webkit-hyphens: ${useHyphens} !important; -ms-hyphens: ${useHyphens} !important; -webkit-font-smoothing: antialiased !important; } /* Apply to divs with inline style textAlign justify */ div[style*="textAlign: \\"justify\\""]:not(.hero-gradient div), div[style*="text-align: justify"]:not(.hero-gradient div), div[style*="textAlign:\\"justify\\""]:not(.hero-gradient div), div[style*="textAlign: 'justify'"]:not(.hero-gradient div) { text-align: ${textAlign} !important; text-justify: ${textJustify} !important; hyphens: ${useHyphens} !important; -webkit-hyphens: ${useHyphens} !important; } /* Apply text alignment to table cells */ table td { text-align: ${textAlign} !important; hyphens: ${useHyphens}; } /* Exclude specific elements that shouldn't be justified */ button p, button span, .badge p, .badge span, .card-title p, .card-title span, nav p, nav span, header p, header span, footer p, footer span, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { text-align: left !important; } `; document.head.appendChild(style); // Log detection details for debugging console.log(`[Text Justification] Browser detection:`, { userAgent: ua, isSafari, isOrion, cssWebKitTest, isWebKit, forceJustify, appliedStyle: "justified (forced on all browsers)", }); } // ========== video-background.js ========== // Set data-page attribute on body for CSS targeting function setPageDataAttribute() { const path = window.location.pathname; document.body.setAttribute("data-page", path); } // Named scroll handler for homepage video fade (must be named for removeEventListener) function handleHomepageScroll() { const videos = document.querySelectorAll(".persistent-bg-video"); if (videos.length === 0) return; // Find trigger element each time (in case DOM changed) const headings = document.querySelectorAll("h1, h2"); let triggerElement = null; for (const heading of headings) { if (heading.textContent.includes("Try It Out")) { triggerElement = heading; break; } } if (!triggerElement) return; const triggerPoint = triggerElement.offsetTop - window.innerHeight / 2; const scrolled = window.scrollY; const opacity = Math.max(0, 1 - (scrolled - (triggerPoint - 300)) / 300); videos.forEach((video) => { video.style.opacity = opacity * 0.2; }); } // Setup video fade on scroll for homepage only function setupHomepageVideoFade() { const path = window.location.pathname; if (path !== "/" && path !== "") { return; } // Only add scroll listener once if (!homepageScrollListenerInitialized) { window.addEventListener("scroll", handleHomepageScroll); homepageScrollListenerInitialized = true; } } // Collapse all changelog sidebar groups on page load function collapseChangelogSidebar() { if (!window.location.pathname.includes("/changelog")) { return; } // Function to collapse groups const collapseGroups = () => { // Find all expanded group buttons in the sidebar const expandedGroups = document.querySelectorAll( '#navigation-items button[aria-expanded="true"]', ); // Get current page path to determine which group should stay open const currentPath = window.location.pathname; expandedGroups.forEach((button) => { // Get the group's content (next sibling or child ul) const groupContent = button.nextElementSibling || button.parentElement.querySelector("ul"); // Check if current page is in this group let isCurrentGroup = false; if (groupContent) { const links = groupContent.querySelectorAll("a"); links.forEach((link) => { if ( link.getAttribute("href") && currentPath.includes(link.getAttribute("href")) ) { isCurrentGroup = true; } }); } // Only collapse if it's not the current group if (!isCurrentGroup) { button.click(); } }); }; // Run multiple times to catch late-rendering elements setTimeout(collapseGroups, 100); setTimeout(collapseGroups, 300); setTimeout(collapseGroups, 600); } // Add persistent video background to homepage only function addPersistentVideoBackground() { const path = window.location.pathname; const isHomepage = path === "/" || path === ""; const existingVideos = document.querySelectorAll(".persistent-bg-video"); // If NOT on homepage, remove any existing videos if (!isHomepage) { if (existingVideos.length > 0) { existingVideos.forEach((video) => { video.pause(); video.remove(); }); console.log("[Video] Removed videos (not on homepage)"); } return; } // If on homepage and videos already exist, do nothing if (existingVideos.length > 0) { return; } // Create videos only on homepage const videoSrc = "https://storage.googleapis.com/big-content-pub/combined-light.mp4"; // Create two video elements for seamless loop crossfade const video1 = document.createElement("video"); const video2 = document.createElement("video"); [video1, video2].forEach((video, index) => { video.className = "persistent-bg-video"; video.muted = true; video.playsInline = true; video.preload = "auto"; video.src = videoSrc; // Style the video video.style.position = "fixed"; video.style.top = "0"; video.style.left = "0"; video.style.width = "100%"; video.style.height = "100%"; video.style.objectFit = "cover"; video.style.zIndex = "-1"; video.style.opacity = index === 0 ? "0.2" : "0"; video.style.pointerEvents = "none"; video.style.transition = "opacity 0.5s ease-in-out"; document.body.prepend(video); }); // Start playing the first video video1.play().catch((err) => console.error("Video play error:", err)); // Crossfade between videos for seamless loop video1.addEventListener("timeupdate", () => { if (video1.duration - video1.currentTime < 0.5) { video2.currentTime = 0; video2.play(); video2.style.opacity = "0.2"; video1.style.opacity = "0"; } }); video2.addEventListener("timeupdate", () => { if (video2.duration - video2.currentTime < 0.5) { video1.currentTime = 0; video1.play(); video1.style.opacity = "0.2"; video2.style.opacity = "0"; } }); console.log("[Video] Created videos on homepage"); } // ========== changelog.js ========== // Add like and share buttons to changelog pages function addChangelogActionButtons() { const path = window.location.pathname; // Handle changelog index page if (path.endsWith("/changelog/") || path.endsWith("/changelog")) { addChangelogIndexButtons(); return; } // Only on individual changelog pages if (!path.includes("/changelog/")) { return; } // Check if buttons already exist if (document.querySelector(".changelog-actions")) { return; } // Wait a bit for the page to fully render setTimeout(() => { if (document.querySelector(".changelog-actions")) return; // Find the article or main content area const article = document.querySelector("article") || document.querySelector("main"); if (!article) { console.log("No article found for changelog buttons"); return; } // Create action buttons container const actionsDiv = document.createElement("div"); actionsDiv.className = "changelog-actions"; actionsDiv.style.cssText = "display: flex; justify-content: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb;"; // Like button (purely visual, no storage) const likeBtn = document.createElement("button"); likeBtn.innerHTML = "🤍"; likeBtn.style.cssText = ` display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px; border: 1px solid #d1d5db; background: transparent; color: #6b7280; font-size: 14px; cursor: pointer; transition: all 0.2s ease; `; likeBtn.onclick = function () { const isLiked = this.dataset.liked === "true"; this.dataset.liked = isLiked ? "false" : "true"; this.innerHTML = isLiked ? "🤍" : "❤️"; this.style.borderColor = isLiked ? "#d1d5db" : "#ec4899"; this.style.background = isLiked ? "transparent" : "rgba(236, 72, 153, 0.1)"; this.style.transform = isLiked ? "scale(1)" : "scale(1.1)"; setTimeout(() => { this.style.transform = "scale(1)"; }, 150); }; // Share button const shareBtn = document.createElement("button"); shareBtn.innerHTML = "↗ Share"; shareBtn.style.cssText = ` display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px; border: 1px solid #d1d5db; background: transparent; color: #6b7280; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; `; shareBtn.onclick = async function () { const url = window.location.href; const title = document.title; if (navigator.share) { try { await navigator.share({ title, url }); return; } catch (e) {} } try { await navigator.clipboard.writeText(url); this.innerHTML = "✓ Copied!"; this.style.borderColor = "#22c55e"; this.style.color = "#22c55e"; setTimeout(() => { this.innerHTML = "↗ Share"; this.style.borderColor = "#d1d5db"; this.style.color = "#6b7280"; }, 2000); } catch (e) { console.error("Failed to copy:", e); } }; actionsDiv.appendChild(likeBtn); actionsDiv.appendChild(shareBtn); // Append at the bottom of the article article.appendChild(actionsDiv); console.log("Changelog action buttons added"); }, 1000); } // Add inline buttons to changelog index page entries function addChangelogIndexButtons() { setTimeout(() => { // Find all h2 headings with links (changelog entries) const entryHeadings = document.querySelectorAll( 'h2[id] a[href*="/changelog/"]', ); entryHeadings.forEach((link) => { const h2 = link.closest("h2"); if (!h2 || h2.querySelector(".changelog-inline-actions")) return; const entryUrl = link.href; // Make h2 position relative for absolute positioning of buttons h2.style.position = "relative"; h2.style.paddingRight = "70px"; // Make room for buttons h2.style.minHeight = "32px"; // Ensure minimum height for button alignment // Create inline action buttons container - positioned absolutely at top-right const actionsSpan = document.createElement("span"); actionsSpan.className = "changelog-inline-actions"; actionsSpan.style.cssText = ` position: absolute; right: 0; top: 4px; display: flex; gap: 6px; align-items: center; `; // Like button - fixed size with perfect centering const likeBtn = document.createElement("button"); likeBtn.innerHTML = "🤍"; likeBtn.title = "Like this update"; likeBtn.style.cssText = ` width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #4b5563; background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; padding: 0; margin: 0; line-height: 1; `; likeBtn.onclick = function (e) { e.preventDefault(); e.stopPropagation(); this.innerHTML = "❤️"; this.style.borderColor = "#ec4899"; }; // Share button - fixed size with perfect centering const shareBtn = document.createElement("button"); shareBtn.innerHTML = "↗"; shareBtn.title = "Copy link"; shareBtn.style.cssText = ` width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #4b5563; background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; padding: 0; margin: 0; line-height: 1; `; shareBtn.onclick = async function (e) { e.preventDefault(); e.stopPropagation(); await navigator.clipboard.writeText(entryUrl); this.innerHTML = "✓"; this.style.borderColor = "#22c55e"; this.style.color = "#22c55e"; setTimeout(() => { this.innerHTML = "↗"; this.style.borderColor = "#4b5563"; this.style.color = "#9ca3af"; }, 2000); }; actionsSpan.appendChild(likeBtn); actionsSpan.appendChild(shareBtn); h2.appendChild(actionsSpan); }); }, 1000); } // ========== navigation.js ========== // Make top-level navigation groups collapsible var collapsibleGroupsSetup = false; function makeTopLevelGroupsCollapsible() { // Only run on Integration Overview tab pages const path = window.location.pathname; if ( !path.includes("/en/overview") && !path.includes("/en/ad-platform") && !path.includes("/en/ad-server") && !path.includes("/en/toppie") && !path.includes("/en/advanced-integrations") && !path.includes("/en/api/") ) { return; } // Prevent duplicate setup if (collapsibleGroupsSetup) { return; } setTimeout(() => { // Find all h5 headings in the sidebar (top-level group headers) const sidebarHeadings = document.querySelectorAll("h5"); if (sidebarHeadings.length === 0) { return; } collapsibleGroupsSetup = true; sidebarHeadings.forEach((heading) => { // Skip if already processed if (heading.dataset.collapsible === "true") { return; } heading.dataset.collapsible = "true"; // DOM structure: grandparent DIV > parent DIV (contains h5) + UL (sibling) // The UL is a sibling of the h5's parent div, both inside grandparent const parentDiv = heading.parentElement; const grandparentDiv = parentDiv ? parentDiv.parentElement : null; const pagesList = grandparentDiv ? grandparentDiv.querySelector("ul") : null; if (!pagesList) { return; } // Make the parent div (containing h5) clickable parentDiv.style.cursor = "pointer"; parentDiv.style.userSelect = "none"; // Style the h5 for flex layout heading.style.display = "flex"; heading.style.alignItems = "center"; heading.style.justifyContent = "space-between"; heading.style.width = "100%"; // Add chevron icon const chevron = document.createElement("span"); chevron.innerHTML = "▼"; chevron.style.cssText = "font-size: 10px; transition: transform 0.2s ease; margin-left: 8px; flex-shrink: 0;"; chevron.className = "collapse-chevron"; heading.appendChild(chevron); // Click handler on the parent div to toggle parentDiv.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const isCollapsed = pagesList.style.display === "none"; if (isCollapsed) { pagesList.style.display = ""; chevron.style.transform = "rotate(0deg)"; } else { pagesList.style.display = "none"; chevron.style.transform = "rotate(-90deg)"; } }); }); console.log("[Nav] Top-level groups made collapsible"); }, 500); } // ========== toppie.js ========== // Setup Toppie: video for Chrome/Firefox/Brave, static image for Safari/Orion var toppieSetupComplete = false; function setupToppieVideoPause() { const path = window.location.pathname; // Only run on homepage if (path !== "/" && path !== "") { return; } // Prevent duplicate setup if (toppieSetupComplete) { return; } toppieSetupComplete = true; setTimeout(() => { const video = document.getElementById("toppie-video"); const fallbackImg = document.getElementById("toppie-fallback"); const container = document.getElementById("toppie-container"); if (!video || !fallbackImg) { console.log("[Toppie] Elements not found"); return; } // Detect Safari/Orion browsers - they get static image only const ua = navigator.userAgent.toLowerCase(); const isSafari = ua.indexOf("safari") !== -1 && ua.indexOf("chrome") === -1 && ua.indexOf("chromium") === -1; const isOrion = ua.indexOf("orion") !== -1; if (isSafari || isOrion) { // Safari/Orion: show static image, hide video console.log("[Toppie] Safari/Orion detected - showing static image"); video.style.display = "none"; fallbackImg.style.display = "block"; return; } // Chrome/Firefox/Brave: show video, hide image console.log("[Toppie] Chrome/Firefox/Brave detected - preparing video"); // Handle video error - show fallback image with detailed logging video.addEventListener("error", (e) => { console.error("[Toppie] Video error:", { error: video.error, code: video.error?.code, message: video.error?.message, networkState: video.networkState, readyState: video.readyState, src: video.currentSrc, }); video.style.display = "none"; fallbackImg.style.display = "block"; }); // Wait for video to be ready before showing it const showVideo = () => { console.log("[Toppie] Video ready, showing video"); video.style.display = "block"; fallbackImg.style.display = "none"; video.play().catch((err) => { console.log("[Toppie] Autoplay blocked:", err.message); // Autoplay blocked is OK - video still shows, just paused }); }; // If video already loaded, show immediately if (video.readyState >= 2) { showVideo(); } else { // Wait for video to load video.addEventListener("loadeddata", showVideo, { once: true }); // Fallback timeout - if video doesn't load in 3 seconds, show image setTimeout(() => { if (video.style.display !== "block") { console.log("[Toppie] Video load timeout, showing fallback"); video.style.display = "none"; fallbackImg.style.display = "block"; } }, 3000); } // Setup IntersectionObserver for pause/play on scroll if (container) { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { if (video.paused) { video.play().catch(() => {}); } } else { if (!video.paused) { video.pause(); } } }); }, { threshold: 0.1 }, ); observer.observe(container); } }, 300); } // ========== feedback.js ========== // ======================================== // FEEDBACK SYSTEM // ======================================== // Named handler for dialog Escape key (must be named for removeEventListener) function handleDialogEscapeKey(e) { if (e.key === "Escape" && FeedbackState.get().isDialogOpen) { closeFeedbackDialog(); } } // Named handlers for goodies menu (must be named for removeEventListener) function handleGoodiesClickOutside(e) { const container = document.getElementById("goodies-container"); if (goodiesMenuOpen && container && !container.contains(e.target)) { closeGoodiesMenu(); } } function handleGoodiesEscapeKey(e) { if (e.key === "Escape" && goodiesMenuOpen) { closeGoodiesMenu(); } } // Feedback State Manager (closure-based) const FeedbackState = (() => { let state = { selectedText: null, selectionRange: null, isToastVisible: false, isDialogOpen: false, feedbackType: null, // 'text-selection' or 'general' }; return { get: () => ({ ...state }), set: (updates) => { state = { ...state, ...updates }; }, clear: () => { state = { ...state, selectedText: null, selectionRange: null, isToastVisible: false, feedbackType: null, }; }, }; })(); // Security: Sanitize text to prevent XSS function sanitizeText(text) { if (!text || typeof text !== "string") return ""; // Use textContent to escape HTML entities const div = document.createElement("div"); div.textContent = text; // Additional cleanup: remove null bytes and control characters const sanitized = div.innerHTML .replace(/\0/g, "") // null bytes .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, ""); // control chars return sanitized.slice(0, 5000); // Limit length } // Security: Validate feedback data function validateFeedback(data) { if (!data.feedback || data.feedback.trim().length === 0) { return { valid: false, error: "Feedback cannot be empty" }; } if (data.feedback.length > 5000) { return { valid: false, error: "Feedback too long (max 5000 chars)" }; } // Check for suspicious patterns (XSS, injection attempts) const suspiciousPatterns = new RegExp( [ " w.length > 0); // Minimum word count (at least 3 words for meaningful feedback) if (words.length < 3) { return { valid: false, error: "Please add more detail", }; } // Check for gibberish - repeated characters (e.g., "aaaaaaa", "asdfasdf") if (/(.)\1{4,}/.test(feedback)) { return { valid: false, error: "Please enter valid feedback" }; } // Check for too many very short words (gibberish like "we ew we ew") const shortWords = words.filter((w) => w.length <= 2); if (shortWords.length > words.length * 0.6) { return { valid: false, error: "Please enter valid feedback" }; } // Check for low unique word ratio (repetitive gibberish) const uniqueWords = new Set(words); if (words.length >= 4 && uniqueWords.size < words.length * 0.4) { return { valid: false, error: "Please enter valid feedback" }; } // Check average word length - real feedback has longer words const avgWordLength = words.reduce((sum, w) => sum + w.length, 0) / words.length; if (avgWordLength < 2.5 && words.length < 8) { return { valid: false, error: "Please enter valid feedback" }; } // Check for repeated syllable patterns (catches "ewewe", "wewew", "lalala") const isGibberishWord = (word) => { if (word.length < 4) return false; // Check for 2-char pattern repeats: "wewe", "ewew", "lala" for (let i = 0; i < word.length - 3; i++) { const pattern = word.slice(i, i + 2); if (word.slice(i + 2, i + 4) === pattern) return true; } // Check for 3-char pattern repeats: "abcabc" for (let i = 0; i < word.length - 5; i++) { const pattern = word.slice(i, i + 3); if (word.slice(i + 3, i + 6) === pattern) return true; } return false; }; const gibberishWords = words.filter(isGibberishWord); // Block if ANY gibberish words found (even mixed with real words) if (gibberishWords.length > 0) { return { valid: false, error: "Please enter valid feedback" }; } // Check for non-English-like letter patterns (all vowels or all consonants) const vowelPattern = /^[aeiou]+$/i; const consonantPattern = /^[bcdfghjklmnpqrstvwxyz]+$/i; const weirdPatternWords = words.filter( (w) => w.length > 2 && (vowelPattern.test(w) || consonantPattern.test(w)), ); if (weirdPatternWords.length > words.length * 0.5) { return { valid: false, error: "Please enter valid feedback" }; } // Check if feedback contains recognizable English words const commonEnglishWords = new Set([ "the", "be", "to", "of", "and", "a", "in", "that", "have", "i", "it", "for", "not", "on", "with", "he", "as", "you", "do", "at", "this", "but", "his", "by", "from", "they", "we", "say", "her", "she", "or", "an", "will", "my", "one", "all", "would", "there", "their", "what", "so", "up", "out", "if", "about", "who", "get", "which", "go", "me", "is", "are", "was", "were", "been", "being", "has", "had", "does", "did", "when", "make", "can", "like", "time", "no", "just", "him", "know", "take", "people", "into", "year", "your", "good", "some", "could", "them", "see", "other", "than", "then", "now", "look", "only", "come", "its", "over", "think", "also", "back", "after", "use", "two", "how", "our", "work", "first", "well", "way", "even", "new", "want", "because", "any", "these", "give", "day", "most", "us", "very", "much", "here", "more", "such", // Doc-related words "page", "api", "code", "error", "bug", "help", "issue", "docs", "link", "broken", "missing", "wrong", "typo", "update", "add", "change", "improve", "example", "unclear", "confusing", "great", "thanks", "please", "need", "should", "doesn't", "can't", "isn't", "won't", "didn't", "haven't", ]); const recognizedWords = words.filter((w) => commonEnglishWords.has(w)); // Require at least 1 recognized word, or 30% for longer feedback const minRecognized = Math.max(1, Math.floor(words.length * 0.3)); if (recognizedWords.length < minRecognized && words.length < 8) { return { valid: false, error: "Please enter valid feedback" }; } // Check for keyboard mashing patterns const keyboardPatterns = [ /asdf/i, /qwer/i, /zxcv/i, /hjkl/i, // Removed: /^[a-z]{10,}$/i - too aggressive, blocks "documentation", "configuration", etc. ]; const hasKeyboardMash = keyboardPatterns.some((p) => p.test(feedback)); if (hasKeyboardMash && words.length < 5) { return { valid: false, error: "Please enter valid feedback" }; } // Common spam/test phrases const spamPhrases = [ "test", "testing", "hello", "hi", "hey", "lorem ipsum", "foo bar", "blah blah", "abc", "123", "aaa", "xxx", "asdf", "qwerty", ]; // If entire feedback is just a spam phrase if (spamPhrases.includes(feedback)) { return { valid: false, error: "Please be more specific", }; } // Check if feedback is completely unrelated (food, random topics) // Only flag if it doesn't contain any documentation-related words const docRelatedWords = [ "doc", "page", "api", "code", "example", "error", "bug", "issue", "help", "question", "unclear", "confus", "wrong", "correct", "update", "add", "remove", "change", "improve", "suggest", "typo", "link", "broken", "missing", "need", "want", "would", "should", "could", "please", "thanks", "great", "good", "bad", "better", "work", "doesn't", "can't", "explain", "understand", "section", "paragraph", "text", "image", "diagram", "table", "list", "step", "guide", "tutorial", "reference", "sdk", "integration", "endpoint", "request", "response", "parameter", "field", "value", "format", "syntax", "function", "method", "class", "object", "array", "string", "number", "boolean", "null", "undefined", "return", "callback", "async", "await", "promise", "fetch", "http", "json", "xml", "html", "css", "javascript", "python", "java", "php", "ruby", "swift", "kotlin", "typescript", "react", "node", "npm", "install", "setup", "config", "setting", "option", "feature", "version", "release", "changelog", "topsort", "auction", "bid", "campaign", "banner", "listing", "vendor", "catalog", "product", "event", "click", "impression", "conversion", "attribution", "analytics", "report", "dashboard", "webhook", "segment", "target", ]; const hasRelevantWord = docRelatedWords.some( (word) => feedback.includes(word) || words.some((w) => w.includes(word)), ); // Check for obviously off-topic content (always check, regardless of length) const offTopicPatterns = [ /\bcheese\b/i, /\beggs?\b/i, /\brice\b/i, /\bchocolate\b/i, /\bcake\b/i, /\bpizza\b/i, /\bburger\b/i, /\bfood\b/i, /\bcooking\b/i, /\brecipe\b/i, /\bweather\b/i, /\bmovie\b/i, /\bmusic\b/i, // Removed: /\bgame\b/i - legitimate in game dev, game theory docs /\bsport\b/i, /\blottery\b/i, /\bcasino\b/i, // Removed: /\bcrypto\b/i - could be cryptography /\bbitcoin\b/i, /\bethereum\b/i, /\bforex\b/i, /\bdating\b/i, /\bsexy\b/i, /hot singles/i, /make money/i, /get rich/i, /free iphone/i, /congratulations/i, /you won/i, /click here/i, /buy now/i, /limited time/i, /act now/i, ]; const isOffTopic = offTopicPatterns.some((p) => p.test(feedback)); if (isOffTopic && !hasRelevantWord) { return { valid: false, error: "Please share docs feedback", }; } // Short feedback MUST contain at least one doc-related word if (!hasRelevantWord && words.length < 8) { return { valid: false, error: "Please be more specific about the docs", }; } return { valid: true }; } // Named handler functions for proper cleanup function handleSelectionChange() { clearTimeout(selectionTimeout); selectionTimeout = setTimeout(() => { handleSelection(); }, 300); // Debounce } function handleMouseUp() { setTimeout(handleSelection, 50); } // Initialize the feedback system function initFeedbackSystem() { // Only add event listeners once (across all pages) if (!feedbackListenersInitialized) { document.addEventListener("selectionchange", handleSelectionChange); document.addEventListener("mouseup", handleMouseUp); feedbackListenersInitialized = true; } // createFeedbackButton has its own guard to prevent duplicates createFeedbackButton(); } function handleSelection() { const selection = window.getSelection(); const selectedText = selection.toString().trim(); // Ignore empty selections if (!selectedText || selectedText.length === 0) { hideToast(); return; } // Check if selection is within article content if (!isSelectionInArticle(selection)) { hideToast(); return; } // Check if lightbox or modal is open if (isModalOpen()) { hideToast(); return; } // Valid selection - show toast const wordCount = selectedText.split(/\s+/).length; FeedbackState.set({ selectedText: sanitizeText(selectedText), selectionRange: selection.rangeCount > 0 ? selection.getRangeAt(0) : null, isToastVisible: true, }); showToast(wordCount); } function isSelectionInArticle(selection) { if (selection.rangeCount === 0) return false; const range = selection.getRangeAt(0); const container = range.commonAncestorContainer; // Find closest parent element const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container; if (!element) return false; // Excluded elements - always block these const excludedSelectors = [ "nav", // Removed: "header" - homepage hero content is often in header "footer", "aside", "code", "pre", "button", "input", "textarea", ".lightbox", ".modal", '[role="dialog"]', "#feedback-toast", "#feedback-dialog", "#general-feedback-btn", ".goodies-container", ]; for (const excluded of excludedSelectors) { if (element.closest(excluded)) { return false; } } // Check if inside article/main content (including homepage) const articleSelectors = [ "article", "main", '[role="main"]', ".mdx-content", ".prose", ".hero-gradient", // Homepage hero section ".content", "#content", '[class*="content"]', // Catch content-related classes "section", // Many homepages use section elements ]; for (const selector of articleSelectors) { if (element.closest(selector)) { return true; } } // Homepage fallback: if on homepage and inside body, allow it // (since homepage structure varies and may not have standard article elements) const path = window.location.pathname; if (path === "/" || path === "") { // On homepage, allow selection anywhere except excluded areas (already checked above) return true; } return false; } function isModalOpen() { return !!( document.querySelector(".lightbox.open") || document.querySelector('[role="dialog"]') || document.querySelector(".modal.open") || document.body.classList.contains("modal-open") || FeedbackState.get().isDialogOpen ); } // Toast Component function createToastElement() { const toast = document.createElement("div"); toast.id = "feedback-toast"; toast.className = "feedback-toast"; toast.innerHTML = ` `; document.body.appendChild(toast); // Event listeners toast.querySelector(".toast-submit-btn").addEventListener("click", () => { openFeedbackDialog("text-selection"); }); toast.querySelector(".toast-close-btn").addEventListener("click", () => { hideToast(); window.getSelection().removeAllRanges(); }); return toast; } function showToast(wordCount) { let toast = document.getElementById("feedback-toast"); if (!toast) { toast = createToastElement(); } const textSpan = toast.querySelector(".toast-text"); textSpan.textContent = `${wordCount} word${ wordCount !== 1 ? "s" : "" } selected`; // Track when toast was shown (for Firefox race condition fix) toastShownAt = Date.now(); // Animate in requestAnimationFrame(() => { toast.classList.add("visible"); }); } function hideToast(force = false) { const toast = document.getElementById("feedback-toast"); if (!toast) return; // Firefox fix: Don't hide if toast was just shown (race condition with selectionchange) // Grace period of 500ms to let selection stabilize if (!force && Date.now() - toastShownAt < 500) { return; } toast.classList.remove("visible"); FeedbackState.set({ isToastVisible: false }); } // Feedback Dialog function createFeedbackDialog() { const dialog = document.createElement("div"); dialog.id = "feedback-dialog"; dialog.className = "feedback-dialog-overlay"; dialog.innerHTML = `

SELECTED TEXT

`; document.body.appendChild(dialog); // Event listeners dialog .querySelector(".dialog-close-btn") .addEventListener("click", closeFeedbackDialog); dialog .querySelector(".btn-cancel") .addEventListener("click", closeFeedbackDialog); dialog.addEventListener("click", (e) => { if (e.target === dialog) { closeFeedbackDialog(); } }); // Escape key to close (only add once - uses named handler for cleanup) if (!dialogKeydownListenerInitialized) { document.addEventListener("keydown", handleDialogEscapeKey); dialogKeydownListenerInitialized = true; } dialog .querySelector("#feedback-form") .addEventListener("submit", handleFeedbackSubmit); return dialog; } function openFeedbackDialog(type = "general") { hideToast(); let dialog = document.getElementById("feedback-dialog"); if (!dialog) { dialog = createFeedbackDialog(); } const state = FeedbackState.get(); // Update page context const pageContextEl = dialog.querySelector(".page-context-text"); if (pageContextEl) { // Get clean page title (remove site name suffix if present) const pageTitle = document.title.split(" | ")[0].split(" - ")[0].trim(); pageContextEl.textContent = pageTitle || window.location.pathname; pageContextEl.title = window.location.href; // Full URL on hover } // Show selected text if text-selection type const preview = dialog.querySelector(".selected-text-preview"); if (type === "text-selection" && state.selectedText) { preview.style.display = "block"; preview.querySelector(".selected-text-content").textContent = state.selectedText; } else { preview.style.display = "none"; } // Show dialog dialog.classList.add("visible"); // Focus textarea setTimeout(() => { dialog.querySelector("#feedback-textarea").focus(); }, 300); FeedbackState.set({ isDialogOpen: true, feedbackType: type }); } function closeFeedbackDialog() { const dialog = document.getElementById("feedback-dialog"); if (!dialog) return; dialog.classList.remove("visible"); // Reset form setTimeout(() => { const form = dialog.querySelector("#feedback-form"); if (form) form.reset(); const status = dialog.querySelector(".form-status"); if (status) { status.style.display = "none"; status.className = "form-status"; } }, 300); FeedbackState.clear(); FeedbackState.set({ isDialogOpen: false }); // Clear text selection window.getSelection().removeAllRanges(); } async function handleFeedbackSubmit(e) { e.preventDefault(); const form = e.target; const submitBtn = form.querySelector(".btn-submit"); const statusDiv = form.querySelector(".form-status"); const formData = new FormData(form); const state = FeedbackState.get(); const feedbackData = { feedback: formData.get("feedback"), email: formData.get("email") || null, selectedText: state.selectedText || null, feedbackType: state.feedbackType, pageUrl: window.location.href, pageTitle: document.title, timestamp: new Date().toISOString(), }; // Validate const validation = validateFeedback(feedbackData); if (!validation.valid) { statusDiv.style.display = "block"; statusDiv.className = "form-status error"; statusDiv.textContent = validation.error; return; } // Disable submit button submitBtn.disabled = true; submitBtn.textContent = "Sending..."; try { await submitFeedback(feedbackData); // Success statusDiv.style.display = "block"; statusDiv.className = "form-status success"; statusDiv.textContent = "✓ Thank you for your feedback!"; // Track with PostHog (try both window.posthog and global posthog) const ph = window.posthog || (typeof posthog !== "undefined" ? posthog : null); if (ph && typeof ph.capture === "function") { ph.capture("feedback_submitted", { feedbackType: feedbackData.feedbackType, hasSelectedText: !!feedbackData.selectedText, pageUrl: feedbackData.pageUrl, }); } // Close dialog after delay setTimeout(() => { closeFeedbackDialog(); }, 2000); } catch (error) { // Error - show specific error message (rate limit, validation, etc.) statusDiv.style.display = "block"; statusDiv.className = "form-status error"; statusDiv.textContent = `✗ ${ error.message || "Failed to send feedback. Please try again." }`; submitBtn.disabled = false; submitBtn.textContent = "Send Feedback"; } } // Rate limiting for feedback submissions var lastFeedbackSubmission = 0; var FEEDBACK_RATE_LIMIT_MS = 30000; // 30 seconds between submissions // API Integration - sends to PostHog async function submitFeedback(data) { // Rate limiting check const now = Date.now(); if (now - lastFeedbackSubmission < FEEDBACK_RATE_LIMIT_MS) { const waitTime = Math.ceil( (FEEDBACK_RATE_LIMIT_MS - (now - lastFeedbackSubmission)) / 1000, ); throw new Error(`Please wait ${waitTime} seconds before submitting again`); } const validation = validateFeedback(data); if (!validation.valid) { throw new Error(validation.error); } // Sanitize all text fields before sending const sanitizedData = { feedback: sanitizeText(data.feedback), email: data.email ? data.email.trim().toLowerCase() : null, selectedText: data.selectedText ? sanitizeText(data.selectedText) : null, feedbackType: data.feedbackType, pageUrl: data.pageUrl, pageTitle: sanitizeText(data.pageTitle || ""), timestamp: data.timestamp, userAgent: navigator.userAgent.slice(0, 200), }; // Send to PostHog as detailed event (for analytics) const ph = window.posthog || (typeof posthog !== "undefined" ? posthog : null); if (ph && typeof ph.capture === "function") { ph.capture("detailed_feedback", sanitizedData); console.log("[Feedback] Sent to PostHog:", sanitizedData); } else { console.warn("[Feedback] PostHog not available"); } // Send to Formspree for readable dashboard and email notifications try { const formspreeResponse = await fetch("https://formspree.io/f/myzrvqok", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ feedback: sanitizedData.feedback, email: sanitizedData.email, selectedText: sanitizedData.selectedText, feedbackType: sanitizedData.feedbackType, pageUrl: sanitizedData.pageUrl, pageTitle: sanitizedData.pageTitle, timestamp: sanitizedData.timestamp, }), }); if (formspreeResponse.ok) { console.log("[Feedback] Sent to Formspree"); } else { console.warn("[Feedback] Formspree returned:", formspreeResponse.status); } } catch (e) { console.warn("[Feedback] Formspree failed:", e); // Don't throw - PostHog already captured it as backup } // Update rate limit timestamp lastFeedbackSubmission = now; return { success: true }; } // Goodies Menu - Multi-function floating button function createFeedbackButton() { // Check if container already exists if (document.getElementById("goodies-container")) { return; } // Create container for the menu system const container = document.createElement("div"); container.id = "goodies-container"; container.className = "goodies-container"; container.innerHTML = ` `; document.body.appendChild(container); // Event listeners const trigger = container.querySelector("#goodies-trigger"); trigger.addEventListener("click", () => { toggleGoodiesMenu(); }); // Menu item actions container.querySelectorAll(".goodies-menu-item").forEach((item) => { item.addEventListener("click", () => { const action = item.dataset.action; handleGoodiesAction(action); }); }); // Close menu when clicking outside or pressing escape (only add once) if (!goodiesMenuListenersInitialized) { document.addEventListener("click", handleGoodiesClickOutside); document.addEventListener("keydown", handleGoodiesEscapeKey); goodiesMenuListenersInitialized = true; } } function toggleGoodiesMenu() { if (goodiesMenuOpen) { closeGoodiesMenu(); } else { openGoodiesMenu(); } } function openGoodiesMenu() { const container = document.getElementById("goodies-container"); const trigger = document.getElementById("goodies-trigger"); if (!container || !trigger) return; container.classList.add("open"); trigger.setAttribute("aria-expanded", "true"); goodiesMenuOpen = true; } function closeGoodiesMenu() { const container = document.getElementById("goodies-container"); const trigger = document.getElementById("goodies-trigger"); if (!container || !trigger) return; container.classList.remove("open"); trigger.setAttribute("aria-expanded", "false"); goodiesMenuOpen = false; } function handleGoodiesAction(action) { closeGoodiesMenu(); switch (action) { case "feedback": openFeedbackDialog("general"); break; // Future actions can be added here: // case "theme": // toggleTheme(); // break; // case "confetti": // triggerConfetti(); // break; default: console.log("[Goodies] Unknown action:", action); } } // Track current path for navigation detection let lastKnownPath = window.location.pathname; // Cleanup feedback elements on page navigation function cleanupFeedbackElements() { const currentPath = window.location.pathname; // Only cleanup on actual navigation (URL change), not every DOM mutation if (currentPath === lastKnownPath) { return; } lastKnownPath = currentPath; // Reset feedback state to prevent stale data from previous page FeedbackState.clear(); FeedbackState.set({ isDialogOpen: false }); // Hide toast if visible const toast = document.getElementById("feedback-toast"); if (toast) { toast.classList.remove("visible"); } // Close dialog if open const dialog = document.getElementById("feedback-dialog"); if (dialog) { dialog.classList.remove("visible"); // Clear any form data const textarea = dialog.querySelector("textarea"); if (textarea) textarea.value = ""; } // Close goodies menu if open if (goodiesMenuOpen) { closeGoodiesMenu(); } // Clear any pending selection window.getSelection().removeAllRanges(); } // Run on navigation (for SPA routing) if (typeof MutationObserver !== "undefined") { const navigationObserver = new MutationObserver(() => { setPageDataAttribute(); addPersistentVideoBackground(); setupHomepageVideoFade(); addChangelogActionButtons(); collapseChangelogSidebar(); setupToppieVideoPause(); makeTopLevelGroupsCollapsible(); cleanupFeedbackElements(); initFeedbackSystem(); }); navigationObserver.observe(document.body, { childList: true, subtree: true }); }

Documentation