jekyll-color-copy-tag 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d8aaa3496ae7cf44d0642325182fe3261784a91533947295a267b71ceae81cce
+  data.tar.gz: e3f42023f7175ece0c86e6c383a225414d0cf21ada9bf9e195c67c4f170706ac
+SHA512:
+  metadata.gz: 4f2293a821bf7a4f0f1f36f55ffea009111835efd2ae89e1e77417ada412115b10ac062fcb2208217a473ff48e9d76a85fec7df2803c0f6955668837ad7ddeda
+  data.tar.gz: 1b747d74ef5aaec88d4050ec5e3c225248d1fa86af1ad51bb90446522d29b400bcdce1b424f350f38dc997505ef496940c1c9d5ae6ca6ca218c52dcd12ec4b0f

data/CHANGELOG.md

@@ -0,0 +1,22 @@
+# 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).
+
+## [1.0.0] - 2026-08-29
+
+### Added
+
+- Initial release of jekyll-color-copy-tag
+- `{% color_copy '#HEX' %}` Liquid tag for rendering clickable copy buttons
+- Button sizing: small, medium (default), large
+- Paint swatches with `swatch` modifier and custom dimensions via `swatch_WxH` syntax
+- WCAG contrast ratio calculation for automatic black/white text selection
+- Copy-to-clipboard feedback: background color change and icon swap
+- Configurable copied-to-clipboard feedback color via `_config.yml`
+- Configurable default swatch dimensions in `_config.yml`
+- Embedded Bootstrap Icons (copy icon, check-lg icon)
+- No external dependencies (FontAwesome, etc.)
+- Full accessibility support with title attributes

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jason Chance
+
+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,108 @@
+# jekyll-color-copy-tag
+
+A Jekyll Liquid tag that renders clickable hex color copy buttons and paint swatches with copy-to-clipboard functionality. Uses WCAG contrast ratio math to automatically choose black or white text for optimal accessible contrast.
+
+- **No dependencies** — includes its own SVG icons
+- **WCAG accessible** — automatic contrast calculation
+- **Flexible sizing** — three button sizes, configurable swatch dimensions, custom per-tag overrides
+- **Copy feedback** — visual confirmation with background color change and icon swap
+- **Paint swatches** — render clickable color chips with hex label positioned in corner
+
+## Installation
+
+Add the gem to your `Gemfile`:
+
+```ruby
+gem "jekyll-color-copy-tag"
+```
+
+Enable it in `_config.yml`:
+
+```yaml
+plugins:
+  - jekyll-color-copy-tag
+```
+
+Add the JavaScript include near the end of your layout, just before `</body>`:
+
+```liquid
+{% include color_copy.js %}
+```
+
+## Usage
+
+### Copy Buttons
+
+Render clickable buttons in three sizes:
+
+```liquid
+{% color_copy '#2BB3B1' %}        {# medium (default) #}
+{% color_copy '#2BB3B1', sm %}    {# small #}
+{% color_copy '#2BB3B1', lg %}    {# large #}
+```
+
+Text color is automatically chosen (black or white) based on WCAG contrast ratio math against the button background.
+
+### Paint Swatches
+
+Render clickable color swatches with hex value displayed in the corner:
+
+```liquid
+{% color_copy '#2BB3B1', swatch %}              {# uses config dimensions (default 100×100) #}
+{% color_copy '#2BB3B1', swatch_150x150 %}     {# override to 150×150 #}
+{% color_copy '#2BB3B1', swatch_200x100 %}     {# custom width×height #}
+```
+
+The hex label has semi-transparent background and adapts text color for readability on any swatch color.
+
+## Configuration
+
+Customize the copied-to-clipboard feedback color and default swatch dimensions in `_config.yml`:
+
+```yaml
+color_copy:
+  copied_color: "#2BB3B1"
+  swatch_width: 100
+  swatch_height: 100
+```
+
+- `copied_color` — Background color shown when button/swatch is clicked (defaults to `#2BB3B1`)
+- `swatch_width` — Default paint swatch width in pixels (defaults to `100px`)
+- `swatch_height` — Default paint swatch height in pixels (defaults to `100px`)
+
+Override per-tag with `swatch_WxH` syntax: `{% color_copy '#hex', swatch_200x150 %}`
+
+## How It Works
+
+### WCAG Contrast Ratio
+
+The plugin calculates relative luminance using the sRGB-to-linear conversion algorithm, then computes contrast ratios against both black (#000) and white (#fff). It selects whichever provides higher contrast, ensuring text is always readable per WCAG standards.
+
+### Copy to Clipboard
+
+Clicking a button or swatch triggers JavaScript that:
+1. Copies the hex value to clipboard
+2. Temporarily changes background to the configured `copied_color`
+3. Shows a checkmark icon (buttons show "✓ Copied", swatches show just the checkmark)
+4. Restores original background and content after 1.2 seconds
+
+### Icons
+
+Both icons are embedded as inline SVG from Bootstrap Icons:
+- Copy icon (16×16 viewBox)
+- Check icon (check-lg variant)
+
+## Accessibility
+
+- Text color automatically selected for WCAG AAA contrast on all backgrounds
+- Semantic HTML with title attributes
+- No reliance on external icon libraries
+- Works without JavaScript (buttons render but copy won't function)
+
+## License
+
+MIT License
+
+## Credits
+
+Icons from [Bootstrap Icons](https://icons.getbootstrap.com/) (MIT License)

data/_includes/color_copy.js

@@ -0,0 +1,29 @@
+<script>
+function copyToClipboard(text, element) {
+  if (!navigator.clipboard) return;
+
+  navigator.clipboard.writeText(text).then(function () {
+    if (!element) return;
+    
+    const originalInnerHTML = element.innerHTML;
+    const originalBackground = window.getComputedStyle(element).backgroundColor;
+    const copiedColor = element.dataset.copiedColor || "#2BB3B1";
+    
+    // Checkmark icon (check-lg from Bootstrap Icons)
+    const checkmarkIcon = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="1em" height="1em" style="margin-right: 0.35em; vertical-align: -0.125em; fill: currentColor;"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/></svg>';
+     
+    // Detect if this is a swatch (has class color-copy-swatch) or button
+    const isSwatch = element.classList.contains('color-copy-swatch');
+    const copiedContent = isSwatch ? checkmarkIcon : checkmarkIcon + ' Copied';
+     
+    // Replace with checkmark (swatch) or checkmark + text (button)
+    element.innerHTML = copiedContent;
+    element.style.background = copiedColor;
+    
+    setTimeout(function () {
+      element.innerHTML = originalInnerHTML;
+      element.style.background = originalBackground;
+    }, 1200);
+  });
+}
+</script>

data/lib/color_copy_tag.rb

@@ -0,0 +1,7 @@
+require_relative "jekyll/color_copy_tag/version"
+require_relative "jekyll/color_copy_tag"
+
+module Jekyll
+  module ColorCopyTag
+  end
+end

data/lib/jekyll/color_copy_tag/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+  module ColorCopyTag
+    VERSION = "1.0.0"
+  end
+end

data/lib/jekyll/color_copy_tag.rb

@@ -0,0 +1,169 @@
+require "liquid"
+
+# Liquid tag that renders a clickable copy-to-clipboard button or swatch for a hex color.
+#
+# Usage:
+#   {% color_copy '#RRGGBB' %}                — medium button (default)
+#   {% color_copy '#RRGGBB', sm %}            — small button (inline / notification lists)
+#   {% color_copy '#RRGGBB', lg %}            — large button (palette grid)
+#   {% color_copy '#RRGGBB', swatch %}        — 100x100 paint swatch (configurable)
+#
+# The tag uses WCAG contrast ratio math to choose black or white text for the
+# highest-contrast accessible label, with a subtle border on light swatches.
+
+module Jekyll
+  class ColorCopyTag < Liquid::Tag
+    def initialize(tag_name, markup, tokens)
+      super
+      parts = markup.strip.split(/\s*,\s*/)
+      @hex  = parts[0].gsub(/['"]/, '').strip
+      @type = 'button'
+      @size = 'md'
+      @swatch_width = nil
+      @swatch_height = nil
+      parts[1..].to_a.each do |part|
+        part = part.strip
+        case part
+        when 'sm', 'md', 'lg'
+          @size = part
+        when 'swatch'
+          @type = 'swatch'
+        when /^swatch_(\d+)x(\d+)$/
+          @type = 'swatch'
+          @swatch_width = $1.to_i
+          @swatch_height = $2.to_i
+        end
+      end
+    end
+
+    def render(context)
+      hex = @hex
+      config = context&.registers&.[](:site)&.config&.[]('color_copy') || {}
+      copied_color = config['copied_color'] || '#2BB3B1'
+      swatch_width = @swatch_width || config['swatch_width'] || 100
+      swatch_height = @swatch_height || config['swatch_height'] || 100
+
+      if @type == 'swatch'
+        render_swatch(hex, copied_color, swatch_width, swatch_height)
+      else
+        render_button(hex, copied_color)
+      end
+    end
+
+    private
+
+    def render_button(hex, copied_color)
+      luminance = relative_luminance(hex)
+      contrast_with_white = contrast_ratio(luminance, 1.0)
+      contrast_with_black = contrast_ratio(luminance, 0.0)
+
+      if contrast_with_black >= contrast_with_white
+        text_color  = '#000'
+        border_style = "border: 1px solid #{darken(hex)};"
+      else
+        text_color  = 'white'
+        border_style = 'border: none;'
+      end
+
+      case @size
+      when 'sm'
+        padding   = '0.2rem 0.45rem'
+        font_size = '0.75rem'
+        icon_spacing = '0.3em'
+      when 'lg'
+        padding   = '0.8rem 1.45rem'
+        font_size = '1rem'
+        icon_spacing = '0.5em'
+      else
+        padding   = '0.5rem 1rem'
+        font_size = '0.875rem'
+        icon_spacing = '0.35em'
+      end
+
+      style = [
+        "padding: #{padding}",
+        "background: #{hex}",
+        "color: #{text_color}",
+        border_style.chomp(';'),
+        'border-radius: 4px',
+        'cursor: pointer',
+        "font-size: #{font_size}",
+        'font-weight: 500'
+      ].join('; ')
+
+      copy_icon = %(<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="1em" height="1em" style="margin-right: 0.35em; vertical-align: -0.125em; fill: currentColor;"><path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/></svg>)
+
+      %(<button class="color-copy-btn color-copy-btn--#{@size}" data-color-copy-button data-color="#{hex}" data-copied-color="#{copied_color}" data-copy-icon="#{ERB::Util.html_escape(copy_icon)}" data-copied-icon="#{ERB::Util.html_escape(copy_icon)}" onclick="copyToClipboard('#{hex}', this)" style="#{style};">#{copy_icon.sub('margin-right: 0.35em', "margin-right: #{icon_spacing}")} #{hex}</button>)
+    end
+
+    def render_swatch(hex, copied_color, width, height)
+      luminance = relative_luminance(hex)
+      contrast_with_white = contrast_ratio(luminance, 1.0)
+      contrast_with_black = contrast_ratio(luminance, 0.0)
+
+      text_color = contrast_with_black >= contrast_with_white ? '#000' : 'white'
+      border_style = contrast_with_black >= contrast_with_white ? "1px solid #{darken(hex)}" : 'none'
+
+      swatch_style = [
+        "width: #{width}px",
+        "height: #{height}px",
+        "background: #{hex}",
+        "border: #{border_style}",
+        'border-radius: 4px',
+        'cursor: pointer',
+        'position: relative',
+        'display: inline-flex',
+        'align-items: flex-end',
+        'justify-content: flex-end',
+        'line-height: 1',
+        'vertical-align: top'
+      ].join('; ')
+
+      hex_style = [
+        "color: #{text_color}",
+        'font-size: 0.65rem',
+        'font-weight: 600',
+        'padding: 4px 6px',
+        'background: rgba(0, 0, 0, 0.1)',
+        'border-radius: 2px',
+        'line-height: 1'
+      ].join('; ')
+
+      %(<div class="color-copy-swatch" data-color="#{hex}" data-copied-color="#{copied_color}" onclick="copyToClipboard('#{hex}', this)" style="#{swatch_style};" title="Click to copy #{hex}"><span style="#{hex_style}">#{hex}</span></div>)
+    end
+
+    def relative_luminance(hex)
+      r, g, b = hex_to_rgb(hex).map { |channel| srgb_to_linear(channel) }
+      0.2126 * r + 0.7152 * g + 0.0722 * b
+    end
+
+    def contrast_ratio(luminance, other_luminance)
+      lighter = [luminance, other_luminance].max
+      darker = [luminance, other_luminance].min
+      (lighter + 0.05) / (darker + 0.05)
+    end
+
+    def hex_to_rgb(hex)
+      [hex[1, 2], hex[3, 2], hex[5, 2]].map { |channel| channel.to_i(16) / 255.0 }
+    end
+
+    def srgb_to_linear(channel)
+      if channel <= 0.04045
+        channel / 12.92
+      else
+        ((channel + 0.055) / 1.055) ** 2.4
+      end
+    end
+
+    # Produce a slightly darker hex border from the swatch color
+    def darken(hex)
+      r, g, b = hex_to_rgb(hex).map { |channel| (channel * 255).to_i }
+      dr = [(r - 40), 0].max
+      dg = [(g - 40), 0].max
+      db = [(b - 40), 0].max
+      format('#%02X%02X%02X', dr, dg, db)
+    end
+  end
+end
+
+Liquid::Template.register_tag('color_copy', Jekyll::ColorCopyTag)

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-color-copy-tag
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Jason Chance
+bindir: bin
+cert_chain: []
+date: 2026-08-29 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
+- !ruby/object:Gem::Dependency
+  name: liquid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: Renders clickable buttons and swatches to copy hex colors to clipboard.
+  Automatically selects black or white text using WCAG contrast math. Includes custom
+  SVG icons, no dependencies.
+email:
+- jason@jasonchance.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- _includes/color_copy.js
+- lib/color_copy_tag.rb
+- lib/jekyll/color_copy_tag.rb
+- lib/jekyll/color_copy_tag/version.rb
+homepage: https://jasonchance.com/projects/jekyll-color-copy-tag/
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://jasonchance.com/projects/jekyll-color-copy-tag/
+  source_code_uri: https://github.com/jchance/jekyll-color-copy-tag
+  changelog_uri: https://github.com/jchance/jekyll-color-copy-tag/blob/master/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.2
+specification_version: 4
+summary: A Jekyll Liquid tag for clickable hex color copy buttons and paint swatches
+test_files: []