Merge pull request #1 from asyncapi/feature/add-html-template

Add HTML template (from asyncapi-docgen package)

templates/html/.helpers/handlebars.js

@@ -0,0 +1,41 @@
+const Handlebars = require('handlebars');
+
+Handlebars.registerHelper('concat', (str1, str2, separator) => {
+  return `${str1 || ''}${separator || ''}${str2 || ''}`;
+});
+
+Handlebars.registerHelper('tree', path => {
+  if (!path) return;
+
+  const levels = path.split('.').length;
+  let result = '';
+
+  if (levels > 0) {
+    result = '<span class="tree-space"></span>'.repeat(levels-1);
+  }
+
+  return `${result}<span class="tree-leaf"></span>`;
+});
+
+Handlebars.registerHelper('equal', (lvalue, rvalue, options) => {
+  if (arguments.length < 3)
+    throw new Error('Handlebars Helper equal needs 2 parameters');
+  if (lvalue!==rvalue) {
+    return options.inverse(this);
+  }
+
+  return options.fn(this);
+});
+
+Handlebars.registerHelper('inc', (number) => {
+  return number + 1;
+});
+
+Handlebars.registerHelper('log', (something) => {
+  console.log(require('util').inspect(something, { depth: null }));
+});
+
+Handlebars.registerHelper('contains', (array, element) => {
+  if (!array) return false;
+  return array.indexOf(element) >= 0;
+})

templates/html/.partials/content.html

@@ -0,0 +1,5 @@
+{{> info}}
+{{> security}}
+{{~> topics ~}}
+{{> messages}}
+{{> schemas}}

templates/html/.partials/info.html

@@ -0,0 +1,81 @@
+<a name="info"></a>
+<h1>{{asyncapi.info.title}} {{asyncapi.info.version}}</h1>
+
+<p>{{{asyncapi.info.descriptionAsHTML}}}</p>
+
+{{#if asyncapi.info.termsOfService}}
+<a name="termsOfService"></a>
+<h2 class="info__terms-of-service__header">Terms of service</h2>
+<p><a href="{{asyncapi.info.termsOfService}}" target="_blank">{{asyncapi.info.termsOfService}}</a></p>
+{{/if}}
+
+{{#if asyncapi.servers}}
+  <a name="connectionDetails"></a>
+  <h2 class="info__servers__header">Connection details</h2>
+
+  <table class="table">
+    <thead class="table__head">
+      <tr class="table__head__row">
+        <th class="table__head__cell">URL</th>
+        <th class="table__head__cell">Scheme</th>
+        <th class="table__head__cell">Description</th>
+      </tr>
+    </thead>
+    <tbody class="table__body">
+    {{#each asyncapi.servers as |server|}}
+      <tr class="table__body__row">
+        <td class="table__body__cell">{{#if server.variables}}<div class="table__expand" data-index={{@index}}></div>{{/if}}{{server.url}}</td>
+        <td class="table__body__cell">{{server.scheme}}</td>
+        <td class="table__body__cell">{{{server.descriptionAsHTML}}}</td>
+      </tr>
+
+      {{#if server.variables}}
+      <tr class="table__body__row--with-nested" data-nested-index={{@index}}>
+        <td colspan="3">
+          <table class="table table--nested">
+            <thead class="table__head table--nested__head">
+              <tr>
+                <td class="table--nested__header" colspan="4">URL Variables</td>
+              </tr>
+              <tr class="table__head__row table--nested__head__row">
+                <th class="table__head__cell table--nested__head__cell">Name</th>
+                <th class="table__head__cell table--nested__head__cell">Default value</th>
+                <th class="table__head__cell table--nested__head__cell">Possible values</th>
+                <th class="table__head__cell table--nested__head__cell">Description</th>
+              </tr>
+            </thead>
+            <tbody class="table__body table--nested__body">
+              {{#each server.variables as |var|}}
+              <tr class="table__body__row table--nested__body__row">
+                <td class="table__body__cell table--nested__body__cell">{{@key}}</td>
+                <td class="table__body__cell table--nested__body__cell">
+                  {{#if var.default}}
+                    {{var.default}}
+                  {{else}}
+                    <em>None</em>
+                  {{/if}}
+                </td>
+                <td class="table__body__cell table--nested__body__cell">
+                  {{#if var.enum}}
+                  <ul class="info__server__enum-list">
+                    {{#each var.enum as |value|}}
+                    <li>{{value}}</li>
+                    {{/each}}
+                  </ul>
+                  {{else}}
+                    Any
+                  {{/if}}
+                </td>
+                <td class="table__body__cell table--nested__body__cell">{{{var.descriptionAsHTML}}}</td>
+              </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </td>
+      </tr>
+      {{/if}}
+    {{/each}}
+
+    </tbody>
+  </table>
+{{/if}}

templates/html/.partials/message.html

@@ -0,0 +1,48 @@
+<a name="message-{{messageName}}"></a>
+<div class="message">
+  <h3 class="message__header">
+    {{messageName}}
+    {{#if message.deprecated}}
+    <span class="operation-badge operation-badge--deprecated message__header__operation-badge">Deprecated</span>
+    {{/if}}
+  </h3>
+  {{{message.summaryAsHTML}}}
+  {{{message.descriptionAsHTML}}}
+
+  {{#if message.headers}}
+  <h4>Headers</h4>
+
+  {{> schema schema=message.headers schemaName='Message Headers' hideTitle=true}}
+  {{/if}}
+
+
+  {{#unless message.example}}
+  {{#if message.generatedHeadersExample}}
+    <h4>Example of headers <em>(generated)</em></h4>
+
+    <pre class="hljs"><code class="json">{{~message.generatedHeadersExample~}}</code></pre>
+  {{/if}}
+  {{/unless}}
+
+  <h4>Payload</h4>
+
+  {{> schema schema=message.payload schemaName='Message Payload' hideTitle=true}}
+
+  {{#if message.example}}
+  <h4>Example</h4>
+
+  <pre class="hljs"><code class="json">{{~message.formattedExample~}}</code></pre>
+  {{else}}
+    {{#if message.generatedPayloadExample}}
+    <h4>Example of payload <em>(generated)</em></h4>
+
+    <pre class="hljs"><code class="json">{{~message.generatedPayloadExample~}}</code></pre>
+    {{/if}}
+  {{/if}}
+
+{{#if operation.tags}}
+<h4>Tags</h4>
+
+{{> tags tags=operation.tags}}
+{{/if}}
+</div>

templates/html/.partials/messages.html

@@ -0,0 +1,5 @@
+<h2 class="section-header">Messages</h2>
+
+{{#each asyncapi.components.messages}}
+  {{~>message message=. messageName=@key~}}
+{{/each}}

templates/html/.partials/operation.html

@@ -0,0 +1,40 @@
+<div class="operation {{cssClasses}}">
+{{{operation.summaryAsHTML}}}
+{{{operation.descriptionAsHTML}}}
+
+{{#if operation.headers}}
+<h4>Headers</h4>
+
+{{> schema schema=operation.headers schemaName='Message Headers' hideTitle=true}}
+
+{{#unless operation.example}}
+{{#if operation.generatedHeadersExample}}
+  <h4>Example of headers <em>(generated)</em></h4>
+
+  <pre class="hljs"><code class="json">{{~operation.generatedHeadersExample~}}</code></pre>
+{{/if}}
+{{/unless}}
+{{/if}}
+
+<h4>Payload</h4>
+
+{{> schema schema=operation.payload schemaName='Message Payload' hideTitle=true}}
+
+{{#if operation.example}}
+<h4>Example</h4>
+
+<pre class="hljs"><code class="json">{{~operation.formattedExample~}}</code></pre>
+{{else}}
+  {{#if operation.generatedPayloadExample}}
+  <h4>Example of payload <em>(generated)</em></h4>
+
+  <pre class="hljs"><code class="json">{{~operation.generatedPayloadExample~}}</code></pre>
+  {{/if}}
+{{/if}}
+
+{{#if operation.tags}}
+<h4>Tags</h4>
+
+{{> tags tags=operation.tags}}
+{{/if}}
+</div>

templates/html/.partials/parameters.html

@@ -0,0 +1,18 @@
+<a name="parameters-{{topicName}}"></a>
+<div class="parameters">
+  {{#unless hideTitle}}
+  <h4>Topic Parameters</h4>
+  {{/unless}}
+
+  {{#each params as |param|}}
+    {{#if param.name}}
+    <h4>{{param.name}}</h4>
+    {{/if}}
+
+    {{#if param.descriptionAsHTML}}
+    <p>{{{param.descriptionAsHTML}}}</p>
+    {{/if}}
+
+    {{~> schema schema=param.schema schemaName=param.name hideTitle=true ~}}
+  {{/each}}
+</div>

templates/html/.partials/schema-prop.html

@@ -0,0 +1,35 @@
+<tr class="table__body__row">
+  <td class="table__body__cell">{{{tree path}}}{{propName}} {{#if required}}<span class="required-badge">(Required)</span>{{/if}}</td>
+  <td class="table__body__cell">{{prop.title}}</td>
+  <td class="table__body__cell">
+    {{prop.type}}
+    {{#if prop.anyOf}}anyOf{{/if}}
+    {{#if prop.oneOf}}oneOf{{/if}}
+    {{#if prop.items.type}}({{prop.items.type}}){{/if}}
+  </td>
+  <td class="table__body__cell">{{prop.format}}</td>
+  <td class="table__body__cell">{{prop.default}}</td>
+  <td class="table__body__cell">{{prop.description}}</td>
+</tr>
+{{#if prop.anyOf}}
+  {{#each prop.anyOf}}
+    {{> schemaProp prop=. propName=@key path=(concat ../path @key '.') required=(contains ../prop.required @key)}}
+  {{/each}}
+{{/if}}
+{{#if prop.oneOf}}
+  {{#each prop.oneOf}}
+    {{> schemaProp prop=. propName=@key path=(concat ../path @key '.') required=(contains ../prop.required @key)}}
+  {{/each}}
+{{/if}}
+{{#if prop.properties}}
+  {{#each prop.properties}}
+  {{> schemaProp prop=. propName=@key path=(concat ../path @key '.') required=(contains ../prop.required @key)}}
+  {{/each}}
+{{/if}}
+{{#if prop.items}}
+  {{#if prop.items.properties}}
+    {{#each prop.items.properties}}
+    {{> schemaProp prop=. propName=@key path=(concat ../path @key '.') required=(contains ../prop.items.required @key)}}
+    {{/each}}
+  {{/if}}
+{{/if}}

templates/html/.partials/schema.html

@@ -0,0 +1,38 @@
+<a name="schema-{{schemaName}}"></a>
+<div class="schema">
+  {{#unless hideTitle}}
+  <h4>{{schemaName}}</h4>
+  {{/unless}}
+
+  <table class="table">
+    <thead class="table__head">
+      <tr class="table__head__row">
+        <th class="table__head__cell">Name</th>
+        <th class="table__head__cell">Title</th>
+        <th class="table__head__cell">Type</th>
+        <th class="table__head__cell">Format</th>
+        <th class="table__head__cell">Default</th>
+        <th class="table__head__cell">Description</th>
+      </tr>
+    </thead>
+    <tbody class="table__body">
+      {{#each schema.properties}}
+        {{> schemaProp prop=. propName=@key required=(contains ../schema.required @key)}}
+      {{else}}
+        {{> schemaProp prop=schema propName=schemaName required=(contains ../schema.required @key)}}
+      {{/each}}
+    </tbody>
+  </table>
+
+{{#if schema.example}}
+<h4>Example</h4>
+
+<pre class="hljs"><code class="json">{{~schema.formattedExample~}}</code></pre>
+{{else}}
+  {{#if schema.generatedExample}}
+  <h4>Example <em>(generated)</em></h4>
+
+  <pre class="hljs"><code class="json">{{~schema.generatedExample~}}</code></pre>
+  {{/if}}
+{{/if}}
+</div>

templates/html/.partials/schemas.html

@@ -0,0 +1,5 @@
+<h2 class="section-header">Schemas</h2>
+
+{{#each asyncapi.components.schemas}}
+  {{~>schema schema=. schemaName=@key~}}
+{{/each}}

templates/html/.partials/security.html

@@ -0,0 +1,30 @@
+{{#if asyncapi._security}}
+<a name="security"></a>
+<h2 class="security__header">Security</h2>
+
+<table class="table">
+  <thead class="table__head">
+    <tr class="table__head__row">
+      <th class="table__head__cell">Type</th>
+      <th class="table__head__cell">In</th>
+      <th class="table__head__cell">Name</th>
+      <th class="table__head__cell">Scheme</th>
+      <th class="table__head__cell">Format</th>
+      <th class="table__head__cell">Description</th>
+    </tr>
+  </thead>
+  <tbody class="table__body">
+  {{#each asyncapi._security as |security|}}
+    <tr class="table__body__row">
+      <td class="table__body__cell">{{security.type}}</td>
+      <td class="table__body__cell">{{security.in}}</td>
+      <td class="table__body__cell">{{security.name}}</td>
+      <td class="table__body__cell">{{security.scheme}}</td>
+      <td class="table__body__cell">{{security.bearerFormat}}</td>
+      <td class="table__body__cell">{{{security.descriptionAsHTML}}}</td>
+    </tr>
+  {{/each}}
+
+  </tbody>
+</table>
+{{/if}}

templates/html/.partials/tags.html

@@ -0,0 +1,7 @@
+<div class="tags">
+{{#each tags}}
+  <div class="tags__tag">{{./name}}</div>
+{{else}}
+  <div class="tags__no-tags">No tags</div>
+{{/each}}
+</div>