Merge pull request #2 from c8r/docs-copy-edits

Docs copy edits

docs/demos/hello.jsx

@@ -1,81 +1,51 @@
+---
+title: Compositor Iso Demo
+---
 <Hero>
-    <Heading fontSize={7}>
-      Hello
-    </Heading>
-    <Text
-      fontSize={3}
-      mb={4}
-    >
-      Welcome to Iso, a prototyping environment for Lab UI components.
-    </Text>
-    <Button>
-      Click Me
-    </Button>
-  </Hero>
-  <Container>
-    <Flex
-      mx={-3}
-      wrap
-    >
-      <Box
-        mb={4}
-        px={3}
-        width={[
-          1,
-          0.5
-        ]}
-      >
-        <Subhead>
-          Lab Sync
-        </Subhead>
-        <Text>
-          Compositor Iso syncs with Lab to show real-time updates to components and design system constants and themes.
-        </Text>
-      </Box>
-      <Box
-        mb={4}
-        px={3}
-        width={[
-          1,
-          0.5
-        ]}
-      >
-        <Subhead>
-          Zero Setup
-        </Subhead>
-        <Text>
-          Prototype and build pages without the need to open up terminal or spend any time setting up development servers.
-        </Text>
-      </Box>
-      <Box
-        mb={4}
-        px={3}
-        width={[
-          1,
-          0.5
-        ]}
-      >
-        <Subhead>
-          Export HTML
-        </Subhead>
-        <Text>
-          Use Iso to quickly build prototypes or static HTML pages using components built with Lab.
-        </Text>
-      </Box>
-      <Box
-        mb={4}
-        px={3}
-        width={[
-          1,
-          0.5
-        ]}
-      >
-        <Subhead>
-          One-Click Publishing
-        </Subhead>
-        <Text>
-          Quickly share ideas with your team using the built-in publishing service.
-        </Text>
-      </Box>
-    </Flex>
-  </Container>
+  <Heading
+    fontSize={7}>
+    Hello
+  </Heading>
+  <Text fontSize={3} mb={4}>
+    Welcome to Iso, a prototyping environment for Lab UI components.
+  </Text>
+  <Button>
+    Click Me 
+  </Button>
+</Hero>
+<Container>
+  <Flex wrap mx={-3}>
+    <Box px={3} mb={4} width={[ 1, 1/2 ]}>
+      <Subhead>
+        Lab Sync
+      </Subhead>
+      <Text>
+        Iso syncs with Lab to show real-time updates to components and themes.
+      </Text>
+    </Box>
+    <Box px={3} mb={4} width={[ 1, 1/2 ]}>
+      <Subhead>
+        Zero Setup
+      </Subhead>
+      <Text>
+        Prototype and build pages without the need to open up terminal or spend any time setting up development servers.
+      </Text>
+    </Box>
+    <Box px={3} mb={4} width={[ 1, 1/2 ]}>
+      <Subhead>
+        Export HTML
+      </Subhead>
+      <Text>
+        Use Iso to quickly build prototypes or static HTML pages using components built with Lab.
+      </Text>
+    </Box>
+    <Box px={3} mb={4} width={[ 1, 1/2 ]}>
+      <Subhead>
+        One-Click Publishing
+      </Subhead>
+      <Text>
+        Quickly share ideas with your team using the built-in publishing service.
+      </Text>
+    </Box>
+  </Flex>
+</Container>

docs/getting-started.md

@@ -1,10 +1,9 @@
 
 # Getting Started
 
-Iso is an isolated prototyping environment and page builder for Lab UI components,
-which lets you preview Lab components in real time using a simplified [JSX][jsx] code editor.
-Iso allows you to build full pages and prototypes without
-any development environment setup.
+Iso is an isolated prototyping environment and page builder for Lab UI components.
+Preview edits to Lab components in real time using a simplified [JSX][jsx] code editor.
+Build, design, and publish pages without needing to setup a development environment.
 
 When opening Iso for the first time, you'll see the `getting-started.jsx`
 example file.
@@ -14,18 +13,22 @@ Each Iso file acts like a component and can be exported as static HTML.
 
 ## User Interface
 
-The main area on the left of Iso's window is a live preview of the currently opened file.
+The main area on the left of Iso's window is a live preview of the current file.
 To the right is the editor pane, which shows the JSX source code by default.
+<img src='https://c8r-x0.s3.amazonaws.com/code.jpg' />
 
 Clicking on the props button in the upper right
 shows the YAML-based props editor,
 where page-level props can be defined.
+<img src='https://c8r-x0.s3.amazonaws.com/props.jpg' />
 
 Clicking on the folder icon shows the current folder and allows you to open Iso-compatible files.
+<img src='https://c8r-x0.s3.amazonaws.com/folder.jpg' />
 
 The Lab button opens the Compositor Lab app when the current folder includes a Lab project.
 
-The HTTP button starts a local Preview server and opens the current page in the default browser.
+The HTTP button starts a local Preview server on port 8000 and opens the current page in the default browser 
+<img src='https://c8r-x0.s3.amazonaws.com/http.jpg' />
 
 The title bar includes the path and file name for the currently opened file. Clicking on any part of the path will navigate to that folder.
 
@@ -105,6 +108,18 @@ Changes made in the Lab app will automatically be applied to an open Iso file.
 Lab components with the same name as an Iso primitive will override the defaults.
 This is useful for custom Heading and Link styles.
 
+### Previewing on External Devices
+
+To preview this page from an external device, first navigate to System Preferences > Network to find your IP address. 
+
+<img src='https://c8r-x0.s3.amazonaws.com/network.png' />
+
+On an external device enter in the IP address followed by :8000 
+```
+http://169.254.163.132:8000
+```
+The external device must be on the same wifi network as your computer.
+
 
 [jsx]: https://reactjs.org/docs/introducing-jsx.html
 [yaml]: http://yaml.org

docs/index.md

@@ -2,6 +2,7 @@
 # Compositor Iso
 
 Build pages and prototypes with Lab UI components. No configuration or build setup required.
+One-click page publishing.
 
 - [Installation](installation.md)
 - [Getting Started](getting-started.md)