@kenjura/ursa 0.10.0 → 0.32.0

package/meta/menu.js

@@ -0,0 +1,371 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const navMain = document.querySelector('nav#nav-main');
+    if (!navMain) return;
+
+    // Load menu data from embedded JSON
+    const menuDataScript = document.getElementById('menu-data');
+    if (!menuDataScript) return;
+    
+    let menuData;
+    try {
+        menuData = JSON.parse(menuDataScript.textContent);
+    } catch (e) {
+        console.error('Failed to parse menu data:', e);
+        return;
+    }
+
+    // State
+    let currentPath = []; // Array of path segments representing current directory
+    let expandedLevel1 = new Set(); // Track which level-1 items are expanded
+
+    // DOM elements
+    const breadcrumb = navMain.querySelector('.menu-breadcrumb');
+    const backButton = navMain.querySelector('.menu-back');
+    const homeButton = navMain.querySelector('.menu-home');
+    const currentPathSpan = navMain.querySelector('.menu-current-path');
+    const menuContainer = navMain.querySelector('.menu-level');
+
+    // Helper to check if we're on mobile
+    const isMobile = () => window.matchMedia('(max-width: 800px)').matches;
+
+    // Get items at a specific path
+    function getItemsAtPath(path) {
+        let items = menuData;
+        for (const segment of path) {
+            const folder = items.find(item => item.path === (path.slice(0, path.indexOf(segment) + 1).join('/') || segment));
+            if (folder && folder.children) {
+                items = folder.children;
+            } else {
+                return [];
+            }
+        }
+        return items;
+    }
+
+    // Find item by path
+    function findItemByPath(pathString) {
+        const segments = pathString.split('/').filter(Boolean);
+        let items = menuData;
+        let item = null;
+        
+        for (let i = 0; i < segments.length; i++) {
+            const targetPath = segments.slice(0, i + 1).join('/');
+            item = items.find(it => it.path === targetPath);
+            if (!item) return null;
+            if (item.children && i < segments.length - 1) {
+                items = item.children;
+            }
+        }
+        return item;
+    }
+
+    // Check if current page is within an item's tree
+    function isCurrentPageInTree(item) {
+        if (isCurrentPage(item)) return true;
+        if (item.children) {
+            for (const child of item.children) {
+                if (isCurrentPageInTree(child)) return true;
+            }
+        }
+        return false;
+    }
+
+    // Find the current page item within an item's children (level 2)
+    function findCurrentPageChild(item) {
+        if (!item.children) return null;
+        for (const child of item.children) {
+            if (isCurrentPage(child)) return child;
+            // Also check grandchildren in case current page is deeper
+            if (isCurrentPageInTree(child)) return child;
+        }
+        return null;
+    }
+
+    // Track which level-1 item contains the current page (for special collapse behavior)
+    let currentPageParentPath = null;
+
+    // Render menu at current path
+    function renderMenu() {
+        // Get items for current level (level 1)
+        let level1Items;
+        if (currentPath.length === 0) {
+            level1Items = menuData;
+        } else {
+            const currentPathString = currentPath.join('/');
+            const currentFolder = findItemByPath(currentPathString);
+            level1Items = currentFolder?.children || [];
+        }
+
+        // Find which level-1 item contains the current page
+        currentPageParentPath = null;
+        for (const item of level1Items) {
+            if (item.hasChildren && isCurrentPageInTree(item)) {
+                currentPageParentPath = item.path;
+                break;
+            }
+        }
+
+        // Build HTML for level 1 and level 2
+        let html = '';
+        for (const item of level1Items) {
+            const isActive = isCurrentPage(item);
+            const activeClass = isActive ? ' current-menu-item' : '';
+            const hasChildrenClass = item.hasChildren ? ' has-children' : '';
+            
+            // Level-1 items with children get a caret, not triple-dot
+            // Expanded if: manually expanded, or current page is in this tree
+            const isExpanded = expandedLevel1.has(item.path) || isCurrentPageInTree(item);
+            const expandedClass = isExpanded ? ' expanded' : '';
+            const caretIndicator = item.hasChildren 
+                ? `<span class="menu-caret">${isExpanded ? '▼' : '▶'}</span>` 
+                : '';
+            
+            const labelHtml = item.href
+                ? `<a href="${item.href}" class="menu-label">${item.label}</a>`
+                : `<span class="menu-label">${item.label}</span>`;
+
+            html += `
+<li class="menu-item level-1${hasChildrenClass}${activeClass}${expandedClass}" data-path="${item.path}">
+  <div class="menu-item-row">
+    ${item.icon}
+    ${labelHtml}
+    ${caretIndicator}
+  </div>`;
+
+            // Determine which children to render
+            let childrenToRender = [];
+            if (item.children && item.children.length > 0) {
+                if (isExpanded) {
+                    // Fully expanded - show all children
+                    childrenToRender = item.children;
+                } else if (item.path === currentPageParentPath) {
+                    // Collapsed but contains current page - show only current page
+                    const currentChild = findCurrentPageChild(item);
+                    if (currentChild) {
+                        childrenToRender = [currentChild];
+                    }
+                }
+            }
+
+            if (childrenToRender.length > 0) {
+                html += '<ul class="menu-sublevel">';
+                for (const child of childrenToRender) {
+                    const childActive = isCurrentPage(child);
+                    const childActiveClass = childActive ? ' current-menu-item' : '';
+                    const childHasChildren = child.hasChildren ? ' has-children' : '';
+                    // Level-2 items with children get triple-dot
+                    const childMoreIndicator = child.hasChildren ? '<span class="menu-more" title="Has sub-items">⋮</span>' : '';
+                    
+                    const childLabelHtml = child.href
+                        ? `<a href="${child.href}" class="menu-label">${child.label}</a>`
+                        : `<span class="menu-label">${child.label}</span>`;
+
+                    html += `
+  <li class="menu-item level-2${childHasChildren}${childActiveClass}" data-path="${child.path}">
+    <div class="menu-item-row">
+      ${child.icon}
+      ${childLabelHtml}
+      ${childMoreIndicator}
+    </div>
+  </li>`;
+                }
+                html += '</ul>';
+            }
+
+            html += '</li>';
+        }
+
+        menuContainer.innerHTML = html;
+
+        // Update breadcrumb
+        if (currentPath.length > 0) {
+            breadcrumb.style.display = 'flex';
+            currentPathSpan.textContent = currentPath[currentPath.length - 1];
+        } else {
+            breadcrumb.style.display = 'none';
+        }
+
+        // Attach click handlers
+        attachClickHandlers();
+    }
+
+    // Check if an item matches the current page
+    function isCurrentPage(item) {
+        if (!item.href) return false;
+        const currentHref = window.location.pathname;
+        // Normalize paths for comparison
+        const normalizedItemHref = item.href.replace(/\/index\.html$/, '').replace(/\.html$/, '');
+        const normalizedCurrentHref = currentHref.replace(/\/index\.html$/, '').replace(/\.html$/, '');
+        return normalizedItemHref === normalizedCurrentHref;
+    }
+
+    // Navigate to a folder
+    function navigateToFolder(pathString) {
+        currentPath = pathString.split('/').filter(Boolean);
+        renderMenu();
+    }
+
+    // Go back one level
+    function goBack() {
+        if (currentPath.length > 0) {
+            currentPath.pop();
+            renderMenu();
+        }
+    }
+
+    // Go to root
+    function goToRoot() {
+        currentPath = [];
+        renderMenu();
+    }
+
+    // Attach click handlers to menu items
+    function attachClickHandlers() {
+        const menuItems = menuContainer.querySelectorAll('.menu-item');
+        menuItems.forEach(li => {
+            const row = li.querySelector('.menu-item-row');
+            const caret = li.querySelector('.menu-caret');
+            const moreBtn = li.querySelector('.menu-more');
+            const link = li.querySelector('a.menu-label');
+            const isLevel1 = li.classList.contains('level-1');
+            const isLevel2 = li.classList.contains('level-2');
+            
+            if (li.classList.contains('has-children')) {
+                if (isLevel1) {
+                    // Level-1: clicking caret or row (not link) toggles expand/collapse
+                    const toggleExpand = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const path = li.dataset.path;
+                        const hasLink = !!link;
+                        
+                        if (expandedLevel1.has(path)) {
+                            // Collapsing this item
+                            expandedLevel1.delete(path);
+                        } else {
+                            // Expanding this item
+                            // If this item has no link (non-navigable folder), collapse others
+                            if (!hasLink) {
+                                expandedLevel1.clear();
+                            }
+                            expandedLevel1.add(path);
+                        }
+                        renderMenu();
+                    };
+                    
+                    if (caret) {
+                        caret.addEventListener('click', toggleExpand);
+                    }
+                    
+                    row.addEventListener('click', (e) => {
+                        if (!e.target.closest('a')) {
+                            toggleExpand(e);
+                        }
+                    });
+                } else if (isLevel2) {
+                    // Level-2 with children: clicking ⋮ or row navigates into folder
+                    if (moreBtn) {
+                        moreBtn.addEventListener('click', (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            navigateToFolder(li.dataset.path);
+                        });
+                    }
+                    
+                    row.addEventListener('click', (e) => {
+                        if (!e.target.closest('a')) {
+                            e.preventDefault();
+                            navigateToFolder(li.dataset.path);
+                        }
+                    });
+                }
+            }
+        });
+    }
+
+    // Breadcrumb navigation
+    if (backButton) {
+        backButton.addEventListener('click', goBack);
+    }
+    if (homeButton) {
+        homeButton.addEventListener('click', goToRoot);
+    }
+
+    // Hamburger menu button toggle
+    const menuButton = document.querySelector('button.menu-button');
+    if (menuButton) {
+        const updateButtonIcon = (isOpen) => {
+            menuButton.textContent = isOpen ? '✕' : '☰';
+            menuButton.setAttribute('aria-expanded', isOpen);
+            menuButton.setAttribute('aria-label', isOpen ? 'Close menu' : 'Open menu');
+        };
+
+        menuButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isMobile()) {
+                navMain.classList.toggle('active');
+                const isExpanded = navMain.classList.contains('active');
+                updateButtonIcon(isExpanded);
+            } else {
+                navMain.classList.toggle('collapsed');
+                const isExpanded = !navMain.classList.contains('collapsed');
+                menuButton.setAttribute('aria-expanded', isExpanded);
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (isMobile() && 
+                navMain.classList.contains('active') && 
+                !navMain.contains(e.target) && 
+                !menuButton.contains(e.target)) {
+                navMain.classList.remove('active');
+                updateButtonIcon(false);
+            }
+        });
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                if (isMobile() && navMain.classList.contains('active')) {
+                    navMain.classList.remove('active');
+                    updateButtonIcon(false);
+                    menuButton.focus();
+                }
+            }
+        });
+    }
+
+    // Initialize: find current page and set appropriate path
+    function initializeFromCurrentPage() {
+        const currentHref = window.location.pathname;
+        const pathParts = currentHref.split('/').filter(Boolean);
+        
+        // Try to find the deepest matching folder
+        if (pathParts.length > 1) {
+            // Navigate to parent folder of current page
+            const parentPath = pathParts.slice(0, -1);
+            
+            // Check if this path exists in menu data
+            let testPath = [];
+            for (const part of parentPath) {
+                testPath.push(part);
+                const item = findItemByPath(testPath.join('/'));
+                if (!item || !item.hasChildren) {
+                    // Path doesn't exist or isn't a folder, stop here
+                    testPath.pop();
+                    break;
+                }
+            }
+            
+            // If we found a valid folder path that's more than 1 level deep, navigate there
+            if (testPath.length > 1) {
+                currentPath = testPath.slice(0, -1); // Go to grandparent so current folder is visible
+            }
+        }
+        
+        renderMenu();
+    }
+
+    initializeFromCurrentPage();
+});

package/meta/search.js

@@ -0,0 +1,208 @@
+// Global search functionality with typeahead
+class GlobalSearch {
+  constructor() {
+    this.searchInput = document.getElementById('global-search');
+    this.searchResults = null;
+    this.searchIndex = window.SEARCH_INDEX || [];
+    this.currentSelection = -1;
+    
+    if (!this.searchInput) return;
+    
+    this.init();
+  }
+  
+  init() {
+    this.createResultsContainer();
+    this.bindEvents();
+  }
+  
+  createResultsContainer() {
+    this.searchResults = document.createElement('div');
+    this.searchResults.id = 'search-results';
+    this.searchResults.className = 'search-results hidden';
+    this.searchInput.parentNode.appendChild(this.searchResults);
+  }
+  
+  bindEvents() {
+    // Input events
+    this.searchInput.addEventListener('input', (e) => {
+      this.handleSearch(e.target.value);
+    });
+    
+    // Keyboard navigation
+    this.searchInput.addEventListener('keydown', (e) => {
+      this.handleKeydown(e);
+    });
+    
+    // Focus events
+    this.searchInput.addEventListener('focus', () => {
+      if (this.searchInput.value.trim()) {
+        this.handleSearch(this.searchInput.value);
+      }
+    });
+    
+    this.searchInput.addEventListener('blur', (e) => {
+      // Delay hiding to allow click on results
+      setTimeout(() => {
+        this.hideResults();
+      }, 150);
+    });
+    
+    // Click outside to close
+    document.addEventListener('click', (e) => {
+      if (!this.searchInput.contains(e.target) && !this.searchResults.contains(e.target)) {
+        this.hideResults();
+      }
+    });
+  }
+  
+  handleSearch(query) {
+    if (!query || query.length < 2) {
+      this.hideResults();
+      return;
+    }
+    
+    const results = this.search(query);
+    this.displayResults(results);
+  }
+  
+  search(query) {
+    const normalizedQuery = query.toLowerCase().trim();
+    const results = [];
+    
+    // Search through the index
+    this.searchIndex.forEach(item => {
+      const titleMatch = item.title.toLowerCase().includes(normalizedQuery);
+      const pathMatch = item.path.toLowerCase().includes(normalizedQuery);
+      const contentMatch = item.content && item.content.toLowerCase().includes(normalizedQuery);
+      
+      if (titleMatch || pathMatch || contentMatch) {
+        let score = 0;
+        
+        // Boost exact title matches
+        if (item.title.toLowerCase() === normalizedQuery) score += 100;
+        else if (item.title.toLowerCase().startsWith(normalizedQuery)) score += 50;
+        else if (titleMatch) score += 25;
+        
+        // Boost path matches
+        if (pathMatch) score += 10;
+        
+        // Content matches get lower score
+        if (contentMatch) score += 5;
+        
+        results.push({ ...item, score });
+      }
+    });
+    
+    // Sort by score, then by title
+    return results
+      .sort((a, b) => {
+        if (b.score !== a.score) return b.score - a.score;
+        return a.title.localeCompare(b.title);
+      })
+      .slice(0, 10); // Limit to 10 results
+  }
+  
+  displayResults(results) {
+    if (results.length === 0) {
+      this.hideResults();
+      return;
+    }
+    
+    this.searchResults.innerHTML = '';
+    this.currentSelection = -1;
+    
+    results.forEach((result, index) => {
+      const item = document.createElement('div');
+      item.className = 'search-result-item';
+      item.dataset.index = index;
+      
+      const title = document.createElement('div');
+      title.className = 'search-result-title';
+      title.textContent = result.title;
+      
+      const path = document.createElement('div');
+      path.className = 'search-result-path';
+      path.textContent = result.path;
+      
+      item.appendChild(title);
+      item.appendChild(path);
+      
+      // Click handler
+      item.addEventListener('click', () => {
+        this.navigateToResult(result);
+      });
+      
+      this.searchResults.appendChild(item);
+    });
+    
+    this.showResults();
+  }
+  
+  showResults() {
+    this.searchResults.classList.remove('hidden');
+  }
+  
+  hideResults() {
+    this.searchResults.classList.add('hidden');
+    this.currentSelection = -1;
+  }
+  
+  handleKeydown(e) {
+    const items = this.searchResults.querySelectorAll('.search-result-item');
+    
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this.currentSelection = Math.min(this.currentSelection + 1, items.length - 1);
+        this.updateSelection();
+        break;
+        
+      case 'ArrowUp':
+        e.preventDefault();
+        this.currentSelection = Math.max(this.currentSelection - 1, -1);
+        this.updateSelection();
+        break;
+        
+      case 'Enter':
+        e.preventDefault();
+        if (this.currentSelection >= 0 && items[this.currentSelection]) {
+          const index = items[this.currentSelection].dataset.index;
+          const results = this.getLastSearchResults();
+          if (results && results[index]) {
+            this.navigateToResult(results[index]);
+          }
+        }
+        break;
+        
+      case 'Escape':
+        this.hideResults();
+        this.searchInput.blur();
+        break;
+    }
+  }
+  
+  updateSelection() {
+    const items = this.searchResults.querySelectorAll('.search-result-item');
+    items.forEach((item, index) => {
+      item.classList.toggle('selected', index === this.currentSelection);
+    });
+  }
+  
+  getLastSearchResults() {
+    // Store last search results for keyboard navigation
+    if (!this._lastResults) {
+      this._lastResults = this.search(this.searchInput.value);
+    }
+    return this._lastResults;
+  }
+  
+  navigateToResult(result) {
+    window.location.href = result.url;
+  }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  new GlobalSearch();
+});

package/meta/sectionify.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const article = document.querySelector('article#main-content');
+    if (!article) return;
+
+    const children = Array.from(article.children);
+    let sections = [];
+    let currentSection = document.createElement('section');
+    currentSection.classList.add('sectionOuter');
+
+    for (let i = 0; i < children.length; i++) {
+        const el = children[i];
+        if (el.tagName === 'H1' && currentSection.childNodes.length > 0) {
+            sections.push(currentSection);
+            currentSection = document.createElement('section');
+            currentSection.classList.add('sectionOuter');
+        }
+        currentSection.appendChild(el);
+    }
+    if (currentSection.childNodes.length > 0) {
+        sections.push(currentSection);
+    }
+
+    // Remove all existing children
+    while (article.firstChild) {
+        article.removeChild(article.firstChild);
+    }
+
+    // Append new sections
+    sections.forEach(section => article.appendChild(section));
+    
+
+    // Optional: Add section numbers or other decorations
+    Array.from(article.querySelectorAll('section.sectionOuter')).forEach((section, index) => {
+        section.style.setProperty('--section-index', index + 1);
+    });
+});

package/meta/sticky.js

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const article = document.querySelector('article#main-content');
+    if (!article) return;
+
+    const headings = article.querySelectorAll('h1, h2, h3');
+
+    function updateStuckState() {
+        let currentStuckHeading = null;
+        
+        headings.forEach(el => {
+            const wasStuck = el.classList.contains('stuck');
+            const style = window.getComputedStyle(el);
+            if (style.position === 'sticky' && style.top !== 'auto') {
+                const rect = el.getBoundingClientRect();
+                const top = parseInt(style.top, 10) || 0;
+                if (rect.top <= top && rect.bottom > top) {
+                    el.classList.add('stuck');
+                    currentStuckHeading = el;
+                } else {
+                    el.classList.remove('stuck');
+                }
+            } else {
+                el.classList.remove('stuck');
+            }
+            
+            // Dispatch event if stuck state changed
+            if (wasStuck !== el.classList.contains('stuck')) {
+                const event = new CustomEvent('headingStuckStateChanged', {
+                    detail: { 
+                        heading: el, 
+                        stuck: el.classList.contains('stuck'),
+                        currentStuckHeading: currentStuckHeading
+                    }
+                });
+                document.dispatchEvent(event);
+            }
+            
+            // Handle text updates for H1 elements
+            if (el.tagName === 'H1') {
+                // Store original text if not already stored
+                if (!el.dataset.originalText) {
+                    el.dataset.originalText = el.textContent;
+                }
+                
+                // Only update text if this H1 is stuck
+                if (el.classList.contains('stuck')) {
+                    // Find the last stuck h2 and h3 (i.e., the "current" ones)
+                    const stuckH2s = Array.from(headings).filter(h => h.tagName === 'H2' && h.classList.contains('stuck'));
+                    const stuckH3s = Array.from(headings).filter(h => h.tagName === 'H3' && h.classList.contains('stuck'));
+                    const stuckH2 = stuckH2s.length ? stuckH2s[stuckH2s.length - 1] : null;
+                    const stuckH3 = stuckH3s.length ? stuckH3s[stuckH3s.length - 1] : null;
+
+                    let newText = el.dataset.originalText;
+
+                    if (stuckH3 && stuckH2) {
+                        newText += ' > ' + (stuckH2.dataset.originalText || stuckH2.textContent) + ' > ' + (stuckH3.dataset.originalText || stuckH3.textContent);
+                    } else if (stuckH2) {
+                        newText += ' > ' + (stuckH2.dataset.originalText || stuckH2.textContent);
+                    }
+
+                    el.textContent = newText;
+                } else {
+                    // Restore original text if not stuck
+                    el.textContent = el.dataset.originalText;
+                }
+            }
+        });
+    }
+
+    updateStuckState();
+    window.addEventListener('scroll', updateStuckState, { passive: true });
+    window.addEventListener('resize', updateStuckState);
+});