jekyll-webawesome 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11da0d2da16359893d07591941d1dcca5184c7befcaa03c95adab45b4945e2c2
-  data.tar.gz: e573335ac4e9caa1c46585593f1ab0718c58e58e03060dcb21a159a16324678a
+  metadata.gz: 6846bb6aa40dc02ccf27b7dc52b2d1c519450931c778319171a6f6ea1c3e80be
+  data.tar.gz: 74ff31a509f50c591f1a24e3d336d6f22ed6d2e941ce6843bd22fd1ccbd75a9f
 SHA512:
-  metadata.gz: d90cc934527c25df1c8444cb1e193f383ae60f6a4a679c590cffa1fdf25606d10f728b5bd30ab41cb96c44d1053300d49c8fdb4943b5568ff47c20d2f23636eb
-  data.tar.gz: 364c6eb910786df9e07ee90629c2a2af9fe8062d97e7837596f5ae320318eb2e65f25364c468995f79b70cbd65fd49a36628ee64aa009588349abd6ee0b39b9f
+  metadata.gz: 82adf1d1266bb4670410e0ac61cb3f245e83f18cf7a85477539f8ccd91e0ba31598aa5118a23bfd81e5008795c25378d842c2151753cabcf6a794bf8c318bed4
+  data.tar.gz: 3f0dfbb5db90f64b36e924e22b5ed0e979ee5faf180abda604bc29f28545653dcc1b60432bd9223a573ff11b12aba3624e260199be4e38db07b3643e4df0e18a

data/CHANGELOG.md

@@ -6,12 +6,34 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## [Unreleased]
 
+## [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)
+  - Can be configured via `_config.yml` or programmatically
+- Support for Comparison component (`|||` or `:::wa-comparison`)
+  - Optional position parameter to set initial slider position (`|||25` sets position to 25%)
+  - Requires exactly two images for before/after comparison
+
 ## [0.1.0] - 2025-08-09
 
 ### Added
 
 - Initial release of jekyll-webawesome gem
-- Support for callout components (:::info, :::success, :::warning, :::danger, :::neutral)
-- Support for details/summary components (^^^...>>>...^^^)
-- Support for tab group components (++++++...++++++)
+- Support for Badge components (`!!!variant` or `:::wa-badge variant`)
+- Support for Button components (`%%%variant` or `:::wa-button variant`)
+- Support for Callout components (`:::info`, `:::success`, `:::warning`, `:::danger`, `:::neutral` or `:::wa-callout variant`)
+- Support for Card components (`===` or `:::wa-card`)
+- Support for Details/Summary components (`^^^...>>>...^^^` or `:::wa-details`)
+- Support for Icon components (`$$$icon-name` or `:::wa-icon name`)
+- Support for Tag components (`@@@variant` or `:::wa-tag variant`)
+- Support for Tab Group components (`++++++...++++++` or `:::wa-tabs`)
 - Automatic Jekyll hooks integration
+- Dual syntax support (primary shorthand and alternative explicit syntax) for all components

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>` |
+| **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>` |
 | **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>` |
-| **Divider** | `\|\|\|` | `:::wa-divider` | `<wa-divider></wa-divider>` |
 | **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>` |
@@ -62,6 +62,10 @@ And add configuration options as needed in `_config.yml`:
 webawesome:
   # Enable debug output to see which files are being processed
   debug: true
+
+  # Control which file types to transform (default: both true)
+  transform_pages: true      # Transform pages (like index.md, about.md)
+  transform_documents: true  # Transform documents (like blog posts in _posts)
 ```
 
 And then execute:
@@ -70,6 +74,20 @@ And then execute:
 bundle install
 ```
 
+### Programmatic Configuration
+
+You can also configure the plugin programmatically in a `_plugins/` file or in your gem's initialization:
+
+```ruby
+require 'jekyll-webawesome'
+
+Jekyll::WebAwesome.configure do |config|
+  config.debug_mode = true
+  config.transform_pages = false     # Don't transform pages
+  config.transform_documents = true  # Only transform documents (posts)
+end
+```
+
 ## Live Examples
 
 See the plugin in action with a complete Jekyll site showcasing all supported components:
@@ -112,7 +130,49 @@ This is a neutral callout.
 :::
 ```
 
-These transform into Web Awesome callout components with appropriate icons and styling.
+These transform into Web Awesome callout components with appropriate icons and styling
+
+![Callout component example](readme_screenshots/callouts.png)
+
+### Comparison
+
+Create before/after image comparisons using the `|||` syntax:
+
+```markdown
+|||
+![Grayscale version](before.jpg)
+![Color version](after.jpg)
+|||
+```
+
+You can specify the initial position of the comparison slider (0-100):
+
+```markdown
+|||25
+![Grayscale version](before.jpg)
+![Color version](after.jpg)
+|||
+```
+
+This transforms into a Web Awesome comparison component that lets users interactively compare two images:
+
+```html
+<wa-comparison position="25">
+  <img slot="before" src="before.jpg" alt="Grayscale version" />
+  <img slot="after" src="after.jpg" alt="Color version" />
+</wa-comparison>
+```
+
+The comparison component requires exactly two images within the wrapper:
+
+- The first image becomes the "before" slot
+- The second image becomes the "after" slot
+- Standard Markdown image syntax is preserved: `![alt text](image.url)`
+- Optional position parameter (0-100) sets the initial slider position
+
+> **Note**: If the comparison block doesn't contain exactly two images, it will be left unchanged rather than transformed.
+
+![Comparison component example](readme_screenshots/comparison.png)
 
 ### Cards
 
@@ -198,6 +258,8 @@ This card uses the accent appearance for emphasis.
 ===
 ```
 
+![Cards component example](readme_screenshots/cards.png)
+
 ### Tags
 
 Create tags using the `@@@` syntax:
@@ -228,17 +290,9 @@ Documentation
 @@@
 ```
 
-These transform into Web Awesome tag components with appropriate colors and styling. Tags support markdown formatting within the content:
+These transform into Web Awesome tag components with appropriate colors and styling.
 
-```markdown
-@@@brand
-**v3.0** Beta
-@@@
-
-@@@success
-[View Results](https://example.com)
-@@@
-```
+![Tags component example](readme_screenshots/tags.png)
 
 ### Details/Summary (Collapsible Content)
 
@@ -282,7 +336,7 @@ Content goes here
 
 ### Tab Groups
 
-Create tabbed content using the `++++++` syntax:
+Create tabbed content using the `++++++` syntax for tab groups and `+++` for tabs.
 
 ```markdown
 ++++++
@@ -300,6 +354,8 @@ Content for the third tab.
 ++++++
 ```
 
+![Tabs component example](readme_screenshots/tabs1.png)
+
 You can specify tab placement:
 
 ```markdown
@@ -322,6 +378,8 @@ More content
 ++++++
 ```
 
+![Tabs component example](readme_screenshots/tabs2.png)
+
 Supported placements: `top` (default), `bottom`, `start`, `end`.
 
 ## Component Reference

data/lib/jekyll/webawesome/code_block_transformer.rb

@@ -14,6 +14,30 @@ module Jekyll
           @@protected_blocks.clear
         end
 
+        # Check if pages transformation is enabled
+        def transform_pages_enabled?(site)
+          # Check plugin configuration first
+          return Jekyll::WebAwesome.configuration.transform_pages if Jekyll::WebAwesome.configuration
+
+          # Check site config
+          return site.config.dig('webawesome', 'transform_pages') if site.config.dig('webawesome', 'transform_pages') != nil
+
+          # Default to true
+          true
+        end
+
+        # Check if documents transformation is enabled
+        def transform_documents_enabled?(site)
+          # Check plugin configuration first
+          return Jekyll::WebAwesome.configuration.transform_documents if Jekyll::WebAwesome.configuration
+
+          # Check site config
+          return site.config.dig('webawesome', 'transform_documents') if site.config.dig('webawesome', 'transform_documents') != nil
+
+          # Default to true
+          true
+        end
+
         # Check if a code block contains WebAwesome syntax that should be preserved
         def contains_webawesome_syntax?(content)
           # Check for WebAwesome patterns
@@ -79,6 +103,7 @@ module Jekyll
 
       Jekyll::Hooks.register :documents, :pre_render, priority: 30 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"
         document.content = CodeBlockTransformer.transform_code_blocks(document.content)
@@ -86,6 +111,7 @@ module Jekyll
 
       Jekyll::Hooks.register :pages, :pre_render, priority: 30 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"
         page.content = CodeBlockTransformer.transform_code_blocks(page.content)
@@ -94,6 +120,7 @@ module Jekyll
       # Register hooks to restore protected blocks after WaElementTransformer
       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)
 
         puts "Jekyll::WebAwesome::CodeBlockTransformer restoring code blocks in document: #{document.relative_path}\n"
         document.content = CodeBlockTransformer.restore_protected_blocks(document.content)
@@ -101,6 +128,7 @@ module Jekyll
 
       Jekyll::Hooks.register :pages, :pre_render, priority: 10 do |page|
         next unless page.relative_path =~ /.*\.md$/i
+        next unless CodeBlockTransformer.transform_pages_enabled?(page.site)
 
         puts "Jekyll::WebAwesome::CodeBlockTransformer restoring code blocks in page: #{page.relative_path}\n"
         page.content = CodeBlockTransformer.restore_protected_blocks(page.content)

data/lib/jekyll/webawesome/plugin.rb

@@ -16,6 +16,30 @@ module Jekyll
         false
       end
 
+      # Check if pages transformation is enabled
+      def self.transform_pages_enabled?(site)
+        # Check plugin configuration first
+        return Jekyll::WebAwesome.configuration.transform_pages if Jekyll::WebAwesome.configuration
+
+        # Check site config
+        return site.config.dig('webawesome', 'transform_pages') if site.config.dig('webawesome', 'transform_pages') != nil
+
+        # Default to true
+        true
+      end
+
+      # Check if documents transformation is enabled
+      def self.transform_documents_enabled?(site)
+        # Check plugin configuration first
+        return Jekyll::WebAwesome.configuration.transform_documents if Jekyll::WebAwesome.configuration
+
+        # Check site config
+        return site.config.dig('webawesome', 'transform_documents') if site.config.dig('webawesome', 'transform_documents') != nil
+
+        # Default to true
+        true
+      end
+
       # Check if a file is a markdown file
       def self.markdown_file?(filepath)
         filepath.to_s.match?(/\.md$/i)
@@ -24,6 +48,7 @@ module Jekyll
       # Register hooks for pre-render processing (before markdown conversion)
       Jekyll::Hooks.register :documents, :pre_render do |document|
         next unless markdown_file?(document.relative_path)
+        next unless transform_documents_enabled?(document.site)
 
         puts "Jekyll::WebAwesome Processing document (pre-render): #{document.relative_path}\n" if debug_enabled?(document.site)
         document.content = Transformer.process(document.content)
@@ -31,6 +56,7 @@ module Jekyll
 
       Jekyll::Hooks.register :pages, :pre_render do |page|
         next unless markdown_file?(page.relative_path)
+        next unless transform_pages_enabled?(page.site)
 
         puts "Jekyll::WebAwesome Processing page (pre-render): #{page.relative_path}\n" if debug_enabled?(page.site)
         page.content = Transformer.process(page.content)

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 = ComparisonTransformer.transform(content)
         content = DetailsTransformer.transform(content)
         content = IconTransformer.transform(content)
         content = TagTransformer.transform(content)

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

@@ -37,27 +37,27 @@ module Jekyll
           when 'info'
             {
               additional_params: ' variant="brand"',
-              inner_prepend: '<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>'
+              inner_prepend: '<wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>'
             }
           when 'success'
             {
               additional_params: ' variant="success"',
-              inner_prepend: '<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>'
+              inner_prepend: '<wa-icon slot="icon" name="circle-check" variant="solid"></wa-icon>'
             }
           when 'neutral'
             {
               additional_params: ' variant="neutral"',
-              inner_prepend: '<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>'
+              inner_prepend: '<wa-icon slot="icon" name="gear" variant="solid"></wa-icon>'
             }
           when 'warning'
             {
               additional_params: ' variant="warning"',
-              inner_prepend: '<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>'
+              inner_prepend: '<wa-icon slot="icon" name="triangle-exclamation" variant="solid"></wa-icon>'
             }
           when 'danger'
             {
               additional_params: ' variant="danger"',
-              inner_prepend: '<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>'
+              inner_prepend: '<wa-icon slot="icon" name="circle-exclamation" variant="solid"></wa-icon>'
             }
           else
             {

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

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Jekyll
+  module WebAwesome
+    # Transforms comparison syntax into wa-comparison elements
+    # Primary syntax: |||\n![before](before.jpg)\n![after](after.jpg)\n|||
+    # Primary syntax with position: |||50\n![before](before.jpg)\n![after](after.jpg)\n|||
+    # Alternative syntax: :::wa-comparison\n![before](before.jpg)\n![after](after.jpg)\n:::
+    # Alternative syntax with position: :::wa-comparison 50\n![before](before.jpg)\n![after](after.jpg)\n:::
+    # Expects exactly two image elements inside the wrapper
+    class ComparisonTransformer < BaseTransformer
+      def self.transform(content)
+        # Process primary syntax
+        content = content.gsub(/^\|\|\|(\d+)?\n(.*?)\n\|\|\|/m) do |match|
+          position = Regexp.last_match(1)
+          inner_content = Regexp.last_match(2).strip
+          images = extract_images(inner_content)
+
+          if images.length == 2
+            build_comparison_html(inner_content, position)
+          else
+            match # Return original match if not exactly 2 images
+          end
+        end
+
+        # Process alternative syntax
+        content.gsub(/^:::wa-comparison\s*(\d+)?\n(.*?)\n:::/m) do |match|
+          position = Regexp.last_match(1)
+          inner_content = Regexp.last_match(2).strip
+          images = extract_images(inner_content)
+
+          if images.length == 2
+            build_comparison_html(inner_content, position)
+          else
+            match # Return original match if not exactly 2 images
+          end
+        end
+      end
+
+      class << self
+        private
+
+        def build_comparison_html(content, position = nil)
+          images = extract_images(content)
+
+          before_image = build_image_html(images[0], 'before')
+          after_image = build_image_html(images[1], 'after')
+
+          position_attr = position ? " position=\"#{position}\"" : ''
+
+          "<wa-comparison#{position_attr}>#{before_image}#{after_image}</wa-comparison>"
+        end
+
+        def extract_images(content)
+          # Extract markdown image syntax: ![alt](url)
+          image_regex = /!\[([^\]]*)\]\(([^)]+)\)/
+          content.scan(image_regex)
+        end
+
+        def build_image_html(image_match, slot)
+          alt_text = image_match[0]
+          src = image_match[1]
+
+          # Escape HTML characters in alt text
+          escaped_alt = alt_text.gsub('&', '&amp;').gsub('"', '&quot;').gsub('<', '&lt;').gsub('>', '&gt;')
+
+          "<img slot=\"#{slot}\" src=\"#{src}\" alt=\"#{escaped_alt}\" />"
+        end
+      end
+    end
+  end
+end

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

@@ -52,7 +52,7 @@ module Jekyll
 
           # Protect fenced code blocks
           protected = content.gsub(/```.*?```/m) do |match|
-            placeholder = "ICON_PROTECTED_CODE_BLOCK_#{counter}"
+            placeholder = "<!--ICON_PROTECTED_CODE_BLOCK_#{counter}-->"
             code_blocks[placeholder] = match
             counter += 1
             placeholder
@@ -60,7 +60,7 @@ module Jekyll
 
           # Protect inline code
           protected = protected.gsub(/`[^`]+`/) do |match|
-            placeholder = "ICON_PROTECTED_INLINE_CODE_#{counter}"
+            placeholder = "<!--ICON_PROTECTED_INLINE_CODE_#{counter}-->"
             code_blocks[placeholder] = match
             counter += 1
             placeholder

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/comparison_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.1.0'
+    VERSION = '0.2.1'
   end
 end

data/lib/jekyll/webawesome.rb

@@ -23,12 +23,14 @@ module Jekyll
 
     # Configuration class for future extensibility
     class Configuration
-      attr_accessor :debug_mode, :callout_icons, :custom_components
+      attr_accessor :debug_mode, :callout_icons, :custom_components, :transform_pages, :transform_documents
 
       def initialize
         @debug_mode = false
         @callout_icons = default_callout_icons
         @custom_components = {}
+        @transform_pages = true
+        @transform_documents = true
       end
 
       private

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.1
 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/comparison_transformer.rb
 - lib/jekyll/webawesome/transformers/details_transformer.rb
 - lib/jekyll/webawesome/transformers/icon_transformer.rb
 - lib/jekyll/webawesome/transformers/tabs_transformer.rb