Docs cleanup

- Reformat .html / .erb files
- Remove extra </div> in index.html.erb
- Add htmlbeautifier gem
- Add middleman-breadcrumbs
- Add make format (calls htmlbeautifier)

website/Gemfile

@@ -3,3 +3,5 @@ source "https://rubygems.org"
 ruby "2.2.2"
 
 gem "middleman-hashicorp", github: "hashicorp/middleman-hashicorp"
+gem "middleman-breadcrumbs"
+gem "htmlbeautifier"
\ No newline at end of file

website/Gemfile.lock

@@ -69,6 +69,7 @@ GEM
     hitimes (1.2.2)
     hooks (0.4.0)
       uber (~> 0.0.4)
+    htmlbeautifier (1.1.0)
     htmlcompressor (0.2.0)
     http_parser.rb (0.6.0)
     i18n (0.7.0)
@@ -92,6 +93,8 @@ GEM
       middleman-sprockets (>= 3.1.2)
       sass (>= 3.4.0, < 4.0)
       uglifier (~> 2.5)
+    middleman-breadcrumbs (0.1.0)
+      middleman (>= 3.3.5)
     middleman-core (3.3.12)
       activesupport (~> 4.1.0)
       bundler (~> 1.1)
@@ -179,4 +182,6 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  htmlbeautifier
+  middleman-breadcrumbs
   middleman-hashicorp!

website/Makefile

@@ -8,3 +8,7 @@ dev: init
 
 build: init
 	PACKER_DISABLE_DOWNLOAD_FETCH=true PACKER_VERSION=1.0 bundle exec middleman build
+
+format:
+	bundle exec htmlbeautifier -t 2 source/*.erb
+	bundle exec htmlbeautifier -t 2 source/layouts/*.erb
\ No newline at end of file

website/README.md

@@ -21,3 +21,13 @@ make dev
 
 Then open up `localhost:4567`. Note that some URLs you may need to append
 ".html" to make them work (in the navigation and such).
+
+## Keeping Tidy
+
+To keep the source code nicely formatted, there is a `make format` target. This
+runs `htmlbeautify` and `pandoc` to reformat the source code so it's nicely formatted.
+
+    make format
+
+Note that you will need to install pandoc yourself. `make format` will skip it
+if you don't have it installed.
\ No newline at end of file

website/config.rb

@@ -4,6 +4,8 @@
 
 set :base_url, "https://www.packer.io/"
 
+activate :breadcrumbs
+
 activate :hashicorp do |h|
   h.version         = ENV["PACKER_VERSION"]
   h.bintray_enabled = ENV["BINTRAY_ENABLED"]

website/source/downloads.html.erb

@@ -3,33 +3,36 @@ page_title: "Downloads"
 ---
 
 <header class="dark-background">
-<div class="container header text-center">
+  <div class="container header text-center">
     <h1 class="text-green">Downloads</h1>
     <span class="text-green">Latest version: <%= latest_version %></span>
-</div>
+  </div>
 </header>
-
 <section class="downloads">
-<div class="container">
+  <div class="container">
     <div class="description row">
       <div class="col-md-8 col-md-offset-2">
         <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. You can find SHA256 checksums
-			for packages <a href="https://dl.bintray.com/mitchellh/packer/packer_<%= latest_version %>_SHA256SUMS?direct">here</a>.
+          Below are all available downloads for the latest version of Packer (
+          <%= latest_version %>). Please download the proper package for your operating system and architecture. You can find SHA256 checksums for packages <a href="https://dl.bintray.com/mitchellh/packer/packer_<%= latest_version %>_SHA256SUMS?direct">here</a>.
         </p>
       </div>
     </div>
     <% product_versions.each do |os, versions| %>
       <div class="row">
         <div class="col-md-8 col-md-offset-2 download">
-				<div class="icon pull-left"><%= system_icon(os) %></div>
+          <div class="icon pull-left">
+            <%= system_icon(os) %>
+          </div>
           <div class="details">
             <h2 class="os-name"><%= os %></h2>
             <ul>
               <% versions.each do |url| %>
-						<li><a href="<%= url %>"><%= arch_for_filename(url) %></a></li>
+                <li>
+                  <a href="<%= url %>">
+                    <%= arch_for_filename(url) %>
+                  </a>
+                </li>
               <% end %>
             </ul>
             <div class="clearfix"></div>
@@ -37,7 +40,6 @@ page_title: "Downloads"
         </div>
       </div>
     <% end %>
-
     <div class="row">
       <div class="col-md-8 col-md-offset-2 poweredby">
         <a href='http://www.bintray.com'>
@@ -45,5 +47,5 @@ page_title: "Downloads"
         </a>
       </div>
     </div>
-</div>
+  </div>
 </section>

website/source/index.html.erb

 ---
-description: |-
-  Packer is a free and open source tool for creating golden images for multiple platforms from a single source configuration.
+description: Packer is a free and open source tool for creating golden images
+  for multiple platforms from a single source configuration.
 ---
 
 <div class="home">
-
   <header class="dark-background">
     <div class="container hero">
       <div class="row">
@@ -16,7 +15,6 @@ description: |-
       </div>
     </div>
   </header>
-
   <section class="belt download">
     <div class="container">
       <div class="row download-row">
@@ -25,51 +23,36 @@ description: |-
         </div>
       </div>
     </div>
-	</div>
   </section>
-
   <section class="marketting padded-lg">
     <div class="container">
       <div class="row">
         <div class="col-md-6">
           <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %>
         </div>
-
         <div class="col-md-6">
           <h2 class="text-green text-center">Modern, Automated</h2>
           <p>
-				Packer is easy to use and automates the creation of any type
-				of machine image. It embraces modern configuration management by
-				encouraging you to use automated scripts to install and
-				configure the software within your Packer-made images.
-
-				Packer brings machine images into the modern age, unlocking
-				untapped potential and opening new opportunities.
+            Packer is easy to use and automates the creation of any type of machine image. It embraces modern configuration management by encouraging you to use automated scripts to install and configure the software within your Packer-made images. Packer brings machine images into the modern age, unlocking untapped potential and opening new opportunities.
         </p>
         </div>
       </div>
     </div>
   </section>
-
   <section class="marketting padded-lg">
     <div class="container">
       <div class="row">
         <div class="col-md-6">
           <h2 class="text-green text-center">Works Great With</h2>
           <p>
-					Out of the box Packer comes with support to build images for
-					Amazon EC2, DigitalOcean, Docker, Google Compute Engine, QEMU,
-					VirtualBox, VMware, and more. Support for
-					more platforms is on the way, and anyone can add new platforms
-					via plugins.
+            Out of the box Packer comes with support to build images for Amazon EC2, DigitalOcean, Docker, Google Compute Engine, QEMU, VirtualBox, VMware, and more. Support for more platforms is on the way, and anyone can add new platforms via plugins.
         </p>
         </div>
-
         <div class="col-md-6">
           <%= image_tag 'screenshots/works_with.png', class: 'img-responsive' %>
         </div>
       </div>
     </div>
   </section>
-
-</div> <!-- /.home -->
+</div>
+<!-- /.home -->

website/source/layouts/docs.erb

 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
     <h2>Docs</h2>
-
     <ul>
       <li><a href="/docs/installation.html">Installation</a></li>
       <li><a href="/docs/basics/terminology.html">Terminology</a></li>
     </ul>
-
     <ul>
-			<li><h4>Command-Line</h4></li>
+      <li>
+        <h4>Command-Line</h4>
+      </li>
       <li><a href="/docs/command-line/introduction.html">Introduction</a></li>
       <li><a href="/docs/command-line/build.html">Build</a></li>
       <li><a href="/docs/command-line/fix.html">Fix</a></li>
@@ -17,9 +17,10 @@
       <li><a href="/docs/command-line/validate.html">Validate</a></li>
       <li><a href="/docs/command-line/machine-readable.html">Machine-Readable Output</a></li>
     </ul>
-
     <ul>
-			<li><h4>Templates</h4></li>
+      <li>
+        <h4>Templates</h4>
+      </li>
       <li><a href="/docs/templates/introduction.html">Introduction</a></li>
       <li><a href="/docs/templates/builders.html">Builders</a></li>
       <li><a href="/docs/templates/provisioners.html">Provisioners</a></li>
@@ -30,9 +31,10 @@
       <li><a href="/docs/templates/user-variables.html">User Variables</a></li>
       <li><a href="/docs/templates/veewee-to-packer.html">Veewee-to-Packer</a></li>
     </ul>
-
     <ul>
-			<li><h4>Builders</h4></li>
+      <li>
+        <h4>Builders</h4>
+      </li>
       <li><a href="/docs/builders/amazon.html">Amazon EC2 (AMI)</a></li>
       <li><a href="/docs/builders/digitalocean.html">DigitalOcean</a></li>
       <li><a href="/docs/builders/docker.html">Docker</a></li>
@@ -45,9 +47,10 @@
       <li><a href="/docs/builders/vmware.html">VMware</a></li>
       <li><a href="/docs/builders/custom.html">Custom</a></li>
     </ul>
-
     <ul>
-			<li><h4>Provisioners</h4></li>
+      <li>
+        <h4>Provisioners</h4>
+      </li>
       <li><a href="/docs/provisioners/shell.html">Remote Shell</a></li>
       <li><a href="/docs/provisioners/shell-local.html">Local Shell</a></li>
       <li><a href="/docs/provisioners/file.html">File Uploads</a></li>
@@ -62,9 +65,10 @@
       <li><a href="/docs/provisioners/windows-restart.html">Windows Restart</a></li>
       <li><a href="/docs/provisioners/custom.html">Custom</a></li>
     </ul>
-
     <ul>
-			<li><h4>Post-Processors</h4></li>
+      <li>
+        <h4>Post-Processors</h4>
+      </li>
       <li><a href="/docs/post-processors/atlas.html">Atlas</a></li>
       <li><a href="/docs/post-processors/compress.html">compress</a></li>
       <li><a href="/docs/post-processors/docker-import.html">docker-import</a></li>
@@ -75,16 +79,18 @@
       <li><a href="/docs/post-processors/vagrant-cloud.html">Vagrant Cloud</a></li>
       <li><a href="/docs/post-processors/vsphere.html">vSphere</a></li>
     </ul>
-
     <ul>
-			<li><h4>Other</h4></li>
+      <li>
+        <h4>Other</h4>
+      </li>
       <li><a href="/docs/other/core-configuration.html">Core Configuration</a></li>
       <li><a href="/docs/other/debugging.html">Debugging</a></li>
       <li><a href="/docs/other/environmental-variables.html">Environmental Variables</a></li>
     </ul>
-
     <ul>
-			<li><h4>Extend Packer</h4></li>
+      <li>
+        <h4>Extend Packer</h4>
+      </li>
       <li><a href="/docs/extend/plugins.html">Packer Plugins</a></li>
       <li><a href="/docs/extend/developing-plugins.html">Developing Plugins</a></li>
       <li><a href="/docs/extend/builder.html">Custom Builder</a></li>

website/source/layouts/docs_machine_readable.erb

 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
     <h2>Docs</h2>
-
     <ul>
-			<li><h4>Machine-Readable Reference</h4></li>
+      <li>
+        <h4>Machine-Readable Reference</h4>
+      </li>
       <li><a href="/docs/index.html">&laquo; Back to Docs</a></li>
       <li><a href="/docs/machine-readable/general.html">General Types</a></li>
       <li><a href="/docs/machine-readable/command-build.html">Command: build</a></li>

website/source/layouts/inner.erb

 <% wrap_layout :layout do %>
-<div class="docs-wrapper">
+  <div class="docs-wrapper">
     <div class="row row-lg-height">
       <div class="sidebar col-sm-3 col-md-3 col-lg-height col-md-height col-sm-height">
         <%= yield_content :sidebar %>
@@ -8,7 +8,6 @@
         <div class="docs-content">
           <%= yield %>
         </div>
-
         <% if current_page.data.next_url %>
           <div class="pagination">
             <a class="previous-section" href="<%= current_page.data.prev_url %>"></a>
@@ -26,5 +25,5 @@
         <% end %>
       </div>
     </div>
-</div>
+  </div>
 <% end %>

website/source/layouts/intro.erb

 <% wrap_layout :inner do %>
   <% content_for :sidebar do %>
     <h2>Intro</h2>
-
     <ul>
-			<li><h4>About</h4></li>
+      <li>
+        <h4>About</h4>
+      </li>
       <li><a href="/intro/index.html">What is Packer?</a></li>
       <li><a href="/intro/why.html">Why Use Packer?</a></li>
       <li><a href="/intro/use-cases.html">Use Cases</a></li>
       <li><a href="/intro/platforms.html">Supported Platforms</a></li>
       <li><a href="/intro/hashicorp-ecosystem.html">Packer & the HashiCorp Ecosystem</a></li>
     </ul>
-
     <ul>
-			<li><h4>Getting Started</h4></li>
+      <li>
+        <h4>Getting Started</h4>
+      </li>
       <li><a href="/intro/getting-started/setup.html">Install Packer</a></li>
       <li><a href="/intro/getting-started/build-image.html">Build an Image</a></li>
       <li><a href="/intro/getting-started/provision.html">Provision</a></li>

website/source/layouts/layout.erb

 <!DOCTYPE html>
 <html>
   <head>
-		<title><%= [current_page.data.page_title, "Packer by HashiCorp"].compact.join(" - ") %></title>
+    <title>
+      <%= [current_page.data.page_title, "Packer by HashiCorp"].compact.join(" - ") %>
+    </title>
     <meta name="description" content="<%= current_page.data.description %>" />
-
     <%= stylesheet_link_tag "application" %>
-
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-    <link rel="shortcut icon" href="<%= image_path("favicon.ico") %>" type="image/x-icon">
-    <link rel="icon" href="<%= image_path("favicon.ico") %>" type="image/x-icon">
-
+    <link rel="shortcut icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
+    <link rel="icon" href="<%= image_path(" favicon.ico ") %>" type="image/x-icon">
     <script type="text/javascript" src="//use.typekit.net/apr3jjs.js"></script>
-		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+    <script type="text/javascript">
+      try {
+        Typekit.load();
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <nav class="dark-background">
@@ -40,11 +41,8 @@
         </div>
       </div>
     </nav>
-
     <%= yield %>
-
     <div class="clearfix"></div>
-
     <footer class="dark-background">
       <div class="container-fluid">
         <div class="row">
@@ -65,12 +63,18 @@
         </div>
       </div>
     </footer>
-
     <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      (function(i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        i[r] = i[r] || function() {
+          (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date();
+        a = s.createElement(o),
+          m = s.getElementsByTagName(o)[0];
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
       
       ga('create', 'UA-43075859-1', 'packer.io');
       ga('send', 'pageview');