From afbe377fa1b7c6392e965a3132a20ad15c9cb7dc Mon Sep 17 00:00:00 2001 From: mrmrs Date: Sun, 3 Dec 2017 23:55:41 +0100 Subject: [PATCH 1/4] Update content. Add instructions for previewing on external devices. --- docs/getting-started.md | 24 +++++++++++++++++------- docs/index.md | 1 + 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index a8c2c24..8a5dfb7 100644 --- a/docs/getting-started.md +++ b/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,7 +13,7 @@ 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. Clicking on the props button in the upper right @@ -25,8 +24,7 @@ Clicking on the folder icon shows the current folder and allows you to open Iso- 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 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 +103,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. + + + +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 diff --git a/docs/index.md b/docs/index.md index 6933e5d..589015a 100644 --- a/docs/index.md +++ b/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) From c7ae2091918205ad39181d15e7b1f2857071571e Mon Sep 17 00:00:00 2001 From: mrmrs Date: Mon, 4 Dec 2017 00:17:05 +0100 Subject: [PATCH 2/4] Adding images --- docs/getting-started.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/getting-started.md b/docs/getting-started.md index 8a5dfb7..c295ccb 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -13,17 +13,21 @@ 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 current file. To the right is the editor pane, which shows the JSX source code by default. + Clicking on the props button in the upper right shows the YAML-based props editor, where page-level props can be defined. + Clicking on the folder icon shows the current folder and allows you to open Iso-compatible files. The Lab button opens the Compositor Lab app when the current folder includes a Lab project. + The HTTP button starts a local Preview server on port 8000 and opens the current page in the default browser 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. From a0c7ecbafc6325e47a5f3d351a762a7be375726a Mon Sep 17 00:00:00 2001 From: mrmrs Date: Mon, 4 Dec 2017 00:18:38 +0100 Subject: [PATCH 3/4] Update arrangement of images. --- docs/getting-started.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index c295ccb..bb01005 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -13,22 +13,23 @@ 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 current file. To the right is the editor pane, which shows the JSX source code by default. + - Clicking on the props button in the upper right shows the YAML-based props editor, where page-level props can be defined. + - Clicking on the folder icon shows the current folder and allows you to open Iso-compatible files. + The Lab button opens the Compositor Lab app when the current folder includes a Lab project. - The HTTP button starts a local Preview server on port 8000 and opens the current page in the default browser + + 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. From 1e6d9552fa688407e799057fde2a14e1d86b993d Mon Sep 17 00:00:00 2001 From: mrmrs Date: Mon, 4 Dec 2017 00:42:04 +0100 Subject: [PATCH 4/4] Updated the demo with front matter --- docs/demos/hello.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/demos/hello.jsx b/docs/demos/hello.jsx index 6878113..d00f6c6 100644 --- a/docs/demos/hello.jsx +++ b/docs/demos/hello.jsx @@ -1,3 +1,6 @@ +--- +title: Compositor Iso Demo +--- @@ -17,7 +20,7 @@ Lab Sync - Compositor Iso syncs with Lab to show real-time updates to components and design system constants and themes. + Iso syncs with Lab to show real-time updates to components and themes.