Add download section

This adds a new download section to the page with list for all available
precompiled versions for officially maintained components. The release
information are fetched via the Github API and rendered as static list.

Currently only the latest release and the newest pre-release (if
available) are show. This could be extended later. In order to keep the
list usable besides the massive list of prebuilt binaries, a javascript
os/arch filter has been added, defaulting to popular versions.

The following changes have been made on the way:

* Ensure all pages have a footer.
* Remove duplicated jquery inclusion.
* Use CSS to define text case of jumbotron buttons.
* Add Download section to the header.
* Reduce Github link to just the logo to save space.
* Update Getting Started and Installing sections.

.gitignore

@@ -5,6 +5,7 @@ output/
 
 # Temporary file directory
 tmp/
+downloads/
 
 # Crash Log
 crash.log

Makefile

-compile:
-	rm -rf output
+DOWNLOADS := prometheus alertmanager blackbox_exporter haproxy_exporter mysqld_exporter node_exporter statsd_exporter
+
+clean:
+	rm -rf output downloads
+
+compile: clean downloads
 	bundle exec nanoc
 
 deploy: github_pages_export github_pages_push
 
+downloads: $(DOWNLOADS:%=downloads/%/repo.json) $(DOWNLOADS:%=downloads/%/releases.json)
+
+downloads/%/repo.json:
+	mkdir -p $(dir $@)
+	curl -sf -H 'Accept: application/vnd.github.v3+json' https://api.github.com/repos/prometheus/$* > $@
+
+downloads/%/releases.json:
+	mkdir -p $(dir $@)
+	curl -sf -H 'Accept: application/vnd.github.v3+json' https://api.github.com/repos/prometheus/$*/releases > $@
+
 github_pages_export: compile
 	cd output && \
 	echo prometheus.io > CNAME && \

content/community.html

 ---
 title: Community
 ---
-<div class="col-md-8 col-md-offset-2 doc-content">
+<div class="row">
+  <div class="col-md-12 doc-content">
     <h1>Community</h1>
     <p>
       Prometheus is developed in the open. Here are some of the channels we use
@@ -56,4 +57,5 @@ title: Community
     <p>
       The Prometheus logo was contributed by <a href="http://www.makingstuffmove.com/">Robin Greenwood</a>.
     </p>
+  </div>
 </div>

content/css/docs.css

@@ -76,7 +76,8 @@ body {
   background-color: rgba(0,0,0,0.15);
   color: #fff;
   padding: 20px 25px 20px 25px;
-  margin-top: 15px;
+  margin: 15px 10px 0 10px;
+  text-transform: uppercase;
 }
 
 .jumbotron a.btn:hover {
@@ -188,6 +189,24 @@ footer {
   color: #333;
 }
 
+/* Downloads related styles. */
+.download h2 {
+  margin-top: 2em;
+}
+
+.download-selection {
+  clear: both;
+}
+
+.download-selection .btn-group {
+  padding-right: 1em;
+}
+
+.downloads .checksum {
+  color: #aaa;
+  font-style: italic;
+}
+
 /* Docs-related styles. */
 .side-nav-col {
   z-index: 100;

content/docs/introduction/getting_started.md

@@ -13,8 +13,8 @@ series data.
 
 ## Downloading and running Prometheus
 
-[Download the latest release](https://github.com/prometheus/prometheus/releases)
-of Prometheus for your platform, then extract and run it:
+[Download the latest release](/download) of Prometheus for your platform, then
+extract and run it:
 
 ```
 tar xvfz prometheus-*.tar.gz

content/docs/introduction/install.md

@@ -7,35 +7,28 @@ sort_rank: 2
 
 ## Using pre-compiled binaries
 
-We provide precompiled binaries for released versions for most Prometheus
-components. These may be found under the "Releases" tab of the respective
-GitHub repositories. For example, for the main Prometheus server, binary
-releases are available at
-[https://github.com/prometheus/prometheus/releases](https://github.com/prometheus/prometheus/releases).
-
-Debian and RPM packages are being worked on.
+We provide precompiled binaries for most official Prometheus components.
+Check out the [download section](/download) for a list of all available
+versions.
 
 ## From source
 
-For building Prometheus from source, see the relevant [`README.md`
-section](https://github.com/prometheus/prometheus/blob/master/README.md#use-make).
+For building Prometheus components from source, see the `Makefile` targets in
+the respective repository.
 
-Note that this documentation (as published on
-[prometheus.io](https://prometheus.io)) refers to the latest production
-release. The head of the
-[prometheus/docs](https://github.com/prometheus/docs) GitHub
-repository refers to the (possibly not yet released) head of the
-[prometheus/prometheus](https://github.com/prometheus/prometheus) (and
-other) repositories.
+NOTE: **Note:** The documentation on this website refers to the latest stable
+release (excluding pre-releases). The branch
+[next-release](https://github.com/prometheus/docs/compare/next-release) refers
+to unreleased changes that are in master branches of source repos.
 
 ## Using Docker
 
 All Prometheus services are available as Docker images under the
 [prom](https://hub.docker.com/u/prom/) organization.
 
-Running Prometheus on Docker is as simple as
- `docker run -p 9090:9090 prom/prometheus`. This starts Prometheus with
-a sample configuration and exposes it on port 9090.
+Running Prometheus on Docker is as simple as `docker run -p 9090:9090
+prom/prometheus`. This starts Prometheus with a sample configuration and
+exposes it on port 9090.
 
 The Prometheus image uses a volume to store the actual metrics. For
 production deployments it is highly recommended to use the

content/download.html

+---
+title: Download
+---
+<div class="row">
+  <div class="col-md-12 doc-content download">
+    <h1>Download</h1>
+
+    <div class="toc toc-right">
+      <ul>
+      <% Downloads.repositories.each do |repo| %>
+        <li><a href="#<%= repo.name %>"><%= repo.name %></a></li>
+      <% end %>
+      </ul>
+    </div>
+
+    <p>
+      We provide precompiled binaries and Docker images for most officially
+      maintained Prometheus components. If a component isn't listed here, check
+      the respective repository on Github for further instructions.
+    </p>
+    <p>
+      There is also a constantly growing number of independently maintained
+      exporters listed at <a href="/docs/instrumenting/exporters/">Exporters
+      and third-party integrations</a>.
+    </p>
+    <p>
+      After downloading a binary release suitable for your system, please follow
+      the <a href="/docs/introduction/getting_started/">installation instructions</a>.
+    </p>
+
+    <div class="alert alert-info" role="alert">
+      <strong>Work in progress!</strong>
+      We will provide more precompiled binary versions as well as checksums soon.
+    </div>
+
+    <div class="panel panel-default download-selection">
+      <div class="panel-body">
+        Operating system <%= dropdown(:os, Downloads.operating_systems) %>
+        Architecture <%= dropdown(:arch, Downloads.architectures) %>
+      </div>
+    </div>
+
+    <% Downloads.repositories.each do |repository| %>
+    <h2 id="<%= repository.name %>"><%= repository.name %></h2>
+    <p><%= repository.description %> <a href="<%= repository.url %>"><i class="fa fa-github"></i> <%= repository.full_name %></a></p>
+
+    <table class="table table-bordered downloads">
+    <% repository.releases.each do |release| %>
+      <thead>
+        <tr>
+          <th colspan="5">
+            <%= release.name %>
+            <%= %(<span class="label label-primary">Pre-release</span>) if release.prerelease %>
+            <small><a href="<%= release.url %>">Release notes</a></small>
+          </th>
+        </tr>
+        <tr class="first">
+          <th>File name</th>
+          <th>OS</th>
+          <th>Arch</th>
+          <th>Size</th>
+          <th>SHA256 Checksum</th>
+        </tr>
+      </thead>
+      <tbody>
+      <% release.assets.each do |asset| %>
+        <tr data-os="<%= asset.os %>" data-arch="<%= asset.arch %>">
+          <td class="filename"><a class="download" href="<%= asset.url %>"><%= asset.name %></a></td>
+          <td><%= asset.os %></td>
+          <td><%= asset.arch %></td>
+          <td><%= format_bytes asset.size %></td>
+          <td class="checksum">not available yet</td>
+        </tr>
+      <% end %>
+      </tbody>
+    <% end %>
+    </table>
+    <% end %>
+  </div>
+</div>

content/index.html

@@ -6,7 +6,8 @@ layout: jumbotron
     <h1>From metrics to insight</h1>
     <p class="subtitle">Power your metrics and alerting with a leading<br>open-source monitoring solution.</p>
     <p>
-      <a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">GET STARTED</a>
+      <a class="btn btn-default btn-lg" href="/docs/introduction/getting_started/" role="button">Get Started</a>
+      <a class="btn btn-default btn-lg" href="/download" role="button">Download</a>
     </p>
   </div>
 </div>

layouts/default.html

@@ -2,6 +2,7 @@
 
 <div class="container">
   <%= yield %>
+  <%= render 'container_footer' %>
 </div>
 
 <%= render 'footer' %>

layouts/footer.html

     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
     <script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script>
+    <script src="/assets/docs.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="/assets/ie10-viewport-bug-workaround.js"></script>
     <!-- Google Analytics -->

layouts/header.html

@@ -47,8 +47,6 @@
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400' rel='stylesheet' type='text/css'>
 
-    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
-    <script src="/assets/docs.js"></script>
   </head>
 
   <body>
@@ -68,9 +66,11 @@
         <div class="collapse navbar-collapse" id="navbar">
           <ul class="nav navbar-nav navbar-right main-nav">
             <li><a href="/docs/introduction/overview/">Docs</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/community/">Community</a></li>
             <li><a href="/blog/">Blog</a></li>
-            <li><a href="https://github.com/prometheus"><i class="fa fa-github"></i> Github</a></li>
+            <li><a href="https://github.com/prometheus"><i class="fa fa-github"></i></a></li>
+            <li><a href="https://twitter.com/PrometheusIO"><i class="fa fa-twitter"></i></a></li>
           </ul>
         </div>
       </div>

lib/default.rb

@@ -23,5 +23,22 @@ module BlogHelper
     return content
   end
 end
-
 include BlogHelper
+
+module DownloadHelper
+  def format_bytes(bytes)
+    '%.2f MiB' % (bytes.to_f / 1024 / 1024)
+  end
+
+  def dropdown(name, items)
+    caption = %(<span class="caption">all</span> <span class="caret"></span>)
+    button = %(<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">#{caption}</button>)
+    default = %(<li><a href="#">all</a></li><li><a href="#">popular</a></li><li role="separator" class="divider"></li>)
+    list = %(<ul class="dropdown-menu">#{default} #{items.map { |i| %(<li><a href="#">#{i}</a></li>) }.join('') }</ul>)
+
+    %(<div class="btn-group #{name}">#{button} #{list}</div>)
+  end
+end
+include DownloadHelper
+
+

lib/helpers/download.rb

+require 'json'
+
+module Downloads
+  # repositories returns a list of all repositories with releases.
+  def self.repositories
+    @repositories ||= begin
+      repos = Dir.glob('downloads/*').map { |dir| Repository.new(dir) }
+      repos.sort_by { |r| r.name == 'prometheus' ? '0' : r.name }
+    end
+  end
+
+  # operating_systems returns a list of all operating systems downloads can be
+  # provided for.
+  def self.operating_systems
+    repositories.inject([]) do |list, repo|
+      list += repo.releases.map { |r| r.assets.map(&:os) }.flatten
+    end.uniq.sort
+  end
+
+  # architectures returns a list of all architectures downloads can be
+  # provided for.
+  def self.architectures
+    repositories.inject([]) do |list, repo|
+      list += repo.releases.map { |r| r.assets.map(&:arch) }.flatten
+    end.uniq.sort
+  end
+
+  class Repository
+    def initialize(dir)
+      @repo = JSON.parse(File.read(File.join(dir, 'repo.json')))
+      @releases = JSON.parse(File.read(File.join(dir, 'releases.json')))
+    end
+
+    def name
+      @repo['name']
+    end
+
+    def full_name
+      @repo['full_name']
+    end
+
+    def description
+      @repo['description']
+    end
+
+    def url
+      @repo['html_url']
+    end
+
+    def releases
+      releases = []
+      @releases.each do |r|
+        if r['prerelease']
+          releases << r if releases.empty?
+        else
+          releases << r
+          break
+        end
+      end
+      releases.map { |r| Release.new(r) }
+    end
+  end
+
+  class Release
+    def initialize(data)
+      @data = data
+    end
+
+    def name
+      @data['name']
+    end
+
+    def url
+      @data['html_url']
+    end
+
+    def prerelease
+      @data['prerelease']
+    end
+
+    def assets
+      @data['assets'].map { |d| Asset.new(d) }
+    end
+  end
+
+  class Asset
+    def initialize(data)
+      @data = data
+    end
+
+    def name
+      @data['name']
+    end
+
+    def url
+      @data['url']
+    end
+
+    def kind
+      'Binary'
+    end
+
+    # TODO(ts): validate
+    def os
+      name.split('.')[3].split('-').first
+    end
+
+    # TODO(ts): validate
+    def arch
+      name.split('.')[3].split('-').last
+    end
+
+    def size
+      @data['size']
+    end
+  end
+end

static/docs.js

@@ -19,4 +19,38 @@ $(document).ready(function() {
     var link = $('<a href="#">').text($(this).text()).click(navToggle);
     $(this).replaceWith(link);
   });
+
+  var selected = function(value, want, popular) {
+    switch(want) {
+    case 'all':
+      return true;
+    case 'popular':
+      return popular.indexOf(value) > -1;
+    default:
+      return value === want;
+    }
+  }
+  var selectDownloads = function() {
+    var os = $('.download-selection .os .caption').text();
+    var arch = $('.download-selection .arch .caption').text();
+
+    $('.downloads tbody tr').each(function() {
+      if (selected($(this).data('os').toString(), os, ['darwin', 'linux'])
+          && selected($(this).data('arch').toString(), arch, ['386', 'amd64'])) {
+        $(this).show();
+      } else {
+        $(this).hide();
+      }
+    });
+  };
+
+  $('.download-selection button .caption').text('popular');
+  selectDownloads();
+
+  $('.download-selection a').on('click', function() {
+    event.preventDefault();
+
+    $(this).parents('.btn-group').find('button .caption').text($(this).text());
+    selectDownloads();
+  });
 });