Merge pull request #46 from oslabs-beta/feature/readme

Updated Readmes with example image of tree layout

Author: PLCoster

README.md

@@ -73,7 +73,7 @@
 
 <br/>
 <p align="center">
-  <img width="900" src="./sapling/media/quizwall_demo.gif">
+  <img width="900" src="sapling/media/quizwall_demo.gif">
 </p>
 <br/>
 
@@ -94,14 +94,16 @@ With Sapling, you don't have to guess at the parent component of your current fi
 
 ## Installation
 
-Installing from VS Code Extension Marketplace (or downloading package from GitHub?).
+Installing from VS Code Extension Marketplace:
 
 1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).
 
 2. Install the Sapling extension for Visual Studio Code.
 
 3. Once complete, you'll see Sapling appear in your sidebar. You can now begin using Sapling! Check out the Getting Started below for information on how to get started.
 
+To install sapling for development, please see the contributing section below.
+
 ## Getting Started
 
 1. After installing VSCode Extension, you will see the extension on your sidebar. Click the "Choose a File" button.
@@ -184,11 +186,11 @@ Sapling prioritizes file dependencies over component dependencies. Consider the
     }
 ```
 
-Sapling will display Home and Navbar as siblings, both children of App: (image of actual Sapling here)
+Sapling will display Home and Navbar as siblings, both children of App:
 
-App
-  - Home
-  - Navbar
+<br />
+  <img src="sapling/media/readme-example.png">
+<br />
 
 ### Contributor Usage
 
@@ -205,8 +207,8 @@ Note: `Ctrl+R` (or `Cmd+R` on Mac) will refresh the extension development host
 
 This extension contributes the following settings:
 
-* `sapling.reactRouter`: enable/disable React Router component nodes
-* `sapling.thirdParty`: enable/disable all third party component nodes
+* `sapling.view.reactRouter`: enable/disable React Router component nodes
+* `sapling.view.thirdParty`: enable/disable all third party component nodes
 
 ## Contributing
 

sapling/README.md

@@ -104,14 +104,16 @@ With Sapling, you don't have to guess at the parent component of your current fi
 
 ## Installation
 
-Installing from VS Code Extension Marketplace (or downloading package from GitHub?).
+Installing from VS Code Extension Marketplace:
 
 1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).
 
 2. Install the Sapling extension for Visual Studio Code.
 
 3. Once complete, you'll see Sapling appear in your sidebar. You can now begin using Sapling! Check out the Getting Started below for information on how to get started.
 
+To install sapling for development, please see the contributing section below.
+
 ## Getting Started
 
 1. After installing VSCode Extension, you will see the extension on your sidebar. Click the "Choose a File" button.
@@ -208,9 +210,9 @@ Sapling prioritizes file dependencies over component dependencies. Consider the
 
 Sapling will display Home and Navbar as siblings, both children of App: (image of actual Sapling here)
 
-App
-  - Home
-  - Navbar
+<br />
+  <img src="media/readme-example.png">
+<br />
 
 ## Extension Settings