machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moving Docs and Faq to separate lazy loaded module

Browse Source
This commit is contained in:
softsimon
2022-04-24 22:53:27 +04:00
parent c63ee1d80f
commit c256d714ab
19 changed files with 118 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/app/docs/code-template/code-template.component.html Normal file
View File

@@ -0,0 +1,39 @@
<div class="code">
<ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
<li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'">
<a ngbNavLink (click)="adjustContainerHeight( $event )">cURL</a>
<ng-template ngbNavContent>
<div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCurlTemplate(code)"></app-clipboard></div>
<pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
</ng-template>
</li>
<li ngbNavItem *ngIf="network !== 'liquidtestnet'">
<a ngbNavLink (click)="adjustContainerHeight( $event )" >CommonJS</a>
<ng-template ngbNavContent>
<div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
<div class="links">
<a [href]="npmGithubLink()" target="_blank">GitHub Repo</a>
</div>
<pre><code [innerText]="wrapCommonJS(code)"></code></pre>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink (click)="adjustContainerHeight( $event )" *ngIf="network !== 'liquidtestnet'">ES Module</a>
<ng-template ngbNavContent>
<div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
<div class="links">
<a [href]="npmGithubLink()" target="_blank">GitHub Repo</a>
<a [href]="npmModuleLink()" target="_blank">NPM Package</a>
</div>
<pre><code [innerText]="wrapImportTemplate()"></code></pre>
<div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapEsModule(code)"></app-clipboard></div>
<pre><code [innerText]="wrapEsModule(code)"></code></pre>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navCodeTemplate"></div>
<div *ngIf="code.codeTemplate && wrapResponse(code) !== ''" class="response">
<div class="subtitle"><ng-container i18n="API Docs API response">Response</ng-container> <app-clipboard [text]="wrapResponse(code)"></app-clipboard></div>
<pre><code [innerText]="wrapResponse(code)"></code></pre>
</div>
</div>

97
frontend/src/app/docs/code-template/code-template.component.scss Normal file
View File

@@ -0,0 +1,97 @@
.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;
}
.difficulty {
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;
white-space: break-spaces;
word-break: break-all;
}
}

333
frontend/src/app/docs/code-template/code-template.component.ts Normal file
View File

@@ -0,0 +1,333 @@
import { Component, Input, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
@Component({
selector: 'app-code-template',
templateUrl: './code-template.component.html',
styleUrls: ['./code-template.component.scss']
})
export class CodeTemplateComponent implements OnInit {
@Input() network: string;
@Input() code: any;
@Input() hostname: string;
@Input() baseNetworkUrl: string;
@Input() method: 'GET' | 'POST' | 'websocket' = 'GET';
env: Env;
constructor(
private stateService: StateService,
) { }
ngOnInit(): void {
this.env = this.stateService.env;
}
adjustContainerHeight( event ) {
if( ( window.innerWidth <= 992 ) && ( this.method !== "websocket" ) ) {
const urlObj = new URL( window.location + "" );
const endpointContainerEl = document.querySelector<HTMLElement>( urlObj.hash );
const endpointContentEl = document.querySelector<HTMLElement>( urlObj.hash + " .endpoint-content" );
window.setTimeout( function() {
endpointContainerEl.style.height = endpointContentEl.clientHeight + 90 + "px";
}, 550);
}
}
npmGithubLink(){
let npmLink = `https://github.com/mempool/mempool.js`;
if (this.network === 'bisq') {
npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-bisq-js`;
}
if (this.network === 'liquid' || this.network === 'liquidtestnet') {
npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-liquid-js`;
}
return npmLink;
}
npmModuleLink() {
let npmLink = `https://www.npmjs.org/package/@mempool/mempool.js`;
if (this.network === 'bisq') {
npmLink = `https://www.npmjs.org/package/@mempool/bisq.js`;
}
if (this.network === 'liquid' || this.network === 'liquidtestnet') {
npmLink = `https://www.npmjs.org/package/@mempool/liquid.js`;
}
return npmLink;
}
normalizeHostsESModule(codeText: string) {
if (this.env.BASE_MODULE === 'mempool') {
if (['liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('%{0}', this.network);
} else {
codeText = codeText.replace('%{0}', 'bitcoin');
}
if(['', 'main', 'liquid', 'bisq', 'liquidtestnet'].includes(this.network)) {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${document.location.hostname}'
});`);
} else {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${document.location.hostname}',
network: '${this.network}'
});`);
}
}
if (this.env.BASE_MODULE === 'bisq') {
codeText = codeText.replace('} = mempoolJS();', ` = bisqJS();`);
codeText = codeText.replace('{ %{0}: ', '');
}
if (this.env.BASE_MODULE === 'liquid') {
codeText = codeText.replace('} = mempoolJS();', ` = liquidJS();`);
codeText = codeText.replace('{ %{0}: ', '');
}
return codeText;
}
normalizeHostsCommonJS(codeText: string) {
if (this.env.BASE_MODULE === 'mempool') {
if (['liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('%{0}', this.network);
} else {
codeText = codeText.replace('%{0}', 'bitcoin');
}
if(['', 'main', 'liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${document.location.hostname}'
});`);
} else {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${document.location.hostname}',
network: '${this.network}'
});`);
}
}
if (this.env.BASE_MODULE === 'bisq') {
codeText = codeText.replace('} = mempoolJS();', ` = bisqJS();`);
codeText = codeText.replace('{ %{0}: ', '');
}
if (this.env.BASE_MODULE === 'liquid') {
codeText = codeText.replace('} = mempoolJS();', ` = liquidJS();`);
codeText = codeText.replace('{ %{0}: ', '');
}
return codeText;
}
wrapEsModule(code: any) {
let codeText: string;
if (code.codeTemplate) {
codeText = this.normalizeHostsESModule(code.codeTemplate.esModule);
if(this.network === '' || this.network === 'main') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleMainnet.esModule);
}
if (this.network === 'testnet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleTestnet.esModule);
}
if (this.network === 'signet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleSignet.esModule);
}
if (this.network === 'liquid' || this.network === 'liquidtestnet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleLiquid.esModule);
}
if (this.network === 'bisq') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleBisq.esModule);
}
let importText = `import mempoolJS from "@mempool/mempool.js";`;
if (this.env.BASE_MODULE === 'bisq') {
importText = `import bisqJS from "@mempool/bisq.js";`;
}
if (this.env.BASE_MODULE === 'liquid') {
importText = `import liquidJS from "@mempool/liquid.js";`;
}
return `${importText}
const init = async () => {
${codeText}
};
init();`;
}
}
wrapCommonJS(code: any) {
let codeText: string;
if (code.codeTemplate) {
codeText = this.normalizeHostsCommonJS(code.codeTemplate.commonJS);
if(this.network === '' || this.network === 'main') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleMainnet.esModule);
}
if (this.network === 'testnet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleTestnet.esModule);
}
if (this.network === 'signet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleSignet.esModule);
}
if (this.network === 'liquid' || this.network === 'liquidtestnet') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleLiquid.esModule);
}
if (this.network === 'bisq') {
codeText = this.replaceJSPlaceholder(codeText, code.codeSampleBisq.esModule);
}
if (code.noWrap) {
return codeText;
}
let importText = `<script src="https://mempool.space/mempool.js"></script>`;
if (this.env.BASE_MODULE === 'bisq') {
importText = `<script src="https://bisq.markets/bisq.js"></script>`;
}
if (this.env.BASE_MODULE === 'liquid') {
importText = `<script src="https://liquid.network/liquid.js"></script>`;
}
let resultHtml = '<pre id="result"></pre>';
if (this.method === 'websocket') {
resultHtml = `<h2>Blocks</h2><pre id="result-blocks">Waiting for data</pre><br>
<h2>Mempool Info</h2><pre id="result-mempool-info">Waiting for data</pre><br>
<h2>Transactions</h2><pre id="result-transactions">Waiting for data</pre><br>
<h2>Mempool Blocks</h2><pre id="result-mempool-blocks">Waiting for data</pre><br>`;
}
return `<!DOCTYPE html>
<html>
<head>
${importText}
<script>
const init = async () => {
${codeText}
};
init();
</script>
</head>
<body>
${resultHtml}
</body>
</html>`;
}
}
wrapImportTemplate() {
let importTemplate = `# npm
npm install @mempool/mempool.js --save
# yarn
yarn add @mempool/mempool.js`;
if (this.env.BASE_MODULE === 'bisq') {
importTemplate = `# npm
npm install @mempool/bisq.js --save
# yarn
yarn add @mempool/bisq.js`;
}
if (this.env.BASE_MODULE === 'liquid') {
importTemplate = `# npm
npm install @mempool/liquid.js --save
# yarn
yarn add @mempool/liquid.js`;
}
return importTemplate;
}
wrapCurlTemplate(code: any) {
if (code.codeTemplate) {
if (this.network === 'testnet') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleTestnet);
}
if (this.network === 'signet') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleSignet);
}
if (this.network === 'liquid') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleLiquid);
}
if (this.network === 'liquidtestnet') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleLiquidTestnet);
}
if (this.network === 'bisq') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleBisq);
}
if (this.network === '' || this.network === 'main') {
return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleMainnet);
}
}
}
wrapResponse(code: any) {
if (this.method === 'websocket') {
return '';
}
if (this.network === 'testnet') {
return code.codeSampleTestnet.response;
}
if (this.network === 'signet') {
return code.codeSampleSignet.response;
}
if (this.network === 'liquid') {
return code.codeSampleLiquid.response;
}
if (this.network === 'liquidtestnet') {
return code.codeSampleLiquidTestnet.response;
}
if (this.network === 'bisq') {
return code.codeSampleBisq.response;
}
return code.codeSampleMainnet.response;
}
replaceJSPlaceholder(text: string, code: any) {
for (let index = 0; index < code.length; index++) {
const textReplace = code[index];
const indexNumber = index + 1;
text = text.replace('%{' + indexNumber + '}', textReplace);
}
return text;
}
replaceCurlPlaceholder(curlText: any, code: any) {
let text = curlText;
text = text.replace( "[[hostname]]", this.hostname );
text = text.replace( "[[baseNetworkUrl]]", this.baseNetworkUrl );
for (let index = 0; index < code.curl.length; index++) {
const textReplace = code.curl[index];
const indexNumber = index + 1;
text = text.replace('%{' + indexNumber + '}', textReplace);
}
if (this.env.BASE_MODULE === 'mempool') {
if (this.network === 'main' || this.network === '') {
if (this.method === 'POST') {
return `curl -X POST -sSLd "${text}"`;
}
return `curl -sSL "${this.hostname}${text}"`;
}
if (this.method === 'POST') {
return `curl -X POST -sSLd "${text}"`;
}
return `curl -sSL "${this.hostname}/${this.network}${text}"`;
} else if (this.env.BASE_MODULE === 'liquid') {
if (this.method === 'POST') {
if (this.network !== 'liquid') {
text = text.replace('/api', `/${this.network}/api`);
}
return `curl -X POST -sSLd "${text}"`;
}
return ( this.network === 'liquid' ? `curl -sSL "${this.hostname}${text}"` : `curl -sSL "${this.hostname}/${this.network}${text}"` );
} else {
return `curl -sSL "${this.hostname}${text}"`;
}
}
}