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/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;
+  }
+
+}