docyard 0.8.0 → 0.9.0

data/lib/docyard/navigation/sidebar/metadata_extractor.rb

@@ -23,12 +23,14 @@ module Docyard
       end
 
       def extract_frontmatter_metadata(file_path)
-        return { text: nil, icon: nil } unless File.exist?(file_path)
+        return { text: nil, icon: nil, badge: nil, badge_type: nil } unless File.exist?(file_path)
 
         markdown = Markdown.new(File.read(file_path))
         {
           text: markdown.sidebar_text || markdown.title,
-          icon: markdown.sidebar_icon
+          icon: markdown.sidebar_icon,
+          badge: markdown.sidebar_badge,
+          badge_type: markdown.sidebar_badge_type
         }
       end
 

data/lib/docyard/navigation/sidebar/metadata_reader.rb

@@ -12,7 +12,9 @@ module Docyard
           title: markdown.sidebar_text || markdown.title,
           icon: markdown.sidebar_icon,
           collapsed: markdown.sidebar_collapsed,
-          order: markdown.sidebar_order
+          order: markdown.sidebar_order,
+          badge: markdown.sidebar_badge,
+          badge_type: markdown.sidebar_badge_type
         }
       rescue StandardError
         empty_file_metadata
@@ -27,7 +29,9 @@ module Docyard
           sidebar_text: markdown.sidebar_text,
           icon: markdown.sidebar_icon,
           collapsed: markdown.sidebar_collapsed,
-          order: markdown.sidebar_order
+          order: markdown.sidebar_order,
+          badge: markdown.sidebar_badge,
+          badge_type: markdown.sidebar_badge_type
         }
       rescue StandardError
         empty_index_metadata
@@ -36,11 +40,11 @@ module Docyard
       private
 
       def empty_file_metadata
-        { title: nil, icon: nil, collapsed: nil, order: nil }
+        { title: nil, icon: nil, collapsed: nil, order: nil, badge: nil, badge_type: nil }
       end
 
       def empty_index_metadata
-        { sidebar_text: nil, icon: nil, collapsed: nil, order: nil }
+        { sidebar_text: nil, icon: nil, collapsed: nil, order: nil, badge: nil, badge_type: nil }
       end
     end
   end

data/lib/docyard/navigation/sidebar/renderer.rb

@@ -112,7 +112,9 @@ module Docyard
           title: item[:title],
           active: item[:active],
           icon: item[:icon],
-          target: item[:target]
+          target: item[:target],
+          badge: item[:badge],
+          badge_type: item[:badge_type]
         )
       end
 
@@ -136,7 +138,9 @@ module Docyard
           children_html: children_html,
           icon: item[:icon],
           collapsed: item[:collapsed],
-          has_index: item[:has_index]
+          has_index: item[:has_index],
+          badge: item[:badge],
+          badge_type: item[:badge_type]
         )
       end
     end

data/lib/docyard/navigation/sidebar/tree_builder.rb

@@ -132,7 +132,8 @@ module Docyard
 
         { title: metadata[:title] || title_extractor.extract(full_file_path),
           path: url_path, icon: metadata[:icon], active: current_path == url_path,
-          type: :file, order: metadata[:order], children: [] }
+          type: :file, order: metadata[:order], badge: metadata[:badge],
+          badge_type: metadata[:badge_type], children: [] }
       end
     end
   end

data/lib/docyard/rendering/icons/phosphor.rb

@@ -8,6 +8,9 @@ module Docyard
     # Licensed under MIT License (see LICENSE.phosphor)
     PHOSPHOR = {
       "regular" => {
+        "folder" => '<path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"/>',
+        "folder-open" => '<path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Zm112,136H43.1l26.67-80H232Z"/>',
+        "file-text" => '<path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/>',
         "heart" => '<path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"/>',
         "arrow-right" => '<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/>',
         "arrow-left" => '<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"/>',

data/lib/docyard/rendering/markdown.rb

@@ -6,15 +6,27 @@ require "yaml"
 require_relative "../components/registry"
 require_relative "../components/base_processor"
 require_relative "../components/processors/callout_processor"
+require_relative "../components/processors/accordion_processor"
+require_relative "../components/processors/badge_processor"
+require_relative "../components/processors/steps_processor"
+require_relative "../components/processors/cards_processor"
 require_relative "../components/processors/tabs_processor"
+require_relative "../components/processors/code_group_processor"
 require_relative "../components/processors/icon_processor"
 require_relative "../components/processors/code_block_processor"
 require_relative "../components/processors/code_snippet_import_preprocessor"
+require_relative "../components/processors/include_processor"
 require_relative "../components/processors/code_block_options_preprocessor"
 require_relative "../components/processors/code_block_diff_preprocessor"
 require_relative "../components/processors/code_block_focus_preprocessor"
 require_relative "../components/processors/table_wrapper_processor"
 require_relative "../components/processors/heading_anchor_processor"
+require_relative "../components/processors/custom_anchor_processor"
+require_relative "../components/processors/image_caption_processor"
+require_relative "../components/processors/video_embed_processor"
+require_relative "../components/processors/file_tree_processor"
+require_relative "../components/processors/abbreviation_processor"
+require_relative "../components/processors/tooltip_processor"
 require_relative "../components/processors/table_of_contents_processor"
 require_relative "../components/aliases"
 
@@ -24,9 +36,10 @@ module Docyard
 
     attr_reader :raw, :config
 
-    def initialize(raw, config: nil)
+    def initialize(raw, config: nil, file_path: nil)
       @raw = raw.freeze
       @config = config
+      @file_path = file_path
       @context = {}
     end
 
@@ -66,6 +79,14 @@ module Docyard
       frontmatter.dig("sidebar", "order")
     end
 
+    def sidebar_badge
+      frontmatter.dig("sidebar", "badge")
+    end
+
+    def sidebar_badge_type
+      frontmatter.dig("sidebar", "badge_type")
+    end
+
     def toc
       @context[:toc] || []
     end
@@ -87,6 +108,8 @@ module Docyard
 
     def render_html
       @context[:config] = config&.data
+      @context[:current_file] = @file_path
+      @context[:docs_root] = "docs"
 
       preprocessed_content = Components::Registry.run_preprocessors(content, @context)
 

data/lib/docyard/rendering/renderer.rb

@@ -23,7 +23,7 @@ module Docyard
 
     def render_file(file_path, sidebar_html: "", prev_next_html: "", breadcrumbs: nil, branding: {},
                     template_options: {}, current_path: "/")
-      markdown = Markdown.new(File.read(file_path), config: config)
+      markdown = Markdown.new(File.read(file_path), config: config, file_path: file_path)
 
       render(
         content: strip_md_from_links(markdown.html),
@@ -120,6 +120,7 @@ module Docyard
       @copyright = branding[:copyright]
       @social = branding[:social] || []
       @header_ctas = branding[:header_ctas] || []
+      @announcement = branding[:announcement]
     end
 
     def assign_tabs(branding, current_path)

data/lib/docyard/server/asset_handler.rb

@@ -12,6 +12,7 @@ module Docyard
       ".jpeg" => "image/jpeg",
       ".gif" => "image/gif",
       ".webp" => "image/webp",
+      ".avif" => "image/avif",
       ".svg" => "image/svg+xml",
       ".woff" => "font/woff",
       ".woff2" => "font/woff2",

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

@@ -0,0 +1,86 @@
+.docyard-abbr {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--muted-foreground);
+  text-underline-offset: 3px;
+  cursor: help;
+  position: relative;
+}
+
+.docyard-abbr:hover {
+  text-decoration-color: var(--primary);
+}
+
+.docyard-abbr-popover {
+  position: absolute;
+  z-index: 1000;
+  width: max-content;
+  max-width: 280px;
+  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-abbr-popover.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.docyard-abbr-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-abbr-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);
+}
+
+.docyard-abbr-popover__term {
+  display: block;
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  margin-bottom: var(--spacing-1);
+}
+
+.docyard-abbr-popover__definition {
+  display: block;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading-relaxed);
+}
+
+@media (max-width: 640px) {
+  .docyard-abbr-popover {
+    max-width: 240px;
+    padding: var(--spacing-2) var(--spacing-3);
+  }
+
+  .docyard-abbr-popover__term,
+  .docyard-abbr-popover__definition {
+    font-size: var(--text-xs);
+  }
+}

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

@@ -0,0 +1,138 @@
+.docyard-accordion {
+  margin: var(--spacing-4) 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background-color: var(--card);
+}
+
+.docyard-accordion__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+  font-weight: var(--font-medium);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  list-style: none;
+  transition: background-color var(--transition-fast);
+  border-radius: var(--radius-xl);
+}
+
+.docyard-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+
+.docyard-accordion__summary::marker {
+  display: none;
+  content: "";
+}
+
+.docyard-accordion__summary:hover {
+  background-color: var(--accent);
+}
+
+.docyard-accordion__summary:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.docyard-accordion[open] .docyard-accordion__summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.docyard-accordion__icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
+  transition: transform var(--transition-fast);
+}
+
+.docyard-accordion__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.docyard-accordion[open] .docyard-accordion__icon {
+  transform: rotate(90deg);
+}
+
+.docyard-accordion__title {
+  flex: 1;
+}
+
+.docyard-accordion__content {
+  padding: var(--spacing-4);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+  line-height: var(--leading-relaxed);
+  border-top: 1px solid var(--border);
+}
+
+.docyard-accordion__content > *:first-child {
+  margin-top: 0;
+}
+
+.docyard-accordion__content > *:last-child {
+  margin-bottom: 0;
+}
+
+.docyard-accordion__content a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.docyard-accordion__content a:hover {
+  color: var(--foreground);
+}
+
+.docyard-accordion__content pre {
+  margin: var(--spacing-4) 0;
+  border-radius: var(--radius-lg);
+}
+
+.docyard-accordion__content :not(pre) > code {
+  background-color: var(--muted);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875em;
+}
+
+.docyard-accordion + .docyard-accordion {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.docyard-accordion + .docyard-accordion .docyard-accordion__summary {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.docyard-accordion:has(+ .docyard-accordion) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+
+.docyard-accordion:has(+ .docyard-accordion) .docyard-accordion__summary {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .docyard-accordion__icon {
+    transition: none;
+  }
+
+  .docyard-accordion__summary {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,47 @@
+.docyard-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-normal);
+  border-radius: var(--radius-4xl);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.docyard-badge--default {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.docyard-badge--success {
+  background-color: var(--callout-tip-background);
+  color: var(--callout-tip-foreground);
+  border: 1px solid var(--callout-tip-border);
+}
+
+.docyard-badge--warning {
+  background-color: var(--callout-warning-background);
+  color: var(--callout-warning-foreground);
+  border: 1px solid var(--callout-warning-border);
+}
+
+.docyard-badge--danger {
+  background-color: var(--callout-danger-background);
+  color: var(--callout-danger-foreground);
+  border: 1px solid var(--callout-danger-border);
+}
+
+h1 .docyard-badge,
+h2 .docyard-badge,
+h3 .docyard-badge,
+h4 .docyard-badge,
+h5 .docyard-badge,
+h6 .docyard-badge {
+  margin-left: var(--spacing-2);
+  font-size: var(--text-xs);
+  vertical-align: middle;
+  position: relative;
+  top: -0.1em;
+}

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

@@ -0,0 +1,202 @@
+.docyard-announcement {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4rem 3rem;
+  background: linear-gradient(135deg, oklch(0.68 0.13 215) 0%, var(--primary) 15%, var(--primary) 85%, oklch(0.52 0.10 225) 100%);
+  color: white;
+  font-size: var(--text-sm);
+  z-index: 9999;
+}
+
+.docyard-announcement.is-dismissed {
+  animation: docyard-announcement-exit 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes docyard-announcement-exit {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+body.has-announcement {
+  --announcement-height: 2rem;
+}
+
+body.has-announcement .header {
+  top: var(--announcement-height);
+}
+
+body.has-announcement .tab-bar {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
+body.has-announcement .sidebar {
+  top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
+  height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--announcement-height));
+}
+
+body.has-announcement .doc-aside {
+  top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
+}
+
+body.has-announcement .secondary-header {
+  top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
+}
+
+body.has-announcement .layout {
+  padding-top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height));
+}
+
+body.has-announcement:not(.has-tabs) .sidebar {
+  top: calc(var(--header-height) + var(--announcement-height));
+  height: calc(100vh - var(--header-height) - var(--announcement-height));
+}
+
+body.has-announcement:not(.has-tabs) .doc-aside {
+  top: calc(var(--header-height) + var(--announcement-height));
+}
+
+body.has-announcement:not(.has-tabs) .layout {
+  padding-top: calc(var(--header-height) + var(--announcement-height));
+}
+
+.docyard-announcement__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.docyard-announcement__text {
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.docyard-announcement__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: white;
+  text-decoration: none;
+  min-width: 0;
+  transition: gap 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.docyard-announcement__link:hover {
+  gap: 0.5rem;
+  color: white;
+}
+
+.docyard-announcement__link .icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.docyard-announcement__link:hover .icon {
+  transform: translateX(2px);
+}
+
+.docyard-announcement[data-has-button="true"] .docyard-announcement__link .icon {
+  display: none;
+}
+
+.docyard-announcement__button {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0.175rem 0.625rem;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 9999px;
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-decoration: none;
+  backdrop-filter: blur(4px);
+  transition:
+    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.docyard-announcement__button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.4);
+  color: white;
+}
+
+.docyard-announcement__button:active {
+  transform: scale(0.95);
+  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.docyard-announcement__dismiss {
+  position: absolute;
+  right: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-4xl);
+  color: white;
+  cursor: pointer;
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+
+.docyard-announcement__dismiss:hover {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.docyard-announcement__dismiss .icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+@media (max-width: 768px) {
+  .docyard-announcement {
+    padding: 0.4rem 2.5rem;
+    font-size: var(--text-xs);
+  }
+
+  .docyard-announcement__content {
+    gap: 0.5rem;
+  }
+
+  .docyard-announcement[data-has-button="true"] .docyard-announcement__link .icon {
+    display: inline-flex;
+  }
+
+  .docyard-announcement__button {
+    display: none;
+  }
+
+  .docyard-announcement__dismiss {
+    right: 0.5rem;
+  }
+}
+
+.dark .docyard-announcement {
+  background: linear-gradient(135deg, oklch(0.78 0.14 210) 0%, var(--primary) 15%, var(--primary) 85%, oklch(0.58 0.11 225) 100%);
+}