Merge pull request #44 from Polymer/prettify-docs-nav

prettify the docs nav

app/1.0/nav.yaml

@@ -48,7 +48,6 @@
   - title: Declare properties
     path: /1.0/devguide/properties
     indent: True
-  - spacer: True
   - header: Local DOM & styling
   - title: Local DOM
     path: /1.0/devguide/local-dom
@@ -88,14 +87,16 @@
 - section: SPöRK
   path: spork
   items:
+  - title: What is a SPöRK?
+    path: /1.0/spork/index
   - title: Röck and Röll mit SPöRK
     path: /1.0/spork/getstarted
 
 - section: tools
   path: tools
   items:
   - title: Tools overview
-    path: /1.0/tools/overview
+    path: /1.0/tools/index
   - title: Document your elements
     path: /1.0/tools/documentation
   - title: Test your elements

app/1.0/spork/getstarted.md

@@ -3,4 +3,4 @@ title: Röck und röll mit SPöRK
 link: getstarted
 ---
 
-SPöRK. It's better than bad—it's good.
+This is another amazing page full of content.

app/1.0/spork/index.md

@@ -0,0 +1,6 @@
+---
+title: What is a SPöRK?
+link: index
+---
+
+SPöRK. It's better than bad—it's good.

app/1.0/start/first-element/intro.md

@@ -1,6 +1,6 @@
 ---
 title: Build your first Polymer element
-link: intro
+link: first-element/intro
 ---
 
 <!-- toc -->
@@ -9,7 +9,7 @@ In this tutorial, you’ll learn how to build elements using Polymer 1.0. You'll
 create a simple Polymer element, a toggle button. The finished button will look
 something like this:
 
-![Sample star-shaped toggle buttons, showing pressed and unpressed 
+![Sample star-shaped toggle buttons, showing pressed and unpressed
 state](/images/1.0/first-element/sample-toggles.png)
 
 You'll be able to use it with simple markup like this:

app/1.0/start/first-element/step-2.md

@@ -1,6 +1,6 @@
 ---
 title: "Step 2: Add Local DOM"
-link: step-2
+link: first-element/step-2
 ---
 
 Next, you'll create a simple element that displays an icon.
@@ -243,5 +243,5 @@ sure you're clicking on the demo folder or on demo/index.html.
 { .alert .alert-info }
 
 <a class="blue-button" href="intro">Previous step: Intro</a>
-<a class="blue-button" 
+<a class="blue-button"
     href="step-3">Next step: Use data binding and properties</a>

app/1.0/start/first-element/step-3.md

@@ -1,6 +1,6 @@
 ---
 title: "Step 3: Use data binding and properties"
-link: step-3
+link: first-element/step-3
 ---
 
 Right now, the element doesn't do much. In this step, you'll give it a basic

app/1.0/start/first-element/step-4.md

@@ -1,9 +1,6 @@
 ---
-layout: default
-type: start
-shortname: Start
 title: "Step 4: React to input"
-subtitle: Build your first Polymer element
+link: first-element/step-4
 ---
 
 Of course, a button isn't a button if you can't click it. To toggle the button,

app/1.0/start/first-element/step-5.md

@@ -1,6 +1,6 @@
 ---
 title: "Step 5: Theming with custom CSS properties"
-link: step-5
+link: first-element/step-5
 ---
 
 You now have a button that's basically functional. But it's stuck using the

app/1.0/start/psk/create-a-page.md

@@ -1,6 +1,6 @@
 ---
 title: Create a new page
-link: create-a-page
+link: psk/create-a-page
 ---
 
 <!-- toc -->
@@ -11,7 +11,7 @@ This Polymer Starter Kit tutorial teaches you how to:
 *   Create content for a new page.
 *   Route traffic to your new page.
 
-This tutorial assumes you have already completed the 
+This tutorial assumes you have already completed the
 [Set up tutorial](set-up.html).
 
 ## Serve the app locally
@@ -31,7 +31,7 @@ automatically. There is no need to re-load the browser or the application.
 
 1.  Open `app/index.html` in a text editor.
 
-1.  Find the navigation menu. 
+1.  Find the navigation menu.
 
 ```
 ...
@@ -44,12 +44,12 @@ automatically. There is no need to re-load the browser or the application.
 ...
 ```
 
-Each navigation menu item consists of an anchor element (`<a>`) with two 
+Each navigation menu item consists of an anchor element (`<a>`) with two
 children: `<iron-icon>` and `<span>`.
 
-*   `<iron-icon>` displays a single icon. 
+*   `<iron-icon>` displays a single icon.
 *   `<span>` displays the text next to the icon.
-   
+
 1.  Add the following new navigation item to the bottom of the menu.
 
 ```
@@ -83,14 +83,14 @@ Your menu should now look like the following:
 ```
 
 If you view the app now, you should see your new item in the navigation
-menu, but the link does not point to a valid page yet. 
+menu, but the link does not point to a valid page yet.
 
 ## Add content
 
-In the previous section you added a navigation menu item to enable the 
+In the previous section you added a navigation menu item to enable the
 user to navigate to a new page. Now, you add the content for that new page.
 
-1.  Open `app/index.html` in a text editor and find the main content. 
+1.  Open `app/index.html` in a text editor and find the main content.
 
 ```
 <div class="content">
@@ -119,17 +119,17 @@ user to navigate to a new page. Now, you add the content for that new page.
     ...
 ```
 
-*   The PSK's design pattern for structuring pages is to make each page a 
-    `<section>` element. The `<iron-pages>` element controls which page is 
+*   The PSK's design pattern for structuring pages is to make each page a
+    `<section>` element. The `<iron-pages>` element controls which page is
     displayed at any given time.
-*   The `data-route` attribute is an identifier for the routing system. 
+*   The `data-route` attribute is an identifier for the routing system.
     You'll set that up for your new page in the next section.
 *   The `<paper-material>` element creates a card which floats on top of the
     main content area. If you want to follow the Material Design
-    specification, all main content should be displayed on top of one of these 
+    specification, all main content should be displayed on top of one of these
     cards.
-*   The `elevation` attribute determines how high a `<paper-material>` element 
-    appears to visually float above the main content area. Experiment by 
+*   The `elevation` attribute determines how high a `<paper-material>` element
+    appears to visually float above the main content area. Experiment by
     setting it to values between `0` and `5`.
 
 1.  Add the following content to the bottom of the main section area.
@@ -168,17 +168,17 @@ Your code should now look like the following:
 ...
 ```
 
-You now have content to link your new navigation item to. In the 
+You now have content to link your new navigation item to. In the
 next section you'll link your navigation item to your new content.
 
 ## Route traffic to the new content
 
 In this last tutorial, you make a minor modification to the routing system
-so that when a user clicks on the new "Books" navigation menu item, they 
+so that when a user clicks on the new "Books" navigation menu item, they
 get routed properly to your new page.
 
-1.  Open `app/elements/routing.html` in a text editor and add the following 
-    code near the bottom of the script, just below the page rule for 
+1.  Open `app/elements/routing.html` in a text editor and add the following
+    code near the bottom of the script, just below the page rule for
     `/contact`.
 
 ```
@@ -209,7 +209,7 @@ page('/books', function () {
 ...
 ```
 
-Your new page is now ready! Open your web browser and view it at 
+Your new page is now ready! Open your web browser and view it at
 [http://localhost:5000/#!/books](http://localhost:5000/#!/books).
 
 ![Example of new page](/images/1.0/psk/psk-tutorial-books-page.png)

app/1.0/start/psk/deploy.md

@@ -1,6 +1,6 @@
 ---
 title: Deploy
-link: deploy
+link: psk/deploy
 ---
 
 <!-- This page does not have a ToC because it currently only has one H2.
@@ -16,7 +16,7 @@ before attempting this tutorial.
 Firebase is a very simple and secure way to deploy a PSK site. You can sign
 up for a free account and deploy your application in less than 5 minutes.
 
-The instructions below are based on the [Firebase hosting quick start 
+The instructions below are based on the [Firebase hosting quick start
 guide](https://www.firebase.com/docs/hosting/quickstart.html).
 
 1.  [Sign up for a Firebase account](https://www.firebase.com/signup/).
@@ -37,19 +37,18 @@ guide](https://www.firebase.com/docs/hosting/quickstart.html).
         firebase init
 
     Firebase asks you which app you would like to use for hosting. If you just
-    signed up, you should see one app with a randomly-generated name. You can 
-    use that one. Otherwise go to 
-    [https://www.firebase.com/account](https://www.firebase.com/account) to 
+    signed up, you should see one app with a randomly-generated name. You can
+    use that one. Otherwise go to
+    [https://www.firebase.com/account](https://www.firebase.com/account) to
     create a new app.
 
-1.  Firebase asks you the name of your app's public directory. Enter `dist`. 
-    This works because when you run `gulp` to build your application, PSK 
-    builds everything and places it all in `dist`. So `dist` contains 
+1.  Firebase asks you the name of your app's public directory. Enter `dist`.
+    This works because when you run `gulp` to build your application, PSK
+    builds everything and places it all in `dist`. So `dist` contains
     everything your application needs to run.
 
 1.  Deploy.
 
         firebase deploy
 
     The URL to your live site is listed in the output.
-