/** * Mintlify Documentation Custom JavaScript * Handles navbar dropdowns and introduction page sidebar hiding */ (function() { 'use strict'; // ========== CONFIGURATION ========== const CONFIG = { introductionPaths: ['/', '/introduction', '/introduction/'], dropdownMenus: { 'Academy': [ { label: 'Avalanche Developer Academy', href: 'https://academy.avax.network/', icon: 'sprout' }, { label: 'Codebase Entrepreneur Academy', href: 'https://academy.avax.network/codebase', icon: 'briefcase-business' }, { label: 'Avalanche Fundamentals', href: 'https://build.avax.network/academy/avalanche-fundamentals', icon: 'book-open' }, { label: 'Check All Courses', href: 'https://build.avax.network/academy', icon: 'arrow-up-right' } ] }, lucideIconPaths: { 'sprout': '', 'briefcase-business': '', 'book-open': '', 'arrow-up-right': '', 'terminal': '', 'key': '', 'code': '' } }; // ========== UTILITY FUNCTIONS ========== const utils = { /** * Safely query selector with error handling */ safeQuerySelector: function(selector, parent = document) { try { return parent.querySelector(selector); } catch (e) { return null; } }, /** * Safely query all selectors with error handling */ safeQuerySelectorAll: function(selector, parent = document) { try { return parent.querySelectorAll(selector); } catch (e) { return []; } }, /** * Debounce function to limit execution frequency */ debounce: function(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }, /** * Check if current path matches any of the given paths */ isPathMatch: function(paths) { const currentPath = window.location.pathname; return paths.includes(currentPath); } }; // ========== INTRODUCTION PAGE SIDEBAR HANDLER ========== const sidebarHandler = { criticalStyleId: 'critical-intro-hide', styleId: 'intro-hide-sidebar-style', /** * Initialize immediate critical styles for intro page */ initCriticalStyles: function() { if (utils.isPathMatch(CONFIG.introductionPaths)) { // Add class immediately document.documentElement.classList.add('intro-page-no-sidebar'); const criticalStyle = document.createElement('style'); criticalStyle.id = this.criticalStyleId; criticalStyle.textContent = ` #sidebar { display: none !important; opacity: 0 !important; } body > div > div { grid-template-columns: 1fr !important; } [class*="ml-[19rem]"] { margin-left: 0 !important; } .intro-page-no-sidebar #sidebar { display: none !important; opacity: 0 !important; width: 0 !important; } .intro-page-no-sidebar body > div > div { grid-template-columns: 1fr !important; } .intro-page-no-sidebar [class*="ml-[19rem]"] { margin-left: 0 !important; } `; if (document.head) { document.head.insertBefore(criticalStyle, document.head.firstChild); } } }, /** * Handle sidebar visibility based on current page */ handleSidebar: function() { const isIntroPage = utils.isPathMatch(CONFIG.introductionPaths); if (isIntroPage) { // Re-apply critical styles immediately if (!document.getElementById(this.criticalStyleId)) { this.initCriticalStyles(); } this.hideSidebar(); } else { this.showSidebar(); } }, /** * Hide sidebar for introduction page */ hideSidebar: function() { // Add comprehensive styles if not exists if (!document.getElementById(this.styleId)) { const style = document.createElement('style'); style.id = this.styleId; style.textContent = ` /* Hide sidebar on intro page */ .intro-page-no-sidebar #sidebar, body:has([data-page="/introduction"]) #sidebar, body:has([data-page="/"]) #sidebar, body:has([data-path*="introduction"]) #sidebar { display: none !important; visibility: hidden !important; width: 0 !important; } /* Fix grid layout on intro page */ .intro-page-no-sidebar body > div > div, body:has([data-page="/introduction"]) > div > div, body:has([data-page="/"]) > div > div { grid-template-columns: 1fr !important; } /* Expand main content on intro page */ .intro-page-no-sidebar main, .intro-page-no-sidebar [class*="lg:ml-[19rem]"], .intro-page-no-sidebar [class*="ml-[19rem]"], body:has([data-page="/introduction"]) main, body:has([data-page="/"]) main, body:has([data-page="/introduction"]) [class*="lg:ml-[19rem]"], body:has([data-page="/"]) [class*="lg:ml-[19rem]"], body:has([data-page="/introduction"]) [class*="ml-[19rem]"], body:has([data-page="/"]) [class*="ml-[19rem]"] { margin-left: 0 !important; max-width: 100% !important; width: 100% !important; } `; document.head.appendChild(style); } // Apply inline styles for immediate effect const sidebar = document.getElementById('sidebar'); if (sidebar) { sidebar.style.display = 'none'; sidebar.style.visibility = 'hidden'; sidebar.style.width = '0'; } // Expand main content const main = utils.safeQuerySelector('main'); if (main) { main.style.marginLeft = '0'; main.style.maxWidth = '100%'; main.style.width = '100%'; } // Fix all margin issues const marginElements = utils.safeQuerySelectorAll('[class*="ml-[19rem]"], [class*="lg:ml-[19rem]"], [class*="pl-[19rem]"]'); marginElements.forEach(el => { el.style.marginLeft = '0'; el.style.paddingLeft = '0'; }); // Fix grid layouts const gridElements = utils.safeQuerySelectorAll('body > div > div'); gridElements.forEach(el => { if (window.getComputedStyle(el).display === 'grid') { el.style.gridTemplateColumns = '1fr'; } }); // Add intro page class document.documentElement.classList.add('intro-page-no-sidebar'); }, /** * Show sidebar for non-introduction pages */ showSidebar: function() { // Remove sidebar hiding styles const styleElements = [this.styleId, this.criticalStyleId]; styleElements.forEach(id => { const element = document.getElementById(id); if (element) { element.remove(); } }); // Reset sidebar visibility const sidebar = document.getElementById('sidebar'); if (sidebar) { sidebar.style.display = ''; sidebar.style.visibility = ''; sidebar.style.width = ''; } // Reset main content const main = utils.safeQuerySelector('main'); if (main) { main.style.marginLeft = ''; main.style.maxWidth = ''; main.style.width = ''; } // Reset all margin/padding modifications const marginElements = utils.safeQuerySelectorAll('[style*="margin-left"], [style*="padding-left"], [style*="width"]'); marginElements.forEach(el => { if (el.style.marginLeft === '0' || el.style.marginLeft === '0px') { el.style.marginLeft = ''; } if (el.style.paddingLeft === '0' || el.style.paddingLeft === '0px') { el.style.paddingLeft = ''; } if (el.style.width === '100%') { el.style.width = ''; } if (el.style.maxWidth === '100%') { el.style.maxWidth = ''; } }); // Reset grid layouts const gridElements = utils.safeQuerySelectorAll('[style*="grid-template-columns"]'); gridElements.forEach(el => { if (el.style.gridTemplateColumns === '1fr') { el.style.gridTemplateColumns = ''; } }); // Remove intro page class document.documentElement.classList.remove('intro-page-no-sidebar'); } }; // ========== NAVBAR DROPDOWN HANDLER ========== const dropdownHandler = { processedLinks: new WeakSet(), /** * Create Lucide icon SVG element */ createLucideIcon: function(iconName) { // Try to clone existing icon const existingIcon = utils.safeQuerySelector(`i.lucide-${iconName}`); if (existingIcon) { return existingIcon.cloneNode(true); } // Create SVG manually const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); svg.setAttribute('width', '24'); svg.setAttribute('height', '24'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none'); svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('stroke-width', '2'); svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute('stroke-linejoin', 'round'); svg.classList.add('lucide', `lucide-${iconName}`); const iconPath = CONFIG.lucideIconPaths[iconName]; if (iconPath) { svg.innerHTML = iconPath; return svg; } return null; }, /** * Create dropdown menu from a navbar link */ createDropdownMenu: function(linkElement, menuItems) { // Avoid processing the same link twice if (this.processedLinks.has(linkElement)) { return; } this.processedLinks.add(linkElement); // Create wrapper const wrapper = document.createElement('div'); wrapper.className = 'navbar-dropdown'; wrapper.style.display = 'inline-block'; // Clone original link const mainLink = linkElement.cloneNode(true); // Create dropdown content const dropdownContent = document.createElement('div'); dropdownContent.className = 'navbar-dropdown-content'; // Add menu items menuItems.forEach(item => { const menuLink = document.createElement('a'); menuLink.href = item.href; menuLink.target = '_blank'; menuLink.rel = 'noopener noreferrer'; // Add icon if (item.icon) { const iconSvg = this.createLucideIcon(item.icon); if (iconSvg) { iconSvg.style.width = '16px'; iconSvg.style.height = '16px'; iconSvg.style.marginRight = '10px'; iconSvg.style.flexShrink = '0'; menuLink.appendChild(iconSvg); } } // Add label const textSpan = document.createElement('span'); textSpan.textContent = item.label; menuLink.appendChild(textSpan); dropdownContent.appendChild(menuLink); }); // Track dropdown state let isOpen = false; let closeTimeout; const showDropdown = () => { clearTimeout(closeTimeout); dropdownContent.style.display = 'block'; wrapper.classList.add('open'); isOpen = true; }; const hideDropdown = () => { closeTimeout = setTimeout(() => { dropdownContent.style.display = 'none'; wrapper.classList.remove('open'); isOpen = false; }, 200); // 200ms delay before closing }; // Toggle on click mainLink.addEventListener('click', (e) => { e.preventDefault(); if (isOpen) { dropdownContent.style.display = 'none'; wrapper.classList.remove('open'); isOpen = false; clearTimeout(closeTimeout); } else { showDropdown(); } }); // Also support hover wrapper.addEventListener('mouseenter', showDropdown); wrapper.addEventListener('mouseleave', hideDropdown); // Keep dropdown open when hovering over content dropdownContent.addEventListener('mouseenter', showDropdown); dropdownContent.addEventListener('mouseleave', hideDropdown); // Close dropdown when clicking outside document.addEventListener('click', (e) => { if (!wrapper.contains(e.target)) { dropdownContent.style.display = 'none'; wrapper.classList.remove('open'); isOpen = false; } }); // Assemble and replace wrapper.appendChild(mainLink); wrapper.appendChild(dropdownContent); linkElement.parentNode.replaceChild(wrapper, linkElement); }, /** * Initialize dropdown menus */ initialize: function() { const selectors = [ 'nav a', 'header a', '[class*="navbar"] a', '[class*="nav-"] a', '[class*="header"] a' ]; selectors.forEach(selector => { const links = utils.safeQuerySelectorAll(selector); links.forEach(link => { const linkText = link.textContent.trim(); const menuItems = CONFIG.dropdownMenus[linkText]; if (menuItems && !link.closest('.navbar-dropdown') && !this.processedLinks.has(link)) { this.createDropdownMenu(link, menuItems); } }); }); } }; // ========== API KEY MODIFIER ========== const apiKeyModifier = { /** * Change "required" to "optional" for x-glacier-api-key */ modifyApiKeyRequirement: function() { const selectors = [ '.flex.flex-wrap.items-center.gap-2.text-xs.truncate[title="x-glacier-api-key"]', '.flex.items-center.flex-wrap.gap-2' ]; selectors.forEach(selector => { const element = utils.safeQuerySelector(selector); if (element) { const requiredText = element.querySelector('span.text-red-600, span.dark\\:text-red-300'); if (requiredText && requiredText.textContent.trim().toLowerCase() === 'required') { // Check if it's the right element for the second selector if (selector.includes('gap-2') && !selector.includes('title')) { const primaryText = element.querySelector('.font-semibold.text-primary'); if (!primaryText || primaryText.textContent.trim().toLowerCase() !== 'x-glacier-api-key') { return; } } requiredText.textContent = 'optional'; requiredText.classList.remove('text-red-600', 'dark:text-red-300', 'bg-red-100/50', 'dark:bg-red-400/10'); requiredText.classList.add('bg-gray-100/50', 'dark:bg-white/5', 'text-gray-600', 'dark:text-gray-200'); } } }); } }; // ========== NAVIGATION HANDLER ========== const navigationHandler = { initialized: false, /** * Handle all navigation-triggered updates */ handleNavigation: utils.debounce(function() { // Force immediate sidebar check without debounce for critical layout sidebarHandler.handleSidebar(); apiKeyModifier.modifyApiKeyRequirement(); dropdownHandler.initialize(); }, 100), /** * Handle navigation immediately for sidebar */ handleNavigationImmediate: function() { sidebarHandler.handleSidebar(); }, /** * Initialize navigation monitoring */ initialize: function() { if (this.initialized) return; this.initialized = true; // Monitor popstate events window.addEventListener('popstate', () => { this.handleNavigationImmediate(); this.handleNavigation(); }); // Override history methods (only once) const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function(...args) { originalPushState.apply(history, args); navigationHandler.handleNavigationImmediate(); navigationHandler.handleNavigation(); }; history.replaceState = function(...args) { originalReplaceState.apply(history, args); navigationHandler.handleNavigationImmediate(); navigationHandler.handleNavigation(); }; // Monitor DOM changes const observer = new MutationObserver(utils.debounce(() => { this.handleNavigation(); }, 250)); observer.observe(document.body, { childList: true, subtree: true }); } }; // ========== INITIALIZATION ========== const app = { /** * Initialize all components */ initialize: function() { // Immediate critical styles sidebarHandler.initCriticalStyles(); // Initialize on DOM ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => this.onReady()); } else { this.onReady(); } // Handle visibility changes (tab switching, etc) document.addEventListener('visibilitychange', () => { if (!document.hidden) { // Force sidebar check when page becomes visible setTimeout(() => { sidebarHandler.handleSidebar(); }, 50); } }); // Handle focus events window.addEventListener('focus', () => { setTimeout(() => { sidebarHandler.handleSidebar(); }, 50); }); }, /** * Called when DOM is ready */ onReady: function() { // Initial setup sidebarHandler.handleSidebar(); apiKeyModifier.modifyApiKeyRequirement(); // Initialize dropdowns with retry logic let retryCount = 0; const maxRetries = 5; const tryInitializeDropdowns = () => { dropdownHandler.initialize(); if (retryCount < maxRetries) { setTimeout(() => { retryCount++; tryInitializeDropdowns(); }, 500 * retryCount); } }; tryInitializeDropdowns(); // Setup navigation monitoring navigationHandler.initialize(); // Add specific sidebar observer for aggressive monitoring const sidebarObserver = new MutationObserver(() => { const path = window.location.pathname; const isIntroPage = CONFIG.introductionPaths.includes(path); if (isIntroPage) { const sidebar = document.getElementById('sidebar'); if (sidebar && sidebar.style.display !== 'none') { sidebarHandler.handleSidebar(); } } }); // Start observing after a delay to ensure DOM is ready setTimeout(() => { const sidebar = document.getElementById('sidebar'); if (sidebar) { sidebarObserver.observe(sidebar, { attributes: true, attributeFilter: ['style', 'class'], childList: true }); } // Also observe the parent container const parentContainer = document.querySelector('body > div'); if (parentContainer) { sidebarObserver.observe(parentContainer, { childList: true, subtree: true }); } }, 1000); } }; // Start the application app.initialize(); })();

Get Started

Platform Webhooks(BETA)

Tutorials

API Reference

Page Not Found