Merge pull request #1333 from ethereum-optimism/supersim-migrate

app dev restructure

Author: cpengilly

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