`;
out += `
`;
names.forEach((name, i) => {
out += ``;
});
out += `
`;
const re = /([\s\S]*?)(?= blocks first, so
// nested tab groups resolve correctly. Loops until no more pairs remain.
const OPEN = '';
const MAX_ITERATIONS = 100;
for (let i = 0; i < MAX_ITERATIONS; i++) {
const closeIdx = md.indexOf(CLOSE);
if (closeIdx === -1) break;
// Find the nearest preceding ', openIdx);
if (afterOpen === -1 || afterOpen > closeIdx) break;
const labels = md.slice(openIdx + OPEN.length, afterOpen).trim();
const body = md.slice(afterOpen + 3, closeIdx);
const replacement = renderTabsBlock(labels, body);
md = md.slice(0, openIdx) + replacement + md.slice(closeIdx + CLOSE.length);
}
return md;
}
const CALLOUT_ICONS = {
note: '
',
info: '
',
tip: '
',
warning: '
',
danger: '
',
};
function buildCalloutIconSvg(type) {
const inner = CALLOUT_ICONS[type] || CALLOUT_ICONS.info;
return `
`;
}
function postProcessCallouts(root) {
root.querySelectorAll('blockquote').forEach(bq => {
const firstP = bq.querySelector('p');
if (!firstP) return;
const text = firstP.innerHTML;
const match = text.match(/^
(Note|Info|Tip|Warning|Danger):<\/strong>\s*/i);
if (!match) return;
const type = match[1].toLowerCase();
const wrap = document.createElement('div');
wrap.className = `callout callout-${type}`;
const icon = document.createElement('span');
icon.className = 'callout-icon';
icon.innerHTML = buildCalloutIconSvg(type);
const body = document.createElement('div');
body.className = 'callout-body';
firstP.innerHTML = `${match[1]}: ` + text.slice(match[0].length);
body.innerHTML = bq.innerHTML;
wrap.appendChild(icon);
wrap.appendChild(body);
bq.replaceWith(wrap);
});
}
function postProcessTabs(root) {
root.querySelectorAll('.tabs-container').forEach(c => {
// Scope to DIRECT children so nested .tabs-container (e.g. "Get your API key"
// inside an outer Desktop App/Terminal group) does not get its buttons or
// panels toggled by the outer group's click handler.
const btns = c.querySelectorAll(':scope > .tabs-bar > .tab-btn');
const panels = c.querySelectorAll(':scope > .tab-panel');
const isCodeTabs = panels.length > 0 && [...panels].every((panel) => {
const meaningfulChildren = [...panel.children].filter((child) => {
if (!(child instanceof HTMLElement)) return false;
return child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE';
});
return meaningfulChildren.length === 1 && meaningfulChildren[0].tagName === 'PRE';
});
if (isCodeTabs) c.classList.add('code-tabs');
btns.forEach(btn => {
btn.addEventListener('click', () => {
const name = btn.dataset.tab;
btns.forEach(b => b.classList.toggle('active', b === btn));
panels.forEach(p => p.classList.toggle('active', p.dataset.panel === name));
});
});
});
}
const RESPONSIVE_SCREENSHOT_VARIANTS = new Map([
['dashboard/dashboard-overview.png', { width: 2880, height: 1800, variantWidth: 900 }],
]);
function getScreenshotVariantConfig(src) {
const match = String(src).match(/(?:screenshots|images)\/(?:light|dark)\/(.+)$/);
if (!match) return null;
return RESPONSIVE_SCREENSHOT_VARIANTS.get(match[1]) || null;
}
function applyScreenshotSource(img, rawSrc) {
const resolved = resolveScreenshotSrc(rawSrc);
if (resolved !== rawSrc) {
img.dataset.screenshot = rawSrc;
}
img.src = resolved;
const variantConfig = getScreenshotVariantConfig(resolved) || getScreenshotVariantConfig(rawSrc);
if (!variantConfig) return;
const optimizedSrc = resolved.replace(/\.png(?:\?.*)?$/i, '-900.webp');
img.width = variantConfig.width;
img.height = variantConfig.height;
img.sizes = '(max-width: 820px) calc(100vw - 48px), 820px';
img.srcset = `${optimizedSrc} ${variantConfig.variantWidth}w, ${resolved} ${variantConfig.width}w`;
img.classList.add('responsive-screenshot');
img.style.aspectRatio = `${variantConfig.width} / ${variantConfig.height}`;
}
function postProcessImages(root) {
[...root.querySelectorAll('img')].forEach((img, index) => {
// Remap ../images/ paths to screenshots/{theme}/ and store original for theme swaps
const rawSrc = img.getAttribute('src') || img.src;
applyScreenshotSource(img, rawSrc);
img.decoding = 'async';
img.loading = index === 0 ? 'eager' : 'lazy';
img.fetchPriority = index === 0 ? 'high' : 'auto';
img.addEventListener('error', () => {
const ph = document.createElement('div');
ph.className = 'img-placeholder';
ph.innerHTML = `Screenshot: ${escapeHtml(img.alt || img.src)}`;
img.replaceWith(ph);
});
});
}
// The connector catalog is one logical table split across category headings.
// Tagging each of those tables lets CSS give them identical column widths, so
// a reader scanning down the page reads one set of columns rather than eleven
// differently proportioned ones. Detection is by header row, not by page, so
// the rule follows the content if it moves.
const CATALOG_TABLE_HEADINGS = ['connector', 'what you can do', 'connection methods'];
const METHODS_COLUMN = 2;
// Authors write a connector's methods as "A · B". In a narrow column that
// wraps wherever the words run out ("Connect with Paperclip · Your / own OAuth
// app"), which reads as one broken phrase instead of two methods. Giving each
// method its own line is the fix that cannot overflow: nowrap would push a
// long method past the column at intermediate widths.
function splitMethodList(cell) {
if (cell.children.length > 0 || cell.dataset.methodsSplit === 'true') return;
const parts = (cell.textContent || '').split('·').map(part => part.trim()).filter(Boolean);
if (parts.length < 2) return;
cell.dataset.methodsSplit = 'true';
cell.textContent = '';
for (const part of parts) {
const item = document.createElement('span');
item.className = 'method-item';
item.textContent = part;
cell.appendChild(item);
}
}
function isCatalogTable(headings) {
return headings.length === CATALOG_TABLE_HEADINGS.length
&& headings.every((heading, index) => heading === CATALOG_TABLE_HEADINGS[index]);
}
// Below the stacking breakpoint these tables render as blocks, which drops the
// implicit table semantics a browser infers from display: table. Stating the
// roles keeps the structure in the accessibility tree at every width, so the
// visually hidden header row is still what a screen reader announces per cell.
function applyExplicitTableRoles(table) {
table.setAttribute('role', 'table');
table.querySelectorAll('thead, tbody, tfoot').forEach(group => group.setAttribute('role', 'rowgroup'));
table.querySelectorAll('tr').forEach(row => row.setAttribute('role', 'row'));
table.querySelectorAll('thead th').forEach(cell => cell.setAttribute('role', 'columnheader'));
table.querySelectorAll('tbody td').forEach(cell => cell.setAttribute('role', 'cell'));
}
function postProcessTables(root) {
root.querySelectorAll('table').forEach(table => {
const headingLabels = [...table.querySelectorAll('thead th')]
.map(cell => (cell.textContent || '').trim());
if (isCatalogTable(headingLabels.map(label => label.toLowerCase()))) {
table.classList.add('catalog-table');
applyExplicitTableRoles(table);
// Stacked cells lose their column, so each one carries its own label.
table.querySelectorAll('tbody tr').forEach(row => {
[...row.children].forEach((cell, index) => {
if (headingLabels[index]) cell.setAttribute('data-label', headingLabels[index]);
if (index === METHODS_COLUMN) splitMethodList(cell);
});
});
}
if (table.parentElement && table.parentElement.classList.contains('table-wrap')) return;
const wrap = document.createElement('div');
wrap.className = 'table-wrap';
if (table.classList.contains('catalog-table')) wrap.classList.add('table-wrap-catalog');
table.parentNode.insertBefore(wrap, table);
wrap.appendChild(table);
});
}
function findPageByRoutePath(routePath) {
const basePath = APP_BASE_URL.pathname.replace(/\/$/, '');
if (basePath && !routePath.startsWith(`${basePath}/`) && routePath !== `${basePath}/`) return null;
const slug = normalizeRouteKey(routePath.slice(basePath.length));
if (!slug) return null;
return allPages.find(candidate => candidate.slug === slug) || null;
}
function postProcessInternalLinks(root) {
root.querySelectorAll('a[href]').forEach(a => {
const href = a.getAttribute('href');
if (!href) return;
// External links → new tab
if (/^https?:\/\//i.test(href)) {
const sameOrigin = (() => {
try { return new URL(href).origin === window.location.origin; }
catch { return false; }
})();
if (!sameOrigin) {
a.setAttribute('target', '_blank');
a.setAttribute('rel', 'noopener noreferrer');
}
return;
}
if (href.startsWith('#')) {
const page = allPages.find(candidate => candidate.file === currentFile);
const headingId = normalizeRouteKey(href.slice(1));
if (page && headingId) {
a.href = getPageHeadingUrl(page, headingId);
a.addEventListener('click', e => {
e.preventDefault();
const heading = document.getElementById(headingId);
history.pushState(null, '', getPageHeadingUrl(page, headingId));
if (heading) focusHeading(heading);
});
}
return;
}
const [docHref, headingHref] = href.split('#');
// Static builds already emit canonical route hrefs. Route them through the
// client so an in-article link is still a soft transition, not a reload.
if (docHref && docHref.startsWith('/')) {
const routePage = findPageByRoutePath(docHref);
if (routePage) {
a.addEventListener('click', e => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
e.preventDefault();
loadPage(routePage.file, headingHref || null);
});
}
return;
}
// Legacy relative markdown links, still present when the SPA renders
// markdown it fetched at runtime.
if (docHref && docHref.endsWith('.md')) {
const targetFile = resolveDocLinkTarget(docHref, currentFile);
const targetPage = allPages.find(candidate => candidate.file === targetFile);
if (targetPage) {
a.href = headingHref ? getPageHeadingUrl(targetPage, headingHref) : getPageUrl(targetPage);
}
a.addEventListener('click', e => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
e.preventDefault();
loadPage(targetFile, headingHref || null);
});
}
});
}
/* ─── Table of contents (desktop rail + compact dropdown) ───────────────── */
function resetToc() {
if (tocObserver) {
tocObserver.disconnect();
tocObserver = null;
}
if (tocScrollHandler) {
window.removeEventListener('scroll', tocScrollHandler);
tocScrollHandler = null;
}
if (tocResizeHandler) {
window.removeEventListener('resize', tocResizeHandler);
tocResizeHandler = null;
}
if (tocDocumentClickHandler) {
document.removeEventListener('click', tocDocumentClickHandler);
tocDocumentClickHandler = null;
}
if (tocKeydownHandler) {
document.removeEventListener('keydown', tocKeydownHandler);
tocKeydownHandler = null;
}
document.querySelectorAll('.toc-wrap').forEach(el => el.remove());
const rail = document.getElementById('toc-rail');
const railLinks = document.getElementById('toc-rail-links');
if (railLinks) railLinks.innerHTML = '';
if (rail) rail.classList.add('is-empty');
}
function headingLabel(heading) {
const clone = heading.cloneNode(true);
clone.querySelectorAll('.heading-anchor').forEach(anchor => anchor.remove());
return clone.textContent.trim();
}
function buildToc(article, file, unlistedPage = null) {
resetToc();
const metaRow = article.querySelector('.meta-row');
const rail = document.getElementById('toc-rail');
const railLinks = document.getElementById('toc-rail-links');
if (!metaRow || !rail || !railLinks) return;
const headings = [...article.querySelectorAll('h2, h3')];
if (headings.length < 2) return;
const page = unlistedPage || allPages.find(candidate => candidate.file === file);
const CHEVRON_SVG = '';
const TOC_SVG = '';
function makeTocLink(heading, onClick) {
const a = document.createElement('a');
a.className = `toc-link ${heading.tagName === 'H3' ? 'level-3' : 'level-2'}`;
a.dataset.headingId = heading.id;
a.textContent = headingLabel(heading);
a.href = page ? getPageHeadingUrl(page, heading.id) : `#${heading.id}`;
a.addEventListener('click', e => {
e.preventDefault();
if (page) history.pushState(null, '', getPageHeadingUrl(page, heading.id));
focusHeading(heading);
if (onClick) onClick();
});
return a;
}
const wrap = document.createElement('div');
wrap.className = 'toc-wrap';
wrap.innerHTML = `
`;
const panel = wrap.querySelector('.toc-panel');
const toggle = wrap.querySelector('.toc-toggle');
const closePanel = () => { panel.classList.remove('is-open'); toggle.setAttribute('aria-expanded', 'false'); };
const openPanel = () => { panel.classList.add('is-open'); toggle.setAttribute('aria-expanded', 'true'); };
headings.forEach(h => {
panel.appendChild(makeTocLink(h, closePanel));
railLinks.appendChild(makeTocLink(h));
});
metaRow.appendChild(wrap);
rail.classList.remove('is-empty');
toggle.addEventListener('click', e => {
e.stopPropagation();
panel.classList.contains('is-open') ? closePanel() : openPanel();
});
tocDocumentClickHandler = e => {
if (panel.classList.contains('is-open') && !wrap.contains(e.target)) closePanel();
};
tocKeydownHandler = e => {
if (e.key === 'Escape' && panel.classList.contains('is-open')) closePanel();
};
document.addEventListener('click', tocDocumentClickHandler);
document.addEventListener('keydown', tocKeydownHandler);
const links = [...document.querySelectorAll('.toc-link')];
const setActiveLink = id => {
links.forEach(link => link.classList.toggle('active', link.dataset.headingId === id));
};
const getActiveHeading = () => {
const offset = 136;
const bottomSlack = 4;
if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - bottomSlack) {
return headings[headings.length - 1];
}
let active = headings[0];
for (const heading of headings) {
if (heading.getBoundingClientRect().top <= offset) active = heading;
else break;
}
return active;
};
let tocFrame = 0;
const updateActive = () => {
tocFrame = 0;
setActiveLink(getActiveHeading().id);
};
const scheduleActiveUpdate = () => {
if (tocFrame) return;
tocFrame = window.requestAnimationFrame(updateActive);
};
tocScrollHandler = scheduleActiveUpdate;
tocResizeHandler = scheduleActiveUpdate;
window.addEventListener('scroll', tocScrollHandler, { passive: true });
window.addEventListener('resize', tocResizeHandler);
tocObserver = new IntersectionObserver(scheduleActiveUpdate, {
rootMargin: '-136px 0px -62% 0px',
threshold: [0, 1],
});
headings.forEach(h => tocObserver.observe(h));
updateActive();
}
/* ─── Prev/next ─────────────────────────────────────────────────────────── */
function renderPageNav(file) {
const nav = document.getElementById('page-nav');
const idx = allPages.findIndex(p => p.file === file);
if (idx === -1) { nav.style.display = 'none'; return; }
const prev = allPages[idx - 1];
const next = allPages[idx + 1];
nav.innerHTML = '';
if (prev) {
const link = document.createElement('a');
link.className = 'page-nav-btn prev';
link.href = getPageUrl(prev);
link.innerHTML = `← Previous${escapeHtml(prev.title)}`;
link.addEventListener('click', e => {
e.preventDefault();
loadPage(prev.file);
});
nav.appendChild(link);
} else {
nav.appendChild(Object.assign(document.createElement('div'), { className: 'page-nav-spacer' }));
}
if (next) {
const link = document.createElement('a');
link.className = 'page-nav-btn next';
link.href = getPageUrl(next);
link.innerHTML = `Next →${escapeHtml(next.title)}`;
link.addEventListener('click', e => {
e.preventDefault();
loadPage(next.file);
});
nav.appendChild(link);
}
nav.style.display = (prev || next) ? 'flex' : 'none';
}
/* ─── Helpers ───────────────────────────────────────────────────────────── */
/* Runtime status is built on demand so a served document never ships loading or
error copy it cannot justify. Only real client-side transitions fill it in. */
function renderRuntimeStatus(state, message, detail = '') {
const mount = document.getElementById('runtime-status');
if (!mount) return;
mount.textContent = '';
mount.dataset.state = state;
if (state === 'loading') {
const spinner = document.createElement('div');
spinner.className = 'spinner';
mount.appendChild(spinner);
}
const messageEl = document.createElement('span');
messageEl.className = 'runtime-status-message';
messageEl.textContent = message;
mount.appendChild(messageEl);
if (detail) {
const detailEl = document.createElement('span');
detailEl.className = 'runtime-status-detail';
detailEl.textContent = detail;
mount.appendChild(detailEl);
}
mount.hidden = false;
}
function clearRuntimeStatus() {
const mount = document.getElementById('runtime-status');
if (!mount) return;
mount.hidden = true;
delete mount.dataset.state;
mount.textContent = '';
}
function showLoading() {
resetToc();
renderRuntimeStatus('loading', 'Loading…');
document.getElementById('article').style.display = 'none';
document.getElementById('page-nav').style.display = 'none';
}
function hideLoading() { clearRuntimeStatus(); }
function showError(msg, detail = '') {
// Error state lives inside article-view; make sure the right view is showing.
showArticleView();
resetToc();
document.getElementById('article').style.display = 'none';
document.getElementById('page-nav').style.display = 'none';
renderRuntimeStatus('error', msg, detail);
}
function escapeHtml(s) {
return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
}
function escapeAttr(s) {
return String(s)
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
window.addEventListener('hashchange', () => {
if (getPathRoute() && !location.hash.startsWith('#/')) return;
const route = parseRoute(applyRedirect(location.hash.slice(1)));
if (route.page) {
loadPage(route.page.file, route.headingId, 'replace');
} else {
const raw = normalizeRouteKey(decodeURIComponent(location.hash.slice(1).trim()));
if (!raw) showLanding();
}
});
window.addEventListener('popstate', () => {
const route = parseRoute(applyRedirect(getCurrentRoute()));
if (route.page && getPathRoute()) route.headingId = getCurrentHeadingRoute();
if (route.page) {
loadPage(route.page.file, route.headingId, 'replace');
return;
}
const raw = normalizeRouteKey(decodeURIComponent((getCurrentRoute() || '').trim()));
if (!raw) showLanding();
});
init();