adds filterable API list

public/docs/_layout.jade

@@ -11,8 +11,11 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
 
 
     if current.path[3] == 'api'
-      article(class="l-content-small grid-fluid docs-content")
+      if current.path[4] == 'index'
         != yield
+      else
+        article(class="l-content-small grid-fluid docs-content")
+          != yield
 
     else
       article(class="l-content-small grid-fluid docs-content")

public/docs/js/latest/api/index.jade

@@ -1,19 +1,18 @@
-.callout.is-helpful
-  header Developer Preview
-
-  p.
-    The Angular 2.0 API is currently in active development and not production ready.
-    This page showcases a preview of proposed methods to help further the discussion
-    in the development community. Please also note that examples currently use TypeScript
-    rather than ES5 JavaScript. If you're building a production app today, please
-    <a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
-
-ul.is-plain
-  for page, slug in public.docs[current.path[1]][current.path[2]].api
-    if slug != 'index' && slug != '_contents' && slug != '_data'
-
-      - var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug
-      - var title = public.docs[current.path[1]][current.path[2]][current.path[3]][slug]._data["index"]["title"]
-
-      li
-        != partial("../../../../_includes/_hover-card", {name: title, url: url })
+.banner
+  dl.api-key
+    dt Display:
+    dd.directive(ng-class='{ active: apiType === "directive" }' ng-click='setType("directive")') Directive
+    dd.class(ng-class='{ active: apiType === "class" }' ng-click='setType("class")') Class
+    dd.interface(ng-class='{ active: apiType === "interface" }' ng-click='setType("interface")') Interface
+    dd.function(ng-class='{ active: apiType === "function" }' ng-click='setType("function")') Function
+    dd.const(ng-class='{ active: apiType === "const" }' ng-click='setType("const")') Const or Enum
+    dd.var(ng-class='{ active: apiType === "var" }' ng-click='setType("var")') Variable
+  input.api-filter(placeholder='Filter', ng-model='apiFilter')
+article(class="l-content-small grid-fluid docs-content")
+  div(ng-repeat='section in apiSections')
+    h3 {{ section.title }}
+    ul.api-list
+      li.api-item(ng-repeat='item in apiList[section.name] | filter: { title: apiFilter, docType: apiType }')
+        a(ng-href='/docs/js/latest/api/{{ section.name }}/{{ item.title }}-{{ item.docType === "directive" ? "class" : item.docType }}')
+          span(class='symbol {{ item.docType }}')
+          | {{ item.title }}

public/resources/css/main.scss

@@ -41,6 +41,7 @@
 @import 'module/showcase';
 @import 'module/statement';
 @import 'module/example-title';
+@import 'module/api';
 
 
 /*

public/resources/css/module/_api.scss

@@ -0,0 +1,99 @@
+@mixin icon {
+  line-height: 14px;
+  &.directive:before {
+    content: 'D';
+    background: #db4437;
+  }
+  &.class:before {
+    content: 'C';
+    background: #4285f4;
+  }
+  &.interface:before {
+    content: 'I';
+    background: #0097a7;
+  }
+  &.function:before {
+    content: 'F';
+    background: #0f9d58;
+  }
+  &.const:before,
+  &.enum:before {
+    content: 'N';
+    background: #757575;
+  }
+  &.var:before {
+    content: 'V';
+    background: #9575cd;
+  }
+  &:before {
+    display: inline-block;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    text-align: center;
+    color: white;
+    font-family: Roboto, sans-serif;
+    font-size: 10px;
+    margin-right: $unit;
+    float: left;
+  }
+}
+
+.api-key {
+  dt, dd {
+    display: inline-block;
+    font-size: 14px;
+    font-family: Roboto, sans-serif;
+    padding: $unit;
+  }
+  dt {
+    padding-left: 0;
+  }
+  dd {
+    @include icon;
+    margin: 0 0 0 ($unit);
+    cursor: pointer;
+    &.active {
+      background: #d5d9dc;
+      border-radius: 3px;
+    }
+  }
+}
+
+input.api-filter {
+  display: block;
+  max-width: ($unit * 100);
+  width: 100%;
+  line-height: 18px;
+  padding: $unit;
+  position: relative;
+  left: ($unit * -1);
+}
+
+.docs-content {
+  .api-list {
+    list-style: none;
+    padding: 0 0 ($unit * 4);
+    overflow: hidden;
+    .api-item {
+      font-size: 14px;
+      font-family: Roboto, sans-serif;
+      margin: 0;
+      line-height: 14px;
+      padding: $unit $unit $unit 0;
+      float: left;
+      width: 33%;
+      min-width: 220px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      a {
+        text-decoration: none;
+        color: black;
+      }
+      .symbol {
+        @include icon;
+      }
+    }
+  }
+}