build(aio): move doc-gen stuff from angular.io (#14097)

docs/src/app/app.component.ts

@@ -0,0 +1,44 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+import {Component, OnInit, NgZone } from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/switchMap';
+import {QueryResults, SearchWorkerClient} from './search-worker-client';
+
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Angular Docs Search</h1>
+    <div class="search-bar"><input [formControl]="searchInput"></div>
+    <div class="search-results">
+      <div *ngIf="!(indexReady | async)">Waiting...</div>
+      <ul>
+      <li *ngFor="let result of (searchResult$ | async)">
+        <a href="{{result.path}}">{{ result.title }} ({{result.type}})</a>
+      </li>
+      </ul>
+    </div>
+  `
+})
+export class AppComponent implements OnInit {
+  searchResult$: Observable<QueryResults>;
+  indexReady: Promise<boolean>;
+  searchInput: FormControl;
+
+  constructor(private zone: NgZone) {}
+
+  ngOnInit() {
+    const searchWorker = new SearchWorkerClient('app/search-worker.js', this.zone);
+    this.indexReady = searchWorker.ready;
+    this.searchInput = new FormControl();
+    this.searchResult$ = this.searchInput.valueChanges
+      .switchMap((searchText: string) => searchWorker.search(searchText));
+  }
+}

docs/src/app/main.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveFormsModule} from '@angular/forms';
+import {AppComponent} from 'app/app.component';
+
+@NgModule({
+  imports:      [ BrowserModule, ReactiveFormsModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+class AppModule {
+
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

docs/src/app/search-worker-client.ts

@@ -0,0 +1,97 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+import {NgZone} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subscriber} from 'rxjs/Subscriber';
+import 'rxjs/add/observable/fromPromise';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/switchMap';
+
+
+export interface QueryResults {}
+
+export interface ResultsReadyMessage {
+  type: 'query-results';
+  id: number;
+  query: string;
+  results: QueryResults;
+}
+
+export class SearchWorkerClient {
+  ready: Promise<boolean>;
+  worker: Worker;
+  private _queryId = 0;
+
+  constructor(url: string, private zone: NgZone) {
+    this.worker = new Worker(url);
+    this.ready = this._waitForIndex(this.worker);
+  }
+
+  search(query: string) {
+    return Observable.fromPromise(this.ready)
+            .switchMap(() => this._createQuery(query));
+  }
+
+  private _waitForIndex(worker: Worker) {
+    return new Promise((resolve, reject) => {
+
+      worker.onmessage = (e) => {
+        if(e.data.type === 'index-ready') {
+          resolve(true);
+          cleanup();
+        }
+      };
+
+      worker.onerror = (e) => {
+        reject(e);
+        cleanup();
+      };
+    });
+
+    function cleanup() {
+      worker.onmessage = null;
+      worker.onerror = null;
+    }
+  }
+
+  private _createQuery(query: string) {
+    return new Observable<QueryResults>((subscriber: Subscriber<QueryResults>) => {
+
+      // get a new identifier for this query that we can match to results
+      const id = this._queryId++;
+
+      const handleMessage = (message: MessageEvent) => {
+        const {type, id: queryId, results} = message.data as ResultsReadyMessage;
+        if (type === 'query-results' && id === queryId) {
+          this.zone.run(() => {
+            subscriber.next(results);
+            subscriber.complete();
+          });
+        }
+      };
+
+      const handleError = (error: ErrorEvent) => {
+        this.zone.run(() => {
+          subscriber.error(error);
+        });
+      };
+
+      // Wire up the event listeners for this query
+      this.worker.addEventListener('message', handleMessage);
+      this.worker.addEventListener('error', handleError);
+
+      // Post the query to the web worker
+      this.worker.postMessage({query, id});
+
+      // At completion/error unwire the event listeners
+      return () => {
+        this.worker.removeEventListener('message', handleMessage);
+        this.worker.removeEventListener('error', handleError);
+      };
+    });
+  }
+}

docs/src/app/search-worker.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/* eslint-env worker */
+/* global importScripts, lunr */
+
+importScripts('https://unpkg.com/[email protected]');
+
+var index = createIndex();
+var pages = {};
+
+makeRequest('search-data.json', loadIndex);
+
+self.onmessage = handleMessage;
+
+// Create the lunr index - the docs should be an array of objects, each object containing
+// the path and search terms for a page
+function createIndex() {
+  return lunr(/** @this */function() {
+    this.ref('path');
+    this.field('titleWords', {boost: 50});
+    this.field('members', {boost: 40});
+    this.field('keywords', {boost: 20});
+  });
+}
+
+
+// Use XHR to make a request to the server
+function makeRequest(url, callback) {
+  var searchDataRequest = new XMLHttpRequest();
+  searchDataRequest.onload = function() {
+    callback(JSON.parse(this.responseText));
+  };
+  searchDataRequest.open('GET', url);
+  searchDataRequest.send();
+}
+
+
+// Create the search index from the searchInfo which contains the information about each page to be indexed
+function loadIndex(searchInfo) {
+  // Store the pages data to be used in mapping query results back to pages
+  // Add search terms from each page to the search index
+  searchInfo.forEach(function(page) {
+    index.add(page);
+    pages[page.path] = page;
+  });
+  self.postMessage({type: 'index-ready'});
+}
+
+
+// The worker receives a message everytime the web app wants to query the index
+function handleMessage(message) {
+  var id = message.data.id;
+  var query = message.data.query;
+  var results = queryIndex(query);
+  self.postMessage({type: 'query-results', id: id, query: query, results: results});
+}
+
+
+// Query the index and return the processed results
+function queryIndex(query) {
+  // Only return the array of paths to pages
+  return index.search(query).map(function(hit) { return pages[hit.ref]; });
+}

docs/src/app/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/tools/",
+    "noImplicitAny": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+    },
+    "rootDir": ".",
+    "sourceMap": true,
+    "inlineSources": true,
+    "lib": ["es6", "dom"],
+    "target": "es5",
+    "skipLibCheck": true,
+    "typeRoots": [
+      "../../../node_modules"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "typings-test",
+    "public_api_guard",
+    "docs"
+  ]
+}

docs/src/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills for older browsers -->
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+
+    <script src="https://unpkg.com/[email protected]?main=browser"></script>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
+
+    <script src="systemjs.config.web.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading AppComponent content here ...</my-app>
+  </body>
+
+</html>

docs/src/systemjs.config.web.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+System.config({
+  // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+  transpiler: 'ts',
+  typescriptOptions: {
+    // Copy of compiler options in standard tsconfig.json
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  meta: {
+    'typescript': {
+      "exports": "ts"
+    }
+  },
+  paths: {
+    // paths serve as alias
+    'npm:': 'https://unpkg.com/'
+  },
+  // map tells the System loader where to look for things
+  map: {
+    // our app is within the app folder
+    app: 'app',
+
+    // angular bundles
+    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+
+    // other libraries
+    'rxjs':                      'npm:rxjs',
+    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+    'ts':                        'npm:[email protected]/lib/plugin.js',
+    'typescript':                'npm:[email protected]/lib/typescript.js',
+
+  },
+  // packages tells the System loader how to load when no filename and/or no extension
+  packages: {
+    app: {
+      main: './main.ts',
+      defaultExtension: 'ts'
+    },
+    rxjs: {
+      defaultExtension: 'js'
+    }
+  }
+});

docs/templates/api-list-audit.template.json

@@ -0,0 +1,15 @@
+[{% for module, items in doc.data %}
+  {% for item in items %}
+    {
+      "title": "{$ item.title $}",
+      "path": "{$ item.exportDoc.path $}",
+      "docType": "{$ item.docType $}",
+      "stability": "{$ item.stability $}",
+      "secure": "{$ item.security $}",
+      "howToUse": "{$ item.howToUse | replace('"','\\"') $}",
+      "whatItDoes": {% if item.whatItDoes %}"Exists"{% else %}"Not Done"{% endif %},
+      "barrel" : "{$ module | replace("/index", "") $}"
+    }{% if not loop.last %},{% endif %}
+    {% endfor %}
+  {% endfor %}
+]

docs/templates/api-list-data.template.json

@@ -0,0 +1,14 @@
+{
+{%- for module, items in doc.data %}
+  "{$ module | replace("/index", "") $}" : [{% for item in items %}
+    {
+      "title": "{$ item.title $}",
+      "path": "{$ item.exportDoc.path $}",
+      "docType": "{$ item.docType $}",
+      "stability": "{$ item.stability $}",
+      "secure": "{$ item.security $}",
+      "barrel" : "{$ module | replace("/index", "") $}"
+    }{% if not loop.last %},{% endif %}
+  {% endfor %}]{% if not loop.last %},{% endif %}
+{% endfor -%}
+}

docs/templates/cheatsheet.template.json

@@ -0,0 +1,5 @@
+{
+  "currentEnvironment": {$ doc.currentEnvironment | json | trim $},
+  "version": {$ doc.version.currentVersion | json | indent(2) | trim $},
+  "sections": {$ doc.sections | json | indent(2) | trim $}
+}

docs/templates/class.template.html

@@ -0,0 +1,161 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Overview</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <code class="no-bg api-doc-code openParens">class {$ doc.name $} {</code>
+    {% if doc.statics.length %}
+    <div layout="column">
+      {% for member in doc.statics %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent">static
+          <a class="code-anchor" href="#{$ member.name $}-anchor">
+            <code(class="code-background api-doc-code">{$ member.name | indent(6, false) | trim $}</code>
+          </a>
+          <code class="api-doc-code">
+            {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+          </code>
+      {% endif %}{% endfor %}
+    {% endif %}
+    {% if doc.constructorDoc.name %}
+    <div layout="column">
+      <pre class="prettyprint no-bg-with-indent">
+        <a class="code-anchor" href="#constructor">
+          <code class="code-background api-doc-code">{$ doc.constructorDoc.name $}</code>
+        </a>
+        <code class="api-doc-code">
+          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+        </code>
+    {% endif %}
+    {% if doc.members.length %}
+    <div layout="column">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent">
+          <a class="code-anchor" href="#{$ member.name $}-anchor">
+            <code class="code-background api-doc-code">{$ member.name | indent(6, false) | trim $}</code>
+          </a>
+          <code class="api-doc-code">{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}</code>
+        </pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+    <p class="selector endParens">
+      <code class="api-doc-code no-bg">}</code>
+    </p>
+
+{% block additional %}
+{% endblock %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Description</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if doc.description.length > 2 %}
+    {$ doc.description | trimBlankLines | marked $}
+    {% endif %}
+  </div>
+
+{%- if doc.decorators.length %}
+{% block annotations %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Annotations</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {%- for decorator in doc.decorators %}
+      <pre class="prettyprint no-bg">
+        <code class="api-doc-code">
+          @{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}
+        </code>
+      </pre>
+      {%- if not decorator.notYetDocumented %}
+      {$ decorator.description | indentForMarkdown(8) | trimBlankLines | marked $}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endblock %}
+{% endif %}
+
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Constructor</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <a name="constructor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
+      <code class="api-doc-code">
+        {$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+      </code>
+    </pre>
+    {%- if not doc.constructorDoc.notYetDocumented %}
+    {$ doc.constructorDoc.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif %}
+{% endif %}
+
+{% if doc.statics.length %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Static Members</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+  {% for member in doc.statics %}{% if not member.internal %}
+    <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code class="api-doc-code">
+        {$ member.name $}{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+      </code>
+    </pre>
+    {%- if not member.notYetDocumented %}
+    {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif %}
+
+    {% if not loop.last %}
+    <hr class="hr-margin">
+    {% endif %}
+
+  {% endif %}{% endfor %}
+{% endif %}
+
+{% if doc.members.length %}
+<div layout="row" layout-xs="column" class="instance-members" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Details</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {% for member in doc.members %}{% if not member.internal %}
+    <a name="{$ member.name $}-anchor" class="anchor-offset">
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code class="api-doc-code">
+        {$ member.name $}{$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+      </code>
+    </pre>
+    {%- if not member.notYetDocumented %}
+    {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+    {% endif -%}
+
+    {% if not loop.last %}
+    <hr class="hr-margin">
+    {% endif %}
+  {% endif %}{% endfor %}
+{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} },
+  defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/const.template.html

@@ -0,0 +1 @@
+{% extends 'var.template.html' -%}

docs/templates/data-module.template.js

@@ -0,0 +1 @@
+export const {$ doc.serviceName $} = {$ doc.value | json $};

docs/templates/decorator.template.html

@@ -0,0 +1,44 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' %}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Description</h2>
+  <div class="code-links" flex="80" flex-xs="100">
+    {%- if not doc.notYetDocumented %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+  </div>
+</div>
+{% if doc.metadataDoc and doc.metadataDoc.members.length %}
+<div layout="row" layout-xs="column" class="metadata" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Metadata Properties</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {% for metadata in doc.metadataDoc.members %}{% if not metadata.internal %}
+    <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ metadata.name $}') }">
+      <code class="api-doc-code">
+        {$ metadata.name $}{$ params.paramList(metadata.parameters) | indent(8, false) | trim $}{$ params.returnType(metadata.returnType) $}
+      </code>
+    </pre>
+    {%- if not metadata.notYetDocumented %}{$ metadata.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}{% endif -%}
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}

docs/templates/directive.template.html

@@ -0,0 +1,62 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'class.template.html' -%}
+
+{% block annotations %}
+{% endblock %}
+
+{% block additional -%}
+
+{%- if doc.directiveOptions.selector.split(',').length %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Selectors</h2>
+  <div flex="80" flex-xs="100">
+    {% for selector in doc.directiveOptions.selector.split(',') %}
+    <p class="selector">
+      <code>{$ selector $}</code>
+    </p>
+    {% endfor %}
+{% endif %}
+
+{% if doc.outputs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Outputs</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+  {% for binding, property in doc.outputs %}
+    <div class="code-margin">
+      <code>{$ property.bindingName $}&nbsp;bound to&nbsp;</code>
+      <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code
+    </div>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if doc.inputs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Inputs</h2>
+  <div flex="80" flex-xs="100">
+    {% for binding, property in doc.inputs %}
+    <div class="code-margin">
+      <code>{$ property.bindingName $}&nbsp;bound to&nbsp;</code>
+      <code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+    {$ property.memberDoc.description | trimBlankLines | marked $}
+    {% endfor %}
+{% endif %}
+
+{%- if doc.directiveOptions.exportAs %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Exported as</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    <p class="input">
+      <code>{$ doc.directiveOptions.exportAs $}</code>
+    </p>
+{% endif %}
+{% endblock %}

docs/templates/enum.template.html

@@ -0,0 +1 @@
+{% extends 'class.template.html' -%}

docs/templates/example-region.template.html

@@ -0,0 +1,7 @@
+<div class="code-example">
+{% marked %}
+```
+{$ doc.contents $}
+```
+{% endmarked %}
+</div>

docs/templates/function.template.html

@@ -0,0 +1,31 @@
+{% import "lib/githubLinks.html" as github -%}
+{% import "lib/paramList.html" as params -%}
+{% extends 'layout/base.template.html' -%}
+
+{% block body %}
+
+
+{% include "layout/_what-it-does.html" %}
+
+{% include "layout/_security-notes.html" %}
+
+{% include "layout/_deprecated-notes.html" %}
+
+{% include "layout/_how-to-use.html" %}
+
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Class Export</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    <pre class="prettyprint no-bg">
+      <code>
+        export {$ doc.name $}{$ params.paramList(doc.parameters) | indent(8, true) | trim $}{$ params.returnType(doc.returnType) $}
+      </code>
+    </pre>
+    {%- if not doc.notYetDocumented %}{$ doc.description | trimBlankLines | marked $}{% endif %}
+
+<p class="location-badge">
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } defined in {$ github.githubViewLink(doc, versionInfo) $}
+</p>
+{% endblock %}