jekyll-webawesome 0.3.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f09b4ba8c46c0b7691411998aea6960e82dbe53654c95c777361b53876ecc19c
-  data.tar.gz: 125a368ad99787b0dbec1901781bd1c7fa2fcfdc0c1b14fe2440f8cfe9ad119a
+  metadata.gz: b925e93ad2a43e360c982ac4fbc9c25ee0a0c4573039ecf2c182fa566377d60b
+  data.tar.gz: 32e0685f36e0c5a3532900ffb964aa15809ba2fb5fbc9d71240dba39d5612427
 SHA512:
-  metadata.gz: bc8e69fcd0869698e5b9e8ce3225ab219be8b50eb781beab64a4b7ad0571d4e2580189a4607b6254f52ed7e1fa1cb776b44c7c7443f9e50785cd45fe7d75c83a
-  data.tar.gz: a27a198436f697ff26959c06b73eba4f52e72164f400251517487f0242a3c959f126a15088f3c91b86ae3c6e3dcb6645c9fcaaf12f6ac1bfb5a084170b540a9d
+  metadata.gz: 53d88906164176d32ad025c073d410c8d585f782643e0e3372ae5da51daf1fd5c65519dc77a9dd952aff2870c2c3a6453d454cd858cacefa4f0b19b993466258
+  data.tar.gz: 9cc2f919be3f5513ca7269f5d9f9c722ab9cd386a78be5f9e1dd968ffd699e7edab43546c4b099d9ebb8fa55f41e5dfa79b30bc39fa9b446f8d0c00806fb18c2

data/CHANGELOG.md

@@ -6,7 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
-- Placeholder
+## [0.4.1] - 2025-10-02
+
+- Code blocks inside custom elements (wa-details, wa-callout, etc.) are now properly protected from markdown processing
+  - Previously, code blocks would be corrupted with HTML entities and extra `<p>` tags when nested inside custom elements
+
+## [0.4.0] - 2025-09-29
+
+- Support for icon placement in wa-details component
 
 ## [0.3.0] - 2025-09-29
 
@@ -18,8 +25,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [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)
@@ -30,8 +35,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

@@ -18,7 +18,7 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
 | **Card** | `===` | `:::wa-card` | `<wa-card>content</wa-card>` |
 | **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** | `^^^` | `:::wa-details` | `<wa-details><summary>summary</summary>content</wa-details>` |
+| **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>` |
 
@@ -372,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.
@@ -471,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/code_block_transformer.rb

@@ -48,38 +48,38 @@ module Jekyll
           content.match?(callout_pattern) || content.match?(details_pattern) || content.match?(tabs_pattern)
         end
 
-        # Transform code blocks from markdown syntax to Jekyll highlight tags
-        def transform_code_blocks(content)
+        # Protect all code blocks by converting them to placeholders
+        # This prevents markdown processing from corrupting code blocks inside custom elements
+        def protect_all_code_blocks(content)
           counter = @@protected_blocks.size
 
-          # First pass: protect markdown code blocks that contain WebAwesome syntax
-          content = content.gsub(CODE_BLOCK_PATTERN) do |match|
-            language = Regexp.last_match(1)
-            code_content = Regexp.last_match(2).strip
-
-            # If this is a markdown code block containing WebAwesome syntax, protect it
-            if language && language.downcase == 'markdown' && contains_webawesome_syntax?(code_content)
-              placeholder = "<!--PROTECTED_WEBAWESOME_EXAMPLE_#{counter}-->"
-              @@protected_blocks[placeholder] = match
-              counter += 1
-              placeholder
-            else
-              match # Leave other code blocks for normal processing
-            end
-          end
-
-          # Second pass: transform remaining code blocks normally
           content.gsub(CODE_BLOCK_PATTERN) do |match|
-            language = Regexp.last_match(1)
-            code_content = Regexp.last_match(2).strip
+            placeholder = "<!--PROTECTED_CODE_BLOCK_#{counter}-->"
+            @@protected_blocks[placeholder] = match
+            counter += 1
+            placeholder
+          end
+        end
 
-            if language && language.downcase != 'plain'
-              transformed = "{% highlight #{language} %}\n#{code_content}\n{% endhighlight %}"
-              transformed
+        # Transform code blocks from markdown syntax to Jekyll highlight tags
+        # This should be called AFTER WebAwesome transformers have processed the content
+        def transform_code_blocks(content)
+          # Transform code blocks that were previously protected
+          @@protected_blocks.transform_values! do |match|
+            if match =~ CODE_BLOCK_PATTERN
+              language = Regexp.last_match(1)
+              code_content = Regexp.last_match(2).strip
+
+              if language && language.downcase != 'plain'
+                "{% highlight #{language} %}\n#{code_content}\n{% endhighlight %}"
+              else
+                match # Return original block if no language or 'plain'
+              end
             else
-              match # Return original block if no language or 'plain'
+              match
             end
           end
+          content
         end
 
         # Restore protected WebAwesome example blocks after WaElementTransformer processing
@@ -101,23 +101,42 @@ module Jekyll
         CodeBlockTransformer.clear_protected_blocks
       end
 
-      Jekyll::Hooks.register :documents, :pre_render, priority: 30 do |document|
+      # STEP 1: Protect all code blocks BEFORE any transformations (highest priority)
+      Jekyll::Hooks.register :documents, :pre_render, priority: 50 do |document|
+        next unless document.relative_path =~ /.*\.md$/i
+        next unless CodeBlockTransformer.transform_documents_enabled?(document.site)
+
+        puts "Jekyll::WebAwesome::CodeBlockTransformer protecting code blocks in document: #{document.relative_path}\n"
+        document.content = CodeBlockTransformer.protect_all_code_blocks(document.content)
+      end
+
+      Jekyll::Hooks.register :pages, :pre_render, priority: 50 do |page|
+        next unless page.relative_path =~ /.*\.md$/i
+        next unless CodeBlockTransformer.transform_pages_enabled?(page.site)
+
+        puts "Jekyll::WebAwesome::CodeBlockTransformer protecting code blocks in page: #{page.relative_path}\n"
+        page.content = CodeBlockTransformer.protect_all_code_blocks(page.content)
+      end
+
+      # STEP 2: Transform protected code blocks to Jekyll highlight syntax
+      # This happens AFTER WebAwesome transformers (priority 20) but BEFORE restoration
+      Jekyll::Hooks.register :documents, :pre_render, priority: 15 do |document|
         next unless document.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_documents_enabled?(document.site)
 
-        puts "Jekyll::WebAwesome::CodeBlockTransformer processing document: #{document.relative_path}\n"
+        puts "Jekyll::WebAwesome::CodeBlockTransformer transforming code blocks in document: #{document.relative_path}\n"
         document.content = CodeBlockTransformer.transform_code_blocks(document.content)
       end
 
-      Jekyll::Hooks.register :pages, :pre_render, priority: 30 do |page|
+      Jekyll::Hooks.register :pages, :pre_render, priority: 15 do |page|
         next unless page.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_pages_enabled?(page.site)
 
-        puts "Jekyll::WebAwesome::CodeBlockTransformer processing page: #{page.relative_path}\n"
+        puts "Jekyll::WebAwesome::CodeBlockTransformer transforming code blocks in page: #{page.relative_path}\n"
         page.content = CodeBlockTransformer.transform_code_blocks(page.content)
       end
 
-      # Register hooks to restore protected blocks after WaElementTransformer
+      # STEP 3: Restore protected blocks after transformation (lowest priority)
       Jekyll::Hooks.register :documents, :pre_render, priority: 10 do |document|
         next unless document.relative_path =~ /.*\.md$/i
         next unless CodeBlockTransformer.transform_documents_enabled?(document.site)

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/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.3.0'
+    VERSION = '0.4.1'
   end
 end

metadata

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