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 · 2021-06-06 17:06:56 -03:00 · 353b0e8729
commit 353b0e8729
parent 71bfcea8a6
11 changed files with 2219 additions and 240 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -5040,7 +5040,6 @@
      "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "peerDependencies": {
        "tslib": "^1.10.0"
      }
@ -5050,7 +5049,6 @@
      "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
      "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==",
      "dev": true,
-      "peer": true,
      "peerDependencies": {
        "rxjs": "^6.5.3",
        "tslib": "^1.10.0",
@ -24159,6 +24157,8 @@
      "integrity": "sha512-cOyGQgMdhnRYtW2xrJUNrNYDjEgwQ+BrE2y93Bwz3h4DJ6vJRLfupemU5N3pbYsUlBHJf0u1j1UGk+NLW4d97g==",
      "dev": true,
      "requires": {
+        "@angular/compiler": "9.0.0",
+        "@angular/core": "9.0.0",
        "app-root-path": "^3.0.0",
        "aria-query": "^3.0.0",
        "axobject-query": "2.0.2",
@ -24174,17 +24174,17 @@
      },
      "dependencies": {
        "@angular/compiler": {
-          "version": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz",
          "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==",
          "dev": true,
-          "peer": true,
          "requires": {}
        },
        "@angular/core": {
-          "version": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
          "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==",
          "dev": true,
-          "peer": true,
          "requires": {}
        },
        "source-map": {
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -47,6 +47,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
 import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
  faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
+import { CodeTemplateComponent } from './components/api-docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
@ -85,6 +86,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
    FeesBoxComponent,
    DashboardComponent,
    ApiDocsComponent,
+    CodeTemplateComponent,
    TermsOfServiceComponent,
    SponsorComponent,
  ],
--- 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;
+  }
+
+}
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@ -14,7 +14,7 @@ import { TimeSinceComponent } from '../components/time-since/time-since.componen
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
 import { QrcodeComponent } from '../components/qrcode/qrcode.component';
 import { FiatComponent } from '../fiat/fiat.component';
-import { NgbNavModule, NgbTooltipModule, NgbButtonsModule, NgbPaginationModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule, NgbButtonsModule, NgbPaginationModule, NgbDropdownModule, NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { TxFeaturesComponent } from '../components/tx-features/tx-features.component';
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
@ -50,11 +50,13 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
    NgbButtonsModule,
    NgbPaginationModule,
    NgbDropdownModule,
+    NgbAccordionModule,
  ],
  providers: [
    VbytesPipe,
  ],
  exports: [
+    NgbAccordionModule,
    NgbNavModule,
    CommonModule,
    ReactiveFormsModule,
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -17,7 +17,7 @@
  <meta property="twitter:description" content="An open-source explorer developed for the Bitcoin community, focusing on the transition into a multi-layer ecosystem." />
  <meta property="twitter:image:src" content="https://mempool.space/resources/mempool-space-preview.png" />
  <meta property="twitter:domain" content="mempool.space">
-
+  
  <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -54,7 +54,7 @@ html, body {

 body {
  background-color: #11131f;
-  min-width: 320px;
+  min-width: 375px;
  padding-bottom: 60px;
 }

@ -630,4 +630,42 @@ th {
 	@media (min-width: 1200px) {
 		max-width: 480px;
 	}
-}
+}
+
+.tab-pane {
+  .card {
+    background-color: transparent;
+    padding: 0;
+  
+    button {
+      text-align: left;
+      display: block;
+      width: 100%;
+      padding: 1rem 2rem;
+      color: #fff;
+      font-weight: bold;
+      &:focus, &:hover, &:active {
+        text-decoration: none;
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  
+    .card-header {
+      padding: 0;
+    }
+  
+    .collapsed{
+      background-color: #2d3348;
+      color: #1bd8f4;
+    }
+  }
+  
+  .subtitle {
+    font-weight: bold;
+    margin-bottom: 3px;
+    button {
+      padding: 0px !important;
+    }
+  }
+}