Bump middleman from 4.2.0 to 4.3.7

- Also bump autoprefixer from 2.7.1 to 2.10.1
- Remove compass, protect-emails and livereload
- Extract protect emails code into a helper method and JS script

Author: cveneziani

Gemfile

@@ -1,12 +1,9 @@
 source 'https://rubygems.org'
 
-gem 'middleman',                '~> 4.2.0'
-gem 'middleman-autoprefixer',   '~> 2.7.1'
+gem 'middleman',                '~> 4.3.7'
+gem 'middleman-autoprefixer',   '~> 2.10.1'
 gem 'middleman-blog',           '~> 4.0.1'
-gem 'middleman-compass',        '~> 4.0.1'
-gem 'middleman-livereload',     '~> 3.4.6'
 gem 'middleman-minify-html',    '~> 3.4.1'
-gem 'middleman-protect-emails', '~> 0.4.0'
 gem 'middleman-robots',         '~> 1.2.3'
 
 # gem 'middleman-deploy',         '~> 1.0.0' # FIXME: wait for new release
@@ -15,6 +12,6 @@ gem 'middleman-deploy',         git: 'https://github.com/middleman-contrib/middl
 # gem 'middleman-sitemap',        '~> 0.0.13' # FIXME: wait for this PR to be merged https://github.com/statonjr/middleman-sitemap/pull/10
 gem 'middleman-sitemap',        git: 'https://github.com/matsu911/middleman-sitemap', branch: 'master'
 
-gem 'builder',                  '~> 3.2.2' # for feed.xml.builder
+gem 'builder',                  '~> 3.2.2'  # for feed.xml.builder
 gem 'nokogiri',                 '~> 1.10.8' # for feed.xml builder
 gem 'slim',                     '~> 3.0.6'

Gemfile.lock

@@ -19,84 +19,62 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (5.0.2)
+    activesupport (5.2.4.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (~> 0.7)
+      i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
-    addressable (2.5.0)
-      public_suffix (~> 2.0, >= 2.0.2)
-    autoprefixer-rails (6.7.7.1)
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    autoprefixer-rails (9.8.5)
       execjs
-    backports (3.6.8)
+    backports (3.18.1)
     builder (3.2.3)
-    chunky_png (1.3.8)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    concurrent-ruby (1.0.5)
+    concurrent-ruby (1.1.6)
     contracts (0.13.0)
-    dotenv (2.2.0)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+    dotenv (2.7.6)
     erubis (2.7.0)
-    eventmachine (1.2.3)
     execjs (2.7.0)
     fast_blank (1.0.0)
-    fastimage (2.1.0)
-    ffi (1.9.25)
+    fastimage (2.1.7)
+    ffi (1.13.1)
     haml (4.0.7)
       tilt
     hamster (3.0.0)
       concurrent-ruby (~> 1.0)
-    hashie (3.5.5)
+    hashie (3.6.0)
     htmlcompressor (0.2.0)
-    http_parser.rb (0.6.0)
-    i18n (0.7.0)
-    kramdown (1.13.2)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    kramdown (1.17.0)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    memoist (0.15.0)
-    middleman (4.2.1)
+    memoist (0.16.2)
+    middleman (4.3.7)
       coffee-script (~> 2.2)
-      compass-import-once (= 1.0.5)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-cli (= 4.2.1)
-      middleman-core (= 4.2.1)
-      sass (>= 3.4.0, < 4.0)
-    middleman-autoprefixer (2.7.1)
-      autoprefixer-rails (>= 6.5.2, < 7.0.0)
+      middleman-cli (= 4.3.7)
+      middleman-core (= 4.3.7)
+    middleman-autoprefixer (2.10.1)
+      autoprefixer-rails (~> 9.1)
       middleman-core (>= 3.3.3)
     middleman-blog (4.0.1)
       addressable (~> 2.3)
       middleman-core (>= 4.0.0)
       tzinfo (>= 0.3.0)
-    middleman-cli (4.2.1)
+    middleman-cli (4.3.7)
       thor (>= 0.17.0, < 2.0)
-    middleman-compass (4.0.1)
-      compass (>= 1.0.0, < 2.0.0)
-      middleman-core (>= 4.0.0)
-    middleman-core (4.2.1)
-      activesupport (>= 4.2, < 5.1)
+    middleman-core (4.3.7)
+      activesupport (>= 4.2, < 6.0)
       addressable (~> 2.3)
       backports (~> 3.6)
-      bundler (~> 1.1)
+      bundler
       contracts (~> 0.13.0)
       dotenv
       erubis
@@ -105,81 +83,70 @@ GEM
       fastimage (~> 2.0)
       hamster (~> 3.0)
       hashie (~> 3.4)
-      i18n (~> 0.7.0)
+      i18n (~> 0.9.0)
       listen (~> 3.0.0)
       memoist (~> 0.14)
       padrino-helpers (~> 0.13.0)
       parallel
       rack (>= 1.4.5, < 3)
-      sass (>= 3.4)
+      sassc (~> 2.0)
       servolux
-      tilt (~> 2.0)
+      tilt (~> 2.0.9)
       uglifier (~> 3.0)
-    middleman-livereload (3.4.6)
-      em-websocket (~> 0.5.1)
-      middleman-core (>= 3.3)
-      rack-livereload (~> 0.3.15)
     middleman-minify-html (3.4.1)
       htmlcompressor (~> 0.2.0)
       middleman-core (>= 3.2)
-    middleman-protect-emails (0.4.0)
-      middleman-core (>= 3.4)
     middleman-robots (1.2.3)
       middleman (>= 4.0)
     mini_portile2 (2.4.0)
-    minitest (5.10.1)
-    multi_json (1.12.1)
+    minitest (5.14.1)
     net-sftp (2.1.2)
       net-ssh (>= 2.6.5)
     net-ssh (4.1.0)
     nokogiri (1.10.8)
       mini_portile2 (~> 2.4.0)
-    padrino-helpers (0.13.3.3)
+    padrino-helpers (0.13.3.4)
       i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.13.3.3)
+      padrino-support (= 0.13.3.4)
       tilt (>= 1.4.1, < 3)
-    padrino-support (0.13.3.3)
+    padrino-support (0.13.3.4)
       activesupport (>= 3.1)
-    parallel (1.11.1)
+    parallel (1.19.2)
     ptools (1.3.3)
-    public_suffix (2.0.5)
+    public_suffix (4.0.5)
     rack (2.2.3)
-    rack-livereload (0.3.16)
-      rack
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.8)
-      ffi (>= 0.5.0)
-    sass (3.4.23)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    sassc (2.4.0)
+      ffi (~> 1.9)
     servolux (0.13.0)
     slim (3.0.7)
       temple (~> 0.7.6)
       tilt (>= 1.3.3, < 2.1)
     temple (0.7.7)
-    thor (0.19.4)
+    thor (1.0.1)
     thread_safe (0.3.6)
-    tilt (2.0.7)
-    tzinfo (1.2.3)
+    tilt (2.0.10)
+    tzinfo (1.2.7)
       thread_safe (~> 0.1)
-    uglifier (3.1.10)
+    uglifier (3.2.0)
       execjs (>= 0.3.0, < 3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   builder (~> 3.2.2)
-  middleman (~> 4.2.0)
-  middleman-autoprefixer (~> 2.7.1)
+  middleman (~> 4.3.7)
+  middleman-autoprefixer (~> 2.10.1)
   middleman-blog (~> 4.0.1)
-  middleman-compass (~> 4.0.1)
   middleman-deploy!
-  middleman-livereload (~> 3.4.6)
   middleman-minify-html (~> 3.4.1)
-  middleman-protect-emails (~> 0.4.0)
   middleman-robots (~> 1.2.3)
   middleman-sitemap!
   nokogiri (~> 1.10.8)
   slim (~> 3.0.6)
 
 BUNDLED WITH
-   1.17.1
+   1.17.3

config.rb

@@ -1,4 +1,4 @@
-::Sass.load_paths << File.join(root, 'node_modules')
+::SassC.load_paths << File.join(root, 'node_modules')
 
 Time.zone = 'Paris'
 
@@ -8,7 +8,6 @@
 set :js_dir,      'assets/javascripts'
 
 activate :autoprefixer
-activate :protect_emails
 
 activate :external_pipeline,
   name: :webpack,

helpers/email_helper.rb

@@ -0,0 +1,7 @@
+module EmailHelper
+  def protect_email(email)
+    rotated_email = email.tr('A-Za-z', 'N-ZA-Mn-za-m')
+
+    "#email-protection-#{rotated_email}"
+  end
+end

source/assets/javascripts/all.js

@@ -8,3 +8,6 @@ import 'foundation-sites';
 // Components
 import './components/foundation';
 import './components/smooth_scroll';
+
+// Email protection
+!function(){try{var a,b,c,d,g=document.getElementsByTagName("a"); for(c=0;g.length-c;c++)try{b=g[c].getAttribute("href"),b&&b.indexOf("#email-protection-")>-1&&b.length>19&&(a="",d=19+b.indexOf("#email-protection-"),b.length>d&&(a=b.substr(18).replace(/[a-zA-Z]/g,function(a){return String.fromCharCode(("Z">=a?90:122)>=(a=a.charCodeAt(0)+13)?a:a-26)})),(g[c].getAttribute("href") == g[c].innerHTML ? g[c].innerHTML = a : g[c].innerHTML = g[c].innerHTML),g[c].setAttribute("href","mailto:"+a))}catch(h){}}catch(h){}}();

source/assets/stylesheets/all.css.scss

@@ -8,8 +8,6 @@
 // ... nothing ...
 
 // Vendors
-@import 'compass';
-
 @import "vendors-settings/foundation";
 @import "foundation-sites/scss/foundation";
 @include foundation-everything(true);

source/assets/stylesheets/base/_animations.scss

@@ -1,11 +1,18 @@
-@include keyframes(bounce) {
-  0%, 20%, 50%, 80%, 100% {
-    @include transform(translateY(0));
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+   -webkit-transform:translateY(0);
+   transform:translateY(0)
   }
   40% {
-    @include transform(translateY(rem-calc(-10)));
+   -webkit-transform:translateY(-0.625rem);
+   transform:translateY(-0.625rem)
   }
   60% {
-    @include transform(translateY(rem-calc(-5)));
+   -webkit-transform:translateY(-0.3125rem);
+   transform:translateY(-0.3125rem)
   }
-}
+ }

source/assets/stylesheets/pages/_error.scss

@@ -10,15 +10,15 @@
   width:    100%;
   z-index:  1;
 
-  @include background-image(
+  background-image:
     linear-gradient(
       to bottom,
       rgba($primary-color, 0.5) 0%,
       rgba($primary-color, 0.8) 40%,
       rgba($primary-color, 0.8) 70%,
       rgba($primary-color, 0.5) 100%
     )
-  );
+  ;
 }
 
 .p-error-content {

source/assets/stylesheets/pages/_style_guide.scss

@@ -12,7 +12,7 @@
   margin-bottom: rem-calc(20);
 
   .bouncing {
-    @include animation(bounce 3s infinite);
+    animation: bounce 3s infinite;
     display: block;
   }
 }

source/assets/stylesheets/pages/home/_hero.scss

@@ -63,8 +63,7 @@
   margin-bottom: rem-calc(10);
 
   i {
-    @include animation(bounce 3s infinite);
-
+    animation: bounce 3s infinite;
     display: block;
     font-size: rem-calc(40);
     margin-left: rem-calc(-15);

source/home/_current_ride.html.slim

@@ -10,4 +10,4 @@
           = data.rides.current.period
         p class="maul"
           | 🙌 🙌 🙌
-      = mail_to data.site.mail, "Let's meet!", class: "button ghost"
+      = link_to "Let's meet!", protect_email(data.site.mail), class: "button ghost"

source/layouts/shared/_footer.html.slim

@@ -12,5 +12,5 @@ div class="l-footer"
         li class="l-footer--link" = link_to "About", "/about.html"
         li class="l-footer--link" = link_to "Riders", "/riders"
         li class="l-footer--link" = link_to "Blog", "/blog"
-        li class="l-footer--link" = mail_to data.site.mail, "Contact"
+        li class="l-footer--link" = link_to "Contact", protect_email(data.site.mail)
         li class="l-footer--link" = link_to "@#{data.site.twitter}", "https://twitter.com/#{data.site.twitter}/"

source/layouts/shared/_join_us.html.slim

@@ -3,4 +3,4 @@ div class="l-join-us"
     div class="small-12 medium-12 columns l-join-us-container"
       p class="l-join-us-title" But what about YOU?!
       p class="l-join-us-subtitle" We'd love to meet you and go for a ride.
-      = mail_to data.site.mail, 'Join us', class: "button ghost l-join-us-link"
+      = link_to 'Join us', protect_email(data.site.mail), class: "button ghost l-join-us-link"