docyard 0.9.0 → 1.0.0

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

@@ -16,6 +16,7 @@ class TabsManager {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
+    this.handleTabSync = this.handleTabSync.bind(this);
 
     this.init();
   }
@@ -30,9 +31,12 @@ class TabsManager {
     this.loadPreference();
     this.attachEventListeners();
     this.activateTab(this.activeIndex, false);
-    this.updateIndicator();
+    this.updateIndicator(false);
 
     requestAnimationFrame(() => {
+      if (this.indicator) {
+        this.indicator.classList.add('is-ready');
+      }
       requestAnimationFrame(() => {
         this.updateScrollIndicators();
       });
@@ -63,6 +67,8 @@ class TabsManager {
     this.tabList.addEventListener('scroll', this.handleScroll);
 
     window.addEventListener('resize', this.handleResize);
+
+    window.addEventListener('docyard-tab-change', this.handleTabSync);
   }
 
   
@@ -70,7 +76,36 @@ class TabsManager {
     if (index === this.activeIndex) return;
 
     this.activateTab(index, true);
-    this.savePreference(index);
+    this.broadcastTabChange(index);
+  }
+
+  handleTabSync(event) {
+    if (event.detail.sourceId === this.groupId) return;
+
+    const tabName = event.detail.tabName;
+    const index = this.tabs.findIndex(tab =>
+      tab.getAttribute('data-tab-name') === tabName
+    );
+
+    if (index !== -1 && index !== this.activeIndex) {
+      this.activateTab(index, true);
+    }
+  }
+
+  broadcastTabChange(index) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    const tabName = this.tabs[index].getAttribute('data-tab-name');
+
+    try {
+      localStorage.setItem('docyard-preferred-pm', tabName);
+    } catch (error) {
+      // Silently fail if localStorage is unavailable
+    }
+
+    window.dispatchEvent(new CustomEvent('docyard-tab-change', {
+      detail: { tabName, sourceId: this.groupId }
+    }));
   }
 
   
@@ -92,6 +127,7 @@ class TabsManager {
     if (key === 'Home') {
       event.preventDefault();
       this.activateTab(0, true);
+      this.broadcastTabChange(0);
       this.tabs[0].focus();
     }
 
@@ -99,6 +135,7 @@ class TabsManager {
       event.preventDefault();
       const lastIndex = this.tabs.length - 1;
       this.activateTab(lastIndex, true);
+      this.broadcastTabChange(lastIndex);
       this.tabs[lastIndex].focus();
     }
   }
@@ -153,22 +190,20 @@ class TabsManager {
     });
 
     this.updateIndicator(animate);
-
-    if (previousIndex !== index) {
-      this.savePreference(index);
-    }
   }
 
   
   activateNextTab() {
     const nextIndex = (this.activeIndex + 1) % this.tabs.length;
     this.activateTab(nextIndex, true);
+    this.broadcastTabChange(nextIndex);
   }
 
-  
+
   activatePreviousTab() {
     const prevIndex = (this.activeIndex - 1 + this.tabs.length) % this.tabs.length;
     this.activateTab(prevIndex, true);
+    this.broadcastTabChange(prevIndex);
   }
 
   
@@ -227,7 +262,7 @@ class TabsManager {
       if (!preferredTab) return;
 
       const index = this.tabs.findIndex(tab =>
-        tab.textContent.trim().toLowerCase() === preferredTab.toLowerCase()
+        tab.getAttribute('data-tab-name') === preferredTab
       );
 
       if (index !== -1) {
@@ -238,22 +273,9 @@ class TabsManager {
     }
   }
 
-  
-  savePreference(index) {
-    if (index < 0 || index >= this.tabs.length) return;
-
-    try {
-      const tabName = this.tabs[index].textContent.trim().toLowerCase();
-      localStorage.setItem('docyard-preferred-pm', tabName);
-    } catch (error) {
-      console.warn('Could not save tab preference:', error);
-    }
-  }
-
-  
   activateTabByName(name) {
     const index = this.tabs.findIndex(tab =>
-      tab.textContent.trim().toLowerCase() === name.toLowerCase()
+      tab.getAttribute('data-tab-name') === name.toLowerCase()
     );
 
     if (index !== -1) {
@@ -270,6 +292,7 @@ class TabsManager {
     this.tabList.removeEventListener('keydown', this.handleKeyDown);
     this.tabList.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('docyard-tab-change', this.handleTabSync);
 
     if (this.resizeTimeout) {
       cancelAnimationFrame(this.resizeTimeout);

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

@@ -11,20 +11,20 @@ function initializeTooltips() {
   popover.addEventListener('mouseenter', () => {
     isHoveringPopover = true;
     clearTimeout(hideTimeout);
-  });
+  }, { passive: true });
 
   popover.addEventListener('mouseleave', () => {
     isHoveringPopover = false;
     hideTimeout = setTimeout(() => {
       hideTooltipPopover(popover);
     }, 100);
-  });
+  }, { passive: true });
 
   tooltips.forEach(tooltip => {
     tooltip.addEventListener('mouseenter', () => {
       clearTimeout(hideTimeout);
       showTooltipPopover(popover, tooltip);
-    });
+    }, { passive: true });
 
     tooltip.addEventListener('mouseleave', () => {
       hideTimeout = setTimeout(() => {
@@ -32,7 +32,7 @@ function initializeTooltips() {
           hideTooltipPopover(popover);
         }
       }, 100);
-    });
+    }, { passive: true });
   });
 }
 

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

@@ -0,0 +1,44 @@
+(function() {
+  var ssePort = window.__DOCYARD_SSE_PORT__;
+  if (!ssePort) return;
+
+  var url = 'http://127.0.0.1:' + ssePort + '/';
+  var eventSource = new EventSource(url);
+
+  eventSource.addEventListener('reload', function(event) {
+    var data = JSON.parse(event.data);
+    if (data.type === 'content') {
+      console.log('[Docyard] Content updated');
+      reloadContent();
+    } else {
+      console.log('[Docyard] Full reload');
+      location.reload();
+    }
+  });
+
+  eventSource.onerror = function() {
+    eventSource.close();
+  };
+
+  function reloadContent() {
+    fetch(location.href)
+      .then(function(response) { return response.text(); })
+      .then(function(html) {
+        var parser = new DOMParser();
+        var newDoc = parser.parseFromString(html, 'text/html');
+        var newContent = newDoc.querySelector('.content');
+        var currentContent = document.querySelector('.content');
+
+        if (newContent && currentContent) {
+          currentContent.innerHTML = newContent.innerHTML;
+          if (window.Prism) window.Prism.highlightAll();
+          if (window.docyardTOC) window.docyardTOC.init();
+        } else {
+          location.reload();
+        }
+      })
+      .catch(function() {
+        location.reload();
+      });
+  }
+})();

data/lib/docyard/templates/errors/404.html.erb

@@ -4,13 +4,122 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>404 - Page Not Found</title>
-  <link rel="stylesheet" href="/_docyard/css/main.css">
+  <style>
+    @font-face {
+      font-family: 'Inter';
+      src: url('/_docyard/fonts/Inter-Variable.ttf') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :root {
+      --background: #ffffff;
+      --foreground: #0f0f10;
+      --muted-foreground: #71717a;
+      --border: #e4e4e7;
+      --primary: oklch(0.61 0.11 222);
+      --primary-foreground: oklch(0.98 0.02 201);
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: #09090b;
+      --foreground: #fafafa;
+      --muted-foreground: #a1a1aa;
+      --border: #27272a;
+      --primary: oklch(0.71 0.13 215);
+      --primary-foreground: oklch(0.30 0.05 230);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .error-page {
+      text-align: center;
+      max-width: 450px;
+    }
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: transparent;
+      -webkit-text-stroke: 2px var(--border);
+      line-height: 1;
+    }
+
+    .error-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 1rem 0 0.5rem;
+    }
+
+    .error-message {
+      color: var(--muted-foreground);
+      font-size: 0.9375rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-decoration: none;
+      border-radius: var(--radius);
+      background: var(--primary);
+      color: var(--primary-foreground);
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .error-code {
+        font-size: 5rem;
+      }
+    }
+  </style>
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') ||
+                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+    })();
+  </script>
 </head>
 <body>
-  <main>
-    <h1>404 - Page Not Found</h1>
-    <p>The page you're looking for doesn't exist.</p>
-    <p><a href="/">Go back home</a></p>
+  <main class="error-page">
+    <p class="error-code">404</p>
+    <h1 class="error-title">Page not found</h1>
+    <p class="error-message">This page doesn't exist or has been moved.</p>
+    <a href="/" class="btn">
+      <%= icon(:house_line) %>
+      Back to home
+    </a>
   </main>
 </body>
 </html>

data/lib/docyard/templates/errors/500.html.erb

@@ -4,21 +4,184 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>500 - Server Error</title>
-  <link rel="stylesheet" href="/_docyard/css/main.css">
+  <style>
+    @font-face {
+      font-family: 'Inter';
+      src: url('/_docyard/fonts/Inter-Variable.ttf') format('truetype');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :root {
+      --background: #ffffff;
+      --foreground: #0f0f10;
+      --muted: #f5f5f6;
+      --muted-foreground: #71717a;
+      --border: #e4e4e7;
+      --primary: oklch(0.61 0.11 222);
+      --primary-foreground: oklch(0.98 0.02 201);
+      --destructive: #dc2626;
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: #09090b;
+      --foreground: #fafafa;
+      --muted: #18181b;
+      --muted-foreground: #a1a1aa;
+      --border: #27272a;
+      --primary: oklch(0.71 0.13 215);
+      --primary-foreground: oklch(0.30 0.05 230);
+      --destructive: #f87171;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--background);
+      color: var(--foreground);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+
+    .error-page {
+      text-align: center;
+      max-width: 500px;
+    }
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: transparent;
+      -webkit-text-stroke: 2px var(--border);
+      line-height: 1;
+    }
+
+    .error-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 1rem 0 0.5rem;
+    }
+
+    .error-message {
+      color: var(--muted-foreground);
+      font-size: 0.9375rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-decoration: none;
+      border-radius: var(--radius);
+      background: var(--primary);
+      color: var(--primary-foreground);
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+
+    .btn:hover {
+      opacity: 0.9;
+    }
+
+    .btn svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .error-details {
+      margin-top: 2rem;
+      text-align: left;
+      background: var(--muted);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+
+    .error-details summary {
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--muted-foreground);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .error-details summary svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .error-details[open] summary {
+      border-bottom: 1px solid var(--border);
+    }
+
+    .error-details pre {
+      margin: 0;
+      padding: 1rem;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.75rem;
+      line-height: 1.5;
+      color: var(--destructive);
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-x: auto;
+    }
+
+    .error-details .backtrace {
+      border-top: 1px solid var(--border);
+      color: var(--muted-foreground);
+    }
+
+    @media (max-width: 480px) {
+      .error-code {
+        font-size: 5rem;
+      }
+    }
+  </style>
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') ||
+                   (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+    })();
+  </script>
 </head>
 <body>
-  <main>
-    <h1>500 - Internal Server Error</h1>
-    <p>Something went wrong.</p>
+  <main class="error-page">
+    <p class="error-code">500</p>
+    <h1 class="error-title">Something went wrong</h1>
+    <p class="error-message">We encountered an unexpected error. Please try again.</p>
+    <a href="/" class="btn">
+      <%= icon(:house_line) %>
+      Back to home
+    </a>
 
     <% if @error_message %>
-      <h3>Error Details:</h3>
+    <details class="error-details">
+      <summary>
+        <%= icon(:warning_circle) %>
+        Error details
+      </summary>
       <pre><%= @error_message %></pre>
-    <% end %>
-
-    <% if @backtrace %>
-      <h3>Backtrace:</h3>
-      <pre><%= @backtrace %></pre>
+      <% if @backtrace %>
+      <pre class="backtrace"><%= @backtrace %></pre>
+      <% end %>
+    </details>
     <% end %>
   </main>
 </body>

data/lib/docyard/templates/init/_sidebar.yml

@@ -0,0 +1,36 @@
+# =============================================================================
+# Sidebar Navigation
+# =============================================================================
+# This file controls the sidebar navigation for your documentation.
+#
+# Basic syntax:
+#   - page-name              # Links to docs/page-name.md
+#   - page-name: { text: "Custom Title", icon: rocket-launch }
+#
+# Sections with nested pages:
+#   - section-name:
+#       text: "Section Title"
+#       icon: folder
+#       items:
+#         - page-one
+#         - page-two
+#
+# External links:
+#   - link: "https://github.com/your-org"
+#     text: "GitHub"
+#     icon: github
+#
+# Available icons: https://phosphoricons.com (use kebab-case names)
+# =============================================================================
+
+- index:
+    text: Welcome
+    icon: house
+
+- getting-started:
+    text: Getting Started
+    icon: rocket-launch
+
+- components:
+    text: Components
+    icon: package

data/lib/docyard/templates/init/docyard.yml

@@ -0,0 +1,36 @@
+# Docyard Configuration
+# Full documentation: https://docyard.dev/configuration
+
+title: "{{PROJECT_NAME}}"
+description: "Documentation for {{PROJECT_NAME}}"
+
+# Your production URL (for SEO and sitemaps)
+# url: "https://docs.example.com"
+
+# Branding customization
+# branding:
+#   color: "#3b82f6"              # Primary color (or use light/dark below)
+#   # color:
+#   #   light: "#3b82f6"
+#   #   dark: "#60a5fa"
+
+# Social links (shown in footer)
+# socials:
+#   github: "https://github.com/your-org/your-repo"
+#   twitter: "https://twitter.com/your-handle"
+
+# Repository settings (enables "Edit this page" links)
+# repo:
+#   url: "https://github.com/your-org/your-repo"
+#   branch: "main"
+#   edit_link: true
+
+# Search (enabled by default)
+search:
+  enabled: true
+  placeholder: "Search..."
+
+# Build output
+build:
+  output: "dist"
+  base: "/"