Install npm2yarn package

delegation-toolkit/get-started/install.md

@@ -15,39 +15,26 @@ This page provides instructions to install and set up the MetaMask Delegation To
 
 - Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
 - Install [Yarn](https://yarnpkg.com/),
-  [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
+    [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
 - If you plan to use any smart contracts (for example, to
-  [create a custom caveat enforcer](../how-to/create-delegation/create-custom-caveat-enforcer.md)), install
-  [Foundry](https://book.getfoundry.sh/getting-started/installation).
+    [create a custom caveat enforcer](../how-to/create-delegation/create-custom-caveat-enforcer.md)),
+    install [Foundry](https://book.getfoundry.sh/getting-started/installation).
 
 ## Steps
 
 ### 1. Install the toolkit
 
 Install the [MetaMask Delegation Toolkit](https://github.com/MetaMask/delegation-toolkit) dependencies:
 
-<Tabs>
-  <TabItem value="npm">
-
-  ```bash
-  npm install @metamask/delegation-toolkit
-  ```
-
-  </TabItem>
-  <TabItem value="yarn">
-
-  ```bash
-  yarn add @metamask/delegation-toolkit
-  ```
-
-  </TabItem>
-</Tabs>
+```bash npm2yarn
+npm install @metamask/delegation-toolkit
+```
 
 ### 2. (Optional) Install the contracts
 
 If you plan to extend the Delegation Framework smart contracts (for example, to
-[create a custom caveat enforcer](../how-to/create-delegation/create-custom-caveat-enforcer.md)), install the contract
-package using Foundry's command-line tool, Forge:
+[create a custom caveat enforcer](../how-to/create-delegation/create-custom-caveat-enforcer.md)), install
+the contract package using Foundry's command-line tool, Forge:
 
 ```bash
 forge install metamask/delegation-framework@v1.3.0
@@ -58,4 +45,4 @@ Add `@metamask/delegation-framework/=lib/metamask/delegation-framework/` in your
 ### 3. Get started
 
 You're now ready to start using the MetaMask Delegation Toolkit.
-Check out the [Delegation Toolkit quickstart](quickstart.md) to walk through a simple example.
+Check out the [Delegation Toolkit quickstart](quickstart.md) to walk through a simple example.

docusaurus.config.js

@@ -16,6 +16,7 @@ const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTool
 const connectDropdown = fs.readFileSync("./src/components/NavDropdown/ConnectMetaMask.html", "utf-8");
 const embedDropdown = fs.readFileSync("./src/components/NavDropdown/EmbedMetaMask.html", "utf-8");
 const extendDropdown = fs.readFileSync("./src/components/NavDropdown/ExtendScale.html", "utf-8");
+const npm2yarnPlugin = [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }];
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'MetaMask developer documentation',
@@ -72,6 +73,7 @@ const config = {
           editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
           sidebarPath: false,
           breadcrumbs: false,
+          remarkPlugins: [npm2yarnPlugin],
         },
         theme: {
           customCss: require.resolve('./src/scss/custom.scss'),
@@ -91,6 +93,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./snaps-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
         admonitions: {
           keywords: [
             'info',
@@ -116,6 +119,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./gator-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
         sidebarCollapsed: false,
         includeCurrentVersion: true,
         // Set to the latest release.
@@ -143,6 +147,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./services-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
       },
     ],
     [
@@ -154,6 +159,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./dashboard-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
       },
     ],
     [
@@ -165,6 +171,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./wallet-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
         sidebarItemsGenerator: async function ({ defaultSidebarItemsGenerator, ...args }) {
           const sidebarItems = await defaultSidebarItemsGenerator(args)
           const dynamicItems = await fetchAndGenerateDynamicSidebarItems(
@@ -188,6 +195,7 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./sdk-sidebar.js'),
         breadcrumbs: false,
+        remarkPlugins: [npm2yarnPlugin],
       },
     ],
     './src/plugins/plugin-json-rpc.ts',

package.json

@@ -33,6 +33,7 @@
     "@docusaurus/plugin-content-docs": "3.8.1",
     "@docusaurus/plugin-content-pages": "3.8.1",
     "@docusaurus/preset-classic": "3.8.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.8.1",
     "@docusaurus/theme-common": "3.8.1",
     "@docusaurus/theme-mermaid": "3.8.1",
     "@intercom/messenger-js-sdk": "^0.0.14",