feat: add live codeblocks with remark-codesandbox

.eslintrc

@@ -1,4 +1,18 @@
 {
+  "env": {
+    "node": true,
+    "browser": true,
+    "commonjs": true,
+    "es6": true
+  },
+  "overrides": [
+    {
+      "files": "**/*.js",
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ],
   "extends": [
     "plugin:@docusaurus/recommended",
     "eslint:recommended",

README.md

@@ -35,4 +35,11 @@ One thing that's not documented is how to properly do Markdown inside tabs. For
     This is a banana 🍌
   </TabItem>
 </Tabs>
-```
+```
+
+### Live Code Blocks
+Rather than implementing our own live code blocks, we use the [`remark-codesandbox`](https://github.com/kevin940726/remark-codesandbox/) Remark plugin. This allows us to define a code block that will be loaded live in a CodeSandbox iframe, by adding a meta to the codeblock, like ```javascript codesandbox=vanilla
+
+This allows us to keep our code blocks versioned and in our codebase, while giving us the full power of CodeSandbox to showcase any example we want, with any dependency we want.
+
+The plugin allows for simple codeblocks where the content of the block replaces the CodeSandbox entry point, or more complex examples that can be loaded directly from the filesystem, by using `codesandbox=file:./example-folder`, as detailed in the plugin's documentation.

docs/index.md

@@ -1 +1,43 @@
-# Integrate with MetaMask (API & SDK)
+# Integrate with MetaMask (API & SDK)
+
+This page shows how to integrate code blocks that will load up in a Codesandbox iframe
+
+```js codesandbox=vanilla?editorsize=75
+document.getElementById('app').innerHTML = `
+<button class="enableEthereumButton btn">Enable Ethereum</button>
+<button disabled class="sendEthButton btn">Send Eth</button>
+`;
+
+if (typeof window.ethereum !== 'undefined') {
+  const ethereumButton = document.querySelector('.enableEthereumButton');
+  const sendEthButton = document.querySelector('.sendEthButton');
+
+  let accounts = [];
+
+  //Sending Ethereum to an address
+  sendEthButton.addEventListener('click', () => {
+    ethereum.request({
+      method: 'eth_sendTransaction',
+      params: [{
+        from: accounts[0],
+        to: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+        value: '0x29a2241af62c0000',
+        gasPrice: '0x09184e72a000',
+        gas: '0x2710',
+      }],
+    })
+      .then((txHash) => console.log(txHash))
+      .catch(console.error);
+  });
+
+  ethereumButton.addEventListener('click', async () => {
+    await getAccount();
+    sendEthButton.disabled = false;
+    ethereumButton.disabled = true;
+  });
+
+  async function getAccount() {
+    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
+  }
+}
+```

docusaurus.config.js

@@ -2,6 +2,7 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const codeTheme = require("prism-react-renderer/themes/dracula");
+const remarkCodesandbox = require("remark-codesandbox");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -34,6 +35,12 @@ const config = {
         docs: {
           path: "docs",
           sidebarCollapsible: false,
+          remarkPlugins: [
+            [remarkCodesandbox, {
+              mode: "iframe",
+              autoDeploy: process.env.NODE_ENV === "production",
+            }],
+          ],
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),

package.json

@@ -21,7 +21,8 @@
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "remark-codesandbox": "^0.10.1"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^2.2.0",

tsconfig.json

@@ -9,5 +9,5 @@
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
 }