Skip to content

Commit 35678d6

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
updated all stackblitz embeds to use BitByBitRenderCanvas component for the iframe
1 parent 0bc24b8 commit 35678d6

9 files changed

Lines changed: 45 additions & 137 deletions

‎docs/learn/runners/intro-blockly.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,11 @@ The use of a simple OCCT cube geometry is intentional. The main goal here is to
3636

3737
You can either check out the live demo of this [StackBlitz project](https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-blockly) or use the code snippets below to recreate it on your own website.
3838

39-
<div className="stackblitz-embed-container">
40-
<iframe
41-
src="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-blockly?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
42-
style={{
43-
width: '100%',
44-
height: '700px',
45-
border: '0',
46-
borderRadius: '4px',
47-
overflow: 'hidden',
48-
}}
49-
title="Introduction to Bitbybit runner tutorial with Blockly"
50-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
51-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
52-
></iframe>
53-
</div>
39+
<BitByBitRenderCanvas
40+
requireManualStart={true}
41+
iframeUrl="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-blockly?embed=1&file=src%2Fmain.ts&theme=dark"
42+
title="StackBlitz - Bitbybit Runner With Blockly"
43+
/>
5444

5545
### Blockly Script (The Visual Program)
5646

‎docs/learn/runners/intro-rete.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,11 @@ We will guide you through:
3939

4040
You can either check this live demo of the completed [StackBlitz project](https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial) or use the code snippets below to recreate it on your own website.
4141

42-
<div className="stackblitz-embed-container">
43-
<iframe
44-
src="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
45-
style={{
46-
width: '100%',
47-
height: '700px',
48-
border: '0',
49-
borderRadius: '4px',
50-
overflow: 'hidden',
51-
}}
52-
title="Introduction to Bitbybit runner tutorial with Rete"
53-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
54-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
55-
></iframe>
56-
</div>
42+
<BitByBitRenderCanvas
43+
requireManualStart={true}
44+
iframeUrl="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial?embed=1&file=src%2Fmain.ts&theme=dark"
45+
title="StackBlitz - Bitbybit Runner With Rete"
46+
/>
5747

5848
### Rete Script (The Visual Program)
5949

‎docs/learn/runners/intro-typescript.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,11 @@ The focus is on a simple OCCT cube geometry. The primary goal is to illustrate h
3434

3535
You can either check live demo of the completed [StackBlitz project](https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-typescript) or use the code snippets below to recreate it on your own website.
3636

37-
<div className="stackblitz-embed-container">
38-
<iframe
39-
src="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-typescript?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
40-
style={{
41-
width: '100%',
42-
height: '700px',
43-
border: '0',
44-
borderRadius: '4px',
45-
overflow: 'hidden',
46-
}}
47-
title="Introduction to Bitbybit runner tutorial with TypeScript"
48-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
49-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
50-
></iframe>
51-
</div>
37+
<BitByBitRenderCanvas
38+
requireManualStart={true}
39+
iframeUrl="https://stackblitz.com/edit/introduction-to-bitbybit-runner-tutorial-with-typescript?embed=1&file=src%2Fmain.ts&theme=dark"
40+
title="StackBlitz - Bitbybit Runner With TypeScript"
41+
/>
5242

5343
### TypeScript Code (The Program)
5444

‎docs/learn/runners/intro.mdx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -149,22 +149,11 @@ A 3D model configurator for creating a customizable ThreeJS logo, ready for 3D p
149149
* [JSFiddle Example](https://jsfiddle.net/matas_bitbybitdev/qmyLhre3/5/)
150150
* **Source Code:** [GitHub Source](https://github.com/bitbybit-dev/app-examples/blob/main/runner/threejs/lite/threejs-logo/index.html)
151151

152-
153-
<div className="stackblitz-embed-container">
154-
<iframe
155-
src="https://stackblitz.com/edit/stackblitz-starters-fhck8j?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
156-
style={{
157-
width: '100%',
158-
height: '700px',
159-
border: '0',
160-
borderRadius: '4px',
161-
overflow: 'hidden',
162-
}}
163-
title="Introduction to Bitbybit runner starter"
164-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
165-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
166-
></iframe>
167-
</div>
152+
<BitByBitRenderCanvas
153+
requireManualStart={true}
154+
iframeUrl="https://stackblitz.com/edit/stackblitz-starters-fhck8j?embed=1&file=src%2Fmain.ts&theme=dark"
155+
title="StackBlitz - Bitbybit Runner Starter"
156+
/>
168157

169158
<Tabs groupId="html-js-example">
170159
<TabItem value="js" label="script.js">

‎docs/learn/runners/live-examples/configurable-cad-part.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,21 +55,11 @@ Before diving into the code, let's see the final result in action with a live St
5555
* **Input/Output Flow:** You can observe how changes made via HTML controls are passed to the Rete script, and how the script's output (the 3D meshes) is used to update the scene.
5656
* **Practical Use Case:** This example is a simplified version of what you might build for a product configurator or an interactive educational tool.
5757

58-
<div className="stackblitz-embed-container">
59-
<iframe
60-
src="https://stackblitz.com/edit/bitbybit-dev-runner-example-io-from-rete-editor?ctl=1&embed=1&file=script.js&theme=dark"
61-
style={{
62-
width: '100%',
63-
height: '700px',
64-
border: '0',
65-
borderRadius: '4px',
66-
overflow: 'hidden',
67-
}}
68-
title="Bitbybit Runner: Interactive Rete Script with Inputs/Outputs"
69-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
70-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
71-
></iframe>
72-
</div>
58+
<BitByBitRenderCanvas
59+
requireManualStart={true}
60+
iframeUrl="https://stackblitz.com/edit/bitbybit-dev-runner-example-io-from-rete-editor?embed=1&file=script.js&theme=dark"
61+
title="StackBlitz - Interactive Rete Script with IO"
62+
/>
7363

7464
## Setting up Your HTML Page with Controls
7565

‎docs/learn/runners/live-examples/static-3d-model-script.mdx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,11 @@ To see how all these pieces (HTML, Runner Library, and your exported script logi
5151

5252
By exploring the StackBlitz demo, you can gain confidence in how to take your visual programs from the Bitbybit editor and bring them to life anywhere on the web.
5353

54-
<div className="stackblitz-embed-container">
55-
<iframe
56-
src="https://stackblitz.com/edit/bitbybit-dev-runner-example-inline-string-embed-from-ret?ctl=1&embed=1&file=script.js&theme=dark"
57-
style={{
58-
width: '100%',
59-
height: '700px',
60-
border: '0',
61-
borderRadius: '4px',
62-
overflow: 'hidden',
63-
}}
64-
title="Running Exported Visual Scripts Inside Your Websites"
65-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
66-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
67-
></iframe>
68-
</div>
69-
54+
<BitByBitRenderCanvas
55+
requireManualStart={true}
56+
iframeUrl="https://stackblitz.com/edit/bitbybit-dev-runner-example-inline-string-embed-from-ret?embed=1&file=script.js&theme=dark"
57+
title="StackBlitz - Running Visual Scripts Inside Your Websites"
58+
/>
7059

7160
## Setting up Your HTML Page
7261

‎docs/learn/runners/table-configurator-blockly.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,11 @@ Matas Ubarevičius will demonstrate setting up the basic HTML, CSS, and JavaScri
3434

3535
You can either visit the live demo [StackBlitz project](https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-blockly) to see the final result live, or use the code snippets below to recreate it on your own website.
3636

37-
<div className="stackblitz-embed-container">
38-
<iframe
39-
src="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-blockly?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
40-
style={{
41-
width: '100%',
42-
height: '700px',
43-
border: '0',
44-
borderRadius: '4px',
45-
overflow: 'hidden',
46-
}}
47-
title="3D Table Configurator Tutorial with Blockly and Bitbybit Runner"
48-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
49-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
50-
></iframe>
51-
</div>
37+
<BitByBitRenderCanvas
38+
requireManualStart={true}
39+
iframeUrl="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-blockly?embed=1&file=src%2Fmain.ts&theme=dark"
40+
title="StackBlitz - 3D Table Configurator Blockly"
41+
/>
5242

5343
### Blockly Script (The Visual Program)
5444

‎docs/learn/runners/table-configurator-rete.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,11 @@ Matas Ubarevičius will demonstrate setting up the basic HTML, CSS, and JavaScri
3434

3535
You can either check the demo [StackBlitz project](https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-rete) or use the code snippets below to recreate it on your own website.
3636

37-
<div className="stackblitz-embed-container">
38-
<iframe
39-
src="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-rete?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
40-
style={{
41-
width: '100%',
42-
height: '700px',
43-
border: '0',
44-
borderRadius: '4px',
45-
overflow: 'hidden',
46-
}}
47-
title="3D Table Configurator Tutorial with Rete and Bitbybit Runner"
48-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
49-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
50-
></iframe>
51-
</div>
37+
<BitByBitRenderCanvas
38+
requireManualStart={true}
39+
iframeUrl="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-rete?embed=1&file=src%2Fmain.ts&theme=dark"
40+
title="StackBlitz - 3D Table Configurator Rete"
41+
/>
5242

5343
### Rete Script (The Visual Program)
5444

‎docs/learn/runners/table-configurator-typescript.mdx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,11 @@ This free lecture is designed for a wide audience, from beginners looking to div
3939

4040
You can either check the live demo of [StackBlitz project](https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-ts) or use the code snippets below to recreate it on your own website.
4141

42-
<div className="stackblitz-embed-container">
43-
<iframe
44-
src="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-rete?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark"
45-
style={{
46-
width: '100%',
47-
height: '700px',
48-
border: '0',
49-
borderRadius: '4px',
50-
overflow: 'hidden',
51-
}}
52-
title="3D Table Configurator Tutorial with TypeScript and Bitbybit Runner"
53-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
54-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
55-
></iframe>
56-
</div>
42+
<BitByBitRenderCanvas
43+
requireManualStart={true}
44+
iframeUrl="https://stackblitz.com/edit/bitbybit-runner-building-3d-table-configurator-rete?embed=1&file=src%2Fmain.ts&theme=dark"
45+
title="StackBlitz - 3D Table Configurator TypeScript"
46+
/>
5747

5848
### TypeScript Code (The Program)
5949

0 commit comments

Comments
 (0)