// Pages that should hide TOC + expand body const specialPages = [ 'business-onboarding-usage-scope', 'advanced-prefill-usage-scope', // 'another-slug', ]; let lastEffectivePath = null; // --- Resolve the "real" path in both normal view and admin preview/iframe --- function getEffectivePath() { const logs = []; const inPreview = window.self !== window.top || location.search.includes('isFramePreview=true'); logs.push(['inPreview', inPreview]); // Helper: normalize href -> pathname const toPath = href => { try { return new URL(href, location.origin).pathname; } catch { return null; } }; // In preview/iframe, prefer DOM signals over canonical (canonical can be stale) if (inPreview) { // 1) Active nav link (aria-current or is-active) - optimized single query const activeLink = document.querySelector( '.rm-Sidebar a[aria-current="page"], .rm-Sidebar a.is-active, nav a[aria-current="page"], nav a.is-active' ); if (activeLink?.href) { const p = toPath(activeLink.href); if (p) { logs.push(['activeLink', activeLink.href, p]); return { path: p, source: 'activeLink', logs }; } } // 2) Breadcrumb last item - optimized single query const crumb = document.querySelector( '.rm-Breadcrumbs a:last-of-type, [data-breadcrumb] a:last-of-type' ); if (crumb?.href) { const p = toPath(crumb.href); if (p) { logs.push(['breadcrumb', crumb.href, p]); return { path: p, source: 'breadcrumb', logs }; } } // 3) Data attributes on current doc/article const slugEl = document.querySelector( '[data-slug], [data-doc-slug], article[id]' ); const slug = slugEl?.getAttribute?.('data-slug') || slugEl?.getAttribute?.('data-doc-slug') || slugEl?.id || ''; if (slug) { const p = '/' + slug.replace(/^\/+/, ''); logs.push(['data-slug', slug, p]); return { path: p, source: 'data-slug', logs }; } // 4) LAST resort in preview: canonical/og (may be stale) const canonical = document.querySelector('link[rel="canonical"]'); if (canonical?.href) { const p = toPath(canonical.href); if (p) { logs.push(['canonical', canonical.href, p]); return { path: p, source: 'canonical', logs }; } } const og = document.querySelector('meta[property="og:url"]'); if (og?.content) { const p = toPath(og.content); if (p) { logs.push(['og:url', og.content, p]); return { path: p, source: 'og:url', logs }; } } } // Normal users (no preview): trust the browser URL (includes hash router if any) const fallback = location.pathname + location.hash; logs.push(['location', fallback]); return { path: fallback, source: 'location', logs }; } // --- Apply layout based on the resolved path --- const DEBUG = false; // Set to true for debugging const log = DEBUG ? console.log : () => {}; function applySpecialLayout() { log('[Layout] Running applySpecialLayout'); const { path, source, logs: detectionLogs } = getEffectivePath(); log('[Layout] Detection source:', source); if (DEBUG) detectionLogs.forEach(row => console.log('[Layout][detect]', ...row)); log('[Layout] Effective path:', path); if (lastEffectivePath === path) { log('[Layout] Note: effective path unchanged since last run.'); return; // Early return if path hasn't changed } lastEffectivePath = path; const matchedSlugs = specialPages.filter(slug => path.includes(slug)); const isSpecial = matchedSlugs.length > 0; log('[Layout] Matched slugs:', matchedSlugs); log('[Layout] isSpecial:', isSpecial); const toc = document.querySelector( '#content-container > section.content-toc.grid-25, section.content-toc.grid-25' ); const body = document.querySelector( '#content-container > section.content-body.grid-75, section.content-body.grid-75' ); log('[Layout] TOC element found?', !!toc); log('[Layout] Body element found?', !!body); // TOC visibility if (toc) { if (isSpecial) { toc.style.setProperty('display', 'none', 'important'); log('[Layout] TOC -> HIDDEN'); } else { toc.style.removeProperty('display'); log('[Layout] TOC -> UNHIDDEN (display removed)'); } } else if (DEBUG) { console.warn('[Layout] TOC element NOT found'); } // Body expansion into TOC space if (body) { if (isSpecial) { body.style.setProperty('max-width', 'none', 'important'); body.style.setProperty('width', 'auto', 'important'); body.style.setProperty('grid-column', '1 / -1', 'important'); // span both columns in grid log('[Layout] Body -> EXPANDED'); } else { body.style.removeProperty('max-width'); body.style.removeProperty('width'); body.style.removeProperty('grid-column'); log('[Layout] Body -> RESET'); } } else if (DEBUG) { console.warn('[Layout] Body element NOT found'); } log('[Layout] ---- end of applySpecialLayout ----'); } // Initial load document.addEventListener('DOMContentLoaded', () => { log('[Layout] DOMContentLoaded -> apply'); requestAnimationFrame(applySpecialLayout); }); // SPA route changes (your platform hook) $(window).on('pageLoad', () => { log('[Layout] pageLoad -> apply'); requestAnimationFrame(applySpecialLayout); }); // Setup Copy Page Link Button function setupCopyPageLinkButton() { log('[HeaderButtons][DEBUG] setupCopyPageLinkButton() called'); const head = document.querySelector('#content-head h1'); if (!head) { log('[HeaderButtons][DEBUG] No h1 element found'); return; } log( '[HeaderButtons][DEBUG] Found h1 element:', head.textContent.substring(0, 50) ); // Check if buttons already exist in THIS h1 (not somewhere else in DOM) const existingContainer = head.querySelector('#header-buttons-container'); log( '[HeaderButtons][DEBUG] Checking for existing container:', existingContainer ? 'FOUND' : 'NOT FOUND' ); if (existingContainer) { log('[HeaderButtons] Buttons already exist in current h1 - SKIPPING'); return; } log('[HeaderButtons] Adding buttons to h1'); // Apply flexbox styles to h1 for button layout head.style.display = 'flex'; head.style.justifyContent = 'space-between'; head.style.flexDirection = 'row'; head.style.alignItems = 'center'; head.style.gap = '20px'; // Create button container const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.gap = '0.5rem'; buttonContainer.id = 'header-buttons-container'; // Create Copy Page Link button const copyPageButtonContainer = document.createElement('div'); copyPageButtonContainer.className = 'custom-action-button-container'; const copyPageButtonBack = document.createElement('div'); copyPageButtonBack.className = 'custom-action-button-back'; const copyPageLinkButton = document.createElement('button'); copyPageLinkButton.id = 'copy-page-link-btn'; copyPageLinkButton.className = 'custom-action-button'; copyPageLinkButton.textContent = 'Copy Page Link'; copyPageLinkButton.insertAdjacentHTML( 'beforeend', `` ); copyPageLinkButton.style.display = 'inline-flex'; copyPageLinkButton.style.alignItems = 'center'; copyPageLinkButton.style.gap = '0.4rem'; copyPageLinkButton.style.width = 'auto'; copyPageButtonContainer.appendChild(copyPageButtonBack); copyPageButtonContainer.appendChild(copyPageLinkButton); buttonContainer.appendChild(copyPageButtonContainer); head.appendChild(buttonContainer); log('[HeaderButtons][DEBUG] Button container appended to h1'); // Copy current page URL to clipboard and show a top-right toast function onCopyPageLinkClick(e) { if (e && e.preventDefault) e.preventDefault(); const url = window.location.href; function showToastMessage(success) { // Toast (top-right) const id = 'toast-link-copied'; const existing = document.getElementById(id); if (existing) existing.remove(); const toast = document.createElement('div'); toast.id = id; toast.role = 'status'; toast.setAttribute('aria-live', 'polite'); toast.textContent = success ? 'Link copied' : 'Could not copy link'; Object.assign(toast.style, { position: 'fixed', top: '16px', right: '16px', zIndex: '2147483647', padding: '10px 12px', borderRadius: '12px', background: 'rgba(0,0,0,0.85)', color: '#fff', font: '14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif', boxShadow: '0 4px 12px rgba(0,0,0,0.2)', opacity: '0', transform: 'translateY(-8px)', transition: 'opacity 150ms ease, transform 150ms ease', }); document.body.appendChild(toast); void toast.offsetHeight; toast.style.opacity = '1'; toast.style.transform = 'translateY(0)'; const hide = function () { toast.style.opacity = '0'; toast.style.transform = 'translateY(-8px)'; toast.addEventListener( 'transitionend', function () { toast.remove(); }, { once: true } ); }; setTimeout(hide, 1500); } function fallbackCopy() { const ta = document.createElement('textarea'); ta.value = url; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.top = '-9999px'; document.body.appendChild(ta); ta.select(); var success = false; try { success = document.execCommand('copy'); } catch (err) { success = false; } document.body.removeChild(ta); showToastMessage(success); } // Try modern Clipboard API if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard .writeText(url) .then(function () { showToastMessage(true); }) .catch(function () { fallbackCopy(); }); } else { fallbackCopy(); } } copyPageLinkButton.addEventListener('click', onCopyPageLinkClick); } // Setup Copy for LLM Button function setupCopyForLLMButton() { const SRC = 'https://cdn.jsdelivr.net/npm/turndown@7.1.2/dist/turndown.js'; let script = document.querySelector('script[src="' + SRC + '"]') || null; function onLoad() { if (window.TurndownService) setupCopyButton(); } function onError(e) { // Do nothing for now } // If Turndown already exists → set up button now if (window.TurndownService) { setupCopyButton(); } else { // Ensure the script tag exists if (!script) { script = document.createElement('script'); script.src = SRC; script.async = true; script.crossOrigin = 'anonymous'; script.referrerPolicy = 'no-referrer'; script.integrity = 'sha384-jz8bbuCPKxQBEcgaro/3+eMFneW3+kRVLS0pOVZX4CS6lSr8zG+aaBWqenopTc2Z'; document.head.appendChild(script); } // Wire events (safe even if tag pre-existed) script.addEventListener('load', onLoad); script.addEventListener('error', onError); // If already loaded (cached), set up immediately if ( window.TurndownService || script.readyState === 'complete' || script.dataset.loaded === 'true' ) { setupCopyButton(); } else { script.addEventListener( 'load', function () { script.dataset.loaded = 'true'; }, { once: true } ); } } // --- Copy Button Helpers --- function setupCopyButton() { log('[HeaderButtons][DEBUG] setupCopyButton() called'); const buttonContainer = document.getElementById('header-buttons-container'); if (!buttonContainer) { log( '[HeaderButtons][DEBUG] No button container found for Copy for LLM - ABORTING' ); return; } log('[HeaderButtons][DEBUG] Found button container'); // Check if Copy for LLM button already exists in the container const existingButton = buttonContainer.querySelector('#copy-markdown-btn'); log( '[HeaderButtons][DEBUG] Checking for existing LLM button:', existingButton ? 'FOUND' : 'NOT FOUND' ); if (existingButton) { log('[HeaderButtons] Copy for LLM button already exists - SKIPPING'); return; } log('[HeaderButtons] Adding Copy for LLM button'); const copyMarkdownButtonContainer = document.createElement('div'); copyMarkdownButtonContainer.className = 'custom-action-button-container'; const markdownButtonBack = document.createElement('div'); markdownButtonBack.className = 'custom-action-button-back'; const copyMarkdownButton = document.createElement('button'); copyMarkdownButton.id = 'copy-markdown-btn'; copyMarkdownButton.type = 'button'; copyMarkdownButton.textContent = 'Copy for LLM'; copyMarkdownButton.insertAdjacentHTML( 'beforeend', `` ); copyMarkdownButton.style.display = 'inline-flex'; copyMarkdownButton.style.alignItems = 'center'; copyMarkdownButton.style.gap = '0.4rem'; copyMarkdownButton.style.width = 'auto'; copyMarkdownButton.className = 'custom-action-button'; copyMarkdownButton.addEventListener('click', onCopyClick); copyMarkdownButtonContainer.appendChild(markdownButtonBack); copyMarkdownButtonContainer.appendChild(copyMarkdownButton); buttonContainer.appendChild(copyMarkdownButtonContainer); log('[HeaderButtons][DEBUG] Copy for LLM button appended to container'); } function onCopyClick() { const section = document.querySelector('section.content-body'); if (!section) { showToast('Copy Failed', false); return; } try { const markdown = toMarkdownForLLM(section); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard .writeText(markdown) .then(function () { showToast('Copied', true); }) .catch(function () { fallbackCopy(markdown); }); } else { fallbackCopy(markdown); } } catch (err) { showToast('Copy Failed', false); } } function fallbackCopy(text) { const ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.top = '-9999px'; document.body.appendChild(ta); ta.select(); try { const ok = document.execCommand('copy'); showToast(ok ? 'Copied' : 'Copy Failed', ok); } catch (err) { showToast('Copy Failed', false); } finally { document.body.removeChild(ta); } } function showToast(message, success) { const toast = document.createElement('div'); toast.className = 'custom-toast ' + (success ? 'success-toast' : 'error-toast'); toast.textContent = message; // style toast.style.position = 'fixed'; toast.style.top = '1rem'; toast.style.right = '1rem'; toast.style.zIndex = 9999; toast.style.padding = '10px 12px'; toast.style.borderRadius = '12px'; toast.style.background = 'rgba(0,0,0,0.85)'; toast.style.color = '#fff'; toast.style.font = '14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif'; toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; // style end document.body.appendChild(toast); setTimeout(function () { if (toast && toast.parentNode) { toast.parentNode.removeChild(toast); } }, 3000); } function toMarkdownForLLM(rootEl) { // Drop unnecessary elements from dom before running the content through turndown. const clone = rootEl.cloneNode(true); const DROP_SELECTORS = [ 'script', 'style', 'nav', 'footer', '[data-rdme], .rdme, .rdme-feedback, .feedback', '.TableOfContents, .toc, nav.toc', 'form', 'svg', 'link', 'meta', '.rm-PageThumbs.PageThumbs', '.PageThumbs-helpful', ].join(','); clone.querySelectorAll(DROP_SELECTORS).forEach(function (n) { n.remove(); }); clone.querySelectorAll('a[href^="#"]').forEach(function (a) { if (!a.textContent.trim()) a.remove(); }); Array.from(clone.querySelectorAll('*')).forEach(function (el) { const t = el.textContent ? el.textContent.trim() : ''; if (!t) return; if ( /^Updated\s+\d+\s+(day|days|hour|hours|minute|minutes)\s+ago$/i.test(t) ) el.remove(); }); // set up turndown const TurndownService = window.TurndownService; const td = new TurndownService({ headingStyle: 'atx', hr: '---', bulletListMarker: '-', codeBlockStyle: 'fenced', fence: '```', emDelimiter: '*', strongDelimiter: '**', linkStyle: 'inlined', linkReferenceStyle: 'full', preformattedCode: true, }); // Add additional formatting rules to make the Markdown cleaner // in the future we are hoping to replace some of these with GFM // import { gfm /* or tables, strikethrough, taskListItems */ } from '@joplin/turndown-plugin-gfm' // or '@truto/turndown-plugin-gfm' td.addRule('dropEmptyAnchors', { filter: function (node) { return node.nodeName === 'A' && !node.textContent.trim(); }, replacement: function () { return ''; }, }); td.addRule('collapseBrRuns', { filter: function (node) { return ( node.nodeName === 'BR' && node.nextSibling && node.nextSibling.nodeName === 'BR' ); }, replacement: function () { return '\n\n'; }, }); td.addRule('strikethrough', { filter: ['del', 's', 'strike'], replacement: function (content) { return '~~' + content + '~~'; }, }); td.addRule('taskListItems', { filter: function (node) { return ( node.nodeName === 'INPUT' && node.getAttribute('type') === 'checkbox' ); }, replacement: function (content, node) { return node.checked ? '[x] ' : '[ ] '; }, }); td.addRule('tables', { filter: 'table', replacement: function (content, node) { const rows = Array.from(node.querySelectorAll('tr')); if (rows.length === 0) return ''; // First row = header const headerCells = Array.from(rows[0].children).map(function (td) { return td.textContent.trim(); }); const headerRow = '| ' + headerCells.join(' | ') + ' |'; // Separator row (--- per column) const separatorRow = '| ' + headerCells .map(function () { return '---'; }) .join(' | ') + ' |'; // Body rows const bodyRows = rows.slice(1).map(function (row) { const cells = Array.from(row.children).map(function (td) { return td.textContent.trim(); }); return '| ' + cells.join(' | ') + ' |'; }); return [headerRow, separatorRow].concat(bodyRows).join('\n'); }, }); // final whitespace trimming + return let md = td.turndown(clone.innerHTML); md = md .replace(/\[\]$#.+?$\s*\n?/g, '') .replace(/[ \t]+\n/g, '\n') .replace(/\n{3,}/g, '\n\n') .trim(); return md; } } // Cleanup header buttons (remove buttons and reset h1 styles) function cleanupHeaderButtons() { const head = document.querySelector('#content-head h1'); if (!head) return; const buttonContainer = head.querySelector('#header-buttons-container'); if (buttonContainer) { buttonContainer.remove(); log('[HeaderButtons] Removed button container'); } // Reset h1 styles head.style.removeProperty('display'); head.style.removeProperty('justify-content'); head.style.removeProperty('flex-direction'); head.style.removeProperty('align-items'); head.style.removeProperty('gap'); log('[HeaderButtons] Reset h1 styles'); } // Apply header buttons with retry logic function applyHeaderButtons(retryCount) { if (typeof retryCount === 'undefined') retryCount = 0; log( '[HeaderButtons][DEBUG] applyHeaderButtons START (attempt ' + (retryCount + 1) + ')' ); // Check if h1 exists first (fast check) const head = document.querySelector('#content-head h1'); log('[HeaderButtons][DEBUG] Looking for h1...'); // Skip API reference pages - check on every retry to handle stale paths const { path: currentPath } = getEffectivePath(); log('[HeaderButtons][DEBUG] Current path:', currentPath); if (currentPath.includes('/reference')) { log('[HeaderButtons] Skipping: API reference page detected'); cleanupHeaderButtons(); return; } if (!head) { // Retry up to 5 times with increasing delays if (retryCount < 5) { log('[HeaderButtons] h1 not found, retrying...'); setTimeout(function () { applyHeaderButtons(retryCount + 1); }, 1000 * (retryCount + 1)); return; } else { log('[HeaderButtons] h1 not found after 5 attempts, giving up'); return; } } log('[HeaderButtons][DEBUG] h1 found:', head.textContent.substring(0, 50)); // Check if h1 is stale (contains button text from previous page) const h1Text = head.textContent || ''; const hasButtonText = h1Text.includes('Copy Page Link') || h1Text.includes('Copy for LLM'); if (hasButtonText) { // h1 is from the old page with buttons still attached, wait for React to update it if (retryCount < 10) { // Reduced from 20 to 10 log( '[HeaderButtons][DEBUG] h1 contains button text (stale), waiting for React update...' ); setTimeout(function () { applyHeaderButtons(retryCount + 1); }, 300); // Check every 300ms return; } else { log( '[HeaderButtons][DEBUG] h1 still stale after 10 attempts, proceeding anyway...' ); // Fall through and try anyway } } else { log('[HeaderButtons][DEBUG] h1 is fresh, proceeding...'); } setupCopyPageLinkButton(); setupCopyForLLMButton(); log('[HeaderButtons][DEBUG] applyHeaderButtons END (success)'); } // Initial load - use 'load' event instead of DOMContentLoaded to avoid React hydration conflicts window.addEventListener('load', function () { log('[HeaderButtons] window load -> apply'); // Additional delay to ensure React hydration is complete setTimeout(function () { requestAnimationFrame(applyHeaderButtons); }, 500); }); // SPA route changes (Readme.com platform hook) $(window).on('pageLoad', function () { log('[HeaderButtons] pageLoad -> apply'); // Add delay to ensure new page content has rendered setTimeout(function () { requestAnimationFrame(applyHeaderButtons); }, 100); }); (function () { let scrollIndicator = null; let observer = null; let catalogElement = null; // Create the scroll indicator element function createScrollIndicator() { const indicator = document.createElement('div'); indicator.id = 'catalog-scroll-indicator'; // Base styles Object.assign(indicator.style, { position: 'fixed', bottom: '30px', right: '30px', width: '50px', height: '50px', borderRadius: '50%', background: '#ff6900', cursor: 'pointer', zIndex: '9999', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)', opacity: '0', visibility: 'hidden', transition: 'opacity 0.3s ease, visibility 0.3s ease, background-color 0.8s ease', animation: 'catalogColorPulse 2s ease-in-out infinite alternate', backgroundColor: '#ff6900', backdropFilter: 'blur(4px)', border: '1px solid rgba(255, 255, 255, 0.2)', }); // Add only arrow icon indicator.innerHTML = `

`; // Add click handler to scroll to catalog indicator.addEventListener('click', () => { if (catalogElement) { catalogElement.scrollIntoView({ behavior: 'smooth' }); } }); return indicator; } // Add CSS animation for color transition function addScrollIndicatorStyles() { if (document.getElementById('catalog-scroll-indicator-styles')) return; const style = document.createElement('style'); style.id = 'catalog-scroll-indicator-styles'; style.textContent = ` @keyframes catalogColorPulse { 0% { background-color: rgba(255, 105, 0, 0.85); transform: scale(1); } 100% { background-color: rgba(44, 102, 157, 0.85); transform: scale(1.05); } } #catalog-scroll-indicator:hover { background-color: rgba(255, 105, 0, 0.95) !important; transform: scale(1.1) !important; animation-play-state: paused; } `; document.head.appendChild(style); } // Show the scroll indicator function showIndicator() { if (scrollIndicator) { scrollIndicator.style.opacity = '1'; scrollIndicator.style.visibility = 'visible'; } } // Hide the scroll indicator function hideIndicator() { if (scrollIndicator) { scrollIndicator.style.opacity = '0'; scrollIndicator.style.visibility = 'hidden'; } } // Setup intersection observer function setupObserver() { if (!catalogElement) return; // Disconnect existing observer if it exists if (observer) { observer.disconnect(); } observer = new IntersectionObserver( entries => { entries.forEach(entry => { // Verify we still have valid references if (!catalogElement || !scrollIndicator) { handlePageChange(); return; } // Show indicator when less than 50% of catalog is visible if (entry.intersectionRatio < 0.5) { showIndicator(); } else { hideIndicator(); } }); }, { threshold: 0.5, // Trigger when 50% visibility is crossed } ); observer.observe(catalogElement); } // Initialize the scroll indicator system function initScrollIndicator() { catalogElement = document.getElementById('catalog'); if (!catalogElement) { return; // Catalog not found, don't do anything } // Add styles if not already added addScrollIndicatorStyles(); // Create and append indicator if it doesn't exist or if it's been detached if (!scrollIndicator || !scrollIndicator.parentNode) { if (scrollIndicator && scrollIndicator.parentNode) { scrollIndicator.parentNode.removeChild(scrollIndicator); } scrollIndicator = createScrollIndicator(); document.body.appendChild(scrollIndicator); } // Setup intersection observer setupObserver(); // Initially check if catalog is in view const rect = catalogElement.getBoundingClientRect(); const viewportHeight = window.innerHeight; const catalogHeight = rect.height; const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0); const visibilityRatio = Math.max(0, visibleHeight) / catalogHeight; if (visibilityRatio < 0.5) { showIndicator(); } } // Cleanup function function cleanup() { if (observer) { observer.disconnect(); observer = null; } if (scrollIndicator && scrollIndicator.parentNode) { scrollIndicator.parentNode.removeChild(scrollIndicator); scrollIndicator = null; } catalogElement = null; } // Check for catalog and initialize function checkAndInit() { // Clean up previous instance cleanup(); // Wait a bit for DOM to be ready after page change setTimeout(() => { initScrollIndicator(); }, 100); } // Handle page changes - multiple approaches for different SPA frameworks let pageChangeTimeout = null; function handlePageChange() { // Debounce page changes to avoid excessive reinitialization clearTimeout(pageChangeTimeout); pageChangeTimeout = setTimeout(() => { checkAndInit(); }, 150); } // Listen for various page change events // For pushState/popState (React Router, etc.) - debounced const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(history, arguments); handlePageChange(); }; history.replaceState = function () { originalReplaceState.apply(history, arguments); handlePageChange(); }; window.addEventListener('popstate', handlePageChange); // For hash changes window.addEventListener('hashchange', handlePageChange); // Listen for theme changes (common attributes/classes that change with themes) let themeChangeTimeout = null; const themeObserver = new MutationObserver(mutations => { // Debounce theme changes clearTimeout(themeChangeTimeout); themeChangeTimeout = setTimeout(() => { for (const mutation of mutations) { if ( mutation.type === 'attributes' && (mutation.attributeName === 'data-theme' || mutation.attributeName === 'data-color-mode' || mutation.attributeName === 'class') ) { // Theme might have changed, reinitialize handlePageChange(); break; // Only need to handle once per batch } } }, 100); }); // Observe theme changes on html and body elements (no subtree needed) if (document.documentElement) { themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'data-color-mode', 'class'], }); } if (document.body) { themeObserver.observe(document.body, { attributes: true, attributeFilter: ['data-theme', 'data-color-mode', 'class'], }); } // For DOM changes - only check if catalog element exists, not full subtree let catalogCheckTimeout = null; const bodyObserver = new MutationObserver(mutations => { // Debounce and batch catalog checks clearTimeout(catalogCheckTimeout); catalogCheckTimeout = setTimeout(() => { const catalogExists = document.getElementById('catalog'); if (catalogExists && !catalogElement) { // Catalog was added handlePageChange(); } else if (!catalogExists && catalogElement) { // Catalog was removed cleanup(); } }, 200); }); // Start observing body for changes - only direct children, not full subtree if (document.body) { bodyObserver.observe(document.body, { childList: true, subtree: false, // Changed from true - only watch direct children }); } // Initial check when script loads if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', checkAndInit); } else { checkAndInit(); } // Cleanup on page unload window.addEventListener('beforeunload', cleanup); // REMOVED: setInterval polling - replaced with event-driven checks // The MutationObserver and event listeners handle all necessary updates })();