Merge branch 'master' of https://github.com/airplane-mode/air-traffic…

…-control

docs/_config.yml

@@ -2,8 +2,7 @@
 title: Air Traffic Control
 email: [email protected]
 description: >
-  Jekyll Template for Project Websites
-  providing documentation and blog post pages.
+  Air Traffic Control is a router for Redux that keeps your routes and actions in sync.
 
 baseurl: "/air-traffic-control" # the subpath of your site
 url: https://airplane-mode.github.io/air-traffic-control # the base hostname & protocol for your site

docs/_data/docs.yml

@@ -3,12 +3,6 @@
   - home
   - api
 
-- title: Examples
-  docs:
-  - cheatsheet
-  - font-awesome
-  - bootstrap
-
 - title: Contributing
   docs:
   - making-changes

docs/_docs/index.md

@@ -12,7 +12,7 @@ Use npm:
 npm install air-traffic-control --save
 ```
 
-Or download the standalone <a href="#">Development</a>, <a href="#">Minified</a>, or <a href="#">Minified and compressed</a> file and include in your header:
+Or download the standalone <a target='_parent' href="#">Development</a>, <a target='_parent' href="#">Minified</a>, or <a target='_parent' href="#">Minified and compressed</a> file and include in your header:
 
 ```
 <script scr="/javascripts/air-traffic-control.js"></script>

docs/_includes/head.html

@@ -10,7 +10,24 @@
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/font-awesome.min.css" | prepend: site.baseurl }}">
 
-    <link rel="shortcut icon" href="{{ "/favicon.ico?1" | prepend: site.baseurl }}">
+    <link rel="apple-touch-icon" sizes="57x57" href="/img/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/img/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/img/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/img/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/img/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+    <link rel="shortcut icon" href="</img/favicon.ico" />
+    <link rel="manifest" href="/img/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
     {% seo %}
 
     <link href="https://fonts.googleapis.com/css?family=Montserrat|Syncopate|PT+Serif" rel="stylesheet">

docs/_includes/js_files.html

@@ -6,3 +6,18 @@
 <script src="{{ "/js/typeahead.bundle.min.js" | prepend: site.baseurl }} "></script>
 
 <script src="{{ "/js/main.js" | prepend: site.baseurl }} "></script>
+<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','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-86127099-1', 'auto');
+  ga('send', 'pageview');
+
+  window.ga = ga
+</script>
+<script src="//fast.appcues.com/28462.js"></script>
+<script type="text/javascript">
+  Appcues.anonymous()
+</script>

docs/_includes/topnav.html

@@ -2,11 +2,11 @@
     <div class="container navbar-container">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
             <a class="navbar-brand" href="{{ site.baseurl }}/">
               <span><!-- Logo Goes Here --></span> {{ site.title }}
             </a>
@@ -23,7 +23,7 @@
                     </div>
                 </form>
                 <ul class="nav navbar-nav">
-                    <li><a href="{{ site.git_address }}"><i class="fa fa-github" aria-hidden="true"></i></a></li>
+                    <li><a target='_parent' href="{{ site.git_address }}"><i class="fa fa-github" aria-hidden="true"></i></a></li>
                 </ul>
             </div>
         </div>

docs/css/main.scss

@@ -87,7 +87,7 @@ input[type="text"]:focus {
 
 .header-container {
   background-color: black;
-  background: url('../img/bg.jpg') no-repeat 27% 0;
+  background: url('../img/bg.jpg') no-repeat 15% 0;
   color: #fff;
 
   h1 {

docs/img/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

docs/img/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

docs/index.html

@@ -6,54 +6,63 @@
     <div class="container">
         <h1>Dead Simple Redux Routing</h1>
         <p>
-          Air Traffic Control is the redux router you've been waiting for. It lets you keep all of your routes in one place and map them directly to redux actions so you can keep routing logic from getting scattered across your views.
+          Air Traffic Control is the Redux router you've been waiting for. It lets you keep all of your routes in one place and map them directly to Redux actions so you can keep routing logic from getting scattered across your views. 
         </p>
-        <p><a class="btn btn-primary btn-lg" href="{{ "/docs/home/" | prepend: site.baseurl }}" role="button">Learn more</a></p>
+        <p>
+          With Air Traffic Control, route changes fire Redux actions, which means you can wait to load data until a user actually needs it.
+        </p>
+        <p><a target='_parent' class="btn btn-primary btn-lg" href="{{ "/docs/home/" | prepend: site.baseurl }}" role="button">Get started</a></p>
     </div>
 </div>
 
 
 <div class="container">
 
-    <div class="row">
-        <div class="col-md-6">
-            <h2 class="header-light regular-pad">Why another react/redux router?</h2>
-            <blockquote>
-              <p>
-                First of all, Air Traffic Control is a redux router, not a react router. It works great with react, but it also works equally well <strong>without</strong> react. We believe libraries are best when it requires minimal ecosystem buy-in, and does one thing well.
-                <br/><br/>
-                There are certainly lots of options out there for routers, but none of them something something something.
-              </p>
-            </blockquote>
-        </div>
-        <div class="col-md-6 text-center">
-            <img src="http://flyairplanemode.com/static/media/50-w.0e4ebc53.svg" alt="" class="img-responsive am-logo">
-        </div>
-    </div>
-
-    <hr>
-
     <div class="row">
         <div class="col-sm-4">
-            <h1 class="text-center"><i class="fa fa-code" aria-hidden="true"></i></h1>
-            <h3 class="text-center">Easy to integrate</h3>
-            <p>Get started by cloning source into GitHub account of your project. Thanks to <a href="https://pages.github.com">GitHub Pages</a>,
-              it will be automatically compiled and published under your project's subdomain on `github.io`.
+            <h1 class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i></h1>
+            <h3 class="text-center">Automatically works with any Redux app</h3>
+            <p>
+              Air Traffic Control is a Redux router, not a React router. It works great with React, but it also works equally well <strong>without</strong> React. We believe libraries are best when they require minimal ecosystem buy-in, and do one thing well.
             </p>
         </div>
         <div class="col-sm-4">
-            <h1 class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i></h1>
-            <h3 class="text-center">Modular Styling and Templating</h3>
-            <p>This template uses <a href="https://github.com/twbs/bootstrap-sass">bootstrap-sass</a> along with <a href="https://bootswatch.com/">Bootwatch themes</a>.
-            You can change the theme or write your custom by overwriting bootstrap sass variables for a different color set, font options, etc.</p>
+            <h1 class="text-center"><i class="fa fa-circle" aria-hidden="true"></i><i class="fa fa-circle-o" aria-hidden="true"></i></h1>
+            <h3 class="text-center">Staunchly separates concerns</h3>
+            <p>
+              The biggest drawback to most React applications is that they eschew separation of concerns by co-locating layout, styling, and routing in their views. We believe this maximizes lock-in and minimizes ability to scale. With Air Traffic Control, you can put your routes wherever you want, and they don't need to match up 1:1 with your views.
+            </p>
         </div>
         <div class="col-sm-4">
-            <h1 class="text-center"><i class="fa fa-code-fork" aria-hidden="true"></i></h1>
-            <h3 class="text-center">Git-based source control</h3>
-            <p>Leverage from Git version control system by
-              maintaining your documentation along with the source code; publish the page when you merge to the master branch.</p>
+            <h1 class="text-center"><i class="fa fa-paper-plane" aria-hidden="true"></i></h1>
+            <h3 class="text-center">Elegantly action-based</h3>
+            <p>
+              A Redux action can change the route. A route can fire a Redux action. Air Traffic Control can even intercept all of the same-domain links in your app so they fire actions instead of just hiding and showing components.
+            </p>
+            <p>
+              That means you don’t need to preload all of the data in your React app's initial load.
+            <p>
         </div>
     </div>
 
+    <hr>
 
+    <div class="row">
+        <div class="col-md-6">
+            <h2 class="header-light regular-pad">Why another React/Redux router?</h2>
+            <blockquote>
+                <p>
+                  Route changes are actions, just like mouse clicks. They should be handled the same way, and they should certainly be kept out of your views. We believe that all of the existing routers for React/Redux complicate the mapping of routes to actions, and Air Traffic Control aims to fix that.
+                </p>
+            </blockquote>
+        </div>
+        <div class="col-md-6">
+            <h2 class="header-light regular-pad">Why open source?</h2>
+            <blockquote>
+                <p>
+                  Air Traffic Control was originally created by <a target='_parent' href="https://github.com/airshanemode">@airshanemode</a> and <a target='_parent' href="https://github.com/jfyles">@jfyles</a> with help from the <a target='_parent' href="https://github.com/millermedeiros/crossroads.js">Crossroads</a> routing library for use in <a target='_parent' href="http://www.flyairplanemode.com">Airplane Mode</a>. We believe that the open source community plays a vital role in quickly building scalable software, and we believe that together we can build the best router in the world.
+                </p>
+            </blockquote>
+        </div>
+    </div>
 </div>

docs/js/main.js

@@ -29,6 +29,4 @@ $(function() {
     // Markdown plain out to bootstrap style
     $('#markdown-content-container table').addClass('table');
     $('#markdown-content-container img').addClass('img-responsive');
-
-
 });

src/index.js

@@ -30,18 +30,21 @@ export class Router {
    *
    * @constructor
    * @param {object} store - Your redux store.
-   * @param {object} config - Additional configuration parameters.
+   * @param {object} config - (Optional) Additional configuration parameters.
    *                          Currently only supports the interceptLinks property.
    */
-  constructor(store, config = {}) {
+  constructor(store, config) {
+    // Optional arguments in old-school JS since our docs generator chokes on them.
+    const configuration = config || {};
+
     // Keep bound reference to dispatch so we can dispatch actions in route handlers
     this.dispatch = store.dispatch.bind(store);
 
     // Handler to run additional post-match logic, useful internally in some cases
     this.onMatch = () => { };
 
     // Keep our config options around
-    this.config = { ...DEFAULT_CONFIG, ...config };
+    this.config = { ...DEFAULT_CONFIG, ...configuration };
   }
 
   /**
@@ -81,9 +84,12 @@ export class Router {
    * @param {string} path - The path to which to navigate.
    * @param {object} handler - (Optional) An additional handler to run after the standard handler.
    */
-  navigate(path, handler = () => {}) {
+  navigate(path, handler) {
+    // Optional arguments in old-school JS since our docs generator chokes on them.
+    const additionalHandler = handler || (() => {});
+
     const oldOnMatch = this.onMatch;
-    this.onMatch = handler;
+    this.onMatch = additionalHandler;
     crossroads.parse(path);
     this.onMatch = oldOnMatch;
   }