Merge pull request #1826 from OffchainLabs/Stylus-V2-Srinjoy

Add new subsections - Tutorial, Examples, Reference
OffchainLabs · Nov 15, 2024 · 8ebdea7 · 8ebdea7
2 parents a53b5e3 + 9d7b34e
commit 8ebdea7
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .vscode
 arbitrum-docs/sdk
-arbitrum-docs/stylus-by-example
+arbitrum-docs/stylus-by-example
+.vercel
diff --git a/arbitrum-docs/stylus/recommended-libraries.md b/arbitrum-docs/stylus/recommended-libraries.md
@@ -1,7 +1,7 @@
 ---
 id: recommended-libraries
 title: Recommended Libraries
-sidebar_label: Recommended libraries
+sidebar_label: Use Rust Crates
 ---
 
 # Recommended libraries

diff --git a/website/sidebars.js b/website/sidebars.js
@@ -480,7 +480,7 @@ const sidebars = {
     },
     {
       type: 'category',
-      label: 'Write Stylus contracts',
+      label: 'Write Stylus Contracts',
       collapsed: true,
       link: {
         type: 'doc',
@@ -497,21 +497,6 @@ const sidebars = {
           id: 'stylus/stylus-quickstart',
           label: 'Quickstart',
         },
-        {
-          type: 'doc',
-          id: 'stylus/concepts/how-it-works',
-          label: 'How Stylus Works',
-        },
-        {
-          type: 'doc',
-          id: 'for-devs/dev-tools-and-resources/chain-info',
-          label: 'Chain info',
-        },
-        {
-          type: 'doc',
-          label: 'Arbiscan contract verification',
-          id: 'stylus/how-tos/verifying-contracts-arbiscan',
-        },
         {
           type: 'category',
           label: 'Stylus Rust SDK',
@@ -523,122 +508,142 @@ const sidebars = {
               label: 'Overview',
             },
             ...stylusByExampleDocsSidebar,
-            {
-              type: 'doc',
-              id: 'stylus/recommended-libraries',
-              label: 'Recommended libraries',
-            },
             {
               type: 'doc',
               id: 'stylus/reference/rust-sdk-guide',
               label: 'Advanced features',
             },
+          ],
+        },
+        {
+          type: 'category',
+          label: 'Concepts',
+          collapsed: true,
+          items: [
             {
-              type: 'link',
-              label: 'Rust crate docs',
-              href: 'https://docs.rs/stylus-sdk/latest/stylus_sdk/index.html',
+              type: 'doc',
+              id: 'stylus/concepts/how-it-works',
+              label: 'How Stylus works',
             },
             {
-              type: 'link',
-              label: 'Stylus by example',
-              href: 'https://stylus-by-example.org/',
+              type: 'doc',
+              id: 'stylus/concepts/stylus-gas',
+              label: 'How Stylus uses gas',
             },
-          ],
+          ]
         },
         {
           type: 'category',
-          label: 'Gas, ink and caching',
+          label: 'Tutorials',
           collapsed: true,
           items: [
             {
-              type: 'doc',
-              label: 'Overview',
-              id: 'stylus/concepts/stylus-gas',
+              type: 'html',
+              value: '<a class="menu__link menu__list-item" href="/run-arbitrum-node/run-nitro-dev-node">Run a Stylus Dev Node<span class="other-section-icon">↑</span></a>',
             },
             {
               type: 'doc',
-              id: 'stylus/reference/opcode-hostio-pricing',
-              label: 'Gas and ink costs',
+              id: 'stylus/how-tos/debugging-stylus-tx',
+              label: 'Debug transactions',
             },
             {
               type: 'doc',
               id: 'stylus/concepts/stylus-cache-manager',
-              label: 'Caching strategy',
+              label: 'Cache contracts',
+            },
+            {
+              type: 'doc',
+              id: 'stylus/how-tos/optimizing-binaries',
+              label: 'Optimize WASM binaries',
+            },
+            {
+              type: 'doc',
+              id: 'stylus/how-tos/verifying-contracts',
+              label: 'Verify contracts',
+            },
+            {
+              type: 'doc',
+              id: 'stylus/how-tos/verifying-contracts-arbiscan',
+              label: 'Arbiscan verification',
+            },
+            {
+              type: 'doc',
+              id: 'stylus/how-tos/adding-support-for-new-languages',
+              label: 'Using other languages',
             },
           ],
         },
         {
           type: 'category',
-          label: 'CLI tools (cargo-stylus)',
+          label: 'Examples',
           collapsed: true,
           items: [
             {
               type: 'doc',
-              label: 'Overview',
-              id: 'stylus/cli-tools-overview',
+              id: 'stylus-by-example/vending_machine',
+              label: 'Vending machine',
             },
             {
               type: 'doc',
-              label: 'Optimize WASM binaries',
-              id: 'stylus/how-tos/optimizing-binaries',
+              id: 'stylus-by-example/erc20',
+              label: 'ERC-20',
             },
             {
               type: 'doc',
-              label: 'Debug Stylus transactions',
-              id: 'stylus/how-tos/debugging-stylus-tx',
+              id: 'stylus-by-example/erc721',
+              label: 'ERC-721',
             },
             {
               type: 'doc',
-              label: 'Verify Stylus contracts',
-              id: 'stylus/how-tos/verifying-contracts',
+              id: 'stylus-by-example/multi_call',
+              label: 'Multi-Call',
             },
             {
               type: 'link',
-              label: 'cargo-stylus repository',
-              href: 'https://github.com/OffchainLabs/cargo-stylus',
+              label: 'Awesome Stylus',
+              href: 'https://docs.rs/stylus-sdk/latest/stylus_sdk/index.html',
             },
           ],
         },
-        {
-          type: 'html',
-          value:
-            '<a class="menu__link menu__list-item" href="/run-arbitrum-node/run-nitro-dev-node">Run a Stylus dev node<span class="other-section-icon">↑</span></a>',
-          // q: why use an anchor html tag here?/node-running/how-tos/running-an-stylus-node
-          // a: see note at end of file
-        },
         {
           type: 'category',
-          label: 'Other supported languages',
+          label: 'Reference',
           collapsed: true,
-          link: {
-            type: 'doc',
-            id: 'stylus/reference/other-language-frameworks',
-          },
           items: [
             {
               type: 'doc',
-              label: 'Add a new smart contract language',
-              id: 'stylus/how-tos/adding-support-for-new-languages',
+              id: 'for-devs/dev-tools-and-resources/chain-info',
+              label: 'Chain Info',
+            },
+            {
+              type: 'doc',
+              id: 'stylus/reference/opcode-hostio-pricing',
+              label: 'Gas & Ink Pricing',
+            },
+            {
+              type: 'link',
+              label: 'Cargo Stylus CLI GitHub',
+              href: 'https://github.com/OffchainLabs/cargo-stylus',
+            },
+            {
+              type: 'link',
+              label: 'Rust SDK Crate',
+              href: 'https://docs.rs/stylus-sdk/latest/stylus_sdk/index.html',
+            },
+            {
+              type: 'link',
+              label: 'Source Code Repository',
+              href: 'https://github.com/OffchainLabs/stylus',
             },
           ],
         },
         {
           type: 'doc',
-          label: 'Troubleshooting',
           id: 'stylus/troubleshooting-building-stylus',
-        },
-        {
-          type: 'link',
-          label: 'Source code repository',
-          href: 'https://github.com/OffchainLabs/stylus',
-        },
-        {
-          type: 'doc',
-          label: 'Public preview',
-          id: 'stylus/concepts/public-preview-expectations',
+          label: 'Troubleshooting',
         },
       ],
-    },
+    },    
     {
       type: 'category',
       label: 'Run an Arbitrum node',

diff --git a/website/src/scripts/stylusByExampleDocsHandler.ts b/website/src/scripts/stylusByExampleDocsHandler.ts
@@ -21,20 +21,30 @@ const allowList = [
   'bytes_in_bytes_out',
 ];
 
+const appsAllowList = [
+  'erc20',
+  'erc721',
+  'vending_machine',
+  'multi_call',
+];
+
 function load(app) {
   const outputDir = path.join(app.options.getValue('out'), '../../stylus-by-example');
   const sourceDir = path.join(outputDir, '../../stylus-by-example/src/app/basic_examples');
+  const sourceDirApps = path.join(outputDir, '../../stylus-by-example/src/app/applications');
 
   app.renderer.on(RendererEvent.START, async () => {
     cleanDirectory(outputDir);
   });
 
   app.renderer.on(RendererEvent.END, async () => {
-    copyFiles(sourceDir, outputDir);
-
+    copyFiles(sourceDir, outputDir, allowList);
+    // only generate sidebar for basic_examples
     const sidebarItems = generateSidebar(outputDir);
     const sidebarConfig = { items: sidebarItems };
     const sidebarPath = path.join(outputDir, 'sidebar.js');
+    // copy applications after sidebar for Rust SDK is generated
+    copyFiles(sourceDirApps, outputDir, appsAllowList);
 
     fs.writeFileSync(
       sidebarPath,
@@ -62,7 +72,7 @@ function cleanDirectory(directory) {
   }
 }
 
-function copyFiles(source, target) {
+function copyFiles(source, target, allowList) {
   if (!fs.existsSync(source)) {
     console.error(`Source path does not exist: ${source}`);
     return;