refactor: replace iframe with livecodes sdk

Author: iamAmer

docs/docs/tutorials/building-your-first-app.mdx

@@ -2,45 +2,21 @@
 title: Building Your First App
 ---
 
-# Building Your First App
-
-Learn how to build a simple color generator app using LiveCodes. This app will let users click a button to generate random background colors.
-
-Try the completed project below, or [open it in a new tab](https://livecodes.io/?x=id/v9dmx2p9z8w).
+import CodeBlock from '@theme/CodeBlock';
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
-<iframe src="https://livecodes.io/?x=id/v9dmx2p9z8w" width="100%" height="400px"></iframe>
-
-## What We'll Build
-
-A fun color generator with:
-- Random color generation
-- Display the color code
-- Simple, clean interface
-
-## Project Setup
-
-1. Open [LiveCodes](https://livecodes.io)
-2. We'll use HTML, CSS, and JavaScript
-
-## Implementation
-
-### HTML Structure
-
-```html
-<div class="container">
+export const colorGeneratorParams = {
+  html: `<div class="container">
   <h1>Color Generator</h1>
   <div class="color-display" id="colorDisplay">
     <span id="colorCode">#3498db</span>
   </div>
   <button id="generateBtn">Generate Color</button>
   <p class="hint">Click the button to generate a random color!</p>
 </div>
-```
-
-### Styling
-
-```css
-body {
+`,
+  css: `body {
   margin: 0;
   font-family: Arial, sans-serif;
   display: flex;
@@ -102,12 +78,8 @@ h1 {
   color: #666;
   font-size: 0.9rem;
 }
-```
-
-### JavaScript Logic
-
-```javascript
-const colorDisplay = document.getElementById('colorDisplay');
+`,
+  js: `const colorDisplay = document.getElementById('colorDisplay');
 const colorCode = document.getElementById('colorCode');
 const generateBtn = document.getElementById('generateBtn');
 
@@ -130,7 +102,42 @@ generateBtn.addEventListener('click', updateColor);
 
 // Generate a color on page load
 updateColor();
-```
+`,
+};
+
+# Building Your First App
+
+Learn how to build a simple color generator app using LiveCodes. This app will let users click a button to generate random background colors.
+
+Try the completed project below, or <RunInLiveCodes linkText="open it in a new tab" params={colorGeneratorParams}></RunInLiveCodes>.
+
+<LiveCodes params={colorGeneratorParams}></LiveCodes>
+
+## What We'll Build
+
+A fun color generator with:
+- Random color generation
+- Display the color code
+- Simple, clean interface
+
+## Project Setup
+
+1. Open [LiveCodes](https://livecodes.io)
+2. We'll use HTML, CSS, and JavaScript
+
+## Implementation
+
+### HTML Structure
+
+<CodeBlock language="html">{colorGeneratorParams.html}</CodeBlock>
+
+### Styling
+
+<CodeBlock language="css">{colorGeneratorParams.css}</CodeBlock>
+
+### JavaScript Logic
+
+<CodeBlock language="js">{colorGeneratorParams.js}</CodeBlock>
 
 ## How It Works
 
@@ -163,13 +170,15 @@ You've just built your color generator app with LiveCodes!
 
 Compare your version with the completed project above. Did you add any personal touches?
 
-**[View the completed project](https://livecodes.io/?x=id/v9dmx2p9z8w)**
+<RunInLiveCodes linkText="View the completed project" params={colorGeneratorParams}></RunInLiveCodes>
 
 ## Next Steps
 
 - [External Resources](/docs/features/external-resources) - Add libraries like color manipulation tools
+- [Getting Started Guide](getting-started) - Review the basics
 
 ## Complete Code Summary
 
 **Concepts Covered**: DOM manipulation, events, random generation, CSS transitions
+
 **Time to Build**: 10-15 minutes

docs/docs/tutorials/getting-started-guide.mdx

@@ -2,44 +2,18 @@
 title: Getting Started Guide
 ---
 
-# Getting Started Guide
-
-This guide will walk you through creating your first project in LiveCodes.
-
-Try the completed project below, or [open it in a new tab](https://livecodes.io/?x=id/q6k8itvp2dv).
-
-<iframe src="https://livecodes.io/?x=id/q6k8itvp2dv" width="100%" height="400px"></iframe>
-
-## Prerequisites
-
-- A web browser (Chrome, Firefox, Safari, or Edge)
-- Basic knowledge of HTML, CSS, and JavaScript
-
-## Step 1: Open LiveCodes
-
-1. Navigate to [livecodes.io](https://livecodes.io)
-2. You'll see the editor interface with three panels:
-   - **HTML**
-   - **CSS**
-   - **JavaScript**
-   - **Result**
-
-## Step 2: Create a Simple Page
-
-Let's create a simple interactive greeting card.
+import CodeBlock from '@theme/CodeBlock';
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
-### HTML Panel
-```html
-<div class="container">
+export const gettingStartedParams = {
+  html: `<div class="container">
   <h1 id="greeting">Hello, World!</h1>
   <input type="text" id="nameInput" placeholder="Enter your name">
   <button id="greetBtn">Greet Me!</button>
 </div>
-```
-
-### CSS Panel
-```css
-.container {
+`,
+  css: `.container {
   max-width: 600px;
   margin: 50px auto;
   text-align: center;
@@ -72,23 +46,58 @@ button {
 button:hover {
   background-color: #0056b3;
 }
-```
-
-### JavaScript Panel
-```javascript
-const greeting = document.getElementById('greeting');
+`,
+  js: `const greeting = document.getElementById('greeting');
 const nameInput = document.getElementById('nameInput');
 const greetBtn = document.getElementById('greetBtn');
 
 greetBtn.addEventListener('click', () => {
   const name = nameInput.value.trim();
   if (name) {
-    greeting.textContent = `Hello, ${name}!`;
+    greeting.textContent = \`Hello, \${name}!\`;
   } else {
     greeting.textContent = 'Hello, World!';
   }
 });
-```
+`,
+};
+
+# Getting Started Guide
+
+This guide will walk you through creating your first project in LiveCodes.
+
+Try the completed project below, or <RunInLiveCodes linkText="open it in a new tab" params={gettingStartedParams}></RunInLiveCodes>.
+
+<LiveCodes params={gettingStartedParams}></LiveCodes>
+
+## Prerequisites
+
+- A web browser (Chrome, Firefox, Safari, or Edge)
+- Basic knowledge of HTML, CSS, and JavaScript
+
+## Step 1: Open LiveCodes
+
+1. Navigate to [livecodes.io](https://livecodes.io)
+2. You'll see the editor interface with three panels:
+   - **HTML**
+   - **CSS**
+   - **JavaScript**
+
+## Step 2: Create a Simple Page
+
+Let's create a simple interactive greeting card.
+
+### HTML Panel
+
+<CodeBlock language="html">{gettingStartedParams.html}</CodeBlock>
+
+### CSS Panel
+
+<CodeBlock language="css">{gettingStartedParams.css}</CodeBlock>
+
+### JavaScript Panel
+
+<CodeBlock language="js">{gettingStartedParams.js}</CodeBlock>
 
 ## Step 3: See Your Results
 
@@ -99,18 +108,18 @@ The result panel automatically updates as you type. Try:
 
 ## Step 4: Save Your Project
 
-1. Click on the "Project" menu button in the toolbar.
-2. Click Save to save the project (on this device).
-3. You can open it later from "Project menu > Open".
-4. Use "Project menu > Share" to get a permanent URL to your project that you can share.
+1. Click on the "**Project**" menu button in the toolbar
+2. Click "**Save**" to save the project (on this device)
+3. You can open it later from "**Project menu > Open**"
+4. Use "**Project menu > Share**" to get a permanent URL to your project that you can share
 
 ## Congratulations!
 
 You've just built your first interactive app with LiveCodes!
 
 Compare your version with the completed project above. Did you add any personal touches?
 
-**[View the completed project](https://livecodes.io/?x=id/q6k8itvp2dv)**
+<RunInLiveCodes linkText="View the completed project" params={gettingStartedParams}></RunInLiveCodes>
 
 ## Next Steps