build(aio): remove formatting and styles from dgeni templates

Much of the formatting was hardcoded and copied from the old anguar.io
jade files. This gives us a clean start.

Also, more use has been made of include files to make the templates
easier to understand and manage.

docs/templates/includes/_annotations.html

@@ -0,0 +1,13 @@
+{%- if doc.decorators.length %}
+<section class="annotations">
+  <h2>Annotations</h2>
+  <div class="annotation">
+    {%- for decorator in doc.decorators %}
+      <pre class="prettyprint no-bg">
+        <code>@{$ decorator.name $}{$ params.paramList(decorator.arguments) | indent(10, false) $}</code>
+      </pre>
+      {%- if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_class-overview.html

@@ -0,0 +1,40 @@
+<section class="class-overview">
+  <h2>Class Overview</h2>
+  <div class="api-doc-code">
+
+    <code class="no-bg openParens">class {$ doc.name $} {</code>
+
+    {% if doc.statics.length %}
+    <div class="statics">
+      {% for member in doc.statics %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent"><code>static
+          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+        </code></pre>
+      {% endif %}{% endfor %}
+    </div>
+    {% endif %}
+
+
+    {% if doc.constructorDoc.name %}
+    <div class="constructor">
+      <pre class="prettyprint no-bg-with-indent"><code>
+        <a class="code-anchor" href="#constructor">{$ doc.constructorDoc.name $}</a>
+          {$ params.paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+      </code></pre>
+    </div>
+    {% endif %}
+
+    {% if doc.members.length %}
+    <div class="members">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent"><code>
+          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+        </code></pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+
+    <code class="endParens api-doc-code no-bg">}</code>
+  </div>
+</section>

docs/templates/includes/_constructor.html

@@ -0,0 +1,16 @@
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<section class="constructor">
+  <h2>Constructor</h2>
+  <div class="description">
+    <a name="constructor" class="anchor-offset"></a>
+    <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }">
+      <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 %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_deprecated-notes.html

@@ -0,0 +1,11 @@
+{% if doc.showDeprecatedNotes %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Deprecation Notes</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {%- if doc.deprecated %}{$ doc.deprecated | marked $}
+    {% else %}<em>Not yet documented</em>{% endif %}
+  </div>
+</div>
+{% endif %}

docs/templates/includes/_description.html

@@ -0,0 +1,9 @@
+<section class="l-content-block">
+  <h3 class="text-display-1" id="api-description">
+    Description
+    <a href="#api-description" class="header-link"><i class="material-icons">link</i></a>
+  </h3>
+  {%- if doc.description.length > 2 %}
+  {$ doc.description | trimBlankLines | marked $}
+  {% endif %}
+</section>

docs/templates/includes/_export-as.html

@@ -0,0 +1,10 @@
+{%- if doc.directiveOptions.exportAs %}
+<section class="export-as">
+  <h2>Exported as</h2>
+  <div class="description">
+    <p>
+      <code>{$ doc.directiveOptions.exportAs $}</code>
+    </p>
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_how-to-use.html

@@ -0,0 +1,9 @@
+{%- if doc.howToUse %}
+  <!-- QUICK REFERENCE CODE EXAMPLE -->
+  <section class="how-to-use">
+    <h2>How To Use</h2>
+    <div class="description">
+      {$ doc.howToUse | marked $}
+    </div>
+  </section>
+{% endif %}

docs/templates/includes/_info-bar.html

@@ -0,0 +1,18 @@
+{% import "lib/githubLinks.html" as github -%}
+
+<!-- INFO BAR -->
+<div class="info-bar">
+  <span class="info-bar-item is-left">
+    npm package: <a href="#">{$ doc.package $}</a>
+  </span>
+
+  <span class="info-bar-item is-left">
+    NgModule: <a href="#">{$ doc.moduleDoc.name $}</a>
+  </span>
+
+  <span class="info-bar-item is-right">
+    {$ github.githubViewLink(doc, versionInfo) $}
+  </span>
+
+  <i class="material-icons l-right">create</i>
+</div>

docs/templates/includes/_inputs.html

@@ -0,0 +1,13 @@
+{% if doc.inputs %}
+<section class="inputs">
+  <h2>Inputs</h2>
+  <div class="description">
+    {% for binding, property in doc.inputs %}
+    <div class="input">
+      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+      {$ property.memberDoc.description | trimBlankLines | marked $}
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_interface-overview.html

@@ -0,0 +1,19 @@
+<section class="class-overview">
+  <h2>Interface Overview</h2>
+  <div class="api-doc-code">
+
+    <code class="no-bg openParens">interface {$ doc.name $} {</code>
+
+    {% if doc.members.length %}
+    <div class="members">
+      {% for member in doc.members %}{% if not member.internal %}
+        <pre class="prettyprint no-bg-with-indent"><code>
+          <a class="code-anchor" href="#{$ member.name $}-anchor">{$ member.name | indent(6, false) | trim $}</a>
+          {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}
+        </code></pre>
+      {% endif %}{% endfor %}
+    {% endif %}
+
+    <code class="endParens api-doc-code no-bg">}</code>
+  </div>
+</section>

docs/templates/includes/_members.html

@@ -0,0 +1,19 @@
+{% if doc.members.length %}
+<section class="instance-members">
+  <h2>Class Details</h2>
+  <div class="description">
+    {% for member in doc.members %}{% if not member.internal %}
+    <div class="instance-member">
+      <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+      <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
+      </pre>
+      {%- if not member.notYetDocumented %}
+      {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+      {% endif -%}
+    </div>
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_metadata.html

@@ -0,0 +1,17 @@
+{% if doc.metadataDoc and doc.metadataDoc.members.length %}
+<section class="meta-data">
+  <h2>Metadata Properties</h2>
+  <div class="description">
+    {% for metadata in doc.metadataDoc.members %}{% if not metadata.internal %}
+    <div class="metadata-member">
+      <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
+      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ metadata.name $}') }">
+        <code>{$ metadata.name $}{$ params.paramList(metadata.parameters) | trim $}{$ params.returnType(metadata.returnType) $}</code>
+      </pre>
+      {%- if not metadata.notYetDocumented %}{$ metadata.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}{% endif -%}
+    </div>
+    {% if not loop.last %}<hr class="hr-margin">{% endif %}
+  {% endif %}{% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_ng-module.html

@@ -0,0 +1,8 @@
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">NgModule</h2>
+  </div>
+  <div class="code-links" flex="80" flex-xs="100">
+    {$ doc.ngModule $}
+  </div>
+</div>

docs/templates/includes/_outputs.html

@@ -0,0 +1,13 @@
+{% if doc.outputs %}
+<section class="outputs">
+  <h2>Outputs</h2>
+  <div class="description">
+  {% for binding, property in doc.outputs %}
+    <div class="output">
+      <code>{$ property.bindingName $}</code>&nbsp;bound to&nbsp;<code>{$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}</code>
+      {$ property.memberDoc.description | trimBlankLines | marked $}
+    </div>
+  {% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_security-notes.html

@@ -0,0 +1,10 @@
+{% if doc.showSecurityNotes and doc.security %}
+<div layout="row" layout-xs="column" class="row-margin ng-cloak">
+  <div flex="20" flex-xs="100">
+    <h2 class="h2-api-docs">Security Risk</h2>
+  </div>
+  <div flex="80" flex-xs="100">
+    {$ doc.security | marked $}
+  </div>
+</div>
+{% endif %}

docs/templates/includes/_selectors.html

@@ -0,0 +1,12 @@
+{%- if doc.directiveOptions.selector.split(',').length %}
+<section class="selectors">
+  <h2>Selectors</h2>
+  <div class="description">
+    {% for selector in doc.directiveOptions.selector.split(',') %}
+    <p class="selector">
+      <code>{$ selector $}</code>
+    </p>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_statics.html

@@ -0,0 +1,23 @@
+{% if doc.statics.length %}
+<section class="static-members">
+  <h2>Static Members</h2>
+  <div class="description">
+  {% for member in doc.statics %}{% if not member.internal %}
+    <div class="static-member">
+      <a name="{$ member.name $}-anchor" class="anchor-offset"></a>
+      <pre class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }">
+        <code>{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code>
+      </pre>
+      {%- if not member.notYetDocumented %}
+      {$ member.description | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines | marked $}
+      {% endif %}
+    </div>
+
+    {% if not loop.last %}
+    <hr class="hr-margin">
+    {% endif %}
+
+  {% endif %}{% endfor %}
+  </div>
+</section>
+{% endif %}

docs/templates/includes/_title.html

@@ -0,0 +1,6 @@
+<!-- PAGE HERO -->
+<header>
+  <h1>{$ doc.name $}</h1>
+  <h2>{$ doc.docType $}</h2>
+  <span class="version">{$ angular.version $}</span>
+</header>

docs/templates/includes/_what-it-does.html

@@ -0,0 +1,3 @@
+{%- if doc.whatItDoes %}
+<div class="what-it-does">{$ doc.whatItDoes | marked $}</div>
+{% endif %}