Update and improve smart rollup tutorial

markdoc/tags.js

@@ -11,6 +11,19 @@ import CalendlyEmbed from '@/components/CalendlyEmbed';
 // Import the built-in Next.js tags
 import { comment } from '@markdoc/next.js/tags'
 
+// Custom tag to allow embedding HTML elements
+const UnescapedHtml = ({ htmlWrapperTag = 'div', children }) => {
+  const html =
+    typeof children === 'string'
+      ? children
+      : typeof children.props.children === 'string'
+      ? children.props.children
+      : children.props.children.join('')
+
+  const CustomTag = htmlWrapperTag
+  return <CustomTag dangerouslySetInnerHTML={{ __html: html }} />
+}
+
 const tags = {
   callout: {
     attributes: {
@@ -82,6 +95,13 @@ const tags = {
   calendlyEmbed: {
     render: CalendlyEmbed,
   },
+  html: {
+    render: UnescapedHtml,
+    attributes: {
+      htmlWrapperTag: { type: String },
+      children: { type: String },
+    },
+  },
   // tabs: {
   //   render: Tabs,
   //   attributes: {},

src/components/Layout.jsx

@@ -285,10 +285,6 @@ const tutorialNavigation = [
           },
         ],
       },
-      {
-        title: 'Deploy your own smart rollup',
-        href: '/tutorials/smart-rollups',
-      },
       {
         title: 'Create an NFT',
         href: '/tutorials/create-an-nft',
@@ -347,6 +343,40 @@ const tutorialNavigation = [
           },
         ],
       },
+      {
+        title: 'Deploy a smart rollup',
+        href: '/tutorials/smart-rollups',
+        children: [
+          {
+            title: "Introduction",
+            href: '/tutorials/smart-rollups',
+          },
+          {
+            title: "Part 1: Setting up the application",
+            href: '/tutorials/smart-rollups/set-up',
+          },
+          {
+            title: "Part 2: Starting a Tezos sandbox",
+            href: '/tutorials/smart-rollups/start-sandbox',
+          },
+          {
+            title: "Part 3: Running the kernel in debug mode",
+            href: '/tutorials/smart-rollups/debug',
+          },
+          {
+            title: "Part 4: Optimizing the kernel",
+            href: '/tutorials/smart-rollups/optimize',
+          },
+          {
+            title: "Part 5: Deploying (originating) the rollup",
+            href: '/tutorials/smart-rollups/deploy',
+          },
+          {
+            title: "Part 6: Running the rollup node",
+            href: '/tutorials/smart-rollups/run',
+          },
+        ],
+      },
     ],
   },
 ]

src/pages/tutorials/smart-rollups/debug.md

@@ -0,0 +1,39 @@
+---
+id: debug
+title: "Part 3: Running the kernel in debug mode"
+lastUpdated: 11th October 2023
+---
+
+Octez provides a command named `octez-smart-rollup-wasm-debugger` that runs smart rollups in debug mode to make it easier to test and observe them.
+Later, you will deploy the rollup to the sandbox, but running it in debug mode first verifies that it built correctly.
+
+1. In the second terminal window inside the Docker container, go to the `hello_world_kernel` folder.
+
+1. Run this command to start the rollup and pass an empty message inbox to it:
+
+   ```bash
+   octez-smart-rollup-wasm-debugger --kernel target/wasm32-unknown-unknown/debug/hello_world_kernel.wasm --inputs empty_input.json
+   ```
+
+   The command prompt changes again to show that you are in debugging mode, which steps through commands.
+
+1. At the debugging prompt, run this command to send the message inbox to the kernel:
+
+   ```bash
+   step inbox
+   ```
+
+   The response shows the logging information for the kernel, including these parts:
+
+   - The message "Hello, kernel" from the `hello_kernel` function
+   - The message "Got message: Internal(StartOfLevel)," which represents the start of the message inbox
+   - The message "Got message: Internal(InfoPerLevel(InfoPerLevel ...," which provides the hash of the previous block
+   - The message "Got message: Internal(EndOfLevel)," which represents the end of the message inbox
+
+   Now you know that the kernel works.
+   In the next section, you optimize and deploy it to the sandbox.
+
+1. Press Ctrl + C to end debugging mode.
+
+Now you know that the kernel works.
+In the next section, you optimize the kernel to be deployed to the sandbox.

src/pages/tutorials/smart-rollups/deploy.md

@@ -0,0 +1,22 @@
+---
+id: deploy
+title: "Part 5: Deploying (originating) the rollup"
+lastUpdated: 11th October 2023
+---
+
+Smart rollups are originated in a way similar to smart contracts.
+Instead of running the `octez-client originate contract` command, you run the `octez-client originate smart rollup` command.
+This command creates an address for the rollup and stores a small amount of data about it on layer 1.
+
+1. In the second terminal window, in the Docker container, in the `hello-world-kernel` folder, run this command to deploy the installer kernel to the Tezos sandbox:
+
+   ```bash
+   octez-client originate smart rollup "test_smart_rollup" from "bootstrap1" of kind wasm_2_0_0 of type bytes with kernel file:hello_world_kernel_installer.hex --burn-cap 3
+   ```
+
+   If you need to open a new terminal window within the Docker container, run the command `docker exec -it octez-container /bin/sh`.
+
+Like the command to originate a smart contract, this command uses the `--burn-cap` argument to allow the transaction to take fees from the account.
+Also like deploying a smart contract, the response in the terminal shows information about the transaction and the address of the originated smart rollup, which starts with `sr1`.
+
+Now layer 1 is aware of the rollup and nodes can run the rollup kernel.