chore: add both frontend and backend to one monorepo

.github/workflows/pages.yml

@@ -15,19 +15,19 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
+
       - uses: actions/cache@v3
         with:
           path: "**/node_modules"
           key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
           restore-keys: ${{ runner.OS }}-npm-cache-
 
-      - run: npm install
-      - run: npm run build
+      - run: cd frontend && npm install && npm run build
 
       - name: Deploy to github pages
         uses: crazy-max/ghaction-github-pages@v3.1.0
         with:
           target_branch: gh-pages
-          build_dir: dist
+          build_dir: frontend/dist
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -22,3 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Rust related
+book
+target
+example

README.md

@@ -2,10 +2,37 @@
 
 ## TODO
 
+- [x] Allow move ouput
 - [x] Automatically update theme
 - [x] Communicate with iframe host
 - [ ] Implement more languages other than python
 
+## Embed
+
+Simplest way to embed the REPL is to use an iframe. The following example demonstrates how to embed the REPL in an iframe.
+
+```html
+<iframe src="https://mr-addict.github.io/mdbook-repl" width="100%" allow="clipboard-write"></iframe>
+<script>
+  const id = "ac2f5a2a";
+  const lang = "python";
+  const theme = "light";
+  const code = "print('Hello world')";
+
+  const iframe = document.querySelector("iframe");
+  const message = { repl: { id, editor: { theme, lang, code, defaultCode: code } } };
+
+  window.addEventListener("message", (event) => {
+    if (event.source === window || !event.data.repl) return;
+
+    const repl = event.data.repl;
+
+    if (repl.id === id) replElement.style.height = repl.dimensions.height + "px";
+    else if (repl.id === "") iframe.contentWindow.postMessage(message, "*");
+  });
+</script>
+```
+
 ## Useful Links
 
 - [ACE Editor](https://ace.c9.io)