website: downloads page

website/config.rb

@@ -1,3 +1,35 @@
+require "net/http"
+
+raise "BINTRAY_API_KEY must be set." if !ENV["BINTRAY_API_KEY"]
+raise "PACKER_VERSION must be set." if !ENV["PACKER_VERSION"]
+
+#-------------------------------------------------------------------------
+# Download the list of Packer downloads
+#-------------------------------------------------------------------------
+
+http = Net::HTTP.new("dl.bintray.com", 80)
+req = Net::HTTP::Get.new("/mitchellh/packer")
+req.basic_auth "mitchellh", ENV["BINTRAY_API_KEY"]
+response = http.request(req)
+
+$packer_files = {}
+response.body.split("\n").each do |line|
+  next if line !~ /\/mitchellh\/packer\/(#{ENV["PACKER_VERSION"]}.+?)\?/
+  filename = $1.to_s
+  os = filename.split("_")[1]
+
+  $packer_files[os] ||= []
+  $packer_files[os] << filename
+end
+
+$packer_files.each do |key, value|
+  value.sort!
+end
+
+#-------------------------------------------------------------------------
+# Configure Middleman
+#-------------------------------------------------------------------------
+
 set :css_dir, 'stylesheets'
 set :js_dir, 'javascripts'
 set :images_dir, 'images'
@@ -13,3 +45,36 @@ configure :build do
   activate :minify_html
   activate :minify_javascript
 end
+
+#-------------------------------------------------------------------------
+# Helpers
+#-------------------------------------------------------------------------
+helpers do
+  def download_arch(file)
+    file.split("_")[2].split(".")[0]
+  end
+
+  def download_os_human(os)
+    if os == "darwin"
+      return "Mac OS X"
+    elsif os == "freebsd"
+      return "FreeBSD"
+    elsif os == "openbsd"
+      return "OpenBSD"
+    elsif os == "Linux"
+      return "Linux"
+    elsif os == "windows"
+      return "Windows"
+    else
+      return os
+    end
+  end
+
+  def download_url(file)
+    "http://dl.bintray.com/mitchellh/packer/#{file}?direct"
+  end
+
+  def latest_version
+    ENV["PACKER_VERSION"]
+  end
+end

website/source/downloads.html.erb

@@ -0,0 +1,40 @@
+---
+page_title: "Downloads"
+---
+
+<header class="dark-background">
+<div class="container header text-center">
+	<h1 class="text-green">Downloads</h1>
+	<span class="text-green">Latest version: <%= latest_version %></span>
+</div>
+</header>
+
+<section class="downloads">
+<div class="container">
+	<div class="description row">
+		<div class="span8 offset2">
+			<p>
+			Below are all available downloads for the latest version of Packer
+			(<%= latest_version %>). Please download the proper package for your
+			operating system and architecture.
+			</p>
+		</div>
+	</div>
+	<% $packer_files.each do |os, files| %>
+		<div class="row">
+			<div class="span8 offset2 download">
+				<div class="icon pull-left"><img src="/images/icons/icon_<%= os %>.png"></div>
+				<div class="details">
+					<h2 class="os-name"><%= download_os_human(os) %></h2>
+					<ul>
+						<% files.each do |file| %>
+						<li><a href="<%= download_url(file) %>"><%= download_arch(file) %></a></li>
+						<% end %>
+					</ul>
+					<div class="clearfix"></div>
+				</div>
+			</div>
+		</div>
+	<% end %>
+</div>
+</section>

website/source/index.html.erb

@@ -14,8 +14,9 @@
 
 	<section class="belt download">
 	<div class="container">
+		<div class="row">
 		<div class="download-container">
-			<h2 class="uppercase"><a href="#">Download v0.1</a></h2>
+			<h2 class="uppercase"><a href="/downloads.html">Download v<%= latest_version %></a></h2>
 			<small class="uppercase mono">
 				<a href="#">
 					Release Notes
@@ -24,6 +25,7 @@
 				</a>
 			</small>
 		</div>
+		</div>
 	</div>
 	</section>
 

website/source/layouts/layout.erb

@@ -28,7 +28,7 @@
 					<a href="https://github.com/mitchellh/packer">
 						<button class="download pull-right primary">GitHub</button>
 					</a>
-					<a href="#">
+					<a href="/downloads.html">
 						<button class="download pull-right primary spaced">Download</button>
 					</a>
 					<a href="/" class="packer-logo pull-left">Packer</a>

website/source/stylesheets/_components.scss

@@ -1,3 +1,18 @@
+header .header {
+    height: 200px;
+    background: #000000;
+
+    h1 {
+        margin-bottom: -8px;
+        margin-top: 60px;
+        text-transform: uppercase;
+    }
+
+    span {
+        font-size: 20px;
+    }
+}
+
 .hero {
     height: $hero-height;
     background: #000000 url(/images/hero_image.jpg) no-repeat 35px -40px;
@@ -17,7 +32,6 @@
     .download-container {
         background: url(/images/down_arrow.png) no-repeat top left;
         min-height: 73px;
-        width: 320px;
         margin: 0 auto;
         padding-left: 100px;
     }
@@ -42,6 +56,59 @@
     }
 }
 
+.downloads {
+    margin-top: 20px;
+
+    .description {
+        margin-bottom: 20px;
+    }
+
+    .download {
+        border-bottom: 1px solid #b2b2b2;
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+
+        .details {
+            padding-left: 95px;
+
+            li {
+                display: inline-block;
+
+                &:after {
+                    content: " | ";
+                }
+
+                &:last-child:after {
+                    content: "";
+                }
+            }
+
+            a {
+                font-size: 22px;
+                color: darken($green, 15%);
+
+                &:hover {
+                    color: darken($green, 30%);
+                }
+
+                &:active {
+                    color: darken($green, 50%);
+                }
+            }
+        }
+
+        .icon {
+            img {
+                width: 75px;
+            }
+        }
+
+        .os-name {
+            font-size: 40px;
+            margin-bottom: -3px;
+        }
+    }
+}
 
 .marketting {
     p {