From a5fe829dd6d2c0503840210869895f4583440741 Mon Sep 17 00:00:00 2001
From: JohannesDienst-askui <Johannes.Dienst@askui.com>
Date: Wed, 24 Jul 2024 14:45:08 +0200
Subject: [PATCH] feat: tile for embedding Stackblitz for quicker onboarding.
 Only the editor. No Backend

---
 docs/package-lock.json                        |  6 ++++
 docs/package.json                             |  3 +-
 docs/src/components/AskUIEmbedded/index.tsx   | 34 +++++++++++++++++++
 .../components/InstallationCards/index.tsx    | 23 +++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/components/AskUIEmbedded/index.tsx

diff --git a/docs/package-lock.json b/docs/package-lock.json
index b0a05f977..75a1a8e26 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -13,6 +13,7 @@
         "@docusaurus/plugin-ideal-image": "3.4.0",
         "@docusaurus/preset-classic": "3.4.0",
         "@mdx-js/react": "3.0.1",
+        "@stackblitz/sdk": "^1.8.0",
         "clsx": "2.1.1",
         "docusaurus-lunr-search": "3.4.0",
         "prism-react-renderer": "2.3.1",
@@ -3282,6 +3283,11 @@
         "micromark-util-symbol": "^1.0.1"
       }
     },
+    "node_modules/@stackblitz/sdk": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz",
+      "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ=="
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index ddcafe7d0..e3c1f8376 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,7 +24,8 @@
     "docusaurus-lunr-search": "3.4.0",
     "prism-react-renderer": "2.3.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "@stackblitz/sdk": "^1.8.0"
   },
   "devDependencies": {
     "@docusaurus/types": "3.4.0",
diff --git a/docs/src/components/AskUIEmbedded/index.tsx b/docs/src/components/AskUIEmbedded/index.tsx
new file mode 100644
index 000000000..d5f5f9056
--- /dev/null
+++ b/docs/src/components/AskUIEmbedded/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import sdk from '@stackblitz/sdk';
+
+export function AskUIEmbedded(props): JSX.Element {
+  const { projectId, embedOpts = {}, openOpts,
+    files, settings, ...other }
+    = props || {};
+  async function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    // TODO create remote machine and get AskUI Controller URL + VNC URL
+    const remoteDeviceControllerURL = 'http://localhost:6769';
+    files['.env'] = files['.env'].replace("RACU", remoteDeviceControllerURL);
+    console.log(files['.env'])
+    const vm = await sdk.embedProjectId(
+      'embedStackBlitz',
+      projectId, 
+      {
+        hideExplorer: false,
+        showSidebar: true,
+        hideNavigation: false,
+        height: 600,
+        openFile: 'askui_example/my-first-askui-test-suite.test.ts',
+      }
+    );
+    await vm.applyFsDiff({
+      create: {
+        '.env': files['.env'],
+      },
+      destroy: [],
+    });
+  }
+  return (
+    <button type="button" {...other} onClick={handleClick} class="button button--secondary">Try in Browser!</button>
+  );
+}
diff --git a/docs/src/components/InstallationCards/index.tsx b/docs/src/components/InstallationCards/index.tsx
index f3d1ebdae..8561b7f72 100644
--- a/docs/src/components/InstallationCards/index.tsx
+++ b/docs/src/components/InstallationCards/index.tsx
@@ -14,6 +14,8 @@ import Link from '@docusaurus/Link';
 import Image from '@theme/IdealImage';
 import Heading from '@theme/Heading';
 
+import {AskUIEmbedded} from '@site/src/components/AskUIEmbedded';
+
 const Playgrounds = [
   {
     name: '📦 Quickstart',
@@ -137,6 +139,27 @@ function PlaygroundCard({name, url, description, cta, idbutton}: Props) {
 export function InstallationCardsRow(): JSX.Element {
   return (
     <div className="row">
+      <div class="col col--4 margin-bottom--lg">
+        <div class="card">
+          <div class="card__body">
+            <h3>📦 Stackblitz</h3>
+            <p>Try AskUI without any hassle in your browser!</p>
+          </div>
+          <div class="card__footer">
+            <div class="button-group button-group--block">
+              <AskUIEmbedded
+                projectId="vitejs-vite-khtc7d"
+                files={{
+                  ".env": 'ASKUI_WORKSPACE_ID=AWI\nASKUI_TOKEN=AT\nREMOTE_ASKUI_CONTROLLER_URL=RACU\nREMOTE_VNC=RVNV'
+                }}
+                >
+                Basic Example Open in StackBlitz
+              </AskUIEmbedded>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="embedStackBlitz">&nbsp;</div>
       {Playgrounds.map((playground) => (
         <PlaygroundCard key={playground.name} {...playground} />
       ))}