Link to dependencies in package view

Also:

* Use webpack for JS bundle
* Allow customizing appName
* Have a "not found" page when you go to a package and it doesn't exist

web/.gitignore

@@ -1,7 +1,7 @@
-app/**/*.js
-app/**/*.js.map
 *.css
 *.css.map
+bundle.js
+bundle.js.map
 node_modules
 npm-debug.log
 typings

web/app/AppComponent.ts

@@ -14,7 +14,7 @@ import {routeChange} from "./actions";
   template: `
     <div class="bldr-container">
       <header class="bldr-header">
-        <h1>bldr</h1>
+        <h1>{{appName}}</h1>
         <nav class="bldr-header-user">
           <user-nav></user-nav>
         </nav>
@@ -42,6 +42,10 @@ export class AppComponent {
     store.subscribe(state => console.log('new state received ', state.toObject())); 
   }
 
+  get appName() {
+    return this.store.getState().appName;
+  }
+
   get now() {
     return this.store.getState().currentYear;
   }

web/app/boot.ts

@@ -1,3 +1,4 @@
+import "angular2/bundles/angular2-polyfills"
 import {AppComponent} from "./AppComponent";
 import {AppStore} from "./AppStore";
 import {ROUTER_PROVIDERS} from "angular2/router";

web/app/package/PackageComponent.ts

@@ -5,7 +5,12 @@ import {Router, RouterLink} from "angular2/router";
 @Component({
   directives: [RouterLink],
   template: `
-    <div class="bldr-package">
+    <div *ngIf="!package" class="bldr-package">
+      <h2>Not Found</h2>
+      <p>{{currentPackage}} does not exist.</p>
+      <p>Here's how you would make it: &hellip;</p>
+    </div>
+    <div *ngIf="package" class="bldr-package">
       <h2>
         <a [routerLink]="['Dashboard']">{{package.derivation}}</a>
         /
@@ -36,11 +41,25 @@ import {Router, RouterLink} from "angular2/router";
         <h3>Dependencies</h3>
         <div class="bldr-package-deps-build">
           <h4>Build Dependencies</h4>
-          <p>None</p>
+          <ul>
+            <li *ngIf="package.buildDependencies.length === 0">None</li>
+            <li *ngFor="#dep of package.buildDependencies">
+              <a [routerLink]="['Package', { id: dep.name, derivation: dep.derivation }]">
+                {{dep.identifier}}
+              </a>
+            </li>
+          </ul>
         </div>
         <div class="bldr-package-deps-runtime">
           <h4>Runtime Dependencies</h4>
-          <p>None</p>
+          <ul>
+            <li *ngIf="package.dependencies.length === 0">None</li>
+            <li *ngFor="#dep of package.dependencies">
+              <a [routerLink]="['Package', { id: dep.name, derivation: dep.derivation }]">
+                {{dep.identifier}}
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

web/app/package/_package.scss

@@ -6,6 +6,10 @@
   }
 
   &-deps {
+    h4 {
+      margin-top: 1em;
+    }
+
     &-build {
     }
 

web/app/rootReducer.ts

@@ -4,6 +4,7 @@ import * as Immutable from "immutable";
 import * as actionTypes from "./actions";
 
 const initialState = Immutable.Record({
+  appName: "bldr",
   currentYear: new Date().getFullYear(),
   isUserNavOpen: false,
   isSignedIn: true,
@@ -23,21 +24,30 @@ const initialState = Immutable.Record({
       release: "20160111220549",
       source: "https://www.openssl.org/source/openssl-1.0.2e.tar.gz",
       sha: "e23ccafdb75cfcde782da0151731aa2185195ac745eea3846133f2e05c0e0bff",
-      buildDependencies: {},
-      deps: {
-        "chef/glibc": {
+      buildDependencies: [],
+      dependencies: [
+        {
+          identifier: "chef/glibc/2.19/20160111220307",
+          name: "glibc",
+          derivation: "chef",
           version: "2.19",
           release: "20160111220307",
         },
-        "chef/zlib": {
+        {
+          identifier: "chef/zlib/1.2.8/20160111220313",
+          name: "zlib",
+          derivation: "chef",
           version: "1.2.8",
           release: "20160111220313",
         },
-        "chef/cacerts": {
+        {
+          identifier: "chef/cacerts/2016.01.11/20160111220317",
+          name: "cacerts",
+          derivation: "chef",
           version: "2016.01.11",
           release: "20160111220317",
         }
-      }
+      ]
     },
     {
       identifier: "smith/runit",
@@ -46,17 +56,20 @@ const initialState = Immutable.Record({
       description: "It cannot be stopped.",
       version: "2.1.2",
       release: "20160111220840",
-      deps: {
-        "chef/glibc": {
+      dependencies: [
+        {
+          identifier: "chef/glibc/2.19/20160111220307",
+          name: "glibc",
+          derivation: "chef",
           version: "2.19",
           release: "20160111220307",
         }
-      },
+      ],
       maintainer: "Joshua Timberman <[email protected]>",
       license: "BSD",
       source: "http://smarden.org/runit/runit-2.1.2.tar.gz",
       sha: "6fd0160cb0cf1207de4e66754b6d39750cff14bb0aa66ab49490992c0c47ba18",
-      buildDependencies: {},
+      buildDependencies: [],
     },
   ] 
 })();

web/index.html

@@ -2,35 +2,11 @@
 <html>
   <head>
     <title>bldr</title>
-
     <link rel="stylesheet" href="/app/app.css">
-
-    <!-- 1. Load libraries -->
-    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="/node_modules/systemjs/dist/system.src.js"></script>
-    <script src="/node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="/node_modules/angular2/bundles/router.dev.js"></script>
-    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
-
-    <!-- 2. Configure SystemJS -->
-    <script>
-      System.config({
-        map: {
-          "immutable": "/node_modules/immutable/dist/immutable.js",
-          "redux": "/node_modules/redux/dist/redux.js"
-        },
-        packages: {
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
-      System.import('app/boot')
-            .then(null, console.error.bind(console));
-    </script>
-
     <base href="/">
   </head>
-  <body><bldr></body>
-</html>
+  <body>
+    <bldr>
+    <script src="/bundle.js"></script>
+  </body>
+</html>