build(aio): refactor API templates for clean start

aio/tools/transforms/templates/api/base.template.html

@@ -0,0 +1,13 @@
+<article>
+  <header class="api-header">
+    <h1>{$ doc.name $}</h1>
+    <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
+    {% if doc.deprecated %}<label class="api-status-label deprecated">deprecated</label>{% endif %}
+    {% if doc.experimental %}<label class="api-status-label experimental">experimental</label>{% endif %}
+    {% if doc.stable %}<label class="api-status-label stable">stable</label>{% endif %}
+    <span class="version">{$ version $}</span>
+  </header>
+
+  {% block body %}{% endblock %}
+
+</article>

aio/tools/transforms/templates/api/class.template.html

@@ -0,0 +1,14 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+
+{% include "includes/class-overview.html" %}
+{% block additional %}{% endblock %}
+{% include "includes/description.html" %}
+{% include "includes/annotations.html" %}
+{% include "includes/statics.html" %}
+{% include "includes/constructor.html" %}
+{% include "includes/members.html" %}
+
+{% endblock %}

aio/tools/transforms/templates/api/decorator.template.html

@@ -0,0 +1,7 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' %}
+
+{% block details %}
+  {% include "includes/description.html" %}
+  {% include "includes/metadata.html" %}
+{% endblock %}

aio/tools/transforms/templates/api/directive.template.html

@@ -0,0 +1,9 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'class.template.html' -%}
+
+{% block additional -%}
+  {% include "includes/selectors.html" %}
+  {% include "includes/outputs.html" %}
+  {% include "includes/inputs.html" %}
+  {% include "includes/export-as.html" %}
+{% endblock %}

aio/tools/transforms/templates/api/export-base.template.html

@@ -0,0 +1,10 @@
+{% extends 'base.template.html' -%}
+
+{% block body %}
+  {% include "includes/what-it-does.html" %}
+  {% include "includes/info-bar.html" %}
+  {% include "includes/security-notes.html" %}
+  {% include "includes/deprecation.html" %}
+  {% include "includes/how-to-use.html" %}
+  {% block details %}{% endblock %}
+{% endblock %}

aio/tools/transforms/templates/api/function.template.html

@@ -0,0 +1,9 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+  <code-example language="ts" hideCopy="true">
+  function {$ doc.name $}{$ params.paramList(doc.parameters) $}: {$ doc.returnType or 'any' $};
+  </code-example>
+  {% include "includes/description.html" %}
+{% endblock %}

aio/tools/transforms/templates/api/includes/annotations.html

@@ -0,0 +1,9 @@
+{%- if doc.decorators.length %}
+<section class="annotations">
+  <h2>Annotations</h2>
+  {%- for decorator in doc.decorators %}
+    <code-example hideCopy="true">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</code-example>
+    {% if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
+  {% endfor %}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -0,0 +1,17 @@
+{% macro renderMember(member) %}{% if not member.internal -%}
+<a class="code-anchor" href="#{$ member.name $}">{$ member.name $}</a> {$ params.paramList(member.parameters) | indent(4, false) | trim() $}{$ params.returnType(member.returnType) $}
+{%- endif %}{% endmacro -%}
+
+<section class="class-overview">
+  <h2>Overview</h2>
+  <code-example language="ts" hideCopy="true">
+  {$ doc.docType $} {$ doc.name $} {$ doc.heritage $} {
+  {%- if doc.statics.length %}{% for member in doc.statics %}
+    static {$ renderMember(member) $}{% endfor %}{% endif %}
+  {%- if doc.constructorDoc %}
+    {$ renderMember(doc.constructorDoc) $}{% endif %}
+  {%- if doc.members.length %}{% for member in doc.members %}
+    {$ renderMember(member) $}{% endfor %}{% endif %}
+  }
+  </code-example>
+</section>

aio/tools/transforms/templates/api/includes/constructor.html

@@ -0,0 +1,8 @@
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<section class="constructor">
+  <a id="{$ doc.constructorDoc.name $}"></a>
+  <h2>Constructor</h2>
+  <code-example hideCopy="true">{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) $}</code-example>
+  {% if not doc.constructorDoc.notYetDocumented %}{$ doc.constructorDoc.description | marked $}{% endif %}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/deprecation.html

@@ -0,0 +1,6 @@
+{% if doc.deprecated %}
+<section class="deprecated">
+  <h2>Deprecation Notes</h2>
+  {$ doc.deprecated | marked $}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/description.html

@@ -0,0 +1,6 @@
+{% if doc.description %}
+<section class="description">
+  <h2>Description</h2>
+  {$ doc.description | trimBlankLines | marked $}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/export-as.html

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

aio/tools/transforms/templates/api/includes/how-to-use.html

@@ -0,0 +1,6 @@
+{% if doc.howToUse %}
+<section class="how-to-use">
+  <h2>How To Use</h2>
+  {$ doc.howToUse | marked $}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/inputs.html

@@ -1,5 +1,5 @@
 {% if doc.inputs %}
-<div class="inputs api-section">
+<section class="inputs">
   <h2>Inputs</h2>
   {% for binding, property in doc.inputs %}
   <div class="input">
@@ -7,5 +7,5 @@
     {$ property.memberDoc.description | trimBlankLines | marked $}
   </div>
   {% endfor %}
-</div>
+</section>
 {% endif %}

aio/tools/transforms/templates/api/includes/interface-overview.html

@@ -0,0 +1,8 @@
+<section class="interface-overview">
+  <h2>Interface Overview</h2>
+  <code-example language="ts" hideCopy="true">
+  interface {$ doc.name $} {$ doc.heritage $} { {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+    <a class="code-anchor" href="#{$ member.name $}">{$ member.name | indent(6, false) | trim $}</a> {$ params.paramList(member.parameters) | indent(8, false) | trim $}{$ params.returnType(member.returnType) $}{% endif %}{% endfor %}{% endif %}
+  }
+  </code-example>
+</section>

aio/tools/transforms/templates/api/includes/members.html

@@ -0,0 +1,19 @@
+{% if doc.members.length %}
+<section class="member-members">
+  <h2>Members</h2>
+  {% for member in doc.members %}{% if not member.internal %}
+    <div class="instance-member">
+      <a id="{$ member.name $}"></a>
+      <code-example hideCopy="true">{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code-example>
+      {%- if not member.notYetDocumented %}
+      {$ member.description | marked $}
+      {% endif %}
+    </div>
+
+    {% if not loop.last %}
+    <hr>
+    {% endif %}
+
+  {% endif %}{% endfor %}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/metadata.html

@@ -1,15 +1,13 @@
 {% if doc.members.length %}
-<div class="meta-data api-section">
+<section class="meta-data">
   <h2>Metadata Properties</h2>
     {% for metadata in doc.members %}{% if not metadata.internal %}
     <div class="metadata-member">
-      <a name="{$ metadata.name $}-anchor" class="anchor-offset"></a>
-      <pre>
-        <code>{$ metadata.name $}{$ params.paramList(metadata.parameters) | trim $}{$ params.returnType(metadata.returnType) $}</code>
-      </pre>
-      {%- if not metadata.notYetDocumented %}{$ metadata.description | trimBlankLines | marked $}{% endif -%}
+      <a name="{$ metadata.name $}" class="anchor-offset"></a>
+      <code-example hideCopy="true">{$ metadata.name $}{$ params.paramList(metadata.parameters) | trim $}{$ params.returnType(metadata.returnType) $}</code-example>
+      {%- if not metadata.notYetDocumented %}{$ metadata.description | marked $}{% endif -%}
     </div>
     {% if not loop.last %}<hr class="hr-margin">{% endif %}
   {% endif %}{% endfor %}
-</div>
+</section>
 {% endif %}

aio/tools/transforms/templates/api/includes/outputs.html

@@ -1,5 +1,5 @@
 {% if doc.outputs %}
-<div class="outputs">
+<section class="outputs">
   <h2>Outputs</h2>
   {% for binding, property in doc.outputs %}
   <div class="output">
@@ -7,5 +7,5 @@
     {$ property.memberDoc.description | trimBlankLines | marked $}
   </div>
   {% endfor %}
-</div>
+</section>
 {% endif %}

aio/tools/transforms/templates/api/includes/security-notes.html

@@ -0,0 +1,6 @@
+{% if doc.security %}
+<section "security">
+  <h2>Security Risk</h2>
+  {$ doc.security | marked $}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/selectors.html

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

aio/tools/transforms/templates/api/includes/statics.html

@@ -0,0 +1,19 @@
+{% if doc.statics.length %}
+<section class="static-members">
+  <h2>Static Members</h2>
+  {% for member in doc.statics %}{% if not member.internal %}
+    <div class="static-member">
+      <a id="{$ member.name $}"></a>
+      <code-example hideCopy="true">{$ member.name $}{$ params.paramList(member.parameters) | trim $}{$ params.returnType(member.returnType) $}</code-example>
+      {%- if not member.notYetDocumented %}
+      {$ member.description | marked $}
+      {% endif %}
+    </div>
+
+    {% if not loop.last %}
+    <hr>
+    {% endif %}
+
+  {% endif %}{% endfor %}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/what-it-does.html

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

aio/tools/transforms/templates/api/interface.template.html

@@ -0,0 +1,9 @@
+{% import "lib/paramList.html" as params -%}
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+  {% include "includes/interface-overview.html" %}
+  {% include "includes/description.html" %}
+  <!-- TODO include callMember and newMember -->
+  {% include "includes/members.html" %}
+{% endblock %}

aio/tools/transforms/templates/api/module.template.html

@@ -0,0 +1,16 @@
+{% extends 'base.template.html' -%}
+
+{% block body -%}
+
+{% include "includes/deprecation.html" %}
+{% include "includes/description.html" %}
+
+<section class="export-list">
+  <ul>
+    {% for export in doc.exports -%}
+    <li><a href="{$ export.path $}">{$ export.name $}</a></li>
+    {%- endfor %}
+  </ul>
+</section>
+
+{%- endblock %}

aio/tools/transforms/templates/api/pipe.template.html

@@ -0,0 +1,8 @@
+{% extends 'export-base.template.html' -%}
+
+{% block details %}
+{% include "includes/description.html" %}
+<div class="pipe-properties">
+  {% if doc.pipeOptions.pure == "true" %}<label class="pipe-type-label pure">pure</label>{% endif %}
+</div>
+{% endblock %}

aio/tools/transforms/templates/api/type-alias.template.html

@@ -0,0 +1,8 @@
+{% extends 'export-base.template.html' %}
+
+{% block details %}
+  <code-example language="ts" hideCopy="true">
+  type {$ doc.name $} = {$ doc.typeDefinition $};
+  </code-example>
+  {% include "includes/description.html" %}
+{% endblock %}

aio/tools/transforms/templates/api/var.template.html

@@ -0,0 +1,8 @@
+{% extends 'export-base.template.html' %}
+
+{% block details %}
+  <code-example language="ts" hideCopy="true">
+  const {$ doc.name $}: {$ doc.symbolTypeName or 'any' $};
+  </code-example>
+  {% include "includes/description.html" %}
+{% endblock %}

aio/tools/transforms/templates/class.template.html

@@ -1,14 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-<div class="api-container">
-  {% include "includes/_class-overview.html" %}
-  {% block additional %}{% endblock %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_annotations.html" %}
-  {% include "includes/_constructor.html" %}
-  {% include "includes/_statics.html" %}
-  {% include "includes/_members.html" %}
-</div>
-{% endblock %}

aio/tools/transforms/templates/decorator.template.html

@@ -1,7 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' %}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_metadata.html" %}
-{% endblock %}

aio/tools/transforms/templates/directive.template.html

@@ -1,9 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'class.template.html' -%}
-
-{% block additional -%}
-  {% include "includes/_selectors.html" %}
-  {% include "includes/_outputs.html" %}
-  {% include "includes/_inputs.html" %}
-  {% include "includes/_export-as.html" %}
-{% endblock %}

aio/tools/transforms/templates/function.template.html

@@ -1,6 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-{% endblock %}

aio/tools/transforms/templates/includes/_annotations.html

@@ -1,11 +0,0 @@
-{%- if doc.decorators.length %}
-<div class="annotations api-section">
-    <h2>Annotations</h2>
-    {%- 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>
-{% endif %}

aio/tools/transforms/templates/includes/_constructor.html

@@ -1,14 +0,0 @@
-{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-<div class="constructor api-section">
-  <h2>Constructor</h2>
-  <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>
-{% endif %}

aio/tools/transforms/templates/includes/_deprecated-notes.html

@@ -1,11 +0,0 @@
-{% 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 %}

aio/tools/transforms/templates/includes/_description.html

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

aio/tools/transforms/templates/includes/_how-to-use.html

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

aio/tools/transforms/templates/includes/_interface-overview.html

@@ -1,19 +0,0 @@
-<div 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>
-</div>

aio/tools/transforms/templates/includes/_members.html

@@ -1,19 +0,0 @@
-<!-- **** This is being duplicated - already in class overview content **** -->
-
-<!--{% if doc.members.length %}
-<div class="instance-members api-section">
-  <h2>Class Details</h2>
-  {% 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>
-{% endif %}-->

aio/tools/transforms/templates/includes/_ng-module.html

@@ -1,8 +0,0 @@
-<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>

aio/tools/transforms/templates/includes/_security-notes.html

@@ -1,10 +0,0 @@
-{% 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 %}

aio/tools/transforms/templates/includes/_statics.html

@@ -1,21 +0,0 @@
-{% if doc.statics.length %}
-<div class="static-members api-section">
-    <h2>Static Members</h2>
-  {% 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>
-{% endif %}

aio/tools/transforms/templates/includes/_title.html

@@ -1,8 +0,0 @@
-<!-- PAGE HERO -->
-<header class="api-header">
-  <h1>{$ doc.name $}</h1>
-  <div class="api-type-label {$ doc.docType $}">
-    <label>{$ doc.docType $}</label>
-  </div>
-  <span class="version">{$ angular.version $}</span>
-</header>

aio/tools/transforms/templates/includes/_what-it-does.html

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

aio/tools/transforms/templates/interface.template.html

@@ -1,8 +0,0 @@
-{% import "lib/paramList.html" as params -%}
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-  {% include "includes/_interface-overview.html" %}
-  {% include "includes/_description.html" %}
-  {% include "includes/_members.html" %}
-{% endblock %}

aio/tools/transforms/templates/layout/api-base.template.html

@@ -1,11 +0,0 @@
-{% extends 'layout/base.template.html' -%}
-
-{% block body %}
-  <aio-jump-nav></aio-jump-nav>
-  {% include "includes/_what-it-does.html" %}
-  {% include "includes/_info-bar.html" %}
-  {% include "includes/_security-notes.html" %}
-  {% include "includes/_deprecated-notes.html" %}
-  {% include "includes/_how-to-use.html" %}
-  {% block details %}{% endblock %}
-{% endblock %}

aio/tools/transforms/templates/layout/base.template.html

@@ -1,4 +0,0 @@
-<article>
-  {% include "includes/_title.html" %}
-  {% block body %}{% endblock %}
-</article>

aio/tools/transforms/templates/module.template.html

@@ -1,12 +0,0 @@
-{% extends 'layout/base.template.html' -%}
-
-{% block body -%}
-<ul>
-  {% for page in doc.childPages -%}
-  <li>
-    <!-- TODO: convert to hovercard -->
-    <a href="{$ relativePath(doc.moduleFolder, page.exportDoc.path) $}">{$ page.title $}</a>
-  </li>
-  {% endfor %}
-</ul>
-{% endblock %}

aio/tools/transforms/templates/pipe.template.html

@@ -1,5 +0,0 @@
-{% extends 'layout/api-base.template.html' -%}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-{% endblock %}

aio/tools/transforms/templates/type-alias.template.html

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

aio/tools/transforms/templates/var.template.html

@@ -1,5 +0,0 @@
-{% extends 'layout/api-base.template.html' %}
-
-{% block details %}
-  {% include "includes/_description.html" %}
-{% endblock %}