jekyll-webawesome 0.2.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6846bb6aa40dc02ccf27b7dc52b2d1c519450931c778319171a6f6ea1c3e80be
-  data.tar.gz: 74ff31a509f50c591f1a24e3d336d6f22ed6d2e941ce6843bd22fd1ccbd75a9f
+  metadata.gz: 248a4b65617851cba2e7b5cc7b1a14f9424fa38649b0efbe7f5af4417b71df7f
+  data.tar.gz: 157cfaef53cc8d38d1b7d3d0ddd6fc2c383a9a2989da6f5be9a62e9dc9d19bd0
 SHA512:
-  metadata.gz: 82adf1d1266bb4670410e0ac61cb3f245e83f18cf7a85477539f8ccd91e0ba31598aa5118a23bfd81e5008795c25378d842c2151753cabcf6a794bf8c318bed4
-  data.tar.gz: 3f0dfbb5db90f64b36e924e22b5ed0e979ee5faf180abda604bc29f28545653dcc1b60432bd9223a573ff11b12aba3624e260199be4e38db07b3643e4df0e18a
+  metadata.gz: fb931b98a57633b9924bbaf3143f4b3cda7bab15e3778f1d698775c95e349a3802d6f1d9fa537ebe8424e3e4debbf9d0d411101e2fd9481bbd9aee7224e86bc9
+  data.tar.gz: b0d50534280129717c3fa47445a66cf44313995b31061728679ad3324c05e9927934686e1b9a9343f7037f62fde575581c25571ebe437c2f1ed70c90cd8ba803

data/CHANGELOG.md

@@ -6,14 +6,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
+- Placeholder
+
+## [0.4.0] - 2025-09-29
+
+- Support for icon placement in wa-details component
+
+## [0.3.0] - 2025-09-29
+
+- Support for wa-copy-button component (`<<<...<<<` or `:::wa-copy-button`)
+
 ## [0.2.1] - 2025-09-23
 
 - Fixed issues with icon transformation messing up code blocks and inline code
 
 ## [0.2.0] - 2025-09-03
 
-### Added
-
 - Configuration options to control transformation scope
   - `transform_pages` - Enable/disable transformations for pages (default: true)
   - `transform_documents` - Enable/disable transformations for documents/posts (default: true)
@@ -24,8 +32,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [0.1.0] - 2025-08-09
 
-### Added
-
 - Initial release of jekyll-webawesome gem
 - Support for Badge components (`!!!variant` or `:::wa-badge variant`)
 - Support for Button components (`%%%variant` or `:::wa-button variant`)

data/README.md

@@ -17,7 +17,8 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
 | **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>` |
 | **Comparison** | `\|\|\|` or `\|\|\|25` | `:::wa-comparison` or `:::wa-comparison 25` | `<wa-comparison>` with before/after slots |
-| **Details** | `^^^` | `:::wa-details` | `<wa-details><summary>summary</summary>content</wa-details>` |
+| **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>` |
 | **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
 | **Tag** | `@@@brand` | `:::wa-tag brand` | `<wa-tag variant="brand">content</wa-tag>` |
 
@@ -27,7 +28,6 @@ These content-focused components will get dedicated syntax in future releases:
 
 | Component | Primary Syntax | Alternative syntax | HTML Output |
 |-----------|----------------------|-------------------|-------------|
-| **Copy Button** | `<<<` | `:::wa-copy-button` | `<wa-copy-button>content</wa-copy-button>` |
 | **Icon** | `$$$icon-name` | `:::wa-icon name` | `<wa-icon name="icon-name"></wa-icon>` |
 | **Progress Bar** | `&&&value` | `:::wa-progress-bar value` | `<wa-progress-bar value="50"></wa-progress-bar>` |
 | **Rating** | `???value` | `:::wa-rating value` | `<wa-rating value="4"></wa-rating>` |
@@ -294,6 +294,44 @@ These transform into Web Awesome tag components with appropriate colors and styl
 
 ![Tags component example](readme_screenshots/tags.png)
 
+### Copy Buttons
+
+Create copy-to-clipboard buttons using the `<<<` syntax:
+
+```markdown
+<<<
+Copy this simple text
+<<<
+
+<<<
+npm install jekyll-webawesome
+<<<
+```
+
+Copy buttons support **markdown formatting** in the display text while preserving the original markdown in the clipboard value:
+
+```markdown
+<<<
+**Copy** this text with *markdown* formatting and `code`
+<<<
+```
+
+This transforms into a Web Awesome copy button component:
+
+```html
+<wa-copy-button value="**Copy** this text with *markdown* formatting and `code`"></wa-copy-button>
+```
+
+Copy buttons work well for:
+
+- Code snippets and commands
+- URLs and configuration values  
+- Installation instructions
+- API keys or tokens
+- Any text users might want to copy
+
+> **Note**: The `value` attribute contains the raw text (including any markdown) that gets copied to the clipboard. The copy button displays the standard Web Awesome copy icon and handles the clipboard operation automatically.
+
 ### Details/Summary (Collapsible Content)
 
 Create collapsible content using the `^^^` syntax:
@@ -334,6 +372,38 @@ Content goes here
 ^^^
 ```
 
+You can also control icon placement (expand/collapse icon location):
+
+```markdown
+^^^start
+Summary with icon on the start (left)
+>>>
+The expand/collapse icon appears on the left side
+^^^
+
+^^^end
+Summary with icon on the end (right)
+>>>
+The expand/collapse icon appears on the right side (default)
+^^^
+```
+
+You can combine appearance and icon placement:
+
+```markdown
+^^^filled start
+Filled appearance with icon on the start
+>>>
+Content with both styling and icon positioning
+^^^
+
+^^^plain end
+Plain appearance with icon on the end
+>>>
+Parameters can be in any order: start filled, filled start, etc.
+^^^
+```
+
 ### Tab Groups
 
 Create tabbed content using the `++++++` syntax for tab groups and `+++` for tabs.
@@ -433,6 +503,13 @@ Cards automatically parse content into these slots:
 | `plain` | plain |
 | `filled-outlined` | filled outlined |
 
+### Details Icon Placement
+
+| Position | Description |
+|----------|-------------|
+| `end` (default) | Icon appears on the right side |
+| `start` | Icon appears on the left side |
+
 ### Tab Placements
 
 - `top` (default)

data/lib/jekyll/webawesome/transformer.rb

@@ -14,6 +14,7 @@ module Jekyll
         content = CalloutTransformer.transform(content)
         content = CardTransformer.transform(content)
         content = ComparisonTransformer.transform(content)
+        content = CopyButtonTransformer.transform(content)
         content = DetailsTransformer.transform(content)
         content = IconTransformer.transform(content)
         content = TagTransformer.transform(content)

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Jekyll
+  module WebAwesome
+    # Transforms copy button syntax into wa-copy-button elements
+    # Primary syntax: <<<\ncontent\n<<<
+    # Alternative syntax: :::wa-copy-button\ncontent\n:::
+    #
+    # Usage:
+    # <<<
+    # This text will be copied to clipboard
+    # <<<
+    #
+    # :::wa-copy-button
+    # Copy this text
+    # :::
+    class CopyButtonTransformer < BaseTransformer
+      def self.transform(content)
+        # Define both regex patterns
+        primary_regex = /^<<<\n(.*?)\n<<</m
+        alternative_regex = /^:::wa-copy-button\n(.*?)\n:::/m
+
+        # Define shared transformation logic
+        transform_proc = proc do |copy_content|
+          copy_content = copy_content.strip
+
+          build_copy_button_html(copy_content)
+        end
+
+        # Apply both patterns
+        patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+        apply_multiple_patterns(content, patterns)
+      end
+
+      class << self
+        private
+
+        def build_copy_button_html(content)
+          # Escape the content for the value attribute
+          escaped_content = content.gsub('"', '&quot;').gsub("'", '&#39;')
+
+          "<wa-copy-button value=\"#{escaped_content}\"></wa-copy-button>"
+        end
+      end
+    end
+  end
+end

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

@@ -5,25 +5,30 @@ require_relative 'base_transformer'
 module Jekyll
   module WebAwesome
     # Transforms summary/details syntax into wa-details elements
-    # Primary syntax: ^^^appearance?\nsummary\n>>>\ndetails\n^^^
-    # Alternative syntax: :::wa-details appearance?\nsummary\n>>>\ndetails\n:::
+    # Primary syntax: ^^^appearance? icon-placement?\nsummary\n>>>\ndetails\n^^^
+    # Alternative syntax: :::wa-details appearance? icon-placement?\nsummary\n>>>\ndetails\n:::
     # Appearances: outlined (default), filled, filled-outlined, plain
+    # Icon placement: start, end (default)
     class DetailsTransformer < BaseTransformer
       def self.transform(content)
-        # Define both regex patterns
-        primary_regex = /^\^\^\^?(outlined|filled|filled-outlined|plain)?\n(.*?)\n^>>>\n(.*?)\n^\^\^\^?/m
-        alternative_regex = /^:::wa-details\s*(outlined|filled|filled-outlined|plain)?\n(.*?)\n^>>>\n(.*?)\n:::/m
+        # Define both regex patterns - capture parameter string
+        primary_regex = /^\^\^\^?(.*?)\n(.*?)\n^>>>\n(.*?)\n^\^\^\^?/m
+        alternative_regex = /^:::wa-details\s*(.*?)\n(.*?)\n^>>>\n(.*?)\n:::/m
 
         # Define shared transformation logic
-        transform_proc = proc do |appearance_param, summary_content, details_content|
+        transform_proc = proc do |params_string, summary_content, details_content|
           summary_content = summary_content.strip
           details_content = details_content.strip
 
+          # Parse parameters from the params string
+          appearance_param, icon_placement_param = parse_parameters(params_string)
+
           appearance_class = normalize_appearance(appearance_param)
+          icon_placement = normalize_icon_placement(icon_placement_param)
           summary_html = markdown_to_html(summary_content)
           details_html = markdown_to_html(details_content)
 
-          "<wa-details appearance='#{appearance_class}'>" \
+          "<wa-details appearance='#{appearance_class}' icon-placement='#{icon_placement}'>" \
           "<span slot='summary'>#{summary_html}</span>" \
           "#{details_html}</wa-details>"
         end
@@ -36,6 +41,21 @@ module Jekyll
       class << self
         private
 
+        def parse_parameters(params_string)
+          return [nil, nil] if params_string.nil? || params_string.strip.empty?
+
+          # Split by whitespace and extract known parameters
+          tokens = params_string.strip.split(/\s+/)
+
+          appearance_options = %w[outlined filled filled-outlined plain]
+          placement_options = %w[start end]
+
+          appearance_param = tokens.find { |token| appearance_options.include?(token) }
+          icon_placement_param = tokens.find { |token| placement_options.include?(token) }
+
+          [appearance_param, icon_placement_param]
+        end
+
         def normalize_appearance(appearance_param)
           case appearance_param
           when 'filled'
@@ -48,6 +68,17 @@ module Jekyll
             'outlined'
           end
         end
+
+        def normalize_icon_placement(icon_placement_param)
+          case icon_placement_param
+          when 'start'
+            'start'
+          when 'end'
+            'end'
+          else
+            'end'
+          end
+        end
       end
     end
   end

data/lib/jekyll/webawesome/transformers.rb

@@ -9,6 +9,7 @@ require_relative 'transformers/button_transformer'
 require_relative 'transformers/callout_transformer'
 require_relative 'transformers/card_transformer'
 require_relative 'transformers/comparison_transformer'
+require_relative 'transformers/copy_button_transformer'
 require_relative 'transformers/details_transformer'
 require_relative 'transformers/icon_transformer'
 require_relative 'transformers/tabs_transformer'

data/lib/jekyll/webawesome/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.2.1'
+    VERSION = '0.4.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Janne Waren
@@ -123,6 +123,7 @@ files:
 - lib/jekyll/webawesome/transformers/callout_transformer.rb
 - lib/jekyll/webawesome/transformers/card_transformer.rb
 - lib/jekyll/webawesome/transformers/comparison_transformer.rb
+- lib/jekyll/webawesome/transformers/copy_button_transformer.rb
 - lib/jekyll/webawesome/transformers/details_transformer.rb
 - lib/jekyll/webawesome/transformers/icon_transformer.rb
 - lib/jekyll/webawesome/transformers/tabs_transformer.rb