docyard 0.3.0 → 0.4.0

data/lib/docyard/sidebar/renderer.rb

@@ -7,10 +7,11 @@ module Docyard
     class Renderer
       PARTIALS_PATH = File.join(__dir__, "../templates/partials")
 
-      attr_reader :site_title
+      attr_reader :site_title, :base_url
 
-      def initialize(site_title: "Documentation")
+      def initialize(site_title: "Documentation", base_url: "/")
         @site_title = site_title
+        @base_url = normalize_base_url(base_url)
       end
 
       def render(tree)
@@ -34,8 +35,21 @@ module Docyard
         ERB.new(template).result(erb_binding)
       end
 
-      def icon(name)
-        render_partial(:icons, icon_name: name)
+      def icon(name, weight = "regular")
+        Icons.render(name.to_s.tr("_", "-"), weight) || ""
+      end
+
+      def link_path(path)
+        return path if path.nil? || path.start_with?("http://", "https://")
+
+        "#{base_url.chomp('/')}#{path}"
+      end
+
+      def normalize_base_url(url)
+        return "/" if url.nil? || url.empty?
+
+        url = "/#{url}" unless url.start_with?("/")
+        url.end_with?("/") ? url : "#{url}/"
       end
 
       def render_tree_with_sections(items)
@@ -98,12 +112,25 @@ module Docyard
       end
 
       def render_leaf_item(item)
-        render_partial(:nav_leaf, path: item[:path], title: item[:title], active: item[:active])
+        render_partial(
+          :nav_leaf,
+          path: item[:path],
+          title: item[:title],
+          active: item[:active],
+          icon: item[:icon],
+          target: item[:target]
+        )
       end
 
       def render_group_item(item)
         children_html = render_tree(item[:children])
-        render_partial(:nav_group, title: item[:title], children_html: children_html)
+        render_partial(
+          :nav_group,
+          title: item[:title],
+          children_html: children_html,
+          icon: item[:icon],
+          collapsed: item[:collapsed]
+        )
       end
     end
   end

data/lib/docyard/sidebar_builder.rb

@@ -4,6 +4,7 @@ require_relative "sidebar/file_system_scanner"
 require_relative "sidebar/title_extractor"
 require_relative "sidebar/tree_builder"
 require_relative "sidebar/renderer"
+require_relative "sidebar/config_parser"
 
 module Docyard
   class SidebarBuilder
@@ -26,10 +27,44 @@ module Docyard
     private
 
     def build_tree
+      if config_sidebar_items?
+        build_tree_from_config
+      else
+        build_tree_from_filesystem
+      end
+    end
+
+    def build_tree_from_config
+      config_parser.parse.map(&:to_h)
+    end
+
+    def build_tree_from_filesystem
       file_items = scanner.scan
       tree_builder.build(file_items)
     end
 
+    def config_sidebar_items?
+      config_sidebar_items&.any?
+    end
+
+    def config_sidebar_items
+      return [] unless config
+
+      if config.is_a?(Hash)
+        config.dig("sidebar", "items") || config.dig(:sidebar, :items) || []
+      else
+        config.sidebar&.items || []
+      end
+    end
+
+    def config_parser
+      @config_parser ||= Sidebar::ConfigParser.new(
+        config_sidebar_items,
+        docs_path: docs_path,
+        current_path: current_path
+      )
+    end
+
     def scanner
       @scanner ||= Sidebar::FileSystemScanner.new(docs_path)
     end
@@ -43,10 +78,19 @@ module Docyard
 
     def renderer
       @renderer ||= Sidebar::Renderer.new(
-        site_title: extract_site_title
+        site_title: extract_site_title,
+        base_url: extract_base_url
       )
     end
 
+    def extract_base_url
+      if config.is_a?(Hash)
+        config.dig(:build, :base_url) || "/"
+      else
+        config&.build&.base_url || "/"
+      end
+    end
+
     def extract_site_title
       if config.is_a?(Hash)
         config[:site_title] || "Documentation"

data/lib/docyard/templates/assets/css/components/callout.css

@@ -6,7 +6,7 @@
   margin: var(--space-6) 0;
   border: 1px solid;
   border-radius: var(--radius-lg);
-  transition: all var(--transition-base);
+  transition: border-color var(--transition-base), background-color var(--transition-base);
 }
 
 .docyard-callout__icon {

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

@@ -47,7 +47,7 @@
   background-color: var(--color-bg);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all var(--transition-base);
+  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
   opacity: 0;
   visibility: hidden;
 }
@@ -78,7 +78,7 @@
 .docyard-code-block__copy svg {
   width: 16px;
   height: 16px;
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
 /* Success state */

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

@@ -53,13 +53,15 @@
 }
 
 .sidebar nav a {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   padding: 0.5rem var(--space-3);
   font-size: 0.875rem;
   color: var(--color-text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast);
   line-height: 1.4;
   font-weight: var(--font-weight-medium);
 }
@@ -148,7 +150,7 @@
   color: var(--color-text-secondary);
   text-decoration: none;
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: color var(--transition-fast);
   line-height: 1.4;
   font-weight: var(--font-weight-medium);
   background: none;
@@ -157,6 +159,13 @@
   cursor: pointer;
 }
 
+.nav-group-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+}
+
 .nav-group-toggle:hover {
   color: var(--color-text);
 }
@@ -167,14 +176,18 @@
 }
 
 .nav-group-icon {
+  display: inline-flex;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.nav-group-icon .docyard-icon {
   width: 1rem;
   height: 1rem;
-  color: var(--color-text-tertiary);
   transition: transform var(--transition-fast);
-  flex-shrink: 0;
 }
 
-.nav-group-toggle[aria-expanded="true"] .nav-group-icon {
+.nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
   transform: rotate(90deg);
 }
 
@@ -225,7 +238,7 @@
   text-decoration: none;
   padding: var(--space-2);
   border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast);
 }
 
 .sidebar-footer-link:hover {
@@ -256,3 +269,48 @@
   transition: opacity var(--transition-fast);
   flex-shrink: 0;
 }
+
+/* Icon styling */
+.nav-item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.nav-item-icon .docyard-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.nav-item-text {
+  flex: 1;
+}
+
+.nav-item-external {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.nav-item-external .docyard-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar nav a,
+  .nav-group-toggle,
+  .nav-group-icon .docyard-icon,
+  .nav-group-children,
+  .mobile-menu-toggle,
+  .sidebar-footer-link,
+  .external-icon {
+    transition: none;
+  }
+
+  .nav-group-toggle[aria-expanded="true"] .nav-group-icon .docyard-icon {
+    transform: none;
+  }
+}

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

@@ -62,7 +62,7 @@
   font-family: var(--font-sans);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease;
   position: relative;
   white-space: nowrap;
   flex-shrink: 0;
@@ -280,7 +280,8 @@
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  .docyard-tabs__tab {
+  .docyard-tabs__tab,
+  .docyard-tabs__indicator {
     transition: none;
   }
 }

data/lib/docyard/templates/assets/css/components/theme-toggle.css

@@ -59,3 +59,11 @@
 .dark .theme-toggle-thumb {
   transform: translateX(1.5rem);
 }
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .theme-toggle-track,
+  .theme-toggle-thumb {
+    transition: none;
+  }
+}

data/lib/docyard/templates/assets/css/markdown.css

@@ -72,43 +72,52 @@
 }
 
 /* Tables */
+.content .table-wrapper {
+  margin: var(--space-6) 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
 .content table {
   width: 100%;
-  margin: var(--space-6) 0;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
-  display: block;
-  overflow-x: auto;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  margin: 0;
 }
 
 .content thead {
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-bg-tertiary);
 }
 
 .content th {
   padding: var(--space-3) var(--space-4);
   text-align: left;
   font-weight: var(--font-weight-semibold);
-  border-bottom: 1px solid var(--color-border);
   color: var(--color-text);
+  border-bottom: 2px solid var(--color-border);
+  white-space: nowrap;
 }
 
 .content td {
   padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--color-border-secondary);
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
 }
 
-.content tr:last-child td {
-  border-bottom: none;
+.content tbody tr {
+  transition: background-color var(--transition-fast);
 }
 
 .content tbody tr:hover {
   background-color: var(--color-bg-secondary);
 }
 
+.content tbody tr:last-child td {
+  border-bottom: none;
+}
+
 /* Images */
 .content img {
   max-width: 100%;

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

@@ -0,0 +1,221 @@
+// Docyard Navigation JavaScript
+// Handles sidebar navigation, mobile menu, accordion groups, and scroll behavior
+
+(function() {
+  'use strict';
+
+  function initMobileMenu() {
+    const toggle = document.querySelector('.secondary-header-menu');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.querySelector('.mobile-overlay');
+
+    if (!toggle || !sidebar || !overlay) return;
+
+    function openMenu() {
+      sidebar.classList.add('is-open');
+      overlay.classList.add('is-visible');
+      toggle.setAttribute('aria-expanded', 'true');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeMenu() {
+      sidebar.classList.remove('is-open');
+      overlay.classList.remove('is-visible');
+      toggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    }
+
+    function toggleMenu() {
+      if (sidebar.classList.contains('is-open')) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    }
+
+    toggle.addEventListener('click', toggleMenu);
+    overlay.addEventListener('click', closeMenu);
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
+        closeMenu();
+      }
+    });
+
+    sidebar.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', closeMenu);
+    });
+  }
+
+  function initAccordion() {
+    const toggles = document.querySelectorAll('.nav-group-toggle');
+
+    toggles.forEach(function(toggle) {
+      toggle.addEventListener('click', function() {
+        const expanded = toggle.getAttribute('aria-expanded') === 'true';
+        const children = toggle.nextElementSibling;
+
+        if (!children || !children.classList.contains('nav-group-children')) {
+          return;
+        }
+
+        toggle.setAttribute('aria-expanded', !expanded);
+        children.classList.toggle('collapsed');
+
+        if (expanded) {
+          children.style.maxHeight = '0';
+        } else {
+          children.style.maxHeight = children.scrollHeight + 'px';
+        }
+      });
+    });
+
+    document.querySelectorAll('.nav-group-children.collapsed').forEach(function(el) {
+      el.style.maxHeight = '0';
+    });
+  }
+
+  function expandActiveGroups() {
+    const activeLinks = document.querySelectorAll('a.active');
+
+    activeLinks.forEach(function(activeLink) {
+      let parent = activeLink.closest('.nav-group-children');
+
+      while (parent) {
+        if (parent.classList.contains('nav-group-children')) {
+          parent.classList.remove('collapsed');
+
+          const toggle = parent.previousElementSibling;
+          if (toggle && toggle.classList.contains('nav-group-toggle')) {
+            toggle.setAttribute('aria-expanded', 'true');
+
+            parent.style.maxHeight = 'none';
+            const height = parent.scrollHeight;
+            parent.style.maxHeight = height + 'px';
+          }
+        }
+
+        parent = parent.parentElement?.closest('.nav-group-children');
+      }
+    });
+  }
+
+  function initSidebarScroll() {
+    const scrollContainer = document.querySelector('.sidebar nav');
+    if (!scrollContainer) return;
+
+    const STORAGE_KEY = 'docyard_sidebar_scroll';
+    const savedPosition = sessionStorage.getItem(STORAGE_KEY);
+
+    if (savedPosition) {
+      const position = parseInt(savedPosition, 10);
+      scrollContainer.scrollTop = position;
+
+      setTimeout(function() {
+        scrollContainer.scrollTop = position;
+      }, 100);
+    } else {
+      const activeLink = scrollContainer.querySelector('a.active');
+      if (activeLink) {
+        setTimeout(function() {
+          activeLink.scrollIntoView({
+            behavior: 'instant',
+            block: 'center'
+          });
+        }, 50);
+      }
+    }
+
+    scrollContainer.querySelectorAll('a').forEach(function(link) {
+      link.addEventListener('click', function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      });
+    });
+
+    let scrollTimeout;
+    scrollContainer.addEventListener('scroll', function() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function() {
+        sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
+      }, 150);
+    });
+
+    const logo = document.querySelector('.header-logo');
+    if (logo) {
+      logo.addEventListener('click', function() {
+        sessionStorage.removeItem(STORAGE_KEY);
+        scrollContainer.scrollTop = 0;
+      });
+    }
+  }
+
+  function initScrollBehavior() {
+    const header = document.querySelector('.header');
+    const secondaryHeader = document.querySelector('.secondary-header');
+
+    if (!header || !secondaryHeader) return;
+
+    let lastScrollTop = 0;
+    let ticking = false;
+
+    function isMobile() {
+      return window.innerWidth <= 1024;
+    }
+
+    function updateHeaders() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+        ticking = false;
+        return;
+      }
+
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      if (scrollTop > lastScrollTop && scrollTop > 100) {
+        header.classList.add('hide-on-scroll');
+        secondaryHeader.classList.add('shift-up');
+      } else if (scrollTop < lastScrollTop) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+      }
+
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+      ticking = false;
+    }
+
+    window.addEventListener('scroll', function() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateHeaders);
+        ticking = true;
+      }
+    });
+
+    window.addEventListener('resize', function() {
+      if (!isMobile()) {
+        header.classList.remove('hide-on-scroll');
+        secondaryHeader.classList.remove('shift-up');
+      }
+    });
+  }
+
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      initMobileMenu();
+      initAccordion();
+      expandActiveGroups();
+      initSidebarScroll();
+      initScrollBehavior();
+    });
+  } else {
+    initMobileMenu();
+    initAccordion();
+    expandActiveGroups();
+    initSidebarScroll();
+    initScrollBehavior();
+  }
+})();