Generalize api-docs components to accommodate faq

Also add chunk of faq content.
This commit is contained in:
hunicus 2022-03-26 09:09:37 -04:00
parent 289ed7b9b3
commit ef2c845714
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
7 changed files with 225 additions and 13 deletions

View File

@ -4411,3 +4411,177 @@ export const restApiDocsData = [
},
];
export const faqData = [
{
type: "category",
category: "basics",
fragment: "basics",
title: "Basics",
showConditions: bitcoinNetworks
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-is-a-mempool",
title: "What is a mempool?",
answer: '<p>A mempool (short for "memory pool") is a data structure that holds the queue of pending and unconfirmed transactions for a cryptocurrency network node. Every node on the network has its own mempool, which may contain different transactions.</p>'
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-is-a-mempool-explorer",
title: "What is a mempool explorer?",
answer: '<p>A mempool explorer is a tool that enables you to explore a nodes mempool, by visualizing the transactions contained within it, and allowing you to search and view those pending transactions, as well as general information about the nodes mempool. </p><p>The mempool.space website invented the concept of visualizing a Bitcoin nodes mempool as <b>projected blocks</b>, which are visible on the left side of our main dashboard, and the inspiration for our half-filled block logo.</p>'
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-is-a-blockchain",
title: "What is a blockchain?",
answer: "<p>A blockchain is the distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.</p>"
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-is-a-block-explorer",
title: "What is a block explorer?",
answer: "<p>A block explorer is a tool that enables you to explore the blockchain of a cryptocurrency for real-time and historical information about a blockchain, including data related to blocks, transactions, addresses, and more.</p>"
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-is-mining",
title: "What is mining?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "basics",
showConditions: bitcoinNetworks,
fragment: "what-are-mining-pools",
title: "What are mining pools?",
answer: "Because reasons."
},
{
type: "category",
category: "help",
fragment: "help-stuck-transaction",
title: "Help! My transaction is stuck",
showConditions: bitcoinNetworks
},
{
type: "endpoint",
category: "help",
showConditions: bitcoinNetworks,
fragment: "why-is-transaction-stuck-in-the-mempool",
title: "Why is my transaction stuck in the mempool?",
answer: "<p>Miners decide which transactions get included into the blocks they mine, and so they usually prioritize the transactions which pay them the highest transaction fees, measured in sats per virtual byte. This means to get confirmed sooner, you need to pay a higher fee.</p>"
},
{
type: "endpoint",
category: "help",
showConditions: bitcoinNetworks,
fragment: "how-to-get-transaction-confirmed-quickly",
title: "How can I get my transaction confirmed quickly?",
answer: "<p>If your wallet supports RBF, and your transaction was created with RBF enabled, you can bump the fee higher.</p><p>If your wallet does not support RBF, you can increase the effective fee rate of your transaction by spending its change output using a higher fee. This is called CPFP.</p>"
},
{
type: "endpoint",
category: "help",
showConditions: bitcoinNetworks,
fragment: "how-prevent-stuck-transaction-in-future",
title: "How can I prevent a transaction from getting stuck in the future?",
answer: "<p>You must use an adequate fee rate. Also consider using RBF if your wallet supports it so that you can bump the fee rate if needed.</p>"
},
{
type: "category",
category: "using",
fragment: "using-this-website",
title: "Using this website",
showConditions: bitcoinNetworks
},
{
type: "endpoint",
category: "how-to",
showConditions: bitcoinNetworks,
fragment: "looking-up-transactions",
title: "How can I look up a transaction?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "how-to",
showConditions: bitcoinNetworks,
fragment: "looking-up-addresses",
title: "How can I look up an address?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "how-to",
showConditions: bitcoinNetworks,
fragment: "looking-up-blocks",
title: "How can I look up a block?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "how-to",
showConditions: bitcoinNetworks,
fragment: "looking-up-fee-estimates",
title: "How can I look up fee estimates?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "how-to",
showConditions: bitcoinNetworks,
fragment: "looking-up-historical-trends",
title: "How can I explore historical trends?",
answer: "Because reasons."
},
{
type: "category",
category: "advanced",
fragment: "advanced",
title: "Advanced",
showConditions: bitcoinNetworks
},
{
type: "endpoint",
category: "advanced",
showConditions: bitcoinNetworks,
fragment: "who-runs-this-website",
title: "Who runs this website?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "advanced",
showConditions: bitcoinNetworks,
fragment: "host-my-own-instance-on-raspberry-pi",
title: "How can I host my own instance on a Raspberry Pi?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "advanced",
showConditions: bitcoinNetworks,
fragment: "host-my-own-instance-on-linux-server",
title: "How can I host my own instance on a Linux server?",
answer: "Because reasons."
},
{
type: "endpoint",
category: "advanced",
showConditions: bitcoinNetworks,
fragment: "install-mempool-with-docker",
title: "Can I install Mempool using Docker?",
answer: "Because reasons."
}
];

View File

@ -1,4 +1,4 @@
<div *ngFor="let item of restDocs">
<div *ngFor="let item of tabData">
<p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</p>
<a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
</div>

View File

@ -1,5 +1,6 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { restApiDocsData } from './api-docs-data';
import { faqData } from './api-docs-data';
@Component({
selector: 'app-api-docs-nav',
@ -9,13 +10,18 @@ import { restApiDocsData } from './api-docs-data';
export class ApiDocsNavComponent implements OnInit {
@Input() network: any;
@Input() whichTab: string;
@Output() navLinkClickEvent: EventEmitter<any> = new EventEmitter();
restDocs: any[];
tabData: any[];
constructor() { }
ngOnInit(): void {
this.restDocs = restApiDocsData;
if( this.whichTab === 'rest' ) {
this.tabData = restApiDocsData;
} else if( this.whichTab = 'faq' ) {
this.tabData = faqData;
}
}
navLinkClick( event ) {

View File

@ -1,10 +1,32 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<div class="container-xl text-left">
<div id="restAPI" *ngIf="restTabActivated">
<div id="faq" *ngIf="whichTab === 'faq'">
<div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }"></app-api-docs-nav>
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
</div>
<div class="doc-content">
<div *ngFor="let item of faq">
<h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
<div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
<a class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
<div class="endpoint-content">
<div class="endpoint" [innerHTML]="item.answer"></div>
</div>
</div>
</div>
</div>
</div>
<div id="restAPI" *ngIf="whichTab === 'rest'">
<div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
</div>
<div class="doc-content">
@ -65,7 +87,7 @@
</div>
</div>
<div id="websocketAPI" *ngIf="!restTabActivated && ( network.val !== 'bisq' )">
<div id="websocketAPI" *ngIf="( whichTab === 'websocket' ) && ( network.val !== 'bisq' )">
<div class="api-category">
<div class="websocket">
<div class="endpoint">

View File

@ -152,6 +152,14 @@ h3 {
float: right;
}
.endpoint-container .section-header table {
width: 100%;
}
.endpoint-container .section-header table td:first-child {
padding-right: 24px;
}
#doc-nav-mobile {
position: fixed;
top: 20px;

View File

@ -4,7 +4,7 @@ import { Observable, merge, of } from 'rxjs';
import { SeoService } from 'src/app/services/seo.service';
import { tap } from 'rxjs/operators';
import { ActivatedRoute } from "@angular/router";
import { restApiDocsData, wsApiDocsData } from './api-docs-data';
import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data';
@Component({
selector: 'app-api-docs',
@ -18,8 +18,9 @@ export class ApiDocsComponent implements OnInit {
env: Env;
code: any;
baseNetworkUrl = '';
@Input() restTabActivated: Boolean;
@Input() whichTab: string;
desktopDocsNavPosition = "relative";
faq: any[];
restDocs: any[];
wsDocs: any;
screenWidth: number;
@ -62,6 +63,7 @@ export class ApiDocsComponent implements OnInit {
this.hostname = `${document.location.protocol}//${this.hostname}`;
this.faq = faqData;
this.restDocs = restApiDocsData;
this.wsDocs = wsApiDocsData;
@ -79,7 +81,7 @@ export class ApiDocsComponent implements OnInit {
}
openEndpointContainer( targetId ) {
if( ( window.innerWidth <= 992 ) && this.restTabActivated && targetId ) {
if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) {
const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
const endPointContentElHeight = endpointContentEl.clientHeight;

View File

@ -9,7 +9,7 @@
<a ngbNavLink [routerLink]="['/docs/faq' | relativeUrl]">FAQ</a>
<ng-template ngbNavContent>
<p>FAQ placeholder</p>
<app-api-docs [whichTab]="'faq'"></app-api-docs>
</ng-template>
</li>
@ -18,7 +18,7 @@
<a ngbNavLink [routerLink]="['/docs/api/rest' | relativeUrl]">API - REST</a>
<ng-template ngbNavContent>
<app-api-docs [restTabActivated]="true"></app-api-docs>
<app-api-docs [whichTab]="'rest'"></app-api-docs>
</ng-template>
</li>
@ -27,7 +27,7 @@
<a ngbNavLink [routerLink]="['/docs/api/websocket' | relativeUrl]">API - WebSocket</a>
<ng-template ngbNavContent>
<app-api-docs [restTabActivated]="false"></app-api-docs>
<app-api-docs [whichTab]="'websocket'"></app-api-docs>
</ng-template>
</li>