Skip to content

Commit 815253c

Browse files
jxnblkjxnblk
authored
Merge pull request #2 from c8r/docs-copy-edits
Docs copy edits
2 parents 7412231 + ce6706e commit 815253c

File tree

3 files changed

+72
-86
lines changed

3 files changed

+72
-86
lines changed

‎docs/demos/hello.jsx

+50-80
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,51 @@
1+
---
2+
title: Compositor Iso Demo
3+
---
14
<Hero>
2-
<Heading fontSize={7}>
3-
Hello
4-
</Heading>
5-
<Text
6-
fontSize={3}
7-
mb={4}
8-
>
9-
Welcome to Iso, a prototyping environment for Lab UI components.
10-
</Text>
11-
<Button>
12-
Click Me
13-
</Button>
14-
</Hero>
15-
<Container>
16-
<Flex
17-
mx={-3}
18-
wrap
19-
>
20-
<Box
21-
mb={4}
22-
px={3}
23-
width={[
24-
1,
25-
0.5
26-
]}
27-
>
28-
<Subhead>
29-
Lab Sync
30-
</Subhead>
31-
<Text>
32-
Compositor Iso syncs with Lab to show real-time updates to components and design system constants and themes.
33-
</Text>
34-
</Box>
35-
<Box
36-
mb={4}
37-
px={3}
38-
width={[
39-
1,
40-
0.5
41-
]}
42-
>
43-
<Subhead>
44-
Zero Setup
45-
</Subhead>
46-
<Text>
47-
Prototype and build pages without the need to open up terminal or spend any time setting up development servers.
48-
</Text>
49-
</Box>
50-
<Box
51-
mb={4}
52-
px={3}
53-
width={[
54-
1,
55-
0.5
56-
]}
57-
>
58-
<Subhead>
59-
Export HTML
60-
</Subhead>
61-
<Text>
62-
Use Iso to quickly build prototypes or static HTML pages using components built with Lab.
63-
</Text>
64-
</Box>
65-
<Box
66-
mb={4}
67-
px={3}
68-
width={[
69-
1,
70-
0.5
71-
]}
72-
>
73-
<Subhead>
74-
One-Click Publishing
75-
</Subhead>
76-
<Text>
77-
Quickly share ideas with your team using the built-in publishing service.
78-
</Text>
79-
</Box>
80-
</Flex>
81-
</Container>
5+
<Heading
6+
fontSize={7}>
7+
Hello
8+
</Heading>
9+
<Text fontSize={3} mb={4}>
10+
Welcome to Iso, a prototyping environment for Lab UI components.
11+
</Text>
12+
<Button>
13+
Click Me
14+
</Button>
15+
</Hero>
16+
<Container>
17+
<Flex wrap mx={-3}>
18+
<Box px={3} mb={4} width={[ 1, 1/2 ]}>
19+
<Subhead>
20+
Lab Sync
21+
</Subhead>
22+
<Text>
23+
Iso syncs with Lab to show real-time updates to components and themes.
24+
</Text>
25+
</Box>
26+
<Box px={3} mb={4} width={[ 1, 1/2 ]}>
27+
<Subhead>
28+
Zero Setup
29+
</Subhead>
30+
<Text>
31+
Prototype and build pages without the need to open up terminal or spend any time setting up development servers.
32+
</Text>
33+
</Box>
34+
<Box px={3} mb={4} width={[ 1, 1/2 ]}>
35+
<Subhead>
36+
Export HTML
37+
</Subhead>
38+
<Text>
39+
Use Iso to quickly build prototypes or static HTML pages using components built with Lab.
40+
</Text>
41+
</Box>
42+
<Box px={3} mb={4} width={[ 1, 1/2 ]}>
43+
<Subhead>
44+
One-Click Publishing
45+
</Subhead>
46+
<Text>
47+
Quickly share ideas with your team using the built-in publishing service.
48+
</Text>
49+
</Box>
50+
</Flex>
51+
</Container>

‎docs/getting-started.md

+21-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11

22
# Getting Started
33

4-
Iso is an isolated prototyping environment and page builder for Lab UI components,
5-
which lets you preview Lab components in real time using a simplified [JSX][jsx] code editor.
6-
Iso allows you to build full pages and prototypes without
7-
any development environment setup.
4+
Iso is an isolated prototyping environment and page builder for Lab UI components.
5+
Preview edits to Lab components in real time using a simplified [JSX][jsx] code editor.
6+
Build, design, and publish pages without needing to setup a development environment.
87

98
When opening Iso for the first time, you'll see the `getting-started.jsx`
109
example file.
@@ -14,18 +13,22 @@ Each Iso file acts like a component and can be exported as static HTML.
1413

1514
## User Interface
1615

17-
The main area on the left of Iso's window is a live preview of the currently opened file.
16+
The main area on the left of Iso's window is a live preview of the current file.
1817
To the right is the editor pane, which shows the JSX source code by default.
18+
<img src='https://c8r-x0.s3.amazonaws.com/code.jpg' />
1919

2020
Clicking on the props button in the upper right
2121
shows the YAML-based props editor,
2222
where page-level props can be defined.
23+
<img src='https://c8r-x0.s3.amazonaws.com/props.jpg' />
2324

2425
Clicking on the folder icon shows the current folder and allows you to open Iso-compatible files.
26+
<img src='https://c8r-x0.s3.amazonaws.com/folder.jpg' />
2527

2628
The Lab button opens the Compositor Lab app when the current folder includes a Lab project.
2729

28-
The HTTP button starts a local Preview server and opens the current page in the default browser.
30+
The HTTP button starts a local Preview server on port 8000 and opens the current page in the default browser
31+
<img src='https://c8r-x0.s3.amazonaws.com/http.jpg' />
2932

3033
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.
3134

@@ -105,6 +108,18 @@ Changes made in the Lab app will automatically be applied to an open Iso file.
105108
Lab components with the same name as an Iso primitive will override the defaults.
106109
This is useful for custom Heading and Link styles.
107110

111+
### Previewing on External Devices
112+
113+
To preview this page from an external device, first navigate to System Preferences > Network to find your IP address.
114+
115+
<img src='https://c8r-x0.s3.amazonaws.com/network.png' />
116+
117+
On an external device enter in the IP address followed by :8000
118+
```
119+
http://169.254.163.132:8000
120+
```
121+
The external device must be on the same wifi network as your computer.
122+
108123

109124
[jsx]: https://reactjs.org/docs/introducing-jsx.html
110125
[yaml]: http://yaml.org

‎docs/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
# Compositor Iso
33

44
Build pages and prototypes with Lab UI components. No configuration or build setup required.
5+
One-click page publishing.
56

67
- [Installation](installation.md)
78
- [Getting Started](getting-started.md)

0 commit comments

Comments
 (0)