From 80d6483d663c23cbf67be00c0420399f2c00ea59 Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Thu, 7 May 2026 01:45:44 +0100 Subject: [PATCH] fix: debounce docs search input --- scripts/docs-site/assets.mjs | 5 +++-- scripts/docs-site/smoke.mjs | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/scripts/docs-site/assets.mjs b/scripts/docs-site/assets.mjs index 081a5b06f..dca5eb67b 100644 --- a/scripts/docs-site/assets.mjs +++ b/scripts/docs-site/assets.mjs @@ -11,7 +11,7 @@ export function siteCss() { .oc-card-grid,.oc-card-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 28px}.oc-card{display:block;min-height:142px;border:1px solid var(--line-strong);background:transparent;border-radius:12px;padding:22px 24px;color:var(--text)}.oc-card:hover{border-color:var(--brand);color:var(--text)}.oc-card:first-child{border-color:var(--brand)}.oc-card strong{display:block;color:var(--ink);font:750 16px/1.3 ui-sans-serif,system-ui,sans-serif;margin:18px 0 8px}.oc-card p{margin:0;color:var(--muted);line-height:1.55}.oc-card-icon{display:block;width:24px;height:24px;color:var(--brand);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .oc-steps{counter-reset:step;list-style:none;padding-left:0!important}.oc-step{counter-increment:step;border-left:2px solid var(--line);padding:0 0 12px 22px;position:relative}.oc-step:before{content:counter(step);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#111;display:grid;place-items:center;font-size:12px;font-weight:800}.oc-step h3{margin-top:0}.oc-callout{border:1px solid var(--line-strong);border-left:4px solid var(--brand);background:var(--paper);border-radius:10px;padding:13px 15px;margin:18px 0}.oc-callout-warning{border-left-color:#d97706}.oc-callout-tip,.oc-callout-check{border-left-color:#48b49a}.oc-tabs{display:grid;gap:10px;margin:16px 0}.oc-tab,.oc-param,.oc-frame,.oc-code-group{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;padding:13px 15px;margin:12px 0}.oc-tab h3{margin-top:0}.oc-accordion{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;margin:10px 0;padding:0 13px}.oc-accordion summary{cursor:pointer;color:var(--ink);font-weight:750;padding:12px 0}.oc-param header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.oc-param-type,.oc-param-required{border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px;font-size:12px;color:var(--muted)}.oc-param-required{color:var(--brand)} .page-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);margin-top:44px;padding-top:18px}.page-nav a{border:1px solid var(--line-strong);background:var(--paper);border-radius:10px;padding:13px;color:var(--text)}.page-nav a:hover{border-color:var(--brand)}.page-nav small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.next{text-align:right} -.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;z-index:50;padding:8vh 18px}.search-modal.open{display:block}.search-panel{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.search-head{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.search-head input{flex:1;border:1px solid var(--line-strong);border-radius:10px;padding:10px;background:var(--bg);color:var(--text)}.search-head button{border:1px solid var(--line-strong);background:var(--paper-2);color:var(--text);border-radius:9px;padding:0 12px}.search-results{max-height:62vh;overflow:auto;padding:8px 12px 14px}.search-result{display:block;border-bottom:1px solid var(--line);padding:12px;color:var(--text)}.search-result strong{display:block;color:var(--ink)}.search-result p{margin:.35em 0 0;color:var(--muted);font-size:13px} +.search-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;z-index:50;padding:8vh 18px}.search-modal.open{display:block}.search-panel{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.search-head{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.search-head input{flex:1;border:1px solid var(--line-strong);border-radius:10px;padding:10px;background:var(--bg);color:var(--text)}.search-head button{border:1px solid var(--line-strong);background:var(--paper-2);color:var(--text);border-radius:9px;padding:0 12px}.search-results{min-height:220px;max-height:62vh;overflow:auto;padding:8px 12px 14px}.search-results.is-loading{cursor:progress}.search-state{margin:0;padding:12px;color:var(--muted)}.search-result{display:block;border-bottom:1px solid var(--line);padding:12px;color:var(--text)}.search-result strong{display:block;color:var(--ink)}.search-result p{margin:.35em 0 0;color:var(--muted);font-size:13px} .docs-chat{position:fixed;right:22px;bottom:22px;z-index:60}.docs-chat-launcher{height:46px;border:1px solid color-mix(in srgb,var(--brand) 62%,var(--line));border-radius:999px;background:var(--ink);color:var(--bg);display:flex;align-items:center;gap:9px;padding:0 17px;font-weight:850;cursor:pointer;box-shadow:0 16px 50px rgba(0,0,0,.34)}.docs-chat-launcher:hover{background:var(--brand);color:#120f0e}.docs-chat-launcher span:first-child{color:var(--brand);line-height:1}.docs-chat-launcher:hover span:first-child{color:#120f0e}.docs-chat-panel{position:absolute;right:0;bottom:60px;width:min(410px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 120px));display:none;grid-template-rows:auto auto minmax(180px,1fr) auto;background:color-mix(in srgb,var(--paper) 94%,#000 6%);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.55);overflow:hidden}.docs-chat.open .docs-chat-panel{display:grid}.docs-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 88%,transparent)}.docs-chat-head p{margin:0 0 2px;color:var(--brand);font-size:12px;font-weight:850;text-transform:uppercase}.docs-chat-head h2{margin:0;color:var(--ink);font:760 19px/1.1 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.docs-chat-head button{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}.docs-chat-head button:hover{color:var(--ink)}.docs-chat-actions{display:flex;align-items:center;gap:8px}.docs-chat-head .docs-chat-clear{font-size:12px;font-weight:750;color:var(--muted);padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;letter-spacing:.06em;text-transform:uppercase;line-height:1;height:28px;display:inline-flex;align-items:center;transition:color .15s ease,border-color .15s ease}.docs-chat-head .docs-chat-clear:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 60%,var(--line-strong))}.docs-chat-head .docs-chat-clear[hidden]{display:none}.docs-chat-auth{padding:14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,#000 8%)}.docs-chat-auth[hidden]{display:none}.docs-chat-auth-card{border:1px solid var(--line-strong);border-radius:14px;background:color-mix(in srgb,var(--paper-2) 86%,transparent);padding:14px}.docs-chat-auth-card p{margin:0 0 12px;color:var(--text);font-size:14px;line-height:1.45}.docs-chat-auth-card strong{display:block;color:var(--ink);font:760 15px/1.25 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-bottom:5px}.docs-chat-verify{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#15100e!important;font-weight:850;padding:0 14px;text-decoration:none!important}.docs-chat-verify:hover{background:color-mix(in srgb,var(--brand) 86%,white 14%);color:#15100e!important}.docs-chat-log{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.docs-chat-message{max-width:92%;border:1px solid var(--line);border-radius:14px;padding:10px 12px;overflow-wrap:break-word}.docs-chat-message p{margin:0 0 .7em}.docs-chat-message p:last-child{margin-bottom:0}.docs-chat-message a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-word}.docs-chat-message code{background:var(--code);border:1px solid var(--line-strong);border-radius:5px;padding:.05em .32em;color:var(--code-text);font-size:.9em}.docs-chat-code{margin:.35em 0 .85em;border:1px solid var(--line-strong);border-radius:8px;background:color-mix(in srgb,var(--code) 92%,#000 8%);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.22)}.docs-chat-code-head{display:flex;align-items:center;min-height:28px;padding:5px 10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.docs-chat-code pre{margin:0;padding:12px;overflow:auto;white-space:pre;line-height:1.55}.docs-chat-code code{display:block;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;color:var(--code-text);font-size:12px}.docs-chat-message.user{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:#14100f}.docs-chat-message.assistant{align-self:flex-start;background:var(--paper-2);color:var(--text)}.docs-chat-message.thinking{padding:14px;min-height:42px;display:inline-flex;align-items:center}.docs-chat-thinking{display:inline-flex;gap:7px;align-items:flex-end;height:14px}.docs-chat-thinking span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:docs-chat-dot 1.25s cubic-bezier(.4,0,.2,1) infinite;will-change:transform,opacity,background-color}.docs-chat-thinking span:nth-child(2){animation-delay:.18s}.docs-chat-thinking span:nth-child(3){animation-delay:.36s}@keyframes docs-chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0) scale(.85);background:var(--muted)}40%{opacity:1;transform:translateY(-5px) scale(1);background:var(--brand)}}@media(prefers-reduced-motion:reduce){.docs-chat-thinking span{animation-duration:2.4s;animation-name:docs-chat-dot-fade}@keyframes docs-chat-dot-fade{0%,100%{opacity:.35}50%{opacity:1}}}.docs-chat-message.error{border-color:#8b2f28;color:#ffb4a8;background:color-mix(in srgb,#401510 35%,var(--paper))}.docs-chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}.docs-chat-form[hidden]{display:none}.docs-chat-form textarea{resize:none;min-height:44px;max-height:130px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink);padding:10px 11px;line-height:1.35}.docs-chat-form textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 42%,transparent);border-color:var(--brand)}.docs-chat-form button{align-self:end;height:42px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#15100e;font-weight:850;padding:0 15px;cursor:pointer}.docs-chat-form button:disabled{opacity:.55;cursor:wait} @media(max-width:1120px){.header-row{grid-template-columns:auto 1fr auto}.header-links a{display:none}.doc-shell{grid-template-columns:210px minmax(0,1fr);gap:34px}.main{grid-template-columns:minmax(0,1fr)}.toc{display:none}}@media(max-width:820px){html{scroll-padding-top:78px}.site-header{position:sticky}.header-row{height:auto;min-height:62px;grid-template-columns:1fr auto;padding:10px 16px;gap:12px}.header-left{order:1}.language-trigger{max-width:58vw}.language-menu{width:min(390px,calc(100vw - 32px));max-height:min(72vh,620px)}.search-button{order:3;grid-column:1/-1;width:100%}.header-links{order:2}.nav-toggle{display:inline-flex}.tabs{display:none}.doc-shell{display:block;padding:24px 18px 86px}.sidebar{position:fixed;inset:0 18% 0 0;z-index:45;transform:translateX(-100%);transition:transform .2s ease;background:var(--bg);border-right:1px solid var(--line);padding:22px 18px;max-height:none}.sidebar.open{transform:translateX(0)}.article h1{font-size:30px}.oc-card-grid,.oc-card-group{grid-template-columns:1fr}.next{text-align:left}.page-nav{grid-template-columns:1fr}.docs-chat{right:14px;bottom:14px}.docs-chat-launcher{height:44px;padding:0 14px}.docs-chat-panel{bottom:56px;width:calc(100vw - 28px);max-height:calc(100vh - 92px)}} `; @@ -57,6 +57,7 @@ addEventListener("popstate",()=>navigateTo(new URL(location.href),true)); let tabResizeRaf=0;addEventListener("resize",()=>{cancelAnimationFrame(tabResizeRaf);tabResizeRaf=requestAnimationFrame(()=>placeTabUnderline(false))}); if(document.fonts?.ready)document.fonts.ready.then(()=>placeTabUnderline(false)); requestAnimationFrame(()=>placeTabUnderline(false)); -let seq=0;input?.addEventListener("input",async e=>{const q=e.target.value.trim();const id=++seq;if(!q){results.innerHTML="";return}results.innerHTML="

Searching...

";const pf=await pagefindReady;if(id!==seq)return;const search=await pf.search(q);const items=await Promise.all(search.results.slice(0,12).map(r=>r.data()));if(id!==seq)return;results.innerHTML=items.length?items.map(item=>''+item.meta.title+'

'+item.excerpt+'

').join(""):"

No results.

"}); +let seq=0;let searchTimer=0;async function runSearch(q,id){if(!results)return;if(!results.innerHTML.trim())results.innerHTML='

Searching...

';results.classList.add("is-loading");const pf=await (pagefindReady ||= import(withBase("/pagefind/pagefind.js")).then(m=>m.init?.().then?.(()=>m)??m));if(id!==seq)return;const search=await pf.search(q);const items=await Promise.all(search.results.slice(0,12).map(r=>r.data()));if(id!==seq)return;results.classList.remove("is-loading");results.innerHTML=items.length?items.map(item=>''+item.meta.title+'

'+item.excerpt+'

').join(""):'

No results.

'} +input?.addEventListener("input",e=>{const q=e.target.value.trim();const id=++seq;clearTimeout(searchTimer);results?.classList.remove("is-loading");if(!q){if(results)results.innerHTML="";return}searchTimer=setTimeout(()=>runSearch(q,id),140)}); `; } diff --git a/scripts/docs-site/smoke.mjs b/scripts/docs-site/smoke.mjs index f3818f43d..a62a61c1f 100644 --- a/scripts/docs-site/smoke.mjs +++ b/scripts/docs-site/smoke.mjs @@ -91,6 +91,9 @@ if (/data-locale/.test(siteJs)) { if (!/function initChat/.test(siteJs) || !/data-chat-form/.test(siteJs)) { throw new Error("assets: docs chat behavior is missing"); } +if (!/function runSearch/.test(siteJs) || !/setTimeout\(\(\)=>runSearch\(q,id\),140\)/.test(siteJs)) { + throw new Error("assets: search input is not debounced"); +} const platformsIndex = fs.readFileSync(path.join(site, "platforms/index.html"), "utf8"); if (/VPS & hosting/.test(platformsIndex)) { throw new Error("platforms index: TOC double-escaped ampersand");