// ========== 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 ========== // ======================================== // GLOBAL STATE - CONSOLIDATED AT TOP // ======================================== // All global variables declared at the top to avoid hoisting issues var feedbackListenersInitialized = false; var dialogKeydownListenerInitialized = false; var goodiesMenuListenersInitialized = false; var homepageScrollListenerInitialized = false; var selectionTimeout = null; var goodiesMenuOpen = false; var toastShownAt = 0; var scrollTimeout = null; var collapsibleGroupsSetup = false; var toppieSetupComplete = false; var toppieThemeObserver = null; var lastFeedbackSubmission = 0; var FEEDBACK_RATE_LIMIT_MS = 30000; // 30 seconds between submissions // Global observers to prevent memory leaks var videoThemeObserver = null; // 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(); // Add custom Topsort X Mintlify branding addCustomBranding(); } // ========== 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); } function handleHomepageScroll() { const mascotOverlay = document.querySelector(".hero-mascot-overlay"); // 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; // Calculate opacity: full at top, fades as you scroll toward trigger point // Start fading 300px before trigger, fully faded at trigger let opacity = 1; if (scrolled > triggerPoint - 300) { opacity = Math.max(0, 1 - (scrolled - (triggerPoint - 300)) / 300); } // Only fade the ACTIVE video for each type (prevents double video during crossfade) if (window.activeLightVideo) { window.activeLightVideo.style.opacity = opacity * 0.15; } // Fade theme videos based on current mode const isDarkMode = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"); if (isDarkMode) { if (window.activeFireworksVideo) { window.activeFireworksVideo.style.opacity = opacity * 0.3; } // Keep winter hidden in dark mode if (window.activeWinterVideo) { window.activeWinterVideo.style.opacity = 0; } } else { if (window.activeWinterVideo) { window.activeWinterVideo.style.opacity = opacity * 0.4; } // Keep fireworks hidden in light mode if (window.activeFireworksVideo) { window.activeFireworksVideo.style.opacity = 0; } } // Fade mascot overlay for readability while scrolling if (mascotOverlay) { mascotOverlay.style.transition = "opacity 0.3s ease"; mascotOverlay.style.opacity = "0"; } // Clear existing timeout if (scrollTimeout) { clearTimeout(scrollTimeout); } // After scrolling stops, bring mascot back scrollTimeout = setTimeout(() => { if (mascotOverlay) { mascotOverlay.style.transition = "opacity 1s ease"; mascotOverlay.style.opacity = "1"; } }, 1500); } // 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); // Also handle resize to recalculate on viewport changes (e.g., dev tools toggle) window.addEventListener("resize", 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; } // Video sources const combinedLightSrc = "https://storage.googleapis.com/big-content-pub/combined-light.mp4"; const winterSrc = "https://storage.googleapis.com/big-content-pub/product/docs/themes/winter-holiday/winter-1.mp4"; const fireworksSrc = "https://storage.googleapis.com/big-content-pub/product/docs/themes/winter-holiday/fireworks-1.mp4"; // Create two video elements for seamless loop crossfade (combined light - always visible) const video1 = document.createElement("video"); const video2 = document.createElement("video"); [video1, video2].forEach((video, index) => { video.className = "persistent-bg-video persistent-bg-video-light"; video.muted = true; video.playsInline = true; video.preload = "auto"; video.src = combinedLightSrc; // 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.15" : "0"; // Reduced from 0.2 for better text legibility video.style.pointerEvents = "none"; video.style.transition = "opacity 0.5s ease-in-out"; document.body.prepend(video); }); // Create winter videos (light mode theme - two for crossfade loop) const winter1 = document.createElement("video"); const winter2 = document.createElement("video"); [winter1, winter2].forEach((video, index) => { video.className = "persistent-bg-video persistent-bg-video-winter"; video.muted = true; video.playsInline = true; video.preload = "auto"; video.src = winterSrc; 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 = "0"; video.style.pointerEvents = "none"; video.style.transition = "opacity 0.5s ease-in-out"; document.body.prepend(video); }); // Create fireworks videos (dark mode theme - two for crossfade loop) const fireworks1 = document.createElement("video"); const fireworks2 = document.createElement("video"); [fireworks1, fireworks2].forEach((video, index) => { video.className = "persistent-bg-video persistent-bg-video-fireworks"; video.muted = true; video.playsInline = true; video.preload = "auto"; video.src = fireworksSrc; 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 = "0"; video.style.pointerEvents = "none"; video.style.transition = "opacity 0.5s ease-in-out"; video.style.mixBlendMode = "screen"; document.body.prepend(video); }); // Track which video is active for each theme (exposed for scroll handler) let activeWinter = winter1; let activeFireworks = fireworks1; let activeLightVideo = video1; // Store these on window so scroll handler can access them window.activeWinterVideo = activeWinter; window.activeFireworksVideo = activeFireworks; window.activeLightVideo = activeLightVideo; // Function to update theme videos based on light/dark mode const updateThemeVideos = () => { const isDarkMode = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark"); if (isDarkMode) { // Dark mode: show fireworks, hide winter activeFireworks.style.opacity = "0.3"; winter1.style.opacity = "0"; winter2.style.opacity = "0"; // Start fireworks if needed if (activeFireworks.paused) { activeFireworks.play().catch(() => {}); } } else { // Light mode: show winter, hide fireworks activeWinter.style.opacity = "0.4"; fireworks1.style.opacity = "0"; fireworks2.style.opacity = "0"; // Start winter if needed if (activeWinter.paused) { activeWinter.play().catch(() => {}); } } }; // Crossfade for winter videos winter1.addEventListener("timeupdate", () => { if ( winter1.duration - winter1.currentTime < 0.5 && activeWinter === winter1 ) { winter2.currentTime = 0; winter2.play(); // Get current opacity of active video for smooth transition const currentOpacity = parseFloat(winter1.style.opacity) || 0; winter2.style.opacity = currentOpacity; winter1.style.opacity = "0"; activeWinter = winter2; window.activeWinterVideo = winter2; } }); winter2.addEventListener("timeupdate", () => { if ( winter2.duration - winter2.currentTime < 0.5 && activeWinter === winter2 ) { winter1.currentTime = 0; winter1.play(); const currentOpacity = parseFloat(winter2.style.opacity) || 0; winter1.style.opacity = currentOpacity; winter2.style.opacity = "0"; activeWinter = winter1; window.activeWinterVideo = winter1; } }); // Crossfade for fireworks videos fireworks1.addEventListener("timeupdate", () => { if ( fireworks1.duration - fireworks1.currentTime < 0.5 && activeFireworks === fireworks1 ) { fireworks2.currentTime = 0; fireworks2.play(); const currentOpacity = parseFloat(fireworks1.style.opacity) || 0; fireworks2.style.opacity = currentOpacity; fireworks1.style.opacity = "0"; activeFireworks = fireworks2; window.activeFireworksVideo = fireworks2; } }); fireworks2.addEventListener("timeupdate", () => { if ( fireworks2.duration - fireworks2.currentTime < 0.5 && activeFireworks === fireworks2 ) { fireworks1.currentTime = 0; fireworks1.play(); const currentOpacity = parseFloat(fireworks2.style.opacity) || 0; fireworks1.style.opacity = currentOpacity; fireworks2.style.opacity = "0"; activeFireworks = fireworks1; window.activeFireworksVideo = fireworks1; } }); // Set initial style updateThemeVideos(); // Watch for theme changes (prevent memory leaks) if (videoThemeObserver) { videoThemeObserver.disconnect(); } videoThemeObserver = new MutationObserver(updateThemeVideos); videoThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); videoThemeObserver.observe(document.body, { attributes: true, attributeFilter: ["class"], }); // Start playing combined light video video1.play().catch((err) => console.error("Light video play error:", err)); // Crossfade between light videos for seamless loop video1.addEventListener("timeupdate", () => { if ( video1.duration - video1.currentTime < 0.5 && activeLightVideo === video1 ) { video2.currentTime = 0; video2.play(); const currentOpacity = parseFloat(video1.style.opacity) || 0; video2.style.opacity = currentOpacity; video1.style.opacity = "0"; activeLightVideo = video2; window.activeLightVideo = video2; } }); video2.addEventListener("timeupdate", () => { if ( video2.duration - video2.currentTime < 0.5 && activeLightVideo === video2 ) { video1.currentTime = 0; video1.play(); const currentOpacity = parseFloat(video2.style.opacity) || 0; video1.style.opacity = currentOpacity; video2.style.opacity = "0"; activeLightVideo = video1; window.activeLightVideo = video1; } }); } // ========== 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 // (variable declared at top of file) 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 // (variables declared at top of file) function setupToppieVideoPause() { const path = window.location.pathname; // Only run on homepage if (path !== "/" && path !== "") { return; } // Prevent duplicate setup if (toppieSetupComplete) { return; } toppieSetupComplete = true; // Check if theme was already switched (user must refresh to see video again) if (window.toppieThemeSwitched) { const video = document.getElementById("toppie-video"); const fallbackImg = document.getElementById("toppie-fallback"); if (video) video.style.display = "none"; if (fallbackImg) fallbackImg.style.display = "block"; return; } // Setup theme observer - when theme switches, ALWAYS show fallback (all browsers) const setupThemeObserver = () => { // Disconnect existing observer to prevent memory leaks if (toppieThemeObserver) { toppieThemeObserver.disconnect(); } toppieThemeObserver = new MutationObserver(() => { const video = document.getElementById("toppie-video"); const fallbackImg = document.getElementById("toppie-fallback"); if (video && fallbackImg) { // Stop and hide video video.pause(); video.style.display = "none"; // Show fallback image fallbackImg.style.display = "block"; // Set flag so video stays hidden until page refresh window.toppieThemeSwitched = true; } }); // Observe both html and body for class changes (theme toggle) toppieThemeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); toppieThemeObserver.observe(document.body, { attributes: true, attributeFilter: ["class"], }); }; setTimeout(() => { // Check browser first - if Firefox/Safari/Orion, just show static image 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; const isFirefox = ua.indexOf("firefox") !== -1; if (isSafari || isOrion || isFirefox) { // Safari/Orion/Firefox: show static image, hide video console.log( "[Toppie] Safari/Orion/Firefox detected - showing static image", ); const video = document.getElementById("toppie-video"); const fallbackImg = document.getElementById("toppie-fallback"); if (video) video.style.display = "none"; if (fallbackImg) fallbackImg.style.display = "block"; // Still setup theme observer for consistency setupThemeObserver(); return; // Exit early - no video setup needed } const video = document.getElementById("toppie-video"); // Additional check - if video already has random source set, don't proceed if (video && video.dataset.randomVideoSet === "true") { return; } const fallbackImg = document.getElementById("toppie-fallback"); const container = document.getElementById("toppie-container"); if (!video || !fallbackImg) { return; } // Setup theme observer for Chrome/Brave setupThemeObserver(); // Random video selection - 40% base jump, 30% skater, 30% snowboarder const videos = [ "https://storage.googleapis.com/big-content-pub/product/docs/themes/winter-holiday/base-jump-clean.webm", "https://storage.googleapis.com/big-content-pub/product/docs/themes/winter-holiday/skater-clean.webm", "https://storage.googleapis.com/big-content-pub/product/docs/themes/winter-holiday/toppie-winter-snowboarder-despill.webm", ]; const randomValue = Math.random(); const selectedVideo = randomValue < 0.4 ? videos[0] : randomValue < 0.7 ? videos[1] : videos[2]; // Determine video type for scaling let videoType = "snowboarder"; // default if (selectedVideo.includes("skater")) { videoType = "skater"; } else if (selectedVideo.includes("base-jump")) { videoType = "basejump"; } // console.log("[Toppie] Selected:", videoType, "Random value:", randomValue); // Set the random video source const source = video.querySelector("source"); if (source) { source.src = selectedVideo; // Store the video type on the video element for later use video.dataset.videoType = videoType; video.dataset.randomVideoSet = "true"; // Mark as configured // console.log("[Toppie] Video source set to:", selectedVideo); // Force video to reload with new source video.load(); // Double-check the video loaded the correct source video.addEventListener( "loadedmetadata", () => { // console.log("[Toppie] Video metadata loaded, actual src:", video.currentSrc); const expectedKeyword = videoType === "skater" ? "skater" : videoType === "basejump" ? "base-jump" : "snowboarder"; if (!video.currentSrc.includes(expectedKeyword)) { console.warn( "[Toppie] Video source mismatch! Expected:", selectedVideo, "Actual:", video.currentSrc, ); } // Apply scaling and spacing when metadata loads as well if (videoType === "skater") { video.style.cssText += "; transform: scale(2.0) !important; margin-bottom: -100px !important;"; // console.log("[Toppie] Applied skater scaling: 2.0 and margin -100px (on metadata load)"); } else if (videoType === "basejump") { video.style.cssText += "; transform: scale(1.84) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Applied base jump scaling: 1.84 and margin -120px (on metadata load)"); } else { video.style.cssText += "; transform: scale(1.1) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Applied snowboarder scaling: 1.0 and margin -140px (on metadata load)"); } }, { once: true }, ); } // Browser check already done above - if we're here, it's Chrome/Brave // 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 = () => { // Check if theme was switched while loading if (window.toppieThemeSwitched) { video.style.display = "none"; fallbackImg.style.display = "block"; return; } // console.log("[Toppie] Video ready, showing video"); // console.log("[Toppie] Current video src:", video.currentSrc); // Apply appropriate scaling and spacing based on video type const videoType = video.dataset.videoType || "unknown"; // console.log("[Toppie] Video type from dataset:", videoType, "Applying scaling..."); // Apply scaling and margin adjustment immediately if (videoType === "skater") { video.style.cssText += "; transform: scale(2.0) !important; margin-bottom: -100px !important;"; // console.log("[Toppie] Applied skater scaling: 2.0 and adjusted margin to -100px (immediate)"); } else if (videoType === "basejump") { video.style.cssText += "; transform: scale(1.84) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Applied base jump scaling: 1.84 and adjusted margin to -120px (immediate)"); } else if (videoType === "snowboarder") { video.style.cssText += "; transform: scale(1.1) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Applied snowboarder scaling: 1.0 and kept margin at -140px (immediate)"); } else { video.style.cssText += "; transform: scale(1.1) !important; margin-bottom: -120px !important;"; } // Also apply scaling and margin with a slight delay to ensure it persists setTimeout(() => { if (videoType === "skater") { video.style.cssText += "; transform: scale(2.0) !important; margin-bottom: -100px !important;"; // console.log("[Toppie] Re-applied skater scaling: 2.0 and margin -100px (delayed)"); } else if (videoType === "basejump") { video.style.cssText += "; transform: scale(1.84) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Re-applied base jump scaling: 1.84 and margin -120px (delayed)"); } else if (videoType === "snowboarder") { video.style.cssText += "; transform: scale(1.1) !important; margin-bottom: -120px !important;"; // console.log("[Toppie] Re-applied snowboarder scaling: 1.0 and margin -140px (delayed)"); } }, 100); video.style.display = "block"; fallbackImg.style.display = "none"; video.play().catch(() => { // 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") { 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) => { // Don't resume video if theme was switched if (window.toppieThemeSwitched) { return; } 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 // (variables declared at top of file) // 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; } // Reset Toppie theme switched flag on actual navigation window.toppieThemeSwitched = false; // Reset flags when navigating away from homepage if ( (lastKnownPath === "/" || lastKnownPath === "") && currentPath !== "/" && currentPath !== "" ) { toppieSetupComplete = false; // Clean up homepage scroll listeners to prevent memory leaks if (homepageScrollListenerInitialized) { window.removeEventListener("scroll", handleHomepageScroll); window.removeEventListener("resize", handleHomepageScroll); homepageScrollListenerInitialized = false; } // Clean up video background observers to prevent memory leaks if (videoThemeObserver) { videoThemeObserver.disconnect(); videoThemeObserver = null; } } 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(); addCustomBranding(); }); navigationObserver.observe(document.body, { childList: true, subtree: true }); } // ========== custom-branding.js ========== // Add custom Topsort X Mintlify branding function addCustomBranding() { // Check if already exists to prevent duplicates if (document.querySelector(".custom-footer-branding")) { return; } // Create the custom branding element const brandingDiv = document.createElement("div"); brandingDiv.className = "custom-footer-branding"; // Force styles directly in JavaScript to ensure they apply brandingDiv.style.textAlign = "center"; brandingDiv.style.padding = "16px"; brandingDiv.style.fontSize = "13px"; brandingDiv.style.color = "#666"; brandingDiv.style.display = "block"; brandingDiv.style.width = "100%"; brandingDiv.style.clear = "both"; const brandingLink = document.createElement("a"); brandingLink.href = "https://mintlify.com"; brandingLink.className = "brand-link custom-branding"; brandingLink.target = "_blank"; brandingLink.rel = "noopener noreferrer"; brandingLink.title = "Built with Topsort & Mintlify"; brandingLink.style.color = "inherit"; brandingLink.style.textDecoration = "none"; brandingLink.textContent = "Topsort × Mintlify ❤️"; brandingDiv.appendChild(brandingLink); // Try to find the actual footer or append to very bottom of page const footer = document.querySelector("footer") || document.querySelector(".footer") || document.querySelector("#footer"); if (footer) { footer.appendChild(brandingDiv); } else { // If no footer exists, append to body as the last element document.body.appendChild(brandingDiv); } }

Dokumentation