jekyll-webawesome 0.4.1 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b925e93ad2a43e360c982ac4fbc9c25ee0a0c4573039ecf2c182fa566377d60b
-  data.tar.gz: 32e0685f36e0c5a3532900ffb964aa15809ba2fb5fbc9d71240dba39d5612427
+  metadata.gz: 5f88821b94fa1042ddd81efc46e15e35eb4b0c53f1159ccba1f92f171bf3b498
+  data.tar.gz: a10ad10f3477bbbe7da32eab5b9faaab0ef202e94aa6369ee28936ae52017d19
 SHA512:
-  metadata.gz: 53d88906164176d32ad025c073d410c8d585f782643e0e3372ae5da51daf1fd5c65519dc77a9dd952aff2870c2c3a6453d454cd858cacefa4f0b19b993466258
-  data.tar.gz: 9cc2f919be3f5513ca7269f5d9f9c722ab9cd386a78be5f9e1dd968ffd699e7edab43546c4b099d9ebb8fa55f41e5dfa79b30bc39fa9b446f8d0c00806fb18c2
+  metadata.gz: 78af1fefc803ab19f6da488775df860d49c0f7855afdec3ed9e2a8794b5e4261914bbd169ad275be7094a8aa10656c36c0ce6a3db88021544ffd6e7b81b2c47f
+  data.tar.gz: 9bb145b074f07b779f0fec449d3b24c2c7727a7fd55e9cdeb1697460a8d0214bf6052d84ce0a2686a0b4e2c83264c1a0137cfdb71e20eef204d4d6febfe7cf5d

data/CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
+- Placeholder
+
+## [0.5.1] - 2025-10-20
+
+- Image dialog auto-transformation feature fix: protect comparison components
+
+## [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

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/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,133 @@
+# 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 and comparison blocks from transformation
+        protected_content, code_blocks = protect_inline_code(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)
+          end
+        end
+
+        # Restore protected comparison blocks first, then inline code
+        result = restore_comparisons(result, comparison_blocks)
+        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
+
+        # Protect comparison blocks from image transformation
+        def protect_comparisons(content)
+          comparison_blocks = []
+          # Match comparison blocks: <wa-comparison ...>...</wa-comparison>
+          protected = content.gsub(/<wa-comparison[^>]*>.*?<\/wa-comparison>/m) do |match|
+            placeholder = "COMPARISON_BLOCK_#{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("COMPARISON_BLOCK_#{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)
+          # 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.1'
+    VERSION = '0.5.1'
   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.1
+  version: 0.5.1
 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