OffchainLabs · anegg0 · Nov 1, 2024 · Nov 1, 2024 · Nov 3, 2024 · Nov 3, 2024
diff --git a/arbitrum-docs/stylus/reference/overview.md b/arbitrum-docs/stylus/reference/overview.md
@@ -11,7 +11,8 @@ import PublicPreviewBannerPartial from '../../partials/_public-preview-banner-pa
 
 <PublicPreviewBannerPartial />
 
-This section provides an in-depth overview of the features provided by the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs). For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.md).
+This section provides an in-depth overview of the features provided by the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs). For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.mdx).
+
 
 The Stylus Rust SDK is built on top of [Alloy](https://www.paradigm.xyz/2023/06/alloy), a collection of crates empowering the Rust Ethereum ecosystem. Because the SDK uses the same [Rust primitives for Ethereum types](https://docs.rs/alloy-primitives/latest/alloy_primitives/), Stylus is compatible with existing Rust libraries.
 

diff --git a/arbitrum-docs/stylus/reference/rust-sdk-guide.md b/arbitrum-docs/stylus/reference/rust-sdk-guide.md
@@ -13,7 +13,7 @@ import StylusNoMultiInheritanceBannerPartial from '../partials/_stylus-no-multi-
 
 <PublicPreviewBannerPartial />
 
-This document provides information about advanced features included in the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs), that are not described in the previous pages. For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.md).
+This document provides information about advanced features included in the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs), that are not described in the previous pages. For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.mdx).
 
 :::info
 

diff --git a/arbitrum-docs/stylus/stylus-quickstart.md → arbitrum-docs/stylus/stylus-quickstart.mdx b/arbitrum-docs/stylus/stylus-quickstart.md → arbitrum-docs/stylus/stylus-quickstart.mdx
@@ -6,7 +6,7 @@ sme: chrisco512, anegg0
 sidebar_position: 2
 target_audience: Developers writing Stylus contracts in Rust using Stylus
 ---
-
+import Collapsible from 'react-collapsible';
 import PublicPreviewBannerPartial from '../partials/_public-preview-banner-partial.mdx';
 
 <PublicPreviewBannerPartial />
@@ -25,12 +25,11 @@ This guide will get you started with <a data-quicklook-from="stylus">Stylus</a>'
 
 ### Prerequisites
 
-#### Rust toolchain
-
+<Collapsible trigger="Rust toolchain">
 Follow the instructions on [Rust Lang’s installation page](https://www.rust-lang.org/tools/install) to install a complete Rust toolchain (v1.81 or older, v1.82 is currently not supported) on your system. After installation, ensure you can access the programs `rustup`, `rustc`, and `cargo` from your preferred terminal application.
+</Collapsible>
 
-#### VS Code
-
+<Collapsible trigger="VS Code">
 We recommend [VSCode](https://code.visualstudio.com/) as the IDE of choice for its excellent Rust support, but feel free to use another text editor or IDE if you’re comfortable with those.
 
 Some helpful VS Code extensions for Rust development:
@@ -39,19 +38,20 @@ Some helpful VS Code extensions for Rust development:
 - [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens): Immediately highlights errors and warnings in your code
 - [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml): Improves syntax highlighting and other features for TOML files, often used in Rust projects
 - [Dependi](https://marketplace.visualstudio.com/items?itemName=fill-labs.dependi): Helps manage Rust crate versions directly from the editor
+</Collapsible>
 
-#### Docker
+<Collapsible trigger="Docker">
 
 The testnode we will use as well as some `cargo stylus` commands require Docker to operate.
 
 You can download Docker from [Docker’s website](https://www.docker.com/products/docker-desktop).
+</Collapsible>
 
-#### Foundry's Cast
+<Collapsible trigger="Foundry's Cast">
 
 [Foundry's Cast](https://book.getfoundry.sh/cast/) is a command-line tool that allows you to interact with your EVM contracts.
-
-#### Nitro devnode
-
+</Collapsible>
+<Collapsible trigger="Nitro devnode">
 Stylus is available on Arbitrum Sepolia, but we'll use nitro devnode which has a pre-funded wallet saving us the effort of wallet provisioning or running out of tokens to send transactions.
 
 ```shell title="Install your devnode"
@@ -62,6 +62,7 @@ cd nitro-devnode
 ```shell title="Launch your devnode"
 ./run-dev-node.sh
 ```
+</Collapsible>
 
 ## Creating a Stylus project with cargo stylus
 

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -14,6 +14,15 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'throw',
   favicon: 'img/logo.svg',
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https:use.fontawesome.com/releases/v5.0.1/css/all.css',
+      },
+    },
+  ],
   markdown: {
     mermaid: true,
   },

diff --git a/website/package.json b/website/package.json
@@ -39,6 +39,7 @@
     "posthog-docusaurus": "^2.0.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
+    "react-collapsible": "^2.10.0",
     "react-dom": "^18.2.0",
     "sass": "^1.66.1",
     "tippy.js": "^6.3.7",
@@ -48,11 +49,11 @@
     "@docusaurus/module-type-aliases": "^3.3.2",
     "@offchainlabs/prettier-config": "0.2.1",
     "@tsconfig/docusaurus": "^2.0.3",
+    "docusaurus-plugin-typedoc": "^1.0.1",
     "markdown-link-extractor": "^3.1.0",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.13",
-    "docusaurus-plugin-typedoc": "^1.0.1",
     "typedoc-plugin-frontmatter": "^1.0.0",
     "typedoc-plugin-markdown": "4.0.1",
     "typescript": "^5.1"

diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
@@ -11,3 +11,4 @@
 @use './partials/_sidebar.scss';
 @use './partials/_footer.scss';
 @use './partials/_navbar.scss';
+@use './partials/_collapsible.scss';
diff --git a/website/src/css/partials/_collapsible.scss b/website/src/css/partials/_collapsible.scss
@@ -0,0 +1,100 @@
+@use './_mixins.scss' as *;
+// The main container element
+.Collapsible {
+  background-color: unset;
+}
+
+//The content within the collaspable area
+.Collapsible__contentInner {
+  padding: 10px;
+  border: 1px solid lightGrey;
+  border-top: 0;
+
+  p {
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+//The link which when clicked opens the collapsable area
+.Collapsible__trigger {
+  display: block;
+  font-weight: 700;
+  text-decoration: none;
+  position: relative;
+  border: 1px solid white;
+  padding: 8px;
+  background: rgb(207, 207, 207);
+  color: rgb(83, 82, 82);
+
+  &:after {
+    font-family: 'Font Awesome\ 5 Free';
+    content: '\f107';
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: block;
+    transition: transform 300ms;
+  }
+
+  &.is-open {
+    &:after {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    background-color: grey;
+  }
+}
+
+.CustomTriggerCSS {
+  background-color: lightcoral;
+  transition: background-color 200ms ease;
+}
+
+.CustomTriggerCSS--open {
+  background-color: darkslateblue;
+}
+
+.Collapsible__custom-sibling {
+  padding: 5px;
+  font-size: 12px;
+  background-color: #cbb700;
+  color: black;
+}
+
+[data-theme='dark'] {
+  .Collapsible__contentInner {
+    border: 1px solid #444;
+  }
+
+  .Collapsible__trigger {
+    background: #333;
+    color: #ddd;
+    border: 1px solid #555;
+
+    &.is-disabled {
+      background-color: #444;
+    }
+  }
+
+  .CustomTriggerCSS {
+    background-color: #555;
+  }
+
+  .CustomTriggerCSS--open {
+    background-color: #222;
+  }
+
+  .Collapsible__custom-sibling {
+    background-color: #555;
+    color: #eee;
+  }
+}
diff --git a/website/yarn.lock b/website/yarn.lock
@@ -8672,6 +8672,11 @@ [email protected]:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-collapsible@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.10.0.tgz#57330f9f4f968a41ece49c651b56cf30f9a06d19"
+  integrity sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -9601,7 +9606,16 @@ std-env@^3.0.1:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9650,7 +9664,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-Original file line number
+Diff line change
@@ Expand Up @@
     <PublicPreviewBannerPartial />
-    This document provides information about advanced features included in the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs), that are not described in the previous pages. For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.md).
+    This document provides information about advanced features included in the [Stylus Rust SDK](https://github.com/OffchainLabs/stylus-sdk-rs), that are not described in the previous pages. For information about deploying Rust smart contracts, see the `cargo stylus` [CLI Tool](https://github.com/OffchainLabs/cargo-stylus). For a conceptual introduction to Stylus, see [Stylus: A Gentle Introduction](../stylus-gentle-introduction.md). To deploy your first Stylus smart contract using Rust, refer to the [Quickstart](../stylus-quickstart.mdx).
     :::info
@@ Expand Down @@