Skip to content

Reduce main-thread thrashing and eliminate full-page-reload on nav #265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Blargian wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Reduce main-thread thrashing and eliminate full-page-reload on nav #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ab0518
Reduce main-thread thrashing and eliminate full-page-reload on nav
Blargian Jun 24, 2026
5e8901a
Fix homepage navbar hidden + remove scroll-reset for testing
Blargian Jun 25, 2026
b9b16c0
Revert tab-nav pushState — use location.href for button nav
Blargian Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 11 additions & 16 deletions _site/customizations/ask-ai-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,6 @@
+ '<polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></polygon>'
+ '</g></svg>';

function injectStyles() {
if (document.getElementById('ch-ask-ai-styles')) return;
var style = document.createElement('style');
style.id = 'ch-ask-ai-styles';
style.textContent = '.dark .ch-ai-icon { color: #fdff75; }';
document.head.appendChild(style);
}

// Wait briefly for Kapa to mount (it's loaded async), then open. Kapa's
// open() accepts an optional query that's submitted immediately when
// submit:true is set.
Expand Down Expand Up @@ -47,8 +39,6 @@

if (!searchBar) return false;

injectStyles();

var btn = document.createElement('button');
btn.id = BTN_ID;
btn.type = 'button';
Expand All @@ -71,8 +61,6 @@

if (!mobileSearchBtn) return false;

injectStyles();

var btn = document.createElement('button');
btn.id = MOBILE_BTN_ID;
btn.type = 'button';
Expand All @@ -89,12 +77,19 @@
}

function init() {
injectButton();
injectMobileButton();
var desktopDone = injectButton();
var mobileDone = injectMobileButton();
if (desktopDone && mobileDone) return;

var rafId = null;
var observer = new MutationObserver(function () {
injectButton();
injectMobileButton();
if (rafId) return;
rafId = requestAnimationFrame(function () {
rafId = null;
if (!desktopDone) desktopDone = injectButton();
if (!mobileDone) mobileDone = injectMobileButton();
if (desktopDone && mobileDone) observer.disconnect();
});
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
Expand Down
31 changes: 0 additions & 31 deletions _site/customizations/clickhouse-sql-highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,36 +232,6 @@

// ---- DOM integration ------------------------------------------------------

var STYLE_ID = 'ch-sql-highlight-styles';

// The exact light + dark palette from play.html / clickhouse-client, adapted
// to Mintlify's dark-mode carrier (`<html class="dark">`). Scoped to
// `.ch-sql-hl` so only blocks we rebuilt are affected. `!important` is
// required because Mintlify forces `html.dark .shiki span { color:
// var(--shiki-dark) !important }` on every token; our higher-specificity
// `.dark .ch-sql-hl .q-*` rules only win when they are also `!important`.
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.ch-sql-hl .q-kw{font-weight:bold !important}' +
'.ch-sql-hl .q-com{font-style:italic !important;color:#757575 !important}' +
'.ch-sql-hl .q-id{color:#00838f !important}' +
'.ch-sql-hl .q-fn{color:#875f00 !important}' +
'.ch-sql-hl .q-num{color:#008700 !important}' +
'.ch-sql-hl .q-str{color:#006400 !important}' +
'.ch-sql-hl .q-qid{color:#008b8b !important}' +
'.dark .ch-sql-hl .q-id{color:#00cdcd !important}' +
'.dark .ch-sql-hl .q-fn{color:#cdcd00 !important}' +
'.dark .ch-sql-hl .q-num{color:#00d700 !important}' +
'.dark .ch-sql-hl .q-str{color:#00cd00 !important}' +
'.dark .ch-sql-hl .q-qid{color:#00d7d7 !important}' +
'.dark .ch-sql-hl .q-com{color:#9e9e9e !important}';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}

// Replace a line element's Shiki token spans with our class-based segments.
// Uses textContent (not innerHTML) so SQL characters like `<` and `&` are
// never interpreted as markup.
Expand Down Expand Up @@ -302,7 +272,6 @@
code.dataset.chSqlState = 'skipped';
return;
}
injectStyles();
for (var i = 0; i < lineEls.length; i++) renderLine(lineEls[i], lines[i]);
code.classList.add('ch-sql-hl');
code.dataset.chSqlState = 'done';
Expand Down
78 changes: 0 additions & 78 deletions _site/customizations/custom-footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,82 +126,6 @@
return html;
}

function injectStyles() {
if (document.getElementById('ch-footer-styles')) return;
var style = document.createElement('style');
style.id = 'ch-footer-styles';
style.textContent = ''
+ '#' + FOOTER_ID + ' { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }'
// On desktop the sidebar is fixed at 19rem wide; match #content-container's
// horizontal padding (pl-[32px] / pr-[32px]) so the footer's inner edges
// align with the content area used by both doc pages and the home page.
+ '@media (min-width: 1024px) { #' + FOOTER_ID + ' { padding-left: calc(19rem + 32px) !important; padding-right: 32px !important; } }'
+ '#' + FOOTER_ID + ' [data-inner] { max-width: 1280px; margin: 0 auto; }'
+ '#' + FOOTER_ID + ' * { box-sizing: border-box; }'
+ '#' + FOOTER_ID + ' a { text-decoration: none; transition: color 0.15s, border-color 0.15s; }'
// Top section: sitemap + CTA side by side only at wide viewports
+ '#' + FOOTER_ID + ' [data-top] { display: flex; flex-direction: column; gap: 32px; padding-bottom: 48px; }'
+ '@media (min-width: 1400px) { #' + FOOTER_ID + ' [data-top] { flex-direction: row; gap: 40px; } }'
// Sitemap grid: 2 cols default, 3 at md, 5 only when side-by-side
+ '#' + FOOTER_ID + ' [data-sitemap] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; flex: 1; min-width: 0; }'
+ '@media (min-width: 768px) { #' + FOOTER_ID + ' [data-sitemap] { grid-template-columns: repeat(3, 1fr); } }'
+ '@media (min-width: 1400px) { #' + FOOTER_ID + ' [data-sitemap] { grid-template-columns: repeat(5, 1fr); } }'
// Column headings
+ '#' + FOOTER_ID + ' [data-sitemap] h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px; }'
+ '#' + FOOTER_ID + ' [data-sitemap] .ch-sub-heading { margin-top: 24px; }'
+ '#' + FOOTER_ID + ' [data-sitemap] ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }'
+ '#' + FOOTER_ID + ' [data-sitemap] a { font-size: 13px; }'
// CTA column
+ '#' + FOOTER_ID + ' [data-cta] { display: flex; flex-direction: column; }'
+ '@media (min-width: 1400px) { #' + FOOTER_ID + ' [data-cta] { width: 300px; flex-shrink: 0; } }'
+ '#' + FOOTER_ID + ' [data-cta] p { font-size: 13px; line-height: 1.5; margin: 0 0 20px; }'
+ '#' + FOOTER_ID + ' [data-cta] form { display: flex; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }'
+ '#' + FOOTER_ID + ' [data-cta] form input { flex: 1; background: transparent; border: none; padding: 10px 14px; font-size: 13px; outline: none; min-width: 0; }'
+ '#' + FOOTER_ID + ' [data-cta] form button { background: #fdff75; color: #1c1c1c; border: none; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }'
+ '#' + FOOTER_ID + ' [data-cta] form button:hover { background: #eaec6a; }'
+ '#' + FOOTER_ID + ' [data-gh] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; width: 100%; }'
+ '#' + FOOTER_ID + ' [data-gh]:hover { border-color: #888 !important; }'
// Bottom bar
+ '#' + FOOTER_ID + ' [data-divider] { margin-bottom: 24px; }'
+ '#' + FOOTER_ID + ' [data-bottom] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }'
+ '#' + FOOTER_ID + ' [data-bottom] a { font-size: 13px; white-space: nowrap; }'
+ '#' + FOOTER_ID + ' [data-legal] { display: flex; flex-wrap: wrap; gap: 16px; }'
+ '@media (max-width: 639px) {'
+ ' #' + FOOTER_ID + ' [data-bottom] { flex-direction: column; text-align: center; }'
+ ' #' + FOOTER_ID + ' [data-legal] { justify-content: center; }'
+ '}'
// Light mode colors
+ '#' + FOOTER_ID + ' [data-sitemap] h3 { color: #111; }'
+ '#' + FOOTER_ID + ' [data-sitemap] a { color: #6b7280; }'
+ '#' + FOOTER_ID + ' [data-sitemap] a:hover { color: #111; }'
+ '#' + FOOTER_ID + ' [data-cta] p { color: #6b7280; }'
+ '#' + FOOTER_ID + ' [data-cta] form { border: 1px solid #d1d5db; }'
+ '#' + FOOTER_ID + ' [data-cta] form input { color: #111; }'
+ '#' + FOOTER_ID + ' [data-cta] form input::placeholder { color: #9ca3af; }'
+ '#' + FOOTER_ID + ' [data-gh] { color: #111; border: 1px solid #d1d5db; }'
+ '#' + FOOTER_ID + ' [data-divider] { border-top: 1px solid #e5e7eb; }'
+ '#' + FOOTER_ID + ' [data-copyright] { font-size: 13px; color: #6b7280; }'
+ '#' + FOOTER_ID + ' [data-bottom] a { color: #6b7280; }'
+ '#' + FOOTER_ID + ' [data-bottom] a:hover { color: #111; }'
+ '#' + FOOTER_ID + ' [data-logo] { margin-bottom: 16px; }'
+ '#' + FOOTER_ID + ' [data-logo] svg * { fill: #111; }'
// Dark mode colors
+ '.dark #' + FOOTER_ID + ' [data-sitemap] h3 { color: #f5f5f5; }'
+ '.dark #' + FOOTER_ID + ' [data-sitemap] a { color: #a3a3a3; }'
+ '.dark #' + FOOTER_ID + ' [data-sitemap] a:hover { color: #f5f5f5; }'
+ '.dark #' + FOOTER_ID + ' [data-cta] p { color: #a3a3a3; }'
+ '.dark #' + FOOTER_ID + ' [data-cta] form { border-color: #555; }'
+ '.dark #' + FOOTER_ID + ' [data-cta] form input { color: #fff; }'
+ '.dark #' + FOOTER_ID + ' [data-cta] form input::placeholder { color: #6b7280; }'
+ '.dark #' + FOOTER_ID + ' [data-gh] { color: #fff; border-color: #555; }'
+ '.dark #' + FOOTER_ID + ' [data-divider] { border-color: #333; }'
+ '.dark #' + FOOTER_ID + ' [data-copyright] { color: #a3a3a3; }'
+ '.dark #' + FOOTER_ID + ' [data-bottom] a { color: #a3a3a3; }'
+ '.dark #' + FOOTER_ID + ' [data-bottom] a:hover { color: #f5f5f5; }'
+ '.dark #' + FOOTER_ID + ' [data-logo] svg * { fill: #fff; }';
document.head.appendChild(style);
}

function buildFooterHtml() {
var year = new Date().getFullYear();

Expand Down Expand Up @@ -290,8 +214,6 @@
}

// Inject styles and create footer
injectStyles();

var wrapper = document.createElement('footer');
wrapper.id = FOOTER_ID;
wrapper.style.cssText = 'width:100%;padding:64px 24px 32px;';
Expand Down
38 changes: 6 additions & 32 deletions _site/customizations/navbar-cta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,43 +12,12 @@
return String(count);
}

function injectStyles() {
if (document.getElementById('ch-navbar-cta-styles')) return;
var style = document.createElement('style');
style.id = 'ch-navbar-cta-styles';
style.textContent = ''
// Hide mobile AI assistant button
+ '#assistant-entry-mobile { display: none !important; }'
// Invert dark SVG logos so they're visible on dark backgrounds
+ '.dark img[src*="windsurf"], :is(.dark) img[src*="windsurf"] { filter: invert(1) !important; }'
// CTA container
+ '#' + CTA_ID + ' { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 32px; }'
// GitHub stars link
+ '#' + CTA_ID + ' .ch-gh-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.15s; }'
+ '#' + CTA_ID + ' .ch-gh-stars svg { flex-shrink: 0; }'
// Get started button
+ '#' + CTA_ID + ' .ch-cta-btn { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }'
// Light mode
+ '#' + CTA_ID + ' .ch-gh-stars { color: #374151; }'
+ '#' + CTA_ID + ' .ch-gh-stars:hover { color: #111; }'
+ '#' + CTA_ID + ' .ch-cta-btn { background: #1c1c1c; color: #fff; }'
+ '#' + CTA_ID + ' .ch-cta-btn:hover { background: #333; }'
// Dark mode
+ '.dark #' + CTA_ID + ' .ch-gh-stars { color: #d1d5db; }'
+ '.dark #' + CTA_ID + ' .ch-gh-stars:hover { color: #fff; }'
+ '.dark #' + CTA_ID + ' .ch-cta-btn { background: #fdff75; color: #1c1c1c; }'
+ '.dark #' + CTA_ID + ' .ch-cta-btn:hover { background: #eaec6a; }';
document.head.appendChild(style);
}

function injectCta() {
if (document.getElementById(CTA_ID)) return true;

var mapleNav = document.getElementById('navbar-transition-maple');
if (!mapleNav) return false;

injectStyles();

// --- Right section: GitHub stars + Get started ---
var container = document.createElement('div');
container.id = CTA_ID;
Expand Down Expand Up @@ -101,8 +70,13 @@
function init() {
injectCta();

var rafId = null;
var observer = new MutationObserver(function () {
injectCta();
if (rafId) return;
rafId = requestAnimationFrame(function () {
rafId = null;
injectCta();
});
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
Expand Down
14 changes: 8 additions & 6 deletions _site/customizations/quickstart-back-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,14 @@

function init() {
apply();
// Re-apply across SPA navigations / React re-renders. apply() is
// idempotent, so observer feedback loops settle immediately.
new MutationObserver(apply).observe(document.documentElement, {
childList: true,
subtree: true,
});
var rafId = null;
new MutationObserver(function () {
if (rafId) return;
rafId = requestAnimationFrame(function () {
rafId = null;
apply();
});
}).observe(document.documentElement, { childList: true, subtree: true });
}

if (document.readyState === 'loading') {
Expand Down
59 changes: 37 additions & 22 deletions _site/customizations/scroll-reset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,34 @@
// With an announcement banner configured, Next.js skips its scroll-to-top
// on client-side navigation: the banner is position:fixed at the top of the
// re-rendered segment, so the router considers the new page "already in
// viewport" and leaves the scroll position where it was. (Banner-less
// Mintlify sites scroll to top as expected; dismissing the banner makes the
// bug disappear.) Restore the expected behavior by scrolling to the top
// whenever a forward navigation changes the path.
// viewport" and leaves the scroll position where it was.
//
// The path is watched from a rAF loop rather than by wrapping
// history.pushState — the router can hold a reference to the original
// pushState from before this script runs, which would bypass a wrapper.
// Two-layer detection:
// 1. Patch history.pushState/replaceState at eval time — covers tab-nav.js's
// own history.pushState() calls and any navigation before Next.js hydrates.
// 2. setInterval at 100ms — covers the case where Next.js hydrates before
// this script runs and calls a cached reference to the original pushState,
// bypassing our wrapper. 100ms fires ~10×/sec (vs the original rAF loop
// at ~60×/sec) — same correctness guarantee with 6× less polling.
//
// Both paths are idempotent: check() compares lastPath before acting, so a
// rapid pushState patch + interval tick never double-scrolls.
//
// Back/forward (popstate) is deliberately left alone so the browser and
// router can restore the previous scroll position. Cross-page hash links
// (/page#anchor) scroll to the anchor once the new page has rendered it,
// since the banner bug breaks that scroll too.
// router can restore the previous scroll position.

(function patchHistory() {
function wrap(orig) {
return function () {
var result = orig.apply(this, arguments);
window.dispatchEvent(new Event('ch:navigate'));
return result;
};
}
history.pushState = wrap(history.pushState);
history.replaceState = wrap(history.replaceState);
})();

var lastPath = window.location.pathname;
var traversed = false;

Expand Down Expand Up @@ -44,19 +59,19 @@
}
}

function watch() {
function check() {
var path = window.location.pathname;
if (path !== lastPath) {
lastPath = path;
if (traversed) {
traversed = false;
} else if (window.location.hash) {
scrollToAnchor(window.location.hash, 180);
} else {
window.scrollTo(0, 0);
}
if (path === lastPath) return;
lastPath = path;
if (traversed) {
traversed = false;
} else if (window.location.hash) {
scrollToAnchor(window.location.hash, 180);
} else {
window.scrollTo(0, 0);
}
window.requestAnimationFrame(watch);
}
window.requestAnimationFrame(watch);

window.addEventListener('ch:navigate', check);
setInterval(check, 100);
})();
Loading