jekyll-webawesome 0.5.3 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 229fd8aa9734c6c6c21684d05420d80db94b6b5a271f1dc2d8b901773bc61d3a
-  data.tar.gz: 373f57b7afbcfe0cccc2857f20987d91c1433768f3d0257773da9d7b3018f7f6
+  metadata.gz: 006d303b4b8226fc4f479131a04650cdc071ca37447710f938241cb58e1bde2d
+  data.tar.gz: b07247507381997b47cfe8e15d1f0038f4b0845329d38de3fe16463d9ad641ca
 SHA512:
-  metadata.gz: 4f76a3acdd6417715ed2a928a94705f99b402a843f2cfa74b30ab4b0f9b632fe90182fac3d50aa18780d98ce260e6c7de460a5b3dd565cc45ea534e89aaaaa4d
-  data.tar.gz: d68c37818e5ae0a20f9ff236914110f163bc775374dde1c886baa210231c1a50596aaabd1ae6357c4bdbe3667385678a669a22b9ef04c72a1273135566187797
+  metadata.gz: e11fdc51fb7a9fa64146067e1d0e8c6e567b66e0aaf3318643c5f30a55adbf6c3cf0e814a066c327bfabe2c6bba437f41fb8f10b608e6a583b3796618ca8f0f6
+  data.tar.gz: a62e77aa3a531e34d6a6e850030bf6ec12cd2e416c1acb99aa83ddcd0cb2d47e5ee5073e929b0a81005caa48f015ee40a639494e635cf53615bd3d3d110322db

data/CHANGELOG.md

@@ -8,6 +8,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 - Placeholder
 
+## [0.6.0] - 2025-10-22
+
+- Support for wa-carousel component
+
+## [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

data/README.md

@@ -16,6 +16,7 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
 | **Button** | `%%%variant` | `:::wa-button variant` | `<wa-button variant="brand" href="url">text</wa-button>` or `<wa-button variant="brand">text</wa-button>` |
 | **Callouts** | `:::info` | `:::wa-callout info` | `<wa-callout variant="brand"><wa-icon name="circle-info"></wa-icon>content</wa-callout>` |
 | **Card** | `===` | `:::wa-card` | `<wa-card>content</wa-card>` |
+| **Carousel** | `~~~~~~` | `:::wa-carousel` | `<wa-carousel>` with carousel items |
 | **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>` |
@@ -69,7 +70,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:
@@ -264,6 +271,207 @@ This card uses the accent appearance for emphasis.
 
 ![Cards component example](readme_screenshots/cards.png)
 
+### Carousel
+
+Create carousels (image sliders/content rotators) using the `~~~~~~` syntax:
+
+```markdown
+~~~~~~
+~~~
+![Mountain landscape](mountain.jpg)
+Beautiful mountain scenery
+~~~
+~~~
+![Ocean view](ocean.jpg)
+Peaceful ocean waves
+~~~
+~~~
+![Forest path](forest.jpg)
+Walking through the woods
+~~~
+~~~~~~
+```
+
+#### Multiple Slides Per View
+
+Show multiple slides at once by specifying the number:
+
+```markdown
+~~~~~~3
+~~~
+Product 1 content
+~~~
+~~~
+Product 2 content
+~~~
+~~~
+Product 3 content
+~~~
+~~~
+Product 4 content
+~~~
+~~~~~~
+```
+
+#### Navigation and Pagination
+
+Add navigation arrows and pagination dots with keywords:
+
+```markdown
+~~~~~~navigation pagination
+~~~
+First slide
+~~~
+~~~
+Second slide
+~~~
+~~~
+Third slide
+~~~
+~~~~~~
+```
+
+#### Slides Per Move
+
+Control how many slides advance at a time (first number is slides-per-page, second is slides-per-move):
+
+```markdown
+~~~~~~3 2 navigation
+~~~
+Slide 1
+~~~
+~~~
+Slide 2
+~~~
+~~~
+Slide 3
+~~~
+~~~
+Slide 4
+~~~
+~~~
+Slide 5
+~~~
+~~~~~~
+```
+
+This shows 3 slides at a time and moves 2 slides when navigating.
+
+#### Looping
+
+Enable continuous looping with the `loop` keyword:
+
+```markdown
+~~~~~~loop navigation
+~~~
+Slide 1
+~~~
+~~~
+Slide 2
+~~~
+~~~
+Slide 3
+~~~
+~~~~~~
+```
+
+#### Scroll Hint
+
+Add padding to show adjacent slides as a hint using the `scroll-hint` CSS property:
+
+```markdown
+~~~~~~scroll-hint:3rem navigation
+~~~
+![Photo 1](photo1.jpg)
+~~~
+~~~
+![Photo 2](photo2.jpg)
+~~~
+~~~
+![Photo 3](photo3.jpg)
+~~~
+~~~~~~
+```
+
+#### Advanced Options
+
+Combine multiple parameters for full control:
+
+```markdown
+~~~~~~3 2 loop navigation pagination scroll-hint:2rem
+~~~
+![Product 1](prod1.jpg)
+
+# Feature One
+
+Description here
+~~~
+~~~
+![Product 2](prod2.jpg)
+
+# Feature Two
+
+More details
+~~~
+~~~
+![Product 3](prod3.jpg)
+
+# Feature Three
+
+Additional info
+~~~
+~~~~~~
+```
+
+#### Removing Fixed Aspect Ratio
+
+For carousels with **text content, cards, or variable-height slides**, you may want to remove the default `16/9` aspect ratio to let content size naturally:
+
+```markdown
+~~~~~~aspect-ratio:auto navigation
+~~~
+# First Slide
+
+This carousel will size based on content height, not a fixed aspect ratio.
+
+Perfect for text-heavy slides or mixed content.
+~~~
+~~~
+# Second Slide
+
+Another slide with different content height.
+~~~
+~~~~~~
+```
+
+Use `aspect-ratio:auto` or `aspect-ratio:none` to override the default fixed height behavior.
+
+#### Carousel Parameters
+
+| Parameter Type | Syntax | Description |
+|----------------|--------|-------------|
+| **Slides Per Page** | First number (e.g., `3`) | How many slides visible at once (default: 1) |
+| **Slides Per Move** | Second number (e.g., `2`) | How many slides to advance (default: 1) |
+| **Loop** | `loop` | Enable continuous looping (default: off) |
+| **Navigation** | `navigation` | Show previous/next buttons |
+| **Pagination** | `pagination` | Show dot indicators |
+| **Autoplay** | `autoplay` | Auto-advance slides |
+| **Mouse Dragging** | `mouse-dragging` | Enable click-and-drag |
+| **Vertical** | `vertical` | Vertical orientation |
+| **Scroll Hint** | `scroll-hint:2rem` | Padding to show adjacent slides |
+| **Aspect Ratio** | `aspect-ratio:3/2` | Viewport aspect ratio (default: 16/9) |
+| **Slide Gap** | `slide-gap:1rem` | Space between slides |
+
+All parameters are optional and can be combined in any order:
+
+```markdown
+~~~~~~vertical pagination autoplay
+~~~
+Content here
+~~~
+~~~~~~
+```
+
 ### Tags
 
 Create tags using the `@@@` syntax:
@@ -573,6 +781,22 @@ Cards automatically parse content into these slots:
 - **Content**: Remaining content becomes main content
 - **Footer**: Trailing links become footer buttons
 
+### Carousel Options
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| Slides Per Page | Number (first numeric parameter) | How many slides visible at once (default: 1) |
+| Slides Per Move | Number (second numeric parameter) | How many slides to advance (default: 1) |
+| `loop` | Boolean | Enable continuous looping (default: off) |
+| `navigation` | Boolean | Show previous/next buttons (default: off) |
+| `pagination` | Boolean | Show dot indicators (default: off) |
+| `autoplay` | Boolean | Auto-advance slides (default: off) |
+| `mouse-dragging` | Boolean | Enable click-and-drag (default: off) |
+| `vertical` | Keyword | Use vertical orientation (default: horizontal) |
+| `scroll-hint:value` | CSS Property | Padding to show adjacent slides (e.g., `2rem`, `50px`) |
+| `aspect-ratio:value` | CSS Property | Viewport aspect ratio (default: 16/9, e.g., `3/2`, `4/3`). Use `auto` or `none` for content-based height |
+| `slide-gap:value` | CSS Property | Space between slides (default: `var(--wa-space-m)`) |
+
 ### Tag Variants
 
 | Type | Description |
@@ -622,7 +846,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:
@@ -631,7 +861,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%
@@ -651,6 +883,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

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

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

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Jekyll
+  module WebAwesome
+    # Transforms carousel syntax into wa-carousel elements
+    # Primary syntax: ~~~~~~params\n~~~ slide1\ncontent\n~~~\n~~~ slide2\ncontent\n~~~\n~~~~~~
+    # Alternative syntax: :::wa-carousel params\n~~~ slide1\ncontent\n~~~\n~~~ slide2\ncontent\n~~~\n:::
+    # Params can include: numbers (slides-per-page, slides-per-move), keywords (loop, navigation, pagination,
+    # autoplay, mouse-dragging, vertical), and CSS properties (scroll-hint:value, aspect-ratio:value, slide-gap:value)
+    class CarouselTransformer < BaseTransformer
+      def self.transform(content)
+        # Define both regex patterns
+        # Match: ~~~~~~params (optional)
+        #        ~~~
+        #        content (can be empty)
+        #        ~~~
+        #        (repeat slides)
+        #        ~~~~~~
+        primary_regex = /^~{6}([^\n]*)\n((?:~~~\n(?:.*?\n)?~~~\n?)+)~{6}/m
+        alternative_regex = /^:::wa-carousel\s*([^\n]*)\n((?:~~~\n(?:.*?\n)?~~~\n?)+):::/m
+
+        # Define shared transformation logic
+        transform_proc = proc do |params, slides_block, _third_capture|
+          parsed_params = parse_params(params)
+          slides = extract_slides(slides_block)
+
+          build_carousel_html(slides, parsed_params)
+        end
+
+        # Apply both patterns
+        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+        apply_multiple_patterns(content, patterns)
+      end
+
+      class << self
+        private
+
+        def parse_params(params)
+          return {} if params.nil? || params.strip.empty?
+
+          result = {
+            attributes: {},
+            css_vars: {}
+          }
+
+          tokens = params.strip.split(/\s+/)
+          numeric_count = 0
+
+          tokens.each do |token|
+            # Check for CSS custom properties (key:value)
+            if token.include?(':')
+              key, value = token.split(':', 2)
+              case key
+              when 'scroll-hint'
+                result[:css_vars]['--scroll-hint'] = value
+              when 'aspect-ratio'
+                # Support 'auto', 'none', or 'unset' to remove the default aspect ratio
+                # This is useful for text content or variable-height slides
+                result[:css_vars]['--aspect-ratio'] = value
+              when 'slide-gap'
+                result[:css_vars]['--slide-gap'] = value
+              end
+            # Check for numeric values
+            elsif token.match?(/^\d+$/)
+              numeric_count += 1
+              if numeric_count == 1
+                result[:attributes]['slides-per-page'] = token
+              elsif numeric_count == 2
+                result[:attributes]['slides-per-move'] = token
+              end
+            # Check for boolean flags
+            elsif %w[loop navigation pagination autoplay mouse-dragging vertical].include?(token)
+              # For orientation, we need to handle it specially
+              if token == 'vertical'
+                result[:attributes]['orientation'] = 'vertical'
+              else
+                result[:attributes][token] = true
+              end
+            end
+          end
+
+          result
+        end
+
+        def extract_slides(slides_block)
+          # Extract individual slides using ~~~ markers
+          # Handle both content and empty slides
+          slide_contents = slides_block.scan(/~~~\n(.*?)~~~(?:\n|$)/m)
+          slide_contents.map { |match| match[0].strip }
+        end
+
+        def build_carousel_html(slides, parsed_params)
+          attributes = build_attributes(parsed_params[:attributes] || {})
+          style = build_style(parsed_params[:css_vars] || {})
+
+          attr_string = attributes.empty? ? '' : " #{attributes.join(' ')}"
+          style_string = style.empty? ? '' : " style=\"#{style}\""
+
+          slide_items = slides.map do |slide_content|
+            slide_html = markdown_to_html(slide_content)
+            "<wa-carousel-item>#{slide_html}</wa-carousel-item>"
+          end
+
+          "<wa-carousel#{attr_string}#{style_string}>#{slide_items.join}</wa-carousel>"
+        end
+
+        def build_attributes(attrs)
+          return [] if attrs.nil? || attrs.empty?
+
+          attrs.map do |key, value|
+            if value == true
+              key
+            else
+              "#{key}=\"#{value}\""
+            end
+          end
+        end
+
+        def build_style(css_vars)
+          return '' if css_vars.nil? || css_vars.empty?
+
+          css_vars.map { |key, value| "#{key}: #{value}" }.join('; ')
+        end
+      end
+    end
+  end
+end

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,9 +118,12 @@ 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
           # Always include header with X close button for accessibility

data/lib/jekyll/webawesome/transformers.rb

@@ -8,6 +8,7 @@ require_relative 'transformers/badge_transformer'
 require_relative 'transformers/button_transformer'
 require_relative 'transformers/callout_transformer'
 require_relative 'transformers/card_transformer'
+require_relative 'transformers/carousel_transformer'
 require_relative 'transformers/comparison_transformer'
 require_relative 'transformers/copy_button_transformer'
 require_relative 'transformers/details_transformer'

data/lib/jekyll/webawesome/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.5.3'
+    VERSION = '0.6.0'
   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.3
+  version: 0.6.0
 platform: ruby
 authors:
 - Janne Waren
@@ -122,6 +122,7 @@ files:
 - lib/jekyll/webawesome/transformers/button_transformer.rb
 - lib/jekyll/webawesome/transformers/callout_transformer.rb
 - lib/jekyll/webawesome/transformers/card_transformer.rb
+- lib/jekyll/webawesome/transformers/carousel_transformer.rb
 - lib/jekyll/webawesome/transformers/comparison_transformer.rb
 - lib/jekyll/webawesome/transformers/copy_button_transformer.rb
 - lib/jekyll/webawesome/transformers/details_transformer.rb