cano 0.8.0

High-performance orchestration engine for building resilient, self-healing systems in Rust. Uses Finite State Machines (FSM) for strict, type-safe transitions.
Documentation
document.addEventListener('DOMContentLoaded', () => {
  // --------------------------------------------------------------------------
  // Mermaid initialization
  // --------------------------------------------------------------------------
  if (window.mermaid) {
    mermaid.initialize({
      startOnLoad: true,
      theme: 'dark',
      securityLevel: 'loose',
      fontFamily: 'Outfit, sans-serif'
    });
  }

  // --------------------------------------------------------------------------
  // DOM references
  // --------------------------------------------------------------------------
  const menuToggle = document.getElementById('menu-toggle');
  const sidebar = document.querySelector('.sidebar');
  const overlay = document.querySelector('.sidebar-overlay');

  // --------------------------------------------------------------------------
  // Mobile menu toggle
  // --------------------------------------------------------------------------
  function openSidebar() {
    if (!sidebar) return;
    sidebar.classList.add('open');
    if (overlay) overlay.classList.add('visible');
    if (menuToggle) menuToggle.setAttribute('aria-expanded', 'true');
    if (menuToggle) menuToggle.innerHTML = '✕';
  }

  function closeSidebar() {
    if (!sidebar) return;
    sidebar.classList.remove('open');
    if (overlay) overlay.classList.remove('visible');
    if (menuToggle) menuToggle.setAttribute('aria-expanded', 'false');
    if (menuToggle) menuToggle.innerHTML = '☰';
  }

  if (menuToggle) {
    menuToggle.addEventListener('click', () => {
      if (sidebar && sidebar.classList.contains('open')) {
        closeSidebar();
      } else {
        openSidebar();
      }
    });
  }

  // Close sidebar when clicking overlay
  if (overlay) {
    overlay.addEventListener('click', closeSidebar);
  }

  // Close sidebar when clicking outside on mobile (fallback if no overlay)
  document.addEventListener('click', (e) => {
    if (window.innerWidth <= 768 && sidebar && sidebar.classList.contains('open')) {
      if (!sidebar.contains(e.target) && menuToggle && !menuToggle.contains(e.target)) {
        closeSidebar();
      }
    }
  });

  // Close sidebar on Escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && sidebar && sidebar.classList.contains('open')) {
      closeSidebar();
      if (menuToggle) menuToggle.focus();
    }
  });

  // --------------------------------------------------------------------------
  // Active nav link highlighting
  // --------------------------------------------------------------------------
  const currentPath = window.location.pathname;
  const currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1) || 'index.html';

  const navLinks = document.querySelectorAll('.nav-links a');
  navLinks.forEach((link) => {
    const href = link.getAttribute('href');
    if (href === currentPage) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });

  // --------------------------------------------------------------------------
  // Entrance animations (staggered fade-in for hero/feature elements)
  // --------------------------------------------------------------------------
  const animateElements = document.querySelectorAll('.animate-in');
  if (animateElements.length > 0) {
    // Use IntersectionObserver for elements below the fold
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.style.animationPlayState = 'running';
              observer.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
      );

      animateElements.forEach((el) => {
        // Only observe elements that aren't already visible above fold
        const rect = el.getBoundingClientRect();
        if (rect.top > window.innerHeight) {
          el.style.animationPlayState = 'paused';
          observer.observe(el);
        }
      });
    }
  }

  // --------------------------------------------------------------------------
  // External link handling — open in new tab
  // --------------------------------------------------------------------------
  document.querySelectorAll('a[href^="http"]').forEach((link) => {
    if (!link.hasAttribute('target')) {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    }
  });
});