middleman-hashicorp 0.3.15 → 0.3.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: faa6604885b0ec377d901ba569d5e6c77af4d14f
-  data.tar.gz: abb5f50ffff04dffc4f39f7b94e14336af23c74b
+  metadata.gz: 8eb722264071c8c5032ec045033a27fd9d743aae
+  data.tar.gz: 2806cf4d941ae2d71370884c8296b0d84a53ef96
 SHA512:
-  metadata.gz: 25f52e284323c966063293223a5852b75f5735208b5f6004bca6a3d9e43eb030e533aaf7b156cffd277648b642c6cd85f37059d65210b0f83176dc6d46bf0291
-  data.tar.gz: 551ed2efa0fef9310eb19d825d7410b58bdeb969ff4d2805919f505189b56f15d7f90c7d335d68717beec406a921c43e534da92c5463106b2d47b39bfa5fed84
+  metadata.gz: 1ecd6d6c1cb0176064613fb993d2c1c986b216932b26a640875b952030e42a1955f3bcfe59370f9303e8ce5a9dc4e1d9337267d32feea2c892f0acb486615524
+  data.tar.gz: fd9c9bba46e9244fb4316c45d8d75fc5cebe8bbe1c9afde7fea2fee7fb20bb3715d16fa8a88c9fd0adf3b253fc54a8904534d4bd21d000c181d441cc480bfa60

data/README.md

@@ -77,6 +77,17 @@ There are bundled things that make IE behave nicely. Include them like this:
 <![endif]-->
 ```
 
+### Inline SVGs
+
+Getting SVGs out of the asset pipeline and into the DOM can be hard, but not
+with the magic `inline_svg` helper!
+
+```erb
+<%= inline_svg "my-asset.svg" %>
+```
+
+It supports configuring the class, height, width, and viewbox.
+
 ### Turbolinks
 
 Turbolinks highjack links on the same domain and use AJAX to dynamically update
@@ -88,6 +99,56 @@ To enable turbolinks, include the javascript.
 //= require turbolinks
 ```
 
+### Mobile Sidebar
+
+The mobile sidebar is displayed on mobile and small screens as a hamburger menu.
+It requires some additional markup and css for configuration. First, define the
+following variables in your scss:
+
+```scss
+$sidebar-background-color
+$sidebar-link-color
+$sidebar-font-family
+$sidebar-font-weight
+$sidebar-font-size
+$sidebar-link-color-hover
+```
+
+Then include the scss scaffold:
+
+```scss
+@import 'hashicorp/sidebar';
+```
+
+Next, create some markup like this:
+
+```html
+<div class="sidebar-overlay"></div>
+
+<aside class="sidebar" role="navigation">
+  <div class="sidebar-header">
+    <img src="images/my-image.svg" alt="My Header" height="42">
+  </div>
+
+  <ul class="nav sidebar-nav">
+    <li><a href="/">Home</a></li>
+  </ul>
+
+  <!-- Optional -->
+  <div class="divider"></div>
+
+  <ul class="nav sidebar-nav">
+    <li><a href="/">Other</li>
+  </ul>
+</aside>
+```
+
+Finally include the required javascript:
+
+```js
+//= require hashicorp/sidebar
+```
+
 ### Mega Nav
 HashiCorp has a consistent mega-nav used across all project sites. This is insertable into any document using the following:
 

data/assets/javascripts/hashicorp/mega-nav.js

@@ -2,10 +2,7 @@
 // HashiCorp Mega Nav
 // --------------------------------------------------
 
-$(function() {
-
-  //handle active product
-
+var HashiMegaNav = function() {
   var productClass = 'mega-nav-grid-item',
       productActiveClass = 'is-active',
       url = window.location.hostname,
@@ -24,9 +21,6 @@ $(function() {
     }
   }
 
-
-  //handle functionality
-
   var dropDownBreakpoint = window.matchMedia("(min-width: 980px)");
 
   function megaNavModal() {
@@ -44,7 +38,6 @@ $(function() {
     $('#mega-nav-close').on('click.megaNav', function() {
       $('#mega-nav-body-ct').modal('hide');
     });
-
   }
 
   function megaNavModalDestroy() {
@@ -67,7 +60,6 @@ $(function() {
   }
 
   function handleDropDownBreakpoint(breakpoint) {
-
     if (breakpoint.matches) {
       megaNavModalDestroy();
       megaNavDropDown();
@@ -75,10 +67,11 @@ $(function() {
       megaNavDropDownDestroy();
       megaNavModal();
     }
-
   }
 
   dropDownBreakpoint.addListener(handleDropDownBreakpoint);
-  handleDropDownBreakpoint(dropDownBreakpoint);    
+  handleDropDownBreakpoint(dropDownBreakpoint);
+}
 
-});
+// Handle document ready function and the turbolinks load.
+$(document).on("ready turbolinks:load", HashiMegaNav);

data/assets/javascripts/hashicorp/sidebar.js

@@ -0,0 +1,40 @@
+// HashiSidebar is the sidebar implementation for mobile websites. It
+// appears at a configurable breakpoint in the CSS.
+var HashiSidebar = function() {
+  var $sidebar = $('.sidebar');
+  var $toggle = $('.navbar-toggle');
+  var $overlay = $('.sidebar-overlay');
+
+  function sidebarActive() {
+    return $sidebar.hasClass('open');
+  }
+
+  function hideSidebar() {
+    if(sidebarActive()) {
+      $sidebar.removeClass('open');
+      $overlay.removeClass('active');
+    }
+  }
+
+  // Hide the sidebar when the user clicks on the overlay. The overlay is
+  // only "clickable" when it's active.
+  $overlay.on('click', function(e){
+    hideSidebar();
+  });
+
+  // Show the sidebar when the user clicks the hamburger menu.
+  $toggle.on('click', function(e) {
+    e.preventDefault(); // Don't jump page to "#"
+
+    // Only activate the sidebar if it's not already active. Since these
+    // are class selectors, it's possible that we are watching multiple
+    // elements.
+    if(!sidebarActive()) {
+      $overlay.addClass('active');
+      $sidebar.toggleClass('open');
+    }
+  });
+}
+
+// Handle document ready function and the turbolinks load.
+$(document).on("ready turbolinks:load", HashiSidebar);

data/assets/stylesheets/hashicorp/sidebar.scss

@@ -0,0 +1,96 @@
+.sidebar-overlay {
+  background: $sidebar-background-color;
+  opacity: 0;
+  position: fixed;
+  visibility: hidden;
+  z-index: 9999;
+
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  &.active {
+    opacity: 0.3;
+    visibility: visible;
+  }
+}
+
+.sidebar {
+  background-color: $sidebar-background-color;
+  border: none;
+  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.15);
+  display: block;
+  position: relative;
+  min-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: fixed;
+  width: 0;
+  z-index: 10000;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
+  @include clearfix();
+
+  &.open {
+    width: 280px;
+  }
+
+  .sidebar-divider, .divider {
+    width: 80%;
+    height: 1px;
+    margin: 8px auto;
+    background-color: #D7D7D7;
+  }
+
+  .sidebar-header {
+    margin: 30px auto;
+    text-align: center;
+  }
+
+  .sidebar-nav {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+
+    li {
+      position: relative;
+      list-style-type: none;
+      text-align: center;
+
+      a {
+        color: $sidebar-link-color;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        font-family: $sidebar-font-family;
+        font-weight: $sidebar-font-weight;
+        font-size: $sidebar-font-size;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background: transparent;
+          color: $sidebar-link-color-hover;
+          outline: 0;
+          text-decoration: none;
+
+          svg {
+            fill: $sidebar-link-color-hover;
+          }
+        }
+
+        svg {
+          fill: $sidebar-link-color;
+          top: 2px;
+          width: 14px;
+          height: 14px;
+          margin-bottom: -2px;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}

data/lib/middleman-hashicorp/extension.rb

@@ -83,6 +83,61 @@ class Middleman::HashiCorpExtension < ::Middleman::Extension
   end
 
   helpers do
+    #
+    # Generate an inline svg from the given asset name.
+    #
+    # @option options [String] :class
+    # @option options [String] :width
+    # @option options [String] :height
+    # @option options [String] :view_box
+    #
+    # @return [String]
+    #
+    def inline_svg(filename, options = {})
+      asset = sprockets.find_asset(filename)
+
+      # If the file wasn't found, embed error SVG
+      if asset.nil?
+        %(
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 30"
+            width="400px" height="30px"
+          >
+            <text font-size="16" x="8" y="20" fill="#cc0000">
+              Error: '#{filename}' could not be found.
+            </text>
+            <rect
+              x="1" y="1" width="398" height="28" fill="none"
+              stroke-width="1" stroke="#cc0000"
+            />
+          </svg>
+        )
+
+      # If the file was found, parse it, add optional classes, and then embed it
+      else
+        file = asset.source.force_encoding("UTF-8")
+        doc = Nokogiri::HTML::DocumentFragment.parse(file)
+        svg = doc.at_css("svg")
+
+        if options[:class].present?
+          svg["class"] = options[:class]
+        end
+
+        if options[:width].present?
+          svg["width"] = options[:width]
+        end
+
+        if options[:height].present?
+          svg["height"] = options[:height]
+        end
+
+        if options[:view_box].present?
+          svg["viewBox"] = options[:view_box]
+        end
+
+        doc
+      end
+    end
+
     #
     # Output an image that corresponds to the given operating system using the
     # vendored image icons.

data/lib/middleman-hashicorp/version.rb

@@ -1,5 +1,5 @@
 module Middleman
   module HashiCorp
-    VERSION = "0.3.15"
+    VERSION = "0.3.16"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: middleman-hashicorp
 version: !ruby/object:Gem::Version
-  version: 0.3.15
+  version: 0.3.16
 platform: ruby
 authors:
 - Seth Vargo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-03-15 00:00:00.000000000 Z
+date: 2017-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: middleman
@@ -192,6 +192,7 @@ files:
 - assets/images/mega-nav/logo-vault.svg
 - assets/javascripts/bootstrap.js
 - assets/javascripts/hashicorp/mega-nav.js
+- assets/javascripts/hashicorp/sidebar.js
 - assets/javascripts/ie-compat.js
 - assets/javascripts/ie-compat/html5shiv-printshiv.js
 - assets/javascripts/ie-compat/html5shiv.js
@@ -199,6 +200,7 @@ files:
 - assets/javascripts/jquery.js
 - assets/stylesheets/hashicorp/anchor-links.scss
 - assets/stylesheets/hashicorp/mega-nav.scss
+- assets/stylesheets/hashicorp/sidebar.scss
 - docker/Dockerfile
 - docker/entrypoint.sh
 - lib/middleman-hashicorp.rb
@@ -234,7 +236,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: A series of helpers for consistency among HashiCorp's middleman sites