jekyll-webawesome 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 248a4b65617851cba2e7b5cc7b1a14f9424fa38649b0efbe7f5af4417b71df7f
-  data.tar.gz: 157cfaef53cc8d38d1b7d3d0ddd6fc2c383a9a2989da6f5be9a62e9dc9d19bd0
+  metadata.gz: e958cd124d7cb081e95cc61a14db48b6c0059daa49fef318c452a3cab30fecfb
+  data.tar.gz: b531b0aa50c859837a7500fbdb45d0c46dc0c936163b139715592b60fc3b05c5
 SHA512:
-  metadata.gz: fb931b98a57633b9924bbaf3143f4b3cda7bab15e3778f1d698775c95e349a3802d6f1d9fa537ebe8424e3e4debbf9d0d411101e2fd9481bbd9aee7224e86bc9
-  data.tar.gz: b0d50534280129717c3fa47445a66cf44313995b31061728679ad3324c05e9927934686e1b9a9343f7037f62fde575581c25571ebe437c2f1ed70c90cd8ba803
+  metadata.gz: 042c0a994e97c359c06edf42103fd0308bcab11f9c241b43e402fdae0bb0176ce72ab30e371a0d521fda3149245187c92447e201e0073b219573d649260c187a
+  data.tar.gz: f44d6a009eee1d5f2b807bb2fdcc858d2372646a3900165f42d2c6c7dd0eaa7ad2b30d506d63f95ed3de9f47c130ea6a4b2f9560ff8ee7f2e95eea165508e70b

data/CHANGELOG.md

@@ -8,6 +8,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 - Placeholder
 
+## [0.5.0] - 2025-10-20
+
+- Add support for wa-dialog component
+- Image dialog auto-transformation feature
+  - New `image_dialog` configuration option (opt-in, default: false)
+  - Automatically transforms markdown images into clickable dialogs
+  - Support for custom dialog width via title attribute (e.g., `"50%"`, `"800px"`, `"90vw"`)
+  - Opt-out mechanism via `"nodialog"` in title attribute
+
+## [0.4.1] - 2025-10-02
+
+- Code blocks inside custom elements (wa-details, wa-callout, etc.) are now properly protected from markdown processing
+  - Previously, code blocks would be corrupted with HTML entities and extra `<p>` tags when nested inside custom elements
+
 ## [0.4.0] - 2025-09-29
 
 - Support for icon placement in wa-details component

data/README.md

@@ -19,6 +19,7 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
 | **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>` |
 
@@ -66,6 +67,9 @@ webawesome:
   # Control which file types to transform (default: both true)
   transform_pages: true      # Transform pages (like index.md, about.md)
   transform_documents: true  # Transform documents (like blog posts in _posts)
+  
+  # Enable automatic image-to-dialog transformation (default: false)
+  image_dialog: true         # Makes all images clickable and open in dialogs
 ```
 
 And then execute:
@@ -332,6 +336,108 @@ Copy buttons work well for:
 
 > **Note**: The `value` attribute contains the raw text (including any markdown) that gets copied to the clipboard. The copy button displays the standard Web Awesome copy icon and handles the clipboard operation automatically.
 
+### Dialogs
+
+Create interactive dialogs (modals) using the `???` syntax:
+
+```markdown
+???
+Open Dialog
+>>>
+This is the dialog content with **markdown** support.
+???
+```
+
+This creates a trigger button and a dialog that opens when clicked:
+
+```html
+<wa-button data-dialog='open dialog-abc123'>Open Dialog</wa-button>
+<wa-dialog id='dialog-abc123' label='Open Dialog'>
+  <p>This is the dialog content with <strong>markdown</strong> support.</p>
+  <wa-button slot='footer' variant='primary' data-dialog='close'>Close</wa-button>
+</wa-dialog>
+```
+
+#### Dialogs with Headings
+
+The first heading (`#`) automatically becomes the dialog's label (title):
+
+```markdown
+???
+Show Details
+>>>
+# Important Information
+This is the content of the dialog.
+???
+```
+
+The button displays "Show Details" and the dialog header shows "Important Information".
+
+#### Dialog Options
+
+You can customize dialog behavior with optional parameters:
+
+**Light Dismiss** - Dialog closes when clicking the overlay:
+
+```markdown
+???light-dismiss
+Open Dialog
+>>>
+Click outside to close this dialog.
+???
+```
+
+**Without Header** - Remove the dialog header entirely:
+
+```markdown
+???without-header
+Open Dialog
+>>>
+This dialog has no header.
+???
+```
+
+**Custom Width** - Set a specific width using CSS units (px, em, rem, vw, vh, %):
+
+```markdown
+???600px
+Open Dialog
+>>>
+This dialog is 600 pixels wide.
+???
+
+???50vw
+Open Wide Dialog
+>>>
+This dialog is 50% of the viewport width.
+???
+
+???40em
+Open Dialog
+>>>
+This dialog is 40em wide.
+???
+```
+
+**Combining Options** - You can combine multiple options:
+
+```markdown
+???light-dismiss 700px
+Open Dialog
+>>>
+# Custom Dialog
+This dialog has light dismiss enabled and is 700px wide.
+???
+
+???without-header light-dismiss 45em
+Open Simple Dialog
+>>>
+This dialog has no header, light dismiss, and is 45em wide.
+???
+```
+
+> **Note**: The dialog uses Web Awesome's declarative `data-dialog` API, so no custom JavaScript is needed. Each dialog gets a unique ID automatically generated from its content, and a close button is automatically added to the footer.
+
 ### Details/Summary (Collapsible Content)
 
 Create collapsible content using the `^^^` syntax:
@@ -510,6 +616,58 @@ Cards automatically parse content into these slots:
 | `end` (default) | Icon appears on the right side |
 | `start` | Icon appears on the left side |
 
+### Dialog Parameters
+
+| Option | Description |
+|--------|-------------|
+| `light-dismiss` | Dialog closes when clicking outside/on overlay |
+| `without-header` | Removes the dialog header entirely |
+| Width (e.g., `500px`, `50vw`, `40em`) | Sets custom width using CSS units (px, em, rem, vw, vh, %) |
+
+### Dialog Features
+
+- **Automatic ID Generation**: Each dialog gets a unique ID based on MD5 hash of its content
+- **Auto-close Button**: A "Close" button is automatically added to the footer
+- **Declarative API**: Uses Web Awesome's `data-dialog` attributes - no custom JavaScript needed
+- **Label Extraction**: First `#` heading becomes the dialog label, or button text is used as fallback
+- **Markdown Support**: Full markdown formatting in dialog content
+
+### Image Dialogs (Auto-transformation)
+
+Enable automatic image-to-dialog transformation in your `_config.yml`:
+
+```yaml
+webawesome:
+  image_dialog: true
+```
+
+When enabled, all markdown images automatically become clickable and open in full-size dialogs:
+
+```markdown
+![Architecture Diagram](diagram.png)
+```
+
+**Control dialog width** by adding a width parameter to the title:
+
+```markdown
+![Diagram](diagram.png "50%")        # Dialog width: 50%
+![Photo](photo.jpg "800px")         # Dialog width: 800px
+![Wide](image.png "90vw")           # Dialog width: 90% viewport
+```
+
+Supported width units: `px`, `em`, `rem`, `vw`, `vh`, `%`, `ch`
+
+**Opt-out** by adding `"nodialog"` to the title:
+
+```markdown
+![Small Icon](icon.svg "nodialog")
+```
+
+**Features:**
+
+- Light-dismiss and headerless dialogs for clean UX
+- Thumbnail displays at original size, dialog shows full-size
+
 ### Tab Placements
 
 - `top` (default)

data/lib/jekyll/webawesome/code_block_transformer.rb

@@ -48,38 +48,38 @@ module Jekyll
           content.match?(callout_pattern) || content.match?(details_pattern) || content.match?(tabs_pattern)
         end
 
-        # Transform code blocks from markdown syntax to Jekyll highlight tags
-        def transform_code_blocks(content)
+        # Protect all code blocks by converting them to placeholders
+        # This prevents markdown processing from corrupting code blocks inside custom elements
+        def protect_all_code_blocks(content)
           counter = @@protected_blocks.size
 
-          # First pass: protect markdown code blocks that contain WebAwesome syntax
-          content = content.gsub(CODE_BLOCK_PATTERN) do |match|
-            language = Regexp.last_match(1)
-            code_content = Regexp.last_match(2).strip
-
-            # If this is a markdown code block containing WebAwesome syntax, protect it
-            if language && language.downcase == 'markdown' && contains_webawesome_syntax?(code_content)
-              placeholder = "<!--PROTECTED_WEBAWESOME_EXAMPLE_#{counter}-->"
-              @@protected_blocks[placeholder] = match
-              counter += 1
-              placeholder
-            else
-              match # Leave other code blocks for normal processing
-            end
-          end
-
-          # Second pass: transform remaining code blocks normally
           content.gsub(CODE_BLOCK_PATTERN) do |match|
-            language = Regexp.last_match(1)
-            code_content = Regexp.last_match(2).strip
+            placeholder = "<!--PROTECTED_CODE_BLOCK_#{counter}-->"
+            @@protected_blocks[placeholder] = match
+            counter += 1
+            placeholder
+          end
+        end
 
-            if language && language.downcase != 'plain'
-              transformed = "{% highlight #{language} %}\n#{code_content}\n{% endhighlight %}"
-              transformed
+        # Transform code blocks from markdown syntax to Jekyll highlight tags
+        # This should be called AFTER WebAwesome transformers have processed the content
+        def transform_code_blocks(content)
+          # Transform code blocks that were previously protected
+          @@protected_blocks.transform_values! do |match|
+            if match =~ CODE_BLOCK_PATTERN
+              language = Regexp.last_match(1)
+              code_content = Regexp.last_match(2).strip
+
+              if language && language.downcase != 'plain'
+                "{% highlight #{language} %}\n#{code_content}\n{% endhighlight %}"
+              else
+                match # Return original block if no language or 'plain'
+              end
             else
-              match # Return original block if no language or 'plain'
+              match
             end
           end
+          content
         end
 
         # Restore protected WebAwesome example blocks after WaElementTransformer processing
@@ -101,23 +101,42 @@ module Jekyll
         CodeBlockTransformer.clear_protected_blocks
       end
 
-      Jekyll::Hooks.register :documents, :pre_render, priority: 30 do |document|
+      # STEP 1: Protect all code blocks BEFORE any transformations (highest priority)
+      Jekyll::Hooks.register :documents, :pre_render, priority: 50 do |document|
+        next unless document.relative_path =~ /.*\.md$/i
+        next unless CodeBlockTransformer.transform_documents_enabled?(document.site)
+
+        puts "Jekyll::WebAwesome::CodeBlockTransformer protecting code blocks in document: #{document.relative_path}\n"
+        document.content = CodeBlockTransformer.protect_all_code_blocks(document.content)
+      end
+
+      Jekyll::Hooks.register :pages, :pre_render, priority: 50 do |page|
+        next unless page.relative_path =~ /.*\.md$/i
+        next unless CodeBlockTransformer.transform_pages_enabled?(page.site)
+
+        puts "Jekyll::WebAwesome::CodeBlockTransformer protecting code blocks in page: #{page.relative_path}\n"
+        page.content = CodeBlockTransformer.protect_all_code_blocks(page.content)
+      end
+
+      # STEP 2: Transform protected code blocks to Jekyll highlight syntax
+      # This happens AFTER WebAwesome transformers (priority 20) but BEFORE restoration
+      Jekyll::Hooks.register :documents, :pre_render, priority: 15 do |document|
         next unless document.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_documents_enabled?(document.site)
 
-        puts "Jekyll::WebAwesome::CodeBlockTransformer processing document: #{document.relative_path}\n"
+        puts "Jekyll::WebAwesome::CodeBlockTransformer transforming code blocks in document: #{document.relative_path}\n"
         document.content = CodeBlockTransformer.transform_code_blocks(document.content)
       end
 
-      Jekyll::Hooks.register :pages, :pre_render, priority: 30 do |page|
+      Jekyll::Hooks.register :pages, :pre_render, priority: 15 do |page|
         next unless page.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_pages_enabled?(page.site)
 
-        puts "Jekyll::WebAwesome::CodeBlockTransformer processing page: #{page.relative_path}\n"
+        puts "Jekyll::WebAwesome::CodeBlockTransformer transforming code blocks in page: #{page.relative_path}\n"
         page.content = CodeBlockTransformer.transform_code_blocks(page.content)
       end
 
-      # Register hooks to restore protected blocks after WaElementTransformer
+      # STEP 3: Restore protected blocks after transformation (lowest priority)
       Jekyll::Hooks.register :documents, :pre_render, priority: 10 do |document|
         next unless document.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_documents_enabled?(document.site)

data/lib/jekyll/webawesome/plugin.rb

@@ -40,6 +40,18 @@ module Jekyll
         true
       end
 
+      # Check if image dialog transformation is enabled
+      def self.image_dialog_enabled?(site)
+        # Check plugin configuration first
+        return Jekyll::WebAwesome.configuration.image_dialog if Jekyll::WebAwesome.configuration
+
+        # Check site config
+        return site.config.dig('webawesome', 'image_dialog') if site.config.dig('webawesome', 'image_dialog') != nil
+
+        # Default to false (opt-in feature)
+        false
+      end
+
       # Check if a file is a markdown file
       def self.markdown_file?(filepath)
         filepath.to_s.match?(/\.md$/i)
@@ -51,7 +63,7 @@ module Jekyll
         next unless transform_documents_enabled?(document.site)
 
         puts "Jekyll::WebAwesome Processing document (pre-render): #{document.relative_path}\n" if debug_enabled?(document.site)
-        document.content = Transformer.process(document.content)
+        document.content = Transformer.process(document.content, document.site)
       end
 
       Jekyll::Hooks.register :pages, :pre_render do |page|
@@ -59,7 +71,7 @@ module Jekyll
         next unless transform_pages_enabled?(page.site)
 
         puts "Jekyll::WebAwesome Processing page (pre-render): #{page.relative_path}\n" if debug_enabled?(page.site)
-        page.content = Transformer.process(page.content)
+        page.content = Transformer.process(page.content, page.site)
       end
     end
   end

data/lib/jekyll/webawesome/transformer.rb

@@ -8,7 +8,7 @@ module Jekyll
   module WebAwesome
     # Main transformer that orchestrates all component transformers
     class Transformer
-      def self.process(content)
+      def self.process(content, site = nil)
         content = BadgeTransformer.transform(content)
         content = ButtonTransformer.transform(content)
         content = CalloutTransformer.transform(content)
@@ -16,6 +16,11 @@ module Jekyll
         content = ComparisonTransformer.transform(content)
         content = CopyButtonTransformer.transform(content)
         content = DetailsTransformer.transform(content)
+
+        # Apply image dialog transformer BEFORE dialog transformer so it can generate dialog syntax
+        content = ImageDialogTransformer.transform(content) if site && Plugin.image_dialog_enabled?(site)
+
+        content = DialogTransformer.transform(content)
         content = IconTransformer.transform(content)
         content = TagTransformer.transform(content)
         TabsTransformer.transform(content)

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

@@ -0,0 +1,172 @@
+# 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, without-header, and optional width (e.g., 500px, 50vw, 40em)
+    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, without_header, 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, without_header, 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, false, nil] if params_string.nil? || params_string.strip.empty?
+
+          tokens = params_string.strip.split(/\s+/)
+
+          light_dismiss = tokens.include?('light-dismiss')
+          without_header = tokens.include?('without-header')
+
+          # 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, without_header, width]
+        end
+
+        # Extract label from first heading in content
+        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
+            [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
+        def build_dialog_html(dialog_id, button_text, label, content_html,
+                              light_dismiss, without_header, width)
+          # Build dialog attributes
+          dialog_attrs = ["id='#{dialog_id}'"]
+          # Escape both HTML and attribute characters for label
+          dialog_attrs << "label='#{escape_attribute(escape_html(label))}'" unless without_header
+          dialog_attrs << 'without-header' if without_header
+          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/image_dialog_transformer.rb

@@ -0,0 +1,111 @@
+# 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)
+        # First, protect inline code blocks from transformation
+        protected_content, code_blocks = protect_inline_code(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)
+          end
+        end
+
+        # Restore protected inline code
+        restore_inline_code(result, code_blocks)
+      end
+
+      class << self
+        private
+
+        # Protect inline code from transformation
+        def protect_inline_code(content)
+          code_blocks = []
+          protected = content.gsub(/`[^`]+`/) do |match|
+            placeholder = "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("INLINE_CODE_#{index}", code)
+          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)
+          # Parse width from title if specified (e.g., "50%", "800px", "60vw")
+          width = extract_width_from_title(title)
+
+          # Build dialog parameters
+          params = %w[light-dismiss without-header]
+          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 - full-size image
+          dialog_content = "<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.rb

@@ -11,6 +11,8 @@ require_relative 'transformers/card_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/jekyll/webawesome/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.4.0'
+    VERSION = '0.5.0'
   end
 end

data/lib/jekyll/webawesome.rb

@@ -23,7 +23,7 @@ module Jekyll
 
     # Configuration class for future extensibility
     class Configuration
-      attr_accessor :debug_mode, :callout_icons, :custom_components, :transform_pages, :transform_documents
+      attr_accessor :debug_mode, :callout_icons, :custom_components, :transform_pages, :transform_documents, :image_dialog
 
       def initialize
         @debug_mode = false
@@ -31,6 +31,7 @@ module Jekyll
         @custom_components = {}
         @transform_pages = true
         @transform_documents = true
+        @image_dialog = false # Opt-in by default for safety
       end
 
       private

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Janne Waren
@@ -125,7 +125,9 @@ files:
 - lib/jekyll/webawesome/transformers/comparison_transformer.rb
 - lib/jekyll/webawesome/transformers/copy_button_transformer.rb
 - lib/jekyll/webawesome/transformers/details_transformer.rb
+- lib/jekyll/webawesome/transformers/dialog_transformer.rb
 - lib/jekyll/webawesome/transformers/icon_transformer.rb
+- lib/jekyll/webawesome/transformers/image_dialog_transformer.rb
 - lib/jekyll/webawesome/transformers/tabs_transformer.rb
 - lib/jekyll/webawesome/transformers/tag_transformer.rb
 - lib/jekyll/webawesome/version.rb