SDK sidebar PoC

docusaurus.config.js

@@ -113,6 +113,17 @@ const config = {
         },
       },
     ],
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "sdk",
+        path: "sdk",
+        routeBasePath: "sdk",
+        editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
+        sidebarPath: require.resolve("./sdk-sidebar.js"),
+        breadcrumbs: false,
+      },
+    ],
     [
       "@docusaurus/plugin-content-docs",
       {
@@ -172,6 +183,10 @@ const config = {
           width: 150,
         },
         items: [
+          {
+            to: "sdk",
+            label: "SDK",
+          },
           {
             to: "wallet",
             label: "Wallet",
@@ -229,6 +244,10 @@ const config = {
           {
             title: "Documentation",
             items: [
+              {
+                label: "SDK",
+                to: "/sdk",
+              },
               {
                 label: "Wallet",
                 to: "/wallet",

sdk-sidebar.js

@@ -0,0 +1,58 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebar = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  // snapsSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  sdkSidebar: [
+    "index",
+    {
+      type: "category",
+      label: "Get started",
+      link: { type: "generated-index", slug: "/get-started" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "get-started" }],
+    },
+    {
+      type: "category",
+      label: "How to",
+      link: { type: "generated-index", slug: "/how-to" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "how-to" }],
+    },
+    {
+      type: "category",
+      label: "Concepts",
+      link: { type: "generated-index", slug: "/concepts" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "concepts" }],
+    },
+    {
+      type: "category",
+      label: "Tutorials",
+      link: { type: "generated-index", slug: "/tutorials" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "tutorials" }],
+    },
+    {
+      type: "category",
+      label: "Reference",
+      link: { type: "generated-index", slug: "/reference" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "reference" }],
+    },
+  ],
+};
+
+module.exports = sidebar;

wallet/concepts/sdk/index.md → sdk/concepts/about-sdk.md

@@ -1,11 +1,6 @@
 ---
 description: Learn about MetaMask SDK.
-sidebar_position: 3
-tags:
-  - JavaScript SDK
-  - iOS SDK
-  - Android SDK
-  - Unity SDK
+sidebar_position: 1
 ---
 
 import Tabs from "@theme/Tabs";

wallet/concepts/sdk/android.md → sdk/concepts/android.md

@@ -1,8 +1,6 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 description: Learn about the Android SDK architecture.
-tags:
-  - Android SDK
 ---
 
 # Android SDK architecture
@@ -23,7 +21,7 @@ the Android SDK differs from the other SDK platforms.
 
 The following diagram outlines the high-level architecture of the Android SDK:
 
-![Android SDK architecture diagram](../../assets/sdk-android-architecture.png)
+![Android SDK architecture diagram](../assets/sdk-android-architecture.png)
 
 The MetaMask Android SDK consists of two components:
 
@@ -48,7 +46,7 @@ in Kotlin) using different mechanisms depending on the direction of communicatio
 
 The following diagram outlines the communication flow between the Android client SDK and server SDK:
 
-![Android SDK communication diagram](../../assets/sdk-android-communication.png)
+![Android SDK communication diagram](../assets/sdk-android-communication.png)
 
 The flow is as follows:
 

wallet/concepts/sdk/connections.md → sdk/concepts/connections.md

@@ -1,12 +1,7 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 sidebar_label: SDK connections
 description: Learn about how a dapp with the SDK installed connects to MetaMask.
-tags:
-  - JavaScript SDK
-  - iOS SDK
-  - Android SDK
-  - Unity SDK
 ---
 
 # MetaMask SDK connections

wallet/how-to/use-sdk/3rd-party-libraries/index.md → sdk/get-started/3rd-party-libraries/index.md

@@ -1,14 +1,12 @@
 ---
 sidebar_label: Third-party libraries
-sidebar_position: 4
+sidebar_position: 1
 description: Set up the SDK using third-party libraries.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with third-party libraries
 
-Use [MetaMask SDK](../../../concepts/sdk/index.md) with the following third-party libraries:
+Use [MetaMask SDK](../../concepts/about-sdk.md) with the following third-party libraries:
 
 - [Web3-Onboard](web3-onboard.md)
 - [Wagmi](wagmi.md)

wallet/how-to/use-sdk/3rd-party-libraries/wagmi.md → sdk/get-started/3rd-party-libraries/wagmi.md

@@ -1,9 +1,7 @@
 ---
 description: Integrate MetaMask SDK with Wagmi in your JavaScript dapp.
-sidebar_position: 2
+sidebar_position: 1
 sidebar_label: Wagmi
-tags:
-  - JavaScript SDK
 ---
 
 # Use Wagmi with MetaMask SDK
@@ -118,7 +116,7 @@ Mobile dapps can lose their continuous connection with MetaMask, causing read-on
 
 These are some errors that might occur in mobile environments:
 
-![Wagmi errors](../../../assets/wagmi-errors.png)
+![Wagmi errors](../../assets/wagmi-errors.png)
 
 To overcome this limitation in mobile dapps that rely on a continuous connection with MetaMask,
 use the Infura API to make read-only requests.

wallet/how-to/use-sdk/3rd-party-libraries/web3-onboard.md → sdk/get-started/3rd-party-libraries/web3-onboard.md

@@ -1,9 +1,7 @@
 ---
 description: Integrate MetaMask SDK with Web3-Onboard in your JavaScript dapp.
-sidebar_position: 1
+sidebar_position: 2
 sidebar_label: Web3-Onboard
-tags:
-  - JavaScript SDK
 ---
 
 # Use Web3-Onboard with MetaMask SDK

wallet/how-to/use-sdk/gaming/index.md → sdk/get-started/gaming/index.md

@@ -1,16 +1,14 @@
 ---
 sidebar_label: Gaming
-sidebar_position: 2
+sidebar_position: 4
 description: Set up the SDK in your gaming dapp.
-tags:
-  - Unity SDK
 ---
 
 # Use MetaMask SDK with gaming dapps
 
-Import [MetaMask SDK](../../../concepts/sdk/index.md) into your gaming dapp to enable your users
+Import [MetaMask SDK](../../concepts/about-sdk.md) into your gaming dapp to enable your users
 to easily connect with their MetaMask Mobile wallet.
 See the instructions for the following gaming platforms:
 
-- [Unity](unity/index.md)
-- [Unreal Engine](unreal-engine.md) (coming soon)
+- [Unity](unity.md)
+- Unreal Engine (coming soon)

wallet/how-to/use-sdk/gaming/unity/index.md → sdk/get-started/gaming/unity.md

@@ -2,8 +2,6 @@
 sidebar_label: Unity
 sidebar_position: 1
 description: Set up the SDK in your Unity game.
-tags:
-  - Unity SDK
 ---
 
 import YoutubeEmbed from '@site/src/components/YoutubeEmbed';

wallet/how-to/use-sdk/javascript/electron.md → sdk/get-started/javascript/electron.md

@@ -2,8 +2,6 @@
 sidebar_label: Electron
 sidebar_position: 6
 description: Set up the SDK in your Electron dapp.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with Electron

wallet/how-to/use-sdk/javascript/index.md → sdk/get-started/javascript/index.md

@@ -1,9 +1,7 @@
 ---
 sidebar_label: JavaScript
-sidebar_position: 1
+sidebar_position: 2
 description: Set up the SDK in your JavaScript dapp.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with JavaScript

wallet/how-to/use-sdk/javascript/nodejs.md → sdk/get-started/javascript/nodejs.md

@@ -2,8 +2,6 @@
 sidebar_label: Node.js
 sidebar_position: 5
 description: Set up the SDK in your Node.js dapp.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with Node.js

wallet/how-to/use-sdk/javascript/other-web-frameworks.md → sdk/get-started/javascript/other-web-frameworks.md

@@ -2,8 +2,6 @@
 sidebar_label: Other web frameworks
 sidebar_position: 3
 description: Set up the SDK in other web frameworks.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with other web frameworks

wallet/how-to/use-sdk/javascript/pure-js.md → sdk/get-started/javascript/pure-js.md

@@ -2,8 +2,6 @@
 sidebar_label: Pure JavaScript
 sidebar_position: 2
 description: Set up the SDK in your Pure JavaScript dapp.
-tags:
-  - JavaScript SDK
 ---
 
 # Use MetaMask SDK with pure JavaScript

wallet/how-to/use-sdk/javascript/react-native.md → sdk/get-started/javascript/react-native.md

@@ -2,8 +2,6 @@
 sidebar_label: React Native and Expo
 sidebar_position: 4
 description: Set up the SDK in your React Native dapp.
-tags:
-  - JavaScript SDK
 ---
 
 import Tabs from "@theme/Tabs";

wallet/how-to/use-sdk/javascript/react/index.md → sdk/get-started/javascript/react/index.md

@@ -2,8 +2,6 @@
 sidebar_label: React
 sidebar_position: 1
 description: Set up the SDK in your React dapp.
-tags:
-  - JavaScript SDK
 ---
 
 import Tabs from "@theme/Tabs";

wallet/how-to/use-sdk/javascript/react/react-ui.md → sdk/get-started/javascript/react/react-ui.md

@@ -2,8 +2,6 @@
 sidebar_label: React UI
 sidebar_position: 1
 description: Set up the SDK in your React dapp using the React UI package.
-tags:
-  - JavaScript SDK
 ---
 
 import Tabs from "@theme/Tabs";

wallet/how-to/use-sdk/mobile/android.md → sdk/get-started/mobile/android.md

@@ -3,8 +3,6 @@ sidebar_label: Android
 sidebar_position: 2
 toc_max_heading_level: 4
 description: Set up the SDK in your Android dapp.
-tags:
-  - Android SDK
 ---
 
 # Use MetaMask SDK with Android

wallet/how-to/use-sdk/mobile/index.md → sdk/get-started/mobile/index.md

@@ -2,14 +2,11 @@
 sidebar_label: Mobile
 sidebar_position: 3
 description: Set up the SDK in your mobile dapp.
-tags:
-  - iOS SDK
-  - Android SDK
 ---
 
 # Use MetaMask SDK with mobile dapps
 
-Import [MetaMask SDK](../../../concepts/sdk/index.md) into your mobile dapp to enable your users
+Import [MetaMask SDK](../../concepts/about-sdk.md) into your mobile dapp to enable your users
 to easily connect with their MetaMask Mobile wallet.
 See the instructions for the following mobile platforms:
 

wallet/how-to/use-sdk/mobile/ios.md → sdk/get-started/mobile/ios.md

@@ -3,8 +3,6 @@ sidebar_label: iOS
 sidebar_position: 1
 toc_max_heading_level: 4
 description: Set up the SDK in your iOS dapp.
-tags:
-  - iOS SDK
 ---
 
 import Tabs from "@theme/Tabs";

sdk/how-to/gaming/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Gaming",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "slug": "how-to/gaming"
+  }
+}

sdk/how-to/gaming/unity/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Unity",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "slug": "how-to/gaming/unity"
+  }
+}

wallet/how-to/use-sdk/gaming/unity/connect-and-sign.md → sdk/how-to/gaming/unity/connect-and-sign.md

@@ -1,8 +1,6 @@
 ---
 sidebar_position: 1
 sidebar_label: Connect and sign
-tags:
-  - Unity SDK
 ---
 
 # Connect and sign in Unity

wallet/how-to/use-sdk/gaming/unity/dweb.md → sdk/how-to/gaming/unity/dweb.md

@@ -2,8 +2,6 @@
 sidebar_position: 4
 sidebar_label: Enable human-readable addresses
 description: Integrate Decentraweb into your Unity game to enable human-readable addresses.
-tags:
-  - Unity SDK
 ---
 
 import Tabs from "@theme/Tabs";

wallet/how-to/use-sdk/gaming/unity/infura.md → sdk/how-to/gaming/unity/infura.md

@@ -2,8 +2,6 @@
 description: Set up MetaMask SDK with Infura in your Unity game.
 sidebar_position: 2
 sidebar_label: Set up Infura
-tags:
-  - Unity SDK
 ---
 
 # Set up Infura in Unity
@@ -47,7 +45,7 @@ your Unity game.
 
 <p align="center">
 
-![MetaMask Unity script](../../../../assets/unity-infura.png)
+![MetaMask Unity script](../../../assets/unity-infura.png)
 
 </p>