markawesome 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afd9d40552aa4f47c46ce12a72e4340075e9049a0d374dabbd894d6b4e9c0771
-  data.tar.gz: bf63ff67375e59593d352c35b9e6852fd4f436a4005eba52bdf695b54d734f11
+  metadata.gz: a3f542a573c1e649456cd84852aec0549b8a4029c23953a947d1966e86f6730c
+  data.tar.gz: 2db687f1c67cfa97ebab7b29eecf7152e5396d98bd614eb04c99e115ad59b267
 SHA512:
-  metadata.gz: eeb2dffdb406f0eeb414cedfe834a616540956dddf5854c972b9743088e62b9d92054a4a1db2be1dc68817b5b81bec1ef7f0b30a0055a5508c6641710b8dc5f1
-  data.tar.gz: c76afeb5d61c70cab00f10e8a3a0d9b2f825bf04b5c4e5f46915506092fb826c9f1e4cb49061da3c29437404c2c0d2188eaf38d634704a56f6398a3410438770
+  metadata.gz: 58e6b4bcd8f1ae4a82059def1b169b8cd553cdc23ebc3d83299533ddb3be3ee153f0eb23ec104deea2740b4cdcf5d3e581f3f2aeb47d1ce1322bed875e4f5412
+  data.tar.gz: 34c077b57d27f96b8d8dae36a387044fe9dc263d74f2260455fb5bcc9ed8e25ae92ecd23aedeaaa03e88edd9e5a98138ea0d4d6ec15798b8a53badbc1eb267aa

data/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.15.0] - 2026-06-24
+
+### Added
+
+- New `TooltipTransformer` producing Web Awesome `<wa-tooltip>` — inline contextual help on hover/focus for glossary terms and inline definitions. Declarative, zero-JS, and static-site-safe: the tooltip is attached to a focusable anchor `<span>` via an auto-generated `for`/`id` pair, so authors write only the trigger term and the tip text.
+  - **Inline syntax** (primary): `(((anchor term >>> tip text)))`. The `(((` delimiter is unused by any other transformer, is not Markdown- or Liquid-special, and never appears in normal prose; the `>>>` separator matches the popover/dialog/details convention (anchor first, tip after `>>>`).
+  - **Block alternative**: `:::wa-tooltip placement? distance:N?` / anchor / `>>>` / tip / `:::`, for consistency with every other component's `:::wa-*` form.
+  - **Attributes** (order-independent leading tokens): `placement` (`top` default, `bottom`, `left`, `right`) and `distance:N`. Mirrors `PopoverTransformer`'s surface minus `link`/`without-arrow` (WA `<wa-tooltip>` has no `without-arrow` boolean — arrow size is CSS-only).
+  - **Tip content** is plain text (HTML-escaped), with literal `\n` rendered as `<br>` — the same surface as the popover's *inline* form. Tooltips hold brief text, so there is no Markdown body.
+  - **Emitted markup**: a focusable `<span id="tooltip-…" tabindex="0" class="ma-tooltip-anchor" style="text-decoration: underline dotted; cursor: help;">` anchor followed by `<wa-tooltip for="tooltip-…" placement="…" [distance="…"]>`. The anchor is focusable so keyboard/AT users get the tip (tooltips fire on focus too); `ma-tooltip-anchor` is a styling hook (mirrors popover's `ma-popover-trigger`).
+  - **IDs** are auto-wired via `tooltip-<first 8 of MD5(anchor+tip)>`, with `-2`/`-3` dedup suffixes for repeated identical tooltips — the same scheme as `PopoverTransformer`. Runs immediately after `PopoverTransformer` (early, after `LayoutTransformer`) so inline tooltips inside cards/callouts/details are transformed before Kramdown escapes `(((`/`>>>`.
+  - **Plain-markdown degradation** (`render_as_markdown`, used for `.md` endpoints / llms.txt): both forms degrade to `**anchor** (tip)`, mirroring the popover inline degradation.
+- Aligned placements (`top-start`, …), `show-delay`/`hide-delay`, and a rich-content block form are explicit future follow-ups, not part of v1.
+
 ## [0.14.0] - 2026-06-24
 
 ### Added

data/lib/markawesome/plain_markdown_renderer.rb

@@ -26,7 +26,7 @@ module Markawesome
       #
       # @param component [Symbol] one of :accordion, :callout, :badge, :button,
       #   :card, :carousel, :comparison, :copy_button, :details, :dialog, :icon,
-      #   :image_dialog, :layout, :popover, :tabs, :tag.
+      #   :image_dialog, :layout, :popover, :tabs, :tag, :tooltip.
       # @yield [content, options] Proc that receives the full source content
       #   and the renderer options; returns the content with that component
       #   syntax replaced.
@@ -45,6 +45,7 @@ module Markawesome
     PIPELINE = %i[
       layout
       popover
+      tooltip
       badge
       button
       callout
@@ -64,6 +65,7 @@ module Markawesome
     TRANSFORMER_MAP = {
       layout: LayoutTransformer,
       popover: PopoverTransformer,
+      tooltip: TooltipTransformer,
       badge: BadgeTransformer,
       button: ButtonTransformer,
       callout: CalloutTransformer,

data/lib/markawesome/transformer.rb

@@ -12,6 +12,7 @@ module Markawesome
 
       content = LayoutTransformer.transform(content)
       content = PopoverTransformer.transform(content)
+      content = TooltipTransformer.transform(content)
       content = BadgeTransformer.transform(content)
       content = ButtonTransformer.transform(content)
       content = CalloutTransformer.transform(content)

data/lib/markawesome/transformers/tooltip_transformer.rb

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+require 'digest'
+require_relative 'base_transformer'
+require_relative '../attribute_parser'
+
+module Markawesome
+  # Transforms tooltip syntax into wa-tooltip elements attached to a focusable
+  # anchor span via an auto-generated for/id pair. Declarative, zero-JS, and
+  # static-site-safe — great for glossary terms and inline definitions.
+  #
+  # Inline syntax (primary): (((anchor term >>> tip text)))
+  # Alternative block syntax: :::wa-tooltip params\nanchor\n>>>\ntip\n:::
+  #
+  # Params: space-separated tokens (order doesn't matter)
+  # Placement: top (default), bottom, left, right
+  # Distance: distance:N (e.g., distance:10)
+  #
+  # Tip content is plain text (HTML-escaped), with literal `\n` rendered as
+  # <br> — the same surface as the popover's inline form. Tooltips hold brief
+  # text, so there is no markdown body.
+  class TooltipTransformer < BaseTransformer
+    TOOLTIP_ATTRIBUTES = {
+      placement: %w[top bottom left right]
+    }.freeze
+
+    # Inline regex (single-line, no newlines allowed): capture 1 = params+anchor,
+    # capture 2 = tip text.
+    INLINE_REGEX = /\(\(\([ \t]*([^\r\n]*?)[ \t]*>>>[ \t]*([^\r\n]+?)[ \t]*\)\)\)/
+    # Block alternative regex (multiline): capture 1 = params, 2 = anchor, 3 = tip.
+    ALTERNATIVE_REGEX = /^:::wa-tooltip([^\n]*)$\n(.*?)\n^>>>$\n(.*?)\n^:::$/m
+
+    def self.transform(content)
+      # Tracks ID base usage within this transform call so repeated tooltips
+      # (same anchor + tip) get disambiguated suffixes instead of colliding on
+      # the page.
+      seen_ids = Hash.new(0)
+
+      inline_transform = {
+        regex: INLINE_REGEX,
+        block: proc do |_match, matchdata|
+          combined = matchdata[1]
+          tip_text = matchdata[2].strip
+
+          params_string, anchor_text = parse_inline_anchor_and_params(combined)
+          placement, distance = parse_parameters(params_string)
+
+          tooltip_id = generate_tooltip_id(anchor_text, tip_text, seen_ids)
+
+          build_tooltip_html(tooltip_id, anchor_text, tip_text,
+                             { placement: placement, distance: distance })
+        end
+      }
+
+      alternative_transform = {
+        regex: ALTERNATIVE_REGEX,
+        block: proc do |_match, matchdata|
+          params_string = matchdata[1]
+          anchor_text = matchdata[2].strip
+          tip_text = matchdata[3].strip
+
+          placement, distance = parse_parameters(params_string)
+
+          tooltip_id = generate_tooltip_id(anchor_text, tip_text, seen_ids)
+
+          build_tooltip_html(tooltip_id, anchor_text, tip_text,
+                             { placement: placement, distance: distance })
+        end
+      }
+
+      # Inline pattern first to avoid conflicts with the block pattern.
+      apply_multiple_patterns(content, [inline_transform, alternative_transform])
+    end
+
+    def self.render_as_markdown(content, _options = {})
+      inline_transform = {
+        regex: INLINE_REGEX,
+        block: proc do |_match, matchdata|
+          combined = matchdata[1]
+          tip_text = matchdata[2].strip
+          _params, anchor_text = parse_inline_anchor_and_params(combined)
+          "**#{anchor_text}** (#{tip_text})"
+        end
+      }
+
+      alternative_transform = {
+        regex: ALTERNATIVE_REGEX,
+        block: proc do |_match, matchdata|
+          anchor_text = matchdata[2].strip
+          tip_text = matchdata[3].strip
+          "**#{anchor_text}** (#{tip_text})"
+        end
+      }
+
+      apply_multiple_patterns(content, [inline_transform, alternative_transform])
+    end
+
+    class << self
+      private
+
+      def parse_parameters(params_string)
+        return ['top', nil] if params_string.nil? || params_string.strip.empty?
+
+        attributes = AttributeParser.parse(params_string, TOOLTIP_ATTRIBUTES)
+        placement = attributes[:placement] || 'top'
+
+        # Look for distance:N parameter (rightmost-wins)
+        tokens = params_string.strip.split(/\s+/)
+        distance_token = tokens.reverse.find { |token| token.match?(/^distance:\d+$/) }
+        distance = distance_token&.sub('distance:', '')
+
+        [placement, distance]
+      end
+
+      def generate_tooltip_id(anchor_text, tip_text, seen_ids)
+        hash_input = "#{anchor_text}#{tip_text}"
+        hash = Digest::MD5.hexdigest(hash_input)
+        base = "tooltip-#{hash[0..7]}"
+        occurrence = seen_ids[base] += 1
+        occurrence == 1 ? base : "#{base}-#{occurrence}"
+      end
+
+      def parse_inline_anchor_and_params(combined_string)
+        tokens = combined_string.strip.split(/\s+/)
+        param_tokens = []
+        anchor_tokens = []
+        found_anchor = false
+
+        tokens.each do |token|
+          if !found_anchor && tooltip_param?(token)
+            param_tokens << token
+          else
+            found_anchor = true
+            anchor_tokens << token
+          end
+        end
+
+        anchor_text = anchor_tokens.join(' ')
+
+        # If no anchor text remains, treat entire string as the anchor (no params)
+        if anchor_text.empty?
+          ['', combined_string.strip]
+        else
+          [param_tokens.join(' '), anchor_text]
+        end
+      end
+
+      def tooltip_param?(token)
+        TOOLTIP_ATTRIBUTES.any? { |_attr, values| values.include?(token) } ||
+          token.match?(/^distance:\d+$/)
+      end
+
+      def build_tooltip_html(tooltip_id, anchor_text, tip_text, options)
+        anchor_content = escape_html(anchor_text)
+        tip_escaped = escape_html(tip_text).gsub('\n', '<br>')
+
+        tooltip_attrs = ["for=\"#{tooltip_id}\""]
+        tooltip_attrs << "placement=\"#{options[:placement]}\""
+        tooltip_attrs << "distance=\"#{options[:distance]}\"" if options[:distance]
+
+        anchor = build_anchor(tooltip_id, anchor_content)
+
+        "#{anchor}<wa-tooltip #{tooltip_attrs.join(' ')}>#{tip_escaped}</wa-tooltip>"
+      end
+
+      # Focusable span so keyboard/AT users get the tip (tooltips fire on focus
+      # too). The dotted underline + help cursor mirror the link-style popover
+      # trigger; the ma-tooltip-anchor class is a styling hook for consumers.
+      def build_anchor(tooltip_id, anchor_content)
+        style = 'text-decoration: underline dotted; cursor: help;'
+        "<span id=\"#{tooltip_id}\" tabindex=\"0\" class=\"ma-tooltip-anchor\" " \
+          "style=\"#{style}\">#{anchor_content}</span>"
+      end
+
+      def escape_html(text)
+        text.gsub('&', '&amp;')
+            .gsub('<', '&lt;')
+            .gsub('>', '&gt;')
+            .gsub('"', '&quot;')
+            .gsub("'", '&#39;')
+      end
+    end
+  end
+end

data/lib/markawesome/transformers.rb

@@ -20,3 +20,4 @@ require_relative 'transformers/layout_transformer'
 require_relative 'transformers/popover_transformer'
 require_relative 'transformers/tabs_transformer'
 require_relative 'transformers/tag_transformer'
+require_relative 'transformers/tooltip_transformer'

data/lib/markawesome/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markawesome
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Janne Waren
@@ -101,6 +101,7 @@ files:
 - lib/markawesome/transformers/popover_transformer.rb
 - lib/markawesome/transformers/tabs_transformer.rb
 - lib/markawesome/transformers/tag_transformer.rb
+- lib/markawesome/transformers/tooltip_transformer.rb
 - lib/markawesome/version.rb
 - markawesome.gemspec
 homepage: https://github.com/jannewaren/markawesome