slippery 0.4.0 → 0.4.2

data/assets/shower/themes/ribbon/styles/slide/elements/place.css

@@ -0,0 +1,63 @@
+/* Place */
+
+.place {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.place.t.l,
+.place.top.left,
+.place.t.r,
+.place.top.right,
+.place.b.r,
+.place.bottom.right,
+.place.b.l,
+.place.bottom.left {
+    transform: none;
+}
+
+.place.t,
+.place.top,
+.place.b,
+.place.bottom {
+    transform: translate(-50%, 0);
+}
+
+.place.l,
+.place.left,
+.place.r,
+.place.right {
+    transform: translate(0, -50%);
+}
+
+.place.t,
+.place.top,
+.place.t.l,
+.place.top.left,
+.place.t.r,
+.place.top.right {
+    top: 0;
+}
+
+.place.r,
+.place.right {
+    right: 0;
+    left: auto;
+}
+
+.place.b,
+.place.bottom,
+.place.b.r,
+.place.bottom.right,
+.place.b.l,
+.place.bottom.left {
+    top: auto;
+    bottom: 0;
+}
+
+.place.l,
+.place.left {
+    left: 0;
+}

data/assets/shower/themes/ribbon/styles/slide/elements/shout.css

@@ -0,0 +1,54 @@
+/* Shout */
+
+.slide .shout {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    line-height: 1;
+    font-size: 150px;
+    transform: translateY(-50%);
+}
+
+/* Link */
+
+.slide .shout a {
+    background-image:
+        linear-gradient(
+            to top,
+            rgba(75, 134, 194, 0.4) 0.06em,
+            transparent 0.06em
+        );
+    background-position: bottom 0.13em left 0;
+    background-repeat: repeat-x;
+}
+
+/* Full */
+
+.shower.full .slide .shout.grow {
+    opacity: 0;
+    transform: scale(0.1) translateY(-50%);
+}
+
+.shower.full .slide .shout.shrink {
+    opacity: 0;
+    transform: scale(10) translateY(-50%);
+}
+
+/* Active */
+
+@keyframes shout {
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(-50%);
+    }
+}
+
+.shower.full .slide.active .shout.grow,
+.shower.full .slide.active .shout.shrink {
+    animation-name: shout;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}

data/assets/shower/themes/ribbon/styles/slide/modifiers/black.css

@@ -0,0 +1,5 @@
+/* Black */
+
+.slide.black {
+    background-color: black;
+}

data/assets/shower/themes/ribbon/styles/slide/modifiers/clear.css

@@ -0,0 +1,11 @@
+/* Progress Off */
+
+.slide.clear.active ~ .progress {
+    display: none;
+}
+
+/* Number Off */
+
+.slide.clear::after {
+    visibility: hidden;
+}

data/assets/shower/themes/ribbon/styles/slide/modifiers/white.css

@@ -0,0 +1,5 @@
+/* White */
+
+.slide.white {
+    background-color: white;
+}

data/assets/shower/themes/ribbon/styles/slide/ribbon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><path fill="#c00" d="M0 0h50v100L25 80 0 100"/></svg>

data/assets/shower/themes/ribbon/styles/slide/slide-full.css

@@ -0,0 +1,16 @@
+/* Slide Full */
+
+.shower.full .slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    clip: rect(0 0 0 0);
+    visibility: hidden;
+}
+
+/* Active */
+
+.shower.full .slide.active {
+    clip: auto;
+    visibility: visible;
+}

data/assets/shower/themes/ribbon/styles/slide/slide-list.css

@@ -0,0 +1,68 @@
+/* Slide List */
+
+.shower.list .slide {
+    border-radius: 2px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+    transform-origin: 0 0;
+}
+
+.shower.list .slide * {
+    pointer-events: none;
+}
+
+/* Scaling */
+
+.shower.list .slide {
+    --slide-scale: 0.25;
+    --slide-magic: calc(1 - var(--slide-scale));
+
+    margin-top: 0;
+    margin-right:
+        calc(
+            var(--slide-width) *
+            var(--slide-magic) * -1
+        );
+    margin-bottom:
+        calc(
+            var(--slide-gap) *
+            var(--slide-scale) -
+            var(--slide-height) *
+            var(--slide-magic)
+        );
+    margin-left:
+        calc(
+            var(--slide-gap) *
+            var(--slide-scale)
+        );
+
+    transform: scale(var(--slide-scale));
+}
+
+@media (min-width: 1174px) {
+    .shower.list .slide {
+        --slide-scale: 0.5;
+    }
+}
+
+@media (min-width: 2348px) {
+    .shower.list .slide {
+        --slide-scale: 1;
+    }
+}
+
+/* Hover */
+
+.shower.list .slide:hover {
+    box-shadow:
+        0 0 0 20px rgba(0, 0, 0, 0.1),
+        0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+/* Active */
+
+.shower.list .slide.active {
+    box-shadow:
+        0 0 0 1px #376da3,
+        0 0 0 20px #4b86c2,
+        0 20px 50px rgba(0, 0, 0, 0.3);
+}

data/assets/shower/themes/ribbon/styles/slide/slide.css

@@ -0,0 +1,60 @@
+/* Types */
+
+@import 'slide-list.css' screen;
+@import 'slide-full.css' screen;
+
+/* Content */
+
+@import 'content/basic.css';
+@import 'content/code.css';
+@import 'content/footer.css';
+@import 'content/inline.css';
+@import 'content/lists.css';
+@import 'content/quote.css';
+@import 'content/table.css';
+
+/* Elements */
+
+@import 'elements/columns.css';
+@import 'elements/copyright.css';
+@import 'elements/cover.css';
+@import 'elements/next.css';
+@import 'elements/place.css';
+@import 'elements/shout.css';
+
+/* Modifiers */
+
+@import 'modifiers/clear.css';
+@import 'modifiers/white.css';
+@import 'modifiers/black.css';
+
+/* Slide */
+
+.slide {
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 81px 100px 0;
+    width: var(--slide-width);
+    height: var(--slide-height);
+    background: #ffffff;
+}
+
+/* Number */
+
+.slide::after {
+    position: absolute;
+    top: 0;
+    left: 875px;
+    box-sizing: border-box;
+    padding-top: 15px;
+    width: var(--ribbon-size);
+    height: calc(var(--ribbon-size) * 2);
+    background-image: url('ribbon.svg');
+    background-size: cover;
+    color: #ffffff;
+    counter-increment: slide;
+    content: counter(slide);
+    text-align: center;
+}

data/assets/shower/themes/ribbon/styles/styles.css

@@ -0,0 +1,9 @@
+/* Styles */
+
+@import 'fonts.css';
+@import 'shower/shower.css';
+@import 'blocks/badge.css';
+@import 'blocks/caption.css';
+@import 'blocks/progress.css';
+@import 'blocks/region.css';
+@import 'slide/slide.css';

data/lib/slippery/presentation.rb

@@ -32,6 +32,10 @@ module Slippery
           Processors::HrToSections.new(H[:section, class: 'slide']),
           Processors::JQuery.new(js_options),
           Processors::DeckJs.new(js_options),
+        ],
+        shower: [
+          Processors::HrToSections.new(H[:section, class: 'slide']),
+          Processors::Shower.new(js_options),
         ]
       }[@options[:type]]
     end

data/lib/slippery/processors/add_highlight.rb

@@ -3,20 +3,15 @@ module Slippery
     class AddHighlight
       include ProcessorHelpers
 
-      DEFAULT_STYLE   = :default
-      DEFAULT_VERSION = '8.0'
+      DEFAULT_STYLE = :default
 
-      def initialize(style = DEFAULT_STYLE, version = DEFAULT_VERSION)
+      def initialize(style = DEFAULT_STYLE)
         @style = style
-        @version = version
       end
 
       def call(doc)
-        # css = "http://yandex.st/highlightjs/#{@version}/styles/#{@style}.min.css"
-        # js  = "http://yandex.st/highlightjs/#{@version}/highlight.min.js"
-
         js = asset_uri('highlight.js/highlight.pack.js')
-        css = asset_uri('highlight.js/highlight-0.8.default.min.css')
+        css = asset_uri("highlight.js/styles/#{@style}.css")
 
         doc.rewrite 'head' do |head|
           head <<= H[:link, rel: "stylesheet", href: css]

data/lib/slippery/processors/reveal_js/add_reveal_js.rb

@@ -10,7 +10,7 @@ module Slippery
 
         attr_reader :attributes
 
-        DEFAULT_OPTIONS = {theme: 'default'}.freeze
+        DEFAULT_OPTIONS = {theme: 'black'}.freeze
 
         def initialize(options = {})
           @options = DEFAULT_OPTIONS.merge(options).freeze

data/lib/slippery/processors/shower.rb

@@ -0,0 +1,76 @@
+module Slippery
+  module Processors
+    class Shower
+      include ProcessorHelpers
+
+      def self.call(doc)
+        self.new.call(doc)
+      end
+
+      attr_reader :attributes
+
+      DEFAULT_OPTIONS = {theme: :material,
+                         ratio: '4x3',
+                         color_key: '#4caf50'
+                        }.freeze
+
+      def initialize(options = {})
+        @options = DEFAULT_OPTIONS.merge(options).freeze
+      end
+
+      def theme
+        @options[:theme]
+      end
+
+      def ratio
+        @options[:ratio].sub('x', ' / ')
+      end
+
+      def color_key
+        @options[:color_key]
+      end
+
+      def call(doc)
+        doc.process(
+          add_shower_js,
+          add_shower_css,
+          set_body_classes,
+          meta_tags,
+          progress_bar,
+          header
+        )
+      end
+
+      processor :add_shower_js, 'body' do |body|
+        include_local_javascript(body, 'shower/shower.min.js')
+      end
+
+      processor :add_shower_css, 'head' do |head|
+        include_local_css(head, "shower/themes/#{theme}/styles/styles.css")
+          .add_child(H[:style, ".shower {--slide-ratio: calc(#{ratio}); --color-key: #{color_key};} "])
+      end
+
+      processor :meta_tags, 'head' do |head|
+        head
+          .add_child(H[:meta, {"charset" => "utf-8"}])
+          .add_child(H[:meta, {"http-equiv" => "x-ua-compatible",
+                               "content" => "ie=edge"}])
+          .add_child(H[:meta, {"name" => "viewport",
+                               "content" => "width=device-width, initial-scale=1"}])
+      end
+
+      processor :set_body_classes, 'body' do |body|
+        body.attr('class', 'shower list')
+      end
+
+      processor :progress_bar, 'body' do |body|
+        body.add_child(H[:div, {class: "progress"}])
+      end
+
+      processor :header, 'section:first-child' do |section|
+        section.set_tag(:header).attr('class', 'caption')
+      end
+
+    end
+  end
+end

data/lib/slippery/rake_tasks.rb

@@ -51,6 +51,7 @@ module Slippery
       end
     end
     alias replace processor
+    alias transform processor
 
     def pack_assets
       @options[:include_assets] = true
@@ -80,8 +81,8 @@ module Slippery
       end
     end
 
-    def add_highlighting(style = Slippery::Processors::AddHighlight::DEFAULT_STYLE, version = Slippery::Processors::AddHighlight::DEFAULT_VERSION)
-      processors << Slippery::Processors::AddHighlight.new(style, version)
+    def add_highlighting(style = Slippery::Processors::AddHighlight::DEFAULT_STYLE, version = :unused)
+      processors << Slippery::Processors::AddHighlight.new(style)
     end
 
     def define
@@ -121,7 +122,11 @@ module Slippery
                 tmpfile = Tempfile.new("#{name}.html")
                 tmpfile << before
                 tmpfile.close
-                print `diff -u #{tmpfile.path} #{name}.html | cut -c1-150`
+                if `which pup` =~ /pup/
+                  print `bash -c 'diff -u <(cat #{tmpfile.path} | pup) <(cat #{name}.html | pup) | cut -c1-180'`
+                else
+                  print `diff -u #{tmpfile.path} #{name}.html | cut -c1-180`
+                end
               end
             end
           end

data/lib/slippery/version.rb

@@ -1,3 +1,3 @@
 module Slippery
-  VERSION = '0.4.0'
+  VERSION = '0.4.2'
 end

data/lib/slippery.rb

@@ -33,6 +33,7 @@ require 'slippery/processors/impress_js/auto_offsets'
 require 'slippery/processors/jquery'
 require 'slippery/processors/fathom_js'
 require 'slippery/processors/deck_js'
+require 'slippery/processors/shower'
 
 require 'slippery/processors/reveal_js/add_reveal_js'
 

data/slippery.gemspec

@@ -21,10 +21,10 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency 'kramdown'     , '~> 1.1'
   gem.add_runtime_dependency 'hexp-kramdown', '> 0'
   gem.add_runtime_dependency 'rake'         , '~> 10.1'
-  gem.add_runtime_dependency 'listen'       , '~> 2.7'
+  gem.add_runtime_dependency 'listen'       , '~> 3.0'
   gem.add_runtime_dependency 'concord'      , '~> 0.1.4'
-  gem.add_runtime_dependency 'asset_packer' , '~> 0.2.0'
+  gem.add_runtime_dependency 'asset_packer' , '~> 0.3.2'
 
   gem.add_development_dependency 'rspec'
-  gem.add_development_dependency 'mutant-rspec'
+  # gem.add_development_dependency 'mutant-rspec'
 end