jekyll-webawesome 0.13.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b54cfbaeca69a4a2c50d6b5da23ba58ac0af58f03f9c812f10ea165cedf31d5c
-  data.tar.gz: ac81039d7f111315bc44919f6c482141d9f0ce02e4e28187a992178567d29c2c
+  metadata.gz: eed7bec14cb14b78a96929ed9674a7863027188e5ddd9135ebad4754098f99ce
+  data.tar.gz: 5e1b26bd64f32c5bd956745dd3c557acf14fdf79ede90dfced47e7166c423241
 SHA512:
-  metadata.gz: 430ee12ec78d0c67ba7a5ac0a21eb538f9f2aaf93c8d1cec7cd8beeb9c17b1ee6c19ad21b55c6bc91cfb36db1bee54ddc62c9202e7b2bc88d57638f761548062
-  data.tar.gz: 23f9ebd7d40036ead017b802360dc59e387257b58fea64fa9961d0f13c26c1d834d936be427ce36e77f0af5264ede260f4d770c2ca7af06d219fe1a6abadf687
+  metadata.gz: 8f78a369900c6b38547a2431dab95ee5c2eb0a342ab7390f5577d282aa38e9acd1f96102f71c2650785eede96a3dfde10f99b82e0881471c17c4306137d8db81
+  data.tar.gz: 0d9dd06c86ff39b0c37706e2e4d392683cc3d0b0095ceab5b373199c2c0b9b43e0c44e2ea9dec9a1ed53b995a35d0e4e1f9d1601ceeaf066d41a3dbbd7c5d136

data/CHANGELOG.md

@@ -4,14 +4,40 @@ 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.1.0/)
 
-## [0.13.0] - 2026-02-16
+## [0.15.0] - 2026-03-12
 
 ### Added
 
-- **Icon sizes** — Append a size token to icons (`$$$settings:lg`, `$$$home:2x`) for predefined font-size scaling. Available sizes: `xs`, `sm`, `lg`, `xl`, `2x`, `3x`, `4x`
-- **Custom SVG icons** — Use a file path (`$$$/assets/icons/shoe.svg`) to render `<wa-icon src="...">` instead of a named icon. Sizes work with custom paths too
-- Icons section added to README and example site
+- **Inline popover syntax** via markawesome 0.9.0: `&&&trigger text >>> popover content&&&` for use within sentences
+  - Always renders as link-styled trigger (underlined text)
+  - Supports all parameters: placement, `without-arrow`, `distance:N`
+  - Plain text content (HTML-escaped, no markdown processing)
+  - Multiple inline popovers supported on the same line
+- Inline popover examples added to example site
+- Updated README with inline popover documentation
+
+### Changed
+
+- Updated `markawesome` dependency to `~> 0.9`
+
+## [0.14.0] - 2026-03-12
+
+### Changed
+
 - Updated `markawesome` dependency to `~> 0.7`
+- Popover rich content examples added to example site
+
+## [0.13.0] - 2026-03-12
+
+### Added
+
+- **Popover component** (`&&&` or `:::wa-popover`) via markawesome 0.7.0:
+  - Floating popover content attached to a trigger element
+  - Placement options: `top` (default), `bottom`, `left`, `right`
+  - `without-arrow` flag, `distance:N` parameter, `link` trigger style
+  - Trigger text and popover content separated by `>>>`
+- Example site updated with popover demonstrations (placements, link style, combined parameters)
+- Example site README updated to reference Web Awesome Kit (replaces outdated beta CDN reference)
 
 ## [0.12.0] - 2026-02-14
 

data/README.md

@@ -23,7 +23,8 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
 | **Copy Button** | `<<<placement? disabled? duration? labels?` | `:::wa-copy-button attributes?` | `<wa-copy-button value="content" tooltip-placement="right" disabled>` |
 | **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details appearance="..." icon-placement="...">content</wa-details>` |
 | **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
-| **Icon** | `$$$icon-name` or `$$$icon-name:size` | `:::wa-icon name [size]` | `<wa-icon name="icon-name"></wa-icon>` |
+| **Icon** | `$$$icon-name` | `:::wa-icon name` | `<wa-icon name="icon-name" variant="solid"></wa-icon>` |
+| **Popover** | `&&&placement? link? without-arrow? distance:N?` | `:::wa-popover params?` | `<wa-popover>` with trigger and floating content |
 | **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>` |
 
@@ -669,45 +670,6 @@ Status: @@@ warning Beta @@@ - testing in progress
 Combine inline @@@ pill small success Ready @@@ with attributes
 ```
 
-### Icons
-
-Insert icons inline using the `$$$` syntax:
-
-```markdown
-Click $$$settings to open settings.
-
-A larger icon: $$$home:2x
-
-Custom SVG: $$$/assets/icons/logo.svg
-```
-
-#### Icon Sizes
-
-Append a size token after `:` to control the icon size:
-
-```markdown
-$$$star:xs   Extra small (0.75em)
-$$$star:sm   Small (0.875em)
-$$$star      Default (inherits font size)
-$$$star:lg   Large (1.25em)
-$$$star:xl   Extra large (1.5em)
-$$$star:2x   2x (2em)
-$$$star:3x   3x (3em)
-$$$star:4x   4x (4em)
-```
-
-#### Custom SVG Icons
-
-Use a file path starting with `/` or `./` to render a custom SVG instead of a named icon:
-
-```markdown
-$$$/assets/icons/shoe.svg
-$$$/assets/icons/shoe.svg:2x
-$$$./icons/logo.svg:xl
-```
-
-This outputs `<wa-icon src="...">` instead of `<wa-icon name="...">`.
-
 ### Copy Buttons
 
 Create copy-to-clipboard buttons using the `<<<` syntax:
@@ -1091,6 +1053,168 @@ This dialog has light dismiss enabled and is 700px wide.
 
 > **Note**: The dialog uses Web Awesome's declarative `data-dialog` API, so no custom JavaScript is needed. Each dialog gets a unique ID automatically generated from its content. The header with X close button is always shown for accessibility, and a "Close" button is automatically added to the footer.
 
+### Popovers
+
+Create floating popover content attached to a trigger element using the `&&&` syntax:
+
+```markdown
+&&&
+Hover for info
+>>>
+This is the popover content with **markdown** support.
+&&&
+```
+
+This creates a trigger button and a floating popover:
+
+```html
+<wa-button id='popover-abc123' variant='text'>Hover for info</wa-button>
+<wa-popover for='popover-abc123' placement='top'>
+  <p>This is the popover content with <strong>markdown</strong> support.</p>
+</wa-popover>
+```
+
+#### Popover Placement
+
+Control where the popover appears relative to the trigger:
+
+```markdown
+&&&top
+Hover (top)
+>>>
+Popover content above the trigger.
+&&&
+
+&&&bottom
+Hover (bottom)
+>>>
+Popover content below the trigger.
+&&&
+
+&&&left
+Hover (left)
+>>>
+Popover content to the left.
+&&&
+
+&&&right
+Hover (right)
+>>>
+Popover content to the right.
+&&&
+```
+
+**Supported placements:** `top` (default), `bottom`, `left`, `right`
+
+#### Link-style Trigger
+
+Use the `link` parameter to render the trigger as underlined text instead of a button:
+
+```markdown
+&&&link
+Learn more
+>>>
+Detailed explanation that appears on hover.
+&&&
+
+&&&bottom link
+See details
+>>>
+This popover appears below the link-style trigger.
+&&&
+```
+
+Link triggers render as a native `<button>` styled to look like inline text with an underline, making them blend naturally into surrounding prose.
+
+#### Without Arrow
+
+Hide the popover's arrow indicator:
+
+```markdown
+&&&without-arrow
+Hover me
+>>>
+This popover has no arrow pointing to the trigger.
+&&&
+```
+
+#### Custom Distance
+
+Set the distance between the trigger and the popover (in pixels):
+
+```markdown
+&&&distance:20
+Hover me
+>>>
+This popover is 20px away from the trigger.
+&&&
+```
+
+#### Combining Parameters
+
+All parameters can be combined in any order:
+
+```markdown
+&&&bottom link without-arrow distance:10
+Read more
+>>>
+A link-style trigger with popover below, no arrow, and custom distance.
+&&&
+```
+
+#### Rich Popover Content
+
+The popover content supports full markdown — multiple paragraphs, lists, links, bold, italic, code, etc.:
+
+```markdown
+&&&top
+Show details
+>>>
+**Feature highlights:**
+
+- Supports *rich* markdown content
+- Including [links](https://example.com)
+- And `inline code`
+
+Multiple paragraphs work too.
+&&&
+```
+
+#### Inline Syntax
+
+Popovers can be used inline within a sentence using `&&&trigger text >>> popover content&&&` on a single line. Inline popovers always render as link-styled triggers:
+
+```markdown
+Send invoices via &&&Peppol >>> A standardized e-invoicing network&&& to your customers.
+
+Learn about &&&bottom API keys >>> API keys authenticate your requests&&& in the docs.
+
+Check &&&right without-arrow distance:5 validation >>> Invoices are validated against business rules&&& before submitting.
+```
+
+Parameters (placement, `without-arrow`, `distance:N`) come before the trigger text. Inline popover content is plain text (use block syntax for rich markdown content).
+
+#### Alternative Syntax
+
+You can also use the explicit `:::wa-popover` syntax:
+
+```markdown
+:::wa-popover bottom link
+Click for details
+>>>
+Popover content using the alternative syntax.
+:::
+```
+
+#### Popover Parameters
+
+| Option | Values | Default | Description |
+|--------|--------|---------|-------------|
+| `placement` | `top`, `bottom`, `left`, `right` | `top` | Where the popover appears |
+| `link` | keyword | off (always on for inline) | Renders trigger as underlined text instead of button |
+| `without-arrow` | keyword | off | Hides the popover arrow |
+| `distance:N` | number (pixels) | (default) | Distance between trigger and popover |
+
 ### Details/Summary (Collapsible Content)
 
 Create collapsible content using the `^^^` syntax:
@@ -1527,6 +1651,15 @@ Cards automatically parse content into these slots:
 - **Label Extraction**: First `#` heading becomes the dialog label, or button text is used as fallback
 - **Markdown Support**: Full markdown formatting in dialog content
 
+### Popover Parameters
+
+| Option | Values | Default | Description |
+|--------|--------|---------|-------------|
+| `placement` | `top`, `bottom`, `left`, `right` | `top` | Where the popover appears relative to the trigger |
+| `link` | keyword | off | Renders trigger as underlined text instead of a `wa-button` |
+| `without-arrow` | keyword | off | Hides the popover arrow indicator |
+| `distance:N` | number (pixels) | (default) | Custom distance between trigger and popover |
+
 ### Image Dialogs (Auto-transformation)
 
 Enable automatic image-to-dialog transformation in your `_config.yml`:

data/jekyll-webawesome.gemspec

@@ -33,7 +33,7 @@ Gem::Specification.new do |spec|
   spec.require_paths = ['lib']
 
   spec.add_dependency 'jekyll', '>= 3.7', '< 5.0'
-  spec.add_dependency 'markawesome', '~> 0.7'
+  spec.add_dependency 'markawesome', '~> 0.9'
 
   spec.add_development_dependency 'bundler', '~> 2.0'
   spec.add_development_dependency 'rake', '~> 13.0'

data/lib/jekyll/webawesome/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module WebAwesome
-    VERSION = '0.13.0'
+    VERSION = '0.15.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-webawesome
 version: !ruby/object:Gem::Version
-  version: 0.13.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Janne Waren
@@ -35,14 +35,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0.9'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.7'
+        version: '0.9'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement