From d1f26f049180557990b24e1046230e30d4b77d83 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Sat, 26 Aug 2023 15:59:29 +0900
Subject: [PATCH] Add meta descriptions to docs page

Also move all meta tag setting to ngDoCheck()
because page titles were not updating when
user switched docs tabs.
---
 frontend/src/app/docs/docs/docs.component.ts | 49 ++++++++++++++------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/docs/docs/docs.component.ts b/frontend/src/app/docs/docs/docs.component.ts
index 3e74ba959..2793fd70d 100644
--- a/frontend/src/app/docs/docs/docs.component.ts
+++ b/frontend/src/app/docs/docs/docs.component.ts
@@ -28,21 +28,6 @@ export class DocsComponent implements OnInit {
 
   ngOnInit(): void {
     this.websocket.want(['blocks']);
-    const url = this.route.snapshot.url;
-    if (url[0].path === "faq" ) {
-        this.activeTab = 0;
-        this.seoService.setTitle($localize`:@@docs.faq.button-title:FAQ`);
-    } else if( url[1].path === "rest" ) {
-        this.activeTab = 1;
-        this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
-    } else if( url[1].path === "websocket" ) {
-        this.activeTab = 2;
-        this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
-    } else {
-        this.activeTab = 3;
-        this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
-    }
-
     this.env = this.stateService.env;
     this.showWebSocketTab = ( ! ( ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) );
     this.showFaqTab = ( this.env.BASE_MODULE === 'mempool' ) ? true : false;
@@ -51,6 +36,40 @@ export class DocsComponent implements OnInit {
     document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "smooth";
   }
 
+  ngDoCheck(): void {
+
+    const url = this.route.snapshot.url;
+
+    if (url[0].path === "faq" ) {
+      this.activeTab = 0;
+      this.seoService.setTitle($localize`:@@meta.title.docs.faq:FAQ`);
+      this.seoService.setDescription($localize`:@@meta.description.docs.faq:Get answers to common questions like: What is a mempool? Why isn't my transaction confirming? How can I run my own instance of The Mempool Open Source Project? And more.`);
+    } else if( url[1].path === "rest" ) {
+      this.activeTab = 1;
+      this.seoService.setTitle($localize`:@@meta.title.docs.rest:REST API`);
+      if( this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ) {
+        this.seoService.setDescription($localize`:@@meta.description.docs.rest-liquid:Documentation for the liquid.network REST API service: get info on addresses, transactions, assets, blocks, and more.`);
+      } else if( this.stateService.network === 'bisq' ) {
+        this.seoService.setDescription($localize`:@@meta.description.docs.rest-bisq:Documentation for the bisq.markets REST API service: get info on recent trades, current offers, transactions, network state, and more.`);
+      } else {
+        this.seoService.setDescription($localize`:@@meta.description.docs.rest-bitcoin:Documentation for the mempool.space REST API service: get info on addresses, transactions, blocks, fees, mining, the Lightning network, and more.`);
+      }
+    } else if( url[1].path === "websocket" ) {
+      this.activeTab = 2;
+      this.seoService.setTitle($localize`:@@meta.title.docs.websocket:WebSocket API`);
+      if( this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ) {
+        this.seoService.setDescription($localize`:@@meta.description.docs.websocket-liquid:Documentation for the liquid.network WebSocket API service: get real-time info on blocks, mempools, transactions, addresses, and more.`);
+      } else {
+        this.seoService.setDescription($localize`:@@meta.description.docs.websocket-bitcoin:Documentation for the mempool.space WebSocket API service: get real-time info on blocks, mempools, transactions, addresses, and more.`);
+      }
+    } else {
+      this.activeTab = 3;
+      this.seoService.setTitle($localize`:@@meta.title.docs.websocket:Electrum RPC`);
+      this.seoService.setDescription($localize`:@@meta.description.docs.electrumrpc:Documentation for our Electrum RPC interface: get instant, convenient, and reliable access to an Esplora instance.`);
+    }
+
+  }
+
   ngOnDestroy(): void {
     document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "auto";
   }