Add API spec explorer to dev docs site (aptos-labs#5345)

* [docs] Add API spec explorer to aptos.dev * [docs] Load @StopLight CSS from Docusaurus Config * [docs] Final touches Co-authored-by: Joe <[email protected]>
0xjunha · Nov 5, 2022 · 3629253 · 3629253
1 parent 2fbe52f
commit 3629253
Show file tree

Hide file tree

Showing 10 changed files with 12,490 additions and 33 deletions.
diff --git a/developer-docs-site/docs/nodes/aptos-api-spec.md b/developer-docs-site/docs/nodes/aptos-api-spec.md
@@ -0,0 +1,22 @@
+---
+title: "Aptos API Spec"
+slug: "aptos-api-spec"
+hide_table_of_contents: true
+hide_title: true
+---
+
+import ApiExplorer from "@site/src/components/ApiExplorer";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs groupId="network">
+  <TabItem value="mainnet" label="Mainnet">
+    <ApiExplorer network="mainnet" layout="stacked" />
+  </TabItem>
+  <TabItem value="testnet" label="Testnet">
+    <ApiExplorer network="testnet" layout="stacked" />
+  </TabItem>
+  <TabItem value="devnet" label="Devnet">
+    <ApiExplorer network="devnet" layout="stacked" />
+  </TabItem>
+</Tabs>
diff --git a/developer-docs-site/docs/tutorials/first-coin.md b/developer-docs-site/docs/tutorials/first-coin.md
@@ -169,7 +169,7 @@ These are read by the example and published to the Aptos blockchain:
 
 ### Step 4.2: Understanding the MoonCoin module
 
-The MoonCoin module defines the `MoonCoin` struct, or the distinct type of coin type. In addition, it contains a function called `init_module`. The `init_module` function is called when the module is published. In this case, MoonCoin initializes the `MoonCoin` coin type as a `ManagedCoin`, which is maintained by the owner of the account. 
+The MoonCoin module defines the `MoonCoin` struct, or the distinct type of coin type. In addition, it contains a function called `init_module`. The `init_module` function is called when the module is published. In this case, MoonCoin initializes the `MoonCoin` coin type as a `ManagedCoin`, which is maintained by the owner of the account.
 
 :::tip ManagedCoin framework
 [`ManagedCoin`](https://github.com/aptos-labs/aptos-core/blob/f81ccb01f00227f9c0f36856fead4879f185a9f6/aptos-move/framework/aptos-framework/sources/managed_coin.move#L1) is a simple coin management framework for coins directly managed by users. It provides convenience wrappers around `mint` and `burn`.

diff --git a/developer-docs-site/docusaurus.config.js b/developer-docs-site/docusaurus.config.js
@@ -6,6 +6,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
 const codeInjector = require("./src/remark/code-injector");
 
+const { ProvidePlugin } = require("webpack");
+
 // KaTeX plugin stuff
 const math = require("remark-math");
 const katex = require("rehype-katex");
@@ -59,6 +61,12 @@ const config = {
       integrity: "sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM",
       crossorigin: "anonymous",
     },
+    {
+      href: "https://unpkg.com/@stoplight/elements/styles.min.css",
+      type: "text/css",
+      integrity: "sha384-mS2+08UV7BvSC96l6SGdnZv1SexFzKSJnHwTETEb4+97GyWualVrW9nAU2MwDu16",
+      crossorigin: "anonymous",
+    },
   ],
 
   themeConfig:
@@ -166,7 +174,8 @@ const config = {
           },
           {
             position: "left",
-            href: "https://fullnode.devnet.aptoslabs.com/v1/spec#/",
+            type: "doc",
+            docId: "nodes/aptos-api-spec",
             label: "REST API",
           },
           {
@@ -335,6 +344,36 @@ const config = {
         ],
       },
     ],
+    () => ({
+      name: "custom-webpack-config",
+      configureWebpack: () => {
+        return {
+          module: {
+            rules: [
+              {
+                test: /\.m?js/,
+                resolve: {
+                  fullySpecified: false,
+                },
+              },
+            ],
+          },
+          plugins: [
+            new ProvidePlugin({
+              process: require.resolve("process/browser"),
+            }),
+          ],
+          resolve: {
+            fallback: {
+              buffer: require.resolve("buffer"),
+              stream: false,
+              path: false,
+              process: false,
+            },
+          },
+        };
+      },
+    }),
   ],
 };
 

diff --git a/developer-docs-site/package.json b/developer-docs-site/package.json
@@ -24,26 +24,35 @@
     "@docusaurus/plugin-google-gtag": "2.1.0",
     "@docusaurus/preset-classic": "2.1.0",
     "@docusaurus/theme-classic": "^2.2.0",
+    "@docusaurus/types": "^2.2.0",
     "@mdx-js/react": "1.6.22",
+    "@stoplight/elements": "^7.7.3",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.25",
+    "buffer": "^6.0.3",
     "clsx": "1.2.1",
     "hast-util-is-element": "1.1.0",
+    "mkdirp": "^1.0.4",
+    "path-to-regex": "^1.3.8",
     "prism-react-renderer": "1.2.1",
+    "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rehype-katex": "5",
     "remark-math": "3",
+    "stream": "^0.0.2",
     "unist-util-visit": "4.1.0",
-    "unist-util-visit-children": "2.0.0"
+    "unist-util-visit-children": "2.0.0",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.1.0",
     "@tsconfig/docusaurus": "1.0.6",
     "@types/node": "^18.11.9",
     "prettier": "2.7.1",
-    "typescript": "4.8.2"
+    "typescript": "4.8.2",
+    "webpack": "^5.74.0"
   },
   "browserslist": {
     "production": [