docyard 0.7.0 → 0.9.0

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

@@ -0,0 +1,81 @@
+(function () {
+  var STORAGE_KEY = 'docyard-announcement-dismissed';
+
+  function initAnnouncement() {
+    var banner = document.querySelector('.docyard-announcement');
+    if (!banner) return;
+
+    var isDismissible = banner.dataset.dismissible === 'true';
+
+    if (isDismissible && isDismissed()) {
+      banner.style.display = 'none';
+      document.body.classList.remove('has-announcement');
+      return;
+    }
+
+    if (isDismissible) {
+      var dismissButton = banner.querySelector('.docyard-announcement__dismiss');
+      if (dismissButton) {
+        dismissButton.addEventListener('click', function () {
+          dismissAnnouncement(banner);
+        });
+      }
+    }
+
+    var actionLink = banner.querySelector('.docyard-announcement__link');
+    var actionButton = banner.querySelector('.docyard-announcement__button');
+
+    if (actionLink) {
+      actionLink.addEventListener('click', function () {
+        saveDismissed();
+      });
+    }
+
+    if (actionButton) {
+      actionButton.addEventListener('click', function () {
+        saveDismissed();
+      });
+    }
+  }
+
+  function saveDismissed() {
+    try {
+      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    } catch (e) {
+    }
+  }
+
+  function isDismissed() {
+    try {
+      var dismissed = localStorage.getItem(STORAGE_KEY);
+      if (!dismissed) return false;
+
+      var dismissedAt = parseInt(dismissed, 10);
+      var sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+
+      return dismissedAt > sevenDaysAgo;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function dismissAnnouncement(banner) {
+    banner.classList.add('is-dismissed');
+
+    try {
+      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    } catch (e) {
+    }
+
+    banner.addEventListener('animationend', function () {
+      banner.style.display = 'none';
+      document.body.classList.remove('has-announcement');
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAnnouncement);
+  } else {
+    initAnnouncement();
+  }
+})();

data/lib/docyard/templates/assets/js/components/code-block.js

@@ -1,13 +1,5 @@
-/**
- * CodeBlockManager - Manages code block copy functionality
- *
- * @class CodeBlockManager
- */
 class CodeBlockManager {
-  /**
-   * Create a CodeBlockManager instance
-   * @param {HTMLElement} container - The .docyard-code-block container element
-   */
+  
   constructor(container) {
     if (!container) return;
 
@@ -15,7 +7,9 @@ class CodeBlockManager {
     this.copyButton = container.querySelector('.docyard-code-block__copy');
     this.codeText = this.copyButton?.getAttribute('data-code') || '';
 
-    this.originalIcon = this.copyButton?.innerHTML || '';
+    this.iconElement = this.copyButton?.querySelector('.docyard-code-block__copy-icon');
+    this.textElement = this.copyButton?.querySelector('.docyard-code-block__copy-text');
+    this.originalIcon = this.iconElement?.innerHTML || '';
 
     this.checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>';
 
@@ -24,18 +18,14 @@ class CodeBlockManager {
     this.init();
   }
 
-  /**
-   * Initialize the code block component
-   */
+  
   init() {
     if (!this.copyButton) return;
 
     this.copyButton.addEventListener('click', this.handleCopy);
   }
 
-  /**
-   * Handle copy button click
-   */
+  
   async handleCopy() {
     try {
       await this.copyToClipboard(this.codeText);
@@ -46,11 +36,7 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Copy text to clipboard
-   * @param {string} text - Text to copy
-   * @returns {Promise<void>}
-   */
+  
   async copyToClipboard(text) {
     if (navigator.clipboard && window.isSecureContext) {
       await navigator.clipboard.writeText(text);
@@ -59,10 +45,7 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Fallback copy method for older browsers
-   * @param {string} text - Text to copy
-   */
+  
   fallbackCopy(text) {
     const textArea = document.createElement('textarea');
     textArea.value = text;
@@ -82,14 +65,17 @@ class CodeBlockManager {
     }
   }
 
-  /**
-   * Show success state
-   */
+  
   showSuccess() {
     this.copyButton.classList.add('is-success');
     this.copyButton.setAttribute('aria-label', 'Copied to clipboard!');
 
-    this.copyButton.innerHTML = this.checkIcon;
+    if (this.iconElement) {
+      this.iconElement.innerHTML = this.checkIcon;
+    }
+    if (this.textElement) {
+      this.textElement.textContent = 'Copied';
+    }
 
     if (this.resetTimeout) {
       clearTimeout(this.resetTimeout);
@@ -100,9 +86,7 @@ class CodeBlockManager {
     }, 2000);
   }
 
-  /**
-   * Show error state
-   */
+  
   showError() {
     this.copyButton.classList.add('is-error');
     this.copyButton.setAttribute('aria-label', 'Failed to copy');
@@ -116,19 +100,20 @@ class CodeBlockManager {
     }, 2000);
   }
 
-  /**
-   * Reset button to default state
-   */
+  
   resetState() {
     this.copyButton.classList.remove('is-success', 'is-error');
     this.copyButton.setAttribute('aria-label', 'Copy code to clipboard');
 
-    this.copyButton.innerHTML = this.originalIcon;
+    if (this.iconElement) {
+      this.iconElement.innerHTML = this.originalIcon;
+    }
+    if (this.textElement) {
+      this.textElement.textContent = 'Copy';
+    }
   }
 
-  /**
-   * Cleanup - remove event listeners
-   */
+  
   destroy() {
     if (this.copyButton) {
       this.copyButton.removeEventListener('click', this.handleCopy);
@@ -140,9 +125,6 @@ class CodeBlockManager {
   }
 }
 
-/**
- * Auto-initialize all code blocks on page load
- */
 function initializeCodeBlocks() {
   const codeBlocks = document.querySelectorAll('.docyard-code-block');
 

data/lib/docyard/templates/assets/js/components/code-group.js

@@ -0,0 +1,283 @@
+class CodeGroupManager {
+  constructor() {
+    this.groups = [];
+    this.init();
+  }
+
+  init() {
+    const containers = document.querySelectorAll('.docyard-code-group');
+    if (containers.length === 0) return;
+
+    containers.forEach(container => {
+      this.groups.push(new CodeGroup(container, this));
+    });
+
+    this.loadPreference();
+  }
+
+  syncTabs(label) {
+    this.groups.forEach(group => {
+      group.activateTabByLabel(label, true);
+    });
+    this.savePreference(label);
+  }
+
+  loadPreference() {
+    try {
+      const preferredTab = localStorage.getItem('docyard-code-group-tab');
+      if (!preferredTab) return;
+
+      this.groups.forEach(group => {
+        group.activateTabByLabel(preferredTab, false);
+      });
+    } catch (error) {
+      // localStorage not available
+    }
+  }
+
+  savePreference(label) {
+    try {
+      localStorage.setItem('docyard-code-group-tab', label.toLowerCase());
+    } catch (error) {
+      // localStorage not available
+    }
+  }
+}
+
+class CodeGroup {
+  constructor(container, manager) {
+    this.container = container;
+    this.manager = manager;
+    this.scrollContainer = container.querySelector('.docyard-code-group__tabs-scroll-container');
+    this.tabList = container.querySelector('[role="tablist"]');
+    this.tabs = Array.from(container.querySelectorAll('[role="tab"]'));
+    this.panels = Array.from(container.querySelectorAll('[role="tabpanel"]'));
+    this.indicator = container.querySelector('.docyard-code-group__indicator');
+    this.copyButton = container.querySelector('.docyard-code-group__copy');
+    this.activeIndex = 0;
+
+    this.checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>';
+
+    this.attachEventListeners();
+    this.updateIndicator();
+
+    requestAnimationFrame(() => {
+      this.updateScrollIndicators();
+    });
+  }
+
+  attachEventListeners() {
+    this.tabs.forEach((tab, index) => {
+      tab.addEventListener('click', () => this.handleTabClick(index));
+    });
+
+    this.tabList.addEventListener('keydown', (e) => this.handleKeyDown(e));
+    this.tabList.addEventListener('scroll', () => this.handleScroll());
+    window.addEventListener('resize', () => this.handleResize());
+
+    if (this.copyButton) {
+      this.copyButton.addEventListener('click', () => this.handleCopy());
+    }
+  }
+
+  handleScroll() {
+    if (this.scrollTimeout) {
+      cancelAnimationFrame(this.scrollTimeout);
+    }
+
+    this.scrollTimeout = requestAnimationFrame(() => {
+      this.updateScrollIndicators();
+    });
+  }
+
+  handleTabClick(index) {
+    if (index === this.activeIndex) return;
+
+    const label = this.tabs[index].dataset.label;
+    this.manager.syncTabs(label);
+  }
+
+  handleKeyDown(event) {
+    const { key } = event;
+
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+
+      if (key === 'ArrowLeft') {
+        this.activatePreviousTab();
+      } else {
+        this.activateNextTab();
+      }
+
+      this.tabs[this.activeIndex].focus();
+      const label = this.tabs[this.activeIndex].dataset.label;
+      this.manager.syncTabs(label);
+    }
+
+    if (key === 'Home') {
+      event.preventDefault();
+      this.activateTab(0, true);
+      this.tabs[0].focus();
+      const label = this.tabs[0].dataset.label;
+      this.manager.syncTabs(label);
+    }
+
+    if (key === 'End') {
+      event.preventDefault();
+      const lastIndex = this.tabs.length - 1;
+      this.activateTab(lastIndex, true);
+      this.tabs[lastIndex].focus();
+      const label = this.tabs[lastIndex].dataset.label;
+      this.manager.syncTabs(label);
+    }
+  }
+
+  handleResize() {
+    if (this.resizeTimeout) {
+      cancelAnimationFrame(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = requestAnimationFrame(() => {
+      this.updateIndicator(false);
+      this.updateScrollIndicators();
+    });
+  }
+
+  activateTab(index, animate = true) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    this.activeIndex = index;
+
+    this.tabs.forEach((tab, i) => {
+      const isActive = i === index;
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
+    });
+
+    this.panels.forEach((panel, i) => {
+      const isActive = i === index;
+      panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+    });
+
+    this.updateIndicator(animate);
+  }
+
+  activateTabByLabel(label, animate = true) {
+    const index = this.tabs.findIndex(tab =>
+      tab.dataset.label.toLowerCase() === label.toLowerCase()
+    );
+
+    if (index !== -1 && index !== this.activeIndex) {
+      this.activateTab(index, animate);
+    }
+  }
+
+  activateNextTab() {
+    const nextIndex = (this.activeIndex + 1) % this.tabs.length;
+    this.activateTab(nextIndex, true);
+  }
+
+  activatePreviousTab() {
+    const prevIndex = (this.activeIndex - 1 + this.tabs.length) % this.tabs.length;
+    this.activateTab(prevIndex, true);
+  }
+
+  updateIndicator(animate = true) {
+    if (!this.indicator || !this.tabs[this.activeIndex]) return;
+
+    const activeTab = this.tabs[this.activeIndex];
+    const tabListRect = this.tabList.getBoundingClientRect();
+    const activeTabRect = activeTab.getBoundingClientRect();
+
+    const left = activeTabRect.left - tabListRect.left + this.tabList.scrollLeft;
+    const width = activeTabRect.width;
+
+    this.indicator.style.width = `${width}px`;
+    this.indicator.style.transform = `translateX(${left}px)`;
+
+    if (!animate) {
+      this.indicator.style.transition = 'none';
+      void this.indicator.offsetWidth;
+      this.indicator.style.transition = '';
+    }
+  }
+
+  updateScrollIndicators() {
+    if (!this.tabList || !this.scrollContainer) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = this.tabList;
+    const hasOverflow = scrollWidth > clientWidth;
+
+    if (!hasOverflow) {
+      this.scrollContainer.classList.remove('can-scroll-left', 'can-scroll-right');
+      return;
+    }
+
+    const canScrollLeft = scrollLeft > 5;
+    this.scrollContainer.classList.toggle('can-scroll-left', canScrollLeft);
+
+    const canScrollRight = scrollLeft < scrollWidth - clientWidth - 5;
+    this.scrollContainer.classList.toggle('can-scroll-right', canScrollRight);
+  }
+
+  async handleCopy() {
+    const activePanel = this.panels[this.activeIndex];
+    if (!activePanel) return;
+
+    const codeText = activePanel.dataset.code || '';
+
+    try {
+      await this.copyToClipboard(codeText);
+      this.showCopySuccess();
+    } catch (error) {
+      console.warn('Failed to copy code:', error);
+    }
+  }
+
+  async copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+    }
+  }
+
+  showCopySuccess() {
+    if (!this.copyButton) return;
+
+    const iconEl = this.copyButton.querySelector('.docyard-code-group__copy-icon');
+    const textEl = this.copyButton.querySelector('.docyard-code-group__copy-text');
+
+    if (!iconEl || !textEl) return;
+
+    const originalIcon = iconEl.innerHTML;
+    const originalText = textEl.textContent;
+
+    iconEl.innerHTML = this.checkIcon;
+    textEl.textContent = 'Copied';
+    this.copyButton.classList.add('is-success');
+
+    setTimeout(() => {
+      iconEl.innerHTML = originalIcon;
+      textEl.textContent = originalText;
+      this.copyButton.classList.remove('is-success');
+    }, 2000);
+  }
+}
+
+function initializeCodeGroups() {
+  new CodeGroupManager();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeCodeGroups);
+} else {
+  initializeCodeGroups();
+}

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('.docyard-icon');
+        if (icon) {
+          if (isCollapsed) {
+            icon.classList.remove('docyard-icon-folder');
+            icon.classList.add('docyard-icon-folder-open');
+          } else {
+            icon.classList.remove('docyard-icon-folder-open');
+            icon.classList.add('docyard-icon-folder');
+          }
+        }
+      });
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeFileTrees);
+} else {
+  initializeFileTrees();
+}

data/lib/docyard/templates/assets/js/components/heading-anchor.js

@@ -1,7 +1,3 @@
-/**
- * HeadingAnchorManager handles anchor link interactions
- * Provides copy-to-clipboard functionality with visual feedback
- */
 class HeadingAnchorManager {
   constructor() {
     this.anchors = document.querySelectorAll('.heading-anchor');
@@ -14,11 +10,7 @@ class HeadingAnchorManager {
     });
   }
 
-  /**
-   * Handle anchor link click
-   * @param {Event} e - Click event
-   * @param {HTMLElement} anchor - Anchor element
-   */
+  
   handleClick(e, anchor) {
     e.preventDefault();
 
@@ -31,15 +23,32 @@ class HeadingAnchorManager {
 
     const heading = document.getElementById(headingId);
     if (heading) {
-      heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
+      window.scrollTo({
+        top: offsetTop,
+        behavior: 'smooth'
+      });
     }
   }
 
-  /**
-   * Copy text to clipboard with visual feedback
-   * @param {string} text - Text to copy
-   * @param {HTMLElement} anchor - Anchor element for feedback
-   */
+  getScrollOffset() {
+    const hasTabs = document.body.classList.contains('has-tabs');
+    const headerHeight = 64;
+    const tabBarHeight = hasTabs ? 48 : 0;
+    const buffer = 24;
+
+    if (window.innerWidth > 1024 && window.innerWidth <= 1280) {
+      return headerHeight + 48 + buffer;
+    }
+
+    if (window.innerWidth <= 1024) {
+      return headerHeight + 48 + buffer;
+    }
+
+    return headerHeight + tabBarHeight + buffer;
+  }
+
+  
   async copyToClipboard(text, anchor) {
     try {
       await navigator.clipboard.writeText(text);
@@ -50,10 +59,7 @@ class HeadingAnchorManager {
     }
   }
 
-  /**
-   * Fallback copy method for older browsers
-   * @param {string} text - Text to copy
-   */
+  
   fallbackCopyToClipboard(text) {
     const textarea = document.createElement('textarea');
     textarea.value = text;
@@ -65,11 +71,7 @@ class HeadingAnchorManager {
     document.body.removeChild(textarea);
   }
 
-  /**
-   * Show visual feedback on copy
-   * @param {HTMLElement} anchor - Anchor element
-   * @param {boolean} success - Whether copy succeeded
-   */
+  
   showFeedback(anchor, success) {
     const originalTitle = anchor.getAttribute('aria-label');
     anchor.setAttribute('aria-label', success ? 'Link copied!' : 'Failed to copy');

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();
+  }
+})();