// ==UserScript== // @name Sticky Table of Contents Generator // @namespace web.nextbyte.ai // @version 2.4 // @description Creates a sticky, movable, and resizable table of contents on the right side with transparency on hover. Includes minimize/unminimize feature and hides permalinks from ToC entries. On code hosting sites (GitHub, GitLab, Codeberg), focuses on README headers only. On other pages, includes all headers. // @author NextByte // @match *://*/* // @grant none // ==/UserScript== (function() { 'use strict'; // Wait for DOM to be fully loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { // Determine if we're on a code hosting site and get appropriate headers const headers = getHeadersForPage(); // Exit if no headers found if (headers.length === 0) { console.log('No headers found on page'); return; } // Create TOC container const tocContainer = createTOCContainer(); document.body.appendChild(tocContainer); // Build table of contents const tocList = buildTOC(headers); const contentWrapper = document.createElement('div'); contentWrapper.className = 'toc-content'; contentWrapper.appendChild(tocList); tocContainer.appendChild(contentWrapper); // Add smooth scrolling behavior addScrollBehavior(tocContainer); // Highlight active section on scroll setupActiveHighlighting(headers, tocContainer); // Add drag and resize functionality setupDragAndResize(tocContainer); // Setup transparency on hover setupTransparencyOnHover(tocContainer); // Setup minimize/unminimize functionality setupMinimizeButton(tocContainer, contentWrapper); // Setup darkmode toggle functionality setupDarkmodeButton(tocContainer); } function isCodeHostingSite() { const hostname = window.location.hostname; const codeHostingDomains = ['github.com', 'gitlab.com', 'codeberg.org', 'gitea.io', 'gitea.com']; return codeHostingDomains.some(domain => hostname.includes(domain)); } function getHeadersForPage() { if (isCodeHostingSite()) { // On code hosting sites, focus on README headers only const readmeArticle = document.querySelector('article.markdown-body'); if (readmeArticle) { return Array.from(readmeArticle.querySelectorAll('h1, h2, h3')); } // Fallback if markdown-body not found return document.querySelectorAll('h1, h2, h3'); } else { // On other pages, use all headers return document.querySelectorAll('h1, h2, h3'); } } function createTOCContainer() { const container = document.createElement('div'); container.id = 'userscript-toc'; container.innerHTML = '

Table of Contents

'; // Store original dimensions container.dataset.originalWidth = '280px'; container.dataset.originalHeight = '50vh'; container.dataset.isMinimized = 'true'; // Add styles const style = document.createElement('style'); style.textContent = ` #userscript-toc { position: fixed; top: 80px; right: 20px; width: 280px; height: 50vh; overflow-y: auto; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; padding: 0; resize: both; touch-action: none; transition: width 0.3s ease, height 0.3s ease, overflow 0.3s ease; opacity: 0.7; transition: opacity 0.3s ease; user-select: none; } #userscript-toc:hover { opacity: 1; } #userscript-toc.minimized { height: auto !important; overflow: hidden !important; } #userscript-toc.minimized .toc-content { display: none; } #userscript-toc .toc-header { font-weight: 600; font-size: 16px; padding: 15px; border-bottom: 1px solid #e0e0e0; background: #f8f9fa; border-radius: 8px 8px 0 0; color: #333; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; } #userscript-toc.minimized .toc-header { border-radius: 8px; border-bottom: none; } #userscript-toc .toc-title { flex: 1; } #userscript-toc .toc-minimize-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: #666; padding: 0 5px; transition: color 0.2s ease; user-select: none; font-weight: bold; } #userscript-toc .toc-minimize-btn:hover { color: #000; } #userscript-toc .toc-button-group { display: flex; gap: 5px; align-items: center; } #userscript-toc .toc-darkmode-btn { background: none; border: none; font-size: 16px; cursor: pointer; color: #666; padding: 0 5px; transition: color 0.2s ease, transform 0.2s ease; user-select: none; display: flex; align-items: center; justify-content: center; } #userscript-toc .toc-darkmode-btn:hover { color: #000; transform: scale(1.1); } #userscript-toc.dark-mode { background: #1e1e1e; border-color: #333; color: #e0e0e0; } #userscript-toc.dark-mode .toc-header { background: #2d2d2d; border-bottom-color: #333; color: #e0e0e0; } #userscript-toc.dark-mode .toc-darkmode-btn { color: #b0b0b0; } #userscript-toc.dark-mode .toc-darkmode-btn:hover { color: #e0e0e0; } #userscript-toc.dark-mode .toc-minimize-btn { color: #b0b0b0; } #userscript-toc.dark-mode .toc-minimize-btn:hover { color: #e0e0e0; } #userscript-toc.dark-mode a { color: #b0b0b0; } #userscript-toc.dark-mode a:hover { background: #333; color: #e0e0e0; border-left-color: #4a9eff; } #userscript-toc.dark-mode a.active { background: #1a3a52; color: #4a9eff; border-left-color: #4a9eff; } #userscript-toc .toc-content { overflow-y: auto; height: calc(100% - 50px); } #userscript-toc ul { list-style: none; margin: 0; padding: 10px 0; } #userscript-toc li { margin: 0; padding: 0; } #userscript-toc a { display: block; padding: 6px 15px; color: #555; text-decoration: none; transition: all 0.2s ease; border-left: 3px solid transparent; } #userscript-toc a:hover { background: #f0f0f0; color: #000; border-left-color: #007bff; } #userscript-toc a.active { background: #e3f2fd; color: #1976d2; border-left-color: #1976d2; font-weight: 500; } #userscript-toc .toc-h1 { padding-left: 15px; font-weight: 500; } #userscript-toc .toc-h2 { padding-left: 30px; font-size: 13px; } #userscript-toc .toc-h3 { padding-left: 45px; font-size: 12px; color: #666; } /* Remove scrollbar from main element, keep only for header */ #userscript-toc { scrollbar-width: none; } #userscript-toc::-webkit-scrollbar { display: none; } /* Keep scrollbar for header link area */ #userscript-toc .toc-header::-webkit-scrollbar { width: 6px; } #userscript-toc .toc-header::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } #userscript-toc .toc-header::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } #userscript-toc .toc-header::-webkit-scrollbar-thumb:hover { background: #555; } /* Responsive: hide on small screens */ @media (max-width: 1200px) { #userscript-toc { display: none; } } `; document.head.appendChild(style); // Add minimized class by default container.classList.add('minimized'); container.style.width = 'auto'; container.style.height = 'auto'; // Update minimize button to show + (unminimize icon) const minimizeBtn = container.querySelector('.toc-minimize-btn'); if (minimizeBtn) { minimizeBtn.textContent = '+'; } return container; } function buildTOC(headers) { const ul = document.createElement('ul'); headers.forEach((header, index) => { // Skip if header is inside the TOC itself if (header.closest('#userscript-toc')) { return; } const li = document.createElement('li'); const a = document.createElement('a'); // Get or create ID for the header let headerId = header.id; if (!headerId) { headerId = `toc-header-${index}`; header.id = headerId; } // Extract text content without permalink let headerText = ''; header.childNodes.forEach(node => { // Skip permalink elements (header-link class) if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('header-link')) { return; } // Get text content from this node if (node.nodeType === Node.TEXT_NODE) { headerText += node.textContent; } else if (node.nodeType === Node.ELEMENT_NODE) { headerText += node.textContent; } }); // Set link properties a.href = `#${headerId}`; a.textContent = headerText.trim(); a.className = `toc-${header.tagName.toLowerCase()}`; a.dataset.target = headerId; li.appendChild(a); ul.appendChild(li); }); return ul; } function addScrollBehavior(tocContainer) { tocContainer.addEventListener('click', (e) => { if (e.target.tagName === 'A') { e.preventDefault(); const targetId = e.target.dataset.target; const targetElement = document.getElementById(targetId); if (targetElement) { // Smooth scroll to target targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Update active state tocContainer.querySelectorAll('a').forEach(link => { link.classList.remove('active'); }); e.target.classList.add('active'); } } }); } function setupActiveHighlighting(headers, tocContainer) { let ticking = false; function updateActiveSection() { const scrollPosition = window.scrollY + 100; // Offset for fixed headers let currentHeader = null; headers.forEach(header => { if (header.closest('#userscript-toc')) return; const headerTop = header.getBoundingClientRect().top + window.scrollY; if (headerTop <= scrollPosition) { currentHeader = header; } }); if (currentHeader) { tocContainer.querySelectorAll('a').forEach(link => { link.classList.remove('active'); }); const activeLink = tocContainer.querySelector(`a[data-target="${currentHeader.id}"]`); if (activeLink) { activeLink.classList.add('active'); } } ticking = false; } window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(() => { updateActiveSection(); ticking = false; }); ticking = true; } }); // Initial highlight updateActiveSection(); } function setupDragAndResize(tocContainer) { let isDragging = false; let startX = 0; let startY = 0; let startLeft = 0; let startTop = 0; const header = tocContainer.querySelector('.toc-header'); header.addEventListener('mousedown', (e) => { // Don't drag if clicking the minimize button if (e.target.classList.contains('toc-minimize-btn')) { return; } isDragging = true; startX = e.clientX; startY = e.clientY; startLeft = tocContainer.offsetLeft; startTop = tocContainer.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(e) { if (!isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; tocContainer.style.left = (startLeft + deltaX) + 'px'; tocContainer.style.top = (startTop + deltaY) + 'px'; tocContainer.style.right = 'auto'; } function onMouseUp() { isDragging = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } } function setupTransparencyOnHover(tocContainer) { // TOC starts at 30% opacity (0.7 opacity = 30% transparent) // On hover, it becomes 100% opacity (0% transparent) // This is already handled in CSS with: // #userscript-toc { opacity: 0.7; } // #userscript-toc:hover { opacity: 1; } // The CSS handles this automatically, but we can add additional // event listeners if needed for more control tocContainer.addEventListener('mouseenter', () => { tocContainer.style.opacity = '1'; }); tocContainer.addEventListener('mouseleave', () => { tocContainer.style.opacity = '0.7'; }); } function setupMinimizeButton(tocContainer, contentWrapper) { const minimizeBtn = tocContainer.querySelector('.toc-minimize-btn'); minimizeBtn.addEventListener('click', (e) => { e.stopPropagation(); // Prevent drag when clicking minimize button const isMinimized = tocContainer.dataset.isMinimized === 'true'; if (isMinimized) { // Unminimize tocContainer.classList.remove('minimized'); tocContainer.dataset.isMinimized = 'false'; tocContainer.style.width = tocContainer.dataset.originalWidth; tocContainer.style.height = tocContainer.dataset.originalHeight; minimizeBtn.textContent = '−'; minimizeBtn.title = 'Minimize'; } else { // Minimize // Store current dimensions before minimizing tocContainer.dataset.originalWidth = tocContainer.style.width || '280px'; tocContainer.dataset.originalHeight = tocContainer.style.height || '50vh'; tocContainer.classList.add('minimized'); tocContainer.dataset.isMinimized = 'true'; tocContainer.style.width = 'auto'; tocContainer.style.height = 'auto'; minimizeBtn.textContent = '+'; minimizeBtn.title = 'Unminimize'; } }); } function setupDarkmodeButton(tocContainer) { const darkmodeBtn = tocContainer.querySelector('.toc-darkmode-btn'); const storageKey = 'toc-darkmode-enabled'; // Load saved darkmode preference const isDarkModeEnabled = localStorage.getItem(storageKey) === 'true'; if (isDarkModeEnabled) { tocContainer.classList.add('dark-mode'); darkmodeBtn.textContent = '☀️'; darkmodeBtn.title = 'Toggle Light Mode'; } darkmodeBtn.addEventListener('click', (e) => { e.stopPropagation(); // Prevent drag when clicking darkmode button const isCurrentlyDarkMode = tocContainer.classList.contains('dark-mode'); if (isCurrentlyDarkMode) { // Switch to light mode tocContainer.classList.remove('dark-mode'); darkmodeBtn.textContent = '🌙'; darkmodeBtn.title = 'Toggle Dark Mode'; localStorage.setItem(storageKey, 'false'); } else { // Switch to dark mode tocContainer.classList.add('dark-mode'); darkmodeBtn.textContent = '☀️'; darkmodeBtn.title = 'Toggle Light Mode'; localStorage.setItem(storageKey, 'true'); } }); } console.log('Sticky Table of Contents userscript loaded (v2.3 - with minimize/unminimize and darkmode features)'); // NextByte reporting snippets setTimeout(() => { window.postMessage({ type: 'NEXTBYTE_SCRIPT_EXECUTED', requestId: 'onboarding-generation' }, window.location.origin); window.postMessage({ type: 'NEXTBYTE_SCRIPT_EXECUTED', requestId: 'onboarding-update' }, window.location.origin); console.log('[NextByte Onboarding] Script execution reported (update mode)'); }, 200); })();