markawesome 0.4.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a3394f03fff9ca20290650589ba70022b2f8ca71b5581f5d06cb4e06ac83f3f
-  data.tar.gz: d5af8667249a450c3119641dc38a9f148bbb2b30a1f8c76eae138c3765617fd5
+  metadata.gz: 2c03fbaecd8dec3c16fa5e2ddeb07b12d2eb35ad2fbc8389a49b725d77a3c2cf
+  data.tar.gz: 6b530bf8caae7b8717411b111e6e3e6f9fb6766373d0b80238cb3fa4ec7f98d6
 SHA512:
-  metadata.gz: c29d6692c8cd45f5f2a6a544de3505ff3a9af50a0d36468385f71b38daac30465ff23d15b5d94648f48690fae43d652cf495a4c7ea8d282bc96127a7376e22a3
-  data.tar.gz: c8134fa3a4a9344efe72ffa5d4a6504763ba9ebce4a4a9c6f7d8b0907de48506ebb9a7ae843bffd0898da5379ba2ebdf9bc100978f2b86add9cec722c4e3281e
+  metadata.gz: 6e2b2e8804309e702139068db433be5cbb62132eede58ff45a25d871b721bc2adab4a23d34b820ed8dda26907de2d51ab277b30a13f5d9037e3d26efd123d91f
+  data.tar.gz: 8ba50a46d31a068af6ae3d2dc28c2832d26b665e4a006fc74b34f5c59ee0a12596f4f8a7a1a98d7412f0150fe25215d3772521fe6fcaff5f1154c69ac91fc684

data/CHANGELOG.md

@@ -4,6 +4,28 @@ 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.6.0] - 2026-02-14
+
+### Changed
+
+- **BREAKING: Card header syntax** — Card headers now use `**bold text**` instead of `# heading`. The first bold-only line inside a card block becomes the header slot. This avoids markdownlint warnings about multiple top-level headings (MD025) and incorrect heading levels (MD001), and better reflects that card titles are not semantic document headings.
+
+## [0.5.0] - 2026-02-10
+
+### Added
+
+- **LayoutTransformer**: New `::::` (quadruple colon) syntax for wrapping content in Web Awesome CSS layout containers
+  - Supports 6 layout types: `grid`, `stack`, `cluster`, `split`, `flank`, `frame`
+  - Common attributes: `gap:SIZE`, `align:VALUE`, `justify:VALUE` for all layouts
+  - Grid-specific: `min:CSS_VALUE` for custom minimum column size (`--min-column-size`)
+  - Split-specific: `row` and `column` direction modifiers
+  - Flank-specific: `start`/`end` position modifiers, `size:CSS_VALUE`, `content:PCT`
+  - Frame-specific: `landscape`/`portrait`/`square` aspect ratios, `radius:SIZE`
+  - Dual syntax: both `::::grid` and `::::wa-grid` work identically
+  - CSS value sanitization for user-provided values (strips quotes, angle brackets, semicolons)
+  - Inner content is not markdown-converted, allowing component `:::` syntax to be processed by subsequent transformers
+  - Runs first in the pipeline so layout containers wrap around component output
+
 ## [0.4.0] - 2026-02-09
 
 ### Added

data/README.md

@@ -10,22 +10,52 @@ Used as the transformation engine for the [jekyll-webawesome](https://github.com
 - 🚀 **Simple Syntax** - Clean, intuitive Markdown extensions
 - ⚙️ **Configurable** - Customize icons, variants, and component behavior
 
-## Supported components
+## 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>` |
+| **Callout** | `:::info` | `:::wa-callout info` | `<wa-callout variant="brand"><wa-icon ...></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>` |
+| **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details>content</wa-details>` |
 | **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
+| **Icon** | `$$$icon-name` | `:::wa-icon icon-name` | `<wa-icon name="icon-name"></wa-icon>` |
+| **Image Dialog** | `![alt](url)` | — | Wraps images in clickable `<wa-dialog>` overlays |
 | **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>` |
 
+## Layout Utilities
+
+Layout utilities use `::::` (quadruple colon) syntax to wrap content in CSS layout containers. Inner content is not markdown-converted, so component `:::` syntax inside layouts works normally.
+
+| Layout | Primary Syntax | Alternative Syntax | HTML Output |
+|--------|----------------|-------------------|-------------|
+| **Grid** | `::::grid` | `::::wa-grid` | `<div class="wa-grid">content</div>` |
+| **Stack** | `::::stack` | `::::wa-stack` | `<div class="wa-stack">content</div>` |
+| **Cluster** | `::::cluster` | `::::wa-cluster` | `<div class="wa-cluster">content</div>` |
+| **Split** | `::::split` | `::::wa-split` | `<div class="wa-split">content</div>` |
+| **Flank** | `::::flank` | `::::wa-flank` | `<div class="wa-flank">content</div>` |
+| **Frame** | `::::frame` | `::::wa-frame` | `<div class="wa-frame">content</div>` |
+
+### Common layout attributes
+
+All layouts support these key:value attributes:
+
+- `gap:SIZE` — Sets spacing (`0`, `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`)
+- `align:VALUE` — Align items (`start`, `end`, `center`, `stretch`, `baseline`)
+- `justify:VALUE` — Justify content (`start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`)
+
+### Layout-specific attributes
+
+- **Grid**: `min:CSS_VALUE` — Minimum column size (e.g., `min:200px`)
+- **Split**: `row` or `column` — Direction modifier
+- **Flank**: `start` or `end` — Position modifier; `size:CSS_VALUE`, `content:PCT`
+- **Frame**: `landscape`, `portrait`, or `square` — Aspect ratio; `radius:SIZE` (`s`, `m`, `l`, `pill`, `circle`, `square`)
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/lib/markawesome/transformer.rb

@@ -7,6 +7,7 @@ module Markawesome
   # Main transformer that orchestrates all component transformers
   class Transformer
     def self.process(content, options = {})
+      content = LayoutTransformer.transform(content)
       content = BadgeTransformer.transform(content)
       content = ButtonTransformer.transform(content)
       content = CalloutTransformer.transform(content)

data/lib/markawesome/transformers/card_transformer.rb

@@ -10,6 +10,7 @@ module Markawesome
   # Supported attributes:
   #   appearance: outlined (default), filled, filled-outlined, plain, accent
   #   orientation: vertical (default), horizontal
+  # Card header: first **bold** line (not a heading) becomes the header slot
   class CardTransformer < BaseTransformer
     CARD_ATTRIBUTES = {
       appearance: %w[outlined filled filled-outlined plain accent],
@@ -57,11 +58,11 @@ module Markawesome
           content = content.sub(/^!\[([^\]]*)\]\(([^)]+)\)\n?/, '')
         end
 
-        # Extract first heading as header
-        if content.match(/^# (.+)$/)
+        # Extract first bold line as header
+        if content.match(/^\*\*(.+)\*\*$/)
           parts[:header] = ::Regexp.last_match(1).strip
-          # Remove the heading from content
-          content = content.sub(/^# .+\n?/, '')
+          # Remove the bold line from content
+          content = content.sub(/^\*\*(.+)\*\*\n?/, '')
         end
 
         # Extract trailing buttons/links as footer

data/lib/markawesome/transformers/layout_transformer.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+require_relative 'base_transformer'
+
+module Markawesome
+  # Transforms layout syntax into CSS layout utility containers
+  # Primary syntax: ::::type params?\ncontent\n::::
+  # Alternative syntax: ::::wa-type params?\ncontent\n::::
+  # Supported types: grid, stack, cluster, split, flank, frame
+  #
+  # Common attributes (all layouts):
+  #   gap:SIZE - wa-gap-{SIZE} class (0, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl)
+  #   align:VALUE - wa-align-items-{VALUE} class (start, end, center, stretch, baseline)
+  #   justify:VALUE - wa-justify-content-{VALUE} class (start, end, center, space-between, space-around, space-evenly)
+  #
+  # Grid-specific: min:CSS_VALUE - sets --min-column-size style
+  # Split-specific: row, column modifiers
+  # Flank-specific: start, end modifiers; size:CSS_VALUE, content:PCT
+  # Frame-specific: landscape, portrait, square modifiers; radius:SIZE
+  class LayoutTransformer < BaseTransformer
+    VALID_GAPS = %w[0 3xs 2xs xs s m l xl 2xl 3xl].freeze
+    VALID_ALIGNS = %w[start end center stretch baseline].freeze
+    VALID_JUSTIFIES = %w[start end center space-between space-around space-evenly].freeze
+    VALID_RADII = %w[s m l pill circle square].freeze
+
+    KEYWORD_MODIFIERS = {
+      split: %w[row column],
+      flank: %w[start end],
+      frame: %w[landscape portrait square]
+    }.freeze
+
+    COMMON_KEY_CLASS_MAP = {
+      'gap' => ->(v) { "wa-gap-#{v}" if VALID_GAPS.include?(v) },
+      'align' => ->(v) { "wa-align-items-#{v}" if VALID_ALIGNS.include?(v) },
+      'justify' => ->(v) { "wa-justify-content-#{v}" if VALID_JUSTIFIES.include?(v) }
+    }.freeze
+
+    def self.transform(content)
+      primary_regex = /^::::(grid|stack|cluster|split|flank|frame)[ \t]*([^\n]*)\n(.*?)\n::::/m
+      alternative_regex = /^::::wa-(grid|stack|cluster|split|flank|frame)[ \t]*([^\n]*)\n(.*?)\n::::/m
+
+      transform_proc = proc do |type, params_string, inner_content|
+        classes, styles = build_attributes(type, params_string)
+        build_html(classes, styles, inner_content)
+      end
+
+      patterns = dual_syntax_patterns(primary_regex, alternative_regex, transform_proc)
+      apply_multiple_patterns(content, patterns)
+    end
+
+    class << self
+      private
+
+      def build_attributes(type, params_string)
+        classes = ["wa-#{type}"]
+        styles = []
+
+        return [classes, styles] if params_string.nil? || params_string.strip.empty?
+
+        tokens = params_string.strip.split(/\s+/)
+
+        tokens.each do |token|
+          process_token(type, token, classes, styles)
+        end
+
+        [classes, styles]
+      end
+
+      def process_token(type, token, classes, styles)
+        if token.include?(':')
+          process_key_value(type, token, classes, styles)
+        else
+          process_keyword(type, token, classes)
+        end
+      end
+
+      def process_key_value(type, token, classes, styles)
+        key, value = token.split(':', 2)
+        return if value.nil? || value.empty?
+
+        if COMMON_KEY_CLASS_MAP.key?(key)
+          css_class = COMMON_KEY_CLASS_MAP[key].call(value)
+          classes << css_class if css_class
+        else
+          process_type_specific_key_value(type, key, value, classes, styles)
+        end
+      end
+
+      def process_type_specific_key_value(type, key, value, classes, styles)
+        case key
+        when 'min'
+          styles << "--min-column-size: #{sanitize_css(value)}" if type == 'grid'
+        when 'size'
+          styles << "--flank-size: #{sanitize_css(value)}" if type == 'flank'
+        when 'content'
+          styles << "--content-percentage: #{sanitize_css(value)}" if type == 'flank'
+        when 'radius'
+          classes << "wa-border-radius-#{value}" if type == 'frame' && VALID_RADII.include?(value)
+        end
+      end
+
+      def process_keyword(type, token, classes)
+        modifiers = KEYWORD_MODIFIERS[type.to_sym]
+        return unless modifiers&.include?(token)
+
+        classes[0] = "wa-#{type}:#{token}"
+      end
+
+      def sanitize_css(value)
+        value.gsub(/["'<>;]/, '')
+      end
+
+      def build_html(classes, styles, inner_content)
+        attr_parts = ["class=\"#{classes.join(' ')}\""]
+        attr_parts << "style=\"#{styles.join('; ')}\"" unless styles.empty?
+
+        "<div #{attr_parts.join(' ')}>\n#{inner_content}\n</div>"
+      end
+    end
+  end
+end

data/lib/markawesome/transformers.rb

@@ -15,5 +15,6 @@ require_relative 'transformers/details_transformer'
 require_relative 'transformers/dialog_transformer'
 require_relative 'transformers/icon_transformer'
 require_relative 'transformers/image_dialog_transformer'
+require_relative 'transformers/layout_transformer'
 require_relative 'transformers/tabs_transformer'
 require_relative 'transformers/tag_transformer'

data/lib/markawesome/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Janne Waren
@@ -107,6 +107,7 @@ files:
 - lib/markawesome/transformers/dialog_transformer.rb
 - lib/markawesome/transformers/icon_transformer.rb
 - lib/markawesome/transformers/image_dialog_transformer.rb
+- lib/markawesome/transformers/layout_transformer.rb
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
 - lib/markawesome/version.rb