From 60d59a41902b45a62a6c077687c731cdcdaad569 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?=
 <tien.nguyenkhac@icloud.com>
Date: Mon, 4 Nov 2024 02:26:57 +1300
Subject: [PATCH] refactor(docs): install commands

---
 .../docs/getting-started/connect-wallets.mdx  | 48 +++----------------
 apps/docs/docs/getting-started/setup.mdx      | 24 ++--------
 apps/docs/docusaurus.config.ts                |  3 ++
 apps/docs/package.json                        |  1 +
 yarn.lock                                     | 21 ++++++++
 5 files changed, 34 insertions(+), 63 deletions(-)

diff --git a/apps/docs/docs/getting-started/connect-wallets.mdx b/apps/docs/docs/getting-started/connect-wallets.mdx
index 7bf221ec..d872c56c 100644
--- a/apps/docs/docs/getting-started/connect-wallets.mdx
+++ b/apps/docs/docs/getting-started/connect-wallets.mdx
@@ -19,51 +19,15 @@ Additional dependencies are required if you use any of be bellow wallet type.
 
 ### [WalletConnect](https://walletconnect.com/)
 
-{/* prettier-ignore-start */}
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-    ```sh
-    npm add @reactive-dot/wallet-walletconnect
-    ```
-  </TabItem>
-  <TabItem value="yarn" label="yarn">
-    ```sh
-    yarn add @reactive-dot/wallet-walletconnect
-    ```
-  </TabItem>
-    <TabItem value="pnpm" label="pnpm">
-    ```sh
-    pnpm add @reactive-dot/wallet-walletconnect
-    ```
-  </TabItem>
-</Tabs>
-
-{/* prettier-ignore-end */}
+```bash npm2yarn
+npm install @reactive-dot/wallet-walletconnect
+```
 
 ### [Ledger](https://www.ledger.com/)
 
-{/* prettier-ignore-start */}
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-    ```sh
-    npm add @reactive-dot/wallet-ledger
-    ```
-  </TabItem>
-  <TabItem value="yarn" label="yarn">
-    ```sh
-    yarn add @reactive-dot/wallet-ledger
-    ```
-  </TabItem>
-    <TabItem value="pnpm" label="pnpm">
-    ```sh
-    pnpm add @reactive-dot/wallet-ledger
-    ```
-  </TabItem>
-</Tabs>
-
-{/* prettier-ignore-end */}
+```bash npm2yarn
+npm install @reactive-dot/wallet-ledger
+```
 
 ## Add wallets to the config
 
diff --git a/apps/docs/docs/getting-started/setup.mdx b/apps/docs/docs/getting-started/setup.mdx
index dc8cafe2..bd9683fa 100644
--- a/apps/docs/docs/getting-started/setup.mdx
+++ b/apps/docs/docs/getting-started/setup.mdx
@@ -18,27 +18,9 @@ This walks you through the process of creating a simple ReactiveDOT application.
 
 First add ReactiveDOT, along with required packages as dependencies to your React project.
 
-{/* prettier-ignore-start */}
-
-<Tabs>
-  <TabItem value="npm" label="npm" default>
-    ```sh
-    npm add @reactive-dot/react polkadot-api
-    ```
-  </TabItem>
-  <TabItem value="yarn" label="yarn">
-    ```sh
-    yarn add @reactive-dot/react polkadot-api
-    ```
-  </TabItem>
-    <TabItem value="pnpm" label="pnpm">
-    ```sh
-    pnpm add @reactive-dot/react polkadot-api
-    ```
-  </TabItem>
-</Tabs>
-
-{/* prettier-ignore-end */}
+```bash npm2yarn
+npm install @reactive-dot/react polkadot-api
+```
 
 ## Download & sync metadata
 
diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts
index 2b2326b2..b9929c5b 100644
--- a/apps/docs/docusaurus.config.ts
+++ b/apps/docs/docusaurus.config.ts
@@ -51,6 +51,9 @@ const config: Config = {
         docs: {
           sidebarPath: "./sidebars.ts",
           editUrl: "https://github.com/tien/reactive-dot/tree/main/apps/docs",
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
         },
         theme: {
           customCss: "./src/css/custom.css",
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 15cfb981..705b8998 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.5.2",
     "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.5.2",
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.1.1",
     "docusaurus-plugin-typedoc-api": "^4.4.0",
diff --git a/yarn.lock b/yarn.lock
index 00a76d8e..aa826f97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2792,6 +2792,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@docusaurus/remark-plugin-npm2yarn@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "@docusaurus/remark-plugin-npm2yarn@npm:3.5.2"
+  dependencies:
+    mdast-util-mdx: "npm:^3.0.0"
+    npm-to-yarn: "npm:^2.2.1"
+    tslib: "npm:^2.6.0"
+    unified: "npm:^11.0.3"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/a9a7f212e0fad41c9c74184259eca37a838b6637b382f4ddee47f533036c292b0d6bdfcde93d8d7bed259baf8d4a36c7dd1456bfeb8bde5c4d92d3b4c7a99db7
+  languageName: node
+  linkType: hard
+
 "@docusaurus/theme-classic@npm:3.5.2":
   version: 3.5.2
   resolution: "@docusaurus/theme-classic@npm:3.5.2"
@@ -4911,6 +4924,7 @@ __metadata:
     "@docusaurus/core": "npm:^3.5.2"
     "@docusaurus/module-type-aliases": "npm:3.5.2"
     "@docusaurus/preset-classic": "npm:^3.5.2"
+    "@docusaurus/remark-plugin-npm2yarn": "npm:^3.5.2"
     "@docusaurus/tsconfig": "npm:3.5.2"
     "@docusaurus/types": "npm:3.5.2"
     "@mdx-js/react": "npm:^3.1.0"
@@ -14805,6 +14819,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-to-yarn@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "npm-to-yarn@npm:2.2.1"
+  checksum: 10c0/65c696a3e595facad802b6b13c04e504806ea88fd4f87ab758f8042c19f65b4c4822815a47095df944b0809a95e574c27323c33cca5533f8454515eaa6e14fac
+  languageName: node
+  linkType: hard
+
 "nprogress@npm:^0.2.0":
   version: 0.2.0
   resolution: "nprogress@npm:0.2.0"