Add editor tour

docs/tours/editor-tour.md

@@ -0,0 +1,57 @@
+# Editor Tour
+* title: Editor tour
+* description: This tour shows the user around the LEGO MINDSTORMS EV3 editor, pointing out the toolbox, workspace, simulator, share button, and download button.
+
+## Welcome
+* title: Welcome!
+* description: New here? Take a tour of the editor!
+* highlight: nothing
+* location: center
+
+## EV3 Simulator
+* title: EV3 Simulator
+* description: See what your code looks like running on the simulator!
+* highlight: simulator
+* location: right
+
+## Toolbox
+* title: Toolbox
+* description: Drag out blocks of code from the Toolbox categories into the Workspace.
+* highlight: toolbox
+* location: right
+
+## Toolbox
+* title: Toolbox
+* description: Drag out snippets of code from the Toolbox categories into the Workspace.
+* highlight: monaco toolbox
+* location: right
+
+## Workspace
+* title: Workspace
+* description: Snap blocks of code together to build your program.
+* highlight: workspace
+* location: center
+
+## Workspace
+* title: Workspace
+* description: Write code to build your program.
+* highlight: monaco workspace
+* location: center
+
+## Share
+* title: Share
+* description: Create a link to your project to share with others.
+* highlight: share
+* location: below
+
+## Download
+* title: Download
+* description: Download your program onto your Arcade device.
+* highlight: download
+* location: above
+
+## Congrats
+* title: Congratulations!
+* description: You've completed the editor tour! 🤩🏆🤩 Happy coding!
+* highlight: everything
+* location: center

pxtarget.json

@@ -213,7 +213,10 @@
         "githubEditor": true,
         "chooseLanguageRestrictionOnNewProject": true,
         "openProjectNewTab": true,
-        "python": true
+        "python": true,
+        "tours": {
+            "editor": "/tours/editor-tour"
+        }
     },
     "ignoreDocsErrors": true,
     "uploadDocs": true

theme/site/globals/site.variables

@@ -201,4 +201,12 @@
    Extensions
 --------------------*/
 
-@extensionsHeaderBackground: @darkGrey;
+@extensionsHeaderBackground: @darkGrey;
+
+/*---------------------------
+   Teaching Bubble
+----------------------------*/
+
+@teachingBubbleBackgroundColor: @teal;
+@teachingBubbleTextColor: @white;
+@teachingBubbleStepsColor: @lightNougat;