jekyll-webawesome 0.6.1 → 0.7.0

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

@@ -1,121 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms card syntax into wa-card elements
-    # Primary syntax: ===appearance?\ncontent\n===
-    # Alternative syntax: :::wa-card appearance?\ncontent\n:::
-    # Appearances: outlined (default), filled, filled-outlined, plain, accent
-    class CardTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns
-        primary_regex = /^===(outlined|filled|filled-outlined|plain|accent)?\n(.*?)\n===/m
-        alternative_regex = /^:::wa-card\s*(outlined|filled|filled-outlined|plain|accent)?\n(.*?)\n:::/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |appearance_param, card_content|
-          card_content = card_content.strip
-
-          appearance = normalize_appearance(appearance_param)
-          card_parts = parse_card_content(card_content)
-
-          build_card_html(card_parts, appearance)
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def normalize_appearance(appearance_param)
-          case appearance_param
-          when 'filled', 'filled-outlined', 'plain', 'accent'
-            appearance_param
-          else
-            'outlined' # default
-          end
-        end
-
-        def parse_card_content(content)
-          parts = {
-            media: nil,
-            header: nil,
-            content: content,
-            footer: nil
-          }
-
-          # Extract first image as media
-          if content.match(/^!\[([^\]]*)\]\(([^)]+)\)/)
-            parts[:media] = {
-              alt: ::Regexp.last_match(1),
-              src: ::Regexp.last_match(2)
-            }
-            # Remove the image from content
-            content = content.sub(/^!\[([^\]]*)\]\(([^)]+)\)\n?/, '')
-          end
-
-          # Extract first heading as header
-          if content.match(/^# (.+)$/)
-            parts[:header] = ::Regexp.last_match(1).strip
-            # Remove the heading from content
-            content = content.sub(/^# .+\n?/, '')
-          end
-
-          # Extract trailing buttons/links as footer
-          # Look for links or buttons at the end of the content
-          if content.match(/\n\[([^\]]+)\]\(([^)]+)\)\s*$/)
-            parts[:footer] = {
-              text: ::Regexp.last_match(1),
-              href: ::Regexp.last_match(2)
-            }
-            # Remove the footer link from content
-            content = content.sub(/\n\[([^\]]+)\]\(([^)]+)\)\s*$/, '')
-          end
-
-          # Update the main content after extractions
-          parts[:content] = content.strip
-          parts
-        end
-
-        def build_card_html(parts, appearance)
-          attributes = []
-          attributes << "appearance=\"#{appearance}\"" if appearance != 'outlined'
-
-          # Add SSR attributes if slots are present
-          attributes << 'with-media' if parts[:media]
-          attributes << 'with-header' if parts[:header]
-          attributes << 'with-footer' if parts[:footer]
-
-          attr_string = attributes.empty? ? '' : " #{attributes.join(' ')}"
-
-          html_parts = []
-
-          # Media slot
-          html_parts << "<img slot=\"media\" src=\"#{parts[:media][:src]}\" alt=\"#{parts[:media][:alt]}\">" if parts[:media]
-
-          # Header slot
-          if parts[:header]
-            header_html = markdown_to_html(parts[:header])
-            html_parts << "<div slot=\"header\">#{header_html}</div>"
-          end
-
-          # Main content
-          if parts[:content] && !parts[:content].empty?
-            content_html = markdown_to_html(parts[:content])
-            html_parts << content_html
-          end
-
-          # Footer slot
-          html_parts << "<div slot=\"footer\"><wa-button href=\"#{parts[:footer][:href]}\">#{parts[:footer][:text]}</wa-button></div>" if parts[:footer]
-
-          "<wa-card#{attr_string}>#{html_parts.join}</wa-card>"
-        end
-      end
-    end
-  end
-end

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

@@ -1,129 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms carousel syntax into wa-carousel elements
-    # Primary syntax: ~~~~~~params\n~~~ slide1\ncontent\n~~~\n~~~ slide2\ncontent\n~~~\n~~~~~~
-    # Alternative syntax: :::wa-carousel params\n~~~ slide1\ncontent\n~~~\n~~~ slide2\ncontent\n~~~\n:::
-    # Params can include: numbers (slides-per-page, slides-per-move), keywords (loop, navigation, pagination,
-    # autoplay, mouse-dragging, vertical), and CSS properties (scroll-hint:value, aspect-ratio:value, slide-gap:value)
-    class CarouselTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns
-        # Match: ~~~~~~params (optional)
-        #        ~~~
-        #        content (can be empty)
-        #        ~~~
-        #        (repeat slides)
-        #        ~~~~~~
-        primary_regex = /^~{6}([^\n]*)\n((?:~~~\n(?:.*?\n)?~~~\n?)+)~{6}/m
-        alternative_regex = /^:::wa-carousel\s*([^\n]*)\n((?:~~~\n(?:.*?\n)?~~~\n?)+):::/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |params, slides_block, _third_capture|
-          parsed_params = parse_params(params)
-          slides = extract_slides(slides_block)
-
-          build_carousel_html(slides, parsed_params)
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def parse_params(params)
-          return {} if params.nil? || params.strip.empty?
-
-          result = {
-            attributes: {},
-            css_vars: {}
-          }
-
-          tokens = params.strip.split(/\s+/)
-          numeric_count = 0
-
-          tokens.each do |token|
-            # Check for CSS custom properties (key:value)
-            if token.include?(':')
-              key, value = token.split(':', 2)
-              case key
-              when 'scroll-hint'
-                result[:css_vars]['--scroll-hint'] = value
-              when 'aspect-ratio'
-                # Support 'auto', 'none', or 'unset' to remove the default aspect ratio
-                # This is useful for text content or variable-height slides
-                result[:css_vars]['--aspect-ratio'] = value
-              when 'slide-gap'
-                result[:css_vars]['--slide-gap'] = value
-              end
-            # Check for numeric values
-            elsif token.match?(/^\d+$/)
-              numeric_count += 1
-              if numeric_count == 1
-                result[:attributes]['slides-per-page'] = token
-              elsif numeric_count == 2
-                result[:attributes]['slides-per-move'] = token
-              end
-            # Check for boolean flags
-            elsif %w[loop navigation pagination autoplay mouse-dragging vertical].include?(token)
-              # For orientation, we need to handle it specially
-              if token == 'vertical'
-                result[:attributes]['orientation'] = 'vertical'
-              else
-                result[:attributes][token] = true
-              end
-            end
-          end
-
-          result
-        end
-
-        def extract_slides(slides_block)
-          # Extract individual slides using ~~~ markers
-          # Handle both content and empty slides
-          slide_contents = slides_block.scan(/~~~\n(.*?)~~~(?:\n|$)/m)
-          slide_contents.map { |match| match[0].strip }
-        end
-
-        def build_carousel_html(slides, parsed_params)
-          attributes = build_attributes(parsed_params[:attributes] || {})
-          style = build_style(parsed_params[:css_vars] || {})
-
-          attr_string = attributes.empty? ? '' : " #{attributes.join(' ')}"
-          style_string = style.empty? ? '' : " style=\"#{style}\""
-
-          slide_items = slides.map do |slide_content|
-            slide_html = markdown_to_html(slide_content)
-            "<wa-carousel-item>#{slide_html}</wa-carousel-item>"
-          end
-
-          "<wa-carousel#{attr_string}#{style_string}>#{slide_items.join}</wa-carousel>"
-        end
-
-        def build_attributes(attrs)
-          return [] if attrs.nil? || attrs.empty?
-
-          attrs.map do |key, value|
-            if value == true
-              key
-            else
-              "#{key}=\"#{value}\""
-            end
-          end
-        end
-
-        def build_style(css_vars)
-          return '' if css_vars.nil? || css_vars.empty?
-
-          css_vars.map { |key, value| "#{key}: #{value}" }.join('; ')
-        end
-      end
-    end
-  end
-end

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

@@ -1,74 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms comparison syntax into wa-comparison elements
-    # Primary syntax: |||\n![before](before.jpg)\n![after](after.jpg)\n|||
-    # Primary syntax with position: |||50\n![before](before.jpg)\n![after](after.jpg)\n|||
-    # Alternative syntax: :::wa-comparison\n![before](before.jpg)\n![after](after.jpg)\n:::
-    # Alternative syntax with position: :::wa-comparison 50\n![before](before.jpg)\n![after](after.jpg)\n:::
-    # Expects exactly two image elements inside the wrapper
-    class ComparisonTransformer < BaseTransformer
-      def self.transform(content)
-        # Process primary syntax
-        content = content.gsub(/^\|\|\|(\d+)?\n(.*?)\n\|\|\|/m) do |match|
-          position = Regexp.last_match(1)
-          inner_content = Regexp.last_match(2).strip
-          images = extract_images(inner_content)
-
-          if images.length == 2
-            build_comparison_html(inner_content, position)
-          else
-            match # Return original match if not exactly 2 images
-          end
-        end
-
-        # Process alternative syntax
-        content.gsub(/^:::wa-comparison\s*(\d+)?\n(.*?)\n:::/m) do |match|
-          position = Regexp.last_match(1)
-          inner_content = Regexp.last_match(2).strip
-          images = extract_images(inner_content)
-
-          if images.length == 2
-            build_comparison_html(inner_content, position)
-          else
-            match # Return original match if not exactly 2 images
-          end
-        end
-      end
-
-      class << self
-        private
-
-        def build_comparison_html(content, position = nil)
-          images = extract_images(content)
-
-          before_image = build_image_html(images[0], 'before')
-          after_image = build_image_html(images[1], 'after')
-
-          position_attr = position ? " position=\"#{position}\"" : ''
-
-          "<wa-comparison#{position_attr}>#{before_image}#{after_image}</wa-comparison>"
-        end
-
-        def extract_images(content)
-          # Extract markdown image syntax: ![alt](url)
-          image_regex = /!\[([^\]]*)\]\(([^)]+)\)/
-          content.scan(image_regex)
-        end
-
-        def build_image_html(image_match, slot)
-          alt_text = image_match[0]
-          src = image_match[1]
-
-          # Escape HTML characters in alt text
-          escaped_alt = alt_text.gsub('&', '&amp;').gsub('"', '&quot;').gsub('<', '&lt;').gsub('>', '&gt;')
-
-          "<img slot=\"#{slot}\" src=\"#{src}\" alt=\"#{escaped_alt}\" />"
-        end
-      end
-    end
-  end
-end

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

@@ -1,49 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms copy button syntax into wa-copy-button elements
-    # Primary syntax: <<<\ncontent\n<<<
-    # Alternative syntax: :::wa-copy-button\ncontent\n:::
-    #
-    # Usage:
-    # <<<
-    # This text will be copied to clipboard
-    # <<<
-    #
-    # :::wa-copy-button
-    # Copy this text
-    # :::
-    class CopyButtonTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns
-        primary_regex = /^<<<\n(.*?)\n<<</m
-        alternative_regex = /^:::wa-copy-button\n(.*?)\n:::/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |copy_content|
-          copy_content = copy_content.strip
-
-          build_copy_button_html(copy_content)
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def build_copy_button_html(content)
-          # Escape the content for the value attribute
-          escaped_content = content.gsub('"', '&quot;').gsub("'", '&#39;')
-
-          "<wa-copy-button value=\"#{escaped_content}\"></wa-copy-button>"
-        end
-      end
-    end
-  end
-end

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

@@ -1,85 +0,0 @@
-# frozen_string_literal: true
-
-require_relative 'base_transformer'
-
-module Jekyll
-  module WebAwesome
-    # Transforms summary/details syntax into wa-details elements
-    # Primary syntax: ^^^appearance? icon-placement?\nsummary\n>>>\ndetails\n^^^
-    # Alternative syntax: :::wa-details appearance? icon-placement?\nsummary\n>>>\ndetails\n:::
-    # Appearances: outlined (default), filled, filled-outlined, plain
-    # Icon placement: start, end (default)
-    class DetailsTransformer < BaseTransformer
-      def self.transform(content)
-        # Define both regex patterns - capture parameter string
-        primary_regex = /^\^\^\^?(.*?)\n(.*?)\n^>>>\n(.*?)\n^\^\^\^?/m
-        alternative_regex = /^:::wa-details\s*(.*?)\n(.*?)\n^>>>\n(.*?)\n:::/m
-
-        # Define shared transformation logic
-        transform_proc = proc do |params_string, summary_content, details_content|
-          summary_content = summary_content.strip
-          details_content = details_content.strip
-
-          # Parse parameters from the params string
-          appearance_param, icon_placement_param = parse_parameters(params_string)
-
-          appearance_class = normalize_appearance(appearance_param)
-          icon_placement = normalize_icon_placement(icon_placement_param)
-          summary_html = markdown_to_html(summary_content)
-          details_html = markdown_to_html(details_content)
-
-          "<wa-details appearance='#{appearance_class}' icon-placement='#{icon_placement}'>" \
-          "<span slot='summary'>#{summary_html}</span>" \
-          "#{details_html}</wa-details>"
-        end
-
-        # Apply both patterns
-        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
-        apply_multiple_patterns(content, patterns)
-      end
-
-      class << self
-        private
-
-        def parse_parameters(params_string)
-          return [nil, nil] if params_string.nil? || params_string.strip.empty?
-
-          # Split by whitespace and extract known parameters
-          tokens = params_string.strip.split(/\s+/)
-
-          appearance_options = %w[outlined filled filled-outlined plain]
-          placement_options = %w[start end]
-
-          appearance_param = tokens.find { |token| appearance_options.include?(token) }
-          icon_placement_param = tokens.find { |token| placement_options.include?(token) }
-
-          [appearance_param, icon_placement_param]
-        end
-
-        def normalize_appearance(appearance_param)
-          case appearance_param
-          when 'filled'
-            'filled'
-          when 'filled-outlined'
-            'filled outlined'
-          when 'plain'
-            'plain'
-          else
-            'outlined'
-          end
-        end
-
-        def normalize_icon_placement(icon_placement_param)
-          case icon_placement_param
-          when 'start'
-            'start'
-          when 'end'
-            'end'
-          else
-            'end'
-          end
-        end
-      end
-    end
-  end
-end

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