New API docummentation. (#544)

* Install hljs package. * Add highlight.js stylesheet and js to index.html. * Add new instructions for API documentation. * Add network value to code-template component. * Add curl examples. * Fix tab order of bisq api page. * Add esmodules instalation instructions. Add external links to repositories. * Add self-hosted hljs styles. * Add response code examples. Add dynamic networks to curl examples. Remove reponse code box if not needed. * Self hosted highlight.min.js. * Bumping "ws" dependency to fix vulnerability. * npm audit fix * npm audit fix * Remove Hightlight.js dependency. Add new style to code-template-component. * Remove hljs css. * Change NgbModule and NgbAccordionModule to shared * Fix NgbAccordionModule import.
2021-06-06 17:06:56 -03:00
parent 71bfcea8a6
commit 353b0e8729
11 changed files with 2219 additions and 240 deletions
--- a/frontend/src/app/components/api-docs/api-docs.component.html
+++ b/frontend/src/app/components/api-docs/api-docs.component.html
--- a/frontend/src/app/components/api-docs/api-docs.component.scss
+++ b/frontend/src/app/components/api-docs/api-docs.component.scss
@@ -14,3 +14,59 @@ tr {
 .nowrap {
  white-space: nowrap;
 }
+
+li.nav-item {
+  width: 100%;
+  @media (min-width: 676px){
+    width: auto;
+  }
+}
+
+.nav-tabs .nav-link.active {
+  border-bottom: 1px solid #fff;
+  @media (min-width: 676px){
+    border-bottom: 1px solid #11131f;
+  }
+}
+
+.code-tab { 
+  width: auto;
+  margin: 20px auto 10px;
+  li.nav-item {
+    width: auto;
+  }
+
+}
+
+.code {
+  .tab-content {
+    padding: 0px;
+  }
+  .nav-tabs .nav-link.active {
+    border-bottom: 1px solid #11131f;
+  }
+  .subtitle {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.description {
+  margin-top: 20px;
+}
+.title {
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 1.25rem;
+}
+.subtitle {
+  font-weight: bold;
+}
+.divider {
+  width: 100%;
+  margin: 30px auto;
+  height: 1px;
+  background: #333;
+}
+.websocket {
+  padding: 15px;
+}
--- a/frontend/src/app/components/api-docs/api-docs.component.ts
+++ b/frontend/src/app/components/api-docs/api-docs.component.ts
--- a/frontend/src/app/components/api-docs/code-template.component.html
+++ b/frontend/src/app/components/api-docs/code-template.component.html
@@ -0,0 +1,39 @@
+<div class="code">
+  <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
+    <li ngbNavItem>
+      <a ngbNavLink>ES Module</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Install Package <app-clipboard [text]="esModuleInstall"></app-clipboard></div>
+        <div class="links">
+          <a href="https://github.com/mempool/mempool.js">github repository</a>
+          <a href="https://www.npmjs.org/package/@mempool/mempool.js">npm package</a>
+        </div>
+        <pre><code [innerText]="esModuleInstall"></code></pre>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapESmodule(code.codeSample.esModule)"></app-clipboard></div>
+        <pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
+      </ng-template>
+    </li>
+    <li ngbNavItem>
+      <a ngbNavLink>Common JS</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapCommonJS(code.codeSample.commonJS)"></app-clipboard></div>
+        <div class="links">
+          <a href="https://github.com/mempool/mempool.js">github repository</a>
+        </div>
+        <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
+      </ng-template>
+    </li>
+    <li ngbNavItem *ngIf="code.codeSample.curl">
+      <a ngbNavLink>CURL</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapCurl(code.codeSample.curl)"></app-clipboard></div>
+        <pre><code [innerText]="wrapCurl(code.codeSample.curl)"></code></pre>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="navCodeTemplate"></div>
+  <div *ngIf="code.responseSample" class="response">
+    <div class="subtitle">Response <app-clipboard [text]="code.responseSample"></app-clipboard></div>
+    <pre><code [innerText]="code.responseSample"></code></pre>
+  </div>
+</div>
--- a/frontend/src/app/components/api-docs/code-template.component.scss
+++ b/frontend/src/app/components/api-docs/code-template.component.scss
@@ -0,0 +1,91 @@
+.text-small {
+  font-size: 12px;
+}
+
+code {
+  background-color: #1d1f31;
+  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+tr {
+  white-space: inherit;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+li.nav-item {
+  width: 100%;
+  @media (min-width: 676px){
+    width: auto;
+  }
+}
+
+.nav-tabs .nav-link.active {
+  border-bottom: 1px solid #fff;
+  @media (min-width: 676px){
+    border-bottom: 1px solid #11131f;
+  }
+}
+
+.code-tab { 
+  width: auto;
+  margin: 20px auto 10px;
+  li.nav-item {
+    width: auto;
+  }
+
+}
+
+.code {
+  .tab-content {
+    padding: 0px;
+  }
+  .nav-tabs .nav-link.active {
+    border-bottom: 1px solid #11131f;
+  }
+  .subtitle {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.description {
+  margin-top: 20px;
+}
+.title {
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 1.25rem;
+}
+.subtitle {
+  font-weight: bold;
+}
+.divider {
+  width: 100%;
+  margin: 30px auto;
+  height: 1px;
+  background: #333;
+}
+.websocket {
+  padding: 15px;
+}
+
+.links {
+  margin-bottom: 5px;
+  a {
+    font-size: 14px;
+    margin: 0px 10px 0px 0px;
+  }
+}
+
+pre {
+  display: block;
+  font-size: 87.5%;
+  color: #f18920;
+  background-color: #1d1f31;
+  padding: 30px;
+  code{
+    background-color: transparent;
+  }
+}
--- a/frontend/src/app/components/api-docs/code-template.component.ts
+++ b/frontend/src/app/components/api-docs/code-template.component.ts
@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-code-template',
+  templateUrl: './code-template.component.html',
+  styleUrls: ['./code-template.component.scss']
+})
+export class CodeTemplateComponent {
+  @Input() network: string;
+  @Input() code: {
+    codeSample: {
+      esModule: string;
+      commonJS: string;
+      curl: string;
+    },
+    responseSample: string;
+  };
+  hostname = document.location.hostname;
+  esModuleInstall = `# npm
+npm install @mempool/mempool.js --save
+
+# yarn
+yarn add @mempool/mempool.js`;
+
+  constructor(
+  ) { }
+
+  normalizeCodeHostname(code: string) {
+    let codeText: string;
+    if (this.network === 'bisq' || this.network === 'liquid'){
+      codeText = code.replace('%{1}', this.network);
+    }else{
+      codeText = code.replace('%{1}', 'bitcoin');
+    }
+    return codeText;
+  }
+
+  wrapESmodule(code: string) {
+    let codeText = this.normalizeCodeHostname(code);
+
+    if (this.network && this.network !== 'mainnet') {
+      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+    hostname: '${this.hostname}/${this.network}'
+  });` );
+    }
+
+    return `import mempoolJS from "@mempool/mempool.js";
+
+const init = async () => {
+  ${codeText}
+};
+init();`;
+  }
+
+  wrapCommonJS(code: string) {
+    let codeText = this.normalizeCodeHostname(code);
+
+    if (this.network && this.network !== 'mainnet') {
+      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+          hostname: '${this.hostname}/${this.network}'
+        });` );
+    }
+    return `<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://mempool.space/mempool.js"></script>
+    <script>
+      const init = async () => {
+        ${codeText}
+      };
+      init();
+    </script>
+  </head>
+  <body></body>
+</html>`;
+  }
+  wrapCurl(code: string) {
+    if (this.network && this.network !== 'mainnet') {
+      return code.replace('mempool.space/', `mempool.space/${this.network}/`);
+    }
+    return code;
+  }
+
+}