docyard 0.8.0 → 1.0.0

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;
@@ -145,14 +165,16 @@
 }
 
 .content img {
+  display: block;
   max-width: 100%;
   height: auto;
   border-radius: var(--radius-xl);
-  margin: var(--spacing-4) 0;
+  margin: var(--spacing-4) auto;
   border: 1px solid var(--border);
+  cursor: zoom-in;
 }
 
-.content a:not(.heading-anchor):not(.pager-link):not(.breadcrumb-link):not(.site-footer__link):not(.site-footer__attribution) {
+.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;
@@ -160,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):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/abbreviation.js

@@ -0,0 +1,85 @@
+function initializeAbbreviations() {
+  const abbreviations = document.querySelectorAll('.docyard-abbr');
+  if (abbreviations.length === 0) return;
+
+  const popover = createPopover();
+  document.body.appendChild(popover);
+
+  let hideTimeout;
+
+  abbreviations.forEach(abbr => {
+    abbr.addEventListener('mouseenter', () => {
+      clearTimeout(hideTimeout);
+      showPopover(popover, abbr);
+    });
+
+    abbr.addEventListener('mouseleave', () => {
+      hideTimeout = setTimeout(() => {
+        hidePopover(popover);
+      }, 100);
+    });
+  });
+}
+
+function createPopover() {
+  const popover = document.createElement('div');
+  popover.className = 'docyard-abbr-popover';
+  popover.innerHTML = `
+    <span class="docyard-abbr-popover__term"></span>
+    <span class="docyard-abbr-popover__definition"></span>
+  `;
+  return popover;
+}
+
+function showPopover(popover, abbr) {
+  const term = abbr.textContent;
+  const definition = abbr.dataset.definition;
+
+  popover.querySelector('.docyard-abbr-popover__term').textContent = term;
+  popover.querySelector('.docyard-abbr-popover__definition').textContent = definition;
+
+  const rect = abbr.getBoundingClientRect();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+
+  popover.style.visibility = 'hidden';
+  popover.classList.add('is-visible');
+  popover.classList.remove('is-below');
+
+  requestAnimationFrame(() => {
+    const popoverRect = popover.getBoundingClientRect();
+    let left = rect.left + scrollX + (rect.width / 2) - (popoverRect.width / 2);
+    let top = rect.top + scrollY - popoverRect.height - 8;
+
+    const viewportWidth = window.innerWidth;
+    const padding = 16;
+
+    if (left < padding) {
+      left = padding;
+    } else if (left + popoverRect.width > viewportWidth - padding) {
+      left = viewportWidth - popoverRect.width - padding;
+    }
+
+    if (top < scrollY + padding) {
+      top = rect.bottom + scrollY + 8;
+      popover.classList.add('is-below');
+    }
+
+    const arrowLeft = rect.left + scrollX + (rect.width / 2) - left;
+    popover.style.setProperty('--arrow-left', `${Math.max(12, Math.min(arrowLeft, popoverRect.width - 12))}px`);
+
+    popover.style.left = `${left}px`;
+    popover.style.top = `${top}px`;
+    popover.style.visibility = 'visible';
+  });
+}
+
+function hidePopover(popover) {
+  popover.classList.remove('is-visible');
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeAbbreviations);
+} else {
+  initializeAbbreviations();
+}

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

@@ -0,0 +1,81 @@
+(function () {
+  var STORAGE_KEY = 'docyard-announcement-dismissed';
+
+  function initAnnouncement() {
+    var banner = document.querySelector('.docyard-announcement');
+    if (!banner) return;
+
+    var isDismissible = banner.dataset.dismissible === 'true';
+
+    if (isDismissible && isDismissed()) {
+      banner.style.display = 'none';
+      document.body.classList.remove('has-announcement');
+      return;
+    }
+
+    if (isDismissible) {
+      var dismissButton = banner.querySelector('.docyard-announcement__dismiss');
+      if (dismissButton) {
+        dismissButton.addEventListener('click', function () {
+          dismissAnnouncement(banner);
+        });
+      }
+    }
+
+    var actionLink = banner.querySelector('.docyard-announcement__link');
+    var actionButton = banner.querySelector('.docyard-announcement__button');
+
+    if (actionLink) {
+      actionLink.addEventListener('click', function () {
+        saveDismissed();
+      });
+    }
+
+    if (actionButton) {
+      actionButton.addEventListener('click', function () {
+        saveDismissed();
+      });
+    }
+  }
+
+  function saveDismissed() {
+    try {
+      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    } catch (e) {
+    }
+  }
+
+  function isDismissed() {
+    try {
+      var dismissed = localStorage.getItem(STORAGE_KEY);
+      if (!dismissed) return false;
+
+      var dismissedAt = parseInt(dismissed, 10);
+      var sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+
+      return dismissedAt > sevenDaysAgo;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function dismissAnnouncement(banner) {
+    banner.classList.add('is-dismissed');
+
+    try {
+      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    } catch (e) {
+    }
+
+    banner.addEventListener('animationend', function () {
+      banner.style.display = 'none';
+      document.body.classList.remove('has-announcement');
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAnnouncement);
+  } else {
+    initAnnouncement();
+  }
+})();

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

@@ -0,0 +1,286 @@
+class CodeGroupManager {
+  constructor() {
+    this.groups = [];
+    this.init();
+  }
+
+  init() {
+    const containers = document.querySelectorAll('.docyard-code-group');
+    if (containers.length === 0) return;
+
+    containers.forEach(container => {
+      this.groups.push(new CodeGroup(container, this));
+    });
+
+    this.loadPreference();
+  }
+
+  syncTabs(label) {
+    this.groups.forEach(group => {
+      group.activateTabByLabel(label, true);
+    });
+    this.savePreference(label);
+  }
+
+  loadPreference() {
+    try {
+      const preferredTab = localStorage.getItem('docyard-code-group-tab');
+      if (!preferredTab) return;
+
+      this.groups.forEach(group => {
+        group.activateTabByLabel(preferredTab, false);
+      });
+    } catch (error) {
+      // localStorage not available
+    }
+  }
+
+  savePreference(label) {
+    try {
+      localStorage.setItem('docyard-code-group-tab', label.toLowerCase());
+    } catch (error) {
+      // localStorage not available
+    }
+  }
+}
+
+class CodeGroup {
+  constructor(container, manager) {
+    this.container = container;
+    this.manager = manager;
+    this.scrollContainer = container.querySelector('.docyard-code-group__tabs-scroll-container');
+    this.tabList = container.querySelector('[role="tablist"]');
+    this.tabs = Array.from(container.querySelectorAll('[role="tab"]'));
+    this.panels = Array.from(container.querySelectorAll('[role="tabpanel"]'));
+    this.indicator = container.querySelector('.docyard-code-group__indicator');
+    this.copyButton = container.querySelector('.docyard-code-group__copy');
+    this.activeIndex = 0;
+
+    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(false);
+
+    requestAnimationFrame(() => {
+      if (this.indicator) {
+        this.indicator.classList.add('is-ready');
+      }
+      this.updateScrollIndicators();
+    });
+  }
+
+  attachEventListeners() {
+    this.tabs.forEach((tab, index) => {
+      tab.addEventListener('click', () => this.handleTabClick(index));
+    });
+
+    this.tabList.addEventListener('keydown', (e) => this.handleKeyDown(e));
+    this.tabList.addEventListener('scroll', () => this.handleScroll());
+    window.addEventListener('resize', () => this.handleResize());
+
+    if (this.copyButton) {
+      this.copyButton.addEventListener('click', () => this.handleCopy());
+    }
+  }
+
+  handleScroll() {
+    if (this.scrollTimeout) {
+      cancelAnimationFrame(this.scrollTimeout);
+    }
+
+    this.scrollTimeout = requestAnimationFrame(() => {
+      this.updateScrollIndicators();
+    });
+  }
+
+  handleTabClick(index) {
+    if (index === this.activeIndex) return;
+
+    const label = this.tabs[index].dataset.label;
+    this.manager.syncTabs(label);
+  }
+
+  handleKeyDown(event) {
+    const { key } = event;
+
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+
+      if (key === 'ArrowLeft') {
+        this.activatePreviousTab();
+      } else {
+        this.activateNextTab();
+      }
+
+      this.tabs[this.activeIndex].focus();
+      const label = this.tabs[this.activeIndex].dataset.label;
+      this.manager.syncTabs(label);
+    }
+
+    if (key === 'Home') {
+      event.preventDefault();
+      this.activateTab(0, true);
+      this.tabs[0].focus();
+      const label = this.tabs[0].dataset.label;
+      this.manager.syncTabs(label);
+    }
+
+    if (key === 'End') {
+      event.preventDefault();
+      const lastIndex = this.tabs.length - 1;
+      this.activateTab(lastIndex, true);
+      this.tabs[lastIndex].focus();
+      const label = this.tabs[lastIndex].dataset.label;
+      this.manager.syncTabs(label);
+    }
+  }
+
+  handleResize() {
+    if (this.resizeTimeout) {
+      cancelAnimationFrame(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = requestAnimationFrame(() => {
+      this.updateIndicator(false);
+      this.updateScrollIndicators();
+    });
+  }
+
+  activateTab(index, animate = true) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    this.activeIndex = index;
+
+    this.tabs.forEach((tab, i) => {
+      const isActive = i === index;
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
+    });
+
+    this.panels.forEach((panel, i) => {
+      const isActive = i === index;
+      panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+    });
+
+    this.updateIndicator(animate);
+  }
+
+  activateTabByLabel(label, animate = true) {
+    const index = this.tabs.findIndex(tab =>
+      tab.dataset.label.toLowerCase() === label.toLowerCase()
+    );
+
+    if (index !== -1 && index !== this.activeIndex) {
+      this.activateTab(index, animate);
+    }
+  }
+
+  activateNextTab() {
+    const nextIndex = (this.activeIndex + 1) % this.tabs.length;
+    this.activateTab(nextIndex, true);
+  }
+
+  activatePreviousTab() {
+    const prevIndex = (this.activeIndex - 1 + this.tabs.length) % this.tabs.length;
+    this.activateTab(prevIndex, true);
+  }
+
+  updateIndicator(animate = true) {
+    if (!this.indicator || !this.tabs[this.activeIndex]) return;
+
+    const activeTab = this.tabs[this.activeIndex];
+    const tabListRect = this.tabList.getBoundingClientRect();
+    const activeTabRect = activeTab.getBoundingClientRect();
+
+    const left = activeTabRect.left - tabListRect.left + this.tabList.scrollLeft;
+    const width = activeTabRect.width;
+
+    this.indicator.style.width = `${width}px`;
+    this.indicator.style.transform = `translateX(${left}px)`;
+
+    if (!animate) {
+      this.indicator.style.transition = 'none';
+      void this.indicator.offsetWidth;
+      this.indicator.style.transition = '';
+    }
+  }
+
+  updateScrollIndicators() {
+    if (!this.tabList || !this.scrollContainer) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = this.tabList;
+    const hasOverflow = scrollWidth > clientWidth;
+
+    if (!hasOverflow) {
+      this.scrollContainer.classList.remove('can-scroll-left', 'can-scroll-right');
+      return;
+    }
+
+    const canScrollLeft = scrollLeft > 5;
+    this.scrollContainer.classList.toggle('can-scroll-left', canScrollLeft);
+
+    const canScrollRight = scrollLeft < scrollWidth - clientWidth - 5;
+    this.scrollContainer.classList.toggle('can-scroll-right', canScrollRight);
+  }
+
+  async handleCopy() {
+    const activePanel = this.panels[this.activeIndex];
+    if (!activePanel) return;
+
+    const codeText = activePanel.dataset.code || '';
+
+    try {
+      await this.copyToClipboard(codeText);
+      this.showCopySuccess();
+    } catch (error) {
+      console.warn('Failed to copy code:', error);
+    }
+  }
+
+  async copyToClipboard(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+    }
+  }
+
+  showCopySuccess() {
+    if (!this.copyButton) return;
+
+    const iconEl = this.copyButton.querySelector('.docyard-code-group__copy-icon');
+    const textEl = this.copyButton.querySelector('.docyard-code-group__copy-text');
+
+    if (!iconEl || !textEl) return;
+
+    const originalIcon = iconEl.innerHTML;
+    const originalText = textEl.textContent;
+
+    iconEl.innerHTML = this.checkIcon;
+    textEl.textContent = 'Copied';
+    this.copyButton.classList.add('is-success');
+
+    setTimeout(() => {
+      iconEl.innerHTML = originalIcon;
+      textEl.textContent = originalText;
+      this.copyButton.classList.remove('is-success');
+    }, 2000);
+  }
+}
+
+function initializeCodeGroups() {
+  new CodeGroupManager();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeCodeGroups);
+} else {
+  initializeCodeGroups();
+}

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