docyard 0.5.0 → 0.6.0

data/lib/docyard/icons/file_types.rb

@@ -8,7 +8,6 @@ module Docyard
     # License: CC BY-SA 4.0 (see LICENSE.vscode-icons)
     # Copyright (c) 2016 Roberto Huertas
     module FileTypes
-      # SVG content for each file type icon
       # rubocop:disable Layout/LineLength
       ICONS = {
         "css" => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-labelledby="css-logo-title css-logo-description"><title>CSS Logo</title><g style="display:inline"><path fill="#639" d="M1.995 1.994h23.52a4.48 4.48 0 0 1 4.48 4.48v19.04a4.48 4.48 0 0 1-4.48 4.48H6.475a4.48 4.48 0 0 1-4.48-4.48Z"/><path fill="#fff" d="M9.079 24.87v-4.704c0-1.876 1.204-2.884 3.024-2.884 1.792-.028 2.912 1.148 2.856 3.136h-2.072c.056-.756-.28-1.316-.84-1.288-.7 0-.896.476-.896 1.372v4.088c0 .868.28 1.288.896 1.316.644 0 .896-.644.84-1.372h2.072c.112 2.044-1.176 3.248-2.996 3.22-1.764 0-2.884-.98-2.884-2.884zm6.636-.336h1.932c.028.896.308 1.456.924 1.456.616 0 .84-.364.84-1.204 0-.7-.308-1.092-1.064-1.456l-.728-.336c-1.288-.616-1.82-1.372-1.82-2.884 0-1.68 1.064-2.856 2.8-2.856 1.736 0 2.66 1.204 2.688 3.164h-1.876c0-.812-.168-1.372-.784-1.372-.56 0-.84.28-.84.98s.252.98.924 1.26l.672.308c1.428.672 2.044 1.54 2.044 3.164 0 1.932-1.092 2.996-2.884 2.996-1.792 0-2.8-1.232-2.828-3.22zm6.328 0h1.96c0 .896.308 1.456.896 1.456.588 0 .84-.364.84-1.204 0-.7-.28-1.092-1.064-1.456l-.728-.336c-1.288-.616-1.792-1.372-1.792-2.884 0-1.68 1.036-2.856 2.8-2.856 1.764 0 2.632 1.204 2.688 3.164h-1.876c-.028-.812-.196-1.372-.812-1.372-.56 0-.812.28-.812.98s.224.98.896 1.26l.7.308c1.4.672 2.016 1.54 2.016 3.164 0 1.932-1.092 2.996-2.884 2.996-1.792 0-2.8-1.232-2.828-3.22z"/></g></svg>',
@@ -35,7 +34,6 @@ module Docyard
       }.freeze
       # rubocop:enable Layout/LineLength
 
-      # Map of file extensions/aliases to icon names
       EXTENSIONS = {
         "css" => "css",
         "go" => "go",
@@ -62,10 +60,6 @@ module Docyard
         "postgresql" => "pgsql"
       }.freeze
 
-      # Get the SVG content for a file extension
-      #
-      # @param extension [String] The file extension (e.g., "js", "ts")
-      # @return [String, nil] The SVG content, or nil if not found
       def self.svg(extension)
         icon_name = EXTENSIONS[extension.to_s.downcase]
         return nil unless icon_name
@@ -73,17 +67,10 @@ module Docyard
         ICONS[icon_name]
       end
 
-      # Check if an icon exists for a file extension
-      #
-      # @param extension [String] The file extension to check
-      # @return [Boolean] true if icon exists
       def self.exists?(extension)
         EXTENSIONS.key?(extension.to_s.downcase)
       end
 
-      # Get all available file extensions
-      #
-      # @return [Array<String>] Array of supported extensions
       def self.available
         EXTENSIONS.keys.sort
       end

data/lib/docyard/markdown.rb

@@ -9,6 +9,10 @@ require_relative "components/callout_processor"
 require_relative "components/tabs_processor"
 require_relative "components/icon_processor"
 require_relative "components/code_block_processor"
+require_relative "components/code_snippet_import_preprocessor"
+require_relative "components/code_block_options_preprocessor"
+require_relative "components/code_block_diff_preprocessor"
+require_relative "components/code_block_focus_preprocessor"
 require_relative "components/table_wrapper_processor"
 require_relative "components/heading_anchor_processor"
 require_relative "components/table_of_contents_processor"
@@ -17,10 +21,12 @@ module Docyard
   class Markdown
     FRONTMATTER_REGEX = /\A---\s*\n(.*?\n)---\s*\n/m
 
-    attr_reader :raw
+    attr_reader :raw, :config
 
-    def initialize(raw)
+    def initialize(raw, config: nil)
       @raw = raw.freeze
+      @config = config
+      @context = {}
     end
 
     def frontmatter
@@ -56,7 +62,7 @@ module Docyard
     end
 
     def toc
-      @toc ||= Thread.current[:docyard_toc] || []
+      @context[:toc] || []
     end
 
     private
@@ -75,7 +81,9 @@ module Docyard
     end
 
     def render_html
-      preprocessed_content = Components::Registry.run_preprocessors(content)
+      @context[:config] = config&.data
+
+      preprocessed_content = Components::Registry.run_preprocessors(content, @context)
 
       raw_html = Kramdown::Document.new(
         preprocessed_content,
@@ -85,7 +93,7 @@ module Docyard
         parse_block_html: true
       ).to_html
 
-      Components::Registry.run_postprocessors(raw_html)
+      Components::Registry.run_postprocessors(raw_html, @context)
     end
   end
 end

data/lib/docyard/rack_application.rb

@@ -13,7 +13,7 @@ module Docyard
       @file_watcher = file_watcher
       @config = config
       @router = Router.new(docs_path: docs_path)
-      @renderer = Renderer.new(base_url: config&.build&.base_url || "/")
+      @renderer = Renderer.new(base_url: config&.build&.base_url || "/", config: config)
       @asset_handler = AssetHandler.new
     end
 

data/lib/docyard/renderer.rb

@@ -9,16 +9,17 @@ module Docyard
     ERRORS_PATH = File.join(__dir__, "templates", "errors")
     PARTIALS_PATH = File.join(__dir__, "templates", "partials")
 
-    attr_reader :layout_path, :base_url
+    attr_reader :layout_path, :base_url, :config
 
-    def initialize(layout: "default", base_url: "/")
+    def initialize(layout: "default", base_url: "/", config: nil)
       @layout_path = File.join(LAYOUTS_PATH, "#{layout}.html.erb")
       @base_url = normalize_base_url(base_url)
+      @config = config
     end
 
     def render_file(file_path, sidebar_html: "", prev_next_html: "", branding: {})
       markdown_content = File.read(file_path)
-      markdown = Markdown.new(markdown_content)
+      markdown = Markdown.new(markdown_content, config: config)
 
       html_content = strip_md_from_links(markdown.html)
       toc = markdown.toc

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

@@ -42,12 +42,16 @@
   margin: 0;
 }
 
-.highlight,
-.highlight .w {
+.highlight {
   color: #24292f;
   background-color: #f6f8fa;
 }
 
+.highlight .w {
+  color: #24292f;
+  background-color: transparent;
+}
+
 /* Keywords */
 .highlight .k,
 .highlight .kd,
@@ -214,12 +218,16 @@
 }
 
 /* Dark Mode Syntax Highlighting - GitHub Dark */
-.dark .highlight,
-.dark .highlight .w {
+.dark .highlight {
   color: #e6edf3;
   background-color: #161b22;
 }
 
+.dark .highlight .w {
+  color: #e6edf3;
+  background-color: transparent;
+}
+
 /* Keywords */
 .dark .highlight .k,
 .dark .highlight .kd,

data/lib/docyard/templates/assets/css/components/code-block.css

@@ -1,4 +1,4 @@
-/* Code Block Component with Copy Button */
+/* Code Block Component */
 
 .docyard-code-block {
   position: relative;
@@ -9,17 +9,410 @@
   margin: 0;
 }
 
-/* Inside tabs - remove wrapper margin when code block is only child */
-.docyard-tabs__panel:has(> [class*="language-"]:only-child) .docyard-code-block {
+/* Titled Code Block Layout */
+.docyard-code-block--titled {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block--titled .docyard-code-block__body {
+  display: block;
+}
+
+.docyard-code-block--titled .docyard-code-block__content {
+  display: block;
+}
+
+.docyard-code-block--titled .highlight {
   margin: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
 }
 
-/* Inside tabs with mixed content - use normal spacing */
-.docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) .docyard-code-block {
-  margin: var(--space-4) 0;
+.docyard-code-block--titled .highlight pre {
+  margin: 0;
+}
+
+.docyard-code-block--titled .highlight pre code {
+  display: block;
+  padding: var(--space-4);
+}
+
+/* Code Block Header */
+.docyard-code-block__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+}
+
+.docyard-code-block__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.docyard-code-block__icon .docyard-icon {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+}
+
+.docyard-code-block__icon .docyard-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.docyard-code-block__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Copy button in header */
+.docyard-code-block__header .docyard-code-block__copy {
+  position: relative;
+  top: auto;
+  right: auto;
+  flex-shrink: 0;
+}
+
+/* Body wrapper for titled blocks */
+.docyard-code-block__body {
+  position: relative;
+}
+
+/* Line Numbers Layout */
+.docyard-code-block--line-numbers {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--line-numbers .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--line-numbers .highlight {
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.docyard-code-block__lines {
+  flex-shrink: 0;
+  padding: var(--space-4) 0;
+  border-right: 1px solid var(--color-border);
+  text-align: right;
+  user-select: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block__lines span {
+  display: block;
+  padding: 0 var(--space-3);
+  min-width: 2.5rem;
+}
+
+.docyard-code-block__content {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* Line Highlighting */
+.docyard-code-line {
+  display: block;
+}
+
+.docyard-code-line--highlighted {
+  background-color: rgba(var(--color-primary-rgb), 0.1);
+  border-left: 3px solid var(--color-primary);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Highlighted line number */
+.docyard-code-block__line--highlighted {
+  background-color: rgba(var(--color-primary-rgb), 0.15);
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* Diff line styles */
+.docyard-code-line--diff-add {
+  background-color: var(--color-diff-add-bg);
+  border-left: 3px solid var(--color-diff-add-border);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+.docyard-code-line--diff-remove {
+  background-color: var(--color-diff-remove-bg);
+  border-left: 3px solid var(--color-diff-remove-border);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Error/Warning line styles */
+.docyard-code-line--error {
+  background-color: var(--color-code-error-bg, rgba(239, 68, 68, 0.15));
+  border-left: 3px solid var(--color-code-error-border, #ef4444);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+.docyard-code-line--warning {
+  background-color: var(--color-code-warning-bg, rgba(245, 158, 11, 0.15));
+  border-left: 3px solid var(--color-code-warning-border, #f59e0b);
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+  padding-left: calc(var(--space-4) - 3px);
+  padding-right: var(--space-4);
+}
+
+/* Diff gutter indicators */
+.docyard-code-block__line--diff-add {
+  background-color: var(--color-diff-add-gutter-bg);
+  color: var(--color-diff-add-indicator);
+  font-weight: 500;
+}
+
+.docyard-code-block__line--diff-remove {
+  background-color: var(--color-diff-remove-gutter-bg);
+  color: var(--color-diff-remove-indicator);
+  font-weight: 500;
+}
+
+/* Error/Warning line number indicators */
+.docyard-code-block__line--error {
+  background-color: var(--color-code-error-gutter-bg, rgba(239, 68, 68, 0.2));
+  color: var(--color-code-error-indicator, #991b1b);
+  font-weight: 500;
+}
+
+.docyard-code-block__line--warning {
+  background-color: var(--color-code-warning-gutter-bg, rgba(245, 158, 11, 0.2));
+  color: var(--color-code-warning-indicator, #78350f);
+  font-weight: 500;
+}
+
+/* Diff-only gutter */
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .highlight {
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.docyard-code-block__diff-gutter {
+  flex-shrink: 0;
+  padding: var(--space-4) 0;
+  border-right: 1px solid var(--color-border);
+  text-align: center;
+  user-select: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  background-color: var(--color-code-bg);
+}
+
+.docyard-code-block__diff-gutter span {
+  display: block;
+  padding: 0 var(--space-2);
+  min-width: 1.5rem;
 }
 
-/* Inside callouts - use callout's spacing */
+.docyard-code-block__diff-indicator--add {
+  background-color: var(--color-diff-add-gutter-bg);
+  color: var(--color-diff-add-indicator);
+  font-weight: 600;
+}
+
+.docyard-code-block__diff-indicator--remove {
+  background-color: var(--color-diff-remove-gutter-bg);
+  color: var(--color-diff-remove-indicator);
+  font-weight: 600;
+}
+
+/* With line numbers - reset margins, they extend via negative margin */
+.docyard-code-block--line-numbers .docyard-code-line {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.docyard-code-block--line-numbers .docyard-code-line--highlighted,
+.docyard-code-block--line-numbers .docyard-code-line--diff-add,
+.docyard-code-block--line-numbers .docyard-code-line--diff-remove,
+.docyard-code-block--line-numbers .docyard-code-line--error,
+.docyard-code-block--line-numbers .docyard-code-line--warning {
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+}
+
+/* With diff gutter - reset margins, they extend via negative margin */
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-add,
+.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-remove {
+  margin-left: calc(-1 * var(--space-4));
+  margin-right: calc(-1 * var(--space-4));
+}
+
+/* Error/Warning blocks without line numbers */
+.docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff),
+.docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-code-bg);
+  overflow: hidden;
+}
+
+.docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight,
+.docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight {
+  border: none;
+  border-radius: 0;
+}
+
+.docyard-code-block__content .highlight {
+  background-color: transparent;
+}
+
+/* Focus Effect */
+.docyard-code-block--has-focus .docyard-code-line {
+  opacity: 0.4;
+  filter: blur(0.5px);
+  transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+.docyard-code-block--has-focus .docyard-code-line.docyard-code-line--focus {
+  opacity: 1;
+  filter: none;
+}
+
+/* On hover, reveal all lines */
+.docyard-code-block--has-focus:hover .docyard-code-line {
+  opacity: 1;
+  filter: none;
+}
+
+/* Dark mode line numbers */
+.dark .docyard-code-block--line-numbers {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__lines {
+  background-color: #161b22;
+  border-right-color: var(--color-border);
+}
+
+/* Dark mode diff */
+.dark .docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__diff-gutter {
+  background-color: #161b22;
+  border-right-color: var(--color-border);
+}
+
+/* Dark mode titled block */
+.dark .docyard-code-block--titled {
+  background-color: #161b22;
+}
+
+.dark .docyard-code-block__header {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Titled block with line numbers */
+.docyard-code-block--titled.docyard-code-block--line-numbers {
+  display: block;
+  border: 1px solid var(--color-border);
+}
+
+.docyard-code-block--titled.docyard-code-block--line-numbers .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--titled.docyard-code-block--line-numbers .highlight {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Titled block with diff */
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
+  display: block;
+  border: 1px solid var(--color-border);
+}
+
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
+  display: flex;
+}
+
+.docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .highlight {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Inside tabs - with :has() support */
+@supports selector(:has(*)) {
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .docyard-code-block {
+    margin: 0;
+  }
+
+  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) .docyard-code-block {
+    margin: var(--space-4) 0;
+  }
+}
+
+/* Inside tabs - fallback for browsers without :has() */
+@supports not selector(:has(*)) {
+  .docyard-tabs__panel .docyard-code-block {
+    margin: var(--space-4) 0;
+  }
+}
+
+/* Inside callouts */
 .docyard-callout__body .docyard-code-block {
   margin: var(--space-4) 0;
 }
@@ -47,14 +440,7 @@
   background-color: var(--color-bg);
   color: var(--color-text-secondary);
   cursor: pointer;
-  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
-  opacity: 0;
-  visibility: hidden;
-}
-
-.docyard-code-block:hover .docyard-code-block__copy {
-  opacity: 1;
-  visibility: visible;
+  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
 }
 
 .docyard-code-block__copy:hover {
@@ -68,8 +454,6 @@
 }
 
 .docyard-code-block__copy:focus-visible {
-  opacity: 1;
-  visibility: visible;
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
@@ -147,11 +531,26 @@
   color: white;
 }
 
-/* Mobile: Always show copy button */
-@media (max-width: 1024px) {
-  .docyard-code-block__copy {
-    opacity: 1;
-    visibility: visible;
+/* Mobile responsive - header */
+@media (max-width: 640px) {
+  .docyard-code-block__header {
+    padding: var(--space-2) var(--space-3);
+    gap: var(--space-2);
+  }
+
+  .docyard-code-block__icon .docyard-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .docyard-code-block__header .docyard-code-block__copy {
+    width: 28px;
+    height: 28px;
+  }
+
+  .docyard-code-block__header .docyard-code-block__copy svg {
+    width: 14px;
+    height: 14px;
   }
 }
 
@@ -166,7 +565,7 @@
   border-color: var(--color-text-tertiary);
 }
 
-/* Keep success state using primary colors in dark mode */
+/* Dark mode success state */
 .dark .docyard-code-block__copy.is-success {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
@@ -182,7 +581,7 @@
   border-color: #ef4444;
 }
 
-/* Reduced motion support - WCAG accessibility requirement */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .docyard-code-block__copy,
   .docyard-code-block__copy svg {
@@ -193,4 +592,8 @@
   .docyard-code-block__copy:active {
     transform: none;
   }
+
+  .docyard-code-block--has-focus .docyard-code-line {
+    transition: none;
+  }
 }

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

@@ -99,15 +99,18 @@
   position: relative;
 }
 
-.sidebar nav ul ul li:has(> a.active)::before {
-  content: '';
-  position: absolute;
-  left: calc(-1 * var(--space-4));
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--color-primary);
-  z-index: 1;
+/* Active indicator with :has() support */
+@supports selector(:has(*)) {
+  .sidebar nav ul ul li:has(> a.active)::before {
+    content: '';
+    position: absolute;
+    left: calc(-1 * var(--space-4));
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--color-primary);
+    z-index: 1;
+  }
 }
 
 .sidebar nav ul ul a {