jekyll-webawesome 0.6.1 → 0.7.1

data/lib/jekyll/webawesome/transformers/dialog_transformer.rb

@@ -1,175 +0,0 @@
-# frozen_string_literal: true
-
-require 'digest'
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms dialog syntax into wa-dialog elements with trigger buttons
-    # Primary syntax: ???params\nbutton text\n>>>\ncontent\n???
-    # Alternative syntax: :::wa-dialog params\nbutton text\n>>>\ncontent\n:::
-    # Params: light-dismiss and optional width (e.g., 500px, 50vw, 40em)
-    # Note: Header with close X button is always enabled for accessibility
-    class DialogTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns - capture parameter string, button text, and content
-        # Params are on the same line as the opening delimiter
-        # Button text is on the next line(s) until >>>
-        # Content is everything after >>> until the closing delimiter
-        primary_regex = /^\?\?\?([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^\?\?\?$/m
-        alternative_regex = /^:::wa-dialog([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^:::$/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |params_string, button_text, dialog_content|
-          button_text = button_text.strip
-          dialog_content = dialog_content.strip
-
-          # Parse parameters
-          light_dismiss, width = parse_parameters(params_string)
-
-          # Extract label from first heading or use button text
-          label, content_without_label = extract_label(dialog_content, button_text)
-
-          # Generate unique ID based on content
-          dialog_id = generate_dialog_id(button_text, dialog_content)
-
-          # Convert markdown to HTML
-          content_html = markdown_to_html(content_without_label)
-
-          # Build the dialog HTML
-          build_dialog_html(dialog_id, button_text, label, content_html,
-                            light_dismiss, width)
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        # Parse parameters from the params string
-        def parse_parameters(params_string)
-          return [false, nil] if params_string.nil? || params_string.strip.empty?
-
-          tokens = params_string.strip.split(/\s+/)
-
-          light_dismiss = tokens.include?('light-dismiss')
-
-          # Look for width parameter (last token with CSS units)
-          width = nil
-          tokens.reverse_each do |token|
-            if token.match?(/^\d+(\.\d+)?(px|em|rem|vw|vh|%|ch)$/)
-              width = token
-              break
-            end
-          end
-
-          [light_dismiss, width]
-        end
-
-        # Extract label from first heading in content
-        # Always returns a label - uses heading if available, otherwise default_label
-        def extract_label(content, default_label)
-          # Check if content starts with a heading
-          if content.match(/^#\s+(.+?)$/)
-            label = Regexp.last_match(1).strip
-            # Remove the heading from content
-            content_without_label = content.sub(/^#\s+.+?\n/, '').strip
-            [label, content_without_label]
-          else
-            # Use default label (button text) to ensure header is always shown
-            [default_label, content]
-          end
-        end
-
-        # Generate a unique ID for the dialog using MD5 hash
-        def generate_dialog_id(button_text, content)
-          hash_input = "#{button_text}#{content}"
-          hash = Digest::MD5.hexdigest(hash_input)
-          "dialog-#{hash[0..7]}" # Use first 8 characters of hash
-        end
-
-        # Build the complete dialog HTML with trigger button
-        # Header with X close button is always enabled for accessibility
-        def build_dialog_html(dialog_id, button_text, label, content_html,
-                              light_dismiss, width)
-          # Build dialog attributes
-          dialog_attrs = ["id='#{dialog_id}'"]
-          # Escape both HTML and attribute characters for label
-          # Header is always shown to provide the X close button
-          dialog_attrs << "label='#{escape_attribute(escape_html(label))}'"
-          dialog_attrs << 'light-dismiss' if light_dismiss
-
-          # Build style attribute for width if specified
-          style_attr = width ? " style='--width: #{width}'" : ''
-
-          # Check if button contains an image (for image dialog support)
-          is_image_button = button_text.include?('<img')
-
-          # Build the HTML
-          html = []
-
-          # Add CSS Parts styling for image buttons to make them invisible
-          if is_image_button
-            button_id = "#{dialog_id}-btn"
-            html << '<style>'
-            html << "  ##{button_id}::part(base) {"
-            html << '    padding: 0;'
-            html << '    margin: 0;'
-            html << '    border: none;'
-            html << '    background: transparent;'
-            html << '    box-shadow: none;'
-            html << '    color: inherit;'
-            html << '    min-width: 0;'
-            html << '    height: auto;'
-            html << '  }'
-            html << "  ##{button_id}::part(base):hover {"
-            html << '    background: transparent;'
-            html << '    border-color: transparent;'
-            html << '  }'
-            html << "  ##{button_id}::part(base):active {"
-            html << '    background: transparent;'
-            html << '    border-color: transparent;'
-            html << '  }'
-            html << '</style>'
-          end
-
-          # Trigger button
-          # Only allow HTML for image tags (for image dialog support), escape everything else for security
-          button_content = is_image_button ? button_text : escape_html(button_text)
-          button_id_attr = is_image_button ? " id='#{button_id}'" : ''
-          button_variant = is_image_button ? " variant='text'" : ''
-          html << "<wa-button#{button_id_attr}#{button_variant} data-dialog='open #{dialog_id}'>#{button_content}</wa-button>"
-
-          # Dialog element
-          html << "<wa-dialog #{dialog_attrs.join(' ')}#{style_attr}>"
-          html << content_html
-
-          # Footer with close button
-          html << "<wa-button slot='footer' variant='primary' data-dialog='close'>Close</wa-button>"
-
-          html << '</wa-dialog>'
-
-          html.join("\n")
-        end
-
-        # Escape HTML entities in text
-        def escape_html(text)
-          text.gsub('&', '&amp;')
-              .gsub('<', '&lt;')
-              .gsub('>', '&gt;')
-              .gsub('"', '&quot;')
-              .gsub("'", '&#39;')
-        end
-
-        # Escape attribute values
-        def escape_attribute(text)
-          text.gsub("'", '&apos;')
-              .gsub('"', '&quot;')
-        end
-      end
-    end
-  end
-end

data/lib/jekyll/webawesome/transformers/icon_transformer.rb

@@ -1,82 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms icon syntax into wa-icon elements
-    # Primary syntax: $$$icon-name
-    # Alternative syntax: :::wa-icon icon-name
-    #
-    # Examples:
-    # $$$settings -> <wa-icon name="settings"></wa-icon>
-    # $$$home -> <wa-icon name="home"></wa-icon>
-    # $$$user-circle -> <wa-icon name="user-circle"></wa-icon>
-    class IconTransformer < BaseTransformer
-      def self.transform(content)
-        # Protect code blocks first
-        protected_content, code_blocks = protect_code_blocks(content)
-
-        # Apply primary syntax transformation
-        # Only block patterns that look like incomplete icon names:
-        # $$$icon name (where 'icon name' could be intended as one identifier)
-        result = protected_content.gsub(/\$\$\$([a-zA-Z0-9\-_]+)(?![a-zA-Z0-9\-_]|\s+name\b)/) do
-          icon_name = ::Regexp.last_match(1)
-          build_icon_html(icon_name)
-        end
-
-        # Apply alternative syntax transformation
-        result = result.gsub(/:::wa-icon\s+([a-zA-Z0-9\-_]+)\s*\n:::/m) do
-          icon_name = ::Regexp.last_match(1)
-          build_icon_html(icon_name)
-        end
-
-        # Restore code blocks
-        restore_code_blocks(result, code_blocks)
-      end
-
-      class << self
-        private
-
-        def build_icon_html(icon_name)
-          # Clean and validate icon name
-          clean_name = icon_name.strip
-
-          # Return the wa-icon element
-          "<wa-icon name=\"#{clean_name}\"></wa-icon>"
-        end
-
-        def protect_code_blocks(content)
-          code_blocks = {}
-          counter = 0
-
-          # Protect fenced code blocks
-          protected = content.gsub(/```.*?```/m) do |match|
-            placeholder = "<!--ICON_PROTECTED_CODE_BLOCK_#{counter}-->"
-            code_blocks[placeholder] = match
-            counter += 1
-            placeholder
-          end
-
-          # Protect inline code
-          protected = protected.gsub(/`[^`]+`/) do |match|
-            placeholder = "<!--ICON_PROTECTED_INLINE_CODE_#{counter}-->"
-            code_blocks[placeholder] = match
-            counter += 1
-            placeholder
-          end
-
-          [protected, code_blocks]
-        end
-
-        def restore_code_blocks(content, code_blocks)
-          result = content
-          code_blocks.each do |placeholder, original|
-            result = result.gsub(placeholder, original)
-          end
-          result
-        end
-      end
-    end
-  end
-end

data/lib/jekyll/webawesome/transformers/image_dialog_transformer.rb

@@ -1,174 +0,0 @@
-# frozen_string_literal: true
-
-require 'digest'
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms standalone images into clickable images that open in dialogs
-    # Images can opt-out by adding "nodialog" to the title attribute
-    # Example: ![Alt text](image.png "nodialog")
-    class ImageDialogTransformer < BaseTransformer
-      def self.transform(content, site = nil)
-        # Get configuration including default width
-        config = site ? Plugin.image_dialog_config(site) : {}
-        
-        # First, protect code blocks, inline code, and comparison blocks from transformation
-        protected_content, fenced_code_blocks = protect_fenced_code_blocks(content)
-        protected_content, inline_code_blocks = protect_inline_code(protected_content)
-        protected_content, comparison_blocks = protect_comparisons(protected_content)
-
-        # Match markdown images: ![alt](url) or ![alt](url "title")
-        # Capture alt text, URL, and optional title
-        # URL can contain spaces and special characters
-        image_regex = /!\[([^\]]*)\]\(([^)]+?)(?:\s+"([^"]*)")?\)/
-
-        result = protected_content.gsub(image_regex) do |match|
-          alt_text = Regexp.last_match(1)
-          image_url = Regexp.last_match(2).strip
-          title = Regexp.last_match(3)
-
-          # Skip transformation if title contains "nodialog"
-          if title&.include?('nodialog')
-            # Return original image without dialog
-            match
-          else
-            # Transform to clickable image with dialog
-            transform_to_dialog(alt_text, image_url, title, config)
-          end
-        end
-
-        # Restore protected blocks in reverse order
-        result = restore_comparisons(result, comparison_blocks)
-        result = restore_inline_code(result, inline_code_blocks)
-        restore_fenced_code_blocks(result, fenced_code_blocks)
-      end
-
-      class << self
-        private
-
-        # Protect fenced code blocks from transformation
-        def protect_fenced_code_blocks(content)
-          code_blocks = []
-          # Match both ``` and ~~~ style code blocks with optional language
-          protected = content.gsub(/^```.*?^```$|^~~~.*?^~~~$/m) do |match|
-            placeholder = "<!--IMAGE_DIALOG_FENCED_CODE_#{code_blocks.length}-->"
-            code_blocks << match
-            placeholder
-          end
-          [protected, code_blocks]
-        end
-
-        # Restore protected fenced code blocks
-        def restore_fenced_code_blocks(content, code_blocks)
-          code_blocks.each_with_index do |code, index|
-            content = content.gsub("<!--IMAGE_DIALOG_FENCED_CODE_#{index}-->", code)
-          end
-          content
-        end
-
-        # Protect inline code from transformation
-        def protect_inline_code(content)
-          code_blocks = []
-          protected = content.gsub(/`[^`]+`/) do |match|
-            placeholder = "<!--IMAGE_DIALOG_INLINE_CODE_#{code_blocks.length}-->"
-            code_blocks << match
-            placeholder
-          end
-          [protected, code_blocks]
-        end
-
-        # Restore protected inline code
-        def restore_inline_code(content, code_blocks)
-          code_blocks.each_with_index do |code, index|
-            content = content.gsub("<!--IMAGE_DIALOG_INLINE_CODE_#{index}-->", code)
-          end
-          content
-        end
-
-        # Protect comparison blocks from image transformation
-        # Must protect both markdown syntax (|||...|||) and already-transformed HTML
-        def protect_comparisons(content)
-          comparison_blocks = []
-          
-          # First protect markdown comparison syntax: |||...|||
-          protected = content.gsub(/\|\|\|(\d+)?\n.*?\n\|\|\|/m) do |match|
-            placeholder = "<!--IMAGE_DIALOG_COMPARISON_#{comparison_blocks.length}-->"
-            comparison_blocks << match
-            placeholder
-          end
-          
-          # Also protect already-transformed HTML comparison blocks: <wa-comparison ...>...</wa-comparison>
-          protected = protected.gsub(/<wa-comparison[^>]*>.*?<\/wa-comparison>/m) do |match|
-            placeholder = "<!--IMAGE_DIALOG_COMPARISON_#{comparison_blocks.length}-->"
-            comparison_blocks << match
-            placeholder
-          end
-          
-          [protected, comparison_blocks]
-        end
-
-        # Restore protected comparison blocks
-        def restore_comparisons(content, comparison_blocks)
-          comparison_blocks.each_with_index do |block, index|
-            content = content.gsub("<!--IMAGE_DIALOG_COMPARISON_#{index}-->", block)
-          end
-          content
-        end
-
-        # Transform image into our custom dialog syntax
-        # This will be processed by DialogTransformer to create the actual wa-dialog
-        def transform_to_dialog(alt_text, image_url, title, config = {})
-          # Parse width from title if specified (e.g., "50%", "800px", "60vw")
-          width = extract_width_from_title(title)
-          
-          # Use default width from config if no width specified in title
-          width ||= config[:default_width] if config[:default_width]
-
-          # Build dialog parameters
-          # Always include header with X close button for accessibility
-          params = ['light-dismiss']
-          params << width if width
-          params_string = params.join(' ')
-
-          # Build the button content - a styled image that acts as the trigger
-          # Add title attribute if provided and doesn't contain "nodialog" or width
-          title_attr = title && !title.include?('nodialog') && !contains_width?(title) ? " title=\"#{title}\"" : ''
-          button_content = "<img src=\"#{image_url}\" alt=\"#{alt_text}\" style=\"cursor: zoom-in; display: block; width: 100%; height: auto;\"#{title_attr} />"
-
-          # Build the dialog content with alt text as heading for the label
-          # Use alt text for the label, or "Image" as fallback if alt is empty
-          label_text = alt_text.empty? ? 'Image' : alt_text
-          dialog_content = "# #{label_text}\n\n<img src=\"#{image_url}\" alt=\"#{alt_text}\" style=\"max-width: 100%; height: auto; display: block; margin: 0 auto;\" />"
-
-          # Use our custom dialog syntax that will be processed by DialogTransformer
-          # Format: ???params\nbutton_content\n>>>\ndialog_content\n???
-          result = []
-          result << "???#{params_string}"
-          result << button_content
-          result << '>>>'
-          result << dialog_content
-          result << '???'
-
-          result.join("\n")
-        end
-
-        # Extract width parameter from title attribute
-        def extract_width_from_title(title)
-          return nil unless title
-
-          # Match CSS width units: px, em, rem, vw, vh, %, ch
-          match = title.match(/(\d+(?:\.\d+)?(?:px|em|rem|vw|vh|%|ch))/)
-          match ? match[1] : nil
-        end
-
-        # Check if title contains a width value
-        def contains_width?(title)
-          return false unless title
-
-          title.match?(/\d+(?:\.\d+)?(?:px|em|rem|vw|vh|%|ch)/)
-        end
-      end
-    end
-  end
-end

data/lib/jekyll/webawesome/transformers/tabs_transformer.rb

@@ -1,53 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms tabs syntax into wa-tab-group elements
-    # Primary syntax: ++++++placement?\n+++tab1\ncontent\n+++\n+++tab2\ncontent\n+++\n++++++
-    # Alternative syntax: :::wa-tabs placement?\n+++tab1\ncontent\n+++\n+++tab2\ncontent\n+++\n:::
-    # Placements: top (default), bottom, start, end
-    class TabsTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns
-        primary_regex = /^\+{6}(top|bottom|start|end)?\n((\+\+\+ [^\n]+\n.*?\n\+\+\+\n?)+)\+{6}/m
-        alternative_regex = /^:::wa-tabs\s*(top|bottom|start|end)?\n((\+\+\+ [^\n]+\n.*?\n\+\+\+\n?)+):::/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |placement, tabs_block, _third_capture|
-          placement ||= 'top'
-
-          tabs, tab_panels = extract_tabs_and_panels(tabs_block)
-
-          "<wa-tab-group placement=\"#{placement}\">#{tabs.join}#{tab_panels.join}</wa-tab-group>"
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def extract_tabs_and_panels(tabs_block)
-          # Extract individual tabs
-          tab_contents = tabs_block.scan(/^\+\+\+ ([^\n]+)\n(.*?)\n\+\+\+/m)
-          tabs = []
-          tab_panels = []
-
-          tab_contents.each_with_index do |(title, panel_content), index|
-            tab_id = "tab-#{index + 1}"
-            tabs << "<wa-tab panel=\"#{tab_id}\">#{title.strip}</wa-tab>"
-
-            panel_html = markdown_to_html(panel_content.strip)
-            tab_panels << "<wa-tab-panel name=\"#{tab_id}\">#{panel_html}</wa-tab-panel>"
-          end
-
-          [tabs, tab_panels]
-        end
-      end
-    end
-  end
-end

data/lib/jekyll/webawesome/transformers/tag_transformer.rb

@@ -1,58 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms tag syntax into wa-tag elements
-    # Primary syntax: @@@variant?\ncontent\n@@@
-    # Inline syntax: @@@ variant? content @@@
-    # Alternative syntax: :::wa-tag variant?\ncontent\n:::
-    # Variants: brand, success, neutral, warning, danger
-    class TagTransformer < BaseTransformer
-      def self.transform(content)
-        # Define regex patterns
-        # Block syntax (multiline with newlines) - supports both LF and CRLF
-        primary_regex = /^@@@(brand|success|neutral|warning|danger)?\r?\n(.*?)\r?\n@@@/m
-        alternative_regex = /^:::wa-tag\s*(brand|success|neutral|warning|danger)?\r?\n(.*?)\r?\n:::/m
-
-        # Inline syntax (same line with spaces)
-        inline_regex = /@@@\s*(brand|success|neutral|warning|danger)?\s+([^@\r\n]+?)\s+@@@/
-
-        # Define shared transformation logic
-        transform_proc = proc do |variant, tag_content|
-          tag_content = tag_content.strip
-
-          build_tag_html(tag_content, variant)
-        end
-
-        # Apply all patterns (inline first to avoid conflicts)
-        patterns = [
-          {
-            regex: inline_regex,
-            block: proc do |_match, matchdata|
-              captures = matchdata.captures
-              transform_proc.call(*captures)
-            end
-          },
-          *dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        ]
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def build_tag_html(content, variant)
-          variant_attr = variant ? " variant=\"#{variant}\"" : ''
-          tag_html = markdown_to_html(content).strip
-
-          # Remove paragraph tags if the content is just text
-          tag_html = tag_html.gsub(%r{^<p>(.*)</p>$}m, '\1')
-
-          "<wa-tag#{variant_attr}>#{tag_html}</wa-tag>"
-        end
-      end
-    end
-  end
-end

data/lib/jekyll/webawesome/transformers.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-# Index file for all Web Awesome transformers
-# This file makes it easy to require all transformers at once
-
-require_relative 'transformers/base_transformer'
-require_relative 'transformers/badge_transformer'
-require_relative 'transformers/button_transformer'
-require_relative 'transformers/callout_transformer'
-require_relative 'transformers/card_transformer'
-require_relative 'transformers/carousel_transformer'
-require_relative 'transformers/comparison_transformer'
-require_relative 'transformers/copy_button_transformer'
-require_relative 'transformers/details_transformer'
-require_relative 'transformers/dialog_transformer'
-require_relative 'transformers/icon_transformer'
-require_relative 'transformers/image_dialog_transformer'
-require_relative 'transformers/tabs_transformer'
-require_relative 'transformers/tag_transformer'