jekyll-animate-elements 0.0.1 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32f63e6d4ba9c64dc070f0128a583fb474bd5c19331a5155d51fe1b481553e23
-  data.tar.gz: 79eb6e8534f79536ece9b3b8e5b202f3dad7b5aba599a9d0ee6d53dda4a20a02
+  metadata.gz: d0ea6ea98445c9c4cd06d36fa48ad8d2ddb6318700c89e2e3491f18333dc29d5
+  data.tar.gz: bfe5a32ebe7b9f95ea6cccb86899699737ca82b04f25b0ce1d4c2cf0bff2c49d
 SHA512:
-  metadata.gz: 78cb0e97d00617877348d9609178889601b25d77de441c8947bacbd8346fa4a1fcf32adb308df4626884263706425945eedd7ef6d4a5d283244b353971ecf621
-  data.tar.gz: d15ba2787c6af8105495038177d39ae4be12eca485ba4bf68277f3b3768c203babf9d6db5767407754a2d46d661c0dbd7383ff21247edc1fe250f9b372b062b7
+  metadata.gz: 3d917790a190248a6c03c1d594471eb99d825bd61f666ac4a3a2522618a940bc50a053ba4843029bc78fb43400a4f3e5e6da73bd52cd8d01f39c6bc47d6e69e5
+  data.tar.gz: 36d03d4e21891c13375382d5e9d1b43d5243339b1480586a04629c9c3e5c0e2f9da7529f318f2e42e2fcb196924e45527e62f4c3bb5a21883419a737ae960a90

data/lib/jekyll-animate-elements/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module Animate
+    VERSION = "0.0.3"
+  end
+end

data/lib/jekyll-animate-elements.rb

@@ -0,0 +1,66 @@
+# based on the excellent post by Anthony Fu: https://antfu.me/posts/sliding-enter-animation
+# frozen_string_literal: true
+
+require 'jekyll'
+require "nokogiri"
+
+Jekyll::Hooks.register([:pages, :documents], :post_render) do |page|
+    if page.site.config.key?("animation") and page.site.config["animation"].key?("enabled") and page.site.config["animation"]["enabled"]
+        config = page.site.config["animation"]
+        verbose = config["verbose"] || false
+
+        if page.path.end_with?(".html", ".md")
+            # add animation to html elements as style attribute
+            noko = Nokogiri::HTML(page.output)
+
+            # set default values
+            limit = config["max_elements"] || 20
+            selector = config["selector"] ||
+                "audio, blockquote, div.card, div.highlighter-rouge, div.news, div.repositories, div.row, div.social, div.tag-category-list, figure, h2, h3, ol, p, tr, ul, video"
+
+            noko.search(selector).each_with_index do |tag, index|
+                tag[:style] = (tag[:style] || "") + "--stagger: #{index+1};"
+                tag["data-animate"] = ""
+                if index == limit then
+                    break
+                end
+            end
+
+            page.output = noko.to_html
+            if verbose
+                Jekyll.logger.info "Added animation to page #{page.path}"
+            end
+
+        elsif page.path.end_with?(".scss")
+            # add animation config to css file
+            # set default values
+            delay = config["delay"] || "100ms"
+            duration = config["duration"] || "0.6s"
+            name = config["name"] || "enter"
+
+            from = config["from"] || "opacity:0;transform:translateY(10px)"
+            # transform value to string, if it is a hash
+            if from.is_a?(Hash)
+                from = from.map { |k, v| "#{k}:#{v}" }.join(";")
+            end
+
+            to = config["to"] || "opacity:1;transform:none"
+            # transform value to string, if it is a hash
+            if to.is_a?(Hash)
+                to = to.map { |k, v| "#{k}:#{v}" }.join(";")
+            end
+
+            css = page.output
+            css += "@keyframes #{name}{from{#{from}}to{#{to}}}[data-animate]{--stagger:0;--delay:#{delay};--start:0.1ms}
+@media(prefers-reduced-motion:no-preference){[data-animate]{animation:#{name} #{duration} both;animation-delay: calc(var(--stagger) * var(--delay) + var(--start))}}"
+            page.output = css
+
+            if verbose
+                Jekyll.logger.info "Added animation to css file #{page.path}"
+            end
+
+        elsif verbose
+            Jekyll.logger.info "Skipped adding animation to file #{page.path}"
+        end
+    end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-animate-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.3
 platform: ruby
 authors:
 - George Corrêa de Araújo
@@ -64,7 +64,9 @@ email:
 executables: []
 extensions: []
 extra_rdoc_files: []
-files: []
+files:
+- lib/jekyll-animate-elements.rb
+- lib/jekyll-animate-elements/version.rb
 homepage: https://github.com/george-gca/jekyll-animate-elements
 licenses:
 - MIT