Upgrade all the things

* Upgrade to Middleman 4
* Use Webpack instead of Sprockets to process assets
* Add setup script, .ruby-version and .nvmrc
* Add .rubocop.yml and .eslintrc.js
* Convert CoffeeScript files to ES6 JavaScript
* Remove jQuery in favor of vanilla JS
* Change instances of FactoryGirl to FactoryBot
* Update copyright year

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["@babel/env"],
+  "plugins": [
+    [
+      "prismjs",
+      {
+        "languages": ["ruby"],
+        "theme": "twilight",
+        "css": true
+      }
+    ]
+  ]
+}

.browserslistrc

@@ -0,0 +1,2 @@
+> 0.25%
+not dead

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "node": true,
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true,
+    },
+  },
+  "plugins": [
+    "prettier",
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+  },
+}

.gitignore

@@ -1,10 +1,12 @@
 .bundle
 .gh-pages
-.thoughtbot-gh-pages
 .mcmire-gh-pages
+.thoughtbot-gh-pages
+.tmp
 .yardoc
 coverage
 build
 doc
+node_modules
 pkg
 tmp

.nvmrc

@@ -0,0 +1 @@
+11.10.0

.rubocop.yml

@@ -0,0 +1,188 @@
+AllCops:
+  TargetRubyVersion: 2.4
+Layout/AlignParameters:
+  EnforcedStyle: with_fixed_indentation
+Layout/ConditionPosition:
+  Enabled: false
+Layout/DotPosition:
+  EnforcedStyle: trailing
+Layout/MultilineMethodCallIndentation:
+  EnforcedStyle: indented
+Lint/AmbiguousOperator:
+  Enabled: false
+Lint/AmbiguousRegexpLiteral:
+  Enabled: false
+Lint/AssignmentInCondition:
+  Enabled: false
+Lint/DeprecatedClassMethods:
+  Enabled: false
+Lint/ElseLayout:
+  Enabled: false
+Lint/HandleExceptions:
+  Enabled: false
+Lint/IndentHeredoc:
+  Enabled: false
+Lint/LiteralInInterpolation:
+  Enabled: false
+Lint/Loop:
+  Enabled: false
+Lint/ParenthesesAsGroupedExpression:
+  Enabled: false
+Lint/RequireParentheses:
+  Enabled: false
+Lint/UnderscorePrefixedVariableName:
+  Enabled: false
+Lint/Void:
+  Enabled: false
+Metrics/BlockLength:
+  Enabled: false
+Metrics/ClassLength:
+  Enabled: false
+Metrics/LineLength:
+  IgnoredPatterns:
+    - "^[ ]*describe.+$"
+    - "^[ ]*context.+$"
+    - "^[ ]*shared_context.+$"
+    - "^[ ]*shared_examples_for.+$"
+    - "^[ ]*it.+$"
+    - "^[ ]*'.+?' => '.+?',?$"
+    - "^[ ]*\".+?\" => \".+?\",?$"
+    - "^[ ]*.+?: .+?$"
+Metrics/MethodLength:
+  Max: 30
+Naming/AccessorMethodName:
+  Enabled: false
+Naming/AsciiIdentifiers:
+  Enabled: false
+Naming/BinaryOperatorParameterName:
+  Enabled: false
+Style/ClassVars:
+  Enabled: false
+Style/ColonMethodCall:
+  Enabled: false
+Naming/FileName:
+  Enabled: false
+Rails:
+  Enabled: true
+Rails/Delegate:
+  Enabled: false
+Rails/HttpPositionalArguments:
+  Enabled: false
+Style/Alias:
+  Enabled: false
+Style/ArrayJoin:
+  Enabled: false
+Style/AsciiComments:
+  Enabled: false
+Style/Attr:
+  Enabled: false
+Style/CaseEquality:
+  Enabled: false
+Style/CharacterLiteral:
+  Enabled: false
+Style/ClassAndModuleChildren:
+  Enabled: false
+Style/CollectionMethods:
+  PreferredMethods:
+    find: detect
+    reduce: inject
+    collect: map
+    find_all: select
+Style/CommentAnnotation:
+  Enabled: false
+Style/Documentation:
+  Enabled: false
+Style/DoubleNegation:
+  Enabled: false
+Style/EachWithObject:
+  Enabled: false
+Style/EmptyLiteral:
+  Enabled: false
+Style/Encoding:
+  Enabled: false
+Style/EvenOdd:
+  Enabled: false
+Style/FlipFlop:
+  Enabled: false
+Style/FormatString:
+  Enabled: false
+Style/FrozenStringLiteralComment:
+  Enabled: false
+Style/GlobalVars:
+  Enabled: false
+Style/GuardClause:
+  Enabled: false
+Style/IfUnlessModifier:
+  Enabled: false
+Style/IfWithSemicolon:
+  Enabled: false
+Style/InlineComment:
+  Enabled: false
+Style/Lambda:
+  Enabled: false
+Style/LambdaCall:
+  Enabled: false
+Style/LineEndConcatenation:
+  Enabled: false
+Style/MethodCalledOnDoEndBlock:
+  Enabled: false
+Style/ModuleFunction:
+  Enabled: false
+Style/NegatedIf:
+  Enabled: false
+Style/NegatedWhile:
+  Enabled: false
+Style/Next:
+  Enabled: false
+Style/NilComparison:
+  Enabled: false
+Style/Not:
+  Enabled: false
+Style/NumericLiterals:
+  Enabled: false
+Style/NumericPredicate:
+  Enabled: false
+Style/OneLineConditional:
+  Enabled: false
+Style/PercentLiteralDelimiters:
+  Enabled: false
+Style/PerlBackrefs:
+  Enabled: false
+Style/PreferredHashMethods:
+  Enabled: false
+Style/Proc:
+  Enabled: false
+Style/RaiseArgs:
+  Enabled: false
+Style/RegexpLiteral:
+  Enabled: false
+Style/SelfAssignment:
+  Enabled: false
+Style/SignalException:
+  Enabled: false
+Style/SingleLineBlockParams:
+  Enabled: false
+Style/SingleLineMethods:
+  Enabled: false
+Style/SpecialGlobalVars:
+  Enabled: false
+Style/StringLiterals:
+  EnforcedStyle: single_quotes
+Style/SymbolArray:
+  Enabled: false
+Style/TrailingCommaInArguments:
+  EnforcedStyleForMultiline: consistent_comma
+Style/TrailingCommaInArrayLiteral:
+  EnforcedStyleForMultiline: consistent_comma
+Style/TrailingCommaInHashLiteral:
+  EnforcedStyleForMultiline: consistent_comma
+Style/TrivialAccessors:
+  Enabled: false
+Style/WhenThen:
+  Enabled: false
+Style/WhileUntilModifier:
+  Enabled: false
+Style/WordArray:
+  Enabled: false
+Style/VariableInterpolation:
+  Enabled: false

Gemfile

@@ -1,20 +1,8 @@
-# If you have OpenSSL installed, we recommend updating
-# the following line to use "https"
-source 'http://rubygems.org'
+source 'https://rubygems.org'
 
-gem "bourbon"
-gem "bitters"
-gem "haml"
-gem "neat"
-gem "middleman", "~>3.3.6"
-gem "middleman-deploy"
-gem "rake"
-
-# Live-reloading plugin
-gem "middleman-livereload", "~> 3.1.0"
-
-# For faster file watcher updates on Windows:
-gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
-
-# Windows does not come with time zone data
-gem "tzinfo-data", platforms: [:mswin, :mingw]
+gem 'bitters'
+gem 'bourbon'
+gem 'haml'
+gem 'middleman'
+gem 'neat'
+gem 'rake'

Gemfile.lock

@@ -1,142 +1,111 @@
 GEM
-  remote: http://rubygems.org/
+  remote: https://rubygems.org/
   specs:
-    activesupport (4.1.6)
-      i18n (~> 0.6, >= 0.6.9)
-      json (~> 1.7, >= 1.7.7)
+    activesupport (5.0.7.1)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
       minitest (~> 5.1)
-      thread_safe (~> 0.1)
       tzinfo (~> 1.1)
-    bitters (0.10.1)
-      bourbon (>= 3.2)
-      sass (>= 3.2)
-      thor
-    bourbon (4.0.2)
-      sass (~> 3.3)
-      thor
-    celluloid (0.16.0)
-      timers (~> 4.0.0)
-    chunky_png (1.3.1)
-    coffee-script (2.3.0)
+    addressable (2.6.0)
+      public_suffix (>= 2.0.2, < 4.0)
+    backports (3.11.4)
+    bitters (1.8.0)
+      bourbon (~> 5.0)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    bourbon (5.1.0)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.8.0)
-    compass (1.0.1)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.1)
-      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.1)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
-    compass-import-once (1.0.5)
-      sass (>= 3.2, < 3.5)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+    coffee-script-source (1.12.2)
+    concurrent-ruby (1.1.4)
+    contracts (0.13.0)
+    dotenv (2.6.0)
     erubis (2.7.0)
-    eventmachine (1.0.7)
-    execjs (2.2.1)
-    ffi (1.9.5)
-    haml (4.0.5)
+    execjs (2.7.0)
+    fast_blank (1.0.0)
+    fastimage (2.1.5)
+    ffi (1.9.25)
+    haml (5.0.4)
+      temple (>= 0.8.0)
       tilt
-    hike (1.2.3)
-    hitimes (1.2.2)
-    hooks (0.4.0)
-      uber (~> 0.0.4)
-    http_parser.rb (0.6.0)
-    i18n (0.6.11)
-    json (1.8.1)
-    kramdown (1.4.2)
-    listen (2.7.11)
-      celluloid (>= 0.15.2)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-    middleman (3.3.6)
+    hamster (3.0.0)
+      concurrent-ruby (~> 1.0)
+    hashie (3.6.0)
+    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.16.0)
+    middleman (4.3.2)
       coffee-script (~> 2.2)
-      compass (>= 1.0.0, < 2.0.0)
-      compass-import-once (= 1.0.5)
-      execjs (~> 2.0)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-core (= 3.3.6)
-      middleman-sprockets (>= 3.1.2)
-      sass (>= 3.4.0, < 4.0)
-      uglifier (~> 2.5)
-    middleman-core (3.3.6)
-      activesupport (~> 4.1.0)
-      bundler (~> 1.1)
+      middleman-cli (= 4.3.2)
+      middleman-core (= 4.3.2)
+    middleman-cli (4.3.2)
+      thor (>= 0.17.0, < 2.0)
+    middleman-core (4.3.2)
+      activesupport (>= 4.2, < 5.1)
+      addressable (~> 2.3)
+      backports (~> 3.6)
+      bundler
+      contracts (~> 0.13.0)
+      dotenv
       erubis
-      hooks (~> 0.3)
-      i18n (~> 0.6.9)
-      listen (>= 2.7.9, < 3.0)
-      padrino-helpers (~> 0.12.3)
-      rack (>= 1.4.5, < 2.0)
-      rack-test (~> 0.6.2)
-      thor (>= 0.15.2, < 2.0)
-      tilt (~> 1.4.1, < 2.0)
-    middleman-deploy (0.3.0)
-      middleman-core (>= 3.2)
-      net-sftp
-      ptools
-    middleman-livereload (3.1.1)
-      em-websocket (>= 0.2.0)
-      middleman-core (>= 3.0.2)
-      multi_json (~> 1.0)
-      rack-livereload
-    middleman-sprockets (3.3.10)
-      middleman-core (~> 3.3)
-      sprockets (~> 2.12.1)
-      sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.2.0)
-    minitest (5.4.2)
-    multi_json (1.10.1)
-    neat (1.6.0)
-      bourbon (>= 3.1)
-      sass (>= 3.3)
-    net-sftp (2.1.2)
-      net-ssh (>= 2.6.5)
-    net-ssh (2.9.1)
-    padrino-helpers (0.12.3)
+      execjs (~> 2.0)
+      fast_blank
+      fastimage (~> 2.0)
+      hamster (~> 3.0)
+      hashie (~> 3.4)
+      i18n (~> 0.9.0)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
+      padrino-helpers (~> 0.13.0)
+      parallel
+      rack (>= 1.4.5, < 3)
+      sassc (~> 2.0)
+      servolux
+      tilt (~> 2.0.9)
+      uglifier (~> 3.0)
+    minitest (5.11.3)
+    neat (3.0.1)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    padrino-helpers (0.13.3.4)
       i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.12.3)
-      tilt (~> 1.4.1)
-    padrino-support (0.12.3)
+      padrino-support (= 0.13.3.4)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.3.4)
       activesupport (>= 3.1)
-    ptools (1.2.6)
-    rack (1.5.2)
-    rack-livereload (0.3.15)
-      rack
-    rack-test (0.6.2)
-      rack (>= 1.0)
-    rake (10.4.2)
-    rb-fsevent (0.9.4)
-    rb-inotify (0.9.5)
-      ffi (>= 0.5.0)
-    sass (3.4.5)
-    sprockets (2.12.2)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-helpers (1.1.0)
-      sprockets (~> 2.0)
-    sprockets-sass (1.2.0)
-      sprockets (~> 2.0)
-      tilt (~> 1.1)
-    thor (0.19.1)
-    thread_safe (0.3.4)
-    tilt (1.4.1)
-    timers (4.0.1)
-      hitimes
-    tzinfo (1.2.2)
+    parallel (1.13.0)
+    public_suffix (3.0.3)
+    rack (2.0.6)
+    rake (12.3.2)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    sass (3.7.3)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sassc (2.0.0)
+      ffi (~> 1.9.6)
+      rake
+    servolux (0.13.0)
+    temple (0.8.0)
+    thor (0.20.3)
+    thread_safe (0.3.6)
+    tilt (2.0.9)
+    tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uber (0.0.8)
-    uglifier (2.5.3)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
+    uglifier (3.2.0)
+      execjs (>= 0.3.0, < 3)
 
 PLATFORMS
   ruby
@@ -145,10 +114,9 @@ DEPENDENCIES
   bitters
   bourbon
   haml
-  middleman (~> 3.3.6)
-  middleman-deploy
-  middleman-livereload (~> 3.1.0)
+  middleman
   neat
   rake
-  tzinfo-data
-  wdm (~> 0.1.0)
+
+BUNDLED WITH
+   2.0.1

README.md

@@ -3,11 +3,13 @@
 This is the branch where the site for shoulda-matchers (located at
 <http://matchers.shoulda.io>) is kept.
 
-Here's how to make changes:
+## Developing
 
-* Install dependencies: `bundle install`
-* Start the Middleman server: `bundle exec middleman`
-* Make changes to files in source/
+* Install dependencies: `bin/setup`
+* Start Middleman and Webpack: `bin/server`
+* Make changes to files in `source/` and `assets/`
 * View the changes at <http://localhost:4567>
-* When finished, publish your changes by running `rake site:publish`
+* When finished, try building the site using `bundle exec middleman build`
+* Assuming all goes well, publish your changes by running `bundle exec rake
+  site:publish`
 * That's it!

assets/javascripts/animateWhenVisible.js

@@ -0,0 +1,25 @@
+function animateWhenVisible(animatables) {
+  for (const animatable of animatables) {
+    if (window.scrollY + window.innerHeight >= animatable.offsetTop) {
+      animatable.classList.add("animated");
+    } else {
+      animatable.classList.remove("animated");
+    }
+  }
+}
+
+function init() {
+  const animatables = document.querySelectorAll(
+    "[data-id='animate-when-visible']"
+  );
+
+  if (animatables.length > 0) {
+    animateWhenVisible(animatables);
+  }
+
+  document.addEventListener("scroll", () => {
+    animateWhenVisible(animatables);
+  });
+}
+
+export default { init };

assets/javascripts/index.js

@@ -0,0 +1,8 @@
+import "prismjs";
+import tabs from "./tabs";
+import animateWhenVisible from "./animateWhenVisible";
+
+import "../stylesheets/index.css.scss";
+
+tabs.init();
+animateWhenVisible.init();

assets/javascripts/tabs.js

@@ -0,0 +1,40 @@
+const allSidebarTabs = document.querySelectorAll("[data-id='sidebar-tab']");
+const allAccordionTabs = document.querySelectorAll("[data-id='accordion-tab']");
+const allTabs = [...allSidebarTabs, ...allAccordionTabs];
+const allContentAreas = document.querySelectorAll("[data-id='tab-content']");
+
+const BREAKPOINT = 860;
+
+function onTabClick(event) {
+  event.preventDefault();
+
+  const tabName = event.target.getAttribute("href").slice(1);
+  const selectedContentArea = document.querySelector(
+    `#${tabName} [data-id="tab-content"]`
+  );
+  const tabsToSelect = document.querySelectorAll(`[href='#${tabName}']`);
+
+  for (const contentArea of allContentAreas) {
+    contentArea.classList.remove("is-active");
+  }
+  selectedContentArea.classList.add("is-active");
+
+  for (const tab of allTabs) {
+    tab.classList.remove("is-active");
+  }
+  for (const tab of tabsToSelect) {
+    if (window.innerWidth < BREAKPOINT) {
+      tab.scrollIntoView();
+    }
+
+    tab.classList.add("is-active");
+  }
+}
+
+function init() {
+  for (const tab of allTabs) {
+    tab.addEventListener("click", onTabClick);
+  }
+}
+
+export default { init };