Improve clarity of docs

packages/replicad-docs/docs/tutorial-making-a-watering-can/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Making a design watering can",
+  "label": "Making a watering can",
   "position": 3
 }

packages/replicad-docs/docs/tutorial-making-a-watering-can/combining-the-shapes.md

@@ -3,6 +3,25 @@ sidebar_position: 5
 title: Combining the shapes
 ---
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 Now that we have our three bodies we want to put them together (and smooth the
 corners it creates).
 
@@ -166,7 +185,7 @@ const main = () => {
 };
 ```
 
-## Creating an hollow shape {39-50}
+## Creating an hollow shape
 
 For now, we still have a full shape. We need to make it hollow - to be able to
 put water in it. Remember we are building a watering can.
@@ -177,7 +196,7 @@ faces that will be hollowed out, and give the thickness of the walls.
 We need to do a little bit of maths to find the coordinates of the end of the
 spout.
 
-```js withWorkbench
+```js {39-50} withWorkbench
 const { makePlane, makeCylinder, draw, drawCircle } = replicad;
 
 const main = () => {

packages/replicad-docs/docs/tutorial-making-a-watering-can/creating-the-shapes.md

@@ -3,6 +3,25 @@ sidebar_position: 4
 title: Creating the 3D shapes
 ---
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 We now have the basic drawing to create our 3D shapes:
 
 - the can body for which we have a profile drawing
@@ -31,7 +50,7 @@ const main = () => {
 ```
 
 We have seen the first step in the previous page. We draw a circle and sketch
-it in the 3D space on a plane (here the default `"XY"` plane).
+it in the 3D space on a plane (here the default `XY` plane).
 
 We extrude it, making a copy of itself in a certain direction and filling the
 sides.
@@ -78,8 +97,8 @@ translate (with a different origin).
 
 ## The can body
 
-To create the can body we will use the profile we drew, sketch it on the `"XZ"`
-plane and rotate it around the `"Z"` axis:
+To create the can body we will use the profile we drew, sketch it on the `XZ`
+plane and rotate it around the `Z` axis:
 
 ```js withWorkbench
 const { draw } = replicad;

packages/replicad-docs/docs/tutorial-making-a-watering-can/drawing-the-body.md

@@ -3,6 +3,25 @@ sidebar_position: 2
 title: Drawing the body profile
 ---
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 So let's start by the body of our can. We will take the general approach of
 drawing a profile that will then be revolved.
 

packages/replicad-docs/docs/tutorial-making-a-watering-can/using-planes-for-spiller.md

@@ -3,11 +3,30 @@ sidebar_position: 3
 title: Using planes for the filler
 ---
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 In order to build the filler we will need to place three circles (that will be
 lofted later on).
 
 We will approach this by drawing on three different planes. The first one is
-simple, it corresponds to the plane parallel to the "XY" plane, but at
+simple, it corresponds to the plane parallel to the `XY` plane, but at
 a certain distance from the origin.
 
 ```js withWorkbench
@@ -18,8 +37,8 @@ const main = () => {
 };
 ```
 
-Note that sketching on a plane parallel to a standard one (`"XY"`, `"XZ"` or
-`"YZ"` is a common operation and you can use the shortcut
+Note that sketching on a plane parallel to a standard one (`XY`, `XZ` or
+`YZ` is a common operation and you can use the shortcut
 
 ```js withWorkbench
 const { drawCircle } = replicad;

packages/replicad-docs/docs/tutorial-overview/drawing.md

@@ -3,6 +3,25 @@ sidebar_position: 2
 title: Drawing
 ---
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 Let's start in two dimensions only, we will add the third one soon enough.
 replicad provides some classes and functions to draw in the plane.
 

packages/replicad-docs/docs/tutorial-overview/planes-and-sketches.md

@@ -18,7 +18,7 @@ const main = () => {
 };
 ```
 
-By default this sketches on the "XY" plane.
+By default this sketches on the `XY` plane.
 
 ## Planes
 

packages/replicad-docs/docs/tutorial-overview/using-the-workbench.md

@@ -26,6 +26,25 @@ You should see something like that:
 
 Congratulation you have built your first model with replicad!
 
+:::tip
+
+<div style={{display: "flex", flexDirection: "row", justifyContent:
+"space-between"}}>
+
+<div style={{maxWidth: "calc(100% - 120px)"}}>
+
+You can click on the `Open in workbench` button in most code samples to see (and
+edit them) within the workbench.
+
+</div>
+
+<div style={{width: "100px"}}>
+<img src="/img/tutorial/workbench.png" alt="The workbench button" />
+</div>
+</div>
+
+:::
+
 ## Direct links
 
 You can even open a model directly in the workbench if you click on the `Open in workbench` button next to the copy button!