@kenjura/ursa 0.72.0 → 0.75.0

package/meta/menu.js

@@ -5,13 +5,14 @@
  * Each column represents one level of the folder hierarchy.
  * 
  * Also supports top menu position for horizontal navigation with dropdowns.
+ * Top menu is the default; side menu is used only when explicitly set.
  */
 document.addEventListener('DOMContentLoaded', () => {
     const navMain = document.querySelector('nav#nav-main');
     const navMainTop = document.querySelector('nav#nav-main-top');
-    const menuPosition = document.body.dataset.menuPosition || 'side';
+    const menuPosition = document.body.dataset.menuPosition || 'top';
     
-    // If menu position is top, handle differently
+    // If menu position is top (default), handle differently
     if (menuPosition === 'top') {
         initTopMenu();
         return;
@@ -541,27 +542,170 @@ document.addEventListener('DOMContentLoaded', () => {
 
 /**
  * Initialize top menu (horizontal navigation with dropdowns)
+ * Also handles: home button on desktop, hamburger → mobile side menu
  */
 function initTopMenu() {
     const navMainTop = document.querySelector('nav#nav-main-top');
+    const navMain = document.querySelector('nav#nav-main');
+    const globalNav = document.querySelector('nav#nav-global');
+    const menuButton = globalNav?.querySelector('.menu-button');
     const customMenuPath = document.body.dataset.customMenu;
     
-    if (!navMainTop || !customMenuPath) return;
+    if (!navMainTop) return;
     
-    // Load menu data and render top menu
-    fetch(customMenuPath)
+    // Determine which URL to load — custom menu or default auto-menu
+    const menuUrl = customMenuPath || '/public/menu-data.json';
+    
+    // Load menu data and render both top menu and mobile menu
+    fetch(menuUrl)
         .then(response => response.json())
         .then(data => {
-            // Handle new JSON format with menuData and menuPosition
             const menuData = data.menuData || data;
             renderTopMenu(navMainTop, menuData);
+            buildMobileMenu(menuData, navMain);
         })
         .catch(error => {
             console.error('Failed to load top menu data:', error);
         });
     
-    // Set up search button toggle
-    initTopMenuSearch();
+    // Set up home button (desktop) / hamburger (mobile)
+    setupMenuButton(menuButton, navMain);
+}
+
+/**
+ * Set up the menu button:
+ * - Desktop: shows 🏠 (home icon), navigates to "/" on click
+ * - Mobile: shows ☰ (hamburger), toggles mobile side menu on click
+ */
+function setupMenuButton(menuButton, navMain) {
+    if (!menuButton) return;
+    
+    const isMobile = () => window.matchMedia('(max-width: 50rem)').matches;
+    
+    function updateButtonIcon() {
+        if (isMobile()) {
+            const isActive = navMain?.classList.contains('active');
+            menuButton.textContent = isActive ? '✕' : '☰';
+            menuButton.setAttribute('aria-label', isActive ? 'Close menu' : 'Menu');
+        } else {
+            menuButton.textContent = '🏠';
+            menuButton.setAttribute('aria-label', 'Home');
+        }
+    }
+    
+    // Set initial icon
+    updateButtonIcon();
+    
+    // Update icon on resize
+    window.addEventListener('resize', updateButtonIcon);
+    
+    menuButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        
+        if (isMobile()) {
+            // Mobile: toggle side menu
+            if (navMain) {
+                const isNowActive = navMain.classList.toggle('active');
+                menuButton.textContent = isNowActive ? '✕' : '☰';
+                menuButton.setAttribute('aria-label', isNowActive ? 'Close menu' : 'Menu');
+            }
+        } else {
+            // Desktop: navigate to home
+            window.location.href = '/';
+        }
+    });
+    
+    // Close mobile menu on outside click
+    document.addEventListener('click', (e) => {
+        if (isMobile() && navMain?.classList.contains('active') &&
+            !navMain.contains(e.target) && !menuButton.contains(e.target)) {
+            navMain.classList.remove('active');
+            updateButtonIcon();
+        }
+    });
+    
+    // Close mobile menu on Escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isMobile() && navMain?.classList.contains('active')) {
+            navMain.classList.remove('active');
+            updateButtonIcon();
+            menuButton.focus();
+        }
+    });
+}
+
+/**
+ * Build the mobile side menu from the same data as the top menu.
+ * Repurposes #nav-main as a vertical list with a "Home" link at top.
+ */
+function buildMobileMenu(menuData, navMain) {
+    if (!navMain) return;
+    
+    // Clear existing content
+    navMain.innerHTML = '';
+    
+    const ul = document.createElement('ul');
+    ul.className = 'mobile-menu-list';
+    
+    // Add "Home" item at the top
+    const homeLi = document.createElement('li');
+    homeLi.className = 'mobile-menu-item mobile-menu-home';
+    const homeLink = document.createElement('a');
+    homeLink.href = '/';
+    homeLink.className = 'mobile-menu-label';
+    homeLink.textContent = '🏠 Home';
+    homeLi.appendChild(homeLink);
+    ul.appendChild(homeLi);
+    
+    // Build menu items recursively
+    buildMobileMenuItems(menuData, ul, 0);
+    
+    navMain.appendChild(ul);
+}
+
+/**
+ * Recursively build mobile menu items as a flat indented list
+ */
+function buildMobileMenuItems(items, parentUl, depth) {
+    for (const item of items) {
+        const li = document.createElement('li');
+        li.className = 'mobile-menu-item';
+        if (depth > 0) {
+            li.classList.add('mobile-menu-depth-' + Math.min(depth, 4));
+        }
+        
+        const el = item.href
+            ? document.createElement('a')
+            : document.createElement('span');
+        el.className = 'mobile-menu-label';
+        el.textContent = item.label;
+        if (item.href) el.href = item.href;
+        
+        // Highlight current page
+        if (item.href && isCurrentTopMenuPage(item.href)) {
+            li.classList.add('mobile-menu-current');
+        }
+        
+        li.appendChild(el);
+        parentUl.appendChild(li);
+        
+        // Recurse into children
+        if (item.children && item.children.length > 0) {
+            buildMobileMenuItems(item.children, parentUl, depth + 1);
+        }
+    }
+}
+
+/**
+ * Check if an href matches the current page
+ */
+function isCurrentTopMenuPage(href) {
+    if (!href || href === '#') return false;
+    const current = decodeURIComponent(window.location.pathname)
+        .replace(/\/index\.html$/, '').replace(/\.html$/, '').replace(/\/$/, '');
+    const target = decodeURIComponent(href)
+        .replace(/\/index\.html$/, '').replace(/\.html$/, '').replace(/\/$/, '');
+    return current === target;
 }
 
 /**
@@ -685,75 +829,4 @@ function createTopMenuFlyout(items) {
     return ul;
 }
 
-/**
- * Initialize search functionality for top menu mode
- */
-function initTopMenuSearch() {
-    const searchButton = document.querySelector('nav#nav-global .search-button');
-    const searchInput = document.querySelector('#global-search');
-    const searchWrapper = searchInput?.closest('.search-wrapper');
-    const searchResults = document.querySelector('#search-results');
-    
-    if (!searchButton || !searchInput || !searchWrapper) return;
-    
-    // Create search overlay backdrop (just the dark background)
-    const backdrop = document.createElement('div');
-    backdrop.className = 'search-backdrop';
-    document.body.appendChild(backdrop);
-    
-    // Create container for search that floats above the nav
-    const floatingSearch = document.createElement('div');
-    floatingSearch.className = 'search-floating';
-    document.body.appendChild(floatingSearch);
-    
-    // Toggle search on button click
-    searchButton.addEventListener('click', () => {
-        backdrop.classList.add('active');
-        floatingSearch.classList.add('active');
-        
-        // Move the search wrapper into the floating container
-        floatingSearch.appendChild(searchWrapper);
-        
-        // Move search results into floating container too (if exists)
-        if (searchResults) {
-            floatingSearch.appendChild(searchResults);
-        }
-        
-        searchInput.value = '';
-        searchInput.focus();
-    });
-    
-    function closeSearch() {
-        backdrop.classList.remove('active');
-        floatingSearch.classList.remove('active');
-        
-        // Move search wrapper back to nav-center
-        const navCenter = document.querySelector('.nav-center');
-        if (navCenter && searchWrapper) {
-            navCenter.appendChild(searchWrapper);
-        }
-        // Move search results back too
-        if (searchResults && searchWrapper) {
-            searchWrapper.parentNode.appendChild(searchResults);
-        }
-    }
-    
-    // Close on backdrop click
-    backdrop.addEventListener('click', closeSearch);
-    
-    // Close on escape
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && backdrop.classList.contains('active')) {
-            closeSearch();
-        }
-    });
-    
-    // Close when a search result is clicked (navigation will happen)
-    if (searchResults) {
-        searchResults.addEventListener('click', (e) => {
-            if (e.target.closest('.search-result-item')) {
-                closeSearch();
-            }
-        });
-    }
-}
+// (Search functionality is now handled by widgets.js)

package/meta/search.js

@@ -157,12 +157,6 @@ class GlobalSearch {
     
     this.searchInput.addEventListener('blur', (e) => {
       // Delay hiding to allow click on results
-      // Check if we're inside the floating search container (top menu mode)
-      const floatingSearch = this.searchInput.closest('.search-floating');
-      if (floatingSearch && floatingSearch.classList.contains('active')) {
-        // In floating mode, don't auto-hide on blur - let the backdrop click handle it
-        return;
-      }
       setTimeout(() => {
         this.hideResults();
       }, 150);
@@ -170,11 +164,6 @@ class GlobalSearch {
     
     // Click outside to close
     document.addEventListener('click', (e) => {
-      // If inside floating search container, don't close on internal clicks
-      const floatingSearch = this.searchInput.closest('.search-floating');
-      if (floatingSearch && floatingSearch.contains(e.target)) {
-        return;
-      }
       if (!this.searchInput.contains(e.target) && !this.searchResults.contains(e.target)) {
         this.hideResults();
       }
@@ -185,8 +174,13 @@ class GlobalSearch {
       // Check for Cmd+P (Mac) or Ctrl+P (Windows/Linux)
       if ((e.metaKey || e.ctrlKey) && e.key === 'p') {
         e.preventDefault();
-        this.searchInput.focus();
-        this.searchInput.select();
+        // If widget system is available, open the search widget
+        if (window.widgetManager) {
+          window.widgetManager.open('search');
+        } else {
+          this.searchInput.focus();
+          this.searchInput.select();
+        }
       }
     });
   }

package/meta/sectionify.js

@@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     for (let i = 0; i < children.length; i++) {
         const el = children[i];
+        // Skip breadcrumb nav — it stays outside sections
+        if (el.classList && el.classList.contains('breadcrumbs')) continue;
         if (el.tagName === 'H1' && currentSection.childNodes.length > 0) {
             sections.push(currentSection);
             currentSection = document.createElement('section');
@@ -20,11 +22,19 @@ document.addEventListener('DOMContentLoaded', () => {
         sections.push(currentSection);
     }
 
+    // Preserve breadcrumb nav before clearing
+    const breadcrumbs = article.querySelector('.breadcrumbs');
+
     // Remove all existing children
     while (article.firstChild) {
         article.removeChild(article.firstChild);
     }
 
+    // Re-insert breadcrumbs at the top, outside any section
+    if (breadcrumbs) {
+        article.appendChild(breadcrumbs);
+    }
+
     // Append new sections
     sections.forEach(section => article.appendChild(section));
     

package/meta/toc-generator.js

@@ -1,15 +1,19 @@
 // Table of Contents Generator
 document.addEventListener('DOMContentLoaded', () => {
-    const tocNav = document.getElementById('nav-toc');
+    // Generate TOC into widget panel if available, otherwise fallback to nav-toc
+    const tocTarget = document.getElementById('widget-content-toc') || document.getElementById('nav-toc');
     const article = document.querySelector('article#main-content');
     
-    if (!tocNav || !article) return;
+    if (!tocTarget || !article) return;
     
     // Find all headings in the article
     const headings = article.querySelectorAll('h1, h2, h3');
     
     if (headings.length === 0) {
-        tocNav.style.display = 'none';
+        // Hide the TOC widget button if no headings
+        const tocButton = document.querySelector('.widget-button[data-widget="toc"]');
+        if (tocButton) tocButton.style.display = 'none';
+        tocTarget.style.display = 'none';
         return;
     }
     
@@ -39,7 +43,9 @@ document.addEventListener('DOMContentLoaded', () => {
         tocList.appendChild(listItem);
     });
     
-    tocNav.appendChild(tocList);
+    // Add an id=toc wrapper for the toc.js sentinel-based highlighter
+    tocList.id = 'toc';
+    tocTarget.appendChild(tocList);
     
     // Handle TOC link clicks for smooth scrolling
     function handleTocClick(e) {
@@ -84,13 +90,13 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Update TOC active state
     function updateTocActiveState(activeHeading) {
-        const tocLinks = tocNav.querySelectorAll('a');
+        const tocLinks = tocTarget.querySelectorAll('a');
         tocLinks.forEach(link => {
             link.classList.remove('active');
         });
         
         if (activeHeading) {
-            const activeLink = tocNav.querySelector(`a[href="#${activeHeading.id}"]`);
+            const activeLink = tocTarget.querySelector(`a[href="#${activeHeading.id}"]`);
             if (activeLink) {
                 activeLink.classList.add('active');
             }