generated from shuding/nextra-docs-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
901 additions
and
277 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import "../styles/globals.css"; | ||
|
||
export default function App({ Component, pageProps }) { | ||
return <Component {...pageProps} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} | ||
} |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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` | ||
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
Oops, something went wrong.