/** * Gumloop University – Lesson Progress Tracking * * Mirrors bootcamp logic from: * - lib/university/progress.ts (localStorage persistence) * - components/university/mvp/VideoEmbed.tsx (blur-based play detection) * - components/university/mvp/LessonNav.tsx (mark complete on "Next Lesson") * * Included by Mintlify via docs.json `"js"` field. */ (function () { 'use strict'; // Enable cross-subdomain tracking with gumloop.com if (window.posthog) { window.posthog.set_config({ cross_subdomain_cookie: true }); } var STORAGE_KEY = 'gumloop-university-completed'; var COHORT_KEY = 'gumloop-university-cohort-email'; // ── Cohort storage helpers ───────────────────────────────────── function getCohortEmail() { try { return localStorage.getItem(COHORT_KEY) || ''; } catch (_) { return ''; } } function setCohortEmail(email) { try { localStorage.setItem(COHORT_KEY, email); } catch (_) {} } function isCohortPage() { return getCurrentSlug().indexOf('/cohort/') === 0; } function updateCohortApproval() { if (getCohortEmail()) { document.body.classList.add('cohort-approved'); } else { document.body.classList.remove('cohort-approved'); } } // ── Storage helpers (same API as bootcamp progress.ts) ───────── function getCompleted() { try { var stored = localStorage.getItem(STORAGE_KEY); return stored ? JSON.parse(stored) : []; } catch (_) { return []; } } function markComplete(slug) { var completed = getCompleted(); if (completed.indexOf(slug) === -1) { completed.push(slug); localStorage.setItem(STORAGE_KEY, JSON.stringify(completed)); window.dispatchEvent(new Event('lesson-progress-updated')); } } // ── Slug from current URL path ───────────────────────────────── function getCurrentSlug() { return window.location.pathname.replace(/\/+$/, '') || '/'; } // ── BTA step checkbox persistence ──────────────────────────────── var STEPS_KEY = 'gumloop-university-steps'; function getStepState() { try { var stored = localStorage.getItem(STEPS_KEY); return stored ? JSON.parse(stored) : {}; } catch (_) { return {}; } } function setupStepCheckboxes() { var checks = document.querySelectorAll('.bta-step-check'); if (!checks.length) return; var slug = getCurrentSlug(); var state = getStepState(); var pageState = state[slug] || []; for (var i = 0; i < checks.length; i++) { if (pageState[i]) checks[i].checked = true; (function (idx) { if (checks[idx].dataset.stepBound) return; checks[idx].dataset.stepBound = '1'; checks[idx].addEventListener('change', function () { var s = getStepState(); if (!s[slug]) s[slug] = []; s[slug][idx] = this.checked; try { localStorage.setItem(STEPS_KEY, JSON.stringify(s)); } catch (_) {} }); })(i); } } // ── Sidebar: add .lesson-completed class to completed items ──── function updateSidebar() { var completed = getCompleted(); var items = document.querySelectorAll('ul.sidebar-group > li'); for (var i = 0; i < items.length; i++) { var link = items[i].querySelector('a'); var href = link ? (link.getAttribute('href') || '').replace(/\/+$/, '') : ''; if (href && completed.indexOf(href) !== -1) { items[i].classList.add('lesson-completed'); } else { items[i].classList.remove('lesson-completed'); } } } // ── Video play detection (window.blur trick from VideoEmbed) ─── var blurHandler = null; function setupVideoDetection() { // Remove previous handler if (blurHandler) { window.removeEventListener('blur', blurHandler); blurHandler = null; } var iframe = document.querySelector('.lesson-video-aspect iframe'); if (!iframe) return; var slug = getCurrentSlug(); var marked = false; blurHandler = function () { if (!marked && document.activeElement === iframe) { marked = true; markComplete(slug); updateSidebar(); } }; window.addEventListener('blur', blurHandler); } // ── "Next Lesson" / "Course Complete" click detection ────────── function setupNavDetection() { var slug = getCurrentSlug(); var navLinks = document.querySelectorAll('.lesson-nav-next, .lesson-nav-complete'); for (var i = 0; i < navLinks.length; i++) { // Guard against double-binding after MutationObserver re-runs if (navLinks[i].dataset.progressBound) continue; navLinks[i].dataset.progressBound = '1'; navLinks[i].addEventListener('click', function () { markComplete(slug); updateSidebar(); }); } } // ── Sticky "Mark Complete" button (injected on every lesson page) ─── function setupMarkComplete() { var page = document.querySelector('.lesson-page'); if (!page) return; // Remove stale button from previous SPA navigation var existing = document.querySelector('.mark-complete-wrap'); if (existing && existing.dataset.injected) existing.remove(); var slug = getCurrentSlug(); var isCompleted = getCompleted().indexOf(slug) !== -1; var wrap = document.createElement('div'); wrap.className = 'mark-complete-wrap'; wrap.dataset.injected = '1'; var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'mark-complete-btn' + (isCompleted ? ' completed' : ''); btn.textContent = isCompleted ? 'Completed' : 'Mark Complete'; wrap.appendChild(btn); // Insert before the nav grid var navGrid = page.querySelector('.lesson-nav-grid'); if (navGrid) { navGrid.parentNode.insertBefore(wrap, navGrid); } else { page.appendChild(wrap); } btn.addEventListener('click', function () { if (btn.classList.contains('completed')) return; markComplete(slug); btn.classList.add('completed'); btn.textContent = 'Completed'; updateSidebar(); }); // Keep in sync when other actions mark this lesson complete (video play, nav click) window.addEventListener('lesson-progress-updated', function syncBtn() { if (getCompleted().indexOf(slug) !== -1 && !btn.classList.contains('completed')) { btn.classList.add('completed'); btn.textContent = 'Completed'; } }); } // ── Article structured data (JSON-LD) ────────────────────────── var BASE_URL = 'https://university.gumloop.com'; var ORG_ID = 'https://www.gumloop.com/#organization'; // Published/modified dates from git history — update when content changes var PAGE_DATES = { '/getting-started-with-gumloop/what-is-gumloop': { published: '2026-02-16', modified: '2026-02-17' }, '/getting-started-with-gumloop/chat-with-gumloop': { published: '2026-02-16', modified: '2026-02-17' }, '/getting-started-with-gumloop/building-your-first-agent': { published: '2026-02-16', modified: '2026-02-17' }, '/getting-started-with-gumloop/bring-your-agents-where-you-work': { published: '2026-02-16', modified: '2026-02-17' }, '/getting-started-with-gumloop/writing-great-instructions': { published: '2026-02-16', modified: '2026-02-17' }, '/getting-started-with-gumloop/tasks-for-your-agents': { published: '2026-03-13', modified: '2026-03-13' }, '/ai-fundamentals/what-is-an-ai-model': { published: '2026-02-12', modified: '2026-02-17' }, '/ai-fundamentals/hallucinations': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/tokens-and-costs': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/context': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/giving-your-chatbot-tools': { published: '2026-02-12', modified: '2026-02-17' }, '/ai-fundamentals/what-are-instructions': { published: '2026-02-12', modified: '2026-02-17' }, '/ai-fundamentals/skills': { published: '2026-02-17', modified: '2026-02-23' }, '/ai-fundamentals/mcp-overview': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/the-three-primitives': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/mcp-in-gumloop': { published: '2026-02-17', modified: '2026-02-17' }, '/ai-fundamentals/gumstack-enterprise': { published: '2026-02-17', modified: '2026-02-17' } }; function injectArticleSchema() { // Remove previous schema (SPA navigation) var prev = document.getElementById('article-schema'); if (prev) prev.remove(); // Only inject on lesson pages (skip cohort pages — they're noindexed) if (!document.querySelector('.lesson-page')) return; if (getCurrentSlug().indexOf('/cohort/') === 0) return; var title = ''; var titleEl = document.querySelector('.lesson-title'); if (titleEl) title = titleEl.textContent.trim(); var description = ''; var descEl = document.querySelector('.lesson-desc'); if (descEl) description = descEl.textContent.trim(); var canonicalPath = getCurrentSlug(); var canonicalUrl = BASE_URL + canonicalPath; // Derive section from URL path var sectionMap = { 'getting-started-with-gumloop': 'Getting Started with Gumloop', 'ai-fundamentals': 'AI Fundamentals' }; var pathSegment = canonicalPath.split('/').filter(Boolean)[0] || ''; var articleSection = sectionMap[pathSegment] || ''; var org = { '@type': 'Organization', '@id': ORG_ID, 'name': 'Gumloop', 'url': 'https://www.gumloop.com', 'logo': { '@type': 'ImageObject', 'url': 'https://www.gumloop.com/logo.png' } }; var dates = PAGE_DATES[canonicalPath] || {}; var schema = { '@context': 'https://schema.org', '@type': 'Article', 'headline': title, 'description': description, 'inLanguage': 'en', 'author': { '@id': ORG_ID }, 'publisher': org, 'datePublished': dates.published || undefined, 'dateModified': dates.modified || undefined, 'mainEntityOfPage': { '@type': 'WebPage', '@id': canonicalUrl }, 'isPartOf': { '@type': 'WebSite', 'name': 'Gumloop University', 'url': BASE_URL } }; if (articleSection) { schema.articleSection = articleSection; } // Use Vimeo thumbnail as image var iframe = document.querySelector('.lesson-video iframe'); if (iframe) { var vimeoMatch = iframe.src.match(/video\/(\d+)/); if (vimeoMatch) { var thumbUrl = 'https://vumbnail.com/' + vimeoMatch[1] + '.jpg'; schema.image = thumbUrl; schema.video = { '@type': 'VideoObject', 'name': title, 'description': description, 'embedUrl': iframe.src.split('?')[0], 'thumbnailUrl': thumbUrl }; } } var script = document.createElement('script'); script.id = 'article-schema'; script.type = 'application/ld+json'; script.textContent = JSON.stringify(schema); document.head.appendChild(script); } // ── Cohort gate: email verification form ─────────────────────── function hideCohortContent() { var container = document.getElementById('content-area'); if (!container) return; var children = container.children; for (var i = 0; i < children.length; i++) { if (!children[i].classList.contains('cohort-gate')) { children[i].style.display = 'none'; } } } function showCohortContent() { var container = document.getElementById('content-area'); if (!container) return; var children = container.children; for (var i = 0; i < children.length; i++) { children[i].style.display = ''; } var gate = container.querySelector('.cohort-gate'); if (gate) gate.remove(); } function checkCohortApproval(email) { return fetch('https://api.gumloop.com/check_cohort_approval?email=' + encodeURIComponent(email)) .then(function (res) { return res.json(); }) .then(function (data) { return !!data.approved; }); } function setupCohortGate() { if (!isCohortPage()) return; // Already approved via localStorage if (getCohortEmail()) { showCohortContent(); return; } hideCohortContent(); // Don't inject twice if (document.querySelector('.cohort-gate')) return; var container = document.getElementById('content-area'); if (!container) return; var gate = document.createElement('div'); gate.className = 'cohort-gate'; gate.innerHTML = '

' + '

' + '' + '

' + '

Cohort Content

' + '

Enter the email you registered with to access cohort materials.

' + '' + '' + '

Don\u2019t have access? Join the next cohort \u2192

' + '

'; container.prepend(gate); var form = gate.querySelector('.cohort-gate-form'); var input = gate.querySelector('.cohort-gate-input'); var submitBtn = gate.querySelector('.cohort-gate-submit'); var errorEl = gate.querySelector('.cohort-gate-error'); form.addEventListener('submit', function (e) { e.preventDefault(); var email = input.value.trim(); if (!email) return; submitBtn.disabled = true; submitBtn.textContent = 'Checking\u2026'; errorEl.style.display = 'none'; checkCohortApproval(email).then(function (approved) { if (approved) { setCohortEmail(email); updateCohortApproval(); showCohortContent(); var ph = window.posthog || (typeof posthog !== 'undefined' ? posthog : null); if (ph && typeof ph.capture === 'function') { ph.capture('cohort_gate_approved', { email: email, page: getCurrentSlug() }); } } else { errorEl.innerHTML = 'This email is not registered for a cohort. Sign up for a cohort'; errorEl.style.display = 'block'; submitBtn.disabled = false; submitBtn.textContent = 'Verify Access'; var ph = window.posthog || (typeof posthog !== 'undefined' ? posthog : null); if (ph && typeof ph.capture === 'function') { ph.capture('cohort_gate_rejected', { email: email, page: getCurrentSlug() }); } } }).catch(function () { errorEl.innerHTML = 'Something went wrong. Please try again.'; errorEl.style.display = 'block'; submitBtn.disabled = false; submitBtn.textContent = 'Verify Access'; }); }); } // ── Main init ────────────────────────────────────────────────── var lastPath = ''; function init() { var path = getCurrentSlug(); if (path === lastPath) return; lastPath = path; updateCohortApproval(); updateSidebar(); injectSidebarCTA(); setupCohortGate(); setupVideoDetection(); setupNavDetection(); setupMarkComplete(); setupStepCheckboxes(); injectArticleSchema(); } // ── Sidebar CTA: "Join a Cohort" card ───────────────────────── function injectSidebarCTA() { // Only inject once if (document.querySelector('.sidebar-cta')) return; var groups = document.querySelectorAll('ul.sidebar-group'); if (!groups.length) return; var lastGroup = groups[groups.length - 1]; var cta = document.createElement('div'); cta.className = 'sidebar-cta'; cta.innerHTML = ''; lastGroup.parentNode.insertBefore(cta, lastGroup.nextSibling); } // ── Boot ─────────────────────────────────────────────────────── if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // ── SPA navigation: MutationObserver + popstate ──────────────── var sidebarDebounce = null; var stepsDebounce = null; var observer = new MutationObserver(function () { if (getCurrentSlug() !== lastPath) { setTimeout(init, 120); } // Always refresh sidebar (catches tab switches that don't change URL) clearTimeout(sidebarDebounce); sidebarDebounce = setTimeout(updateSidebar, 150); // Restore step checkboxes once React renders them clearTimeout(stepsDebounce); stepsDebounce = setTimeout(setupStepCheckboxes, 150); }); observer.observe(document.body, { childList: true, subtree: true }); window.addEventListener('popstate', function () { setTimeout(init, 120); }); // Re-paint sidebar whenever progress changes (e.g. from another tab) window.addEventListener('lesson-progress-updated', updateSidebar); window.addEventListener('storage', function (e) { if (e.key === STORAGE_KEY) updateSidebar(); if (e.key === COHORT_KEY) { updateCohortApproval(); if (isCohortPage() && getCohortEmail()) showCohortContent(); } }); })(); /* ═══════════════════════════════════════════════════════════════════════════ Tokenizer Visualization ═══════════════════════════════════════════════════════════════════════════ */ (function () { 'use strict'; var COLORS = [ { bg: '#dbeafe', border: '#93c5fd' }, // blue { bg: '#fce7f3', border: '#f9a8d4' }, // pink { bg: '#d1fae5', border: '#6ee7b7' }, // green { bg: '#fef3c7', border: '#fcd34d' }, // amber { bg: '#e0e7ff', border: '#a5b4fc' }, // indigo { bg: '#fae8ff', border: '#e879f9' }, // purple { bg: '#ccfbf1', border: '#5eead4' }, // teal { bg: '#fee2e2', border: '#fca5a5' }, // red ]; // Simple tokenizer: splits on word boundaries, punctuation, contractions function tokenize(text) { if (!text.trim()) return []; // Split into tokens: words, punctuation, contractions, numbers var tokens = text.match(/\w+'\w+|\w+|[^\s\w]+|\s+/g) || []; // Further split long words to simulate subword tokenization var result = []; for (var i = 0; i < tokens.length; i++) { var t = tokens[i]; if (/^\s+$/.test(t)) continue; // skip pure whitespace (show as gap) if (t.length > 6 && /^\w+$/.test(t)) { // Split longer words roughly in half to mimic subword tokens var mid = Math.ceil(t.length * 0.6); result.push(t.slice(0, mid)); result.push(t.slice(mid)); } else { result.push(t); } } return result; } function render(input, output, count) { var tokens = tokenize(input.textContent || input.value || ''); var html = ''; for (var i = 0; i < tokens.length; i++) { var c = COLORS[i % COLORS.length]; html += '' + tokens[i].replace(//g, '>') + ''; } output.innerHTML = html; count.innerHTML = '' + tokens.length + ' token' + (tokens.length !== 1 ? 's' : ''); } function initTokenizer() { var input = document.getElementById('tokenizer-input'); var output = document.getElementById('tokenizer-output'); var count = document.getElementById('tokenizer-count'); if (!input || !output || !count) return; if (input.dataset.bound) return; input.dataset.bound = '1'; render(input, output, count); input.addEventListener('input', function () { render(input, output, count); }); input.addEventListener('keydown', function (e) { if (e.key === 'Enter') e.preventDefault(); // keep it single-line friendly }); } // Init on load and SPA navigation if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initTokenizer); } else { initTokenizer(); } var obs = new MutationObserver(function () { setTimeout(initTokenizer, 200); }); obs.observe(document.body, { childList: true, subtree: true }); })(); /* ═══════════════════════════════════════════════════════════════════════════ MCP Deep Dive – Interactive Widgets ═══════════════════════════════════════════════════════════════════════════ */ (function () { 'use strict'; var widgetLastPath = ''; function initWidgets() { var path = window.location.pathname; if (path === widgetLastPath) return; widgetLastPath = path; initProtocolFlow(); initToolWalkthrough(); initFlipCards(); initDecisionTree(); initPipeline(); } /* ── Widget 1: Protocol Flow Step-Through (v2) ─────────────────────────── */ function initProtocolFlow() { var widget = document.querySelector('.protocol-flow'); if (!widget || widget.dataset.pfBound) return; widget.dataset.pfBound = '1'; var steps = widget.querySelectorAll('.pf-step-desc'); var dots = widget.querySelectorAll('.pf-dot'); var tabs = widget.querySelectorAll('.pf-step-tab'); var prevBtn = widget.querySelector('.pf-prev'); var nextBtn = widget.querySelector('.pf-next'); var counter = widget.querySelector('.pf-counter'); var components = widget.querySelectorAll('.pf-component'); var arrowTracks = widget.querySelectorAll('.pf-arrow-track'); var current = 0; var total = steps.length; function update() { // Set step on container for CSS color theming widget.dataset.step = current; // Show/hide step descriptions & update tabs for (var i = 0; i < steps.length; i++) { steps[i].style.display = i === current ? 'block' : 'none'; if (dots[i]) dots[i].className = 'pf-dot' + (i === current ? ' active' : ''); if (tabs[i]) tabs[i].className = 'pf-step-tab pf-step-tab-' + i + (i === current ? ' active' : ''); } // Reset all components and arrows for (var j = 0; j < components.length; j++) { components[j].classList.remove('pf-active'); components[j].querySelector('.pf-comp-badge').textContent = ''; } for (var k = 0; k < arrowTracks.length; k++) { arrowTracks[k].classList.remove('pf-arrow-active', 'pf-dir-left', 'pf-dir-right'); } // Highlight from data-highlight var hl = steps[current] ? steps[current].dataset.highlight : ''; if (hl) { hl.split(',').forEach(function (id) { var el = widget.querySelector('[data-id="' + id.trim() + '"]'); if (el) { if (el.classList.contains('pf-arrow-track')) { el.classList.add('pf-arrow-active'); } else { el.classList.add('pf-active'); } } }); } // Apply badges from data-badges var badgesStr = steps[current] ? steps[current].dataset.badges : '{}'; try { var badges = JSON.parse(badgesStr); for (var bId in badges) { var comp = widget.querySelector('.pf-component[data-id="' + bId + '"]'); if (comp) { comp.querySelector('.pf-comp-badge').textContent = badges[bId]; } } } catch (e) {} // Apply arrow directions from data-arrow-dir var dirStr = steps[current] ? steps[current].dataset.arrowDir : '{}'; try { var dirs = JSON.parse(dirStr); for (var aId in dirs) { var arr = widget.querySelector('.pf-arrow-track[data-id="' + aId + '"]'); if (arr) arr.classList.add('pf-dir-' + dirs[aId]); } } catch (e) {} if (prevBtn) prevBtn.style.opacity = current === 0 ? '0.3' : '1'; if (nextBtn) nextBtn.style.opacity = current === total - 1 ? '0.3' : '1'; if (counter) counter.textContent = (current + 1) + ' / ' + total; } function goTo(idx) { if (idx >= 0 && idx < total) { current = idx; update(); } } if (nextBtn) nextBtn.addEventListener('click', function () { goTo(current + 1); }); if (prevBtn) prevBtn.addEventListener('click', function () { goTo(current - 1); }); for (var d = 0; d < dots.length; d++) { (function (idx) { dots[idx].addEventListener('click', function () { goTo(idx); }); })(d); } for (var t = 0; t < tabs.length; t++) { (function (idx) { tabs[idx].addEventListener('click', function () { goTo(idx); }); })(t); } update(); } /* ── Tool Calling Walkthrough (event delegation) ───────────────────── */ function initToolWalkthrough() { // Use event delegation on document — works even if DOM is re-rendered if (window._tcDelegated) return; window._tcDelegated = true; document.addEventListener('click', function (e) { var target = e.target; // Walk up to find clickable element var btn = target.closest('.tc-prev, .tc-next, .tc-pill'); if (!btn) return; var widget = btn.closest('.tc-walkthrough'); if (!widget) return; e.preventDefault(); var current = parseInt(widget.getAttribute('data-step') || '0'); var pills = widget.querySelectorAll('.tc-pill'); var total = pills.length; if (btn.classList.contains('tc-next')) { current = Math.min(current + 1, total - 1); } else if (btn.classList.contains('tc-prev')) { current = Math.max(current - 1, 0); } else if (btn.classList.contains('tc-pill')) { // Find which pill was clicked for (var i = 0; i < pills.length; i++) { if (pills[i] === btn || pills[i].contains(target)) { current = i; break; } } } // Update state widget.setAttribute('data-step', current); for (var j = 0; j < pills.length; j++) { pills[j].className = 'tc-pill tc-pill-' + j + (j === current ? ' active' : ''); } var prevBtn = widget.querySelector('.tc-prev'); var nextBtn = widget.querySelector('.tc-next'); if (prevBtn) prevBtn.style.opacity = current === 0 ? '0.3' : '1'; if (nextBtn) nextBtn.style.opacity = current === total - 1 ? '0.3' : '1'; }); } /* ── Widget 2: Flip Cards ─────────────────────────────────────────────── */ function initFlipCards() { var cards = document.querySelectorAll('.flip-card'); for (var i = 0; i < cards.length; i++) { if (cards[i].dataset.bound) continue; cards[i].dataset.bound = '1'; cards[i].addEventListener('click', function () { this.classList.toggle('flipped'); }); } } /* ── Widget 4: Decision Tree ──────────────────────────────────────────── */ function initDecisionTree() { var nodes = document.querySelectorAll('.dtree-node'); for (var i = 0; i < nodes.length; i++) { var trigger = nodes[i].querySelector('.dtree-question'); if (!trigger || trigger.dataset.bound) continue; trigger.dataset.bound = '1'; (function (node) { trigger.addEventListener('click', function () { node.classList.toggle('expanded'); }); })(nodes[i]); } } /* ── Widget 5: Pipeline Steps ─────────────────────────────────────────── */ function initPipeline() { var steps = document.querySelectorAll('.pipe-step'); for (var i = 0; i < steps.length; i++) { var header = steps[i].querySelector('.pipe-header'); if (!header || header.dataset.bound) continue; header.dataset.bound = '1'; (function (step) { header.addEventListener('click', function () { var wasExpanded = step.classList.contains('expanded'); // Close all var all = document.querySelectorAll('.pipe-step.expanded'); for (var j = 0; j < all.length; j++) all[j].classList.remove('expanded'); if (!wasExpanded) step.classList.add('expanded'); }); })(steps[i]); } } /* ── Boot & SPA navigation ────────────────────────────────────────────── */ function boot() { setTimeout(initWidgets, 200); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); } else { boot(); } var widgetObserver = new MutationObserver(function () { if (window.location.pathname !== widgetLastPath) { setTimeout(initWidgets, 250); } }); widgetObserver.observe(document.body, { childList: true, subtree: true }); window.addEventListener('popstate', function () { setTimeout(initWidgets, 250); }); })(); /** * Vimeo Video Tracking for PostHog * Tracks play and completion events for all Vimeo embeds. */ (function () { var script = document.createElement('script'); script.src = 'https://player.vimeo.com/api/player.js'; script.onload = initVimeoTracking; document.head.appendChild(script); function initVimeoTracking() { function trackVimeoVideos() { var iframes = document.querySelectorAll('iframe[src*="player.vimeo.com"]'); for (var i = 0; i < iframes.length; i++) { var iframe = iframes[i]; if (iframe.dataset.vimeoTracked) continue; iframe.dataset.vimeoTracked = 'true'; try { var player = new Vimeo.Player(iframe); var videoId = (iframe.src.match(/video\/(\d+)/) || [])[1] || 'unknown'; (function (vid) { player.on('play', function () { var ph = window.posthog || (typeof posthog !== 'undefined' ? posthog : null); if (ph && typeof ph.capture === 'function') { ph.capture('vimeo_video_played', { video_id: vid, page_url: window.location.pathname, page_title: document.title }); } }); player.on('ended', function () { var ph = window.posthog || (typeof posthog !== 'undefined' ? posthog : null); if (ph && typeof ph.capture === 'function') { ph.capture('vimeo_video_completed', { video_id: vid, page_url: window.location.pathname, page_title: document.title }); } }); })(videoId); } catch (e) { /* silently fail */ } } } trackVimeoVideos(); var observer = new MutationObserver(function () { clearTimeout(window._vimeoTrackingTimeout); window._vimeoTrackingTimeout = setTimeout(trackVimeoVideos, 500); }); observer.observe(document.body, { childList: true, subtree: true }); } })(); /* ═══════════════════════════════════════════════════════════════════════════ Focus Mode (hidden sidebar toggle) ═══════════════════════════════════════════════════════════════════════════ */ (function () { if (!window.matchMedia('(min-width: 768px)').matches) return; var panelWidth = 300; var minWidth = 200; var maxWidth = Math.floor(window.innerWidth * 0.5); var active = false; var panel = null; var styleEl = null; // Inject sidebar toggle button styles var btnStyle = document.createElement('style'); btnStyle.textContent = '.focus-mode-toggle {' + 'display: flex;' + 'align-items: center;' + 'justify-content: flex-start;' + 'margin: 8px 0 12px 16px;' + 'padding: 6px 10px;' + 'border: 1px solid transparent;' + 'border-radius: 6px;' + 'background: transparent;' + 'cursor: pointer;' + 'opacity: 0;' + 'transition: opacity 0.2s, background 0.15s, border-color 0.15s;' + 'font-family: system-ui, sans-serif;' + 'font-size: 11px;' + 'font-weight: 600;' + 'color: #9ca3af;' + 'gap: 6px;' + 'white-space: nowrap;' + '}' + '.focus-mode-toggle:hover {' + 'opacity: 1 !important;' + 'background: #f3f4f6;' + 'border-color: #e5e7eb;' + 'color: #22c55e;' + '}' + '.focus-mode-toggle.active {' + 'opacity: 1 !important;' + 'color: #22c55e;' + '}' + '.focus-mode-toggle svg {' + 'flex-shrink: 0;' + '}'; document.head.appendChild(btnStyle); function injectButton() { var container = document.getElementById('sidebar-content'); if (!container || container.querySelector('.focus-mode-toggle')) return; var btn = document.createElement('button'); btn.className = 'focus-mode-toggle'; btn.innerHTML = '' + 'Focus Mode'; btn.addEventListener('click', toggleFocusMode); container.appendChild(btn); } function toggleFocusMode() { active = !active; var btn = document.querySelector('.focus-mode-toggle'); if (active) { showPanel(); if (btn) btn.classList.add('active'); } else { hidePanel(); if (btn) btn.classList.remove('active'); } } function showPanel() { panelWidth = 300; // Inject panel styles styleEl = document.createElement('style'); styleEl.textContent = '.focus-mode-panel {' + 'position: fixed;' + 'top: 0;' + 'right: 0;' + 'width: ' + panelWidth + 'px;' + 'height: 100vh;' + 'z-index: 9999;' + 'background: #000;' + 'display: flex;' + 'flex-direction: column;' + '}' + '.focus-mode-handle {' + 'position: absolute;' + 'top: 0;' + 'left: -4px;' + 'width: 8px;' + 'height: 100%;' + 'cursor: col-resize;' + 'z-index: 10000;' + 'background: transparent;' + '}' + '.focus-mode-handle:hover, .focus-mode-handle.dragging {' + 'background: rgba(34, 197, 94, 0.4);' + '}' + '.focus-mode-header {' + 'display: flex;' + 'align-items: center;' + 'justify-content: space-between;' + 'padding: 6px 10px;' + 'background: #111;' + 'font-family: system-ui, sans-serif;' + '}' + '.focus-mode-header span {' + 'font-size: 11px;' + 'font-weight: 700;' + 'text-transform: uppercase;' + 'letter-spacing: 1px;' + 'color: #22c55e;' + '}' + '.focus-mode-close {' + 'display: flex;' + 'align-items: center;' + 'justify-content: center;' + 'width: 22px;' + 'height: 22px;' + 'border: none;' + 'border-radius: 4px;' + 'background: transparent;' + 'color: #6b7280;' + 'cursor: pointer;' + 'padding: 0;' + 'transition: background 0.15s, color 0.15s;' + '}' + '.focus-mode-close:hover {' + 'background: #272727;' + 'color: #fff;' + '}' + '.focus-mode-panel iframe {' + 'flex: 1;' + 'width: 100%;' + 'border: none;' + 'pointer-events: auto;' + '}' + '.focus-mode-panel.resizing iframe {' + 'pointer-events: none;' + '}' + 'body.focus-mode-active {' + 'padding-right: ' + panelWidth + 'px !important;' + '}'; document.head.appendChild(styleEl); // Create panel panel = document.createElement('div'); panel.className = 'focus-mode-panel'; panel.innerHTML = '

' + '

' + 'Focus Mode' + '' + '

' + ''; document.body.appendChild(panel); document.body.classList.add('focus-mode-active'); // Close button panel.querySelector('.focus-mode-close').addEventListener('click', toggleFocusMode); // Resize logic var handle = panel.querySelector('.focus-mode-handle'); var dragging = false; handle.addEventListener('mousedown', function (e) { e.preventDefault(); dragging = true; handle.classList.add('dragging'); panel.classList.add('resizing'); }); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); function onMouseMove(e) { if (!dragging) return; maxWidth = Math.floor(window.innerWidth * 0.5); var newWidth = window.innerWidth - e.clientX; if (newWidth < minWidth) newWidth = minWidth; if (newWidth > maxWidth) newWidth = maxWidth; panelWidth = newWidth; panel.style.width = panelWidth + 'px'; document.body.style.paddingRight = panelWidth + 'px'; } function onMouseUp() { if (!dragging) return; dragging = false; handle.classList.remove('dragging'); panel.classList.remove('resizing'); } // Store cleanup references panel._cleanup = function () { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); }; } function hidePanel() { if (panel) { if (panel._cleanup) panel._cleanup(); panel.remove(); panel = null; } if (styleEl) { styleEl.remove(); styleEl = null; } document.body.classList.remove('focus-mode-active'); document.body.style.paddingRight = ''; } // Inject button once sidebar is available injectButton(); var obs = new MutationObserver(function () { injectButton(); }); obs.observe(document.body, { childList: true, subtree: true }); // Auto-activate if ?subwaysurfers=true if (new URLSearchParams(window.location.search).get('subwaysurfers') === 'true') { toggleFocusMode(); } })();

Use Cases

​Support Agent

Support Agent