/** * Custom search overlay — mirrors Mintlify's native Cmd+K design * but groups docs before blog results. */ (() => { const API = 'https://leaves.mintlify.com/api/search/upsun-c9761871'; const TAGS = ['docs', 'tutorials', 'api', 'blog']; const TAG_LABELS = { docs: 'Docs', tutorials: 'Tutorials', api: 'API', blog: 'Blog' }; let overlay = null; let input = null; let resultsContainer = null; let filterRow = null; let clearBtnEl = null; let countEl = null; let cntEls = {}; let debounceTimer = null; let selectedIndex = -1; let allLinks = []; let activeTags = new Set(TAGS); let lastResults = null; let lastQuery = ''; function stripTags(str) { if (!str) return ''; return str.replace(/<[^>]*>/g, '').replace(/\n/g, ' ').trim(); } function escapeHtml(str) { return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } function highlightQuery(text, query) { if (!query || !text) return escapeHtml(text); const escaped = escapeHtml(text); const q = query.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return escaped.replace(new RegExp('(' + q + ')', 'gi'), '$1'); } /* ── Styles ── */ function injectStyles() { if (document.getElementById('so-styles')) return; const s = document.createElement('style'); s.id = 'so-styles'; s.textContent = ` :root { --so-bg: #ffffff; --so-hover: #f5f5f5; --so-selected: #f0f0f0; --so-border: #e5e7eb; --so-text: #111827; --so-text2: #6b7280; --so-muted: #9ca3af; --so-accent: #6046ff; --so-input-bg: #f9fafb; } html.dark { --so-bg: #1c1c1c; --so-hover: #2a2a2a; --so-selected: #2e2e2e; --so-border: #333; --so-text: #f0f0f0; --so-text2: #999; --so-muted: #666; --so-accent: #BFB5FF; --so-input-bg: #252525; } .so-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; justify-content: center; padding-top: min(18vh, 120px); background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.12s; } .so-overlay.so-open { opacity: 1; } .so-dialog { width: 100%; max-width: 620px; max-height: min(68vh, 540px); background: var(--so-bg); border: 1px solid var(--so-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; animation: so-in 0.12s ease-out; } @keyframes so-in { from { transform: scale(0.98) translateY(-6px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* Input */ .so-input-wrap { padding: 12px 14px; } .so-input-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--so-input-bg); border: 1px solid var(--so-border); border-radius: 12px; } .so-search-icon { color: var(--so-muted); flex-shrink: 0; } .so-input { flex: 1; border: none; outline: none; font-size: 15px; background: transparent; color: var(--so-text); font-family: inherit; } .so-input::placeholder { color: var(--so-muted); } .so-close-btn { flex-shrink: 0; border: 1px solid var(--so-border); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; font-family: inherit; color: var(--so-muted); background: transparent; cursor: pointer; } .so-close-btn:hover { border-color: var(--so-text2); color: var(--so-text2); } /* Filters */ .so-filters { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--so-border); flex-wrap: wrap; } .so-filter { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--so-border); background: transparent; color: var(--so-text2); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: all 0.1s; } .so-filter:hover { border-color: var(--so-muted); } .so-filter.so-on { border-color: var(--so-accent); background: rgba(96,70,255,0.08); color: var(--so-accent); } html.dark .so-filter.so-on { background: rgba(191,181,255,0.1); } .so-filter-n { font-size: 10px; font-weight: 600; min-width: 16px; text-align: center; padding: 0 4px; border-radius: 8px; line-height: 16px; } .so-filter.so-on .so-filter-n { background: var(--so-accent); color: #fff; } .so-filter:not(.so-on) .so-filter-n { background: var(--so-border); color: var(--so-muted); } .so-filter-clear { font-size: 11px; font-weight: 500; color: var(--so-accent); background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 6px; opacity: 0; pointer-events: none; transition: opacity 0.12s; } .so-filter-clear.so-visible { opacity: 1; pointer-events: auto; } .so-filter-clear:hover { text-decoration: underline; } .so-result-count { font-size: 11px; color: var(--so-muted); margin-left: auto; flex-shrink: 0; } /* Section headers */ .so-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--so-muted); padding: 12px 12px 4px; } /* Results */ .so-results { flex: 1; overflow-y: auto; padding: 6px 8px; } .so-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; cursor: pointer; position: relative; } .so-item:hover, .so-item.so-sel { background: var(--so-hover); } .so-crumbs { font-size: 11.5px; color: var(--so-muted); padding: 6px 10px 0 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .so-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--so-muted); margin-top: 1px; } .so-body { flex: 1; min-width: 0; } .so-title { font-size: 14px; font-weight: 500; color: var(--so-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .so-hl { color: var(--so-accent); font-weight: 600; } .so-snippet { font-size: 12.5px; color: var(--so-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .so-arrow { flex-shrink: 0; color: var(--so-muted); align-self: center; opacity: 0; transition: opacity 0.08s; } .so-item:hover .so-arrow, .so-item.so-sel .so-arrow { opacity: 1; } /* AI footer */ .so-ai-footer { flex-shrink: 0; border-top: 1px solid var(--so-border); padding: 6px 8px; } .so-ai-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: inherit; } .so-ai-item:hover { background: var(--so-hover); } .so-ai-icon { color: var(--so-accent); flex-shrink: 0; } .so-ai-text { font-size: 14px; font-weight: 500; color: var(--so-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* States */ .so-empty, .so-loading, .so-hint { text-align: center; padding: 36px 16px; color: var(--so-muted); font-size: 13px; } @keyframes so-spin { to { transform: rotate(360deg); } } .so-spinner { width: 20px; height: 20px; border: 2px solid var(--so-border); border-top-color: var(--so-accent); border-radius: 50%; animation: so-spin 0.6s linear infinite; margin: 0 auto 8px; } /* Mobile */ @media (max-width: 640px) { .so-overlay { padding-top: 0; align-items: stretch; } .so-dialog { max-width: 100%; max-height: 100%; border-radius: 0; border: none; height: 100%; } .so-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; } .so-filter { flex-shrink: 0; } .so-crumbs { display: none; } .so-input-wrap { padding: 8px 10px; } } `; document.head.appendChild(s); } /* ── Icons ── */ const ICON_HASH = ''; const ICON_DOC = ''; const ICON_SPARKLE = ''; /* ── Build overlay ── */ function createOverlay() { if (overlay) return; injectStyles(); overlay = document.createElement('div'); overlay.className = 'so-overlay'; overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) close(); }); const dialog = document.createElement('div'); dialog.className = 'so-dialog'; const inputWrap = document.createElement('div'); inputWrap.className = 'so-input-wrap'; const inputRow = document.createElement('div'); inputRow.className = 'so-input-row'; inputRow.innerHTML = ''; input = document.createElement('input'); input.className = 'so-input'; input.type = 'text'; input.placeholder = 'Search...'; input.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => doSearch(input.value), 250); }); input.addEventListener('keydown', handleKey); inputRow.appendChild(input); const closeBtn = document.createElement('button'); closeBtn.className = 'so-close-btn'; closeBtn.textContent = 'ESC'; closeBtn.addEventListener('click', close); inputRow.appendChild(closeBtn); inputWrap.appendChild(inputRow); filterRow = document.createElement('div'); filterRow.className = 'so-filters'; TAGS.forEach((tag) => { const btn = document.createElement('button'); btn.className = 'so-filter'; btn.dataset.tag = tag; btn.innerHTML = TAG_LABELS[tag] + ' 0'; btn.addEventListener('click', () => { if (activeTags.has(tag)) { activeTags.delete(tag); btn.classList.remove('so-on'); } else { activeTags.add(tag); btn.classList.add('so-on'); } updateFilterUI(); if (lastResults) renderResults(lastResults, lastQuery); }); cntEls[tag] = btn.querySelector('.so-filter-n'); filterRow.appendChild(btn); }); clearBtnEl = document.createElement('button'); clearBtnEl.className = 'so-filter-clear'; clearBtnEl.textContent = 'Clear'; clearBtnEl.addEventListener('click', () => { activeTags.clear(); filterRow.querySelectorAll('.so-filter').forEach((b) => b.classList.remove('so-on')); updateFilterUI(); if (lastResults) renderResults(lastResults, lastQuery); }); filterRow.appendChild(clearBtnEl); countEl = document.createElement('span'); countEl.className = 'so-result-count'; filterRow.appendChild(countEl); resultsContainer = document.createElement('div'); resultsContainer.className = 'so-results'; resultsContainer.addEventListener('click', (e) => { if (e.target.closest('.so-item')) close(); }); const aiFooter = document.createElement('div'); aiFooter.className = 'so-ai-footer'; aiFooter.innerHTML = '

' + '

' + ICON_SPARKLE + '

' + '

Ask AI assistant

' + '

'; aiFooter.addEventListener('click', () => { close(); openAI(lastQuery); }); dialog.appendChild(inputWrap); dialog.appendChild(filterRow); dialog.appendChild(resultsContainer); dialog.appendChild(aiFooter); overlay.appendChild(dialog); document.body.appendChild(overlay); } async function searchByTag(q, tag) { try { const r = await fetch(API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: q, filters: { tag }, pageSize: 50 }), }); if (!r.ok) return []; const d = await r.json(); const results = (d.results || []).map((h) => ({ ...h, _tag: tag })); return results; } catch { return []; } } async function doSearch(q) { if (!q || q.trim().length < 2) { resultsContainer.innerHTML = ''; allLinks = []; selectedIndex = -1; lastResults = null; lastQuery = ''; updateCounts(null); return; } resultsContainer.innerHTML = '

Searching...

'; const all = await Promise.all(TAGS.map((t) => searchByTag(q.trim(), t))); const grouped = {}; TAGS.forEach((tag, i) => { grouped[tag] = all[i]; }); lastResults = grouped; lastQuery = q.trim(); updateCounts(grouped); renderResults(grouped, lastQuery); } function updateCounts(grouped) { TAGS.forEach((tag) => { if (cntEls[tag]) cntEls[tag].textContent = grouped && grouped[tag] ? grouped[tag].length : 0; }); } function updateFilterUI() { if (clearBtnEl) clearBtnEl.classList.toggle('so-visible', activeTags.size > 0); } function updateResultCount(count, total) { if (!countEl) return; if (!lastResults) { countEl.textContent = ''; } else if (activeTags.size === 0) { countEl.textContent = total + ' results'; } else { countEl.textContent = count + ' of ' + total + ' results'; } } function renderHits(hits, query) { let html = ''; let prevCrumbs = ''; hits.forEach((hit) => { const title = (hit.metadata && hit.metadata.title) || stripTags(hit.header) || 'Untitled'; const crumbs = (hit.metadata && hit.metadata.breadcrumbs) || []; const crumbStr = crumbs.join(' › '); const snippet = stripTags(hit.content); const hasHash = hit.metadata && hit.metadata.hash; const href = hit.page ? '/' + hit.page + (hasHash ? '#' + hit.metadata.hash : '') : '#'; const icon = hasHash ? ICON_HASH : ICON_DOC; const idx = allLinks.length; allLinks.push(href); if (crumbStr && crumbStr !== prevCrumbs) { html += '

' + escapeHtml(crumbStr) + '

'; prevCrumbs = crumbStr; } html += '' + '

' + icon + '

' + '

' + highlightQuery(title, query) + '

' + (snippet ? '

' + escapeHtml(snippet) + '

' : '') + '

' + '' + ''; }); return html; } function renderResults(grouped, query) { selectedIndex = -1; allLinks = []; let html = ''; const showAll = activeTags.size === 0; let anyResults = false; let shownCount = 0; let totalCount = 0; TAGS.forEach((tag) => { const hits = grouped[tag] || []; totalCount += hits.length; if ((showAll || activeTags.has(tag)) && hits.length > 0) { anyResults = true; shownCount += hits.length; html += '

' + escapeHtml(TAG_LABELS[tag]) + '

'; html += renderHits(hits, query); } }); if (!anyResults) html = '

No results found

'; updateResultCount(shownCount, totalCount); resultsContainer.scrollTop = 0; resultsContainer.innerHTML = html; const aiText = overlay.querySelector('.so-ai-text'); if (aiText) { aiText.textContent = query ? 'Ask AI about ' + query : 'Ask AI assistant'; } } function openAI(query) { const textarea = document.getElementById('chat-assistant-textarea'); if (textarea) { textarea.focus(); if (query) { // Set the query text const nativeSetter = Object.getOwnPropertyDescriptor( window.HTMLTextAreaElement.prototype, 'value' ).set; nativeSetter.call(textarea, 'Can you tell me about ' + query + '?'); textarea.dispatchEvent(new Event('input', { bubbles: true })); } return; } document.dispatchEvent(new KeyboardEvent('keydown', { key: 'i', code: 'KeyI', metaKey: navigator.platform.includes('Mac'), ctrlKey: !navigator.platform.includes('Mac'), bubbles: true, cancelable: true, })); } function handleKey(e) { if (e.key === 'ArrowDown') { e.preventDefault(); if (!allLinks.length) return; selectedIndex = (selectedIndex + 1) % allLinks.length; updateSel(); } else if (e.key === 'ArrowUp') { e.preventDefault(); if (!allLinks.length) return; selectedIndex = selectedIndex <= 0 ? allLinks.length - 1 : selectedIndex - 1; updateSel(); } else if (e.key === 'Enter') { e.preventDefault(); if (selectedIndex >= 0 && allLinks[selectedIndex]) { close(); window.location.href = allLinks[selectedIndex]; } } else if (e.key === 'Escape') { close(); } } function updateSel() { resultsContainer.querySelectorAll('.so-item').forEach((el) => { el.classList.toggle('so-sel', Number(el.dataset.idx) === selectedIndex); }); const sel = resultsContainer.querySelector('.so-sel'); if (sel) sel.scrollIntoView({ block: 'nearest' }); } function open() { createOverlay(); overlay.style.display = ''; requestAnimationFrame(() => overlay.classList.add('so-open')); input.value = ''; resultsContainer.innerHTML = ''; allLinks = []; selectedIndex = -1; activeTags = new Set(); lastResults = null; lastQuery = ''; filterRow.querySelectorAll('.so-filter').forEach((b) => b.classList.remove('so-on')); updateFilterUI(); if (countEl) countEl.textContent = ''; updateCounts(null); input.focus(); document.body.style.overflow = 'hidden'; } function close() { if (!overlay) return; overlay.classList.remove('so-open'); setTimeout(() => { if (overlay) overlay.style.display = 'none'; }, 120); document.body.style.overflow = ''; } document.addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); if (overlay && overlay.classList.contains('so-open')) { close(); } else { open(); } } }, true); const hookSearchBar = () => { const bar = document.getElementById('search-bar-entry'); if (bar && !bar.dataset.soHooked) { bar.dataset.soHooked = '1'; mo.disconnect(); bar.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); open(); }, true); if (!document.getElementById('so-navbar-ai') && !document.getElementById('assistant-entry')) { const parent = bar.parentNode; parent.style.gap = '0.625rem'; const btn = document.createElement('button'); btn.id = 'so-navbar-ai'; btn.className = 'group/ai flex-none hidden lg:flex items-center justify-center gap-1.5 pl-3 pr-3.5 h-9 rounded-xl shadow-sm bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:ring-1 dark:hover:brightness-[1.25] ring-1 ring-gray-400/30 hover:ring-gray-600/30 dark:ring-gray-600/30 dark:hover:ring-gray-500/30'; btn.setAttribute('aria-label', 'Toggle assistant panel'); btn.innerHTML = 'Ask AI'; btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openAI(''); }); parent.appendChild(btn); } } }; const mo = new MutationObserver(hookSearchBar); mo.observe(document.body || document.documentElement, { childList: true, subtree: true }); hookSearchBar(); })();