app dev restructure

components/AskAIButton.tsx

@@ -1,15 +1,36 @@
 import { RiSparkling2Fill } from '@remixicon/react';
 import { useFeature } from '@growthbook/growthbook-react';
+import { useEffect, useState } from 'react';
 
 const AskAIButton = () => {
+  const [mounted, setMounted] = useState(false);
   const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Don't render anything until client-side
+  if (!mounted) {
+    return null;
+  }
 
   if (!enableDocsAIWidget) {
     return null;
   }
 
   return (
-    <button id='custom-ask-ai-button' className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' style={{ backgroundColor: '#FF0420', color: 'white', display: 'flex', alignItems: 'center', gap: '4px' }}>
+        <button 
+        id='custom-ask-ai-button' 
+        className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' 
+        style={{ 
+          backgroundColor: '#FF0420', 
+          color: 'white', 
+          display: 'flex', 
+          alignItems: 'center', 
+          gap: '4px' 
+        }}
+      >
       <span>Ask AI</span>
       <RiSparkling2Fill size={14} />
     </button>

components/WipCallout.tsx

@@ -62,11 +62,8 @@ export function InteropCallout({ context }: Props): ReactElement {
           <div className="nx-text-left">
             Interop is currently in <strong>active development</strong> and not
             yet ready for production use. The information provided here may
-            change frequently.
-            <p>
-              We recommend checking back regularly for the most up-to-date
+            change frequently. We recommend checking back regularly for the most up-to-date
               information.
-            </p>
           </div>
         )}
       </div>

nouns.txt

@@ -4,6 +4,8 @@ Ethereum
 OP Stack
 MetaMask
 SuperchainERC20
+SuperchainERC20 Starter Kit
+Supersim
 ZK
 Security Council
 Sequencer PBS

package.json

@@ -7,6 +7,7 @@
     "fix": "eslint . --ext mdx --fix && pnpm spellcheck:fix && pnpm breadcrumbs && pnpm fix-redirects",
     "spellcheck:lint": "cspell lint \"**/*.mdx\"",
     "spellcheck:fix": "cspell --words-only --unique \"**/*.mdx\" | sort --ignore-case | uniq > words.txt",
+    "linkcheck": "lychee --config ./lychee.toml --quiet \"./pages\"",
     "breadcrumbs": "npx ts-node --skip-project utils/create-breadcrumbs.ts",
     "check-redirects": "npx ts-node --skip-project utils/redirects.ts",
     "fix-redirects": "npx ts-node --skip-project utils/fix-redirects.ts",

pages/app-developers/_meta.json

@@ -3,10 +3,35 @@
         "title": "App Developers",
         "type": "separator"
       },
-    "overview": "Overview",
-    "quick-start": "Superchain app quick start",
-    "tutorials": "Tutorials",
-    "transactions": "Transactions",
+    "get-started": "Getting started",
+    "starter-kit": "SuperchainERC20 starter kit",
+    "interop": "Interoperability",
+    "building-apps": "Building apps on the Superchain",
+    "testing-apps": "Testing apps for the Superchain",
     "bridging": "Bridging",
-    "tools": "App tools"
+    "transactions": "Transactions",
+    "+++ Tutorials": {
+      "title": "",
+      "type": "separator"
+    },
+    "--- Tutorials": {
+      "title": "Tutorials",
+      "type": "separator"
+    },
+    "tutorials": {
+      "title": "Tutorials",
+      "display": "children"
+    },
+    "+++ DevTools": {
+      "title": "",
+      "type": "separator"
+    },
+    "--- DevTools": {
+      "title": "Developer tools",
+      "type": "separator"
+    },
+    "tools": {
+      "title": "Developer tools",
+      "display": "children"
+    }
 }

pages/app-developers/bridging.mdx

@@ -1,18 +1,24 @@
 ---
-title: Bridging
+title: Bridging guides
 lang: en-US
 description: Learn about bridging basics, custom bridges, data transmission between L1 and L2, and using the standard bridge in OP Stack.
 ---
 
 import { Card, Cards } from 'nextra/components'
 
-# Bridging
+# Bridging guides
 
-This section provides information on bridging basics, custom bridges, sending data between l1 and l2 and using the standard bridge. You'll find guide, overview to help you understand and work with these topics.
+Looking to build an application that sends ETH, tokens, or data between OP Mainnet and Ethereum?
+You'll find some useful guides and tutorials in this area of the docs.
+For instance, if you want to learn how to bridge a token from Ethereum to OP Mainnet (or vice versa!), you should check out the [Standard Token Bridge](bridging/standard-bridge).
+
+If you're looking for something more advanced, take a look at the guide on [sending data between L1 and L2](bridging/messaging).
+Contracts on one chain can trigger contract functions on the other chain, which is pretty cool!
+The Standard Token Bridge for OP Mainnet even uses this same message-passing infrastructure under the hood.
 
 <Cards>
-  <Card title="Bridging basics" href="/app-developers/bridging/basics" />
-  <Card title="Custom bridges" href="/app-developers/bridging/custom-bridge" />
-  <Card title="Sending data between L1 and L2" href="/app-developers/bridging/messaging" />
-  <Card title="The Standard Bridge" href="/app-developers/bridging/standard-bridge" />
+  <Card title="Bridging basics" href="/app-developers/bridging/basics" icon={<img src="/img/icons/shapes.svg" />} />
+    <Card title="Standard bridge" href="/app-developers/bridging/standard-bridge" icon={<img src="/img/icons/shapes.svg" />} />
+  <Card title="Custom bridges" href="/app-developers/bridging/custom-bridge" icon={<img src="/img/icons/shapes.svg" />} />
+  <Card title="Sending data between L1 and L2" href="/app-developers/bridging/messaging" icon={<img src="/img/icons/shapes.svg" />} />
 </Cards>

pages/app-developers/bridging/basics.mdx

@@ -28,7 +28,7 @@ All of this is easily accessible with a simple, clean API.
 Ready to start bridging?
 Check out these tutorials to get up to speed fast.
 
-*   [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/cross-dom-bridge-erc20)
-*   [Learn how to bridge ETH with viem](/app-developers/tutorials/cross-dom-bridge-eth)
-*   [Learn how to create a standard bridged token](/app-developers/tutorials/standard-bridge-standard-token)
-*   [Learn how to create a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token)
+*   [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/bridging/cross-dom-bridge-erc20)
+*   [Learn how to bridge ETH with viem](/app-developers/tutorials/bridging/cross-dom-bridge-eth)
+*   [Learn how to create a standard bridged token](/app-developers/tutorials/bridging/standard-bridge-standard-token)
+*   [Learn how to create a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token)

pages/app-developers/bridging/custom-bridge.mdx

@@ -15,7 +15,7 @@ This guide provides important information you should be aware of when building a
 <Callout>
   Custom bridges can bring a significant amount of complexity and risk to any project.
   Before you commit to a custom bridge, be sure that the [Standard Bridge](./standard-bridge) definitely does not support your use case.
-  [Building a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token) is often sufficient for projects that need more flexibility.
+  [Building a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token) is often sufficient for projects that need more flexibility.
 </Callout>
 
 ## Guidelines

pages/app-developers/bridging/messaging.mdx

@@ -13,7 +13,7 @@ This page explains how bridging works, how to use it, and what to watch out for.
 
 <Callout type="info">
   This is a high-level overview of the bridging process.
-  For a step-by-step tutorial on how to send data between L1 and L2, check out the [Solidity tutorial](/app-developers/tutorials/cross-dom-solidity).
+  For a step-by-step tutorial on how to send data between L1 and L2, check out the [Solidity tutorial](/app-developers/tutorials/bridging/cross-dom-solidity).
 </Callout>
 
 ## Understanding contract calls

pages/app-developers/bridging/standard-bridge.mdx

@@ -199,10 +199,10 @@ Users simply need to trigger and send ETH to the [`bridgeETH`](https://github.co
 
 ## Tutorials
 
-*   [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/cross-dom-bridge-erc20)
-*   [Learn how to bridge ETH with viem](/app-developers/tutorials/cross-dom-bridge-eth)
-*   [Learn how to create a standard bridged token](/app-developers/tutorials/standard-bridge-standard-token)
-*   [Learn how to create a custom bridged token](/app-developers/tutorials/standard-bridge-custom-token)
+*   [Learn how to bridge ERC-20 tokens with viem](/app-developers/tutorials/bridging/cross-dom-bridge-erc20)
+*   [Learn how to bridge ETH with viem](/app-developers/tutorials/bridging/cross-dom-bridge-eth)
+*   [Learn how to create a standard bridged token](/app-developers/tutorials/bridging/standard-bridge-standard-token)
+*   [Learn how to create a custom bridged token](/app-developers/tutorials/bridging/standard-bridge-custom-token)
 
 ## Superchain Token List
 

pages/app-developers/getting-started.mdx → pages/app-developers/building-apps.mdx

@@ -1,12 +1,12 @@
 ---
-title: Getting started developing for OP Stack chains
+title: Building apps on the Superchain
 lang: en-US
-description: Learn the basics of OP Stack development.
+description: Learn the basics of building apps on the Superchain.
 ---
 
 import { Steps } from 'nextra/components'
 
-# Getting started developing for OP Stack chains
+# Building apps on the Superchain
 
 This guide explains the basics of OP Stack development.
 OP Stack chains are [EVM equivalent](https://web.archive.org/web/20231127160757/https://medium.com/ethereum-optimism/introducing-evm-equivalence-5c2021deb306), meaning they run a slightly modified version of the same `geth` you run on mainnet.

pages/app-developers/get-started.mdx

@@ -0,0 +1,71 @@
+---
+title: Build interoperable apps on Superchain devnet
+lang: en-US
+description: Learn about deploying contracts, cross-chain messaging, and tutorials to help you build applications on the Superchain.
+---
+
+import { Cards, Card, Callout } from 'nextra/components'
+
+# Build interoperable apps on Superchain devnet
+
+Reimagine your app with Superchain Interop to deliver the unified UX your users expect. Hack on net-new, bold use cases on Interop devnet.
+
+<Callout type="info">
+  Explore the [Superchain Dev Console](https://console.optimism.io/) to build, launch, and grow your app on the Superchain.
+</Callout>
+
+## Connect to Superchain Interop
+
+Select a network to build, test, and quickly iterate on interoperable apps.
+
+| Local network                                                                                                   | Devnet                                                                                                            |
+| :-------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- |
+| Build and iterate on your apps with Supersim – a local multi-chain dev environment.                             | Deploy your app to devnet – a testnet developmental version – to conduct large-scale testing.                     |
+| <ul><li>RPC Endpoint: `local RPC URL` </li><li>Chain ID: `local chain ID`</li><li>[Block explorer](#)</li></ul> | <ul><li>RPC Endpoint: `devnet RPC URL`</li><li>Chain ID: `devnet chain ID`</li><li> [Block explorer](#)</li></ul> |
+| [Supersim](tutorials/supersim)                                                                                  | [Devnet Docs](/stack/interop/tools/devnet)                                                                        |
+
+## Deploy your app to devnet in minutes
+
+The SuperchainERC20 Starter Kit allows you to focus on what to deploy, not how to deploy. It's a streamlined toolkit that simplifies deploying your interoperable app, letting you focus on your core business logic.
+
+*   [Get the Starter Kit](starter-kit)
+
+## Tools & resources for building interoperable apps
+
+| Tool                                                                          | Description                                                             |
+| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| [Supersim](tools/supersim)                                                    | Local multi-chain testing environment for smart contracts.              |
+| [Super CLI](https://github.com/ethereum-optimism/super-cli)                   | Command-line tool for seamless multichain app deployment and testing.   |
+| [Superchain Relayer](https://github.com/ethereum-optimism/superchain-relayer) | UI for monitoring and managing cross-chain transactions.                |
+| [Interop Docs](/stack/interop)                                                | Comprehensive Interop information in the Optimism Docs.                 |
+| [Superchain Dev Console](https://console.optimism.io/)                        | Comprensive tool to build, launch, and grow your app on the Superchain. |
+
+## Handy step-by-step guides
+
+<Cards>
+  <Card title="Supersim tutorials" href="/app-developers/tutorials/supersim" icon={<img src="/img/icons/shapes.svg" />} />
+
+  <Card title="Interop tutorials" href="/app-developers/tutorials/interop" icon={<img src="/img/icons/shapes.svg" />} />
+
+  <Card title="Crosschain guides" href="/stack/interop/cross-chain" icon={<img src="/img/icons/shapes.svg" />} />
+
+  <Card title="Transaction tutorials" href="/app-developers/tutorials/transactions" icon={<img src="/img/icons/shapes.svg" />} />
+
+  <Card title="Bridging tutorials" href="/app-developers/tutorials/bridging" icon={<img src="/img/icons/shapes.svg" />} />
+</Cards>
+
+## Discover and build net-new use cases with Superchain Interop
+
+There is so much more than just bridge abstraction. Hack on the various cutting-edge applications that are uniquely enabled by Superchain Interop. Here are some ideas to get you started:
+
+| Superloans                                                                         | Superlend                                                                                                           | SuperCDP                                                                                                         |
+| :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- |
+| Use collateral on ChainA and ChainB to execute an arbitrage opportunity on ChainA. | Deposit ETH into lending protocols across chains for optimal yield, with automatic rebalancing based on best rates. | Collateralized crosschain debt protocol that holds assets and issues a SuperchainERC20 on user preferred chains. |
+
+*   [Join the Super Hackathon at ETH Denver 2024](https://www.ethdenver.com/)
+
+## Join app dev community and build together
+
+Join the OP Labs team and fellow Superchain Interop builders to share ideas, provide feedback, ask questions, and get the [support](https://github.com/ethereum-optimism/developers/discussions) you need.
+
+*   [Join Discord community](https://discord.gg/optimism)

pages/app-developers/interop.mdx

@@ -0,0 +1,9 @@
+---
+title: Getting started with the OP Stack
+lang: en-US
+description: Learn the basics of OP Stack development.
+---
+
+import InteropExplainer from '@/pages/stack/interop/explainer.mdx'
+
+<InteropExplainer />