docs: add language switcher directive + add Ruby

fixes googleapis#557
fixes googleapis#558

docs/index.html

@@ -38,6 +38,7 @@
     <script src="site/components/docs/docs-values.js"></script>
     <script src="site/components/authorization/authorization.js"></script>
     <script src="site/components/faq/faq.js"></script>
+    <script src="site/components/language-switcher/language-switcher-directive.js"></script>
     <script src="site/components/subpage/subpage-directive.js"></script>
     <script src="site/components/header/header-directive.js"></script>
     <script src="site/components/troubleshooting/troubleshooting.js"></script>

docs/site/components/language-switcher/language-switcher-directive.js

@@ -0,0 +1,14 @@
+angular
+  .module('gcloud.language-switcher', [])
+  .directive('languageSwitcher', function() {
+    'use strict';
+
+    return {
+      templateUrl: 'site/components/language-switcher/language-switcher.html',
+      transclude: true,
+
+      controller: function($scope) {
+        $scope.showNavDropdown = false;
+      }
+    };
+  });

docs/site/components/language-switcher/language-switcher.html

@@ -0,0 +1,23 @@
+<nav class="main-nav" ng-class="{ open: showNavDropdown }">
+  <div class="nav-current" ng-click="showNavDropdown = !showNavDropdown">Node.js</div>
+  <ul class="menu">
+    <li>
+      <a href="#" title="gcloud-node Documentation">
+        <img src="site/img/icon-lang-nodejs-white.svg" alt="gcloud-node" class="menu-icon">
+        Node.js
+      </a>
+    </li>
+    <li>
+      <a href="https://googlecloudplatform.github.io/gcloud-python" title="gcloud-python Documentation">
+        <img src="site/img/icon-lang-python.svg" alt="gcloud-python" class="menu-icon">
+        Pythons
+      </a>
+    </li>
+    <li>
+      <a href="https://googlecloudplatform.github.io/gcloud-ruby" title="gcloud-ruby Documentation">
+        <img src="site/img/icon-lang-ruby.svg" alt="gcloud-ruby" class="menu-icon">
+        Ruby
+      </a>
+    </li>
+  </ul>
+</nav>

docs/site/components/subpage/subpage.html

@@ -6,23 +6,7 @@ <h1 class="logo">
         <span class="gcloud">gcloud</span>
       </a>
     </h1>
-    <nav class="main-nav" ng-class="{ open: showNavDropdown }">
-      <div class="nav-current" ng-click="showNavDropdown = !showNavDropdown">Node.js</div>
-      <ul class="menu">
-        <li>
-          <a href="#" title="Node.js docs page">
-            <img src="site/img/icon-lang-nodejs-white.svg" alt="Node.js icon" class="menu-icon">
-            Node.js
-          </a>
-        </li>
-        <li>
-          <a href="https://googlecloudplatform.github.io/gcloud-python" title="Python docs page">
-            <img src="site/img/icon-lang-python.svg" alt="Python icon" class="menu-icon">
-            Python
-          </a>
-        </li>
-      </ul>
-    </nav>
+    <div language-switcher></div>
   </header>
 
   <header ng-if="headerTemplateUrl" ng-include="headerTemplateUrl"></header>

docs/site/home.html

@@ -1,5 +1,6 @@
 <header class="page-header" role="banner">
   <h1 class="logo"><img src="site/img/logo-full.svg" alt="Google Cloud Platform" /></h1>
+  <div language-switcher></div>
 </header><!-- end of .page-header -->
 
 <article class="main" role="main">

docs/site/home.js

@@ -4,6 +4,7 @@ angular
     'gcloud.authorization',
     'gcloud.docs',
     'gcloud.faq',
+    'gcloud.language-switcher',
     'gcloud.troubleshooting',
     'config',
     'hljs'
@@ -20,7 +21,7 @@ angular
       controller: 'HomeCtrl'
     });
   })
-  .controller('HomeCtrl', function() {
+  .controller('HomeCtrl', function($scope) {
     'use strict';
   })
   .run(function($rootScope, $location, versions) {