markawesome 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0bfe7629915ad2e621b40c4bc478c90f00313fe5f19ff46739cf1d9ddbff4583
+  data.tar.gz: b898ba0b05ba42755ddee581d9cc10cfa8a405df6b29e0d7bfad9f6e86523ec3
+SHA512:
+  metadata.gz: 24fc7fb6409b036053e0bfd475e1ea287c0cf34e28870ef11e2767ae78bb990c5a7038b5a84ecd776d976aeacc53afc531a6cab3a19a2f962f4845a8e27ea2e1
+  data.tar.gz: 5efa1542577c5bbbaf6417cc4c0b145a6c66725eca661b3b48241e791000eff6a4f66c7d1aac29971f45cf20a152b7ece83597f9a8ae426f0ab3c4fea94d8465

data/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-10-27
+
+### Added
+
+- Initial release
+- Core transformer functionality extracted from jekyll-webawesome
+- Support for Web Awesome components:
+  - Badges
+  - Buttons
+  - Callouts
+  - Cards
+  - Comparisons
+  - Copy Buttons
+  - Details
+  - Icons
+  - Tabs
+  - Tags
+- Configuration system for customizing component behavior
+- Framework-agnostic Markdown to Web Awesome transformation

data/LICENSE.txt

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Janne Warén
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,75 @@
+# Markawesome
+
+Markawesome is a Ruby library that transforms custom Markdown syntax into Web Awesome components. It provides a framework-agnostic way to convert Markdown to Web Awesome HTML.
+
+Used as the transformation engine behind the [jekyll-webawesome](https://github.com/jannewaren/jekyll-webawesome) plugin for [Jekyll](https://jekyllrb.com/).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'markawesome'
+```
+
+And then execute:
+
+```bash
+bundle install
+```
+
+Or install it yourself as:
+
+```bash
+gem install markawesome
+```
+
+## Usage
+
+```ruby
+require 'markawesome'
+
+content = <<~MARKDOWN
+  :::info
+  This is an info callout!
+  :::
+MARKDOWN
+
+transformed = Markawesome::Transformer.process(content)
+```
+
+## Supported Components
+
+| Component | Primary Syntax | Alternative Syntax | HTML Output |
+|-----------|----------------|-------------------|-------------|
+| **Badge** | `!!!variant` | `:::wa-badge variant` | `<wa-badge variant="brand">content</wa-badge>` |
+| **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 |
+| **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>` |
+
+## Configuration
+
+```ruby
+Markawesome.configure do |config|
+  config.callout_icons = {
+    info: 'circle-info',
+    success: 'circle-check',
+    neutral: 'gear',
+    warning: 'triangle-exclamation',
+    danger: 'circle-exclamation'
+  }
+end
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jannewaren/markawesome.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/markawesome/transformer.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require 'kramdown'
+require_relative 'transformers'
+
+module Markawesome
+  # Main transformer that orchestrates all component transformers
+  class Transformer
+    def self.process(content)
+      content = BadgeTransformer.transform(content)
+      content = ButtonTransformer.transform(content)
+      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)
+      TabsTransformer.transform(content)
+    end
+  end
+end

data/lib/markawesome/transformers/badge_transformer.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms badge syntax into wa-badge elements
+  # Primary syntax: !!!variant?\ncontent\n!!!
+  # Alternative syntax: :::wa-badge variant?\ncontent\n:::
+  # Variants: brand, success, neutral, warning, danger
+  class BadgeTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^!!!(brand|success|neutral|warning|danger)?\n(.*?)\n!!!/m
+      alternative_regex = /^:::wa-badge\s*(brand|success|neutral|warning|danger)?\n(.*?)\n:::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |variant, badge_content|
+        badge_content = badge_content.strip
+
+        build_badge_html(badge_content, variant)
+      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_badge_html(content, variant)
+        variant_attr = variant ? " variant=\"#{variant}\"" : ''
+        badge_html = markdown_to_html(content).strip
+
+        # Remove paragraph tags if the content is just text
+        badge_html = badge_html.gsub(%r{^<p>(.*)</p>$}m, '\1')
+
+        # Fix whitespace issues in Web Awesome badges by ensuring proper spacing
+        # Replace spaces after closing tags with non-breaking spaces to prevent CSS collapse
+        badge_html = badge_html.gsub(%r{(</\w+>)\s+}, '\1&nbsp;')
+
+        "<wa-badge#{variant_attr}>#{badge_html}</wa-badge>"
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/base_transformer.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+require 'English'
+require 'kramdown'
+
+module Markawesome
+  # Base class for all Web Awesome component transformers
+  # Each transformer should implement the transform method
+  class BaseTransformer
+    def self.transform(content)
+      raise NotImplementedError, 'Subclasses must implement the transform method'
+    end
+
+    class << self
+      protected
+
+      # Helper method to convert markdown content to HTML
+      def markdown_to_html(content)
+        Kramdown::Document.new(content).to_html
+      end
+
+      # Helper method to apply multiple regex patterns with the same transformation logic
+      # @param content [String] The content to transform
+      # @param patterns [Array<Hash>] Array of pattern hashes with :regex and :block
+      # @return [String] The transformed content
+      def apply_multiple_patterns(content, patterns)
+        patterns.each do |pattern|
+          content = content.gsub(pattern[:regex]) do |match|
+            pattern[:block].call(match, $LAST_MATCH_INFO)
+          end
+        end
+        content
+      end
+
+      # Helper method to create both primary and alternative syntax patterns
+      # @param primary_regex [Regexp] The primary syntax regex
+      # @param alternative_regex [Regexp] The alternative syntax regex
+      # @param transform_proc [Proc] The proc that takes captured groups and returns HTML
+      # @return [Array<Hash>] Array of pattern hashes
+      def dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+        [
+          {
+            regex: primary_regex,
+            block: proc do |_match, matchdata|
+              # Get all captured groups from the matchdata
+              captures = matchdata.captures
+              transform_proc.call(*captures)
+            end
+          },
+          {
+            regex: alternative_regex,
+            block: proc do |_match, matchdata|
+              # Get all captured groups from the matchdata
+              captures = matchdata.captures
+              transform_proc.call(*captures)
+            end
+          }
+        ]
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/button_transformer.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms button syntax into wa-button elements
+  # Primary syntax: %%%variant?\ncontent\n%%%
+  # Alternative syntax: :::wa-button variant?\ncontent\n:::
+  # Variants: brand, success, neutral, warning, danger
+  #
+  # Link buttons: %%%brand\n[Text](url)\n%%%
+  # Regular buttons: %%%brand\nText\n%%%
+  class ButtonTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^%%%(brand|success|neutral|warning|danger)?\n(.*?)\n%%%/m
+      alternative_regex = /^:::wa-button\s*(brand|success|neutral|warning|danger)?\n(.*?)\n:::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |variant, button_content|
+        button_content = button_content.strip
+
+        build_button_html(button_content, variant)
+      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_button_html(content, variant)
+        variant_attr = variant ? " variant=\"#{variant}\"" : ''
+
+        # Check if content contains a markdown link
+        link_match = content.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
+
+        if link_match
+          # It's a link button
+          link_text = link_match[1]
+          link_url = link_match[2]
+
+          # Process any markdown in the link text (bold, italic, etc.)
+          button_html = markdown_to_html(link_text).strip
+          button_html = button_html.gsub(%r{^<p>(.*)</p>$}m, '\1')
+
+          # Fix whitespace issues like in badges
+          button_html = button_html.gsub(%r{(</\w+>)\s+}, '\1&nbsp;')
+
+          "<wa-button#{variant_attr} href=\"#{link_url}\">#{button_html}</wa-button>"
+        else
+          # It's a regular button
+          button_html = markdown_to_html(content).strip
+          button_html = button_html.gsub(%r{^<p>(.*)</p>$}m, '\1')
+
+          # Fix whitespace issues like in badges
+          button_html = button_html.gsub(%r{(</\w+>)\s+}, '\1&nbsp;')
+
+          "<wa-button#{variant_attr}>#{button_html}</wa-button>"
+        end
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/callout_transformer.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms callout syntax into wa-callout elements
+  # Primary syntax: :::variant\ncontent\n:::
+  # Alternative syntax: :::wa-callout variant\ncontent\n:::
+  # Variants: info, success, neutral, warning, danger
+  class CalloutTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^:::(info|success|neutral|warning|danger)\n(.*?)\n:::/m
+      alternative_regex = /^:::wa-callout\s+(info|success|neutral|warning|danger)\n(.*?)\n:::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |variant, inner_content|
+        attrs = callout_attributes(variant)
+
+        element_tag = "wa-callout#{attrs[:additional_params]}"
+        html_content = "#{attrs[:inner_prepend]}#{markdown_to_html(inner_content)}"
+
+        "<#{element_tag}>#{html_content}</wa-callout>"
+      end
+
+      # Apply both patterns
+      patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def callout_attributes(variant)
+        config = Markawesome.configuration
+        icons = config&.callout_icons || default_callout_icons
+
+        case variant
+        when 'info'
+          {
+            additional_params: ' variant="brand"',
+            inner_prepend: "<wa-icon slot=\"icon\" name=\"#{icons[:info]}\" variant=\"solid\"></wa-icon>"
+          }
+        when 'success'
+          {
+            additional_params: ' variant="success"',
+            inner_prepend: "<wa-icon slot=\"icon\" name=\"#{icons[:success]}\" variant=\"solid\"></wa-icon>"
+          }
+        when 'neutral'
+          {
+            additional_params: ' variant="neutral"',
+            inner_prepend: "<wa-icon slot=\"icon\" name=\"#{icons[:neutral]}\" variant=\"solid\"></wa-icon>"
+          }
+        when 'warning'
+          {
+            additional_params: ' variant="warning"',
+            inner_prepend: "<wa-icon slot=\"icon\" name=\"#{icons[:warning]}\" variant=\"solid\"></wa-icon>"
+          }
+        when 'danger'
+          {
+            additional_params: ' variant="danger"',
+            inner_prepend: "<wa-icon slot=\"icon\" name=\"#{icons[:danger]}\" variant=\"solid\"></wa-icon>"
+          }
+        else
+          {
+            additional_params: '',
+            inner_prepend: ''
+          }
+        end
+      end
+
+      def default_callout_icons
+        {
+          info: 'circle-info',
+          success: 'circle-check',
+          neutral: 'gear',
+          warning: 'triangle-exclamation',
+          danger: 'circle-exclamation'
+        }
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/card_transformer.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms card syntax into wa-card elements
+  # Primary syntax: ===appearance?\ncontent\n===
+  # Alternative syntax: :::wa-card appearance?\ncontent\n:::
+  # Appearances: outlined (default), filled, filled-outlined, plain, accent
+  class CardTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^===(outlined|filled|filled-outlined|plain|accent)?\n(.*?)\n===/m
+      alternative_regex = /^:::wa-card\s*(outlined|filled|filled-outlined|plain|accent)?\n(.*?)\n:::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |appearance_param, card_content|
+        card_content = card_content.strip
+
+        appearance = normalize_appearance(appearance_param)
+        card_parts = parse_card_content(card_content)
+
+        build_card_html(card_parts, appearance)
+      end
+
+      # Apply both patterns
+      patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def normalize_appearance(appearance_param)
+        case appearance_param
+        when 'filled', 'filled-outlined', 'plain', 'accent'
+          appearance_param
+        else
+          'outlined' # default
+        end
+      end
+
+      def parse_card_content(content)
+        parts = {
+          media: nil,
+          header: nil,
+          content: content,
+          footer: nil
+        }
+
+        # Extract first image as media
+        if content.match(/^!\[([^\]]*)\]\(([^)]+)\)/)
+          parts[:media] = {
+            alt: ::Regexp.last_match(1),
+            src: ::Regexp.last_match(2)
+          }
+          # Remove the image from content
+          content = content.sub(/^!\[([^\]]*)\]\(([^)]+)\)\n?/, '')
+        end
+
+        # Extract first heading as header
+        if content.match(/^# (.+)$/)
+          parts[:header] = ::Regexp.last_match(1).strip
+          # Remove the heading from content
+          content = content.sub(/^# .+\n?/, '')
+        end
+
+        # Extract trailing buttons/links as footer
+        # Look for links or buttons at the end of the content
+        if content.match(/\n\[([^\]]+)\]\(([^)]+)\)\s*$/)
+          parts[:footer] = {
+            text: ::Regexp.last_match(1),
+            href: ::Regexp.last_match(2)
+          }
+          # Remove the footer link from content
+          content = content.sub(/\n\[([^\]]+)\]\(([^)]+)\)\s*$/, '')
+        end
+
+        # Update the main content after extractions
+        parts[:content] = content.strip
+        parts
+      end
+
+      def build_card_html(parts, appearance)
+        attributes = []
+        attributes << "appearance=\"#{appearance}\"" if appearance != 'outlined'
+
+        # Add SSR attributes if slots are present
+        attributes << 'with-media' if parts[:media]
+        attributes << 'with-header' if parts[:header]
+        attributes << 'with-footer' if parts[:footer]
+
+        attr_string = attributes.empty? ? '' : " #{attributes.join(' ')}"
+
+        html_parts = []
+
+        # Media slot
+        html_parts << "<img slot=\"media\" src=\"#{parts[:media][:src]}\" alt=\"#{parts[:media][:alt]}\">" if parts[:media]
+
+        # Header slot
+        if parts[:header]
+          header_html = markdown_to_html(parts[:header])
+          html_parts << "<div slot=\"header\">#{header_html}</div>"
+        end
+
+        # Main content
+        if parts[:content] && !parts[:content].empty?
+          content_html = markdown_to_html(parts[:content])
+          html_parts << content_html
+        end
+
+        # Footer slot
+        html_parts << "<div slot=\"footer\"><wa-button href=\"#{parts[:footer][:href]}\">#{parts[:footer][:text]}</wa-button></div>" if parts[:footer]
+
+        "<wa-card#{attr_string}>#{html_parts.join}</wa-card>"
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/comparison_transformer.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # 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

data/lib/markawesome/transformers/copy_button_transformer.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # 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

data/lib/markawesome/transformers/details_transformer.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms summary/details syntax into wa-details elements
+  # 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 - 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 |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}' icon-placement='#{icon_placement}'>" \
+        "<span slot='summary'>#{summary_html}</span>" \
+        "#{details_html}</wa-details>"
+      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_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'
+          'filled'
+        when 'filled-outlined'
+          'filled outlined'
+        when 'plain'
+          'plain'
+        else
+          '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/markawesome/transformers/icon_transformer.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms icon syntax into wa-icon elements
+  # Primary syntax: $$$icon-name
+  # Alternative syntax: :::wa-icon icon-name
+  #
+  # Examples:
+  # $$$settings -> <wa-icon name="settings"></wa-icon>
+  # $$$home -> <wa-icon name="home"></wa-icon>
+  # $$$user-circle -> <wa-icon name="user-circle"></wa-icon>
+  class IconTransformer < BaseTransformer
+    def self.transform(content)
+      # Protect code blocks first
+      protected_content, code_blocks = protect_code_blocks(content)
+
+      # Apply primary syntax transformation
+      # Only block patterns that look like incomplete icon names:
+      # $$$icon name (where 'icon name' could be intended as one identifier)
+      result = protected_content.gsub(/\$\$\$([a-zA-Z0-9\-_]+)(?![a-zA-Z0-9\-_]|\s+name\b)/) do
+        icon_name = ::Regexp.last_match(1)
+        build_icon_html(icon_name)
+      end
+
+      # Apply alternative syntax transformation
+      result = result.gsub(/:::wa-icon\s+([a-zA-Z0-9\-_]+)\s*\n:::/m) do
+        icon_name = ::Regexp.last_match(1)
+        build_icon_html(icon_name)
+      end
+
+      # Restore code blocks
+      restore_code_blocks(result, code_blocks)
+    end
+
+    class << self
+      private
+
+      def build_icon_html(icon_name)
+        # Clean and validate icon name
+        clean_name = icon_name.strip
+
+        # Return the wa-icon element
+        "<wa-icon name=\"#{clean_name}\"></wa-icon>"
+      end
+
+      def protect_code_blocks(content)
+        code_blocks = {}
+        counter = 0
+
+        # Protect fenced code blocks
+        protected = content.gsub(/```.*?```/m) do |match|
+          placeholder = "<!--ICON_PROTECTED_CODE_BLOCK_#{counter}-->"
+          code_blocks[placeholder] = match
+          counter += 1
+          placeholder
+        end
+
+        # Protect inline code
+        protected = protected.gsub(/`[^`]+`/) do |match|
+          placeholder = "<!--ICON_PROTECTED_INLINE_CODE_#{counter}-->"
+          code_blocks[placeholder] = match
+          counter += 1
+          placeholder
+        end
+
+        [protected, code_blocks]
+      end
+
+      def restore_code_blocks(content, code_blocks)
+        result = content
+        code_blocks.each do |placeholder, original|
+          result = result.gsub(placeholder, original)
+        end
+        result
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/tabs_transformer.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms tabs syntax into wa-tab-group elements
+  # Primary syntax: ++++++placement?\n+++tab1\ncontent\n+++\n+++tab2\ncontent\n+++\n++++++
+  # Alternative syntax: :::wa-tabs placement?\n+++tab1\ncontent\n+++\n+++tab2\ncontent\n+++\n:::
+  # Placements: top (default), bottom, start, end
+  class TabsTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^\+{6}(top|bottom|start|end)?\n((\+\+\+ [^\n]+\n.*?\n\+\+\+\n?)+)\+{6}/m
+      alternative_regex = /^:::wa-tabs\s*(top|bottom|start|end)?\n((\+\+\+ [^\n]+\n.*?\n\+\+\+\n?)+):::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |placement, tabs_block, _third_capture|
+        placement ||= 'top'
+
+        tabs, tab_panels = extract_tabs_and_panels(tabs_block)
+
+        "<wa-tab-group placement=\"#{placement}\">#{tabs.join}#{tab_panels.join}</wa-tab-group>"
+      end
+
+      # Apply both patterns
+      patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def extract_tabs_and_panels(tabs_block)
+        # Extract individual tabs
+        tab_contents = tabs_block.scan(/^\+\+\+ ([^\n]+)\n(.*?)\n\+\+\+/m)
+        tabs = []
+        tab_panels = []
+
+        tab_contents.each_with_index do |(title, panel_content), index|
+          tab_id = "tab-#{index + 1}"
+          tabs << "<wa-tab panel=\"#{tab_id}\">#{title.strip}</wa-tab>"
+
+          panel_html = markdown_to_html(panel_content.strip)
+          tab_panels << "<wa-tab-panel name=\"#{tab_id}\">#{panel_html}</wa-tab-panel>"
+        end
+
+        [tabs, tab_panels]
+      end
+    end
+  end
+end

data/lib/markawesome/transformers/tag_transformer.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms tag syntax into wa-tag elements
+  # Primary syntax: @@@variant?\ncontent\n@@@
+  # Alternative syntax: :::wa-tag variant?\ncontent\n:::
+  # Variants: brand, success, neutral, warning, danger
+  class TagTransformer < BaseTransformer
+    def self.transform(content)
+      # Define both regex patterns
+      primary_regex = /^@@@(brand|success|neutral|warning|danger)?\n(.*?)\n@@@/m
+      alternative_regex = /^:::wa-tag\s*(brand|success|neutral|warning|danger)?\n(.*?)\n:::/m
+
+      # Define shared transformation logic
+      transform_proc = proc do |variant, tag_content|
+        tag_content = tag_content.strip
+
+        build_tag_html(tag_content, variant)
+      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_tag_html(content, variant)
+        variant_attr = variant ? " variant=\"#{variant}\"" : ''
+        tag_html = markdown_to_html(content).strip
+
+        # Remove paragraph tags if the content is just text
+        tag_html = tag_html.gsub(%r{^<p>(.*)</p>$}m, '\1')
+
+        "<wa-tag#{variant_attr}>#{tag_html}</wa-tag>"
+      end
+    end
+  end
+end

data/lib/markawesome/transformers.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Index file for all Web Awesome transformers
+# This file makes it easy to require all transformers at once
+
+require_relative 'transformers/base_transformer'
+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/copy_button_transformer'
+require_relative 'transformers/details_transformer'
+require_relative 'transformers/icon_transformer'
+require_relative 'transformers/tabs_transformer'
+require_relative 'transformers/tag_transformer'

data/lib/markawesome/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Markawesome
+  VERSION = '0.1.0'
+end

data/lib/markawesome.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require_relative 'markawesome/version'
+require_relative 'markawesome/transformer'
+
+module Markawesome
+  class Error < StandardError; end
+
+  # Configuration options
+  class << self
+    attr_accessor :configuration
+
+    def configure
+      self.configuration ||= Configuration.new
+      yield(configuration) if block_given?
+      configuration
+    end
+  end
+
+  # Configuration class for customizing transformation behavior
+  class Configuration
+    attr_accessor :callout_icons, :custom_components
+
+    def initialize
+      @callout_icons = default_callout_icons
+      @custom_components = {}
+    end
+
+    private
+
+    def default_callout_icons
+      {
+        info: 'circle-info',
+        success: 'circle-check',
+        neutral: 'gear',
+        warning: 'triangle-exclamation',
+        danger: 'circle-exclamation'
+      }
+    end
+  end
+end

data/markawesome.gemspec

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_relative 'lib/markawesome/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'markawesome'
+  spec.version       = Markawesome::VERSION
+  spec.authors       = ['Janne Waren']
+  spec.email         = ['janne.waren@iki.fi']
+
+  spec.summary       = 'Markdown to Web Awesome transformer'
+  spec.description   = 'A library that transforms custom Markdown syntax into Web Awesome components.'
+  spec.homepage      = 'https://github.com/jannewaren/markawesome'
+  spec.license       = 'MIT'
+  spec.required_ruby_version = '>= 3.2'
+
+  spec.metadata['homepage_uri'] = spec.homepage
+  spec.metadata['source_code_uri'] = "#{spec.homepage}/tree/main"
+  spec.metadata['changelog_uri'] = "#{spec.homepage}/blob/main/CHANGELOG.md"
+
+  # Specify which files should be added to the gem when it is released.
+  spec.files = Dir.chdir(__dir__) do
+    Dir.glob('lib/**/*.rb') + %w[
+      README.md
+      CHANGELOG.md
+      LICENSE.txt
+      markawesome.gemspec
+    ]
+  end
+  spec.bindir        = 'exe'
+  spec.executables   = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
+  spec.require_paths = ['lib']
+
+  spec.add_dependency 'kramdown', '~> 2.0'
+
+  spec.add_development_dependency 'bundler', '~> 2.0'
+  spec.add_development_dependency 'rake', '~> 13.0'
+  spec.add_development_dependency 'rspec', '~> 3.0'
+  spec.add_development_dependency 'rubocop', '~> 1.0'
+end

metadata

@@ -0,0 +1,132 @@
+--- !ruby/object:Gem::Specification
+name: markawesome
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Janne Waren
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: kramdown
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+description: A library that transforms custom Markdown syntax into Web Awesome components.
+email:
+- janne.waren@iki.fi
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- lib/markawesome.rb
+- lib/markawesome/transformer.rb
+- lib/markawesome/transformers.rb
+- lib/markawesome/transformers/badge_transformer.rb
+- lib/markawesome/transformers/base_transformer.rb
+- lib/markawesome/transformers/button_transformer.rb
+- lib/markawesome/transformers/callout_transformer.rb
+- lib/markawesome/transformers/card_transformer.rb
+- lib/markawesome/transformers/comparison_transformer.rb
+- lib/markawesome/transformers/copy_button_transformer.rb
+- lib/markawesome/transformers/details_transformer.rb
+- lib/markawesome/transformers/icon_transformer.rb
+- lib/markawesome/transformers/tabs_transformer.rb
+- lib/markawesome/transformers/tag_transformer.rb
+- lib/markawesome/version.rb
+- markawesome.gemspec
+homepage: https://github.com/jannewaren/markawesome
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/jannewaren/markawesome
+  source_code_uri: https://github.com/jannewaren/markawesome/tree/main
+  changelog_uri: https://github.com/jannewaren/markawesome/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.2'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: Markdown to Web Awesome transformer
+test_files: []