markawesome 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0bfe7629915ad2e621b40c4bc478c90f00313fe5f19ff46739cf1d9ddbff4583
-  data.tar.gz: b898ba0b05ba42755ddee581d9cc10cfa8a405df6b29e0d7bfad9f6e86523ec3
+  metadata.gz: e7ee0dc5c92fb7e9774b22ff56152d96d47a5eaf16da5f5a0181eda5e61aae57
+  data.tar.gz: 321ab99ac9d4b1bc7355a898271bcaf14aa8edf7bbeeafebf3b307d2ce0dd041
 SHA512:
-  metadata.gz: 24fc7fb6409b036053e0bfd475e1ea287c0cf34e28870ef11e2767ae78bb990c5a7038b5a84ecd776d976aeacc53afc531a6cab3a19a2f962f4845a8e27ea2e1
-  data.tar.gz: 5efa1542577c5bbbaf6417cc4c0b145a6c66725eca661b3b48241e791000eff6a4f66c7d1aac29971f45cf20a152b7ece83597f9a8ae426f0ab3c4fea94d8465
+  metadata.gz: de9cc698634f6e9d741317fa48a98d46619869949ca4641615a08c55504e253ecd4c292e3cc4a6b89ff7c394f277b5671c22c58b38e1f5839b751147a2cc6c5a
+  data.tar.gz: 736f49201d6323f34cc9c4ca198db98a8cd34ff0c4ec891649aafce06360f497ea797a697f623ee93f23807461334e05fa5df1fe76b76d39019fdc363c3b109d

data/CHANGELOG.md

@@ -2,24 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.1.0] - 2025-10-27
+## [0.2.0] - 2025-10-27
 
 ### Added
 
-- Initial release
-- Core transformer functionality extracted from jekyll-webawesome
-- Support for Web Awesome components:
-  - Badges
-  - Buttons
-  - Callouts
-  - Cards
-  - Comparisons
-  - Copy Buttons
-  - Details
-  - Icons
-  - Tabs
-  - Tags
-- Configuration system for customizing component behavior
-- Framework-agnostic Markdown to Web Awesome transformation
+- Initial release of Markawesome
+- Framework-agnostic Markdown to Web Awesome component transformation
+- Support for Badge, Button, Callout, Card, Carousel, Comparison, Copy Button, Details, Dialog, Icon, Image Dialog, Tabs, and Tag components
+- Configuration system for callout icons and custom components
+- Extracted from jekyll-webawesome gem for reusability across frameworks

data/README.md

@@ -1,8 +1,30 @@
 # Markawesome
 
-Markawesome is a Ruby library that transforms custom Markdown syntax into Web Awesome components. It provides a framework-agnostic way to convert Markdown to Web Awesome HTML.
+A framework-agnostic Ruby library that transforms custom Markdown syntax into [Web Awesome](https://webawesome.com/) HTML components. Use it with Jekyll, Hugo, Middleman, or any static site generator that processes Markdown.
 
-Used as the transformation engine behind the [jekyll-webawesome](https://github.com/jannewaren/jekyll-webawesome) plugin for [Jekyll](https://jekyllrb.com/).
+Used as the transformation engine for the [jekyll-webawesome](https://github.com/jannewaren/jekyll-webawesome) plugin.
+
+## Features
+
+- 🎯 **Framework Agnostic** - Works with any static site generator or Ruby application
+- 🚀 **Simple Syntax** - Clean, intuitive Markdown extensions
+- ⚙️ **Configurable** - Customize icons, variants, and component behavior
+
+## Supported components
+
+| Component | Primary Syntax | Alternative Syntax | HTML Output |
+|-----------|----------------|-------------------|-------------|
+| **Badge** | `!!!variant` | `:::wa-badge variant` | `<wa-badge variant="brand">content</wa-badge>` |
+| **Button** | `%%%variant` | `:::wa-button variant` | `<wa-button variant="brand" href="url">text</wa-button>` or `<wa-button variant="brand">text</wa-button>` |
+| **Callouts** | `:::info` | `:::wa-callout info` | `<wa-callout variant="brand"><wa-icon name="circle-info"></wa-icon>content</wa-callout>` |
+| **Card** | `===` | `:::wa-card` | `<wa-card>content</wa-card>` |
+| **Carousel** | `~~~~~~` | `:::wa-carousel` | `<wa-carousel>` with carousel items |
+| **Comparison** | `\|\|\|` or `\|\|\|25` | `:::wa-comparison` or `:::wa-comparison 25` | `<wa-comparison>` with before/after slots |
+| **Copy Button** | `<<<` | `:::wa-copy-button` | `<wa-copy-button value="content">content</wa-copy-button>` |
+| **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details appearance="..." icon-placement="...">content</wa-details>` |
+| **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
+| **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
+| **Tag** | `@@@brand` | `:::wa-tag brand` | `<wa-tag variant="brand">content</wa-tag>` |
 
 ## Installation
 
@@ -26,36 +48,31 @@ gem install markawesome
 
 ## Usage
 
+### Basic Usage
+
 ```ruby
 require 'markawesome'
 
-content = <<~MARKDOWN
+markdown = <<~MD
+  !!!brand
+  New Feature
+  !!!
+
   :::info
-  This is an info callout!
+  This is an informational callout
   :::
-MARKDOWN
+MD
 
-transformed = Markawesome::Transformer.process(content)
+html = Markawesome::Transformer.process(markdown)
 ```
 
-## Supported Components
-
-| Component | Primary Syntax | Alternative Syntax | HTML Output |
-|-----------|----------------|-------------------|-------------|
-| **Badge** | `!!!variant` | `:::wa-badge variant` | `<wa-badge variant="brand">content</wa-badge>` |
-| **Button** | `%%%variant` | `:::wa-button variant` | `<wa-button variant="brand" href="url">text</wa-button>` or `<wa-button variant="brand">text</wa-button>` |
-| **Callouts** | `:::info` | `:::wa-callout info` | `<wa-callout variant="brand"><wa-icon name="circle-info"></wa-icon>content</wa-callout>` |
-| **Card** | `===` | `:::wa-card` | `<wa-card>content</wa-card>` |
-| **Comparison** | `\|\|\|` or `\|\|\|25` | `:::wa-comparison` or `:::wa-comparison 25` | `<wa-comparison>` with before/after slots |
-| **Copy Button** | `<<<` | `:::wa-copy-button` | `<wa-copy-button value="content">content</wa-copy-button>` |
-| **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details appearance="..." icon-placement="...">content</wa-details>` |
-| **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
-| **Tag** | `@@@brand` | `:::wa-tag brand` | `<wa-tag variant="brand">content</wa-tag>` |
+### Configuration
 
-## Configuration
+Configure Markawesome globally to customize icon names and add custom components:
 
 ```ruby
 Markawesome.configure do |config|
+  # Customize callout icons
   config.callout_icons = {
     info: 'circle-info',
     success: 'circle-check',
@@ -63,13 +80,32 @@ Markawesome.configure do |config|
     warning: 'triangle-exclamation',
     danger: 'circle-exclamation'
   }
+
+  # Add custom components (for future extensibility)
+  config.custom_components = {
+    'my-component' => 'MyComponent'
+  }
 end
 ```
 
+### Image Dialog Feature
+
+Transform images into clickable dialogs:
+
+```ruby
+markdown = '![Diagram](diagram.png)'
+
+# Enable image dialog transformation
+html = Markawesome::Transformer.process(markdown, image_dialog: true)
+
+# Or with configuration
+html = Markawesome::Transformer.process(markdown, image_dialog: { default_width: '80vw' })
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/jannewaren/markawesome.
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](LICENSE.txt).

data/lib/markawesome/transformer.rb

@@ -6,14 +6,23 @@ require_relative 'transformers'
 module Markawesome
   # Main transformer that orchestrates all component transformers
   class Transformer
-    def self.process(content)
+    def self.process(content, options = {})
       content = BadgeTransformer.transform(content)
       content = ButtonTransformer.transform(content)
       content = CalloutTransformer.transform(content)
       content = CardTransformer.transform(content)
+      content = CarouselTransformer.transform(content)
       content = ComparisonTransformer.transform(content)
       content = CopyButtonTransformer.transform(content)
       content = DetailsTransformer.transform(content)
+
+      # Apply image dialog transformer BEFORE dialog transformer if enabled
+      if options[:image_dialog]
+        config = options[:image_dialog].is_a?(Hash) ? options[:image_dialog] : {}
+        content = ImageDialogTransformer.transform(content, config)
+      end
+
+      content = DialogTransformer.transform(content)
       content = IconTransformer.transform(content)
       content = TagTransformer.transform(content)
       TabsTransformer.transform(content)

data/lib/markawesome/transformers/callout_transformer.rb

@@ -32,8 +32,9 @@ module Markawesome
       private
 
       def callout_attributes(variant)
+        # Get icon from configuration if available
         config = Markawesome.configuration
-        icons = config&.callout_icons || default_callout_icons
+        icons = config&.callout_icons || default_icons
 
         case variant
         when 'info'
@@ -69,7 +70,7 @@ module Markawesome
         end
       end
 
-      def default_callout_icons
+      def default_icons
         {
           info: 'circle-info',
           success: 'circle-check',

data/lib/markawesome/transformers/carousel_transformer.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # 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

data/lib/markawesome/transformers/dialog_transformer.rb

@@ -0,0 +1,173 @@
+# frozen_string_literal: true
+
+require 'digest'
+require_relative 'base_transformer'
+
+module Markawesome
+  # 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

data/lib/markawesome/transformers/image_dialog_transformer.rb

@@ -0,0 +1,169 @@
+# frozen_string_literal: true
+
+require 'digest'
+require_relative 'base_transformer'
+
+module Markawesome
+  # 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, config = {})
+      # 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

data/lib/markawesome/transformers/tag_transformer.rb

@@ -5,13 +5,18 @@ require_relative 'base_transformer'
 module Markawesome
   # 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 both regex patterns
-      primary_regex = /^@@@(brand|success|neutral|warning|danger)?\n(.*?)\n@@@/m
-      alternative_regex = /^:::wa-tag\s*(brand|success|neutral|warning|danger)?\n(.*?)\n:::/m
+      # 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|
@@ -20,8 +25,17 @@ module Markawesome
         build_tag_html(tag_content, variant)
       end
 
-      # Apply both patterns
-      patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+      # 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
 

data/lib/markawesome/transformers.rb

@@ -8,9 +8,12 @@ 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'

data/lib/markawesome/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Markawesome
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

data/lib/markawesome.rb

@@ -3,6 +3,7 @@
 require_relative 'markawesome/version'
 require_relative 'markawesome/transformer'
 
+# Main module for Markawesome - framework-agnostic Markdown to Web Awesome component transformer
 module Markawesome
   class Error < StandardError; end
 
@@ -17,7 +18,7 @@ module Markawesome
     end
   end
 
-  # Configuration class for customizing transformation behavior
+  # Configuration class for customizing transformations
   class Configuration
     attr_accessor :callout_icons, :custom_components
 

data/markawesome.gemspec

@@ -8,8 +8,9 @@ Gem::Specification.new do |spec|
   spec.authors       = ['Janne Waren']
   spec.email         = ['janne.waren@iki.fi']
 
-  spec.summary       = 'Markdown to Web Awesome transformer'
-  spec.description   = 'A library that transforms custom Markdown syntax into Web Awesome components.'
+  spec.summary       = 'Framework-agnostic Markdown to Web Awesome component transformer'
+  spec.description   = 'A library that transforms custom Markdown syntax into Web Awesome components. ' \
+                       'Framework-agnostic and can be used with Jekyll, Hugo, or any other static site generator.'
   spec.homepage      = 'https://github.com/jannewaren/markawesome'
   spec.license       = 'MIT'
   spec.required_ruby_version = '>= 3.2'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Janne Waren
@@ -80,6 +80,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.0'
 description: A library that transforms custom Markdown syntax into Web Awesome components.
+  Framework-agnostic and can be used with Jekyll, Hugo, or any other static site generator.
 email:
 - janne.waren@iki.fi
 executables: []
@@ -97,10 +98,13 @@ files:
 - lib/markawesome/transformers/button_transformer.rb
 - lib/markawesome/transformers/callout_transformer.rb
 - lib/markawesome/transformers/card_transformer.rb
+- lib/markawesome/transformers/carousel_transformer.rb
 - lib/markawesome/transformers/comparison_transformer.rb
 - lib/markawesome/transformers/copy_button_transformer.rb
 - lib/markawesome/transformers/details_transformer.rb
+- lib/markawesome/transformers/dialog_transformer.rb
 - lib/markawesome/transformers/icon_transformer.rb
+- lib/markawesome/transformers/image_dialog_transformer.rb
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
 - lib/markawesome/version.rb
@@ -128,5 +132,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.9
 specification_version: 4
-summary: Markdown to Web Awesome transformer
+summary: Framework-agnostic Markdown to Web Awesome component transformer
 test_files: []