updates

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/betteridea-dev/docs#readme",
   "dependencies": {
+    "@betteridea/codecell": "^1.0.3",
     "@next/third-parties": "^14.1.4",
     "next": "^13.0.6",
     "nextra": "^2.13.4",
@@ -28,6 +29,9 @@
   },
   "devDependencies": {
     "@types/node": "18.11.10",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.3"
   }
 }

pages/_app.tsx

@@ -0,0 +1,5 @@
+import "../styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+    return <Component {...pageProps} />;
+}

pages/_meta.json

@@ -1,16 +1,16 @@
 {
   "index": "Introduction",
   "setup": "Dev Setup",
-  "notebook-interface": "The Notebook Interface",
+  "new-project": "New Project",
+  "interfaces": "Interfaces",
   "---": {
     "type": "separator"
   },
   "external-integration": "External Integration",
-  "ao": "AO",
   "contact": {
     "title": "Contact ↗",
     "type": "page",
-    "href": "https://twitter.com/betteridea-dev",
+    "href": "mailto:hello@betteridea.dev",
     "newWindow": true
   }
-}
+}

pages/external-integration.mdx

@@ -1,74 +1,46 @@
-# 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.
+import { CodeCell, runCell } from '@betteridea/codecell';
 
-## Iframe usage
-
-```jsx
-<iframe
-  src="https://ide.betteridea.dev/?codeblock"
-  width="100%" height="250px"
-  style={{ borderRadius: 10 }}
-/>
-```
 
-will produce something like
+# Integrating with other webpages
 
-<iframe src="https://ide.betteridea.dev/?codeblock" width="100%" height="250px" style={{borderRadius:10}}></iframe>
+We provide a React component which can be used to embed code cells on any webpage.
+This can be useful on documentation pages or any other webpage where you want to show code snippets and let the user run them without needing to setup anything.
 
-## Custom code
+This is possible through the use of the [`@betteridea/codecell`](https://www.npmjs.com/package/@betteridea/codecell) package which provides the `CodeCell` component and utility functions to run the code cells.
 
-Just add a url parameter value `?codeblock=<URL encoded lua code>`
+[![NPM Downloads](https://img.shields.io/npm/dw/%40betteridea%2Fcodecell?style=flat&label=%40betteridea%2Fcodecell)](https://www.npmjs.com/package/@betteridea/codecell)
 
-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`
+## Example
 
 ```jsx
-<iframe
-  src="http://ide.betteridea.dev/?codeblock=Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data"
-  width="100%" height="250px"
-  style={{ borderRadius: 10 }}
-/>
-```
+import { CodeCell } from '@betteridea/codecell';
 
-will preload the code cell with the lua code you provide in the url parameter
+...
 
-<iframe
-  id="last-msg"
-  src="http://ide.betteridea.dev/?codeblock=Inbox%5B%23Inbox%5D.Data%20--Latest%20message%20data"
-  width="100%" height="250px"
-  style={{borderRadius:10}}
-/>
+<CodeCell
+  cellId='C1'
+  appName='BetterIDEa-Docs'
+  code={`Name = {}
 
----
+table.insert(Name, "Ankush")
 
-## Running lua from external call
+return Name`}
+/>
+```
 
-You can execute the code cell from an external button click or any event by sending a message to the iframe.
+will result in a live code cell like this:
 
-Add a unique id to the iframe and use a querySelector to get the iframe and then call `contentWindow.postMessage` with `{action: "run"}` and target origin as `https://ide.betteridea.dev`
+<CodeCell
+      cellId='C1'
+      appName='BetterIDEa-Docs'
+  code={`Name = {}
 
-```jsx
-<iframe
-  id="adder"
-  src="https://ide.betteridea.dev/?codeblock=1%2B1"
-  width="100%" height="250px"
-  style={{ borderRadius: 10 }}
-/>
-```
+table.insert(Name, "Ankush")
 
-```jsx
-<button
-  onClick={() => {
-    const iframe = document.querySelector("#adder");
-    iframe.contentWindow.postMessage({ action: "run" }, "https://ide.betteridea.dev");
+return Name`}
+    style={{
+    outline: '1px solid #50505050',
+    borderRadius: '5px',
   }}
->
-  run 1+1
-</button>
-```
-
-This button will run the code cell which has the id `adder`
+/>

pages/index.mdx

@@ -4,7 +4,9 @@ import Link from 'next/link'
 
 BetterIDEa is a web based IDE and your one stop solution to developing on Arwaeve and AO.
 
-You can use the BetterIDEa to write, compile, and deploy your smart contracts to the Arweave Network.
+You can use the BetterIDEa to write,  deploy your AO processes to the Arweave Network.
+
+<iframe className="mx-auto block m-2 rounded-md" width="560" height="315" src="https://www.youtube.com/embed/9snJSH9CdUs?si=az4d6mcQAjm3xjzy" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
 
 Checkout the IDE at [ide.betteridea.dev](https://ide.betteridea.dev/)
 
@@ -15,5 +17,3 @@ Checkout the IDE at [ide.betteridea.dev](https://ide.betteridea.dev/)
 Recently, Arweave announced the release of a *hyper threaded computer* called [AO](https://ao.arweave.dev) on the Arweave Network. 
 
 This is a big step forward for the Arweave Ecosystem adn web3 in general as it will enable developers to build hyper scalable smart contracts and DAPPs that was not feasible before.
-
-<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">The hyper parallel computer launches right now. <a href="https://t.co/Gyf5F00VYm">pic.twitter.com/Gyf5F00VYm</a></p>&mdash; ao (@aoTheComputer) <a href="https://twitter.com/aoTheComputer/status/1762545634035290465?ref_src=twsrc%5Etfw">February 27, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

pages/interfaces/notebook.mdx

@@ -0,0 +1,9 @@
+
+# Notebook Interface
+
+The notebook interface is a unique cell based editing interface that allows you to write code in cells and run them individually. This is similar to Google Colab and Jupyter Notebooks, which also allows you to write markdown, latex or generate graphs
+
+![Notebook Interface](../../assets/images/nb-interface.png)
+
+![Graph Example](../../assets/images/graph.png)
+

pages/interfaces/simple-file.mdx

@@ -0,0 +1,5 @@
+# File based interface
+
+The file based editor is a more traditional code editor that allows you to write code in files and run them.
+
+![Notebook Interface](../../assets/images/file-interface.png)