bookwatch 1.0.0

data/master_middleman/config.rb

@@ -0,0 +1,34 @@
+require 'bookwatch_helpers'
+require 'middleman-syntax'
+require 'middleman-livereload'
+require 'subdirectory_aware_assets'
+
+config = YAML.load_file('bookwatch_config.yml')
+config.each do |k, v|
+  set k, v
+end
+
+set :markdown_engine, :redcarpet
+set :markdown, :layout_engine => :erb,
+               :tables => true,
+               :autolink => true,
+               :smartypants => true,
+               :fenced_code_blocks => true
+
+set :css_dir, 'stylesheets'
+
+set :js_dir, 'javascripts'
+
+set :images_dir, 'images'
+
+set :relative_links, false
+
+page '/owners.json', :layout => false
+
+activate :subdirectory_aware_assets
+
+activate :navigation
+
+activate :syntax
+
+activate :livereload

data/master_middleman/quicklinks_renderer.rb

@@ -0,0 +1,80 @@
+require 'nokogiri'
+require 'redcarpet'
+
+class QuicklinksRenderer < Redcarpet::Render::Base
+  class BadHeadingLevelError < StandardError; end
+
+  attr_reader :vars
+
+  def initialize(template_variables)
+    super()
+    @vars = template_variables
+  end
+
+  def doc_header
+    @items = []
+    @items[1] = document.css('ul').first
+    nil
+  end
+
+  def doc_footer
+    document.css('.quick-links').to_html if any_headers?
+  end
+
+  def header(text, header_level)
+    return unless [2, 3].include?(header_level)
+    return unless anchor_for(text)
+
+    li = Nokogiri::XML::Node.new('li', document)
+    li.add_child anchor_for(text)
+    last_list_of_level(header_level-1).add_child(li)
+    @items[header_level] = li
+    nil
+  rescue BadHeadingLevelError => e
+    raise BadHeadingLevelError.new "The header \"#{text}\", which is at level #{e.message}, has no higher-level headers occurring before it."
+  end
+
+  private
+
+  def any_headers?
+    @items[2]
+  end
+
+  def anchor_for(text)
+    text = ERB.new(text).result(binding)
+    doc = Nokogiri::HTML(text)
+    target_anchor = doc.css('a').first
+    return unless target_anchor && target_anchor['id']
+    return if (target_anchor['class'] || '').match(/\bno-quick-link\b/)
+
+    anchor = Nokogiri::XML::Node.new('a', document)
+    anchor['href'] = "##{target_anchor['id']}"
+    anchor.content = doc.text.strip
+    anchor
+  end
+
+  def last_list_of_level(n)
+    item = @items[n]
+    raise BadHeadingLevelError.new("#{n+1}") unless item
+    return item if item.name == 'ul'
+
+    item.add_child('<ul>') unless item.css('ul').any?
+    @items[n] = item.css('ul').first
+  end
+
+  def document
+    builder.doc
+  end
+
+  def builder
+    @builder ||= Nokogiri::HTML::Builder.new(&base_quicklinks_doc)
+  end
+
+  def base_quicklinks_doc
+    Proc.new do |html|
+      html.div(class: 'quick-links') {
+        html.ul
+      }
+    end
+  end
+end

data/master_middleman/source/javascripts/all.js

@@ -0,0 +1,2 @@
+//= require bookwatch
+//= require book

data/master_middleman/source/javascripts/book.js

@@ -0,0 +1 @@
+// Declare your book-specific javascript overrides in this file.

data/master_middleman/source/javascripts/bookwatch.js

@@ -0,0 +1,103 @@
+(function() {
+  var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  function toggleClass(el, className) {
+    var check = new RegExp("\\b" + className + "\\b");
+    if (check.test(el.className)) {
+      el.className = el.className.replace(check, '');
+    } else {
+      el.className += ' ' + className;
+    }
+  }
+
+  function openSubmenu(e) {
+    if (e.target.tagName !== 'A') {
+      var el = e.currentTarget;
+      toggleClass(el, 'expanded');
+      e.stopPropagation();
+    }
+  }
+
+  function registerOnClick(el, handler) {
+    if (el.addEventListener) {
+      el.addEventListener('click', handler);
+    } else {
+      el.onclick = handler;
+    }
+  }
+
+  function toggleMainMenu(e) {
+    var el = e.currentTarget;
+    toggleClass(el.parentNode, 'menu-active');
+  }
+
+  function toggleSubMenu(e) {
+    var el = e.currentTarget;
+    toggleClass(el.parentNode, 'active');
+  }
+
+  function displayDate(millis) {
+    millis = parseInt(millis, 10);
+    var date = new Date(millis);
+
+    return [MONTHS[date.getMonth()], ' ', date.getDate(), ', ', date.getFullYear()].join('');
+  }
+
+  window.Bookwatch = {
+    startSidenav: function(rootEl, currentPath) {
+      if (!rootEl) { return; }
+
+      var submenus = rootEl.querySelectorAll('.has_submenu');
+
+      for (var i = 0; i < submenus.length; i++) {
+        registerOnClick(submenus[i], openSubmenu);
+      }
+
+      if (currentPath) {
+        var currentLink = rootEl.querySelector('a[href="' + currentPath + '"]');
+        if (currentLink) {
+          currentLink.className += ' active';
+
+          var hasSubmenu = /\bhas_submenu\b/;
+          var subnavLocation = currentLink.parentNode;
+
+          while(subnavLocation.parentNode !== rootEl) {
+            subnavLocation = subnavLocation.parentNode;
+            if (hasSubmenu.test(subnavLocation.className)) {
+              subnavLocation.className += ' expanded';
+            }
+          }
+
+          rootEl.scrollTop = currentLink.offsetTop - rootEl.offsetTop;
+        }
+      }
+    },
+    mobileMainMenu: function(root) {
+      var mainMenus = root.querySelectorAll('[data-behavior=MenuMobile]');
+
+      for (var i = 0; i < mainMenus.length; i++) {
+        registerOnClick(mainMenus[i], toggleMainMenu);
+      }
+    },
+    mobileSubMenu: function(root) {
+      var subMenus = root.querySelectorAll('[data-behavior=SubMenuMobile]');
+
+      for (var i = 0; i < subMenus.length; i++) {
+        registerOnClick(subMenus[i], toggleSubMenu);
+      }
+    },
+    modifiedDates: function(root) {
+      var datesElements = root.querySelectorAll('[data-behavior=DisplayModifiedDate]');
+
+      for (var i = 0; i < datesElements.length; i++) {
+        datesElements[i].innerText = displayDate(datesElements[i].getAttribute('data-modified-date'));
+      }
+    },
+    boot: function() {
+      Bookwatch.startSidenav(document.querySelector('#sub-nav'), document.location.pathname);
+      Bookwatch.mobileMainMenu(document);
+      Bookwatch.mobileSubMenu(document);
+      Bookwatch.modifiedDates(document);
+    }
+  };
+})();

data/master_middleman/source/layouts/_book-title.erb

@@ -0,0 +1,3 @@
+<!--Default title-->
+<!--If book needs something different, add a book-title partial to the book's layouts folder-->
+<%= vars.title %>

data/master_middleman/source/layouts/_header.erb

@@ -0,0 +1,34 @@
+<% if current_page.data.title %> <%# this is a proxy for if !homepage %>
+  <header class="header header-layout">
+    <h1 class="logo">
+      <a href="/"><%= vars.book_title || 'Default Book Title' %></a>
+    </h1>
+    <%= yield_for_archive_drop_down_menu %>
+    <div class="header-links js-bar-links">
+      <div class="btn-menu" data-behavior="MenuMobile"></div>
+      <%= vars.product_link %>
+      <div class="header-item">
+        <%= vars.support_link %>
+      </div>
+      <%= partial 'layouts/book-search' %>
+    </div>
+  </header>
+<% else %>
+  <header class="header-home">
+    <div class="home-links js-bar-links">
+      <div class="btn-menu" data-behavior="MenuMobile"></div>
+      <%= vars.product_link %>
+      <div class="header-item">
+        <%= vars.support_call_to_action %>
+      </div>
+      <%= partial 'layouts/book-search' %>
+    </div>
+    <h1 class="title-flashy">
+      <%= partial 'layouts/book-title' %>
+    </h1>
+
+    <h2 class="title-intro">
+      <%= vars.hero_text %>
+    </h2>
+  </header>
+<% end %>

data/master_middleman/source/layouts/_page-footer.erb

@@ -0,0 +1 @@
+<%= render_repo_link %>

data/master_middleman/source/layouts/_title.erb

@@ -0,0 +1,5 @@
+<% if current_page.data.title %>
+  <h1 class="title-container">
+    <%= current_page.data.title %>
+  </h1>
+<% end %>

data/master_middleman/source/layouts/layout.erb

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <!-- Always force latest IE rendering engine or request Chrome Frame -->
+  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+
+  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400italic,400,600' rel='stylesheet' type='text/css'>
+  <!-- Use title if it's in the page YAML frontmatter -->
+  <title>
+    <% if data.page.title %>
+      <%= data.page.title %> |
+    <% end %>
+    <%= vars.book_title_short %>
+  </title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <%= stylesheet_link_tag 'all', :media => 'screen, print' %>
+  <%= stylesheet_link_tag 'print', :media => 'print' %>
+  <link href='/images/favicon.ico' rel='shortcut icon'>
+
+  <%= javascript_include_tag "all" %>
+  <%= partial 'layouts/additional-scripts' %>
+</head>
+
+<body class="<%= body_classes %><%= yield_for_subnav.empty? ? '' : ' has-subnav' %>">
+
+<div class="viewport">
+  <div class='wrap'>
+    <script type="text/javascript">
+      document.domain = "<%= vars.domain_name %>";
+    </script>
+
+    <%= partial 'layouts/header' %>
+
+    <div class="container">
+
+      <!--googleoff: index-->
+      <%= yield_for_subnav %>
+      <!--googleon: index-->
+
+      <main class="content content-layout" id="js-content" role="main">
+        <a id="top"></a>
+        <%= partial 'layouts/local-header' %>
+        <%= partial 'layouts/title' %>
+        <% if quick_links %>
+          <div id="js-quick-links" <%= 'class="list-style-none"' if data.page.list_style_none %>>
+            <%= quick_links %>
+          </div>
+        <% end %>
+        <div class="to-top" id="js-to-top">
+          <a href="#top" title="back to top"></a>
+        </div>
+        <%= yield %>
+        <%= partial 'layouts/page-footer' %>
+      </main>
+    </div>
+  </div>
+</div>
+
+<div id="scrim"></div>
+
+<div class="container">
+  <footer class="site-footer-links">
+    <%= partial 'layouts/book-footer' %>
+  </footer>
+</div><!--end of container-->
+
+</body>
+</html>

data/master_middleman/source/stylesheets/all.css.scss

@@ -0,0 +1,3 @@
+@import "base";
+@import "layout-styles";
+@import "book-styles";

data/master_middleman/source/stylesheets/base.scss

@@ -0,0 +1,380 @@
+@import "font-awesome/variables";
+@import "font-awesome/core";
+@import "font-awesome/path";
+
+@import "partials/vars";
+@import "partials/mixins";
+
+@import "partials/reset";
+@import "partials/default";
+
+@import "partials/syntax-highlight";
+@import "partials/header";
+@import "partials/footer";
+@import "partials/search";
+@import "partials/sidenav";
+
+
+// ~LAYOUT
+// ===================================================
+.container {
+  background: #fff;
+  clear: both;
+  margin: 0 auto;
+  max-width: 1024px;
+}
+.content-layout {
+  padding: 2em 1.5em 2em 1.5em;
+  @media (min-width: $bp-wide) {
+    padding-top: 0;
+  }
+
+  @media (min-width: $bp-wide) {
+    #top:before {
+      content: '';
+      padding-bottom: 4em;
+      border: none;
+      display: block;
+    }
+  }
+}
+.has-subnav .container {
+  max-width: auto;
+  @media (min-width: $bp-wide) {
+    margin-left: $sidenav-wide;
+  }
+  @media (min-width: $bp-widest) {
+    margin-left: $sidenav-widest;
+  }
+}
+.has-subnav .content-layout {
+  @media (min-width: $bp-wide) {
+    max-width: 45em;
+    padding: 0 2em 2em;
+  }
+}
+.nav-container {
+  @media (min-width: $bp-wide) {
+    position: fixed;
+    z-index: 10;
+    top: 38px;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    width: $sidenav-wide;
+  }
+  @media (min-width: $bp-widest) {
+    width: $sidenav-widest;
+  }
+}
+
+
+// ~SIDE NAV RELATED STYLES
+// ===================================================
+.has-sidenav table {
+  border-color: $color-border;
+  border: 1px solid $color-border;
+}
+.has-sidenav th {
+  background-color: transparentize($color-accent, 0.95);
+}
+.has-sidenav table tr:nth-child(2n+1) {
+  background: none;
+}
+.has-sidenav .content tr:nth-child(2n+1) {
+  background-color: $color-border-row;
+}
+
+// ~GRID HELPER
+// ===================================================
+.span3 {
+  display: block;
+  @media (min-width: $bp-wide) {
+    // 2 col
+    float: left;
+    margin-right: 2%;
+    width: 48%;
+  }
+  @media (min-width: $bp-widest) {
+    // 3 col
+    width: 32%;
+  }
+}
+// first of 2
+.span3:nth-child(2n+1) {
+  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
+    clear: left;
+  }
+}
+// last of 2
+.span3:nth-child(2n) {
+  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
+    margin-right: 0;
+  }
+}
+
+// first of 3
+.span3:nth-child(3n+1) {
+  @media (min-width: $bp-widest) {
+    clear: left;
+  }
+}
+// last of 3
+.span3:nth-child(3n) {
+  @media (min-width: $bp-widest) {
+    margin-right: 0;
+  }
+}
+
+/*doc
+---
+title: Title Container
+name: title_container
+category: basics
+---
+```html_example
+<h1 class="title-container">
+  Lorem Ipsum Dolor
+</h1>
+```
+*/
+
+// Title of content
+.title-container {
+  line-height: 1.1;
+  font-weight: 600;
+  font-size: $font-size-xl;
+  margin-top: 0;
+  @media (min-width: $bp-wide) {
+    font-size: $font-size-xxl
+  }
+}
+
+// ~QUICK LINKS
+// ===================================================
+/*doc
+---
+title: Nav - Quick Links
+name: nav-quick_links
+category: basics
+---
+```html_example
+<div class="quick-links">
+  <ul>
+  <li><a href="#">quick link</a></li>
+  <li><a href="#">quick link</a></li>
+  <li><a href="#">quick link</a></li>
+  </ul>
+</div>
+```
+*/
+.quick-links {
+  background-color: $color-bg-light;
+  border-radius: 3px;
+  border: 1px solid $color-border-superlight;
+  display: inline-block;
+  padding: 1em 1.5em;
+
+  ol, ul, li {
+    margin: 0;
+  }
+
+  > ul {
+    list-style-position: inside;
+    list-style-type: lower-roman;
+    margin-left: -1em;
+
+    &:before {
+      content: "In this topic:";
+      display: block;
+      padding-bottom: 0.25em;
+    }
+  }
+
+  ul ul {
+    padding-left: 1.8em;
+  }
+}
+
+.list-style-none .quick-links > ul {
+  list-style-type: none;
+}
+
+// ~CONTENT
+// ===================================================
+// Designate external links with an icon
+
+/*doc
+---
+title: Link External
+name: link_external
+category: basics
+---
+```html_example
+<a class="external-link" href="#">Link</a>
+```
+*/
+.content a[href^="http"]:after,
+.external-link:after {
+  @extend .fa;
+  content: $fa-var-external-link;
+  font-size: 0.75em;
+  padding-left: 0.5em;
+}
+
+.content a:hover,
+.content a:focus,
+.content a:active,
+.link:hover,
+.link:focus,
+.link:active {
+  background-color: transparentize($color-accent-bright, 0.92);
+  border-bottom-style: solid;
+}
+
+// Enlarge first paragraph of content.
+
+/*doc
+---
+title: Content Helper - Intro
+name: content_helper-intro
+category: basics
+---
+```html_example
+<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus totam libero facilis voluptatem aliquam incidunt ipsa officiis, dicta nihil expedita, molestiae delectus impedit hic quidem deserunt laudantium, sint debitis tenetur.</p>
+```
+*/
+
+.intro {
+  font-size: $font-size-m;
+  font-weight: 300;
+}
+
+/*doc
+---
+title: Content Helper - Note
+name: content_helper-note
+category: basics
+---
+```html_example
+<p class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus totam libero facilis voluptatem aliquam incidunt ipsa officiis, dicta nihil expedita, molestiae delectus impedit hic quidem deserunt laudantium, sint debitis tenetur.</p>
+```
+*/
+
+// Notes and tips
+.note {
+  background: #ffffed;
+  border-color: #ebebd3;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  margin: 1em 0;
+  padding: 0.7em 1em 0.7em 2.3em;
+  position: relative;
+  &:before {
+    content: $fa-var-lightbulb-o;
+    @extend .fa;
+    color: #b9b781;
+    font-size: 1.5em;
+    left: 0.6em;
+    position: absolute;
+    top: 0.45em;
+  }
+}
+
+/*doc
+---
+title: Content Helper - New User Tip
+name: content_helper-tip
+category: basics
+---
+```html_example
+<p class="tip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus totam libero facilis voluptatem aliquam incidunt ipsa officiis, dicta nihil expedita, molestiae delectus impedit hic quidem deserunt laudantium, sint debitis tenetur.</p>
+```
+*/
+
+// Tips for first-time users
+.tip {
+  background: #ffffff;
+  border-color: $color-border-tip;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  margin: 1em 0;
+  padding: 1.7em 2em;
+  position: relative;
+  text-align: left;
+  &:before {
+    @extend .fa;
+    color: #7C7C7C;
+    font-size: $font-size-xl;
+    left: 0.5em;
+    position: absolute;
+    top: 0.8em;
+  }
+}
+
+// ~CODE EXAMPLE STYLES
+// ===================================================
+
+/*doc
+---
+title: Code Example - Terminal
+name: code_example-terminal
+category: basics
+---
+```html_example
+<pre class="terminal">$ keytool -import -alias ops-metrics-ssl -file ops-metrics.cer -keystore localhost.truststore</pre>
+```
+*/
+
+.terminal {
+  background-color: #3a3a3a;
+  border: 0;
+  color: #fefefe;
+}
+
+
+// ~BACK TO TOP
+// ===================================================
+.to-top {
+  visibility: hidden;
+  opacity: 0;
+  @include transition(all 0.2s linear);
+  a {
+    border: 0;
+    bottom: 4em;
+    position: fixed;
+    right: 4em;
+    z-index: 10;
+    &:hover {
+      background: none;
+    }
+    &:before {
+      content: $fa-var-arrow-up;
+      @extend .fa;
+      background: $color-accent-bright;
+      box-shadow: 0 0 9px rgba(153, 153, 153, 0.8);
+      color: #fff;
+      line-height: 2.5em;
+      height: 2.5em;
+      text-align: center;
+      width: 2.5em;
+    }
+  }
+  &.sticky {
+    // display: inline-block;
+    visibility: visible;
+    opacity: 1;
+  }
+  @media (max-width: $bp-wide) {
+    // Hide back to top on narrow width screens
+    display: none;
+  }
+}
+// Hide back to top on homepage
+.index .to-top {
+  display: none;
+}