gabriel / musehub public
issue-detail.ts typescript
112 lines 4.8 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 155 days ago
1 /**
2 * issue-detail.ts — Issue detail page module.
3 *
4 * Responsibilities:
5 * 1. Comment entrance animations (IntersectionObserver stagger).
6 * 2. Re-animate comments after HTMX swap (new comment submitted).
7 * 3. Copy issue URL to clipboard (keyboard shortcut).
8 * 4. Syntax-highlight CLI / MCP / REST code snippets (highlight.js).
9 * 5. Inject per-snippet copy buttons.
10 */
11
12 import hljs from 'highlight.js/lib/core';
13 import bash from 'highlight.js/lib/languages/bash';
14 import javascript from 'highlight.js/lib/languages/javascript';
15
16 hljs.registerLanguage('bash', bash);
17 hljs.registerLanguage('javascript', javascript);
18
19
20 // ── Comment entrance animations ───────────────────────────────────────────────
21
22 function animateComments(root: Element | Document = document): void {
23 const comments = root.querySelectorAll<HTMLElement>(".id-comment, .id-reply");
24 if (!comments.length) return;
25
26 const io = new IntersectionObserver((entries) => {
27 entries.forEach((entry, i) => {
28 if (!entry.isIntersecting) return;
29 const el = entry.target as HTMLElement;
30 el.style.animationDelay = `${i * 30}ms`;
31 io.unobserve(el);
32 });
33 }, { threshold: 0.05 });
34
35 comments.forEach(el => io.observe(el));
36 }
37
38 // ── HTMX: re-animate on comment swap ─────────────────────────────────────────
39
40 function bindHtmxSwap(): void {
41 document.body.addEventListener("htmx:afterSwap", (e: Event) => {
42 const target = (e as CustomEvent).detail?.target as HTMLElement | undefined;
43 if (!target) return;
44 if (target.id === "issue-comments" || target.closest("#issue-comments")) {
45 animateComments(target);
46 }
47 });
48 }
49
50 // ── Copy issue URL (keyboard shortcut) ───────────────────────────────────────
51
52 function bindCopyUrl(): void {
53 document.addEventListener("keydown", async (e: KeyboardEvent) => {
54 if (e.key !== "y" || e.ctrlKey || e.metaKey || e.altKey) return;
55 const active = document.activeElement;
56 if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA")) return;
57 try {
58 await navigator.clipboard.writeText(window.location.href);
59 } catch { /* clipboard unavailable */ }
60 });
61 }
62
63 // ── Syntax highlighting ───────────────────────────────────────────────────────
64
65 function highlightSnippets(): void {
66 document.querySelectorAll<HTMLElement>('pre.isd-cli-snippet code').forEach(el => {
67 hljs.highlightElement(el);
68 });
69 }
70
71 // ── Copy buttons ──────────────────────────────────────────────────────────────
72
73 const COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
74 const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
75
76 function injectCopyButtons(): void {
77 document.querySelectorAll<HTMLElement>('.isd-snippet-wrap').forEach(wrap => {
78 const pre = wrap.querySelector<HTMLElement>('pre.isd-cli-snippet');
79 if (!pre) return;
80
81 const btn = document.createElement('button');
82 btn.className = 'isd-copy-btn';
83 btn.setAttribute('aria-label', 'Copy to clipboard');
84 btn.innerHTML = `${COPY_ICON}<span>copy</span>`;
85
86 btn.addEventListener('click', async () => {
87 const code = pre.querySelector('code');
88 const text = (code?.textContent ?? pre.textContent ?? '').trim();
89 try {
90 await navigator.clipboard.writeText(text);
91 btn.classList.add('is-copied');
92 btn.innerHTML = `${CHECK_ICON}<span>copied</span>`;
93 setTimeout(() => {
94 btn.classList.remove('is-copied');
95 btn.innerHTML = `${COPY_ICON}<span>copy</span>`;
96 }, 2000);
97 } catch { /* clipboard unavailable */ }
98 });
99
100 wrap.appendChild(btn);
101 });
102 }
103
104 // ── Entry point ───────────────────────────────────────────────────────────────
105
106 export function initIssueDetail(_data?: Record<string, unknown>): void {
107 animateComments();
108 bindHtmxSwap();
109 bindCopyUrl();
110 highlightSnippets();
111 injectCopyButtons();
112 }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 155 days ago