docyard 0.8.0 → 0.9.0

data/lib/docyard/templates/assets/css/components/prev-next.css

@@ -58,10 +58,8 @@
 
 .pager-label .docyard-icon {
   display: inline-flex;
-  opacity: 0;
-  transition:
-    opacity 0.2s ease,
-    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  opacity: 0.5;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .pager-label .docyard-icon svg {
@@ -69,17 +67,16 @@
   height: 1rem;
 }
 
-.pager-link.prev .pager-label .docyard-icon {
-  transform: translateX(6px);
+.pager-link:hover .pager-label .docyard-icon {
+  opacity: 1;
 }
 
-.pager-link.next .pager-label .docyard-icon {
-  transform: translateX(-6px);
+.pager-link.prev:hover .pager-label .docyard-icon {
+  transform: translateX(-4px);
 }
 
-.pager-link:hover .pager-label .docyard-icon {
-  opacity: 1;
-  transform: translateX(0);
+.pager-link.next:hover .pager-label .docyard-icon {
+  transform: translateX(4px);
 }
 
 .pager-title {
@@ -101,14 +98,8 @@
     padding: var(--spacing-3) var(--spacing-4);
   }
 
-  
   .pager-label .docyard-icon {
-    opacity: 0.6;
-    transform: translateX(0);
-  }
-
-  .pager-link:hover .pager-label .docyard-icon {
-    opacity: 1;
+    opacity: 0.5;
   }
 
   .pager-title {

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

@@ -0,0 +1,122 @@
+.docyard-steps {
+  margin: var(--spacing-6) 0;
+}
+
+.docyard-step {
+  display: flex;
+  gap: var(--spacing-4);
+  position: relative;
+}
+
+.docyard-step:not(.docyard-step--last) {
+  padding-bottom: var(--spacing-6);
+}
+
+.docyard-step__indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.docyard-step__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  flex-shrink: 0;
+}
+
+.docyard-step__connector {
+  width: 2px;
+  flex: 1;
+  background-color: var(--border);
+  margin-top: var(--spacing-2);
+}
+
+.docyard-step__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: var(--spacing-1);
+}
+
+.docyard-step__title {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+  line-height: var(--leading-tight);
+}
+
+.docyard-step__body {
+  margin-top: var(--spacing-3);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading-relaxed);
+}
+
+.docyard-step__body > *:first-child {
+  margin-top: 0;
+}
+
+.docyard-step__body > *:last-child {
+  margin-bottom: 0;
+}
+
+.docyard-step__body p {
+  margin: var(--spacing-2) 0;
+}
+
+.docyard-step__body a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.docyard-step__body a:hover {
+  color: var(--foreground);
+}
+
+.docyard-step__body pre {
+  margin: var(--spacing-4) 0;
+  border-radius: var(--radius-lg);
+}
+
+.docyard-step__body :not(pre) > code {
+  background-color: var(--muted);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875em;
+}
+
+.docyard-step__body ul,
+.docyard-step__body ol {
+  margin: var(--spacing-2) 0;
+  padding-left: var(--spacing-4);
+}
+
+.docyard-step__body li {
+  margin: var(--spacing-1) 0;
+}
+
+@media (max-width: 640px) {
+  .docyard-step {
+    gap: var(--spacing-3);
+  }
+
+  .docyard-step__number {
+    width: 1.75rem;
+    height: 1.75rem;
+    font-size: var(--text-xs);
+  }
+
+  .docyard-step__title {
+    font-size: var(--text-sm);
+  }
+}

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

@@ -90,7 +90,7 @@
   bottom: 0;
   left: 0;
   height: 2px;
-  background: var(--foreground);
+  background: var(--primary);
   border-radius: 1px;
   pointer-events: none;
   z-index: 1;

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

@@ -0,0 +1,113 @@
+.docyard-tooltip {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--muted-foreground);
+  text-underline-offset: 3px;
+  cursor: help;
+  position: relative;
+}
+
+.docyard-tooltip:hover {
+  text-decoration-color: var(--primary);
+}
+
+.docyard-tooltip-popover {
+  position: absolute;
+  z-index: 1000;
+  width: max-content;
+  max-width: 300px;
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow:
+    0 4px 6px -1px oklch(from var(--foreground) l c h / 8%),
+    0 2px 4px -2px oklch(from var(--foreground) l c h / 6%);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+  transition:
+    opacity 0.15s ease,
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.docyard-tooltip-popover.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.docyard-tooltip-popover::after {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: var(--arrow-left, 16px);
+  width: 10px;
+  height: 10px;
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  transform: rotate(45deg);
+}
+
+.docyard-tooltip-popover__term {
+  display: block;
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  margin-bottom: var(--spacing-1);
+}
+
+.docyard-tooltip-popover__description {
+  display: block;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading-relaxed);
+}
+
+.docyard-tooltip-popover__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-top: var(--spacing-2);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.docyard-tooltip-popover__link:hover {
+  color: var(--primary);
+}
+
+.docyard-tooltip-popover__link-icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s ease;
+}
+
+.docyard-tooltip-popover__link:hover .docyard-tooltip-popover__link-icon {
+  transform: translateX(2px);
+}
+
+.docyard-tooltip-popover.is-below::after {
+  top: -6px;
+  bottom: auto;
+  border-bottom: none;
+  border-right: none;
+  border-top: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+}
+
+@media (max-width: 640px) {
+  .docyard-tooltip-popover {
+    max-width: 260px;
+    padding: var(--spacing-2) var(--spacing-3);
+  }
+
+  .docyard-tooltip-popover__term,
+  .docyard-tooltip-popover__description,
+  .docyard-tooltip-popover__link {
+    font-size: var(--text-xs);
+  }
+}

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

@@ -0,0 +1,41 @@
+.docyard-video {
+  position: relative;
+  width: 100%;
+  margin: var(--spacing-6) 0;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  background-color: var(--muted);
+  aspect-ratio: 16 / 9;
+}
+
+.docyard-video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.docyard-video[style*="height"] {
+  aspect-ratio: unset;
+}
+
+.docyard-callout__body .docyard-video {
+  margin: var(--spacing-4) 0;
+}
+
+.docyard-callout__body .docyard-video:first-child {
+  margin-top: 0;
+}
+
+.docyard-callout__body .docyard-video:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 640px) {
+  .docyard-video {
+    margin: var(--spacing-4) 0;
+    border-radius: var(--radius-lg);
+  }
+}

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

@@ -145,14 +145,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) {
   color: var(--foreground);
   font-weight: var(--font-semibold);
   text-decoration: none;
@@ -160,7 +162,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):hover {
   border-bottom: 2px solid var(--primary);
 }
 

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