jekyll-webawesome 0.5.1 → 0.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f88821b94fa1042ddd81efc46e15e35eb4b0c53f1159ccba1f92f171bf3b498
-  data.tar.gz: a10ad10f3477bbbe7da32eab5b9faaab0ef202e94aa6369ee28936ae52017d19
+  metadata.gz: 229fd8aa9734c6c6c21684d05420d80db94b6b5a271f1dc2d8b901773bc61d3a
+  data.tar.gz: 373f57b7afbcfe0cccc2857f20987d91c1433768f3d0257773da9d7b3018f7f6
 SHA512:
-  metadata.gz: 78af1fefc803ab19f6da488775df860d49c0f7855afdec3ed9e2a8794b5e4261914bbd169ad275be7094a8aa10656c36c0ce6a3db88021544ffd6e7b81b2c47f
-  data.tar.gz: 9bb145b074f07b779f0fec449d3b24c2c7727a7fd55e9cdeb1697460a8d0214bf6052d84ce0a2686a0b4e2c83264c1a0137cfdb71e20eef204d4d6febfe7cf5d
+  metadata.gz: 4f76a3acdd6417715ed2a928a94705f99b402a843f2cfa74b30ab4b0f9b632fe90182fac3d50aa18780d98ce260e6c7de460a5b3dd565cc45ea534e89aaaaa4d
+  data.tar.gz: d68c37818e5ae0a20f9ff236914110f163bc775374dde1c886baa210231c1a50596aaabd1ae6357c4bdbe3667385678a669a22b9ef04c72a1273135566187797

data/CHANGELOG.md

@@ -8,6 +8,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 - Placeholder
 
+## [0.5.3] - 2025-10-20
+
+- Always have a header with X button on the dialogs
+
+## [0.5.2] - 2025-10-20
+
+- Fix the image dialog auto-transformation feature protection again
+
 ## [0.5.1] - 2025-10-20
 
 - Image dialog auto-transformation feature fix: protect comparison components

data/README.md

@@ -387,16 +387,6 @@ 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
@@ -428,15 +418,9 @@ 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.
+> **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. The header with X close button is always shown for accessibility, and a "Close" button is automatically added to the footer.
 
 ### Details/Summary (Collapsible Content)
 
@@ -621,12 +605,12 @@ Cards automatically parse content into these slots:
 | 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
+- **Header with X Button**: The header with X close button is always shown for accessibility
 - **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

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

@@ -8,7 +8,8 @@ module Jekyll
     # 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)
+    # 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
@@ -24,7 +25,7 @@ module Jekyll
           dialog_content = dialog_content.strip
 
           # Parse parameters
-          light_dismiss, without_header, width = parse_parameters(params_string)
+          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)
@@ -37,7 +38,7 @@ module Jekyll
 
           # Build the dialog HTML
           build_dialog_html(dialog_id, button_text, label, content_html,
-                            light_dismiss, without_header, width)
+                            light_dismiss, width)
         end
 
         # Apply both patterns
@@ -50,12 +51,11 @@ module Jekyll
 
         # Parse parameters from the params string
         def parse_parameters(params_string)
-          return [false, false, nil] if params_string.nil? || params_string.strip.empty?
+          return [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
@@ -66,10 +66,11 @@ module Jekyll
             end
           end
 
-          [light_dismiss, without_header, width]
+          [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+(.+?)$/)
@@ -78,6 +79,7 @@ module Jekyll
             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
@@ -90,13 +92,14 @@ module Jekyll
         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, without_header, width)
+                              light_dismiss, 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
+          # 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

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

@@ -10,8 +10,9 @@ module Jekyll
     # 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)
+        # 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")
@@ -34,19 +35,40 @@ module Jekyll
           end
         end
 
-        # Restore protected comparison blocks first, then inline code
+        # Restore protected blocks in reverse order
         result = restore_comparisons(result, comparison_blocks)
-        restore_inline_code(result, code_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 = "INLINE_CODE_#{code_blocks.length}"
+            placeholder = "<!--IMAGE_DIALOG_INLINE_CODE_#{code_blocks.length}-->"
             code_blocks << match
             placeholder
           end
@@ -56,27 +78,37 @@ module Jekyll
         # 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)
+            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 = []
-          # Match comparison blocks: <wa-comparison ...>...</wa-comparison>
-          protected = content.gsub(/<wa-comparison[^>]*>.*?<\/wa-comparison>/m) do |match|
-            placeholder = "COMPARISON_BLOCK_#{comparison_blocks.length}"
+          
+          # 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("COMPARISON_BLOCK_#{index}", block)
+            content = content.gsub("<!--IMAGE_DIALOG_COMPARISON_#{index}-->", block)
           end
           content
         end
@@ -88,7 +120,8 @@ module Jekyll
           width = extract_width_from_title(title)
 
           # Build dialog parameters
-          params = %w[light-dismiss without-header]
+          # Always include header with X close button for accessibility
+          params = ['light-dismiss']
           params << width if width
           params_string = params.join(' ')
 
@@ -97,8 +130,10 @@ module Jekyll
           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;\" />"
+          # 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???

data/lib/jekyll/webawesome/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.5.1'
+    VERSION = '0.5.3'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.3
 platform: ruby
 authors:
 - Janne Waren