jekyll-webawesome 0.5.4 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4151360850db59b840cd6c2fa516b04e34d35bbb801267a2db536fd7ef7220b0
-  data.tar.gz: a80f3fcdf769f017376b7efac94a94370efc8659124f4f06c44eefbae7a46596
+  metadata.gz: 006d303b4b8226fc4f479131a04650cdc071ca37447710f938241cb58e1bde2d
+  data.tar.gz: b07247507381997b47cfe8e15d1f0038f4b0845329d38de3fe16463d9ad641ca
 SHA512:
-  metadata.gz: bfb4e8b772c1ccfb06a576689cb3fc6cdfd73039feffb6bd665df066f3d6b396ae39acb6d8239d25e82f6e414210e6b41c6982155d6001b1ea5dbbf075ef918e
-  data.tar.gz: d13ced83c839e51da9e6a4d20485d32301adba87ae5ade88371e3308d34b626af96f899a5ccfef4de0f7c960f6fc597a7ce967932250979b5289f457bc5efa1f
+  metadata.gz: e11fdc51fb7a9fa64146067e1d0e8c6e567b66e0aaf3318643c5f30a55adbf6c3cf0e814a066c327bfabe2c6bba437f41fb8f10b608e6a583b3796618ca8f0f6
+  data.tar.gz: a62e77aa3a531e34d6a6e850030bf6ec12cd2e416c1acb99aa83ddcd0cb2d47e5ee5073e929b0a81005caa48f015ee40a639494e635cf53615bd3d3d110322db

data/CHANGELOG.md

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

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>` |
@@ -270,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:
@@ -579,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 |

data/lib/jekyll/webawesome/transformer.rb

@@ -13,6 +13,7 @@ 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)

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.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.4'
+    VERSION = '0.6.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.5.4
+  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