feat(firebase): feed resources page using firebase. Check for approved entries of the resources page

Author: Eric Jimenez

public/_data.json

@@ -47,9 +47,5 @@
 
   "tooling": {
     "title": "Tooling and Libraries"
-  },
-
-  "all-resources": {
-    "title": "Resources"
   }
 }

public/_includes/_scripts-include.jade

@@ -12,11 +12,17 @@ script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animat
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js")
 
+<!-- Firebase -->
+<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
+
+<!-- AngularFire -->
+<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
 
 
 <!-- Angular.io Site JS -->
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
+script(src="/resources/js/controllers/resources-controller.js")
 script(src="/resources/js/directives/cheatsheet.js")
 script(src="/resources/js/directives/api-list.js")
 script(src="/resources/js/directives/bio.js")

public/all-resources.jade

@@ -1,5 +1,18 @@
 .resources {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+
+  @media(max-width: 400px) {
+    flex-direction: column-reverse;
+  }
+
   a {
-    color: $ocean;
+    font-size: 16px;
   }
+}
+
+.capitalize {
+  text-transform: capitalize;
 }

public/books.jade

@@ -0,0 +1,19 @@
+<p class="text-body">Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.</p>
+
+<div class="js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
+    <div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
+        <div>
+            <h1 class="capitalize">{{category}}</h1>
+            <div ng-repeat="section in categoryContent">
+                <div class="grid-fluid" ng-repeat="(subsectionName, subsectionArray) in section">
+                    <div>
+                        <h2 class="capitalize">{{ subsectionName }}</h2>
+                        <ul ng-repeat="resource in subsectionArray.resources">
+                            <li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>