docyard 0.5.0 → 0.6.0

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

@@ -1,4 +1,4 @@
-/* Tabs Component - Modern Design */
+/* Tabs Component */
 
 .docyard-tabs {
   margin: var(--space-6) 0;
@@ -13,12 +13,16 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Tab List Wrapper - Contains scroll indicators */
+/* Tab List Wrapper */
 .docyard-tabs__list-wrapper {
   position: relative;
   background: var(--color-bg-secondary);
 }
 
+.dark .docyard-tabs__list-wrapper {
+  background: rgba(255, 255, 255, 0.03);
+}
+
 /* Tab List Container */
 .docyard-tabs__list {
   display: flex;
@@ -36,7 +40,7 @@
   display: none;
 }
 
-/* Bottom border line - sits behind tabs */
+/* Bottom border line */
 .docyard-tabs__list::after {
   content: '';
   position: absolute;
@@ -81,7 +85,7 @@
 
 .docyard-tabs__tab[aria-selected="true"] {
   color: var(--color-primary);
-  background: var(--color-bg);
+  background: var(--color-code-bg);
 }
 
 /* Cover the border-bottom for active tab */
@@ -92,11 +96,11 @@
   left: 0;
   right: 0;
   height: 2px;
-  background: var(--color-bg);
+  background: var(--color-code-bg);
   z-index: 2;
 }
 
-/* Focus indicator for keyboard navigation */
+/* Focus state */
 .docyard-tabs__tab:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
@@ -121,7 +125,7 @@
   height: 100%;
 }
 
-/* Scroll Indicators - Gradient overlays showing more content */
+/* Scroll Indicators */
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -151,7 +155,7 @@
   opacity: 1;
 }
 
-/* Slide indicator - vibrant accent line */
+/* Slide Indicator */
 .docyard-tabs__indicator {
   position: absolute;
   top: 0;
@@ -173,11 +177,7 @@
   background: var(--color-bg);
 }
 
-/* If panel has mixed content (not just code block), add padding to panel */
-.docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) {
-  padding: var(--space-6);
-}
-
+/* Panel base styles */
 .docyard-tabs__panel p {
   margin-bottom: 0;
 }
@@ -186,7 +186,7 @@
   display: block;
 }
 
-/* Ensure proper spacing for content inside panels */
+/* Panel content spacing */
 .docyard-tabs__panel>*:first-child {
   margin-top: 0;
 }
@@ -195,43 +195,49 @@
   margin-bottom: 0;
 }
 
-/* Code blocks inside tabs - seamless integration */
-.docyard-tabs__panel .highlight,
-.docyard-tabs__panel pre {
+/* Code blocks inside tabs */
+.docyard-tabs__panel .docyard-code-block {
   margin: 0;
-  border-radius: 0;
-  border: none;
-  padding: 0 !important;
-  background-color: var(--color-bg) !important;
-  box-shadow: none !important;
 }
 
-/* If panel has ONLY code block, add padding to the highlight element */
-.docyard-tabs__panel:has(> [class*="language-"]:only-child) pre {
-  padding: var(--space-6) !important;
+/* Reset code block styling in tabs */
+.docyard-tabs__panel .docyard-code-block .highlight {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 
-/* Apply secondary background when highlighter-rouge has siblings */
-.docyard-tabs__panel .highlighter-rouge:not(:only-child) .highlight pre code {
-  padding: var(--space-4) !important;
-  background-color: var(--color-bg-secondary) !important;
-  border-radius: var(--radius-lg) !important;
-  border: 1px solid var(--color-border) !important;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03) !important;
+/* Panel styles with :has() support */
+@supports selector(:has(*)) {
+  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) {
+    padding: var(--space-6);
+  }
+
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) {
+    background: var(--color-code-bg);
+  }
+
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .highlight pre {
+    padding: var(--space-6);
+    background: transparent;
+  }
 }
 
-.docyard-tabs__panel pre code {
-  padding: 0 !important;
-  display: block;
-  overflow-x: auto;
-  background-color: var(--color-bg) !important;
-  border-radius: 0;
-  border: none !important;
-  box-shadow: none !important;
+/* Fallback for browsers without :has() */
+@supports not selector(:has(*)) {
+  .docyard-tabs__panel {
+    padding: var(--space-6);
+  }
 }
 
-.docyard-tabs__panel pre code .w {
-  background-color: var(--color-bg) !important;
+/* Code blocks with siblings */
+.docyard-tabs__panel .docyard-code-block:not(:only-child) .highlight {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  margin: var(--space-4) 0;
+  background: var(--color-code-bg);
 }
 
 /* Inline code inside tabs */
@@ -242,7 +248,7 @@
   font-size: 0.9em;
 }
 
-/* Mobile responsive - preserve design language */
+/* Mobile responsive */
 @media (max-width: 640px) {
   .docyard-tabs {
     margin: var(--space-4) 0;
@@ -256,7 +262,7 @@
   .docyard-tabs__tab {
     padding: var(--space-3) var(--space-3);
     font-size: var(--font-size-sm);
-    gap: var(--space-1-5);
+    gap: var(--space-2);
   }
 
   .docyard-tabs__icon .docyard-icon {

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

@@ -12,6 +12,7 @@
   --color-border: #e4e7eb;
   --color-border-secondary: #f3f4f6;
   --color-primary: #2563eb;
+  --color-primary-rgb: 37, 99, 235;
   --color-primary-hover: #1d4ed8;
   --color-primary-light: #eff6ff;
   --color-link: #0969da;
@@ -32,6 +33,27 @@
   --color-info: #0969da;
   --color-info-bg: #ddf4ff;
 
+  /* Diff colors - Light Theme */
+  --color-diff-add-bg: rgba(34, 197, 94, 0.15);
+  --color-diff-add-border: #22c55e;
+  --color-diff-add-gutter-bg: rgba(34, 197, 94, 0.2);
+  --color-diff-add-indicator: #166534;
+
+  --color-diff-remove-bg: rgba(239, 68, 68, 0.15);
+  --color-diff-remove-border: #ef4444;
+  --color-diff-remove-gutter-bg: rgba(239, 68, 68, 0.2);
+  --color-diff-remove-indicator: #991b1b;
+
+  /* Code error/warning colors - Light Theme */
+  --color-code-error-bg: rgba(239, 68, 68, 0.15);
+  --color-code-error-border: #ef4444;
+  --color-code-error-gutter-bg: rgba(239, 68, 68, 0.2);
+  --color-code-error-indicator: #991b1b;
+  --color-code-warning-bg: rgba(245, 158, 11, 0.15);
+  --color-code-warning-border: #f59e0b;
+  --color-code-warning-gutter-bg: rgba(245, 158, 11, 0.2);
+  --color-code-warning-indicator: #78350f;
+
   /* Callout colors - shadcn inspired */
   --callout-note: #0ea5e9;
   --callout-note-text: #0c4a6e;
@@ -143,6 +165,7 @@
   --color-border: #30363d;
   --color-border-secondary: #21262d;
   --color-primary: #3b82f6;
+  --color-primary-rgb: 59, 130, 246;
   --color-primary-hover: #60a5fa;
   --color-primary-light: #1e3a8a;
   --color-link: #58a6ff;
@@ -163,6 +186,27 @@
   --color-info: #58a6ff;
   --color-info-bg: #1e3a5f;
 
+  /* Diff colors - Dark Theme */
+  --color-diff-add-bg: rgba(34, 197, 94, 0.1);
+  --color-diff-add-border: #22c55e;
+  --color-diff-add-gutter-bg: rgba(34, 197, 94, 0.15);
+  --color-diff-add-indicator: #4ade80;
+
+  --color-diff-remove-bg: rgba(239, 68, 68, 0.1);
+  --color-diff-remove-border: #ef4444;
+  --color-diff-remove-gutter-bg: rgba(239, 68, 68, 0.15);
+  --color-diff-remove-indicator: #f87171;
+
+  /* Code error/warning colors - Dark Theme */
+  --color-code-error-bg: rgba(239, 68, 68, 0.1);
+  --color-code-error-border: #ef4444;
+  --color-code-error-gutter-bg: rgba(239, 68, 68, 0.15);
+  --color-code-error-indicator: #f87171;
+  --color-code-warning-bg: rgba(245, 158, 11, 0.1);
+  --color-code-warning-border: #f59e0b;
+  --color-code-warning-gutter-bg: rgba(245, 158, 11, 0.15);
+  --color-code-warning-indicator: #fbbf24;
+
   /* Callout colors - Dark mode shadcn inspired */
   --callout-note: #38bdf8;
   --callout-note-text: #7dd3fc;

data/lib/docyard/templates/partials/_code_block.html.erb

@@ -1,6 +1,54 @@
-<div class="docyard-code-block">
-  <%= @code_block_html %>
+<% has_diff = @diff_lines&.any? %><% has_focus = @focus_lines&.any? %><% has_error = @error_lines&.any? %><% has_warning = @warning_lines&.any? %><% has_title = !@title.nil? && !@title.empty? %><div class="docyard-code-block<%= ' docyard-code-block--line-numbers' if @show_line_numbers %><%= ' docyard-code-block--highlighted' if @highlights&.any? %><%= ' docyard-code-block--diff' if has_diff %><%= ' docyard-code-block--has-focus' if has_focus %><%= ' docyard-code-block--has-error' if has_error %><%= ' docyard-code-block--has-warning' if has_warning %><%= ' docyard-code-block--titled' if has_title %>">
+  <% if has_title %>
+  <div class="docyard-code-block__header">
+    <% if @icon %>
+    <span class="docyard-code-block__icon"><% if @icon_source == "file-extension" %><%= Docyard::Icons.render_file_extension(@icon) %><% elsif @icon_source == "phosphor" %><%= Docyard::Icons.render(@icon) %><% end %></span>
+    <% end %>
+    <span class="docyard-code-block__title" title="<%= @title %>"><%= @title %></span>
+    <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">
+      <%= @copy_icon %>
+    </button>
+  </div>
+  <% end %>
+  <div class="docyard-code-block__body">
+  <% if @show_line_numbers %>
+  <div class="docyard-code-block__lines" aria-hidden="true">
+    <% @line_numbers.each_with_index do |num, index| %>
+<%
+  source_line = index + 1
+  diff_type = @diff_lines&.dig(source_line)
+  is_error = @error_lines&.dig(source_line)
+  is_warning = @warning_lines&.dig(source_line)
+  line_class = case diff_type
+               when :addition then "docyard-code-block__line--diff-add"
+               when :deletion then "docyard-code-block__line--diff-remove"
+               else
+                 if is_error
+                   "docyard-code-block__line--error"
+                 elsif is_warning
+                   "docyard-code-block__line--warning"
+                 elsif @highlights&.include?(num)
+                   "docyard-code-block__line--highlighted"
+                 end
+               end
+  prefix = case diff_type
+           when :addition then "+"
+           when :deletion then "-"
+           else ""
+           end
+%><% if line_class %><span class="<%= line_class %>"><%= prefix %><%= num %></span><% else %><span><%= num %></span><% end %>
+    <% end %>
+  </div>
+  <% elsif has_diff %>
+  <div class="docyard-code-block__diff-gutter" aria-hidden="true"><% line_count = @code_block_html.scan(/<span class="docyard-code-line/).count %><% line_count = 1 if line_count.zero? %><% (1..line_count).each do |num| %><% diff_type = @diff_lines&.dig(num) %><% gutter_class = diff_type == :addition ? "docyard-code-block__diff-indicator--add" : (diff_type == :deletion ? "docyard-code-block__diff-indicator--remove" : nil) %><% indicator = diff_type == :addition ? "+" : (diff_type == :deletion ? "-" : "") %><% if gutter_class %><span class="<%= gutter_class %>"><%= indicator %></span><% else %><span>&nbsp;</span><% end %><% end %></div>
+  <% end %>
+  <div class="docyard-code-block__content">
+    <%= @code_block_html %>
+  </div>
+  <% unless has_title %>
   <button class="docyard-code-block__copy" aria-label="Copy code to clipboard" data-code="<%= @code_text %>">
     <%= @copy_icon %>
   </button>
+  <% end %>
+  </div>
 </div>

data/lib/docyard/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Docyard
-  VERSION = "0.5.0"
+  VERSION = "0.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: docyard
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Sanif Himani
@@ -192,8 +192,17 @@ files:
 - lib/docyard/cli.rb
 - lib/docyard/components/base_processor.rb
 - lib/docyard/components/callout_processor.rb
+- lib/docyard/components/code_block_diff_preprocessor.rb
+- lib/docyard/components/code_block_feature_extractor.rb
+- lib/docyard/components/code_block_focus_preprocessor.rb
+- lib/docyard/components/code_block_icon_detector.rb
+- lib/docyard/components/code_block_line_wrapper.rb
+- lib/docyard/components/code_block_options_preprocessor.rb
+- lib/docyard/components/code_block_patterns.rb
 - lib/docyard/components/code_block_processor.rb
 - lib/docyard/components/code_detector.rb
+- lib/docyard/components/code_line_parser.rb
+- lib/docyard/components/code_snippet_import_preprocessor.rb
 - lib/docyard/components/heading_anchor_processor.rb
 - lib/docyard/components/icon_detector.rb
 - lib/docyard/components/icon_processor.rb
@@ -202,6 +211,7 @@ files:
 - lib/docyard/components/table_wrapper_processor.rb
 - lib/docyard/components/tabs_parser.rb
 - lib/docyard/components/tabs_processor.rb
+- lib/docyard/components/tabs_range_finder.rb
 - lib/docyard/config.rb
 - lib/docyard/config/validator.rb
 - lib/docyard/constants.rb