update to docs (use learn instead of start)

Author: matas-bitbybit-dev

docs/docusaurus.config.ts

@@ -5,8 +5,8 @@ import type * as Preset from "@docusaurus/preset-classic";
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-    title: "Learn Bitbybit",
-    tagline: "Understand How To Use The Platform",
+    title: "Bitbybit",
+    tagline: "Learn How To Use The Platform",
     favicon: "img/logo-gold-small.png",
 
     // Set the production url of your site here
@@ -36,11 +36,9 @@ const config: Config = {
             "classic",
             {
                 docs: {
-                    path: "start",
-                    routeBasePath: "start",
+                    path: "learn",
+                    routeBasePath: "learn",
                     sidebarPath: "./sidebars.ts",
-                    // Please change this to your repo.
-                    // Remove this to remove the "edit this page" links.
                     editUrl:
                         "https://github.com/bitbybit-dev/bitbybit/docs",
                 },
@@ -69,8 +67,13 @@ const config: Config = {
     themeConfig: {
         // Replace with your project's social card
         image: "img/docusaurus-social-card.jpg",
+        colorMode: {
+            defaultMode: "dark",
+            disableSwitch: false,
+            respectPrefersColorScheme: false,
+        },
         navbar: {
-            title: "Learn",
+            title: "Bitbybit",
             logo: {
                 alt: "Bitbybit Logo",
                 src: "img/logo-gold-small.png",
@@ -80,8 +83,11 @@ const config: Config = {
                     type: "docSidebar",
                     sidebarId: "tutorialSidebar",
                     position: "left",
-                    label: "Start",
+                    label: "Learn",
                 },
+                { to: "/learn/code/intro", label: "Code", position: "left" },
+                { to: "/3d-bits", label: "3D Bits", position: "left" },
+
                 { to: "/blog", label: "Blog", position: "left" },
                 {
                     href: "https://bitbybit.dev/auth/pick-plan",
@@ -100,11 +106,15 @@ const config: Config = {
         footer: {
             links: [
                 {
-                    title: "Start",
+                    title: "Main",
                     items: [
                         {
-                            label: "Start",
-                            to: "/start/intro",
+                            label: "Learn",
+                            to: "/learn/intro",
+                        }, 
+                        {
+                            label: "Code",
+                            to: "/learn/code/intro",
                         },
                     ],
                 },

docs/start/about.md docs/learn/about.mddocs/start/about.md renamed to docs/learn/about.md

@@ -0,0 +1,7 @@
+{
+  "label": "Code",
+  "position": 4,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/learn/code/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Common",
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/learn/code/common/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Draw",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/learn/code/common/draw/_category_.json

@@ -0,0 +1,61 @@
+---
+sidebar_position: 2
+title: Utilizing Draw Components and Functions
+sidebar_label: Using Draw Components
+description: Learn how to use draw components and functions within Bitbybit's Rete, Blockly, and TypeScript environments to render and customize 3D geometry.
+tags: [code, draw, rete, blockly, typescript]
+---
+
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# Rendering 3D Objects in Bitbybit Editors
+
+<img 
+  src="https://s.bitbybit.dev/assets/icons/white/draw-icon.svg" 
+  alt="Draw category icon with a paintbrush" 
+  title="Draw category icon"
+  width="100" /> 
+
+This guide demonstrates how to use the core "Draw" functionalities across Bitbybit's different editor environments: Rete, Blockly, and TypeScript. The objective is to render a 3D object—specifically, a cube with rounded edges—and customize its appearance.
+
+### Rete Implementation
+
+We begin with the Rete editor. The following script constructs a cube, applies a fillet to its edges to round them, and then renders the resulting shape. Notice the customization: the cube's default face color is changed to blue, its edges are rendered in orange, and its vertices are also drawn as distinct points.
+
+The primary component for custom drawing is typically found under the path:
+`draw` > `draw async` > `draw any async`
+
+**Rete Example: Filleted Cube with Custom Drawing Options**
+<BitByBitRenderCanvas
+  requireManualStart={true}
+  script={{"script":"{\"id\":\"rete-v2-json\",\"nodes\":{\"b1bf89dae109c64b\":{\"id\":\"b1bf89dae109c64b\",\"name\":\"bitbybit.occt.shapes.solid.createCube\",\"customName\":\"cube\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"size\":5,\"center\":[0,0,0],\"originOnCenter\":true},\"inputs\":{},\"position\":[376.49611866408657,295.8380861953228]},\"511f71201db977e8\":{\"id\":\"511f71201db977e8\",\"name\":\"bitbybit.occt.fillets.filletEdges\",\"customName\":\"fillet edges\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":true,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"radius\":1},\"inputs\":{\"shape\":{\"connections\":[{\"node\":\"b1bf89dae109c64b\",\"output\":\"result\",\"data\":{}}]}},\"position\":[751.1640625,293.23828125]},\"d1567030a8ca9ba2\":{\"id\":\"d1567030a8ca9ba2\",\"name\":\"bitbybit.draw.drawAnyAsync\",\"customName\":\"draw any async\",\"async\":true,\"drawable\":true,\"data\":{\"genericNodeData\":{\"hide\":false,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false}},\"inputs\":{\"entity\":{\"connections\":[{\"node\":\"511f71201db977e8\",\"output\":\"result\",\"data\":{}}]},\"options\":{\"connections\":[{\"node\":\"8136f5dbe1a1aa7f\",\"output\":\"result\",\"data\":{}}]}},\"position\":[1202.458352666743,483.28792369009324]},\"8136f5dbe1a1aa7f\":{\"id\":\"8136f5dbe1a1aa7f\",\"name\":\"bitbybit.draw.optionsOcctShape\",\"customName\":\"options occt shape\",\"async\":false,\"drawable\":false,\"data\":{\"genericNodeData\":{\"hide\":false,\"oneOnOne\":false,\"flatten\":0,\"forceExecution\":false},\"faceOpacity\":1,\"edgeOpacity\":1,\"edgeColour\":\"#ffbb00\",\"faceColour\":\"#0008ff\",\"vertexColour\":\"#ff00ff\",\"edgeWidth\":2,\"vertexSize\":0.3,\"drawEdges\":true,\"drawFaces\":true,\"drawVertices\":true,\"precision\":0.01,\"drawEdgeIndexes\":false,\"edgeIndexHeight\":0.1,\"edgeIndexColour\":\"#ff00ff\",\"drawFaceIndexes\":false,\"faceIndexHeight\":0.06,\"faceIndexColour\":\"#0000ff\"},\"inputs\":{},\"position\":[748.3541705405835,689.9545863118427]}}}","version":"0.20.3","type":"rete"}}
+  title="Rete Drawing Example"
+  description="Draws simple filletted cube geometry."
+/>
+
+### Blockly
+
+### Blockly Implementation
+
+The same geometric operations and drawing customizations can be achieved using the Blockly editor. The example below replicates the filleted cube, applying similar visual styles. Note that in this Blockly example, blocks are nested directly without the use of intermediate variables for simplicity.
+
+The primary block for custom drawing is typically found under:
+`draw` > `draw async` > `draw any async no return`
+
+<BitByBitRenderCanvas
+  requireManualStart={true}
+  script={{"script":"<xml xmlns=\"https://developers.google.com/blockly/xml\"><block type=\"bitbybit.draw.drawAnyAsyncNoReturn\" id=\")!Y^k-S7bFI-:mJRQU#F\" x=\"-149\" y=\"-100\"><value name=\"Entity\"><block type=\"bitbybit.occt.fillets.filletEdges\" id=\"n+$8hWF3ff|j^Xve}{O6\"><value name=\"Shape\"><block type=\"bitbybit.occt.shapes.solid.createCube\" id=\"t0|A|Y[vnb%oBPy$C$Z*\"><value name=\"Size\"><block type=\"math_number\" id=\"YCDl|N-|.4?(.GhV+VTX\"><field name=\"NUM\">5</field></block></value><value name=\"Center\"><block type=\"bitbybit.point.pointXYZ\" id=\"aJ?9ro.i{m$4k}j|N@mT\"><value name=\"X\"><block type=\"math_number\" id=\"=/V{o8E^skD1_4lms;N/\"><field name=\"NUM\">0</field></block></value><value name=\"Y\"><block type=\"math_number\" id=\"t.yBPk5{bgN}H0x1#)LG\"><field name=\"NUM\">0</field></block></value><value name=\"Z\"><block type=\"math_number\" id=\"R$=fsU[0y*e3GacQHBox\"><field name=\"NUM\">0</field></block></value></block></value><value name=\"OriginOnCenter\"><block type=\"logic_boolean\" id=\"VQK}aL5ljTERjo7HGgVj\"><field name=\"BOOL\">TRUE</field></block></value></block></value><value name=\"Radius\"><block type=\"math_number\" id=\"I+g6zozkKfG]-1jLf0*-\"><field name=\"NUM\">1</field></block></value></block></value><value name=\"Options\"><block type=\"bitbybit.draw.optionsOcctShape\" id=\"@;`i=v%GFgxk.i=MA?)M\"><value name=\"FaceOpacity\"><block type=\"math_number\" id=\"2kC_vXp1*jC{-aQ]q%py\"><field name=\"NUM\">1</field></block></value><value name=\"EdgeOpacity\"><block type=\"math_number\" id=\"IGqXw_bw_}ZV#@^)?fF6\"><field name=\"NUM\">1</field></block></value><value name=\"EdgeColour\"><block type=\"colour_picker\" id=\"wvy|/BQE9GS1Mtv]hTz;\"><field name=\"COLOUR\">#ff6600</field></block></value><value name=\"FaceColour\"><block type=\"colour_picker\" id=\":2@]_{@#C1RbA2j_e^]{\"><field name=\"COLOUR\">#000099</field></block></value><value name=\"VertexColour\"><block type=\"colour_picker\" id=\"}B+Nm45X*vwTeyXF[n1b\"><field name=\"COLOUR\">#cc33cc</field></block></value><value name=\"EdgeWidth\"><block type=\"math_number\" id=\"`4{6FfYFX}`|Wcdc!deC\"><field name=\"NUM\">2</field></block></value><value name=\"VertexSize\"><block type=\"math_number\" id=\"m3=w1T_;AK^W5@UJTPbz\"><field name=\"NUM\">0.3</field></block></value><value name=\"DrawEdges\"><block type=\"logic_boolean\" id=\"fP-8~bf/_TLI`G+gx_?c\"><field name=\"BOOL\">TRUE</field></block></value><value name=\"DrawFaces\"><block type=\"logic_boolean\" id=\"UiQFnq?qj50OPp;v%H%*\"><field name=\"BOOL\">TRUE</field></block></value><value name=\"DrawVertices\"><block type=\"logic_boolean\" id=\"[MP`pvB2-B#B.kMi+3bk\"><field name=\"BOOL\">TRUE</field></block></value><value name=\"Precision\"><block type=\"math_number\" id=\"~.JdF}{W$o;$_n/UJ%IV\"><field name=\"NUM\">0.01</field></block></value><value name=\"DrawEdgeIndexes\"><block type=\"logic_boolean\" id=\"_Z6-!qrE@a24R#(hcq*D\"><field name=\"BOOL\">FALSE</field></block></value><value name=\"EdgeIndexHeight\"><block type=\"math_number\" id=\"l(/z|-OXhLfKssJNlj(v\"><field name=\"NUM\">0.06</field></block></value><value name=\"EdgeIndexColour\"><block type=\"colour_picker\" id=\"Yl:=G]eN4w:,:I0=8=z6\"><field name=\"COLOUR\">#ff00ff</field></block></value><value name=\"DrawFaceIndexes\"><block type=\"logic_boolean\" id=\"Un/.QLjQH+)OOS#64#{o\"><field name=\"BOOL\">FALSE</field></block></value><value name=\"FaceIndexHeight\"><block type=\"math_number\" id=\"j0+*3$/5zFYqv8ga1,L1\"><field name=\"NUM\">0.06</field></block></value><value name=\"FaceIndexColour\"><block type=\"colour_picker\" id=\"[L`XO!78kzhKa,Vv:Rx^\"><field name=\"COLOUR\">#0000ff</field></block></value></block></value></block></xml>","version":"0.20.3","type":"blockly"}}
+  title="Blockly Drawing Example"
+  description="Draws simple filletted cube geometry."
+/>
+
+### TypeScript Implementation
+
+Finally, we achieve the same result using TypeScript. The code follows a similar logical flow: create a cube, fillet its edges, define drawing options, and then draw the resulting shape. This approach offers maximum flexibility and control for developers comfortable with text-based coding.
+
+<BitByBitRenderCanvas
+  requireManualStart={true}
+  script={{"script":"const start = async () => {\n\n    const cubeOptions = new Bit.Inputs.OCCT.CubeDto();\n    cubeOptions.size = 5;\n    const cube = await bitbybit.occt.shapes.solid.createCube(cubeOptions);\n    const filletOptions = new Bit.Inputs.OCCT.FilletDto<Bit.Inputs.OCCT.TopoDSShapePointer>()\n    filletOptions.shape = cube;\n    filletOptions.radius = 1;\n    const roundedCube = await bitbybit.occt.fillets.filletEdges(filletOptions);\n\n    const drawOcctOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n    drawOcctOptions.faceColour = \"#0000ff\";\n    drawOcctOptions.edgeColour = \"#ff5555\";\n    drawOcctOptions.drawVertices = true;\n    drawOcctOptions.vertexSize = 0.3;\n    // The rest of options remain default (initialized inside the instance)\n    const drawnMesh = await bitbybit.draw.drawAnyAsync({ entity: roundedCube, options: drawOcctOptions })\n    // drawnMesh is BABYLONJS Mesh if BabylonJS engine is used. In Three.JS it turns into Group.\n    return drawnMesh;\n    \n}\n\nstart();","version":"0.20.3","type":"typescript"}}
+  title="TypeScript Drawing Example"
+  description="Draws simple filletted cube geometry."
+/>

docs/learn/code/common/draw/examples.mdx

@@ -0,0 +1,63 @@
+---
+sidebar_position: 1
+title: Understanding the "Draw" Category in Bitbybit Editors
+sidebar_label: Making Geometry Visible
+description: Learn how the "Draw" category and its components work across Bitbybit's TypeScript, Blockly, and Rete editors to render 3D geometry on the screen using BabylonJS.
+tags: [code, draw]
+---
+
+# The "Draw" Category: Making Geometry Visible
+
+<img 
+  src="https://s.bitbybit.dev/assets/icons/white/draw-icon.svg" 
+  alt="Draw category icon with a paintbrush" 
+  title="Draw category icon"
+  width="100" /> 
+
+## How Drawing Works in Bitbybit
+
+We've previously discussed the concept of drawing (or rendering) and how to frame your thinking about it [in this introductory section on drawing](/learn/getting-started/basics/drawing). While those examples often focused on the Blockly editor, this section will explain how drawing is handled more generally across all our editors and provide further examples.
+
+### Drawing Makes Things Appear on the Screen
+
+Without the "Draw" operations, the results of your geometric calculations and model creation would remain abstract and invisible. Seeing your creations helps you understand the consequences of your programming actions and allows you to visually verify your designs.
+
+Computers, and specifically their GPUs (Graphical Processing Units), are highly optimized for drawing **triangulated mesh objects**. In Bitbybit, we utilize the powerful **BabylonJS** game engine for all on-screen rendering. BabylonJS acts as an intermediary, communicating with your computer's GPU through web graphics APIs like WebGL or WebGPU. As a web-based game engine, BabylonJS is optimized for browsers, is open-source, and benefits from a large and active developer community.
+
+**Key Points about Drawing in Bitbybit:**
+*   **Everything is 3D:** While you can create 2D geometry and orient your camera to give a 2D appearance, all objects fundamentally exist in 3D space.
+*   **"Draw" Category is Common:** All our main editors (TypeScript, Blockly, Rete) feature a `draw` category.
+*   **`drawAnyAsync` - The Core Component/Function:** The most crucial component within this category is often named `drawAnyAsync` (or a similar variant depending on the editor). This versatile function/component is responsible for taking various abstract mathematical or geometric definitions (e.g., an OCCT shape, a list of points, a curve definition) and transforming them into BabylonJS meshes. These meshes are then rendered into your 3D scene and displayed on your 2D monitor.
+
+---
+
+## Drawing in the Rete Editor
+
+The Rete editor has a unique characteristic among our editors regarding drawing:
+*   **Immediate Drawing (Often by Default):** When you add a new component that produces a drawable output (like an OCCT shape), Rete often attempts to **immediately draw** the result on the screen.
+*   **Hiding Default Drawn Geometry:** You can control this default drawing behavior. For drawable components, access their "generic options" (usually by clicking a small arrow button on the component) and check the "Hide" checkbox.
+
+    **How to Hide Default Drawing in Rete:**
+    1.  Click the arrow button on a component to open its generic options:
+        ![A Rete component with an arrow button highlighted, indicating where to click to open generic options.](https://ik.imagekit.io/bitbybit/app/assets/start/general/editor-categories/open-generic-options.jpeg "Open generic component options")
+        *Open generic component options*
+
+    2.  Enable the "Hide" checkbox:
+        ![The generic options panel for a Rete component, with the "Hide" checkbox enabled.](https://ik.imagekit.io/bitbybit/app/assets/start/general/editor-categories/enable-hide-checkbox.jpeg "Enable Hide Checkbox")
+        *Enable Hide Checkbox*
+
+*   **Not All Components are Drawable:** This "Hide" option is only available for components that inherently produce a drawable output. For example, a component that simply creates a boolean value (true/false) won't have anything to draw directly and thus won't have a "Hide" option in its generic menu. (You could, of course, use that boolean value to control other drawable components or create 3D text from it.)
+
+**Performance Consideration for Rete:**
+While seeing immediate results is helpful during development, the process of drawing takes time and consumes computing resources. If every drawable step in a complex Rete script is rendered, it can slow down the editor's responsiveness.
+*   **Recommendation:** It's advisable to let intermediate steps draw while you are actively coding and debugging a particular part of your script. However, once you are satisfied with a segment, consider using the "Hide" checkbox for those intermediate drawable components. You should, of course, ensure the *final result* of your script is drawn, as that's usually the primary goal.
+
+### Drawing Defaults and Customization in Rete (and other editors)
+
+When a component in Rete (or a function/block in other editors) draws an object by default, it uses predefined drawing options.
+*   **OCCT Default Example:** OCCT shapes might default to red faces, or a white vase model might render with visible edges.
+*   **Customizing Appearance:** While these defaults are useful for quick visualization, you'll often want to customize the appearance (e.g., draw a face with a different color, render a vase without edges). This is where the `drawAnyAsync` component (or its equivalents) becomes essential. It allows you to pass specific **drawing options** (like color, material, edge visibility, etc.) to control how the final BabylonJS mesh is rendered.
+
+In the other editors (Blockly and TypeScript), drawing is typically more explicit. You will almost always use a "Draw" block or function call (like `drawAnyAsync`) and will have the opportunity to provide these drawing options directly as part of that operation.
+
+Understanding how to use the "Draw" category and its associated options is fundamental to creating visually appealing and informative 3D experiences in Bitbybit.