docyard 0.9.0 → 1.0.1

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

@@ -34,6 +34,7 @@ html:has(.has-tabs) {
   backdrop-filter: blur(12px);
   z-index: var(--z-header);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
 }
 
 .header.hide-on-scroll {
@@ -178,6 +179,15 @@ html:has(.has-tabs) {
   display: none;
 }
 
+.layout {
+  display: flex;
+  min-height: calc(100vh - var(--header-height));
+  padding-top: var(--header-height);
+  width: 100%;
+  max-width: var(--layout-max-width);
+  margin: 0 auto;
+  position: relative;
+}
 
 .secondary-header {
   display: none;
@@ -192,14 +202,15 @@ html:has(.has-tabs) {
     top: var(--header-height);
     left: calc(max(0px, (100vw - var(--layout-max-width)) / 2) + var(--sidebar-width));
     right: max(0px, calc((100vw - var(--layout-max-width)) / 2));
-    height: 3rem;
-    min-height: 3rem;
+    height: var(--secondary-header-height);
+    min-height: var(--secondary-header-height);
     background: var(--background);
     border-bottom: 1px solid var(--border);
     padding: 0 var(--spacing-6);
     z-index: var(--z-secondary-header);
     transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+    will-change: top, left;
   }
 
   .secondary-header.shift-up {
@@ -211,7 +222,7 @@ html:has(.has-tabs) {
   }
 
   .layout {
-    padding-top: calc(var(--header-height) + 3rem);
+    padding-top: calc(var(--header-height) + var(--secondary-header-height));
   }
 }
 
@@ -224,14 +235,15 @@ html:has(.has-tabs) {
     top: var(--header-height);
     left: 0;
     right: 0;
-    height: 3rem;
-    min-height: 3rem;
+    height: var(--secondary-header-height);
+    min-height: var(--secondary-header-height);
     background: var(--background);
     border-bottom: 1px solid var(--border);
     padding: 0 var(--spacing-6);
     z-index: var(--z-secondary-header);
     transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+    will-change: top;
   }
 
   .secondary-header.shift-up {
@@ -275,16 +287,6 @@ html:has(.has-tabs) {
   }
 }
 
-.layout {
-  display: flex;
-  min-height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  width: 100%;
-  max-width: var(--layout-max-width);
-  margin: 0 auto;
-  position: relative;
-}
-
 .sidebar {
   width: var(--sidebar-width);
   height: calc(100vh - var(--header-height));
@@ -421,7 +423,7 @@ main.content {
   }
 
   .layout {
-    padding-top: calc(var(--header-height) + 3rem);
+    padding-top: calc(var(--header-height) + var(--secondary-header-height));
     flex-direction: column;
   }
 
@@ -715,6 +717,13 @@ main.content {
 
 @media (max-width: 1280px) and (min-width: 1025px) {
   .doc-aside {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+  }
+
+  .doc-aside .doc-footer-desktop {
     display: none;
   }
 
@@ -736,6 +745,13 @@ main.content {
 
 @media (max-width: 1024px) {
   .doc-aside {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+  }
+
+  .doc-aside .doc-footer-desktop {
     display: none;
   }
 

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

@@ -21,6 +21,26 @@
   font-variant-ligatures: none;
 }
 
+.content .docyard-callout--note code:not(.highlight code) {
+  background-color: oklch(from var(--callout-note-border) l c h / 15%);
+}
+
+.content .docyard-callout--tip code:not(.highlight code) {
+  background-color: oklch(from var(--callout-tip-border) l c h / 15%);
+}
+
+.content .docyard-callout--important code:not(.highlight code) {
+  background-color: oklch(from var(--callout-important-border) l c h / 15%);
+}
+
+.content .docyard-callout--warning code:not(.highlight code) {
+  background-color: oklch(from var(--callout-warning-border) l c h / 15%);
+}
+
+.content .docyard-callout--danger code:not(.highlight code) {
+  background-color: oklch(from var(--callout-danger-border) l c h / 15%);
+}
+
 .content ul,
 .content ol {
   margin: var(--spacing-5) 0;
@@ -154,7 +174,7 @@
   cursor: zoom-in;
 }
 
-.content a:not(.heading-anchor):not(.pager-link):not(.breadcrumb-link):not(.site-footer__link):not(.site-footer__attribution):not(.docyard-card):not(.docyard-announcement__link):not(.docyard-announcement__button) {
+.content a:not(.heading-anchor):not(.pager-link):not(.breadcrumb-link):not(.site-footer__link):not(.site-footer__attribution):not(.docyard-card):not(.docyard-announcement__link):not(.docyard-announcement__button):not(.page-actions__edit-link) {
   color: var(--foreground);
   font-weight: var(--font-semibold);
   text-decoration: none;
@@ -162,7 +182,7 @@
   transition: border-bottom var(--transition-fast);
 }
 
-.content a:not(.heading-anchor):not(.pager-link):not(.breadcrumb-link):not(.site-footer__link):not(.site-footer__attribution):not(.docyard-card):not(.docyard-announcement__link):not(.docyard-announcement__button):hover {
+.content a:not(.heading-anchor):not(.pager-link):not(.breadcrumb-link):not(.site-footer__link):not(.site-footer__attribution):not(.docyard-card):not(.docyard-announcement__link):not(.docyard-announcement__button):not(.page-actions__edit-link):hover {
   border-bottom: 2px solid var(--primary);
 }
 

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

@@ -3,7 +3,7 @@
   src: url('/_docyard/fonts/Inter-Variable.ttf') format('truetype');
   font-weight: 100 900;
   font-style: normal;
-  font-display: optional;
+  font-display: swap;
 }
 
 :root {
@@ -157,6 +157,7 @@
   --toc-width: 17.5rem;
   --header-height: 4rem;
   --tab-bar-height: 3rem;
+  --secondary-header-height: 3rem;
   --content-max-width: 50rem;
   --layout-max-width: 88rem;
 
@@ -308,3 +309,15 @@
     --text-4xl: 1.875rem;
   }
 }
+
+.no-transition,
+.no-transition *,
+.no-transition *::before,
+.no-transition *::after {
+  transition: none !important;
+  animation: none !important;
+}
+
+.banner-dismissed .docyard-announcement {
+  display: none !important;
+}

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

@@ -59,9 +59,12 @@ class CodeGroup {
     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();
+    this.updateIndicator(false);
 
     requestAnimationFrame(() => {
+      if (this.indicator) {
+        this.indicator.classList.add('is-ready');
+      }
       this.updateScrollIndicators();
     });
   }

data/lib/docyard/templates/assets/js/components/copy-page.js

@@ -0,0 +1,115 @@
+class CopyPageManager {
+  constructor() {
+    this.buttons = document.querySelectorAll('[data-copy-page]');
+    this.markdownElement = document.getElementById('page-markdown');
+
+    this.handleCopy = this.handleCopy.bind(this);
+    this.init();
+  }
+
+  init() {
+    if (!this.markdownElement || this.buttons.length === 0) return;
+
+    this.buttons.forEach(button => {
+      button.addEventListener('click', this.handleCopy);
+    });
+  }
+
+  getMarkdownContent() {
+    if (!this.markdownElement) return null;
+
+    try {
+      return JSON.parse(this.markdownElement.textContent);
+    } catch (error) {
+      console.warn('Failed to parse markdown content:', error);
+      return null;
+    }
+  }
+
+  async handleCopy(event) {
+    const button = event.currentTarget;
+    const content = this.getMarkdownContent();
+
+    if (!content) {
+      console.warn('No markdown content available to copy');
+      return;
+    }
+
+    try {
+      await this.copyToClipboard(content);
+      this.showSuccess(button);
+    } catch (error) {
+      console.warn('Failed to copy page:', error);
+    }
+  }
+
+  async copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      this.fallbackCopy(text);
+    }
+  }
+
+  fallbackCopy(text) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      document.execCommand('copy');
+      textArea.remove();
+    } catch (error) {
+      textArea.remove();
+      throw error;
+    }
+  }
+
+  showSuccess(button) {
+    const iconElement = button.querySelector('i[class*="ph-"]');
+    const textElement = button.querySelector('.page-actions__copy-text');
+    const originalClasses = iconElement?.className;
+
+    button.classList.add('is-copied');
+
+    if (iconElement) {
+      iconElement.className = 'ph ph-check';
+      iconElement.classList.add('icon-animate-in');
+    }
+    if (textElement) {
+      textElement.textContent = 'Copied';
+    }
+
+    setTimeout(() => {
+      button.classList.remove('is-copied');
+      if (iconElement && originalClasses) {
+        iconElement.classList.add('icon-animate-out');
+        setTimeout(() => {
+          iconElement.className = originalClasses;
+        }, 150);
+      }
+      if (textElement) {
+        textElement.textContent = 'Copy page';
+      }
+    }, 2000);
+  }
+}
+
+function initializeCopyPage() {
+  new CopyPageManager();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeCopyPage);
+} else {
+  initializeCopyPage();
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CopyPageManager };
+}

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

@@ -0,0 +1,66 @@
+class FeedbackManager {
+  constructor() {
+    this.container = document.querySelector('.feedback');
+    if (!this.container) return;
+
+    this.buttons = this.container.querySelectorAll('.feedback__btn');
+    this.thanks = this.container.querySelector('.feedback__thanks');
+    this.pagePath = window.location.pathname;
+
+    this.init();
+  }
+
+  init() {
+    this.buttons.forEach(button => {
+      button.addEventListener('click', (e) => this.handleFeedback(e));
+    });
+  }
+
+  handleFeedback(event) {
+    const button = event.currentTarget;
+    const value = button.dataset.feedback;
+    const isHelpful = value === 'yes';
+
+    this.updateUI(button);
+    this.sendAnalytics(isHelpful);
+  }
+
+  updateUI(selectedButton) {
+    this.buttons.forEach(button => {
+      if (button === selectedButton) {
+        button.classList.add('is-selected');
+      } else {
+        button.classList.add('is-not-selected');
+      }
+    });
+
+    setTimeout(() => {
+      this.container.classList.add('is-submitted');
+      this.thanks.hidden = false;
+    }, 600);
+  }
+
+  sendAnalytics(isHelpful) {
+    const helpful = isHelpful ? 'yes' : 'no';
+
+    if (typeof gtag === 'function') {
+      gtag('event', 'page_feedback', {
+        feedback_page: this.pagePath,
+        helpful: helpful,
+        value: isHelpful ? 1 : 0
+      });
+    }
+
+    if (typeof plausible === 'function') {
+      plausible('Feedback', { props: { helpful: helpful, page: this.pagePath } });
+    }
+
+    if (typeof fathom === 'object' && typeof fathom.trackEvent === 'function') {
+      fathom.trackEvent(`feedback_${helpful}`);
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  new FeedbackManager();
+});

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

@@ -17,14 +17,14 @@ function initializeFileTrees() {
 
         folder.classList.toggle('docyard-filetree__item--collapsed');
 
-        const icon = entry.querySelector('.docyard-icon');
+        const icon = entry.querySelector('i[class*="ph-"]');
         if (icon) {
           if (isCollapsed) {
-            icon.classList.remove('docyard-icon-folder');
-            icon.classList.add('docyard-icon-folder-open');
+            icon.classList.remove('ph-folder');
+            icon.classList.add('ph-folder-open');
           } else {
-            icon.classList.remove('docyard-icon-folder-open');
-            icon.classList.add('docyard-icon-folder');
+            icon.classList.remove('ph-folder-open');
+            icon.classList.add('ph-folder');
           }
         }
       });

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

@@ -267,7 +267,7 @@
       scrollTimeout = setTimeout(function() {
         sessionStorage.setItem(STORAGE_KEY, scrollContainer.scrollTop);
       }, 150);
-    });
+    }, { passive: true });
 
     const logo = document.querySelector('.header-logo');
     if (logo) {
@@ -304,9 +304,9 @@
 
     updateFadeIndicators();
 
-    scrollContainer.addEventListener('scroll', updateFadeIndicators);
+    scrollContainer.addEventListener('scroll', updateFadeIndicators, { passive: true });
 
-    window.addEventListener('resize', updateFadeIndicators);
+    window.addEventListener('resize', updateFadeIndicators, { passive: true });
   }
 
   function initScrollBehavior() {

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

@@ -220,11 +220,11 @@ class SearchManager {
 
   async initPagefind() {
     try {
-      this.pagefind = await import('/pagefind/pagefind.js');
-      await this.pagefind.init();
+      this.pagefind = await import('/_docyard/pagefind/pagefind.js');
+      await this.pagefind.options({ baseUrl: '/' });
     } catch (error) {
       console.warn('Pagefind not available:', error);
-      this.showErrorState('Search is not available. Run "docyard build" to generate the search index.');
+      this.showErrorState('Search is not available. Run "docyard serve -s" to enable search.');
     }
   }
 

data/lib/docyard/templates/assets/js/components/table-of-contents.js

@@ -308,7 +308,7 @@ class TableOfContentsManager {
     };
 
     checkOverflow();
-    window.addEventListener('resize', checkOverflow);
+    window.addEventListener('resize', checkOverflow, { passive: true });
   }
 
   setupScrollFadeIndicators() {
@@ -343,11 +343,11 @@ class TableOfContentsManager {
     scrollContainer.addEventListener('scroll', () => {
       updateFadeIndicators();
       this.updateIndicator();
-    });
+    }, { passive: true });
     window.addEventListener('resize', () => {
       updateFadeIndicators();
       this.updateIndicator();
-    });
+    }, { passive: true });
   }
 
   
@@ -375,10 +375,16 @@ class TableOfContentsManager {
   }
 }
 
+function initializeTableOfContents() {
+  window.tocManager = new TableOfContentsManager();
+}
+
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
-    window.tocManager = new TableOfContentsManager();
-  });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeTableOfContents);
+  } else {
+    initializeTableOfContents();
+  }
 
   window.addEventListener('beforeunload', () => {
     if (window.tocManager) {

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 });
   });
 }