jekyll-webawesome 0.5.2 → 0.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0eb043c7874298974076489ed4af4504d1bdce4e78f6e9820565ac30f5f5fb0d
-  data.tar.gz: 74533e8e3def155464fc7a29549884c8bc39cd0f7287a9f71f0586ad444227f2
+  metadata.gz: 229fd8aa9734c6c6c21684d05420d80db94b6b5a271f1dc2d8b901773bc61d3a
+  data.tar.gz: 373f57b7afbcfe0cccc2857f20987d91c1433768f3d0257773da9d7b3018f7f6
 SHA512:
-  metadata.gz: 0d81de534b59e1b689794758c51b616f4d8832008ed7f6e64aebb7d6baccd27acfd4f849ed8b316792985a9e7f3ed918ff71b8b7886f8ebd841d286620622435
-  data.tar.gz: f61de46408da1b0b9da491d98cce8069cf9c93e8073d96fa1c1126e272832450e3e374db3a7aea2fcd47425c92606d7dc6dba0419009173438f3f61ebb6f7be1
+  metadata.gz: 4f76a3acdd6417715ed2a928a94705f99b402a843f2cfa74b30ab4b0f9b632fe90182fac3d50aa18780d98ce260e6c7de460a5b3dd565cc45ea534e89aaaaa4d
+  data.tar.gz: d68c37818e5ae0a20f9ff236914110f163bc775374dde1c886baa210231c1a50596aaabd1ae6357c4bdbe3667385678a669a22b9ef04c72a1273135566187797

data/CHANGELOG.md

@@ -8,6 +8,10 @@ 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

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

@@ -120,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(' ')
 
@@ -129,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.2'
+    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.2
+  version: 0.5.3
 platform: ruby
 authors:
 - Janne Waren