docyard 0.8.0 → 1.0.0

data/lib/docyard/templates/assets/js/components/file-tree.js

@@ -0,0 +1,39 @@
+function initializeFileTrees() {
+  const fileTrees = document.querySelectorAll('.docyard-filetree');
+
+  fileTrees.forEach(tree => {
+    const folders = tree.querySelectorAll('.docyard-filetree__item--folder');
+
+    folders.forEach(folder => {
+      const entry = folder.querySelector(':scope > .docyard-filetree__entry');
+      const childList = folder.querySelector(':scope > .docyard-filetree__list');
+
+      if (!entry || !childList || childList.children.length === 0) return;
+
+      folder.classList.add('docyard-filetree__item--has-children');
+
+      entry.addEventListener('click', () => {
+        const isCollapsed = folder.classList.contains('docyard-filetree__item--collapsed');
+
+        folder.classList.toggle('docyard-filetree__item--collapsed');
+
+        const icon = entry.querySelector('i[class*="ph-"]');
+        if (icon) {
+          if (isCollapsed) {
+            icon.classList.remove('ph-folder');
+            icon.classList.add('ph-folder-open');
+          } else {
+            icon.classList.remove('ph-folder-open');
+            icon.classList.add('ph-folder');
+          }
+        }
+      });
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeFileTrees);
+} else {
+  initializeFileTrees();
+}

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

@@ -0,0 +1,72 @@
+(function() {
+  'use strict';
+
+  let lightbox = null;
+  let lightboxImg = null;
+
+  function createLightbox() {
+    if (lightbox) return;
+
+    lightbox = document.createElement('div');
+    lightbox.className = 'docyard-lightbox';
+    lightbox.innerHTML = `
+      <button class="docyard-lightbox-close" aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
+          <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
+        </svg>
+      </button>
+      <img src="" alt="">
+    `;
+
+    document.body.appendChild(lightbox);
+    lightboxImg = lightbox.querySelector('img');
+
+    lightbox.addEventListener('click', closeLightbox);
+    lightbox.querySelector('.docyard-lightbox-close').addEventListener('click', closeLightbox);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && lightbox.classList.contains('active')) {
+        closeLightbox();
+      }
+    });
+  }
+
+  function openLightbox(src, alt) {
+    createLightbox();
+    lightboxImg.src = src;
+    lightboxImg.alt = alt || '';
+    requestAnimationFrame(function() {
+      lightbox.classList.add('active');
+      document.body.style.overflow = 'hidden';
+    });
+  }
+
+  function closeLightbox(e) {
+    if (e && e.target === lightboxImg) return;
+    if (lightbox) {
+      lightbox.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+  }
+
+  function initLightbox() {
+    var contentImages = document.querySelectorAll('.content img');
+
+    contentImages.forEach(function(img) {
+      if (img.hasAttribute('data-no-zoom')) {
+        img.style.cursor = 'default';
+        return;
+      }
+
+      img.addEventListener('click', function() {
+        openLightbox(this.src, this.alt);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initLightbox);
+  } else {
+    initLightbox();
+  }
+})();

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

@@ -267,7 +267,7 @@
       scrollTimeout = setTimeout(function() {
         sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
       }, 150);
-    });
+    }, { passive: true });
 
     const logo = document.querySelector('.header-logo');
     if (logo) {
@@ -304,9 +304,9 @@
 
     updateFadeIndicators();
 
-    scrollContainer.addEventListener('scroll', updateFadeIndicators);
+    scrollContainer.addEventListener('scroll', updateFadeIndicators, { passive: true });
 
-    window.addEventListener('resize', updateFadeIndicators);
+    window.addEventListener('resize', updateFadeIndicators, { passive: true });
   }
 
   function initScrollBehavior() {

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

@@ -220,11 +220,11 @@ class SearchManager {
 
   async initPagefind() {
     try {
-      this.pagefind = await import('/pagefind/pagefind.js');
-      await this.pagefind.init();
+      this.pagefind = await import('/_docyard/pagefind/pagefind.js');
+      await this.pagefind.options({ baseUrl: '/' });
     } catch (error) {
       console.warn('Pagefind not available:', error);
-      this.showErrorState('Search is not available. Run "docyard build" to generate the search index.');
+      this.showErrorState('Search is not available. Run "docyard serve -s" to enable search.');
     }
   }
 

data/lib/docyard/templates/assets/js/components/table-of-contents.js

@@ -308,7 +308,7 @@ class TableOfContentsManager {
     };
 
     checkOverflow();
-    window.addEventListener('resize', checkOverflow);
+    window.addEventListener('resize', checkOverflow, { passive: true });
   }
 
   setupScrollFadeIndicators() {
@@ -343,11 +343,11 @@ class TableOfContentsManager {
     scrollContainer.addEventListener('scroll', () => {
       updateFadeIndicators();
       this.updateIndicator();
-    });
+    }, { passive: true });
     window.addEventListener('resize', () => {
       updateFadeIndicators();
       this.updateIndicator();
-    });
+    }, { passive: true });
   }
 
   
@@ -375,10 +375,16 @@ class TableOfContentsManager {
   }
 }
 
+function initializeTableOfContents() {
+  window.tocManager = new TableOfContentsManager();
+}
+
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
-    window.tocManager = new TableOfContentsManager();
-  });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeTableOfContents);
+  } else {
+    initializeTableOfContents();
+  }
 
   window.addEventListener('beforeunload', () => {
     if (window.tocManager) {

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

@@ -16,6 +16,7 @@ class TabsManager {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
+    this.handleTabSync = this.handleTabSync.bind(this);
 
     this.init();
   }
@@ -30,9 +31,12 @@ class TabsManager {
     this.loadPreference();
     this.attachEventListeners();
     this.activateTab(this.activeIndex, false);
-    this.updateIndicator();
+    this.updateIndicator(false);
 
     requestAnimationFrame(() => {
+      if (this.indicator) {
+        this.indicator.classList.add('is-ready');
+      }
       requestAnimationFrame(() => {
         this.updateScrollIndicators();
       });
@@ -63,6 +67,8 @@ class TabsManager {
     this.tabList.addEventListener('scroll', this.handleScroll);
 
     window.addEventListener('resize', this.handleResize);
+
+    window.addEventListener('docyard-tab-change', this.handleTabSync);
   }
 
   
@@ -70,7 +76,36 @@ class TabsManager {
     if (index === this.activeIndex) return;
 
     this.activateTab(index, true);
-    this.savePreference(index);
+    this.broadcastTabChange(index);
+  }
+
+  handleTabSync(event) {
+    if (event.detail.sourceId === this.groupId) return;
+
+    const tabName = event.detail.tabName;
+    const index = this.tabs.findIndex(tab =>
+      tab.getAttribute('data-tab-name') === tabName
+    );
+
+    if (index !== -1 && index !== this.activeIndex) {
+      this.activateTab(index, true);
+    }
+  }
+
+  broadcastTabChange(index) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    const tabName = this.tabs[index].getAttribute('data-tab-name');
+
+    try {
+      localStorage.setItem('docyard-preferred-pm', tabName);
+    } catch (error) {
+      // Silently fail if localStorage is unavailable
+    }
+
+    window.dispatchEvent(new CustomEvent('docyard-tab-change', {
+      detail: { tabName, sourceId: this.groupId }
+    }));
   }
 
   
@@ -92,6 +127,7 @@ class TabsManager {
     if (key === 'Home') {
       event.preventDefault();
       this.activateTab(0, true);
+      this.broadcastTabChange(0);
       this.tabs[0].focus();
     }
 
@@ -99,6 +135,7 @@ class TabsManager {
       event.preventDefault();
       const lastIndex = this.tabs.length - 1;
       this.activateTab(lastIndex, true);
+      this.broadcastTabChange(lastIndex);
       this.tabs[lastIndex].focus();
     }
   }
@@ -153,22 +190,20 @@ class TabsManager {
     });
 
     this.updateIndicator(animate);
-
-    if (previousIndex !== index) {
-      this.savePreference(index);
-    }
   }
 
   
   activateNextTab() {
     const nextIndex = (this.activeIndex + 1) % this.tabs.length;
     this.activateTab(nextIndex, true);
+    this.broadcastTabChange(nextIndex);
   }
 
-  
+
   activatePreviousTab() {
     const prevIndex = (this.activeIndex - 1 + this.tabs.length) % this.tabs.length;
     this.activateTab(prevIndex, true);
+    this.broadcastTabChange(prevIndex);
   }
 
   
@@ -227,7 +262,7 @@ class TabsManager {
       if (!preferredTab) return;
 
       const index = this.tabs.findIndex(tab =>
-        tab.textContent.trim().toLowerCase() === preferredTab.toLowerCase()
+        tab.getAttribute('data-tab-name') === preferredTab
       );
 
       if (index !== -1) {
@@ -238,22 +273,9 @@ class TabsManager {
     }
   }
 
-  
-  savePreference(index) {
-    if (index < 0 || index >= this.tabs.length) return;
-
-    try {
-      const tabName = this.tabs[index].textContent.trim().toLowerCase();
-      localStorage.setItem('docyard-preferred-pm', tabName);
-    } catch (error) {
-      console.warn('Could not save tab preference:', error);
-    }
-  }
-
-  
   activateTabByName(name) {
     const index = this.tabs.findIndex(tab =>
-      tab.textContent.trim().toLowerCase() === name.toLowerCase()
+      tab.getAttribute('data-tab-name') === name.toLowerCase()
     );
 
     if (index !== -1) {
@@ -270,6 +292,7 @@ class TabsManager {
     this.tabList.removeEventListener('keydown', this.handleKeyDown);
     this.tabList.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('docyard-tab-change', this.handleTabSync);
 
     if (this.resizeTimeout) {
       cancelAnimationFrame(this.resizeTimeout);

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

@@ -0,0 +1,118 @@
+function initializeTooltips() {
+  const tooltips = document.querySelectorAll('.docyard-tooltip');
+  if (tooltips.length === 0) return;
+
+  const popover = createTooltipPopover();
+  document.body.appendChild(popover);
+
+  let hideTimeout;
+  let isHoveringPopover = false;
+
+  popover.addEventListener('mouseenter', () => {
+    isHoveringPopover = true;
+    clearTimeout(hideTimeout);
+  }, { passive: true });
+
+  popover.addEventListener('mouseleave', () => {
+    isHoveringPopover = false;
+    hideTimeout = setTimeout(() => {
+      hideTooltipPopover(popover);
+    }, 100);
+  }, { passive: true });
+
+  tooltips.forEach(tooltip => {
+    tooltip.addEventListener('mouseenter', () => {
+      clearTimeout(hideTimeout);
+      showTooltipPopover(popover, tooltip);
+    }, { passive: true });
+
+    tooltip.addEventListener('mouseleave', () => {
+      hideTimeout = setTimeout(() => {
+        if (!isHoveringPopover) {
+          hideTooltipPopover(popover);
+        }
+      }, 100);
+    }, { passive: true });
+  });
+}
+
+function createTooltipPopover() {
+  const popover = document.createElement('div');
+  popover.className = 'docyard-tooltip-popover';
+  popover.innerHTML = `
+    <span class="docyard-tooltip-popover__term"></span>
+    <span class="docyard-tooltip-popover__description"></span>
+    <a class="docyard-tooltip-popover__link" style="display: none;">
+      <span class="docyard-tooltip-popover__link-text"></span>
+      <svg class="docyard-tooltip-popover__link-icon" viewBox="0 0 256 256" fill="currentColor">
+        <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69l-58.35-58.34a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
+      </svg>
+    </a>
+  `;
+  return popover;
+}
+
+function showTooltipPopover(popover, tooltip) {
+  const term = tooltip.textContent;
+  const description = tooltip.dataset.description;
+  const link = tooltip.dataset.link;
+  const linkText = tooltip.dataset.linkText;
+
+  popover.querySelector('.docyard-tooltip-popover__term').textContent = term;
+  popover.querySelector('.docyard-tooltip-popover__description').textContent = description;
+
+  const linkEl = popover.querySelector('.docyard-tooltip-popover__link');
+  if (link) {
+    linkEl.href = link;
+    linkEl.querySelector('.docyard-tooltip-popover__link-text').textContent = linkText;
+    linkEl.style.display = 'inline-flex';
+  } else {
+    linkEl.style.display = 'none';
+  }
+
+  const rect = tooltip.getBoundingClientRect();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+
+  popover.style.visibility = 'hidden';
+  popover.classList.add('is-visible');
+
+  requestAnimationFrame(() => {
+    const popoverRect = popover.getBoundingClientRect();
+    let left = rect.left + scrollX + (rect.width / 2) - (popoverRect.width / 2);
+    let top = rect.top + scrollY - popoverRect.height - 8;
+
+    const viewportWidth = window.innerWidth;
+    const padding = 16;
+
+    if (left < padding) {
+      left = padding;
+    } else if (left + popoverRect.width > viewportWidth - padding) {
+      left = viewportWidth - popoverRect.width - padding;
+    }
+
+    if (top < scrollY + padding) {
+      top = rect.bottom + scrollY + 8;
+      popover.classList.add('is-below');
+    } else {
+      popover.classList.remove('is-below');
+    }
+
+    const arrowLeft = rect.left + scrollX + (rect.width / 2) - left;
+    popover.style.setProperty('--arrow-left', `${Math.max(12, Math.min(arrowLeft, popoverRect.width - 12))}px`);
+
+    popover.style.left = `${left}px`;
+    popover.style.top = `${top}px`;
+    popover.style.visibility = 'visible';
+  });
+}
+
+function hideTooltipPopover(popover) {
+  popover.classList.remove('is-visible');
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeTooltips);
+} else {
+  initializeTooltips();
+}

data/lib/docyard/templates/assets/js/hot-reload.js

@@ -0,0 +1,44 @@
+(function() {
+  var ssePort = window.__DOCYARD_SSE_PORT__;
+  if (!ssePort) return;
+
+  var url = 'http://127.0.0.1:' + ssePort + '/';
+  var eventSource = new EventSource(url);
+
+  eventSource.addEventListener('reload', function(event) {
+    var data = JSON.parse(event.data);
+    if (data.type === 'content') {
+      console.log('[Docyard] Content updated');
+      reloadContent();
+    } else {
+      console.log('[Docyard] Full reload');
+      location.reload();
+    }
+  });
+
+  eventSource.onerror = function() {
+    eventSource.close();
+  };
+
+  function reloadContent() {
+    fetch(location.href)
+      .then(function(response) { return response.text(); })
+      .then(function(html) {
+        var parser = new DOMParser();
+        var newDoc = parser.parseFromString(html, 'text/html');
+        var newContent = newDoc.querySelector('.content');
+        var currentContent = document.querySelector('.content');
+
+        if (newContent && currentContent) {
+          currentContent.innerHTML = newContent.innerHTML;
+          if (window.Prism) window.Prism.highlightAll();
+          if (window.docyardTOC) window.docyardTOC.init();
+        } else {
+          location.reload();
+        }
+      })
+      .catch(function() {
+        location.reload();
+      });
+  }
+})();

data/lib/docyard/templates/errors/404.html.erb

@@ -4,13 +4,122 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>404 - Page Not Found</title>
-  <link rel="stylesheet" href="/_docyard/css/main.css">
+  <style>
+    @font-face {
+      font-family: 'Inter';
+      src: url('/_docyard/fonts/Inter-Variable.ttf') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :root {
+      --background: #ffffff;
+      --foreground: #0f0f10;
+      --muted-foreground: #71717a;
+      --border: #e4e4e7;
+      --primary: oklch(0.61 0.11 222);
+      --primary-foreground: oklch(0.98 0.02 201);
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: #09090b;
+      --foreground: #fafafa;
+      --muted-foreground: #a1a1aa;
+      --border: #27272a;
+      --primary: oklch(0.71 0.13 215);
+      --primary-foreground: oklch(0.30 0.05 230);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .error-page {
+      text-align: center;
+      max-width: 450px;
+    }
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: transparent;
+      -webkit-text-stroke: 2px var(--border);
+      line-height: 1;
+    }
+
+    .error-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 1rem 0 0.5rem;
+    }
+
+    .error-message {
+      color: var(--muted-foreground);
+      font-size: 0.9375rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-decoration: none;
+      border-radius: var(--radius);
+      background: var(--primary);
+      color: var(--primary-foreground);
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .error-code {
+        font-size: 5rem;
+      }
+    }
+  </style>
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') ||
+                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+    })();
+  </script>
 </head>
 <body>
-  <main>
-    <h1>404 - Page Not Found</h1>
-    <p>The page you're looking for doesn't exist.</p>
-    <p><a href="/">Go back home</a></p>
+  <main class="error-page">
+    <p class="error-code">404</p>
+    <h1 class="error-title">Page not found</h1>
+    <p class="error-message">This page doesn't exist or has been moved.</p>
+    <a href="/" class="btn">
+      <%= icon(:house_line) %>
+      Back to home
+    </a>
   </main>
 </body>
 </html>