docyard 0.7.0 → 0.8.0

data/lib/docyard/templates/assets/js/components/search.js

@@ -1,14 +1,3 @@
-/**
- * SearchManager - Handles search functionality with Pagefind integration
- *
- * Features:
- * - Cmd+K / Ctrl+K keyboard shortcut
- * - Lazy loading of Pagefind
- * - Keyboard navigation in results
- * - Debounced search input
- *
- * @class SearchManager
- */
 class SearchManager {
   constructor() {
     this.modal = document.querySelector('[data-search-modal]');
@@ -32,7 +21,6 @@ class SearchManager {
     this.DEBOUNCE_DELAY = 150;
     this.RESULTS_PER_PAGE = 6;
 
-    // State for "load more" functionality
     this.allSearchResults = [];
     this.displayedCount = 0;
     this.currentQuery = '';
@@ -52,36 +40,29 @@ class SearchManager {
   }
 
   attachEventListeners() {
-    // Global keyboard shortcut
     document.addEventListener('keydown', this.handleKeyDown);
 
-    // Trigger button
     if (this.trigger) {
       this.trigger.addEventListener('click', () => this.open());
     }
 
-    // Backdrop click to close
     if (this.backdrop) {
       this.backdrop.addEventListener('click', () => this.close());
     }
 
-    // Close button
     if (this.closeButton) {
       this.closeButton.addEventListener('click', () => this.close());
     }
 
-    // Clear button
     if (this.clearButton) {
       this.clearButton.addEventListener('click', () => this.clearSearch());
     }
 
-    // Search input
     if (this.input) {
       this.input.addEventListener('input', this.handleInput);
       this.input.addEventListener('keydown', (e) => this.handleInputKeyDown(e));
     }
 
-    // Results click delegation
     if (this.resultsContainer) {
       this.resultsContainer.addEventListener('click', this.handleResultClick);
     }
@@ -99,21 +80,18 @@ class SearchManager {
   }
 
   handleKeyDown(event) {
-    // Cmd+K or Ctrl+K to open
     if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
       event.preventDefault();
       this.toggle();
       return;
     }
 
-    // Escape to close
     if (event.key === 'Escape' && this.isOpen) {
       event.preventDefault();
       this.close();
       return;
     }
 
-    // Forward slash to focus search (when not in an input)
     if (event.key === '/' && !this.isOpen && !this.isInputFocused()) {
       event.preventDefault();
       this.open();
@@ -140,12 +118,10 @@ class SearchManager {
   handleInput(event) {
     const query = event.target.value.trim();
 
-    // Update clear button visibility
     if (this.clearButton) {
       this.clearButton.hidden = query.length === 0;
     }
 
-    // Debounce search
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
     }
@@ -195,10 +171,8 @@ class SearchManager {
     this.modal.hidden = false;
     document.body.style.overflow = 'hidden';
 
-    // Trigger animation on next frame
     requestAnimationFrame(() => {
       this.modal.classList.add('is-open');
-      // Double rAF ensures focus works after CSS transition starts
       requestAnimationFrame(() => {
         if (this.input) {
           this.input.focus();
@@ -206,7 +180,6 @@ class SearchManager {
       });
     });
 
-    // Initialize Pagefind if not already done
     if (!this.pagefind) {
       await this.initPagefind();
     }
@@ -220,18 +193,15 @@ class SearchManager {
     document.body.style.overflow = '';
     this.selectedIndex = -1;
 
-    // Hide modal after animation completes
     setTimeout(() => {
       if (!this.isOpen) {
         this.modal.hidden = true;
-        // Reset body visibility for next open
         if (this.body) {
           this.body.hidden = true;
         }
       }
     }, 200);
 
-    // Return focus to trigger
     if (this.trigger) {
       this.trigger.focus();
     }
@@ -274,13 +244,11 @@ class SearchManager {
         return;
       }
 
-      // Store state for "load more"
       this.allSearchResults = searchResults.results;
       this.currentQuery = query;
       this.displayedCount = 0;
       this.groupedResults = [];
 
-      // Load initial batch
       await this.loadMoreResults();
     } catch (error) {
       console.error('Search error:', error);
@@ -294,17 +262,14 @@ class SearchManager {
 
     if (startIndex >= this.allSearchResults.length) return;
 
-    // Load the next batch of results
     const resultsData = await Promise.all(
       this.allSearchResults.slice(startIndex, endIndex).map(r => r.data())
     );
 
-    // Group results by page with sections nested
     const newGrouped = this.groupResults(resultsData);
     this.groupedResults = [...this.groupedResults, ...newGrouped];
     this.displayedCount = endIndex;
 
-    // Flatten for keyboard navigation
     this.results = this.flattenForNavigation(this.groupedResults);
     this.renderGroupedResults(this.groupedResults, this.currentQuery, this.allSearchResults.length);
   }
@@ -320,14 +285,11 @@ class SearchManager {
     for (const result of resultsData) {
       const pageTitle = result.meta?.title || this.extractTitleFromUrl(result.url);
 
-      // Get sub-results (sections) for this page
-      // Filter out sections with same title as page (H1 heading duplicates)
       const subResults = (result.sub_results || [])
         .filter(sub => {
           if (sub.url === result.url) return false;
           if (!sub.title) return false;
           const cleanedTitle = this.cleanSectionTitle(sub.title);
-          // Skip if section title matches page title
           if (cleanedTitle.toLowerCase() === pageTitle.toLowerCase()) return false;
           return true;
         })
@@ -352,7 +314,6 @@ class SearchManager {
   }
 
   cleanSectionTitle(title) {
-    // Remove trailing # that Pagefind sometimes includes
     return title.replace(/#$/, '').trim();
   }
 
@@ -389,7 +350,6 @@ class SearchManager {
       return this.renderPageResult(page, pageIndex, isPageSelected, sectionsHtml, query);
     }).join('');
 
-    // Add "View more results" link if there are more results
     const hasMore = this.displayedCount < totalResults;
     const loadMoreHtml = hasMore ? `
       <li class="search-load-more">
@@ -401,7 +361,6 @@ class SearchManager {
 
     this.resultsContainer.innerHTML = resultsHtml + loadMoreHtml;
 
-    // Attach event listener to "View more" button
     const loadMoreBtn = this.resultsContainer.querySelector('[data-search-load-more]');
     if (loadMoreBtn) {
       loadMoreBtn.addEventListener('click', this.handleLoadMore);
@@ -409,7 +368,6 @@ class SearchManager {
   }
 
   renderPageResult(page, index, isSelected, sectionsHtml, query) {
-    // Article icon (Phosphor)
     const pageIcon = `<svg class="search-result-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
       <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path>
     </svg>`;
@@ -473,7 +431,6 @@ class SearchManager {
     const terms = query.trim().split(/\s+/).filter(t => t.length > 1);
     if (terms.length === 0) return escaped;
 
-    // Match exact search term only (like Stripe does)
     const regex = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
       .join('|')})`, 'gi');
     return escaped.replace(regex, '<mark class="search-title-highlight">$1</mark>');
@@ -482,30 +439,22 @@ class SearchManager {
   highlightQuery(text, query, title = '') {
     if (!query || !text) return this.escapeHtml(text);
 
-    // Decode HTML entities first (Pagefind may return encoded HTML)
     let cleanText = this.decodeHtmlEntities(text);
 
-    // Strip all HTML tags
     cleanText = cleanText.replace(/<[^>]*>/g, '');
 
-    // Remove the title if it appears at the start of the excerpt (Pagefind often includes it)
     if (title) {
-      // Remove "Title#" or "Title:" patterns at the start
       const titlePattern = new RegExp(`^${title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[#:]?\\s*`, 'i');
       cleanText = cleanText.replace(titlePattern, '');
     }
 
-    // Clean markdown and special characters
     cleanText = this.cleanMarkdown(cleanText);
 
-    // Escape for safe HTML
     const escaped = this.escapeHtml(cleanText);
 
-    // Highlight exact search term only (like Stripe does)
     const terms = query.trim().split(/\s+/).filter(t => t.length > 1);
     if (terms.length === 0) return escaped;
 
-    // Match exact search term only
     const regex = new RegExp(`(${terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
       .join('|')})`, 'gi');
     return escaped.replace(regex, '<mark>$1</mark>');
@@ -519,51 +468,33 @@ class SearchManager {
 
   cleanMarkdown(text) {
     return text
-      // Remove code block markers with optional language/title (```ruby, ```js title="foo")
       .replace(/```\w*(?:\s+[^`\n]*)?\n?/g, '')
       .replace(/```/g, '')
-      // Remove Kramdown/Jekyll directives like {:/nomarkdown}, {::nomarkdown}, {:.class}
       .replace(/\{:?:?[^}]*\}/g, '')
-      // Remove heading anchors like "Dark Mode#" or "Styling#" (word followed by #)
       .replace(/(\w)#(?=\s|$|[A-Z])/g, '$1')
-      // Remove markdown bold/italic
       .replace(/\*\*([^*]+)\*\*/g, '$1')
       .replace(/\*([^*]+)\*/g, '$1')
       .replace(/__([^_]+)__/g, '$1')
       .replace(/_([^_]+)_/g, '$1')
-      // Remove markdown links [text](url)
       .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
-      // Remove inline code backticks
       .replace(/`([^`]+)`/g, '$1')
-      // Remove standalone backticks
       .replace(/`/g, '')
-      // Remove heading markers
       .replace(/^#+\s*/gm, '')
-      // Remove title="..." and similar attributes
       .replace(/\s*title=["'][^"']*["']/gi, '')
-      // Remove URLs (http, https, ftp)
       .replace(/https?:\/\/[^\s<>"{}|\\^`[\]]+/gi, '')
       .replace(/ftp:\/\/[^\s<>"{}|\\^`[\]]+/gi, '')
-      // Remove YAML-like patterns (key: value)
       .replace(/\b\w+:\s*["']?[^"'\s,]+["']?(?=\s|,|$)/g, '')
-      // Remove common code syntax patterns
       .replace(/\b(const|let|var|function|interface|class|import|export|return|if|else)\b/g, '')
       .replace(/[=;{}()<>[\]]/g, ' ')
-      // Remove common unicode symbols
       .replace(/[✓✔✗✘→←↑↓•·►▸▹▶]/g, '')
-      // Remove YAML-like frontmatter patterns
       .replace(/^---[\s\S]*?---/m, '')
-      // Clean up navigation/menu text patterns
       .replace(/Skip to main content/gi, '')
       .replace(/On this page/gi, '')
       .replace(/Menu/gi, '')
       .replace(/Search\.\.\./gi, '')
-      // Remove list markers
       .replace(/^[\s]*[-*+]\s+/gm, '')
       .replace(/^[\s]*\d+\.\s+/gm, '')
-      // Clean up excessive whitespace
       .replace(/\s+/g, ' ')
-      // Remove leading/trailing punctuation
       .replace(/^[.\s,;:]+/, '')
       .replace(/[.\s,;:]+$/, '')
       .trim();
@@ -586,12 +517,10 @@ class SearchManager {
   updateSelection(newIndex) {
     const resultElements = this.resultsContainer.querySelectorAll('.search-result');
 
-    // Remove previous selection
     if (this.selectedIndex >= 0 && resultElements[this.selectedIndex]) {
       resultElements[this.selectedIndex].setAttribute('aria-selected', 'false');
     }
 
-    // Add new selection
     this.selectedIndex = newIndex;
     if (resultElements[newIndex]) {
       resultElements[newIndex].setAttribute('aria-selected', 'true');
@@ -666,14 +595,10 @@ class SearchManager {
   }
 }
 
-/**
- * Initialize search on page load
- */
 function initializeSearch() {
   new SearchManager();
 }
 
-// Initialize on DOM ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initializeSearch);
 } else {

data/lib/docyard/templates/assets/js/components/sidebar-toggle.js

@@ -0,0 +1,29 @@
+(function() {
+  'use strict';
+
+  var STORAGE_KEY = 'docyard_sidebar_collapsed';
+
+  function initSidebarToggle() {
+    var toggle = document.querySelector('.breadcrumb-toggle');
+    var sidebar = document.querySelector('.sidebar');
+
+    if (!toggle || !sidebar) {
+      return;
+    }
+
+    var isCollapsed = document.documentElement.classList.contains('sidebar-collapsed');
+    toggle.setAttribute('aria-expanded', !isCollapsed);
+
+    toggle.addEventListener('click', function() {
+      var collapsed = document.documentElement.classList.toggle('sidebar-collapsed');
+      localStorage.setItem(STORAGE_KEY, collapsed);
+      toggle.setAttribute('aria-expanded', !collapsed);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebarToggle);
+  } else {
+    initSidebarToggle();
+  }
+})();

data/lib/docyard/templates/assets/js/components/tab-navigation.js

@@ -0,0 +1,145 @@
+(function() {
+  'use strict';
+
+  var tabIndicator;
+
+  function updateIndicator(activeTab) {
+    if (!activeTab || !tabIndicator) return;
+
+    var rect = activeTab.getBoundingClientRect();
+    var parentRect = activeTab.parentElement.getBoundingClientRect();
+    var inset = 4;
+
+    tabIndicator.style.left = (rect.left - parentRect.left + inset) + 'px';
+    tabIndicator.style.width = (rect.width - (inset * 2)) + 'px';
+  }
+
+  function showIndicator() {
+    if (tabIndicator) {
+      tabIndicator.classList.add('is-ready');
+    }
+  }
+
+  function initTabIndicator() {
+    tabIndicator = document.getElementById('tabIndicator');
+    var tabItems = document.querySelectorAll('.tab-item');
+
+    if (!tabIndicator || tabItems.length === 0) {
+      return;
+    }
+
+    var activeTab = document.querySelector('.tab-item.is-active');
+    if (activeTab) {
+      updateIndicator(activeTab);
+      tabIndicator.offsetHeight;
+      requestAnimationFrame(showIndicator);
+    }
+
+    window.addEventListener('resize', function() {
+      var active = document.querySelector('.tab-item.is-active');
+      if (active) {
+        updateIndicator(active);
+      }
+    });
+  }
+
+  // Handle cross-document view transitions
+  function initViewTransitions() {
+    if (!document.startViewTransition) return;
+
+    // Position indicator immediately when new page is revealed (before animation)
+    window.addEventListener('pagereveal', function(e) {
+      if (!e.viewTransition) return;
+
+      tabIndicator = document.getElementById('tabIndicator');
+      var activeTab = document.querySelector('.tab-item.is-active');
+
+      if (activeTab && tabIndicator) {
+        // Position and show indicator immediately so view transition can animate it
+        updateIndicator(activeTab);
+        tabIndicator.classList.add('is-ready');
+      }
+    });
+  }
+
+  function initNavMenu() {
+    var navMenuBtn = document.getElementById('navMenuBtn');
+    var navMenuOverlay = document.getElementById('navMenuOverlay');
+    var navMenuDropdown = document.getElementById('navMenuDropdown');
+
+    if (!navMenuBtn || !navMenuOverlay || !navMenuDropdown) {
+      return;
+    }
+
+    var scrollPosition = 0;
+
+    function lockBodyScroll() {
+      scrollPosition = window.pageYOffset;
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollPosition + 'px';
+      document.body.style.width = '100%';
+    }
+
+    function unlockBodyScroll() {
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('position');
+      document.body.style.removeProperty('top');
+      document.body.style.removeProperty('width');
+      window.scrollTo(0, scrollPosition);
+    }
+
+    function openDropdown() {
+      lockBodyScroll();
+      navMenuOverlay.classList.add('is-visible');
+      navMenuDropdown.classList.add('is-open');
+      navMenuBtn.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeDropdown() {
+      navMenuOverlay.classList.remove('is-visible');
+      navMenuDropdown.classList.remove('is-open');
+      navMenuBtn.setAttribute('aria-expanded', 'false');
+      unlockBodyScroll();
+    }
+
+    function toggleDropdown() {
+      if (navMenuDropdown.classList.contains('is-open')) {
+        closeDropdown();
+      } else {
+        openDropdown();
+      }
+    }
+
+    navMenuBtn.addEventListener('click', toggleDropdown);
+    navMenuOverlay.addEventListener('click', closeDropdown);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && navMenuDropdown.classList.contains('is-open')) {
+        closeDropdown();
+      }
+    });
+
+    navMenuDropdown.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', closeDropdown);
+    });
+
+    window.addEventListener('resize', function() {
+      if (window.innerWidth > 1024) {
+        closeDropdown();
+      }
+    });
+  }
+
+  function init() {
+    initViewTransitions();
+    initTabIndicator();
+    initNavMenu();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();