added product selector, updated search placeholder

assets/js/content-interactions.js

@@ -88,6 +88,7 @@ $(".truncate-toggle").click(function(e) {
 })
 
 ////////////////////////////// Expand Accordians ///////////////////////////////
+
 $('.expand-label').click(function() {
   $(this).children('.expand-toggle').toggleClass('open')
   $(this).next('.expand-content').slideToggle(200)

assets/js/version-selector.js

@@ -1,11 +1,11 @@
 // Expand the menu on click
-$(".version-selector").click(function () {
+$(".dropdown").click(function () {
   $(this).toggleClass("open")
 })
 
 //  Close the version dropdown by clicking anywhere else
 $(document).click(function(e) {
-  if ( $(e.target).closest('.version-selector').length === 0 ) {
+  if ( $(e.target).closest('.dropdown').length === 0 ) {
-    $(".version-selector").removeClass("open");
+    $(".dropdown").removeClass("open");
   }
 });

assets/styles/layouts/_top-nav.scss

@@ -35,19 +35,27 @@
     }
   }
 
-  .version-selector {
+  .selector-dropdowns {
-  display: inline-block;
+    display: flex;
     position: absolute;
     z-index: 100;
     right: 5.5rem;
+    transition: right .2s;
+  }
+
+  .dropdown {
+  display: inline-block;
+  position: relative;
+  align-self: flex-start;
+  margin-left: .5rem;
   color: $g20-white;
   height: 2rem;
   @include gradient($version-selector-gradient);
+  background-attachment: local;
   font-weight: $medium;
   border-radius: $radius;
   overflow: hidden;
   cursor: pointer;
-  transition: right .2s;
 
     .selected {
       padding: 0 1.75rem 0 .75rem;
@@ -70,7 +78,7 @@
       }
     }
 
-    ul.version-list {
+    ul.item-list {
       padding: 0;
       margin: 0;
       list-style: none;

assets/styles/sidebar-closed.scss

@@ -26,7 +26,7 @@
   #search-btn {
     opacity: 1;
   }
-  .version-selector {
+  .selector-dropdowns {
     right: 7.5rem;
   }
 }
@@ -51,7 +51,7 @@
     #search-btn {
       opacity: 0;
     }
-    .version-selector {
+    .selector-dropdowns {
       right: 3.5rem;
     }
   }

assets/styles/sidebar-open.scss

@@ -12,4 +12,5 @@
 
 #search-btn {
   opacity: 0;
+  display: none;
 }

data/products.yml

@@ -1,7 +1,12 @@
 influxdb:
   name: InfluxDB
+  altname: InfluxDB Cloud & OSS
+  namespace: influxdb
+  list_order: 1
   versions: [v1.3, v1.4, v1.5, v1.6, v1.7, v1.8, v2.0]
-  stable: v2.0
+  latest: v2.0
+
+  # Used in cloud-name and cloud-link shortcodes
   cloud:
     name: "InfluxDB Cloud 2.0"
     shortname: "InfluxDB Cloud"
@@ -9,20 +14,28 @@ influxdb:
 
 telegraf:
   name: Telegraf
+  namespace: telegraf
+  list_order: 2
   versions: [v1.9, v1.10, v1.11, v1.12, v1.13, v1.14, v1.15]
-  stable: v1.15
+  latest: v1.15
 
 chronograf:
   name: Chronograf
+  namespace: chronograf
+  list_order: 3
   versions: [v1.6, v1.7, v1.8]
-  stable: v1.8
+  latest: v1.8
 
 kapacitor:
   name: Kapacitor
+  namespace: kapacitor
+  list_order: 4
   versions: [v1.4, v1.5]
-  stable: v1.5
+  latest: v1.5
 
 enterprise_influxdb:
   name: "InfluxDB Enterprise"
+  namespace: enterprise_influxdb
+  list_order: 5
   versions: [v1.3, v1.4, v1.5, v1.6, v1.7, v1.8]
-  stable: v1.8
+  latest: v1.8

layouts/_default/section.html

@@ -1,4 +1,4 @@
-{{ partial "header.html" . }}\
+{{ partial "header.html" . }}
 {{ partial "topnav.html" . }}
 
 <div class="page-wrapper">

layouts/partials/sidebar.html

@@ -1,9 +1,25 @@
 {{ $currentPage := . }}
 {{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
 {{ $product := index $productPathData 0 }}
-{{ $productName := (index .Site.Data.products $product).name }}
 {{ $currentVersion := index $productPathData 1 }}
-{{ $searchPlaceholder := cond (eq $product "influxdb") "InfluxDB 2.0 OSS, Cloud, & Flux" (print "Search " $productName " " $currentVersion) }}
+
+<!-- Search placeholder -->
+{{ $scratch := newScratch }}
+{{ $scratch.Set "searchPlaceholder" "Search"}}
+
+{{ if and (eq $currentVersion nil) (eq (len (findRE `v[1-2]\.` $currentVersion nil)) 0) }}
+  {{ $scratch.Set "searchPlaceholder" "Search the docs" }}
+{{ else if (eq $currentVersion nil) }}
+  {{ $scratch.Set "searchPlaceholder"  (print "Search " (index .Site.Data.products $product).name) }}
+{{ else if (and (eq $product "influxdb") (or (eq $currentVersion "v1.7") (eq $currentVersion "v1.8")) ) }}
+  {{ $scratch.Set "searchPlaceholder"  (print (index .Site.Data.products $product).name " " $currentVersion " & Flux") }}
+{{ else if (and (eq $product "influxdb") (in $currentVersion "v2") )}}
+  {{ $scratch.Set "searchPlaceholder"  (print "InfluxDB Cloud, OSS, & Flux") }}
+{{ else }}
+  {{ $scratch.Set "searchPlaceholder"  (print "Search " (index .Site.Data.products $product).name " " $currentVersion) }}
+{{ end }}
+
+{{ $searchPlaceholder := $scratch.Get "searchPlaceholder" }}
 
 <aside class="sidebar">
   <div class="sidebar-toggle" onclick="toggle_sidebar('sidebar-closed');return false;"><a href="#">&#59672;</a></div>
@@ -29,10 +45,10 @@
   {{ $mainMenu := (index .Site.Menus (print $product (replaceRE "[v.]" "_" $currentVersion))) }}
   {{ $refMenu := (index .Site.Menus (print $product (replaceRE "[v.]" "_" $currentVersion) "_ref")) }}
 
-  <!-- Main Section -->
+  <!-- Product Main Navigation -->
   {{ partial "sidebar/nested-menu" (dict "page" $currentPage "menu" $mainMenu) . }}
 
-  <!-- Reference Section -->
+  <!-- Product Reference Navigation -->
   {{ if gt (len $refMenu) 0 }}
     <h4 class="reference">Reference</h4>
     {{ partial "sidebar/nested-menu" (dict "page" $currentPage "menu" $refMenu) . }}

layouts/partials/topnav.html

@@ -5,7 +5,10 @@
     <a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">InfluxDB Docs</a>
   </div>
   <div class="topnav--right">
+    <div class="selector-dropdowns">      
+      {{ partial "topnav/product-selector.html" . }}
       {{ partial "topnav/version-selector.html" . }}
+    </div>
     <button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
     <button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
     <button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>

layouts/partials/topnav/product-selector.html

@@ -0,0 +1,20 @@
+{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
+{{ $product := index $productPathData 0 }}
+{{ $currentVersion := index $productPathData 1 }}
+
+<div class="dropdown">
+  {{ if (eq $product nil) }}
+    <p class="selected">Select a product</p>
+  {{ else if and (eq $product "influxdb") (in $currentVersion "v2")}}
+    <p class="selected">{{ (index .Site.Data.products $product).altname }}</p>
+  {{ else }}
+    <p class="selected">{{ (index .Site.Data.products $product).name }}</p>
+  {{ end }}
+  <ul class="item-list">
+    {{ range sort .Site.Data.products "list_order" "desc" }}
+      <li>
+        <a href="/{{ .namespace }}/{{ .latest }}" {{ if eq .namespace $product }}class="active"{{ end }}>{{ cond (ne .altname nil) .altname .name }}</a>
+      </li>
+    {{ end }}
+  </ul>
+</div>

layouts/partials/topnav/version-selector.html

@@ -0,0 +1,18 @@
+{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
+{{ $product := index $productPathData 0 }}
+{{ $currentVersion := index $productPathData 1 }}
+
+{{ if or (eq $product nil) (eq $currentVersion nil) }}
+{{ else }}
+<div class="dropdown">
+  <p class="selected">{{ $currentVersion }}</p>
+  <ul class="item-list">
+    <li><a href="https://github.com/influxdata/docs.influxdata.com" class="legacy" target="_blank">older</a></li>
+    {{ range (index .Site.Data.products $product).versions }}
+      <li>
+        <a href="/{{ $product }}/{{ . }}" {{ if eq . $currentVersion }}class="active"{{ end }}>{{ . }}</a>
+      </li>
+    {{ end }}
+  </ul>
+</div>
+{{ end }}

layouts/shortcodes/cloud-link.html

@@ -1 +1 @@
-{{- .Site.Data.products.cloud.link -}}
+{{- .Site.Data.products.influxdb.cloud.link -}}