Migrate Keplr Docs library to DocuSaurus

.eslintignore

@@ -1,4 +1,5 @@
 **/*.scss
+**/*.css
 **/*.html
 **/*.json
 **/*.png

docs/.eslintignore

@@ -0,0 +1 @@
+**/*.{css,scss,sass}

docs/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extends: ["plugin:@docusaurus/recommended", "prettier"],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "import/no-default-export": "off",
+    "import/no-unresolved": "off",
+  },
+  overrides: [
+    {
+      files: ["*.css", "*.scss", "*.sass"],
+      rules: {}, // No rules applied for CSS/SCSS/SASS files
+    },
+  ],
+};

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md → docs/docs/01-intro.md

@@ -1,10 +1,7 @@
 ---
 title: Introduction
 description: Keplr is a non-custodial blockchain wallets for webpages that allow users to interact with blockchain applications.
-footer:
-  newsletter: false
 aside: true
-order: 1
 ---
 
 # Keplr wallet Documentation
@@ -20,14 +17,14 @@ Keplr is a non-custodial blockchain wallets for webpages that allow users to int
 - Keplr can easily connect to libraries such as CosmJS, simplifying the process of connecting webpages to blockchains.
 
 ## Sections
-[Integrate with Keplr](./api) describes how to integrate with Keplr in the webpage.  
+[Integrate with Keplr](./02-basic-api.md) describes how to integrate with Keplr in the webpage.  
 
-[Use with cosmjs](./api/cosmjs.md) describes how to use cosmjs with Keplr.
+[Use with cosmjs](./03-cosmjs.md) describes how to use cosmjs with Keplr.
 
-[Use with secretjs](./api/secretjs.md) describes how to use secretjs with Keplr if you need to use secret-wasm feature.
+[Use with secretjs](./04-secretjs.md) describes how to use secretjs with Keplr if you need to use secret-wasm feature.
 
-[Suggest chain](./api/suggest-chain.md) describes how to suggest the chain to Keplr if the chain is not supported natively in Keplr.
+[Suggest chain](./05-suggest-chain.md) describes how to suggest the chain to Keplr if the chain is not supported natively in Keplr.
 
-[EVM-based chains support](./api/evm.md) describes how to support EVM-based chains with Keplr.
+[EVM-based chains support](./06-evm.md) describes how to support EVM-based chains with Keplr.
 
-[Starknet Support](./api/starknet.md) describes how to support Starknet chains with Keplr.
+[Starknet Support](./07-starknet.md) describes how to support Starknet chains with Keplr.

docs/api/README.md → docs/docs/02-basic-api.md

@@ -71,7 +71,7 @@ There may be multiple ways to achieve the same result, and no preferred method.
 
 ## Keplr-specific features
 
-If you were able to connect Keplr with CosmJS, you may skip to the [Use Keplr with CosmJS](./cosmjs.md) section.
+If you were able to connect Keplr with CosmJS, you may skip to the [Use Keplr with CosmJS](./03-cosmjs.md) section.
 
 While Keplr supports an easy way to connect to CosmJS, there are additional functions specific to Keplr which provide additional features.
 
@@ -134,7 +134,7 @@ If the webpage has permission and Keplr is unlocked, this function will return t
 ```
 
 It also returns the nickname for the key store currently selected, which should allow the webpage to display the current key store selected to the user in a more convenient mane.  
-`isNanoLedger` field in the return type is used to indicate whether the selected account is from the Ledger Nano. Because current Cosmos app in the Ledger Nano doesn't support the direct (protobuf) format msgs, this field can be used to select the amino or direct signer. [Ref](./cosmjs.md#types-of-offline-signers)
+`isNanoLedger` field in the return type is used to indicate whether the selected account is from the Ledger Nano. Because current Cosmos app in the Ledger Nano doesn't support the direct (protobuf) format msgs, this field can be used to select the amino or direct signer. [Ref](./03-cosmjs.md#types-of-offline-signers)
 
 ### Sign Amino
 

docs/api/cosmjs.md → docs/docs/03-cosmjs.md

@@ -5,7 +5,7 @@ order: 2
 
 ## How to detect Keplr
 Keplr API may be undefined right after the webpage is shown.
-Please check the [How to detect Keplr](./README.md#how-to-detect-keplr) first before reading this section.
+Please check the [How to detect Keplr](./02-basic-api.md#how-to-detect-keplr) first before reading this section.
 
 ## Connecting with CosmJS
 
@@ -55,7 +55,7 @@ However, if the msg to be sent is able to be serialized/deserialized using Amino
 
 If you’d like to enforce the use of Amino, you can use the following APIs: `keplr.getOfflineSignerOnlyAmino(chainId)` or `window.getOfflineSignerOnlyAmino(chainId: string)`. Because this will always return an Amino compatible signer, any CosmJS requested msg that is Amino compatible will request an Amino SignDoc to Keplr.
 
-Also, `keplr.getOfflineSignerAuto(chainId: string): Promise<OfflineSigner | OfflineDirectSigner>` or `window.getOfflineSignerAuto(chainId: string): Promise<OfflineSigner | OfflineDirectSigner>` API is supported. Please note that the value returned is async. This API automatically returns a signer that only supports Amino if the account is a Ledger-based account, and returns a signer that is compatible for both Amino and Protobuf if the account is a mnemonic/private key-based account. Because this API is affected by the type of the connected Keplr account, if [keplr_keystorechange](./README.md#change-key-store-event) event is used to detect account changes the signer must be changed using the API when this event has been triggered.
+Also, `keplr.getOfflineSignerAuto(chainId: string): Promise<OfflineSigner | OfflineDirectSigner>` or `window.getOfflineSignerAuto(chainId: string): Promise<OfflineSigner | OfflineDirectSigner>` API is supported. Please note that the value returned is async. This API automatically returns a signer that only supports Amino if the account is a Ledger-based account, and returns a signer that is compatible for both Amino and Protobuf if the account is a mnemonic/private key-based account. Because this API is affected by the type of the connected Keplr account, if [keplr_keystorechange](./02-basic-api.md#change-key-store-event) event is used to detect account changes the signer must be changed using the API when this event has been triggered.
 
 ## Use with Stargate
 
@@ -65,7 +65,7 @@ Keplr's `OfflineSigner` implements the `OfflineDirectSigner` interface. Use `Sig
 Refer to the [keplr-example](https://github.com/chainapsis/keplr-example/blob/master/src/main.js) repository for example code on how to integrate Keplr with CosmJS.
 
 ### Interaction Options
-You can use Keplr native API’s to set interaction options even when using CosmJS. Please refer to [this section](./#interaction-options).
+You can use Keplr native API’s to set interaction options even when using CosmJS. Please refer to [this section](./02-basic-api.md#interaction-options).
 
 ### Adding a custom blockchain to Keplr
-If Keplr doesn't natively support your blockchain within the extension, please refer to the [Suggest chain](./suggest-chain.md#suggest-chain) section.
+If Keplr doesn't natively support your blockchain within the extension, please refer to the [Suggest chain](./05-suggest-chain.md#suggest-chain) section.

docs/api/secretjs.md → docs/docs/04-secretjs.md

@@ -5,7 +5,7 @@ order: 3
 
 ## How to detect Keplr
 Keplr API may be undefined right after the webpage shown.
-Please check the [How to detect Keplr](./README.md#how-to-detect-keplr) first before reading this section.
+Please check the [How to detect Keplr](./02-basic-api.md#how-to-detect-keplr) first before reading this section.
 
 ## Connecting with SecretJS
 
@@ -59,4 +59,4 @@ Returns the viewing key of a SNIP-20 token registered in Keplr.
 If the SNIP-20 of the contract address doesn't exist, it will throw an error.
 
 ### Interaction Options
-You can use Keplr native API’s to set interaction options even when using SecretJS. Please refer to [this section](./#interaction-options).
+You can use Keplr native API’s to set interaction options even when using SecretJS. Please refer to [this section](./02-basic-api.md#interaction-options).

docs/api/suggest-chain.md → docs/docs/05-suggest-chain.md

@@ -53,9 +53,9 @@ experimentalSuggestChain(chainInfo: SuggestingChainInfo): Promise<void>
 ::: suggest-chain-example-table
 | Key | Example Value | Note |
 |-|-|-|
-| `rpc` | http://123.456.789.012:26657 | Address of RPC endpoint of the chain. Default port is 26657 |
-| `rest` | http://123.456.789.012:1317 | Address of REST/API endpoint of the chain. Default port is 1317. Must be enabled in `app.toml` |
-| `chainId` | mychain-1 | Keplr has a feature which automatically detects when the chain-id has changed, and automatically update to support new chain. However, it should be noted that this functionality will only work when the chain-id follows the {identifier}-{version}(ex.cosmoshub-4) format. Therefore, it is recommended that the chain follows the chain-id format. |
+| `rpc` | `http://123.456.789.012:26657` | Address of RPC endpoint of the chain. Default port is 26657 |
+| `rest` | `http://123.456.789.012:1317` | Address of REST/API endpoint of the chain. Default port is 1317. Must be enabled in `app.toml` |
+| `chainId` | mychain-1 | Keplr has a feature which automatically detects when the chain-id has changed, and automatically update to support new chain. However, it should be noted that this functionality will only work when the chain-id follows the \{identifier\}-\{version\}(ex.cosmoshub-4) format. Therefore, it is recommended that the chain follows the chain-id format. |
 | `stakeCurrency` | ```{     coinDenom: "ATOM",     coinMinimalDenom: "uatom",     coinDecimals: 6,     coinGeckoId: "cosmos",   }``` | Information on the staking token of the chain |
 | `walletUrlForStaking` | https://wallet.keplr.app/chains/cosmos-hub | The URL for the staking interface frontend for the chain. If you don't have a staking interface built, you can use [Lunie Light](https://github.com/luniehq/lunie-light) which supports Keplr. |
 | `bip44.coinType` | 118 | BIP44 coin type for address derivation. We recommend using `118`(Cosmos Hub) as this would provide good Ledger hardware wallet compatibility by utilizing the Cosmos Ledger app. |

docs/docusaurus.config.ts

@@ -0,0 +1,107 @@
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config: Config = {
+  title: "Keplr Docs",
+  tagline: "Integrate Keplr into your dApp",
+  favicon: "img/keplr-logo-256.png",
+
+  url: "https://docs.keplr.app",
+  baseUrl: "/",
+
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          routeBasePath: "/api",
+          sidebarPath: "./sidebars.ts",
+        },
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themeConfig: {
+    metadata: [
+      {
+        name: "og:type",
+        content: "website",
+      },
+      {
+        name: "og:image",
+        content: "https://docs.keplr.app/og-image.png",
+      },
+    ],
+    navbar: {
+      title: "Keplr",
+      logo: {
+        alt: "Keplr Logo",
+        src: "img/keplr-logo-256.png",
+      },
+      items: [
+        {
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "Docs",
+        },
+        {
+          href: "https://github.com/chainapsis/keplr-wallet",
+          label: "GitHub",
+          position: "right",
+        },
+      ],
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Keplr",
+          items: [
+            {
+              label: "Keplr",
+              href: "https://www.keplr.app",
+            },
+            {
+              label: "Keplr Dashboard",
+              href: "https://wallet.keplr.app",
+            },
+          ],
+        },
+        {
+          title: "Need Help?",
+          items: [
+            {
+              label: "Keplr Helpdesk",
+              href: "https://help.keplr.app/",
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Keplr, Chainapsis`,
+    },
+    prism: {
+      theme: prismThemes.oneLight,
+      darkTheme: prismThemes.oneDark,
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;