docyard 0.8.0 → 0.9.0

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/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/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);
+  });
+
+  popover.addEventListener('mouseleave', () => {
+    isHoveringPopover = false;
+    hideTimeout = setTimeout(() => {
+      hideTooltipPopover(popover);
+    }, 100);
+  });
+
+  tooltips.forEach(tooltip => {
+    tooltip.addEventListener('mouseenter', () => {
+      clearTimeout(hideTimeout);
+      showTooltipPopover(popover, tooltip);
+    });
+
+    tooltip.addEventListener('mouseleave', () => {
+      hideTimeout = setTimeout(() => {
+        if (!isHoveringPopover) {
+          hideTooltipPopover(popover);
+        }
+      }, 100);
+    });
+  });
+}
+
+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/layouts/default.html.erb

@@ -4,6 +4,7 @@
   <%= render_partial('_head') %>
 </head>
 <body<%= ' class="has-tabs"' if @has_tabs %>>
+  <%= render_partial('_banner') %>
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <%= render_partial('_header') %>

data/lib/docyard/templates/layouts/splash.html.erb

@@ -4,6 +4,7 @@
   <%= render_partial('_head') %>
 </head>
 <body class="splash-page<%= ' has-sidebar' if @show_sidebar %><%= ' has-tabs' if @has_tabs %>">
+  <%= render_partial('_banner') %>
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <%= render_partial('_header') %>

data/lib/docyard/templates/partials/_accordion.html.erb

@@ -0,0 +1,9 @@
+<details class="docyard-accordion"<%= ' open' if @open %>>
+  <summary class="docyard-accordion__summary">
+    <span class="docyard-accordion__icon" aria-hidden="true"><%= @icon_svg %></span>
+    <span class="docyard-accordion__title"><%= @title %></span>
+  </summary>
+  <div class="docyard-accordion__content">
+    <%= @content_html %>
+  </div>
+</details>

data/lib/docyard/templates/partials/_banner.html.erb

@@ -0,0 +1,27 @@
+<% if @announcement %>
+<div class="docyard-announcement" data-dismissible="<%= @announcement[:dismissible] %>"<%= @announcement[:button] ? ' data-has-button="true"' : '' %>>
+  <div class="docyard-announcement__content">
+    <% if @announcement[:link] %>
+      <a href="<%= @announcement[:link] %>" class="docyard-announcement__link">
+        <span class="docyard-announcement__text"><%= @announcement[:text] %></span>
+        <%= icon("arrow-right") %>
+      </a>
+    <% else %>
+      <span class="docyard-announcement__text"><%= @announcement[:text] %></span>
+    <% end %>
+
+    <% if @announcement[:button] %>
+      <a href="<%= @announcement[:button][:link] %>" class="docyard-announcement__button">
+        <%= @announcement[:button][:text] %>
+      </a>
+    <% end %>
+  </div>
+
+  <% if @announcement[:dismissible] %>
+    <button class="docyard-announcement__dismiss" aria-label="Dismiss announcement">
+      <%= icon("x") %>
+    </button>
+  <% end %>
+</div>
+<script>document.body.classList.add('has-announcement');</script>
+<% end %>

data/lib/docyard/templates/partials/_card.html.erb

@@ -0,0 +1,23 @@
+<% if @href %>
+<a href="<%= @href %>" class="docyard-card">
+<% else %>
+<div class="docyard-card">
+<% end %>
+  <% if @icon_svg %>
+  <div class="docyard-card__icon">
+    <%= @icon_svg %>
+  </div>
+  <% end %>
+  <div class="docyard-card__content">
+    <h3 class="docyard-card__title"><%= @title %></h3>
+    <% unless @content_html.empty? %>
+    <div class="docyard-card__body">
+      <%= @content_html %>
+    </div>
+    <% end %>
+  </div>
+<% if @href %>
+</a>
+<% else %>
+</div>
+<% end %>

data/lib/docyard/templates/partials/_nav_group.html.erb

@@ -7,6 +7,9 @@
           <span class="nav-item-icon"><%= icon(@icon) %></span>
         <% end %>
         <span class="nav-item-text"><%= @title %></span>
+        <% if @badge %>
+          <span class="docyard-badge docyard-badge--<%= @badge_type || 'default' %>"><%= @badge %></span>
+        <% end %>
       </span>
       <span class="nav-group-icon"><%= icon(:caret_right) %></span>
     </a>
@@ -17,6 +20,9 @@
           <span class="nav-item-icon"><%= icon(@icon) %></span>
         <% end %>
         <span class="nav-item-text"><%= @title %></span>
+        <% if @badge %>
+          <span class="docyard-badge docyard-badge--<%= @badge_type || 'default' %>"><%= @badge %></span>
+        <% end %>
       </span>
       <span class="nav-group-icon"><%= icon(:caret_right) %></span>
     </button>

data/lib/docyard/templates/partials/_nav_leaf.html.erb

@@ -3,6 +3,9 @@
     <span class="nav-item-icon"><%= icon(@icon) %></span>
   <% end %>
   <span class="nav-item-text"><%= @title %></span>
+  <% if @badge %>
+    <span class="docyard-badge docyard-badge--<%= @badge_type || 'default' %>"><%= @badge %></span>
+  <% end %>
   <% if @target == "_blank" %>
     <span class="nav-item-external"><%= icon(:link_external) %></span>
   <% end %>

data/lib/docyard/templates/partials/_step.html.erb

@@ -0,0 +1,14 @@
+<div class="docyard-step<%= ' docyard-step--last' if @is_last %>">
+  <div class="docyard-step__indicator">
+    <span class="docyard-step__number"><%= @number %></span>
+    <% unless @is_last %><div class="docyard-step__connector"></div><% end %>
+  </div>
+  <div class="docyard-step__content">
+    <h3 class="docyard-step__title"><%= @title %></h3>
+    <% unless @content_html.empty? %>
+    <div class="docyard-step__body">
+      <%= @content_html %>
+    </div>
+    <% end %>
+  </div>
+</div>

data/lib/docyard/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Docyard
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end