jekyll-webawesome 0.5.2 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0eb043c7874298974076489ed4af4504d1bdce4e78f6e9820565ac30f5f5fb0d
-  data.tar.gz: 74533e8e3def155464fc7a29549884c8bc39cd0f7287a9f71f0586ad444227f2
+  metadata.gz: 4151360850db59b840cd6c2fa516b04e34d35bbb801267a2db536fd7ef7220b0
+  data.tar.gz: a80f3fcdf769f017376b7efac94a94370efc8659124f4f06c44eefbae7a46596
 SHA512:
-  metadata.gz: 0d81de534b59e1b689794758c51b616f4d8832008ed7f6e64aebb7d6baccd27acfd4f849ed8b316792985a9e7f3ed918ff71b8b7886f8ebd841d286620622435
-  data.tar.gz: f61de46408da1b0b9da491d98cce8069cf9c93e8073d96fa1c1126e272832450e3e374db3a7aea2fcd47425c92606d7dc6dba0419009173438f3f61ebb6f7be1
+  metadata.gz: bfb4e8b772c1ccfb06a576689cb3fc6cdfd73039feffb6bd665df066f3d6b396ae39acb6d8239d25e82f6e414210e6b41c6982155d6001b1ea5dbbf075ef918e
+  data.tar.gz: d13ced83c839e51da9e6a4d20485d32301adba87ae5ade88371e3308d34b626af96f899a5ccfef4de0f7c960f6fc597a7ce967932250979b5289f457bc5efa1f

data/CHANGELOG.md

@@ -8,6 +8,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 - Placeholder
 
+## [0.5.4] - 2025-10-20
+
+- Support for default width for the image_dialog like
+
+```yaml
+webawesome:
+  image_dialog:
+    enabled: true
+    default_width: 90vh
+```
+
+## [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

@@ -69,7 +69,13 @@ webawesome:
   transform_documents: true  # Transform documents (like blog posts in _posts)
   
   # Enable automatic image-to-dialog transformation (default: false)
+  # Can be a simple boolean
   image_dialog: true         # Makes all images clickable and open in dialogs
+  
+  # Or a hash with options for more control
+  image_dialog:
+    enabled: true            # Enable the feature
+    default_width: 90vh      # Default width for dialogs (e.g., 90vh, 80%, 1200px)
 ```
 
 And then execute:
@@ -387,16 +393,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 +424,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 +611,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
@@ -638,7 +628,13 @@ Enable automatic image-to-dialog transformation in your `_config.yml`:
 
 ```yaml
 webawesome:
+  # Simple boolean to enable
   image_dialog: true
+  
+  # Or configure with options
+  image_dialog:
+    enabled: true
+    default_width: 90vh      # Default width for all image dialogs
 ```
 
 When enabled, all markdown images automatically become clickable and open in full-size dialogs:
@@ -647,7 +643,9 @@ When enabled, all markdown images automatically become clickable and open in ful
 ![Architecture Diagram](diagram.png)
 ```
 
-**Control dialog width** by adding a width parameter to the title:
+**Default Width**: Set a default width for all image dialogs in the configuration. Images will use this width unless overridden in the title.
+
+**Control dialog width** by adding a width parameter to the title (overrides default):
 
 ```markdown
 ![Diagram](diagram.png "50%")        # Dialog width: 50%
@@ -667,6 +665,7 @@ Supported width units: `px`, `em`, `rem`, `vw`, `vh`, `%`, `ch`
 
 - Light-dismiss and headerless dialogs for clean UX
 - Thumbnail displays at original size, dialog shows full-size
+- Configurable default width for consistent sizing
 
 ### Tab Placements
 

data/lib/jekyll/webawesome/plugin.rb

@@ -52,6 +52,33 @@ module Jekyll
         false
       end
 
+      # Get image dialog configuration with default width support
+      def self.image_dialog_config(site)
+        config = {}
+        
+        # First check if it's enabled
+        enabled_config = nil
+        if Jekyll::WebAwesome.configuration
+          enabled_config = Jekyll::WebAwesome.configuration.image_dialog
+        elsif site.config.dig('webawesome', 'image_dialog') != nil
+          enabled_config = site.config.dig('webawesome', 'image_dialog')
+        end
+
+        # If disabled or not set, return empty config
+        return config unless enabled_config
+
+        # If it's a boolean true, set enabled
+        if enabled_config == true
+          config[:enabled] = true
+        # If it's a hash, merge it
+        elsif enabled_config.is_a?(Hash)
+          config = enabled_config.transform_keys(&:to_sym)
+          config[:enabled] = true unless config.key?(:enabled)
+        end
+
+        config
+      end
+
       # Check if a file is a markdown file
       def self.markdown_file?(filepath)
         filepath.to_s.match?(/\.md$/i)

data/lib/jekyll/webawesome/transformer.rb

@@ -18,7 +18,7 @@ module Jekyll
         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 = ImageDialogTransformer.transform(content, site) if site && Plugin.image_dialog_enabled?(site)
 
         content = DialogTransformer.transform(content)
         content = IconTransformer.transform(content)

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

@@ -9,7 +9,10 @@ module Jekyll
     # Images can opt-out by adding "nodialog" to the title attribute
     # Example: ![Alt text](image.png "nodialog")
     class ImageDialogTransformer < BaseTransformer
-      def self.transform(content)
+      def self.transform(content, site = nil)
+        # Get configuration including default width
+        config = site ? Plugin.image_dialog_config(site) : {}
+        
         # 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)
@@ -31,7 +34,7 @@ module Jekyll
             match
           else
             # Transform to clickable image with dialog
-            transform_to_dialog(alt_text, image_url, title)
+            transform_to_dialog(alt_text, image_url, title, config)
           end
         end
 
@@ -115,12 +118,16 @@ module Jekyll
 
         # 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)
+        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
-          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 +136,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.4'
   end
 end

data/lib/jekyll/webawesome.rb

@@ -31,7 +31,7 @@ module Jekyll
         @custom_components = {}
         @transform_pages = true
         @transform_documents = true
-        @image_dialog = false # Opt-in by default for safety
+        @image_dialog = false # Opt-in by default for safety, or can be a hash with options
       end
 
       private

metadata

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