Update README.md

README.md

@@ -3,14 +3,15 @@
 ## Video Tutorial
 [![Intro Video](https://res.cloudinary.com/circuito/image/upload/w_300,b_white/v1550053341/circuito_youtube_help_title.png)](https://www.youtube.com/watch?v=i3CpeFhRLI4)
 
-## Using GitPod
+## Using GitPod - Recommended
 [Edit using GitPod](http://gitpod.io/#https://github.com/Circuito-io/ComponentEditor)
 
 ## Creating a Local Development Environment
 1. Make sure you have [Node.js](https://nodejs.org/en/download/)
-2. Clone this repository
+2. Clone this repository and cd into it
 ```bash
-git clone https://github.com/Circuito-io/ComponentsEditor.git
+git clone https://github.com/Circuito-io/ComponentEditor.git
+cd ComponentEditor
 ```
 3. Init and update submodule
 ```bash
@@ -19,14 +20,12 @@ git submodule update
 ```
 3. Run npm install
 ```bash
-cd ComponentEditor
-npm install
+npm install --legacy-peer-deps
 ```
 4. Run the dev web server
 ```bash
 npm run dev
 ```
 5. Connect to the web server - http://localhost:8080
 6. Edit your files locally - components are in the ```components``` subfloder
-7. When ready - click the 'save&upload' button to sync local files with our server
-8. Click the 'preview' button to open your **private** circuito.io preview window
+7. When ready - click the 'Preview' button to sync local files with our server and open your **private** circuito.io preview window

components/Blocks/NodeMCU1.json

@@ -13,7 +13,7 @@
       "verified": false,
       "solder": false
     },
-    "desc": "<p>NodeMCU is an Arduino compatible ESP8266 based micro controller with on-board WiFi. It is great from internet of things projects or just as an Arduino replacement.</p>",
+    "desc": "<p>NodeMCU is an Arduino compatible ESP8266 based micro controller with on-board WiFi. It is great for Internet of Things (IoT) projects or just as an Arduino replacement.</p>",
     "visible": true
   },
   "circuits": [
@@ -1245,4 +1245,4 @@
       "cost": 2
     }
   ]
-}
+}

src/client/blocks-list.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Typeahead } from "react-bootstrap-typeahead";
 import { toast } from "react-toastify";
-import { ListGroup, Button } from "react-bootstrap";
+import { Button } from "react-bootstrap";
 import { update_a_block, update_a_coder } from "./controller.js";
 import { createNewCoder } from "./form/coderfield.js";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -18,7 +18,7 @@ function createNewBlockData(blockName) {
     name: blockName,
     blockId: blockId.toString(),
     app: {
-      appName: blockName,
+      appName: blockName.replace("_", " "),
       visible: true,
       indicators: {
         solder: false
@@ -102,7 +102,7 @@ export class BlocksList extends React.Component {
       actions: [
         Dialog.CancelAction(),
         Dialog.OKAction(dialog => {
-          const newBlockName = dialog.value;
+          const newBlockName = dialog.value.replace(" ", "_");
 
           analytics.track("Block Created", { name: newBlockName });
           analytics.track("Block Opened", { name: newBlockName });
@@ -196,7 +196,6 @@ export class BlocksList extends React.Component {
           continuous
           run={this.state.runHelp}
           callback={data => {
-            console.log(data);
             if (["stop", "skip", "close"].includes(data.action)) {
               firstTimeHelp = false;
               this.setState({ runHelp: false });

src/client/publish.js

@@ -28,16 +28,14 @@ export class Publish extends React.Component {
             <Modal.Title>How to publish your work</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <h4>Video comming soon.</h4>
-            After you fork the repo and commit your changes using the git panel
-            on the left, create a pull request using the pull-request panel on
-            the right, or directly in github in your fork.
-            {/*             
+            After you <b>fork</b> the repo and <b>commit</b> your changes using the git panel
+            on the left, create a <b>pull request</b> using the pull-request panel on
+            the right, or create the pull request directly in your github.
             <ReactPlayer
-              url="https://www.youtube.com/watch?v=i3CpeFhRLI4"
+              url="https://www.youtube.com/watch?v=1EkRuXEPBO4"
               width="90%"
               controls={true}
-            /> */}
+            />
           </Modal.Body>
           <Modal.Footer>
             <Button variant="secondary" onClick={this.handleClose}>
@@ -46,7 +44,12 @@ export class Publish extends React.Component {
           </Modal.Footer>
         </Modal>
 
-        <Button variant="secondary" id="btn-publish" onClick={this.handleShow} style={{margin: "0px 2px"}}>
+        <Button
+          variant="secondary"
+          id="btn-publish"
+          onClick={this.handleShow}
+          style={{ margin: "0px 2px" }}
+        >
           Publish
         </Button>
       </React.Fragment>