docyard 1.1.0 → 1.2.0

data/lib/docyard/server/asset_handler.rb

@@ -8,8 +8,9 @@ module Docyard
     TEMPLATES_ASSETS_PATH = File.join(__dir__, "../templates", "assets")
     CACHE_MAX_AGE = 3600
     DEFAULT_PUBLIC_DIR = "docs/public"
+    DEFAULT_DOCS_PATH = "docs"
 
-    attr_reader :public_dir
+    attr_reader :public_dir, :docs_path
 
     CONTENT_TYPES = {
       ".css" => "text/css; charset=utf-8",
@@ -30,8 +31,9 @@ module Docyard
       ".webm" => "video/webm"
     }.freeze
 
-    def initialize(public_dir: DEFAULT_PUBLIC_DIR)
+    def initialize(public_dir: DEFAULT_PUBLIC_DIR, docs_path: DEFAULT_DOCS_PATH)
       @public_dir = public_dir
+      @docs_path = docs_path
     end
 
     def serve_docyard_assets(request_path)
@@ -39,6 +41,8 @@ module Docyard
 
       return serve_components_css if asset_path == "css/components.css"
       return serve_components_js if asset_path == "js/components.js"
+      return serve_custom_css if asset_path == "css/custom.css"
+      return serve_custom_js if asset_path == "js/custom.js"
 
       file_path = safe_asset_path(asset_path, TEMPLATES_ASSETS_PATH)
       return forbidden_response unless file_path
@@ -94,6 +98,28 @@ module Docyard
       [200, headers, [content]]
     end
 
+    def serve_custom_css
+      custom_path = File.join(docs_path, "_custom", "styles.css")
+      return not_found_response unless File.exist?(custom_path)
+
+      content = File.read(custom_path)
+      headers = build_cache_headers(content, File.mtime(custom_path))
+      headers["Content-Type"] = "text/css; charset=utf-8"
+
+      [200, headers, [content]]
+    end
+
+    def serve_custom_js
+      custom_path = File.join(docs_path, "_custom", "scripts.js")
+      return not_found_response unless File.exist?(custom_path)
+
+      content = File.read(custom_path)
+      headers = build_cache_headers(content, File.mtime(custom_path))
+      headers["Content-Type"] = "application/javascript; charset=utf-8"
+
+      [200, headers, [content]]
+    end
+
     def concatenate_component_js
       components_dir = File.join(TEMPLATES_ASSETS_PATH, "js", "components")
       return "" unless Dir.exist?(components_dir)

data/lib/docyard/server/dev_server.rb

@@ -111,6 +111,7 @@ module Docyard
       message = case change_type
                 when :content then "Content changed, reloading..."
                 when :full then "Config changed, full reload..."
+                when :css then "CSS changed, injecting styles..."
                 when :asset then "Asset changed, reloading..."
                 else "File changed, reloading..."
                 end

data/lib/docyard/server/file_watcher.rb

@@ -7,7 +7,8 @@ module Docyard
     DEBOUNCE_DELAY = 0.1
     CONFIG_FILES = %w[docyard.yml _sidebar.yml].freeze
     CONTENT_EXTENSIONS = %w[.md .markdown].freeze
-    ASSET_EXTENSIONS = %w[.css .js .html .erb].freeze
+    CSS_EXTENSIONS = %w[.css].freeze
+    ASSET_EXTENSIONS = %w[.js .html .erb].freeze
 
     def initialize(docs_path:, on_change:)
       @docs_path = File.expand_path(docs_path)
@@ -15,7 +16,7 @@ module Docyard
       @on_change = on_change
       @docs_listener = nil
       @config_listener = nil
-      @pending_changes = { content: false, config: false, asset: false }
+      @pending_changes = { content: false, config: false, css: false, asset: false }
       @debounce_timer = nil
       @mutex = Mutex.new
     end
@@ -51,12 +52,15 @@ module Docyard
 
     def categorize_change(path)
       filename = File.basename(path)
+      extension = File.extname(path)
 
       if CONFIG_FILES.include?(filename)
         @pending_changes[:config] = true
-      elsif CONTENT_EXTENSIONS.include?(File.extname(path))
+      elsif CONTENT_EXTENSIONS.include?(extension)
         @pending_changes[:content] = true
-      elsif ASSET_EXTENSIONS.include?(File.extname(path))
+      elsif CSS_EXTENSIONS.include?(extension)
+        @pending_changes[:css] = true
+      elsif ASSET_EXTENSIONS.include?(extension)
         @pending_changes[:asset] = true
       end
     end
@@ -73,7 +77,7 @@ module Docyard
       changes = nil
       @mutex.synchronize do
         changes = @pending_changes.dup
-        @pending_changes = { content: false, config: false, asset: false }
+        @pending_changes = { content: false, config: false, css: false, asset: false }
       end
 
       change_type = determine_change_type(changes)
@@ -83,6 +87,7 @@ module Docyard
     def determine_change_type(changes)
       return :full if changes[:config]
       return :content if changes[:content]
+      return :css if changes[:css]
       return :asset if changes[:asset]
 
       nil

data/lib/docyard/server/rack_application.rb

@@ -28,7 +28,7 @@ module Docyard
       @router = Router.new(docs_path: docs_path)
       @renderer = Renderer.new(base_url: "/", config: config, dev_mode: @dev_mode,
                                sse_port: sse_port)
-      @asset_handler = AssetHandler.new(public_dir: config&.public_dir || "docs/public")
+      @asset_handler = AssetHandler.new(public_dir: config&.public_dir || "docs/public", docs_path: docs_path)
       @pagefind_handler = PagefindHandler.new(pagefind_path: pagefind_path, config: config)
       @page_diagnostics = PageDiagnostics.new(docs_path) if @dev_mode
     end

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

@@ -35,12 +35,6 @@
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.705 0.015 286.067);
 
-  --chart-1: oklch(0.87 0.12 207);
-  --chart-2: oklch(0.80 0.13 212);
-  --chart-3: oklch(0.71 0.13 215);
-  --chart-4: oklch(0.61 0.11 222);
-  --chart-5: oklch(0.52 0.09 223);
-
   --code-background: oklch(0.967 0.001 286.375);
   --code-foreground: oklch(0.141 0.005 285.823);
 

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

@@ -1,21 +1,27 @@
-function initializeAbbreviations() {
-  const abbreviations = document.querySelectorAll('.docyard-abbr');
-  if (abbreviations.length === 0) return;
+var abbrPopover = null;
+var abbrHideTimeout = null;
 
-  const popover = createPopover();
-  document.body.appendChild(popover);
+function initializeAbbreviations(root = document) {
+  const abbreviations = root.querySelectorAll('.docyard-abbr');
+  if (abbreviations.length === 0) return;
 
-  let hideTimeout;
+  if (!abbrPopover) {
+    abbrPopover = createPopover();
+    document.body.appendChild(abbrPopover);
+  }
 
   abbreviations.forEach(abbr => {
+    if (abbr.hasAttribute('data-abbr-initialized')) return;
+    abbr.setAttribute('data-abbr-initialized', 'true');
+
     abbr.addEventListener('mouseenter', () => {
-      clearTimeout(hideTimeout);
-      showPopover(popover, abbr);
+      clearTimeout(abbrHideTimeout);
+      showPopover(abbrPopover, abbr);
     });
 
     abbr.addEventListener('mouseleave', () => {
-      hideTimeout = setTimeout(() => {
-        hidePopover(popover);
+      abbrHideTimeout = setTimeout(() => {
+        hidePopover(abbrPopover);
       }, 100);
     });
   });
@@ -79,7 +85,10 @@ function hidePopover(popover) {
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeAbbreviations);
+  document.addEventListener('DOMContentLoaded', function() { initializeAbbreviations(); });
 } else {
   initializeAbbreviations();
 }
+
+window.docyard = window.docyard || {};
+window.docyard.initAbbreviations = initializeAbbreviations;

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

@@ -125,20 +125,25 @@ class CodeBlockManager {
   }
 }
 
-function initializeCodeBlocks() {
-  const codeBlocks = document.querySelectorAll('.docyard-code-block');
+function initializeCodeBlocks(root = document) {
+  const codeBlocks = root.querySelectorAll('.docyard-code-block');
 
   codeBlocks.forEach(container => {
+    if (container.hasAttribute('data-code-block-initialized')) return;
+    container.setAttribute('data-code-block-initialized', 'true');
     new CodeBlockManager(container);
   });
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeCodeBlocks);
+  document.addEventListener('DOMContentLoaded', function() { initializeCodeBlocks(); });
 } else {
   initializeCodeBlocks();
 }
 
+window.docyard = window.docyard || {};
+window.docyard.initCodeBlocks = initializeCodeBlocks;
+
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = { CodeBlockManager };
 }

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

@@ -9,6 +9,8 @@ class CodeGroupManager {
     if (containers.length === 0) return;
 
     containers.forEach(container => {
+      if (container.hasAttribute('data-code-group-initialized')) return;
+      container.setAttribute('data-code-group-initialized', 'true');
       this.groups.push(new CodeGroup(container, this));
     });
 
@@ -275,12 +277,27 @@ class CodeGroup {
   }
 }
 
-function initializeCodeGroups() {
-  new CodeGroupManager();
+function initializeCodeGroups(root = document) {
+  const containers = root.querySelectorAll('.docyard-code-group');
+  if (containers.length === 0) return;
+
+  if (!window.docyardCodeGroupManager) {
+    window.docyardCodeGroupManager = new CodeGroupManager();
+  } else {
+    containers.forEach(container => {
+      if (container.hasAttribute('data-code-group-initialized')) return;
+      container.setAttribute('data-code-group-initialized', 'true');
+      window.docyardCodeGroupManager.groups.push(new CodeGroup(container, window.docyardCodeGroupManager));
+    });
+    window.docyardCodeGroupManager.loadPreference();
+  }
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeCodeGroups);
+  document.addEventListener('DOMContentLoaded', function() { initializeCodeGroups(); });
 } else {
   initializeCodeGroups();
 }
+
+window.docyard = window.docyard || {};
+window.docyard.initCodeGroups = initializeCodeGroups;

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

@@ -1,7 +1,10 @@
-function initializeFileTrees() {
-  const fileTrees = document.querySelectorAll('.docyard-filetree');
+function initializeFileTrees(root = document) {
+  const fileTrees = root.querySelectorAll('.docyard-filetree');
 
   fileTrees.forEach(tree => {
+    if (tree.hasAttribute('data-filetree-initialized')) return;
+    tree.setAttribute('data-filetree-initialized', 'true');
+
     const folders = tree.querySelectorAll('.docyard-filetree__item--folder');
 
     folders.forEach(folder => {
@@ -33,7 +36,10 @@ function initializeFileTrees() {
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeFileTrees);
+  document.addEventListener('DOMContentLoaded', function() { initializeFileTrees(); });
 } else {
   initializeFileTrees();
 }
+
+window.docyard = window.docyard || {};
+window.docyard.initFileTrees = initializeFileTrees;

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

@@ -1,92 +1,91 @@
-class HeadingAnchorManager {
-  constructor() {
-    this.anchors = document.querySelectorAll('.heading-anchor');
-    this.init();
-  }
-
-  init() {
-    this.anchors.forEach(anchor => {
-      anchor.addEventListener('click', (e) => this.handleClick(e, anchor));
-    });
-  }
+function initializeHeadingAnchors(root = document) {
+  const anchors = root.querySelectorAll('.heading-anchor');
+  if (anchors.length === 0) return;
+
+  anchors.forEach(anchor => {
+    if (anchor.hasAttribute('data-anchor-initialized')) return;
+    anchor.setAttribute('data-anchor-initialized', 'true');
+    anchor.addEventListener('click', (e) => handleHeadingAnchorClick(e, anchor));
+  });
+}
 
-  
-  handleClick(e, anchor) {
-    e.preventDefault();
+function handleHeadingAnchorClick(e, anchor) {
+  e.preventDefault();
 
-    const headingId = anchor.dataset.headingId;
-    const url = `${window.location.origin}${window.location.pathname}#${headingId}`;
+  const headingId = anchor.dataset.headingId;
+  const url = `${window.location.origin}${window.location.pathname}#${headingId}`;
 
-    this.copyToClipboard(url, anchor);
+  copyAnchorToClipboard(url, anchor);
 
-    history.pushState(null, null, `#${headingId}`);
+  history.pushState(null, null, `#${headingId}`);
 
-    const heading = document.getElementById(headingId);
-    if (heading) {
-      const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - this.getScrollOffset();
-      window.scrollTo({
-        top: offsetTop,
-        behavior: 'smooth'
-      });
-    }
+  const heading = document.getElementById(headingId);
+  if (heading) {
+    const offsetTop = heading.getBoundingClientRect().top + window.pageYOffset - getAnchorScrollOffset();
+    window.scrollTo({
+      top: offsetTop,
+      behavior: 'smooth'
+    });
   }
+}
 
-  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;
-    }
+function getAnchorScrollOffset() {
+  const hasTabs = document.body.classList.contains('has-tabs');
+  const headerHeight = 64;
+  const tabBarHeight = hasTabs ? 48 : 0;
+  const buffer = 24;
 
-    return headerHeight + tabBarHeight + buffer;
+  if (window.innerWidth > 1024 && window.innerWidth <= 1280) {
+    return headerHeight + 48 + buffer;
   }
 
-  
-  async copyToClipboard(text, anchor) {
-    try {
-      await navigator.clipboard.writeText(text);
-      this.showFeedback(anchor, true);
-    } catch (err) {
-      this.fallbackCopyToClipboard(text);
-      this.showFeedback(anchor, true);
-    }
+  if (window.innerWidth <= 1024) {
+    return headerHeight + 48 + buffer;
   }
 
-  
-  fallbackCopyToClipboard(text) {
-    const textarea = document.createElement('textarea');
-    textarea.value = text;
-    textarea.style.position = 'fixed';
-    textarea.style.opacity = '0';
-    document.body.appendChild(textarea);
-    textarea.select();
-    document.execCommand('copy');
-    document.body.removeChild(textarea);
+  return headerHeight + tabBarHeight + buffer;
+}
+
+async function copyAnchorToClipboard(text, anchor) {
+  try {
+    await navigator.clipboard.writeText(text);
+    showAnchorFeedback(anchor, true);
+  } catch (err) {
+    fallbackAnchorCopy(text);
+    showAnchorFeedback(anchor, true);
   }
+}
 
-  
-  showFeedback(anchor, success) {
-    const originalTitle = anchor.getAttribute('aria-label');
-    anchor.setAttribute('aria-label', success ? 'Link copied!' : 'Failed to copy');
+function fallbackAnchorCopy(text) {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
 
-    anchor.style.color = success ? 'var(--color-success, #10b981)' : 'var(--color-danger, #ef4444)';
+function showAnchorFeedback(anchor, success) {
+  const originalTitle = anchor.getAttribute('aria-label');
+  anchor.setAttribute('aria-label', success ? 'Link copied!' : 'Failed to copy');
 
-    setTimeout(() => {
-      anchor.setAttribute('aria-label', originalTitle);
-      anchor.style.color = '';
-    }, 2000);
-  }
+  anchor.style.color = success ? 'var(--color-success, #10b981)' : 'var(--color-danger, #ef4444)';
+
+  setTimeout(() => {
+    anchor.setAttribute('aria-label', originalTitle);
+    anchor.style.color = '';
+  }, 2000);
 }
 
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
-    new HeadingAnchorManager();
-  });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { initializeHeadingAnchors(); });
+  } else {
+    initializeHeadingAnchors();
+  }
+
+  window.docyard = window.docyard || {};
+  window.docyard.initHeadingAnchors = initializeHeadingAnchors;
 }

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

@@ -49,8 +49,9 @@
     }
   }
 
-  function initLightbox() {
-    var contentImages = document.querySelectorAll('.content img');
+  function initLightbox(root) {
+    var container = root || document;
+    var contentImages = container.querySelectorAll('.content img');
 
     contentImages.forEach(function(img) {
       if (img.hasAttribute('data-no-zoom')) {
@@ -58,6 +59,9 @@
         return;
       }
 
+      if (img.hasAttribute('data-lightbox-initialized')) return;
+      img.setAttribute('data-lightbox-initialized', 'true');
+
       img.addEventListener('click', function() {
         openLightbox(this.src, this.alt);
       });
@@ -65,8 +69,11 @@
   }
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initLightbox);
+    document.addEventListener('DOMContentLoaded', function() { initLightbox(); });
   } else {
     initLightbox();
   }
+
+  window.docyard = window.docyard || {};
+  window.docyard.initLightbox = initLightbox;
 })();

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

@@ -304,20 +304,25 @@ class TabsManager {
   }
 }
 
-function initializeTabs() {
-  const tabsContainers = document.querySelectorAll('.docyard-tabs');
+function initializeTabs(root = document) {
+  const tabsContainers = root.querySelectorAll('.docyard-tabs');
 
   tabsContainers.forEach(container => {
+    if (container.hasAttribute('data-tabs-initialized')) return;
+    container.setAttribute('data-tabs-initialized', 'true');
     new TabsManager(container);
   });
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeTabs);
+  document.addEventListener('DOMContentLoaded', function() { initializeTabs(); });
 } else {
   initializeTabs();
 }
 
+window.docyard = window.docyard || {};
+window.docyard.initTabs = initializeTabs;
+
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = { TabsManager };
 }

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

@@ -1,35 +1,41 @@
-function initializeTooltips() {
-  const tooltips = document.querySelectorAll('.docyard-tooltip');
-  if (tooltips.length === 0) return;
+var tooltipPopover = null;
+var tooltipHideTimeout = null;
+var tooltipIsHoveringPopover = false;
 
-  const popover = createTooltipPopover();
-  document.body.appendChild(popover);
+function initializeTooltips(root = document) {
+  const tooltips = root.querySelectorAll('.docyard-tooltip');
+  if (tooltips.length === 0) return;
 
-  let hideTimeout;
-  let isHoveringPopover = false;
+  if (!tooltipPopover) {
+    tooltipPopover = createTooltipPopover();
+    document.body.appendChild(tooltipPopover);
 
-  popover.addEventListener('mouseenter', () => {
-    isHoveringPopover = true;
-    clearTimeout(hideTimeout);
-  }, { passive: true });
+    tooltipPopover.addEventListener('mouseenter', () => {
+      tooltipIsHoveringPopover = true;
+      clearTimeout(tooltipHideTimeout);
+    }, { passive: true });
 
-  popover.addEventListener('mouseleave', () => {
-    isHoveringPopover = false;
-    hideTimeout = setTimeout(() => {
-      hideTooltipPopover(popover);
-    }, 100);
-  }, { passive: true });
+    tooltipPopover.addEventListener('mouseleave', () => {
+      tooltipIsHoveringPopover = false;
+      tooltipHideTimeout = setTimeout(() => {
+        hideTooltipPopover(tooltipPopover);
+      }, 100);
+    }, { passive: true });
+  }
 
   tooltips.forEach(tooltip => {
+    if (tooltip.hasAttribute('data-tooltip-initialized')) return;
+    tooltip.setAttribute('data-tooltip-initialized', 'true');
+
     tooltip.addEventListener('mouseenter', () => {
-      clearTimeout(hideTimeout);
-      showTooltipPopover(popover, tooltip);
+      clearTimeout(tooltipHideTimeout);
+      showTooltipPopover(tooltipPopover, tooltip);
     }, { passive: true });
 
     tooltip.addEventListener('mouseleave', () => {
-      hideTimeout = setTimeout(() => {
-        if (!isHoveringPopover) {
-          hideTooltipPopover(popover);
+      tooltipHideTimeout = setTimeout(() => {
+        if (!tooltipIsHoveringPopover) {
+          hideTooltipPopover(tooltipPopover);
         }
       }, 100);
     }, { passive: true });
@@ -112,7 +118,10 @@ function hideTooltipPopover(popover) {
 }
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializeTooltips);
+  document.addEventListener('DOMContentLoaded', function() { initializeTooltips(); });
 } else {
   initializeTooltips();
 }
+
+window.docyard = window.docyard || {};
+window.docyard.initTooltips = initializeTooltips;

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

@@ -10,6 +10,9 @@
     if (data.type === 'content') {
       console.log('[Docyard] Content updated');
       reloadContent();
+    } else if (data.type === 'css') {
+      console.log('[Docyard] CSS updated');
+      reloadStyles();
     } else {
       console.log('[Docyard] Full reload');
       location.reload();
@@ -20,6 +23,44 @@
     eventSource.close();
   };
 
+  function reloadStyles() {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    var cacheBuster = Date.now();
+
+    links.forEach(function (link) {
+      var href = link.getAttribute('href');
+      if (!href) return;
+
+      var baseHref = href.split('?')[0];
+      var newHref = baseHref + '?_dc=' + cacheBuster;
+
+      var newLink = document.createElement('link');
+      newLink.rel = 'stylesheet';
+      newLink.href = newHref;
+
+      newLink.onload = function () {
+        link.remove();
+      };
+
+      link.parentNode.insertBefore(newLink, link.nextSibling);
+    });
+  }
+
+  function reinitializeComponents(container) {
+    if (window.Prism) window.Prism.highlightAll();
+    if (window.docyardTOC) window.docyardTOC.init();
+
+    var docyard = window.docyard || {};
+    if (docyard.initTabs) docyard.initTabs(container);
+    if (docyard.initFileTrees) docyard.initFileTrees(container);
+    if (docyard.initCodeGroups) docyard.initCodeGroups(container);
+    if (docyard.initCodeBlocks) docyard.initCodeBlocks(container);
+    if (docyard.initHeadingAnchors) docyard.initHeadingAnchors(container);
+    if (docyard.initAbbreviations) docyard.initAbbreviations(container);
+    if (docyard.initLightbox) docyard.initLightbox(container);
+    if (docyard.initTooltips) docyard.initTooltips(container);
+  }
+
   function reloadContent() {
     var cacheBuster = '_dc=' + Date.now();
     var separator = location.href.indexOf('?') === -1 ? '?' : '&';
@@ -33,8 +74,7 @@
 
         if (newContent && currentContent) {
           currentContent.innerHTML = newContent.innerHTML;
-          if (window.Prism) window.Prism.highlightAll();
-          if (window.docyardTOC) window.docyardTOC.init();
+          reinitializeComponents(currentContent);
           updateErrorOverlay(newDoc);
         } else {
           location.reload();