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>
+  </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>
+  </div>
   {% endfor %}
-</div>
+</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 %}