docyard 0.8.0 → 1.0.0

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

@@ -0,0 +1,125 @@
+.docyard-filetree {
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  margin: var(--spacing-4) 0;
+}
+
+.docyard-filetree__list {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.docyard-filetree__list .docyard-filetree__list {
+  margin-left: var(--spacing-1) !important;
+  padding-left: var(--spacing-4) !important;
+  border-left: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.docyard-filetree__item {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.docyard-filetree__entry {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2);
+  margin: 0 calc(-1 * var(--spacing-2));
+  border-radius: var(--radius-md);
+  cursor: default;
+  white-space: nowrap;
+  transition: background-color 0.15s ease;
+}
+
+.docyard-filetree__item--folder.docyard-filetree__item--has-children > .docyard-filetree__entry {
+  cursor: pointer;
+  user-select: none;
+}
+
+.docyard-filetree__item--folder.docyard-filetree__item--has-children > .docyard-filetree__entry:hover {
+  background-color: var(--muted);
+}
+
+.docyard-filetree__item--folder.docyard-filetree__item--has-children > .docyard-filetree__entry:active {
+  background-color: oklch(from var(--muted) calc(l - 0.05) c h);
+  transform: scale(0.995);
+  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s ease;
+}
+
+.docyard-filetree__entry .docyard-icon,
+.docyard-filetree__entry i[class*="ph-"] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.docyard-filetree__entry .docyard-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.docyard-filetree__entry .ph-folder-open,
+.docyard-filetree__entry .ph-folder {
+  color: var(--muted-foreground);
+}
+
+.docyard-filetree__entry .ph-file-text {
+  color: var(--muted-foreground);
+  opacity: 0.6;
+}
+
+.docyard-filetree__name {
+  color: var(--foreground);
+  transition: color 0.15s ease;
+}
+
+.docyard-filetree__item--folder > .docyard-filetree__entry .docyard-filetree__name {
+  font-weight: var(--font-medium);
+}
+
+.docyard-filetree__item--folder.docyard-filetree__item--has-children > .docyard-filetree__entry:hover .docyard-filetree__name {
+  color: var(--foreground);
+}
+
+.docyard-filetree__comment {
+  color: var(--muted-foreground);
+  font-style: italic;
+  margin-left: var(--spacing-2);
+  opacity: 0.7;
+  font-size: var(--text-sm);
+}
+
+.docyard-filetree__item--highlighted > .docyard-filetree__entry {
+  background-color: oklch(from var(--primary) l c h / 10%);
+}
+
+.docyard-filetree__item--highlighted > .docyard-filetree__entry .docyard-filetree__name {
+  color: var(--primary);
+}
+
+.docyard-filetree__item--highlighted > .docyard-filetree__entry:hover {
+  background-color: oklch(from var(--primary) l c h / 15%);
+}
+
+.docyard-filetree__item--collapsed > .docyard-filetree__list {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .docyard-filetree {
+    font-size: var(--text-sm);
+  }
+
+  .docyard-filetree__list .docyard-filetree__list {
+    padding-left: var(--spacing-3) !important;
+  }
+}

data/lib/docyard/templates/assets/css/components/heading-anchor.css

@@ -5,8 +5,6 @@
 .content h6[id] {
   position: relative;
   scroll-margin-top: calc(var(--header-height) + var(--spacing-6));
-  display: flex;
-  align-items: center;
 }
 
 .has-tabs .content h2[id],
@@ -18,6 +16,7 @@
 }
 
 @media (max-width: 1280px) and (min-width: 1025px) {
+
   .content h2[id],
   .content h3[id],
   .content h4[id],
@@ -28,10 +27,11 @@
 }
 
 .heading-anchor {
-  order: -1;
-  font-size: 1.5rem;
-  margin-right: 0.5rem;
-  margin-left: -1.625rem;
+  position: absolute;
+  left: -1.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.25rem;
   font-weight: var(--font-normal);
   color: var(--primary);
   text-decoration: none !important;
@@ -39,8 +39,6 @@
   transition: opacity var(--transition-fast);
   cursor: pointer;
   user-select: none;
-  display: flex;
-  align-items: center;
 }
 
 .heading-anchor:hover,
@@ -69,12 +67,22 @@
 }
 
 @media (max-width: 1024px) {
+  .content h2[id],
+  .content h3[id],
+  .content h4[id],
+  .content h5[id],
+  .content h6[id] {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
   .heading-anchor {
-    order: 1;
-    margin-left: var(--spacing-3);
-    font-size: 1.3rem;
-    margin-right: 0;
-    opacity: 0.6;
+    position: static;
+    margin-left: var(--spacing-2);
+    font-size: 1.1rem;
+    opacity: 0.4;
+    transform: none;
   }
 
   .heading-anchor:hover,

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

@@ -1,3 +1,8 @@
+i[class*="ph-"] {
+  font-size: 1.15em;
+  vertical-align: -0.15em;
+}
+
 .docyard-icon {
   display: inline-flex;
   align-items: center;

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

@@ -0,0 +1,65 @@
+.docyard-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: oklch(from var(--background) l c h / 75%);
+  backdrop-filter: blur(16px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  cursor: zoom-out;
+}
+
+.docyard-lightbox.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.docyard-lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border);
+  transform: scale(0.95);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  cursor: default;
+}
+
+.docyard-lightbox.active img {
+  transform: scale(1);
+}
+
+.docyard-lightbox-close {
+  position: absolute;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-4xl);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.docyard-lightbox-close:hover {
+  color: var(--foreground);
+  background-color: var(--muted);
+}
+
+.dark .docyard-lightbox-close:hover {
+  background-color: oklch(from var(--muted) l c h / 50%);
+}
+
+.docyard-lightbox-close svg {
+  width: 18px;
+  height: 18px;
+}

data/lib/docyard/templates/assets/css/components/nav-menu.css

@@ -33,17 +33,23 @@
   background: var(--background);
   border-bottom: 1px solid var(--border);
   z-index: calc(var(--z-dropdown) + 1);
-  transform: translateY(-8px);
+  transform: scale(0.98) translateY(-8px);
+  transform-origin: top center;
   opacity: 0;
   pointer-events: none;
-  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+  transition:
+    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.12s ease-out;
   box-shadow: var(--shadow-lg);
 }
 
 .nav-menu-dropdown.is-open {
-  transform: translateY(0);
+  transform: scale(1) translateY(0);
   opacity: 1;
   pointer-events: auto;
+  transition:
+    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease-out;
 }
 
 .nav-menu-content {
@@ -96,7 +102,8 @@
   opacity: 0.7;
 }
 
-.nav-menu-item-icon .docyard-icon {
+.nav-menu-item-icon .docyard-icon,
+.nav-menu-item-icon i[class*="ph-"] {
   width: 18px;
   height: 18px;
 }
@@ -225,6 +232,15 @@
   }
 }
 
+/* Adjust dropdown position when announcement banner is visible */
+body.has-announcement .nav-menu-overlay {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
+body.has-announcement .nav-menu-dropdown {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .nav-menu-overlay,

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

@@ -43,6 +43,10 @@
   height: 1rem;
 }
 
+.nav-section-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .sidebar nav ul {
   list-style: none;
   padding: 0;
@@ -242,11 +246,19 @@
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+.nav-group-icon i[class*="ph-"] {
+  display: inline-block;
+  font-size: 1rem;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
   transform: rotate(90deg);
 }
 
-[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon {
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon .docyard-icon,
+[data-nav-toggle][aria-expanded="false"] .nav-group-icon i[class*="ph-"] {
   transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
 }
 
@@ -302,6 +314,10 @@
   height: 1rem;
 }
 
+.nav-item-icon i[class*="ph-"] {
+  font-size: 1rem;
+}
+
 .nav-item-text {
   flex: 1;
   min-width: 0;
@@ -322,17 +338,30 @@
   height: 0.75rem;
 }
 
+.nav-item-external i[class*="ph-"] {
+  font-size: 0.75rem;
+}
+
 @media (prefers-reduced-motion: reduce) {
 
   .sidebar nav a,
   .nav-group-header,
   .nav-group-icon .docyard-icon,
+  .nav-group-icon i[class*="ph-"],
   .nav-group-children,
   .mobile-menu-toggle {
     transition: none;
   }
 
-  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon {
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon .docyard-icon,
+  [data-nav-toggle][aria-expanded="true"] .nav-group-icon i[class*="ph-"] {
     transform: none;
   }
 }
+
+.sidebar .docyard-badge {
+  margin-left: auto;
+  flex-shrink: 0;
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.625rem;
+}

data/lib/docyard/templates/assets/css/components/page-actions.css

@@ -0,0 +1,131 @@
+.page-actions {
+  margin-top: var(--spacing-6);
+  padding-top: var(--spacing-4);
+  border-top: 1px solid var(--border);
+}
+
+.page-actions__copy-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: 0;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__copy-btn:hover {
+  color: var(--foreground);
+}
+
+.page-actions__copy-btn .docyard-icon,
+.page-actions__copy-btn i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__copy-btn i[class*="ph-"] {
+  display: inline-block;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.page-actions__copy-btn.is-copied i[class*="ph-"] {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn.is-copied .page-actions__copy-text {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn i.icon-animate-in {
+  animation: iconPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.page-actions__copy-btn i.icon-animate-out {
+  animation: iconPopOut 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes iconPopIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes iconPopOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+.page-actions__edit-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__edit-link:hover {
+  color: var(--foreground);
+}
+
+.page-actions__edit-link .docyard-icon,
+.page-actions__edit-link i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__last-updated {
+  margin-top: var(--spacing-3);
+  font-size: var(--text-xs);
+  color: oklch(from var(--muted-foreground) l c h / 80%);
+}
+
+.page-actions__last-updated time {
+  cursor: help;
+  border-bottom: 1px dotted currentColor;
+}
+
+.page-actions-mobile {
+  display: none;
+}
+
+@media (max-width: 1280px) {
+  .page-actions-mobile {
+    display: block;
+    margin-top: var(--spacing-12);
+    text-align: center;
+  }
+
+  .page-actions-mobile .page-actions {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  .page-actions-mobile .page-actions__copy-btn,
+  .page-actions-mobile .page-actions__edit-link {
+    width: 100%;
+    justify-content: center;
+  }
+}

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

@@ -56,30 +56,32 @@
   justify-content: flex-end;
 }
 
-.pager-label .docyard-icon {
+.pager-label .docyard-icon,
+.pager-label i[class*="ph-"] {
   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 {
+.pager-label .docyard-icon svg,
+.pager-label i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
 }
 
-.pager-link.prev .pager-label .docyard-icon {
-  transform: translateX(6px);
+.pager-link:hover .pager-label .docyard-icon,
+.pager-link:hover .pager-label i[class*="ph-"] {
+  opacity: 1;
 }
 
-.pager-link.next .pager-label .docyard-icon {
-  transform: translateX(-6px);
+.pager-link.prev:hover .pager-label .docyard-icon,
+.pager-link.prev:hover .pager-label i[class*="ph-"] {
+  transform: translateX(-4px);
 }
 
-.pager-link:hover .pager-label .docyard-icon {
-  opacity: 1;
-  transform: translateX(0);
+.pager-link.next:hover .pager-label .docyard-icon,
+.pager-link.next:hover .pager-label i[class*="ph-"] {
+  transform: translateX(4px);
 }
 
 .pager-title {
@@ -101,14 +103,9 @@
     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;
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
+    opacity: 0.5;
   }
 
   .pager-title {
@@ -119,7 +116,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .pager-link,
-  .pager-label .docyard-icon {
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
     transition: none;
   }
 }

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

@@ -134,6 +134,7 @@
   transform: scale(0.95) translateY(-10px);
   opacity: 0;
   transition: transform var(--transition-base), opacity var(--transition-fast);
+  will-change: transform, opacity;
 }
 
 .search-modal.is-open .search-modal-container {
@@ -247,14 +248,8 @@
   opacity: 0.4;
 }
 
-.search-empty-icon .docyard-icon {
-  width: 4rem;
-  height: 4rem;
-}
-
-.search-empty-icon .docyard-icon svg {
-  width: 100%;
-  height: 100%;
+.search-empty-icon {
+  font-size: var(--text-3xl);
 }
 
 .search-empty-title {
@@ -490,7 +485,7 @@
 
 @media (max-width: 1024px) {
 
-  
+
   .search-trigger {
     min-width: auto;
     width: 2.25rem;
@@ -515,7 +510,8 @@
     display: none;
   }
 
-  .search-trigger-icon .docyard-icon {
+  .search-trigger-icon .docyard-icon,
+  .search-trigger-icon i[class*="ph-"] {
     width: 1.25rem;
     height: 1.25rem;
   }