update to docs and examples

README.md

@@ -1,6 +1,6 @@
 # Bitbybit Monorepo
 
-This git repo contains multiple bitbybit packages and contains code for core 3D algorithms of Bitbybit platform which are open-sourced under MIT license.
+This git repo contains multiple bitbybit packages and code for core 3D algorithms of Bitbybit platform which are open-sourced under MIT license.
 
 # [FULL PLATFORM AT BITBYBIT.DEV](https://bitbybit.dev)   
 # [LEARN BITBYBIT](https://learn.bitbybit.dev)   

docs/blog/2024-04-23-introducing-bitbybit-runner.md

@@ -60,7 +60,7 @@ We've developed and launched three different types of examples to demonstrate a
 When you only need to run a script created in Bitbybit.dev without much external interaction, this is a good starting point. There are several ways to load the exported script file into your website, but perhaps the simplest is to just copy and paste its content and assign it to a variable or return it from a function.
 
 We've provided this example on three popular external coding sites:
-*   [StackBlitz Example](https://stackblitz.com/edit/stackblitz-starters-f6d3a2?file=script.js)
+*   [StackBlitz Example](https://stackblitz.com/edit/bitbybit-dev-runner-example-inline-string-embed-from-ret?file=script.js)
 *   [JSFiddle Example](https://jsfiddle.net/matas_bitbybitdev/sa5jroqn/11/)
 *   [CodePen Example](https://codepen.io/matas-bitbybit-dev/pen/XWQoxmX)
 
@@ -98,7 +98,7 @@ While this example is basic, it includes all the essential elements of a 3D conf
 *   Demonstration of how you can provide inputs to your exported Rete script and read outputs from it.
 
 Check out the examples:
-*   [StackBlitz Example](https://stackblitz.com/edit/stackblitz-starters-ohhh1g?file=script.js)
+*   [StackBlitz Example](https://stackblitz.com/edit/bitbybit-dev-runner-example-io-from-rete-editor?file=index.html,script.js)
 *   [JSFiddle Example](https://jsfiddle.net/matas_bitbybitdev/z1pku4gj/3/)
 *   [CodePen Example](https://codepen.io/matas-bitbybit-dev/pen/KKYbJdj)
 

docs/docusaurus.config.ts

@@ -30,7 +30,23 @@ const config: Config = {
         defaultLocale: "en",
         locales: ["en"],
     },
-
+    plugins: [
+        [
+            "@docusaurus/plugin-client-redirects",
+            {
+                redirects: [
+                    {
+                        from: "/learn/npm-packages/start-with-three-js",
+                        to: "/learn/npm-packages/threejs/start-with-three-js",
+                    },
+                    {
+                        from: "/learn/npm-packages/start-with-babylon-js",
+                        to: "/learn/npm-packages/babylonjs/start-with-babylon-js",
+                    },
+                ],
+            }
+        ],
+    ],
     presets: [
         [
             "classic",
@@ -65,7 +81,7 @@ const config: Config = {
     ],
     themeConfig: {
         // Replace with your project's social card
-        image: "img/docusaurus-social-card.jpg",
+        image: "img/learn-bitbybit-social-card.jpeg",
         colorMode: {
             defaultMode: "dark",
             disableSwitch: false,

docs/learn/3d-bits/faq.md

@@ -0,0 +1,143 @@
+---
+sidebar_position: 2
+title: "3D Bits Shopify App - FAQ"
+sidebar_label: "3D Bits FAQ"
+description: "Frequently asked questions about using the 3D Bits app to integrate 3D models and product configurators into your Shopify store."
+tags: [shopify, 3d-bits]
+---
+
+import Admonition from '@theme/Admonition';
+
+# 3D Bits Shopify App: Frequently Asked Questions
+
+As 3D Bits makes its way into Shopify stores, we’ve started getting some recurring questions from merchants. So, here’s a quick FAQ with some honest answers to help you understand what 3D Bits can do for your store.
+
+<Admonition type="info" title="Don't see your question answered?">
+  <p>If you have other questions or just need some initial guidance, please contact us, we're here to help you out!</p>
+  <a href="mailto:info@bitbybit.dev">info@bitbybit.dev</a>
+</Admonition>
+
+---
+
+### Can I use 3D Bits if I have zero coding skills?
+
+**Yes, absolutely!** If you can click buttons and copy-paste, you’re good to go for basic 3D model display.
+
+**Here's the simple process:**
+1.  Install 3D Bits app, subscribe for a trial and pin it.
+2.  Go to Metafields sections within the app admin page and hit create button.
+3.  Upload your 3D models to Shopify via **Content > Files**.
+4.  Copy the link to your uploaded 3D model.
+5.  Paste this link into one of our designated 3D Bits metafields associated with your product.
+6.  Voilà! Your 3D model should now appear on your product page.
+
+Feeling a bit more adventurous but still don't want to code? You can try our **BITBYBIT VIEWER** editor block within the Shopify Theme Editor. It allows for arranging slightly fancier scenes with multiple models or different camera angles, still without writing any code – just courage required!
+
+<Admonition type="note" title="Quick Start Guide">
+  For a detailed walkthrough, check out our guide: <a href="/learn/3d-bits/theme-app-extensions/bitbybit-viewer" target="_blank" rel="noopener noreferrer">3D Bits Setup Guide</a>.
+</Admonition>
+
+---
+
+### Can I build a product configurator without writing code?
+
+**To a certain extent, yes.**
+
+The **BITBYBIT VIEWER** block (used within the Viewer Editor) lets you match static 3D models with your existing Shopify product variants. This is great for handling common scenarios like:
+*   Showing a different 3D model for each color option (e.g., a blue chair model when "Blue" is selected).
+*   Displaying different models for size variations.
+
+<Admonition type="info" title="Our Design Philosophy">
+  As technical founders, our initial inclination was to build in complex parametric logic for everything. However, we quickly realized that many merchants simply want to achieve straightforward visual changes based on standard Shopify variants – like showing the blue chair when "Blue" is selected. And that's perfectly fine and often all that's needed! 3D Bits handles this simple variant swapping effectively.
+</Admonition>
+
+- Have GLTF files ready? Check this tutorial: [No-Code GLTF Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/viewer-no-code-gltf-configurators)
+- Want to use 3D scans (Gaussian splatting)? [No-Code Gaussian Splat Configurators with BITBYBIT VIEWER Editor on Shopify](/learn/3d-bits/tutorials/viewer-no-code-3d-scan-configurators)
+
+For more complex configurators (e.g., where parts change dynamically beyond pre-set variants, or intricate rules are needed), you'd likely need to explore options involving some level of scripting, as discussed in later questions.
+
+---
+
+### I already use [bitbybit.dev](https://bitbybit.dev) for my projects – can I connect those to Shopify?
+
+**Yes, you can!**
+
+*   **For Simple Previews:** Use the **BITBYBIT PREVIEW** extension block in the Shopify Theme Editor. Make your project public on `bitbybit.dev`, and paste the project link into the block. That’s it! This is great for showcasing existing non-interactive or pre-animated scenes.
+*   **For More Interactivity:** If you want your `bitbybit.dev` script to react to Shopify variants or other page elements, you'll need to integrate your scripts using the **BITBYBIT RUNNER** theme extension block. This involves exporting your script from `bitbybit.dev` (as a JavaScript snippet) and then setting up the Runner block to execute it. This approach is more complex but offers much greater control.
+
+<Admonition type="note" title="Integration Guide">
+  Learn more about connecting your projects: <a href="/learn/3d-bits/theme-app-extensions/bitbybit-preview" target="_blank" rel="noopener noreferrer">Connecting bitbybit.dev Projects to Shopify</a>.
+</Admonition>
+
+---
+
+### We’re developers building stores for merchants. Should we bother with 3D Bits?
+
+**Definitely.**
+
+While you *can* build everything from scratch (integrating a WebGL viewer, handling model loading, Shopify integration, etc.), ask yourself: do you really want to keep reinventing that wheel for each new theme or client?
+
+
+3D Bits handles the essential groundwork:
+*   Easy 3D model embedding.
+*   Shopify metafield integration for 3D assets.
+*   Basic variant-to-model mapping.
+*   A bridge (the Runner block) for your custom JavaScript/TypeScript logic to interact with the 3D scene.
+
+This frees you up to focus on the unique business logic, creative 3D experiences, and advanced interactivity your clients need, rather than spending time wrangling 3D viewers into every theme variation. We’ve been there – it wasn't fun! 🥹
+
+<Admonition type="note" title="Note on rendering engines">
+    We currently use BabylonJS in 3D Bits app. All of the videos and viewer editor is based on it.
+</Admonition>
+
+---
+
+### Can I use 3D Bits for complex pricing (e.g., a slider value changes the product price)?
+
+**Not directly for the pricing calculation itself.**
+
+3D Bits is focused on handling the **3D visualization**. It can:
+*   Read a value from a slider (or any other UI element on your page).
+*   Update the 3D model based on that value (e.g., change dimensions, swap parts).
+
+However, **3D Bits does not calculate or update the product price in Shopify.** Pricing logic, especially for complex, dynamically calculated prices, needs to be handled by:
+*   Shopify's built-in variant pricing.
+*   A dedicated third-party Shopify pricing app.
+*   Custom backend development with secure validation.
+
+Shopify offers three variant types with many options out of the box, which covers most standard pricing scenarios. For anything fancier, you’ll need to combine 3D Bits for the visuals with other tools or custom solutions for the pricing logic.
+
+---
+
+### My product has a ton of configurable parts and complex logic. Can I build a fully custom configurator with 3D Bits?
+
+**Yes, if you or your team can write JavaScript or TypeScript.**
+
+This is where the **BITBYBIT RUNNER** theme extension block truly shines. It acts as a bridge:
+1.  You develop your complex configuration logic, part-swapping rules, and geometric manipulations as a script (e.g., using Rete, Blockly, or TypeScript on `bitbybit.dev` and then exporting it, or writing it directly for the runner).
+2.  The Runner block executes this script within your Shopify theme.
+3.  Your script can then interact with the 3D scene, listen to Shopify variant changes (or other custom UI elements you add to the page), and update the 3D model accordingly.
+
+3D Bits provides the 3D rendering pipeline and the connection to Shopify. You'll need to bring your own:
+*   Custom configuration logic (as a script).
+*   Pricing strategy (likely handled by Shopify or another app).
+*   Custom UI elements (if Shopify's default variant selectors aren't sufficient).
+
+<Admonition type="note" title="Advanced Configuration Guide">
+  Dive deeper into building custom configurators: <a href="/learn/3d-bits/theme-app-extensions/bitbybit-runner" target="_blank" rel="noopener noreferrer">Using the Bitbybit Runner for Custom Logic</a>.
+</Admonition>
+
+---
+
+### Does 3D Bits offer fancy UI controls for product pages (like custom sliders, color swatches, etc.)?
+
+**Nope. 3D Bits is not here to reinvent the dropdown or the color swatch.**
+
+There are many excellent Shopify apps and theme development techniques dedicated to creating sophisticated UI controls for product options.
+
+3D Bits focuses on the 3D visualization. It's designed to **listen** to what options are already selected on your product page (whether through standard Shopify variants or custom UI controls you've implemented) and then **update the 3D scene accordingly**:
+*   Show the correct 3D model or parts.
+*   Hide what shouldn’t be visible.
+*   Update 3D model dimensions or features based on selected options.
+
+**Think of 3D Bits as the 3D backbone of your product visualization – not the entire user interface nervous system. 💪** It plays well with others, allowing you to choose the best UI tools for your store while it handles the 3D heavy lifting.

docs/learn/3d-bits/theme-app-extensions/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Theme App Extensions",
-  "position": 1
+  "position": 3
 }

docs/learn/3d-bits/tutorials/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Tutorials",
-  "position": 2
+  "position": 4
 }

docs/learn/intro.md

@@ -10,10 +10,36 @@ import Admonition from '@theme/Admonition';
 
 # Welcome! 🎉
 
-We're thrilled you're interested in using our platform! These "Start" pages are designed to help you quickly get up to speed and begin creating amazing 3D experiences.
+We're thrilled you're interested in using our platform! This site is designed to help you quickly get up to speed and begin creating amazing 3D experiences.
+
+In this essential introduction to Bitbybit video Matas Ubarevičius explains the fundamental ideas of the platform - if you haven't watched it yet - it's highly recommended.
+<div class="responsive-video-container">
+  <iframe 
+    width="560" 
+    height="315" 
+    src="https://www.youtube.com/embed/noc6Rg6tMe0" 
+    title="Essential Introduction To BITBYBIT That Explains You The Most Important Aspects Of The 3D Platform" 
+    frameborder="0" 
+    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen>
+  </iframe>
+</div>
 
 Let's find the best starting point for you:
 
+### Are you a programmer?
+
+If you're a professional programmer, you can jump right into our [**TypeScript Monaco editor**](https://bitbybit.dev/app?editor=typescript). Find the [**API Docs here**](https://docs.bitbybit.dev).
+
+To get started:
+
+*   We offer [**NPM packages**](/learn/npm-packages/intro) that you can incorporate into your own websites.
+    *   *Note: These packages do not include our proprietary advanced algorithms or the models available in the 3D Models section.*
+*   Check out how to set up our algorithms with [**Three.JS**](/learn/npm-packages/threejs/intro) or [**Babylon.JS**](/learn/npm-packages/babylonjs/intro). We include some complete powerful demos with explanations.
+*   Also consider our course: [**Introduction To Programming 3D In TypeScript**](https://bitbybit.dev/school/courses/introduction-to-programming-3d-in-typescript).
+*   Or, if you're familiar with BabylonJS: [**Bitbybit For BabylonJS Developers**](https://bitbybit.dev/school/courses/bitbybit-for-babylonjs-developers).
+    These courses explore how our algorithms can create 3D CAD applications.
+
 ### Are you looking for ready-made 3D models?
 
 Many of our standalone 3D model configurators require a subscription to our paid plans: Silver or Gold.
@@ -65,15 +91,3 @@ This platform is a great place to teach 3D computational design, mathematics, ge
 </Admonition>
 
 If you're familiar with our tools and interested in becoming a teacher in our School to share your knowledge, please reach out to us at [info@bitbybit.dev](mailto:info@bitbybit.dev).
-
-### Are you a programmer?
-
-If you're a professional programmer, you can jump right into our **TypeScript Monaco editor**.
-
-To get started:
-
-*   Consider our course: [**Introduction To Programming 3D In TypeScript**](https://bitbybit.dev/school/courses/introduction-to-programming-3d-in-typescript).
-*   Or, if you're familiar with BabylonJS: [**Bitbybit For BabylonJS Developers**](https://bitbybit.dev/school/courses/bitbybit-for-babylonjs-developers).
-    These courses explore how our algorithms can create 3D CAD applications.
-*   We also offer [**NPM packages**](/learn/npm-packages/intro) that you can incorporate into your own websites.
-    *   *Note: These packages do not include our proprietary advanced algorithms or the models available in the 3D Models section.*

docs/learn/npm-packages/babylonjs/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "BabylonJS",
+  "position": 3
+}