images update, integration docs

pages/_meta.json

@@ -5,11 +5,12 @@
   "---": {
     "type": "separator"
   },
+  "external-integration": "External Integration",
   "ao": "AO",
   "contact": {
     "title": "Contact ↗",
     "type": "page",
     "href": "https://twitter.com/betteridea-dev",
     "newWindow": true
   }
-}
+}

pages/ao/sending-a-message.mdx

@@ -1,11 +1,10 @@
-
 # Sending a message
 
 ```lua
 Send({
     Target = "PROCESS_ID",
     Data = "YOUR_MESSAGE",
-    ... 
+    ...
     additional tags
 })
 ```
@@ -14,6 +13,6 @@ Lets try sending a message to the ourself. To get our own process id we use `ao.
 
 ![send-message](../../assets/images/ao/send-message.png)
 
-A popup appears on the bottom left, indicating we received a new message in our Inbox.
+A popup appears on the bottom right, indicating we received a new message in our Inbox.
 
-![new-message](../../assets/images/ao/new-message.png)
+![new-message](../../assets/images/ao/new-message.png)

pages/ao/viewing-messages.mdx

@@ -1,6 +1,90 @@
 import { Callout } from 'nextra/components'
 
-# Viewing Inbox messages
+# Inbox Table
+
+The `Inbox` table is a list of all the messages that have been sent to the process.
+
+Upon running `Inbox` in a Notebook cell, a table similar to the following will be displayed
+
+![inbox](../../assets/images/ao/inbox.png)
+
+<details>
+<summary>Example Inbox</summary>
+```lua
+{
+  {
+     Timestamp = 1710823293780,
+     From = "R-9oSFkGOcEfU8j1taaCD27zozHI5yYH5Di5itcENHE",
+     TagArray = {
+      {
+         value = "ao",
+         name = "Data-Protocol"
+      },
+      {
+         value = "ao.TN.1",
+         name = "Variant"
+      },
+      {
+         value = "Process",
+         name = "Type"
+      },
+      {
+         value = "9afQ1PLf2mrshqCTZEzzJTR2gWaC9zNPnYgYEqg1Pt4",
+         name = "Module"
+      },
+      {
+         value = "TZ7o7SIZ06ZEJ14lXwVtng1EtSx60QkPy-kh-kdAXog",
+         name = "Scheduler"
+      },
+      {
+         value = "aoconnect",
+         name = "SDK"
+      },
+      {
+         value = "text/plain",
+         name = "Content-Type"
+      }
+     },
+     Target = "_HGLFI7z5aTQWYfuyHpMYrmwG_j2bKv0EnXnnD73iLM",
+     SDK = "aoconnect",
+     Content-Type = "text/plain",
+     Scheduler = "TZ7o7SIZ06ZEJ14lXwVtng1EtSx60QkPy-kh-kdAXog",
+     Owner = "R-9oSFkGOcEfU8j1taaCD27zozHI5yYH5Di5itcENHE",
+     Id = "_HGLFI7z5aTQWYfuyHpMYrmwG_j2bKv0EnXnnD73iLM",
+     Cron = false,
+     Read-Only = false,
+     Module = "9afQ1PLf2mrshqCTZEzzJTR2gWaC9zNPnYgYEqg1Pt4",
+     Tags = {
+       Content-Type = "text/plain",
+       SDK = "aoconnect",
+       Variant = "ao.TN.1",
+       Scheduler = "TZ7o7SIZ06ZEJ14lXwVtng1EtSx60QkPy-kh-kdAXog",
+       Module = "9afQ1PLf2mrshqCTZEzzJTR2gWaC9zNPnYgYEqg1Pt4",
+       Data-Protocol = "ao",
+       Type = "Process"
+    },
+     Block-Height = 1386419
+  }
+}
+```
+
+</details>
+
+The first item in the table contains details about the process and will always exist with every newly created process.
+
+As the process receives messages, they will be added to the table in the order they were received.
+
+---
+
+# Inbox GUI
+
+Clicking the Inbox buton towards the top left, displays a more user-friendly view of the inbox table.
+
+![inbox-gui](../../assets/images/ao/inbox-gui.png)
+
+---
+
+# Viewing Specific messages
 
 ## Number of messages in Inbox
 
@@ -28,4 +112,4 @@ The above code will return the first message in the inbox.
 
 <Callout type="info">
     Indexing in Lua starts from 1.
-</Callout>
+</Callout>

pages/external-integration.mdx

@@ -0,0 +1,43 @@
+# Integrating with other webpages
+
+You can use our IDE code cell on your website by embedding it through an iframe.
+
+This can be used on documentation pages or any other webpage where you want to show code snippets and let the user run them.
+
+## Iframe usage
+
+```jsx
+<iframe
+  src="https://ide.betteridea.dev/?codeblock"
+  width="100%"
+  height="250px"
+  style={{ borderRadius: 10 }}
+  allowTransparency
+></iframe>
+```
+
+will produce something like
+
+<iframe src="https://ide.betteridea.dev/?codeblock" width="100%" height="250px" style={{borderRadius:10}} allowTransparency></iframe>
+
+## Custom code
+
+Just add a url parameter value `?codeblock=<URL encoded lua code>`
+
+example: for the lua code `Inbox[#Inbox].Data --Latest message data`, the URL encoded code would be `Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data`
+
+and can be used as `https://ide.betteridea.dev/?codeblock=Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data`
+
+```jsx
+<iframe
+  src="http://ide.betteridea.dev/?codeblock=Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data"
+  width="100%"
+  height="250px"
+  style={{ borderRadius: 10 }}
+  allowTransparency
+></iframe>
+```
+
+will preload the code cell with the lua code you provide in the url parameter
+
+<iframe src="https://ide.betteridea.dev/?codeblock=Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data" width="100%" height="250px" style={{borderRadius:10}} allowTransparency></iframe>