gabriel / musehub public
mcp-docs.ts typescript
99 lines 3.7 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago
1 /**
2 * mcp-docs.ts — interactive behaviour for the MCP reference page.
3 *
4 * - Real-time tool filter (search by name or description)
5 * - Copy-to-clipboard buttons
6 * - Sidebar active-link highlight on scroll
7 */
8
9 export function initMcpDocs(): void {
10 setupToolFilter();
11 setupCopyButtons();
12 setupSidebarHighlight();
13 }
14
15 // ── Tool filter ───────────────────────────────────────────────────────────────
16
17 function setupToolFilter(): void {
18 const input = document.getElementById('tool-filter') as HTMLInputElement | null;
19 const countEl = document.getElementById('tool-count');
20 if (!input) return;
21
22 const cards = Array.from(document.querySelectorAll<HTMLElement>('.tool-card'));
23
24 input.addEventListener('input', () => {
25 const q = input.value.trim().toLowerCase();
26 let visible = 0;
27
28 cards.forEach((card) => {
29 const name = (card.dataset.toolName || '').toLowerCase();
30 const desc = (card.dataset.toolDesc || '').toLowerCase();
31 const match = !q || name.includes(q) || desc.includes(q);
32 card.hidden = !match;
33 if (match) visible++;
34 });
35
36 if (countEl) {
37 countEl.textContent = q
38 ? `${visible} / ${cards.length} tools`
39 : `${cards.length} tools`;
40 }
41
42 // Show/hide section headings when all their tools are hidden
43 document.querySelectorAll<HTMLElement>('.docs-section').forEach((section) => {
44 const toolList = section.querySelector('.tool-list');
45 if (!toolList) return;
46 const visibleInSection = Array.from(toolList.querySelectorAll<HTMLElement>('.tool-card'))
47 .some((c) => !c.hidden);
48 section.style.display = (q && !visibleInSection) ? 'none' : '';
49 });
50 });
51 }
52
53 // ── Copy buttons ──────────────────────────────────────────────────────────────
54
55 function setupCopyButtons(): void {
56 document.querySelectorAll<HTMLButtonElement>('.copy-btn').forEach((btn) => {
57 btn.addEventListener('click', () => {
58 const text = btn.dataset.copy || '';
59 navigator.clipboard.writeText(text).then(() => {
60 const orig = btn.innerHTML;
61 btn.innerHTML = `<svg width="11" height="11" style="color:#3fb950" aria-hidden="true"><use href="#icon-check"></use></svg>`;
62 setTimeout(() => { btn.innerHTML = orig; }, 1500);
63 });
64 });
65 });
66 }
67
68 // ── Sidebar active link on scroll ─────────────────────────────────────────────
69
70 function setupSidebarHighlight(): void {
71 const links = Array.from(document.querySelectorAll<HTMLAnchorElement>('.docs-sidebar-link[href^="#"]'));
72 if (!links.length) return;
73
74 const sections = links
75 .map((link) => {
76 const id = link.getAttribute('href')!.slice(1);
77 return { link, el: document.getElementById(id) };
78 })
79 .filter((s): s is { link: HTMLAnchorElement; el: HTMLElement } => !!s.el);
80
81 const headerHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height') || '42', 10);
82
83 const observer = new IntersectionObserver(
84 (entries) => {
85 entries.forEach((entry) => {
86 const match = sections.find((s) => s.el === entry.target);
87 if (match) {
88 if (entry.isIntersecting) {
89 links.forEach((l) => l.style.removeProperty('color'));
90 match.link.style.color = 'var(--text-primary)';
91 }
92 }
93 });
94 },
95 { rootMargin: `-${headerHeight + 48}px 0px -60% 0px`, threshold: 0 },
96 );
97
98 sections.forEach(({ el }) => observer.observe(el));
99 }
File History 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago