Add basic version picker

content/css/docs.css

@@ -269,6 +269,11 @@ footer {
   width: 100%;
 }
 
+.side-nav div {
+  padding: 10px 15px;
+  background-color: #eee;
+}
+
 .side-nav .nav-header {
   display: block;
   margin: 20px auto 15px auto;

lib/data_sources/repo_docs.rb

+# TODO(ts): Rewrite data source and use one single instance to combine all
+# different versions for a given path.
 class RepoDocsDataSource < ::Nanoc::DataSources::FilesystemUnified
   identifier :repo_docs
 
@@ -23,6 +25,9 @@ class RepoDocsDataSource < ::Nanoc::DataSources::FilesystemUnified
     c = config.fetch(:config)
     super.map do |item|
       item[:repo_docs] = c
+      item[:repo_docs][:items_root] = config.fetch(:items_root)
+      # TODO(ts): Remove assumptions about the path layout, rewrite datasource.
+      item[:repo_docs][:version_root] = config.fetch(:items_root).sub(%r{(.+/)[^/]+/\Z}, '\\1')
       # TODO(ts): Document that repo doc index.md will be ignored.
       if item.identifier == '/'
         item[:nav] = { strip: true }

lib/helpers/nav.rb

@@ -11,11 +11,13 @@ def nav(root_item, buffer='', layer=0)
     return buffer
   end
 
+  classes = []
   if nav_active?(root_item)
-    buffer << "<li class=\"active #{"current" unless children.any?}\">"
-  else
-    buffer << "<li>"
+    classes << 'active'
+    classes << 'current' unless children.any?
   end
+  classes << 'hidden' if hidden?(root_item)
+  buffer << (classes.any? ? %(<li class="#{classes.join(' ')}">) : '<li>')
 
   title = nav_title_of(root_item)
   if children.any?
@@ -29,7 +31,13 @@ def nav(root_item, buffer='', layer=0)
   end
 
   if children.any?
-    buffer << %(<ul class="nav #{nav_active?(root_item) ? 'active' : ''}">)
+    active = nav_active?(root_item)
+    # TODO(ts): Remove the need to check for the layer.
+    if layer == 0 && children.any? { |i| Versioned.versioned?(i) }
+      buffer << Versioned.picker(children, @item_rep, active)
+    end
+
+    buffer << %(<ul class="nav #{active ? 'active' : ''}">)
 
     children.each do |child|
       nav(child, buffer, layer + 1)
@@ -56,3 +64,49 @@ def nav_children(item)
     .select { |child| !child[:is_hidden] && child.path }
     .sort_by { |child| child[:sort_rank] || 0 }
 end
+
+# hidden? returns true if the item is not part of the currently selected group.
+def hidden?(item)
+  Versioned.versioned?(item) && !Versioned.current?(item[:repo_docs], @item_rep)
+end
+
+# Versioned repository docs related functions.
+# TODO: Refactor and clean up all this code.
+module Versioned
+  def self.versioned?(item)
+    !item[:repo_docs].nil?
+  end
+
+  # latest? returns true if the item is part of the version group "latest".
+  def self.latest?(opts)
+    opts[:name].include?('latest')
+  end
+
+  # current? returns true if the item is part of the selected version group. If
+  # no group is selected (e.g. when a page outside of the versioned docs is
+  # viewed), the latest version will be shown.
+  def self.current?(opts, page)
+    return false if opts.nil? || !page.respond_to?(:path)
+
+    if page.path.start_with?(opts[:version_root])
+      page.path.start_with?(opts[:items_root])
+    else
+      latest?(opts)
+    end
+  end
+
+  # picker returns the HTML code for a version select box.
+  def self.picker(items, page, active)
+    versions = items.map { |i| i[:repo_docs] }.uniq
+    options = versions.map do |v|
+      selected = current?(v, page) ? 'selected="selected"' : ''
+      # TODO(ts): Refactor and think about linking directly to the page of the same version.
+      first = items
+        .find { |i| i.path.start_with?(v[:items_root]) }
+        .children.sort_by { |c| c[:sort_rank] }.first
+      %(<option value="#{first.path}" #{selected}>#{v[:name]}</option>)
+    end
+    classes = active ? 'active' : ''
+    return %(<div class="#{classes}">Version: <select>#{options.join('')}</select></div>)
+  end
+end

nanoc.yaml

@@ -61,13 +61,27 @@ data_sources:
     # The encoding to use for input files. If your input files are not in
     # UTF-8 (which they should be!), change this.
     encoding: utf-8
+  -
+    type: repo_docs
+    items_root: /docs/prometheus/2.0/
+    config:
+      name: '2.0-rc.3'
+      repository: https://github.com/prometheus/prometheus.git
+      refspec: master
   -
     type: repo_docs
     items_root: /docs/prometheus/latest/
+    config:
+      name: 'latest (1.8)'
+      repository: https://github.com/prometheus/prometheus.git
+      refspec: release-1.8
+  -
+    type: repo_docs
+    items_root: /docs/prometheus/1.8/
     config:
       name: '1.8'
       repository: https://github.com/prometheus/prometheus.git
-      refspec: docs
+      refspec: release-1.8
   -
     type: static
     items_root: /assets/

static/docs.js

 // Use CSS to hide elements without a delay during page load.
 $('head').append('<style type="text/css"> \
-  .side-nav ul { display: none; } \
-  .side-nav ul.active { display: block; } \
+  .side-nav ul, .side-nav div { display: none; } \
+  .side-nav ul.active, .side-nav div.active { display: block; } \
 </style>');
 
 $(document).ready(function() {
@@ -9,9 +9,9 @@ $(document).ready(function() {
     event.preventDefault();
 
     var visible = $(this).closest('li').children('ul.nav').is(':visible');
-    $(this).closest('ul').find('ul.nav').slideUp(200);
+    $(this).closest('ul').find('ul.nav, div').slideUp(200);
     if (!visible) {
-      $(this).closest('li').children('ul.nav').slideDown(200);
+      $(this).closest('li').children('ul.nav, div').slideDown(200);
     }
   };
 
@@ -20,6 +20,10 @@ $(document).ready(function() {
     $(this).replaceWith(link);
   });
 
+  $(".side-nav select").change(function() {
+    window.location.href = $(this).val();
+  });
+
   var selected = function(value, want, group) {
     switch(want) {
     case 'all':