bookends 2.8.0 → 3.0.0.beta1

data/app/assets/stylesheets/bookends/_mixins.scss

@@ -0,0 +1,72 @@
+// ==========================================================================
+// Mixins (not provided by Bourbon)
+// ==========================================================================
+
+@mixin horizontal-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(left, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: 100% $width;
+}
+
+@mixin vertical-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(top, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: $width 100%;
+}
+
+@mixin transition-delay($delay...) {
+  -moz-transition-delay:    $delay;
+  -o-transition-delay:      $delay;
+  -webkit-transition-delay: $delay;
+  transition-delay:         $delay;
+}
+
+@mixin box-sizing($box) {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin transition($transition...) {
+  -moz-transition:    $transition;
+  -o-transition:      $transition;
+  -webkit-transition: $transition;
+  transition:         $transition;
+}
+
+@mixin font-face(
+  $font-family,
+  $file-path,
+  $weight: normal,
+  $style: normal,
+  $asset-pipeline: $asset-pipeline,
+  $file-formats: eot woff2 woff ttf svg) {
+
+  $font-url-prefix: font-url-prefixer($asset-pipeline);
+
+  @font-face {
+    font-family: $font-family;
+    font-style: $style;
+    font-weight: $weight;
+
+    src: font-source-declaration(
+      $font-family,
+      $file-path,
+      $asset-pipeline,
+      $file-formats,
+      $font-url-prefix
+    );
+  }
+}

data/app/assets/stylesheets/bookends/_responsive.scss

@@ -0,0 +1,129 @@
+@mixin screen($threshold: max-width, $screen: 1080px) {
+  @media ($threshold: $screen) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $bp-med + 1) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: $bp-sm) {
+    @content;
+  }
+}
+
+@mixin mobile-landscape {
+  @media (max-width: $bp-sm) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: $bp-med) {
+    @content;
+  }
+}
+
+@mixin tablet-landscape {
+  @media (max-width: $bp-lg) {
+    @content;
+  }
+}
+
+@mixin large-screen {
+  @media (min-width: $bp-xl) {
+    @content;
+  }
+}
+
+@mixin screen-max-height($screen-height: 750px) {
+  @media (max-height: $screen-height) {
+    @content;
+  }
+}
+
+@mixin columns(
+  $desktop: $tartan-column-count,
+  $tablet: "",
+  $mobile: ""
+) {
+  @include tartan-span-columns($desktop);
+
+  @if ($desktop == 1) {
+    &:nth-child(12n + 12) { @include tartan-omega; }
+  }
+
+  @if ($desktop == 2) {
+    &:nth-child(6n + 6) { @include tartan-omega; }
+  }
+
+  @if ($desktop == 3) {
+    &:nth-child(4n + 4) { @include tartan-omega; }
+  }
+
+  @if ($desktop == 4) {
+    &:nth-child(3n + 3) { @include tartan-omega; }
+  }
+
+  @if ($desktop == 6) {
+    &:nth-child(even) { @include tartan-omega; }
+  }
+
+  @if ($tablet != "") {
+    @include tablet {
+      &:nth-child(n) { @include tartan-no-omega } // Specificity
+      @include tartan-span-columns($tablet);
+
+      @if ($tablet == 1) {
+        &:nth-child(12n + 12) { @include tartan-omega; }
+      }
+
+      @if ($tablet == 2) {
+        &:nth-child(6n + 6) { @include tartan-omega; }
+      }
+
+      @if ($tablet == 3) {
+        &:nth-child(4n + 4) { @include tartan-omega; }
+      }
+
+      @if ($tablet == 4) {
+        &:nth-child(3n + 3) { @include tartan-omega; }
+      }
+
+      @if ($tablet == 6) {
+        &:nth-child(2n + 2) { @include tartan-omega; }
+      }
+    }
+  }
+
+  @if ($mobile != "") {
+    @include mobile-landscape {
+      &:nth-child(n) { @include tartan-no-omega } // Specificity
+      @include tartan-span-columns($mobile);
+
+      @if ($mobile == 1) {
+        &:nth-child(12n + 12) { @include tartan-omega; }
+      }
+
+      @if ($mobile == 2) {
+        &:nth-child(6n + 6) { @include tartan-omega; }
+      }
+
+      @if ($mobile == 3) {
+        &:nth-child(4n + 4) { @include tartan-omega; }
+      }
+
+      @if ($mobile == 4) {
+        &:nth-child(3n + 3) { @include tartan-omega; }
+      }
+
+      @if ($mobile == 6) {
+        &:nth-child(even) { @include tartan-omega; }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/bookends/_variables.scss

@@ -0,0 +1,82 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+$asset-pipeline: false;
+$image-path: '/images';
+
+//- Spacing
+$space: 30px;
+$pad-xl: $space;
+$pad-lg: 20px;
+$pad: ceil($space/3);
+$pad-sm: ceil($space/6);
+
+//- Typography
+$font-base: 14px;
+$font-xxl: 24px;
+$font-xl: 18px;
+$font-lg: 16px;
+$font-sm: 13px;
+$font-xs: 10px;
+
+$font-h1: 36px;
+$font-h2: 30px;
+$font-h3: 24px;
+$font-h4: 20px;
+$font-h5: 18px;
+$font-h6: 16px;
+
+$line-height-base: 1.5;
+$line-height-sm: 1.2;
+
+//- Fonts
+$font-main: "BentonSans", "Helvetica Neue", sans-serif;
+$font-mono: "Inconsolata", monospace;
+
+//- Font Weights
+$font-light: 100;
+$font-normal: normal;
+$font-bold: bold;
+
+//- Layout
+$grid-full: 100%;
+$grid-large-screen: 1200px;
+$grid-desktop: 95%;
+$grid-tablet: 95%;
+$grid-mobile: 95%;
+
+//- Wrapper sizes
+$wrapper-sm: 800px;
+$wrapper-md: 960px;
+$wrapper-lg: 1080px;
+
+//- Z-index
+$z-foreground: 200;
+$z-middleground: 100;
+$z-default: 0;
+$z-background: -100;
+
+//- Borders
+$border-color: #ddd;
+$border: 1px solid $border-color;
+
+$border-radius: 4px;
+$border-radius-sm: $border-radius - 1;
+$border-radius-lg: $border-radius + 2;
+$border-radius-circle: 50%;
+
+$box-shadow: 0 2px 4px 0 fade-out($black, .88);
+
+//- Breakpoints
+$bp-xs: 480px;          // $mobile
+$bp-sm: 600px;          // $mobile-landscape
+$bp-med: 768px;         // $tablet
+$bp-med-plus: 1024px;   // $tablet-landscape
+$bp-lg: 1100px;         // $desktop
+$bp-xl: 1400px;         // $large-screen
+
+$tablet: $bp-med;
+
+//-Aniamtion
+$transition: .1s linear;

data/app/assets/stylesheets/bookends/bookends.scss

@@ -0,0 +1,13 @@
+ @charset "utf-8";
+@import 'bourbon';
+@import 'neat';
+@import 'colors';
+@import 'variables';
+@import 'mixins';
+@import 'fonts';
+@import 'base';
+@import 'responsive';
+@import 'grid-settings';
+@import 'glostick';
+@import 'header';
+@import 'footer';

data/app/controllers/bookends/application_controller.rb

@@ -0,0 +1,5 @@
+module Bookends
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/helpers/bookends/application_helper.rb

@@ -0,0 +1,93 @@
+module Bookends
+  module ApplicationHelper
+    def search_path
+      '/search'
+    end
+
+    def relative_search_path
+      '/search'
+    end
+
+    def login_path
+      'https://id.heroku.com'
+    end
+
+    def search_disabled?
+      false
+    end
+
+    def google_search_form
+      "<gcse:searchbox-only resultsUrl='#{search_path}'></gcse:searchbox-only>".html_safe
+    end
+
+    def google_search_results
+      "<gcse:searchresults-only linkTarget='_parent'></gcse:searchresults-only>".html_safe
+    end
+
+    def logged_in?
+      !!cookies[:heroku_session]
+    end
+
+    def glostick_user_name
+      glostick_user['full_name']
+    end
+
+    def glostick_user_email
+      glostick_user['email']
+    end
+
+    def signup_link(title, options = {})
+      url = "https://signup.heroku.com"
+      data = { trackable: { category: "Sign Up Links", action: "Clicked", label: "#{options[:referral] || options[:branded_signup]}" } }
+
+      url += "/#{options[:branded_signup]}" if options[:branded_signup]
+
+      if options[:campaign_id]
+        url = url + "?c=" + options[:campaign_id]
+      elsif options[:referral]
+        url = url + "/" + options[:referral]
+      end
+
+      link_to title, url, class: options[:class], data: data
+    end
+
+    private
+    def glostick_user
+      @glostick_user ||= GlostickUserExtractor.new(cookies).user
+    end
+
+    class GlostickUserExtractor
+      attr_reader :secret,
+                  :token
+
+      def initialize(cookies)
+        @secret = ENV['SESSION_COOKIE_SECRET_PRIMARY'] || ENV['SESSION_COOKIE_SECRET_SECONDARY']
+        @token  = CGI::unescape(cookies[:heroku_user_session]) if cookies[:heroku_user_session]
+      end
+
+      def user
+        session_info = decrypt_session_cookie
+        if session_info && session_info['user']
+          session_info['user']
+        else
+          {
+            'email' => '',
+            'full_name' => ''
+          }
+        end
+      end
+
+      private
+      def decrypt_session_cookie
+        return nil unless token && secret
+
+        verifier = Fernet.verifier(secret, token)
+        verifier.enforce_ttl = false
+
+        return nil unless verifier.valid?
+
+        JSON.parse(verifier.message)
+      end
+    end
+  end
+end

data/{lib/bookends/templates/footer.html → app/views/bookends/_footer.html.erb}

@@ -8,7 +8,6 @@
           <li><a href="https://www.heroku.com/connect">Heroku Connect</a></li>
           <li><a href="https://www.heroku.com/postgres">Heroku Postgres</a></li>
           <li><a href="https://www.heroku.com/redis">Heroku Redis</a></li>
-          <li><a href="https://www.heroku.com/kafka">Kafka on Heroku</a></li>
           <li><a href="https://www.heroku.com/enterprise">Heroku Enterprise</a></li>
           <li><a href="https://www.heroku.com/teams">Heroku Teams</a></li>
           <li><a href="https://elements.heroku.com/">Elements Marketplace</a></li>
@@ -31,16 +30,15 @@
           <li><a href="https://www.heroku.com/customers">Our Customers</a></li>
           <li><a href="https://www.heroku.com/careers">Careers</a></li>
           <li><a href="https://partners.heroku.com/">Partners</a></li>
-          <li><a href="https://www.heroku.com/elements">Elements</a></li>
         </ul>
       </nav>
       <nav class="col">
         <h4>Support</h4>
         <ul>
-          <li><a href="https://help.heroku.com/">Help Center</a></li>
+          <li><a href="https://help.heroku.com/">Help</a></li>
           <li><a href="https://status.heroku.com/">Status</a></li>
-          <li><a href="https://www.heroku.com/critical">Premium Support</a></li>
-          <li><a href="https://www.heroku.com/contact">Contact Us</a></li>
+          <li><a href="https://www.heroku.com/critical">Critical Apps</a></li>
+          <li><a href="https://www.heroku.com/contact">Contact</a></li>
         </ul>
       </nav>
     </div>
@@ -77,7 +75,7 @@
           </div>
         </li>
         <li><a class="heroku-footer-icon-facebook" href="https://facebook.com/heroku" target="_blank" title="Heroku's Facebook">Facebook</a></li>
-        <li><a class="heroku-footer-icon-instagram" href="https://www.instagram.com/heroku/" target="_blank" title="Heroku's Instagram">Instagram</a></li>
+        <li><a class="heroku-footer-icon-instagram" href="https://instagram.com/heroku" target="_blank" title="Heroku's Instagram">Instagram</a></li>
         <li><a class="heroku-footer-icon-github" href="https://github.com/heroku" target="_blank" title="Heroku's GitHub">GitHub</a></li>
         <li><a class="heroku-footer-icon-linkedin" href="https://www.linkedin.com/company/heroku" target="_blank" title="Heroku's LinkedIn">LinkedIn</a></li>
       </ul>

data/{lib/bookends/templates/rails_header.html.erb → app/views/bookends/_header.html.erb}

@@ -10,7 +10,7 @@
 
     <div class="wrapper-full">
       <div id="logo">
-        <a href="https://www.heroku.com/home">Heroku</a>
+        <a href="<%= Bookends::Config.logo_link %>">Heroku</a>
       </div>
       <div class="nav-wrapper">
         <ul class="main-nav">
@@ -20,7 +20,6 @@
               <li><a class="bookends-icon platform" href="https://www.heroku.com/platform">Heroku Platform</a></li>
               <li><a class="bookends-icon postgres" href="https://www.heroku.com/postgres">Heroku Postgres</a></li>
               <li><a class="bookends-icon redis" href="https://www.heroku.com/redis">Heroku Redis</a></li>
-              <li><a class="bookends-icon kafka" href="https://www.heroku.com/kafka">Kafka on Heroku</a></li>
               <li><a class="bookends-icon connect" href="https://www.heroku.com/connect">Heroku Connect</a></li>
               <li><a class="bookends-icon enterprise" href="https://www.heroku.com/enterprise">Heroku Enterprise</a></li>
               <li><a class="bookends-icon teams" href="https://www.heroku.com/teams">Heroku Teams</a></li>