customize layout and nav.

Author: christopherthielen

_config.yml

@@ -7,18 +7,18 @@
 
 # Site Settings
 locale                   : "en-US"
-title                    : "Site Title"
+title                    : "UI-Router"
 title_separator          : "-"
-name                     : "Your Name"
-description              : "An amazing website."
+name                     : "UI-Router"
+description              : "State based routing for single-page web applications"
 url                      : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
 baseurl                  : # the subpath of your site, e.g. "/blog"
-gh_repo                  :
+gh_repo                  : # Link to both github repositories?
 teaser                   : # filename of teaser fallback teaser image placed in /images/, .e.g. "500x300.png"
 # breadcrumbs              : false # true, false (default)
 # words_per_minute         : 200
 comments:
-  provider               : # false (default), "disqus", "facebook", "google-plus", custom"
+  provider               : "disqus"
   disqus:
     shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
   facebook:
@@ -61,10 +61,10 @@ google_ad_slot           :
 
 # Site Author
 author:
-  name             : "Your Name"
-  avatar           : "bio-photo.jpg"
-  bio              : "I am an amazing person."
-  location         : "Somewhere"
+  name             : # "UI-Router"
+  avatar           : "clear.gif"
+  bio              : #
+  location         : #
   email            :
   uri              :
   bitbucket        :
@@ -148,7 +148,7 @@ kramdown:
 # Outputting
 permalink: /:categories/:title/
 paginate: 5 # amount of posts to show
-paginate_path: /page:num/
+paginate_path: /blog/page:num/
 timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 
 
@@ -204,3 +204,15 @@ compress_html:
   clippings: all
   ignore:
     envs: development
+
+collections:
+  docs:
+    output: true
+    permalink: /docs/:path:output_ext
+
+defaults:
+  - scope:
+      path: ""
+      type: docs
+    values:
+      layout: docs

_data/navigation.yml

@@ -1,16 +1,13 @@
 # main links links
 main:
-  - title: "Quick-Start Guide"
-    url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
-
   - title: "About"
-    url: https://mmistakes.github.io/minimal-mistakes/
+    url: /about
 
-  - title: "Sample Posts"
-    url: https://mmistakes.github.io/minimal-mistakes/year-archive/
+  - title: "Getting started"
+    url: /start
 
-  - title: "Sample Pages"
-    url: https://mmistakes.github.io/minimal-mistakes/page-archive/
+  - title: "Docs"
+    url: /docs
 
-  - title: "Sample Collections"
-    url: https://mmistakes.github.io/minimal-mistakes/collection-archive/
+  - title: "Blog"
+    url: /blog

_docs/index.html

@@ -0,0 +1,10 @@
+---
+---
+
+
+{% assign files = site.docs %}
+{% for doc in site.docs %}
+{% if doc.path like
+
+{{ doc.path }}  <br>
+{% endfor %}

_includes/author-profile.html

@@ -4,6 +4,8 @@
   {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.author %}
 {% endif %}
 
+{% if author.name %}
+
 <div itemscope itemtype="http://schema.org/Person">
 
   <div class="author__avatar">
@@ -100,3 +102,5 @@ <h3 class="author__name">{{ author.name }}</h3>
     </ul>
   </div>
 </div>
+
+{% endif %}

_includes/masthead.html

@@ -2,11 +2,19 @@
 
 <div class="masthead">
   <div class="masthead__inner-wrap">
+
+    <div></div>
+
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
         <button><div class="navicon"></div></button>
         <ul class="visible-links">
-          <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
+          <li class="masthead__menu-item masthead__menu-item--lg">
+            <a href="{{ base_path }}/">
+              <img class="logo" src="/images/logos/ui-router.png">
+              {{ site.title }}
+            </a>
+          </li>
           {% for link in site.data.navigation.main %}
             {% if link.url contains 'http' %}
               {% assign domain = '' %}

_pages/about/about.md

@@ -0,0 +1,34 @@
+---
+title: "About"
+layout: single
+excerpt: "UI-Router is a routing framework for single page web applications"
+sitemap: true
+permalink: /about/
+---
+
+{% include toc icon="columns" title="About" %}
+
+UI-Router is a [client-side router](#client-side-routing) for [single page web applications](https://en.wikipedia.org/wiki/Single-page_application).
+
+Read about [UI-Router Features](/about/features)
+
+## Supported Frameworks
+
+UI-Router core is framework agnostic.  We currently provide adapters for Angular 1 and Angular 2.
+
+<div class="about_frameworks">
+  <div><a href="/start/ng1"><img src="/images/logos/angular1.png"><div>Angular 1</div></a></div>
+  <div><a href="/start/ng2"><img src="/images/logos/angular2.png"><div>Angular 2</div></a></div>
+</div>
+
+
+## Client-side routing
+
+A client-side router updates the browser URL as the user nagivates through the single page app.  
+Conversely, changes to the browser's URL can drive navigation of the app, enabling
+a user to create deep-links (i.e., bookmarks) to areas deep within the application.
+
+The simplest form of client-side routing maps a screen in the app to a url.  For instance, the Contacts
+screen might map to the url `/contacts`, while the Preferences screen might map to the url `/prefs`.
+
+![contacts feature has contacts url](/images/about/contacts-url.png)

_pages/about/features.md

@@ -0,0 +1,101 @@
+---
+title: "UI-Router Features"
+layout: splash
+excerpt: "UI-Router features"
+sitemap: true
+permalink: /about/features
+---
+
+{% include toc icon="columns" title="Features" %}
+
+## States
+
+UI-Router is state based.  A state defines each logical "place" within the application. 
+It describes the URL, UI (view or views), behavior, logical prerequisites, and data dependencies for that "place". 
+  
+UI-Router states are hierarchical; states can be nested inside other states, forming a tree of states.  
+Child states may inherit data and behaviors from their parent states.
+
+[Read more about ui-router states](/about/states)
+
+## Views
+
+A state defines its UI and behavior using views.  The view declares the component which should fill the 
+parent viewport (`<ui-view>`).
+
+- **Nested**: a state's view(s) can nest inside other views
+- **Multiple Named**: a state can define multiple named views
+    - Named views can target any viewport, even outside the current DOM hierarchy.
+    - This can be used to fill (or override) headers or nagivation, based on the current state.
+
+## Urls
+
+- **Optional**: states may have URLs, but it isn't required
+    - after a transitioning to a state with no URL, the browser's URL does not change
+- **Hierarchical**: a child state's url fragment is appended to the parent state's url fragment
+- **Parameterized**: a url may be parameterized  
+    - when a state needs specific data (e.g., `contacts.edit` needs to know which contact to edit), the url
+    may contain a parameter, e.g., `url: '/edit/:contactId'`
+    
+## Parameters
+
+- **Types**
+    - **Path**: `/foo/:fooId` matches '123' in `http://mysite.com/foo/123`
+    - **Query**: `/foo?fooId` matches '123' in `http://mysite.com/foo?fooId=123`
+    - **Non-url**: arbitrary parameter data may be passed programmatically
+- **Default Values**: a parameter may define a default value
+    - the default parameter value is used when the parameter value is missing (from the URL, for example)
+- **Squash**: when a default value is found, it may be removed from the URL
+    - if `123` is the default value for the parameter `fooId` in the state url `/foo/:fooId`, then `/foo/123` can 
+    be squashed to `/foo` in the browser's URL.
+- **Typed**: parameters can be typed.
+    - Typed parameters are encoded in the URL, but converted to their native type when used in the code.
+    - Built in types: number, boolean, date, json
+- **Custom Types**: custom parameter types may be defined by the user
+    
+        
+## Resolve Data
+
+A state often requires that some data be fetched from a server-side API (often, the data to fetch is specified
+in a url parameter).  
+
+The `resolve` mechanism allows data retrieval to be a first class participant in the transition.  When a state is
+being entered, its resolve data is fetched.  If any of the resolve promises are rejected (perhaps due to a 401, 
+404, or 500 server response from a REST API), then the transition's promise is rejected and the error hooks are
+invoked.  This enables robust error handling for applications, and helps to avoid leaving the application in an 
+inconsistent state.
+
+- **Resolve data**: 
+    - **declarative**: A state defines what data should be fetched (generally delegating to a service)
+    - **views**: The data is provided to the state's views
+    - **hierarchical**: A child state (and its views) can use the parent state's resolve data
+    - **dependency resolution**: A resolve may depend on another resolve's result within the same state
+    
+## Transitions
+
+Navigating between parts of the application occurs by transitioning from one state to another.
+Transitions between states are transaction-like, i.e., they either completely succeed or completely fail.
+
+- **Lifecycle**: transitions have a well defined lifecycle
+    - **before**: before the asyc portion of a transition has begun
+    - **start**: the transition has begun
+    - **exit**: the transition is exiting states
+    - **retain**: states are retained (a state was active, and is neither being exited nor entered)
+    - **enter**: the transition is entering states
+    - **finish**: the transition is finishing
+    - **success/error**: after the transition is complete
+- **Transition Lifecycle Hooks**: 
+    - Hooks may be registered for any stage of the transition lifecycle.
+    - Hooks can alter the transition:
+        - **pause** the transition, waiting on some promise
+        - **cancel** the transition
+        - **redirect** the transition to a new target state
+    - **match criteria**: 
+        - A hook can choose which transitions it should be applied to.  
+        - **to/from**: only run the hook if the transition is going to or coming from a specific state
+        - **entering/exiting**: only run the hook if the transition is going to enter or exit a specific state
+    - **criteria types**:
+        - **state name**: the hook's match criteria can be state names, such as `banking.account`
+        - **glob**: the criteria can be a state glob pattern, such ash `banking.**`
+        - **callback**: the criteria can be a callback function, such as `tostate => tostate.data.requiresAuth == true`
+

_pages/about/states.md

@@ -0,0 +1,37 @@
+---
+title: "About States"
+layout: single
+excerpt: ""
+sitemap: true
+permalink: /about/states
+---
+
+The basic building block of a ui-router application is a state.  A ui-router state corresponds to a 
+"place" in the application in terms of the overall UI and navigation. 
+Some examples of states might be "dashboard", "messages", "shoppingcart", or "viewblogpost". 
+
+A state (via it's views) defines how the UI looks and what it does at that "place" in the application.  It 
+can define a URL fragment that will be added to the browser's URL when the state is active. It also defines 
+the data that the state requires, as well as how to get the data.  
+
+Unlike states in a traditional [*state machine*](https://en.wikipedia.org/wiki/Finite-state_machine),  
+UI-Router states can be nested.  A parent state can have multiple children states, forming a hierarchical 
+tree of application states.  Often, the child states will render their UI inside a viewport from the parent 
+state, forming a hierarchical view tree as well.
+
+Hierarchical states can be used to drill down from a more general feature to more specific one, or to implement
+a master/detail pattern.  For instance, you might have a state called "contacts" (which renders a list of contacts), 
+and two child states "contacts.contact" (to view a single contact) and "contacts.new" (to create a new contact). 
+These substates share a common parent state "contacts" and may inherit data and behavior from the parent.
+
+![a tree of states](/images/about/state-tree.png)
+
+### State Machine and Transitions
+
+UI-Router provides a state machine to transition between application states.  These transitions are essentially 
+atomic.  When transitioning from state A to state B, either the *entire transition succeeds* and 
+the application's current state is now B, or the *entire transition fails* and the application remains at state A.
+
+Transitions have a lifecycle, and expose hooks for each stage of the lifecycle, which applications can tap into.
+
+To learn more about transition hooks, read the API documentation for IHookRegistry.

_pages/start/index.md

@@ -0,0 +1,11 @@
+---
+title: "Getting started"
+layout: single
+sitemap: true
+permalink: /start/
+---
+
+[Getting started: Angular 1](/start/ng1)
+
+[Getting started: Angular 2](/start/ng2)
+

_pages/start/ng1.md

@@ -0,0 +1,71 @@
+---
+title: "Getting started: Angular 1"
+layout: single
+excerpt: "Getting started with UI-Router for Angular 1"
+sitemap: true
+permalink: /start/ng1
+---
+
+1. Get UI-Router for Angular 1 using your preferred mechanism:
+  - Using npm: `npm install angular-ui-router`
+  - Using bower: `bower install angular-ui-router`
+  - Download directly from [npmcdn](https://npmcdn.com/[email protected]/release/angular-ui-router.js)
+
+2. Add the `angular-ui-router.js` script tag after `angular.js`
+
+```html
+<head>
+  <script src="lib/angular.js"></script>
+  <script src="lib/angular-ui-router.js"></script>
+</head>
+```
+
+3. Create a module dependency on the `ui.router` angular module
+
+```js
+var myApp = angular.module('myApp', ['ui.router']);
+```
+
+4. Create two top-level states using the `$stateProvider`
+
+```js
+myApp.config(function($stateProvider) {
+
+  $stateProvider.state('hello', {
+    url: '/hello',
+    template: '<h3>hello world!</h3>'
+  });
+  
+  $stateProvider.state('about', {
+    url: '/about',
+    template: '<h3>Its the UI-Router hello world app!</h3>'
+  });
+  
+});
+```
+
+5. Add a `<ui-view>` tag (ui-router viewport) to your HTML.  When your states are activated, they 
+will fill in this viewport.
+
+```html
+<body ng-app="myApp">
+  <ui-view></ui-view>
+</body>
+```
+
+6. Add some `ui-sref` links, which can be used to activate your states.
+
+```html
+<body>
+  <a ui-sref="hello">Hello</a>
+  <a ui-sref="about">About</a>
+  <ui-view></ui-view>
+</body>
+```
+
+### The whole thing
+
+Here is a live plunker [(edit)](http://plnkr.co/edit/6eQV15?p=preview):
+
+<iframe style="width: 100%; height: 600px" src="http://embed.plnkr.co/6eQV15/" frameborder="0" allowfullscren="allowfullscren"></iframe>
+