docyard 0.9.0 → 1.0.0

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

@@ -74,7 +74,8 @@
   flex-shrink: 0;
 }
 
-.docyard-tabs__icon .docyard-icon {
+.docyard-tabs__icon .docyard-icon,
+.docyard-tabs__icon i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
   display: inline-flex;
@@ -94,13 +95,19 @@
   border-radius: 1px;
   pointer-events: none;
   z-index: 1;
-  
+  opacity: 0;
+
   transition:
     transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
-    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease;
   will-change: transform, width;
 }
 
+.docyard-tabs__indicator.is-ready {
+  opacity: 1;
+}
+
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -230,7 +237,8 @@
     gap: var(--spacing-1);
   }
 
-  .docyard-tabs__icon .docyard-icon {
+  .docyard-tabs__icon .docyard-icon,
+  .docyard-tabs__icon i[class*="ph-"] {
     width: 0.875rem;
     height: 0.875rem;
   }

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

@@ -39,7 +39,9 @@
 }
 
 .theme-toggle-sun .docyard-icon,
-.theme-toggle-moon .docyard-icon {
+.theme-toggle-moon .docyard-icon,
+.theme-toggle-sun i[class*="ph-"],
+.theme-toggle-moon i[class*="ph-"] {
   width: 1.125rem;
   height: 1.125rem;
 }

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

@@ -73,15 +73,15 @@
 
 .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(0 0 0 / 0.06) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(0 0 0 / 0.06) 1px, transparent 1px);
-  background-size: 100px 100px;
+    linear-gradient(oklch(0 0 0 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(0 0 0 / 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
 }
 
 .dark .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(1 0 0 / 0.08) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(1 0 0 / 0.08) 1px, transparent 1px);
+    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
 }
 
 .hero-bg--grid::after {
@@ -249,7 +249,7 @@
   background: linear-gradient(135deg,
       var(--foreground) 0%,
       var(--foreground) 40%,
-      oklch(from var(--primary) calc(l + 0.1) c h) 100%);
+      oklch(from var(--primary) calc(l - 0.15) c h) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -314,12 +314,12 @@
 
 .hero-action--secondary {
   background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--border);
+  color: var(--muted-foreground);
+  border: none;
 }
 
 .hero-action--secondary:hover {
-  background: var(--muted);
+  background: transparent;
   color: var(--foreground);
 }
 
@@ -382,6 +382,70 @@
   display: block;
 }
 
+.hero-custom-visual {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-custom-visual--side {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-custom-visual--bottom {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-6);
+  margin-bottom: var(--spacing-2);
+}
+
+.hero--with-bottom-visual {
+  min-height: auto;
+  height: auto;
+  align-items: flex-start;
+  padding-top: 10rem;
+  padding-bottom: var(--spacing-4);
+}
+
+.hero--with-bottom-visual .hero-content {
+  padding-top: 0;
+  padding-bottom: var(--spacing-16);
+}
+
+@media (max-width: 1024px) {
+  .hero-custom-visual--side {
+    grid-column: 1 / -1;
+    order: 1;
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-4);
+    margin-bottom: var(--spacing-2);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) {
+    min-height: auto;
+    height: auto;
+    padding-top: 7rem;
+    padding-bottom: var(--spacing-4);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) .hero-content {
+    padding-top: 0;
+    padding-bottom: var(--spacing-16);
+  }
+
+  .hero-custom-visual--bottom {
+    padding: 0 var(--spacing-4);
+  }
+
+  .hero--with-bottom-visual {
+    padding-top: 7rem;
+  }
+}
+
 .features-section {
   padding: var(--spacing-16) var(--spacing-6) var(--spacing-20);
   background: linear-gradient(180deg, var(--background) 0%, oklch(from var(--background) calc(l + 0.02) c h) 100%);
@@ -394,7 +458,7 @@
 .features-header {
   text-align: center;
   max-width: 600px;
-  margin: 0 auto var(--spacing-12);
+  margin: 0 auto var(--spacing-20);
 }
 
 .features-label {
@@ -407,15 +471,15 @@
 }
 
 .features-title {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
   color: var(--foreground);
   margin: 0 0 var(--spacing-3) 0;
 }
 
 .features-description {
   color: var(--muted-foreground);
-  font-size: var(--text-base);
+  font-size: var(--text-lg);
   margin: 0;
   line-height: 1.6;
 }
@@ -478,6 +542,7 @@
   flex-direction: column;
   gap: var(--spacing-4);
   padding: var(--spacing-6);
+  height: 100%;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
@@ -746,6 +811,10 @@ a.feature-card:active {
     padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
   }
 
+  .hero-custom-visual--bottom + .features-section {
+    padding-top: var(--spacing-2);
+  }
+
   .features-header {
     margin-bottom: var(--spacing-8);
   }

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 {
@@ -200,6 +201,7 @@ html:has(.has-tabs) {
     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 {
@@ -232,6 +234,7 @@ html:has(.has-tabs) {
     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 {
@@ -715,6 +718,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 +746,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 {
@@ -308,3 +308,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) {