add dbadmin, examples, patches

betteridea-dev · Jun 1, 2024 · 6e6d8a3 · 6e6d8a3
1 parent 2309476
commit 6e6d8a3
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 12 deletions.
diff --git a/pages/examples.mdx b/pages/examples.mdx
@@ -0,0 +1,13 @@
+
+# We would love to showcase the projects you build using the BetterIDEa.
+
+If you have built something cool, please share it with us on [Twitter](https://twitter.com/betteridea_dev) or [Discord](https://discord.gg/nm6VKUQBrA) using the betteridea [share](./share-project.mdx) feature
+
+And we will feature it in the examples section.
+
+### Happy Building! 🚀
+
+Heres a list of examples
+
+- [Plotting crypto price graphs using 0rbit](./examples/0rbit-price-graph.mdx)
+- [AO-SQLite backend for blogging app](./examples/sqlite-backend.mdx)
diff --git a/pages/examples/sqlite-backend.mdx b/pages/examples/sqlite-backend.mdx
@@ -0,0 +1,12 @@
+import { Callout } from 'nextra/components'
+
+# AO-SQLite backend for blogging app
+
+- Uses the AOS-SQLite AO-Module to spawn a process with sqlite support
+- Uses [DbAdmin](../modules/db-admin.mdx) to manage the database
+
+[![open with betteridea](https://img.shields.io/badge/Open_this_project-grey?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAZCAYAAAABmx/yAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAf5JREFUOI2VkktrU1EURtc+9yZqG5UKJmlw2omlEymCf0AcOhERCtGKSS0UJVWCiIPitKlWpEkqFHwg4kD9A2IRdCQIVgvFUZWYlASh9qVN7t0OgjFX8+oHZ7bXOYt9Psl+u3zEUd24GLm9xA5iXOjHmPfpfCL7cOVqd8cggMAeMQxvqvM5kx+/0DEIgGIr9GJ0MlNIfMgWrhzuDPx7wT5gQHHmM4XEg7lScm9nYC1yEOFMuVJeaqTfAmytb7cE6/QVBsCdT+cTzwPGSrR+sV4cUOgR4eSaukeNYi0qfAV+tWGLIjwt+yt9o+HUK1FVZvPxLtd0Xwei6tIr4vmmLYScayQ6Gky9rRmoam3mbikZscvlGUSOgQaBosCchDduxMiWPer1IED6y7Ue8f18hpFBEXkhwfXhfyEPOMGEHcqvjoEmMBJC8YFsgeZ8Rs+eD9568x84U7x0wnKsaRUiKIEGiykJvN72V86NHbjzA8AKjaydslQeKUQAf5ONdoH0WY5E362/zA0Gjn+yRd3dKtKwj96oDRwS3PuZlfHNzpoDiLCqKssiOhQPTS20B4WKuFoQY92Mh1L3oLrNdpXLq8uT7V1Ofyw4OfsHgiYlr2qxbIShWHhqodGMF2yi1Sg1VYWiqj5upNXqxUUR5/RIaPpjq2FPst+T+1WrDdrJ+Q08kgLwyCsoJwAAAABJRU5ErkJggg==)](https://ide.betteridea.dev/import?id=5bHLvc5MKhSqJO27f1HXArl55fPN2qdtIBjobuxpnog)
+
+This project is the backend for a simple blogging app that uses the AOS-SQLite store blog posts in a database on AO.
+
+<Callout type="info">This project was a part of the [ArweaveIndia](https://arweaveindia.com) bootcamp series for the second hackerhouse cohort</Callout>
diff --git a/pages/external-integration.mdx b/pages/external-integration.mdx
@@ -8,24 +8,71 @@ This can be useful on documentation pages or any other webpage where you want to
 
 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.
 
-[![NPM Downloads](https://img.shields.io/npm/dw/%40betteridea%2Fcodecell?style=flat&label=%40betteridea%2Fcodecell)](https://www.npmjs.com/package/@betteridea/codecell)
+[![NPM Downloads](https://img.shields.io/npm/dt/%40betteridea%2Fcodecell?style=flat&label=%40betteridea%2Fcodecell&color=lightgreen)](https://www.npmjs.com/package/@betteridea/codecell)
+
+### `<CodeCell .../>`
+
+A react component to render a code cell in your app.
+
+#### Props
+
+| Prop           | Type                     | Description                                                                   |
+| -------------- | ------------------------ | ----------------------------------------------------------------------------- |
+| `cellId`       | `string`                 | Unique id for the cell                                                        |
+| `appName`      | `string`                 | Unique app name                                                               |
+| `code`         | `string`                 | Initial code for the cell                                                     |
+| `onAOProcess`  | `(pid:string) => void`   | Callback function that run whenever a process is is loaded                    |
+| `onNewMessage` | `(msgs: msg[]) => void`  | Callback function, runs whenever process gets new messages                    |
+| `onInbox`      | `(inbox: msg[]) => void` | Callback function, runs whenever Inbox is received after calling `getInbox()` |
+| `width`        | `string`                 | Width of the cell                                                             |
+| `height`       | `string`                 | Height of the cell                                                            |
+| `className`    | `string`                 | Class names for styling                                                       |
+| `style`        | `React.CSSProperties`    | Inline styles                                                                 |
+| `devMode`      | `boolean`                | Boolean to enable dev mode                                                    |
+
+
+### `getInbox(...)`
+
+Fetches latest Inbox messages from the process.
+
+#### Arguments
+
+| Argument  | Type      | Description                |
+| --------- | --------- | -------------------------- |
+| `cellId`  | `string`  | Unique id of the cell      |
+| `devMode` | `boolean` | Boolean to enable dev mode |
+
+### `setCellCode(...)`
+
+To update the code in a cell, after it has been rendered.
+It is discouraged to update code by changing the `code` prop directly, since it re-renders the webview, again this is personal preference.
+
+#### Arguments
+
+| Argument  | Type      | Description                |
+| --------- | --------- | -------------------------- |
+| `cellId`  | `string`  | Unique id of the cell      |
+| `code`    | `string`  | Code to set in the cell    |
+| `devMode` | `boolean` | Boolean to enable dev mode |
 
 
 ## Example
 
-```jsx
+```javascript
 import { CodeCell } from '@betteridea/codecell';
 
-...
-
+// in your react app
 <CodeCell
-  cellId='C1'
-  appName='BetterIDEa-Docs'
-  code={`Name = {}
+  cellId="C1" 
+  appName="BetterIDEa-Code-Cell" 
+  code={`Names = {}
 
-table.insert(Name, "Ankush")
+table.insert(Names, "Ankush")
 
-return Name`}
+return Names`}
+  onAOProcess={(pid)=> console.log("using process: ", pid)}
+  onNewMessage={(msgs) => console.log("new messages: ", msgs)}
+  onInbox={(inbox) => console.log("got inbox: ", inbox)}
 />
 ```
 

diff --git a/pages/modules/_meta.json b/pages/modules/_meta.json
@@ -1,3 +1,4 @@
 {
-    "graph": "graph.lua"
+    "graph": "graph.lua",
+    "db-admin":"DbAdmin.lua"
 }
diff --git a/pages/modules/db-admin.mdx b/pages/modules/db-admin.mdx
@@ -0,0 +1,7 @@
+# DbAdmin - DB Manager for AO-SQLite
+
+Author: Tom [@rakis_me](https://x.com/rakis_me)
+
+Github: [aos-packages/db-admin](https://github.com/twilson63/aos-packages/tree/main/packages/db-admin)
+
+See github for detailed documentation
diff --git a/pages/new-project.mdx b/pages/new-project.mdx
@@ -1,4 +1,4 @@
-# The Notebook Interface
+# Lets start building, shall we?
 
 On visiting the [IDE](https://ide.betteridea.dev/), you will be greeted with this landing page.
 

diff --git a/pages/share-project.mdx b/pages/share-project.mdx
@@ -11,5 +11,5 @@ All you have to do is click on the share button in the top right area, which wil
 You can share this link with anyone, and when they open it, a new project will be created in their workspace with the same files and code as yours.
 
 <Callout type="info" emoji="ℹ️">
-    The shared data gets stored in a `_BETTERIDEA_SHARE` variable on the process which shared the project. The same data is read when someone opens the shared link.
+    The project data gets stored in a `_BETTERIDEA_SHARE` variable on the process which shared the project. The same data is read when someone opens the shared link.
 </Callout>