+
-
-
-
-
-
-
-
-
-
-
- Select a command to view source...
-
-
-
-
-
-
-
-
- ➜
- Waiting for input...
-
-
-
-
-
+
+ ${spreadsHTML}
`;
- setupStackTabs();
+ // Init demo for active spread
+ initSpreadDemo(startIndex);
- setupDesktopScrollSpy(commands);
+ // Set up interactions
+ setupFisheyeList(filteredCommands);
+ setupMagazineKeyboard(filteredCommands);
+ setupMagazineIntersection(container);
+}
- if (commands.length > 0) {
- updateTerminal(commands[0], document.getElementById('terminal-content'), commands);
- const firstEntry = document.querySelector('.manual-entry');
- if (firstEntry) firstEntry.classList.add('active');
+function renderSpread(cmd, index, isActive) {
+ const cat = commandCategories[cmd.id] || 'other';
+ const isBeta = betaCommands.includes(cmd.id);
+ const relationship = commandRelationships[cmd.id];
+ // Build relationship flow
+ let flowHTML = '';
+ if (relationship) {
+ if (relationship.pairs) {
+ flowHTML = `
+
+ ↔
+ pairs with
+ /${relationship.pairs}
+
`;
+ } else if (relationship.leadsTo && relationship.leadsTo.length > 0) {
+ flowHTML = `
+
+ →
+ leads to
+ ${relationship.leadsTo.map(c => `/${c}`).join(' ')}
+
`;
+ } else if (relationship.combinesWith && relationship.combinesWith.length > 0) {
+ flowHTML = `
+
+ +
+ combines with
+ ${relationship.combinesWith.map(c => `/${c}`).join(' ')}
+
`;
+ }
+ if (!flowHTML && relationship.flow) {
+ flowHTML = `
+
+ ${relationship.flow}
+
`;
+ }
+ }
+
+ return `
+
+
+
${categoryLabels[cat] || cat}
+
/${cmd.id}${isBeta ? 'BETA' : ''}
+
${cmd.description}
+ ${flowHTML}
+
+
+
+
+
+ `;
+}
+
+function initSpreadDemo(index) {
+ const cmd = magazineState.commands[index];
+ if (!cmd) return;
+
+ const spread = document.querySelector(`.magazine-spread[data-index="${index}"]`);
+ if (!spread) return;
+
+ const demoArea = spread.querySelector('.spread-demo-area');
+ if (!demoArea) return;
+
+ // Cleanup previous split instance
+ if (currentSplitInstance) {
+ currentSplitInstance.destroy();
+ currentSplitInstance = null;
+ }
+
+ currentCommandId = cmd.id;
+
+ // Only render HTML once; re-init split compare every time
+ if (demoArea.dataset.loaded !== 'true') {
+ demoArea.innerHTML = renderCommandDemo(cmd.id);
+ demoArea.dataset.loaded = 'true';
+ }
+
+ const splitComparison = demoArea.querySelector('.demo-split-comparison');
+ if (splitComparison) {
+ currentSplitInstance = initSplitCompare(splitComparison, {
+ defaultPosition: 50
+ });
+ }
+ initCommandDemo(cmd.id, demoArea);
+}
+
+function goToSpread(newIndex, commands) {
+ if (newIndex < 0 || newIndex >= commands.length) return;
+ if (newIndex === magazineState.currentIndex) return;
+
+ const oldIndex = magazineState.currentIndex;
+ magazineState.currentIndex = newIndex;
+
+ const spreads = document.querySelectorAll('.magazine-spread');
+
+ // Destroy the old split instance before switching
+ if (currentSplitInstance) {
+ currentSplitInstance.destroy();
+ currentSplitInstance = null;
+ }
+
+ // Mark old as exiting
+ spreads[oldIndex]?.classList.remove('active');
+ spreads[oldIndex]?.classList.add('exiting');
+
+ // Mark new as active
+ spreads[newIndex]?.classList.add('active');
+ spreads[newIndex]?.classList.remove('exiting');
+
+ // No fisheye sync here -- fisheye drives goToSpread, not the other way around
+
+ // Update URL hash
+ const cmd = commands[newIndex];
+ if (cmd) {
+ history.replaceState(null, '', `#cmd-${cmd.id}`);
+ }
+
+ // Init demo for new spread (lazy)
+ initSpreadDemo(newIndex);
+
+ // Clean exiting class after transition
+ setTimeout(() => {
+ spreads[oldIndex]?.classList.remove('exiting');
+ }, 500);
+}
+
+function setupFisheyeList(commands) {
+ const list = document.getElementById('fisheye-list');
+ const scroll = list?.querySelector('.fisheye-scroll');
+ const items = list ? [...list.querySelectorAll('.fisheye-item')] : [];
+ if (!list || !scroll || !items.length) return;
+
+ // Fixed item height (matches CSS). All math is index-based.
+ const ITEM_H = 39; // px per item (font 1.5rem * 1.3 line-height + 4px*2 padding)
+ const RADIUS = 4; // items on each side affected by fisheye
+ const count = items.length;
+ let currentActive = -1;
+
+ // Convert scroll position to fractional center index
+ const scrollToFractional = () => {
+ // Scroll area: padding-top puts index 0 at center when scrollTop=0
+ return scroll.scrollTop / ITEM_H;
+ };
+
+ // Apply fisheye visual based on fractional center
+ const applyFisheye = (center) => {
+ items.forEach((item, i) => {
+ const dist = Math.abs(i - center);
+ const ratio = Math.max(0, 1 - dist / RADIUS);
+ // Strong ease-out for dramatic center pop
+ const eased = ratio * ratio * (3 - 2 * ratio); // smoothstep
+ const scale = 0.35 + eased * 0.65;
+ const opacity = 0.06 + eased * 0.94;
+ item.style.transform = `scale(${scale})`;
+ item.style.opacity = opacity;
+ });
+ };
+
+ const activate = (idx) => {
+ idx = Math.max(0, Math.min(count - 1, Math.round(idx)));
+ if (idx === currentActive) return;
+ currentActive = idx;
+ items.forEach((it, i) => it.classList.toggle('is-active', i === idx));
+ goToSpread(idx, commands);
+ };
+
+ const scrollToIndex = (idx, behavior = 'smooth') => {
+ idx = Math.max(0, Math.min(count - 1, idx));
+ scroll.scrollTo({ top: idx * ITEM_H, behavior });
+ };
+
+ // Scroll: update fisheye + activate nearest
+ let raf = null;
+ scroll.addEventListener('scroll', () => {
+ if (raf) cancelAnimationFrame(raf);
+ raf = requestAnimationFrame(() => {
+ const center = scrollToFractional();
+ applyFisheye(center);
+ activate(Math.round(center));
+ });
+ }, { passive: true });
+
+ // Click to jump
+ items.forEach((item, i) => {
+ item.addEventListener('click', () => scrollToIndex(i));
+ });
+
+ // Expose for keyboard/external nav
+ list._scrollToCommand = (idx) => scrollToIndex(idx);
+
+ // Init
+ const startIdx = magazineState.currentIndex;
+ currentActive = -1;
+ // Set padding so index 0 sits at center and last index sits at center
+ const padH = list.clientHeight / 2 - ITEM_H / 2;
+ scroll.style.paddingTop = `${padH}px`;
+ scroll.style.paddingBottom = `${padH}px`;
+ scroll.scrollTop = startIdx * ITEM_H;
+ applyFisheye(startIdx);
+ activate(startIdx);
+}
+
+function setupMagazineKeyboard(commands) {
+ if (magazineState.keyboardBound) return;
+ magazineState.keyboardBound = true;
+
+ document.addEventListener('keydown', (e) => {
+ // Only respond when magazine is visible (desktop)
+ if (isMobile()) return;
+ const magazineEl = document.querySelector('.magazine-container');
+ if (!magazineEl) return;
+
+ // Check if magazine is somewhat in the viewport
+ const rect = magazineEl.getBoundingClientRect();
+ const inView = rect.top < window.innerHeight && rect.bottom > 0;
+ if (!inView) return;
+
+ const fisheyeList = document.getElementById('fisheye-list');
+ if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+ e.preventDefault();
+ fisheyeList?._scrollToCommand?.(magazineState.currentIndex + 1);
+ } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+ e.preventDefault();
+ fisheyeList?._scrollToCommand?.(magazineState.currentIndex - 1);
+ }
+ });
+}
+
+function setupMagazineIntersection(container) {
+ // When the magazine section enters the viewport, ensure the active demo is rendered
+ if (magazineState.intersectionObserver) {
+ magazineState.intersectionObserver.disconnect();
+ }
+
+ magazineState.intersectionObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ initSpreadDemo(magazineState.currentIndex);
+ }
+ });
+ }, { threshold: 0.1 });
+
+ const magazineEl = container.querySelector('.magazine-container');
+ if (magazineEl) {
+ magazineState.intersectionObserver.observe(magazineEl);
}
}
@@ -137,107 +378,6 @@ function truncateDescription(text, maxLen = 120) {
return truncated.slice(0, lastSpace) + '...';
}
-function renderManualEntry(cmd) {
- const relationship = commandRelationships[cmd.id];
- let relationshipHTML = '';
-
- if (relationship) {
- if (relationship.pairs) {
- relationshipHTML = `
↔ pairs with /${relationship.pairs}
`;
- } else if (relationship.leadsTo && relationship.leadsTo.length > 0) {
- relationshipHTML = `
→ leads to ${relationship.leadsTo.map(c => `/${c}`).join(', ')}
`;
- } else if (relationship.combinesWith && relationship.combinesWith.length > 0) {
- relationshipHTML = `
+ combines with ${relationship.combinesWith.map(c => `/${c}`).join(', ')}
`;
- }
- }
-
- const isBeta = betaCommands.includes(cmd.id);
- const shortDesc = truncateDescription(cmd.description);
-
- return `
-
-
/${cmd.id}${isBeta ? ' BETA' : ''}
-
${shortDesc}
- ${relationshipHTML}
-
- `;
-}
-
-function setupDesktopScrollSpy(commands) {
- const entries = document.querySelectorAll('.manual-entry');
- const terminalContent = document.getElementById('terminal-content');
-
- const observer = new IntersectionObserver((observerEntries) => {
- observerEntries.forEach(entry => {
- if (entry.isIntersecting) {
- document.querySelectorAll('.manual-entry').forEach(e => e.classList.remove('active'));
- entry.target.classList.add('active');
-
- const cmdId = entry.target.dataset.id;
- const cmd = commands.find(c => c.id === cmdId);
- if (cmd) {
- updateTerminal(cmd, terminalContent, commands);
- history.replaceState(null, '', `#cmd-${cmdId}`);
- }
- }
- });
- }, {
- threshold: 0.1,
- rootMargin: "-35% 0px -55% 0px"
- });
-
- entries.forEach(e => observer.observe(e));
-
- entries.forEach(e => {
- e.addEventListener('click', () => {
- document.querySelectorAll('.manual-entry').forEach(el => el.classList.remove('active'));
- e.classList.add('active');
-
- const cmdId = e.dataset.id;
- const cmd = commands.find(c => c.id === cmdId);
- if (cmd) {
- updateTerminal(cmd, terminalContent, commands);
- history.replaceState(null, '', `#cmd-${cmdId}`);
- }
-
- e.scrollIntoView({ behavior: 'smooth', block: 'center' });
- });
- });
-}
-
-function updateTerminal(cmd, container, allCommands) {
- if (!cmd || !container) return;
-
- if (currentCommandId === cmd.id) return;
- currentCommandId = cmd.id;
-
- // Also update source content
- updateSourceContent(cmd.id);
-
- if (currentSplitInstance) {
- currentSplitInstance.destroy();
- currentSplitInstance = null;
- }
-
- const steps = commandProcessSteps[cmd.id] || ['Analyze', 'Transform', 'Verify'];
- const stepsOutput = steps.map((step, i) =>
- `
${i + 1}. ${step}...`
- ).join('
');
-
- container.innerHTML = `
➜/${cmd.id}
-
${stepsOutput}
✓ Complete
-
${renderCommandDemo(cmd.id)}
-
➜
`;
-
- const splitComparison = container.querySelector('.demo-split-comparison');
- if (splitComparison) {
- currentSplitInstance = initSplitCompare(splitComparison, {
- defaultPosition: 50
- });
- }
- initCommandDemo(cmd.id, container);
-}
-
// ============================================
// MOBILE LAYOUT - Carousel + Sticky Demo
// ============================================