markawesome 0.5.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c1a813451ca32ebe286489c510fd9ebc0f161877d6e20bdc50c390c8e54669c8
-  data.tar.gz: fe1f091910a15ebf1f825769266fdaa1ff776e1ceace7a041e0fe71370b42817
+  metadata.gz: bd4d3d594adb8f57319bfbb9b353d9e1557cf9949417a4da62bd2e8e5f736ed3
+  data.tar.gz: e1018086c23e3c38f24312fb5a16c5194260083253e17100c7d591a9c93de25f
 SHA512:
-  metadata.gz: 1ddf1bc53111ca053bd5fe82040ee9387783dd95f0892658697a2f38f0b7a11ebd8fa1517df4e990fbda8aaa90f465f27bb1a6f46d673b8f6fc31a24acab5070
-  data.tar.gz: 83ac02b6ca5cb7744579661c068511c53666bf4ec8b550a6170050ab04f8911c053db46f1b87122b91aec2024b3a564f4e21d1a34e49189fdbb0e5152df99e49
+  metadata.gz: f3934636dd055cd7e418b276a1eae04f06f4c5a7527213ea6e59cdfd907cd8e9db0874a71790255891a559b907360889202205b36c15d6fa6b2a8c9454ab9c73
+  data.tar.gz: 83627f19b8439b91f2e2ac241cab1061546b2d50b267aa1096c2a3b96b4ee7b561d3bb53628cbeed2f285a07205331653fd1b6200d746cc0c2362bcfa7333bef

data/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.7.0] - 2026-02-16
+
+### Added
+
+- **IconTransformer: Size support** — Append a size token to control icon font-size via inline style. Primary syntax uses `:` separator (`$$$settings:lg`), alternative syntax uses space (`:::wa-icon settings lg`). Available sizes: `xs` (0.75em), `sm` (0.875em), `lg` (1.25em), `xl` (1.5em), `2x` (2em), `3x` (3em), `4x` (4em)
+- **IconTransformer: Custom SVG icons** — Use a file path starting with `/` or `./` to render `<wa-icon src="...">` instead of `<wa-icon name="...">`. Supports sizes too (`$$$/assets/icons/shoe.svg:2x`)
+
+## [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

data/README.md

@@ -10,22 +10,91 @@ 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` or `$$$icon-name:size` | `:::wa-icon icon-name [size]` | `<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>` |
 
+## Icon
+
+### Named icons
+
+Use a Web Awesome icon name:
+
+```markdown
+Click $$$settings to configure.
+A large $$$home:lg icon.
+```
+
+### Custom SVG icons
+
+Point to a local SVG file by starting the path with `/` or `./`:
+
+```markdown
+$$$/assets/icons/shoe.svg
+$$$/assets/icons/shoe.svg:2x
+$$$./icons/logo.svg:xl
+```
+
+This outputs `<wa-icon src="/assets/icons/shoe.svg"></wa-icon>` instead of using the `name` attribute.
+
+### Sizes
+
+Append a size token after `:` (primary syntax) or as a space-separated parameter (alternative syntax):
+
+| Token | CSS `font-size` |
+|-------|----------------|
+| `xs`  | 0.75em         |
+| `sm`  | 0.875em        |
+| `lg`  | 1.25em         |
+| `xl`  | 1.5em          |
+| `2x`  | 2em            |
+| `3x`  | 3em            |
+| `4x`  | 4em            |
+
+Without a size token, the icon inherits the surrounding font size.
+
+## 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/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/icon_transformer.rb

@@ -4,30 +4,46 @@ require_relative 'base_transformer'
 
 module Markawesome
   # Transforms icon syntax into wa-icon elements
-  # Primary syntax: $$$icon-name
-  # Alternative syntax: :::wa-icon icon-name
+  # Primary syntax: $$$icon-name or $$$icon-name:size
+  # Custom SVG syntax: $$$/path/to/icon.svg or $$$/path/to/icon.svg:size
+  # Alternative syntax: :::wa-icon icon-name [size] or :::wa-icon /path/to/icon.svg [size]
   #
   # Examples:
   # $$$settings -> <wa-icon name="settings"></wa-icon>
-  # $$$home -> <wa-icon name="home"></wa-icon>
-  # $$$user-circle -> <wa-icon name="user-circle"></wa-icon>
+  # $$$settings:lg -> <wa-icon name="settings" style="font-size: 1.25em;"></wa-icon>
+  # $$$/assets/icons/shoe.svg -> <wa-icon src="/assets/icons/shoe.svg"></wa-icon>
+  # $$$/assets/icons/shoe.svg:2x -> <wa-icon src="/assets/icons/shoe.svg" style="font-size: 2em;"></wa-icon>
+  #
+  # Available sizes: xs (0.75em), sm (0.875em), lg (1.25em), xl (1.5em), 2x (2em), 3x (3em), 4x (4em)
   class IconTransformer < BaseTransformer
+    SIZES = {
+      'xs' => '0.75em',
+      'sm' => '0.875em',
+      'lg' => '1.25em',
+      'xl' => '1.5em',
+      '2x' => '2em',
+      '3x' => '3em',
+      '4x' => '4em'
+    }.freeze
+
     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)
+      # Supports named icons ($$$settings:lg) and custom SVG paths ($$$/path/to/icon.svg:2x)
+      result = protected_content.gsub(%r{\$\$\$(\.?/[a-zA-Z0-9\-_./]+|[a-zA-Z0-9\-_]+)(?::([a-zA-Z0-9]+))?(?![a-zA-Z0-9\-_]|\s+name\b)}) do
+        icon_ref = ::Regexp.last_match(1)
+        size = ::Regexp.last_match(2)
+        build_icon_html(icon_ref, size)
       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)
+      # Supports named icons and custom SVG paths with optional size
+      result = result.gsub(%r{:::wa-icon\s+(\.?/[a-zA-Z0-9\-_./]+|[a-zA-Z0-9\-_]+)(?:\s+([a-zA-Z0-9]+))?\s*\n:::}m) do
+        icon_ref = ::Regexp.last_match(1)
+        size = ::Regexp.last_match(2)
+        build_icon_html(icon_ref, size)
       end
 
       # Restore code blocks
@@ -37,12 +53,20 @@ module Markawesome
     class << self
       private
 
-      def build_icon_html(icon_name)
-        # Clean and validate icon name
-        clean_name = icon_name.strip
+      def build_icon_html(icon_ref, size = nil)
+        clean_ref = icon_ref.strip
+
+        # Paths (starting with / or ./) use src attribute, otherwise use name
+        attr = if clean_ref.include?('/')
+                 "src=\"#{clean_ref}\""
+               else
+                 "name=\"#{clean_ref}\""
+               end
+
+        # Build style attribute for size
+        style = SIZES[size] ? " style=\"font-size: #{SIZES[size]};\"" : ''
 
-        # Return the wa-icon element
-        "<wa-icon name=\"#{clean_name}\"></wa-icon>"
+        "<wa-icon #{attr}#{style}></wa-icon>"
       end
 
       def protect_code_blocks(content)

data/lib/markawesome/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Janne Waren