Skip to content

Commit 551bd4c

Browse files
authored
Updating import docs
Tweaks the copy, adds a section for Remark-Codesandbox cc @kevin940726
1 parent 8ebcf81 commit 551bd4c

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

packages/homepage/content/docs/2-importing.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,19 @@ description:
88

99
## Create Wizard
1010

11-
The most popular way of creating a new sandbox is the Create Wizard.
11+
The most popular way of creating a new sandbox is the Create Sandbox screen.
1212

13-
![Create Wizard](./images/create-wizard.png)
13+
![Create Sandbox screen](./images/create-wizard.png)
1414

15-
The Create Wizard shows you all public templates that are currently available,
16-
and takes you to the sandbox that corresponds to the template. You can edit and
17-
fork this sandbox to continue with the template.
15+
The Create Sandbox screen shows you all of the public templates that are currently available, including official templates and those created by the community. These are automatically forked when you select them, so you can edit and begin creating your own sandbox.
1816

1917
## Import from GitHub
2018

21-
You can import a GitHub repository in CodeSandbox by going to the
22-
[import wizard](https://codesandbox.io/s/github) and giving the URL to your
19+
You can import a GitHub repository in to CodeSandbox from the
20+
[import wizard](https://codesandbox.io/s/github) and pasting the URL to your
2321
GitHub repository. Note that we just take the last part of the url (everything
24-
after github.com) and paste it after codesandbox.io/s/github/. We support custom
25-
branches and subdirectories as well. Here is an example URL:
22+
after github.com) and append it after codesandbox.io/s/github/. We support custom
23+
branches and subdirectories. Here is an example URL:
2624
[https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).
2725

2826
The imported repository will always stay up to date with your latest commits.
@@ -54,13 +52,12 @@ Additionally, you may specify a `template` property in your
5452
You can find the source of our git extractor
5553
[here](https://github.com/codesandbox-app/git-extractor).
5654

57-
## Export with CLI
55+
## Import Local projects via CLI
5856

59-
You can export a local project to CodeSandbox by using our
57+
You can import a local project in to CodeSandbox by using our
6058
[CLI](https://github.com/codesandbox-app/codesandbox-importers/tree/master/packages/cli).
6159

62-
You can install our CLI by running `npm install -g codesandbox`. Then you can
63-
export a project by running `codesandbox {directory}`.
60+
You can install our CLI by running `npm install -g codesandbox`. Then import a project by running `codesandbox {directory}`.
6461

6562
### Example usage
6663

@@ -72,8 +69,8 @@ $ codesandbox ./
7269
## Define API
7370

7471
We offer an API that allows you to programmatically create a sandbox. This is
75-
most often useful in documentation: code examples can generate a sandbox on the
76-
fly. You can call the endpoint `https://codesandbox.io/api/v1/sandboxes/define`
72+
useful for documentation, enabling you to generate a sandbox on the
73+
fly from code examples. You can call the endpoint `https://codesandbox.io/api/v1/sandboxes/define`
7774
both with a `GET` and with a `POST` request.
7875

7976
### Supported Parameters
@@ -160,8 +157,8 @@ the result will be json data providing you with the `sandbox_id` of the new
160157
sandbox.
161158

162159
This is useful, for instance, if you need to create a new sandbox
163-
programmatically, so you can then embed it on your site (See Embed
164-
documentation).
160+
programmatically, so you can then embed it on your site (See [Embed
161+
documentation](/docs/embedding)).
165162

166163
Both `get` and `post` requests are supported.
167164

@@ -172,9 +169,9 @@ example sandbox of that is here:
172169

173170
<iframe src="https://codesandbox.io/embed/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
174171

175-
## Import single Component as a Sandbox
172+
## Import Single Components
176173

177-
You can export a local component to CodeSandbox by using our other
174+
You can import a local component in to CodeSandbox by using our other
178175
[CLI](https://github.com/codesandbox/codesandboxer/tree/master/packages/codesandboxer-fs).
179176

180177
You can install our CLI by running `npm install -g codesandboxer-fs`. Then you
@@ -189,11 +186,10 @@ This will print out the id of a sandbox that does nothing but render the
189186
targeted component, along with a link to that sandbox. This will also bundle in
190187
other local files used by the component to ensure render.
191188

192-
## Import Using React-Codesandboxer
189+
## Import Using Codesandboxer
193190

194-
Import from a single file from a git repository, along with supplemental files
195-
and dependencies. Using this creates an easy way to upload an example instead of
196-
an entire git repository.
191+
[Codesandboxer](https://github.com/codesandbox/codesandboxer) imports a single file from a git repository, along with supplemental files and dependencies. Using this creates an easy way to upload an example instead of
192+
an entire git repository. This enables you to easily share examples with others, or to link to editable versions of examples from a documentation website. React-codesandboxer is the main version, but there are also versions for VS Code, Atom, and Bitbucket.
197193

198194
### How it works
199195

@@ -203,7 +199,7 @@ entry point, then uses the Define API to upload the necessary files into a new
203199
`create-react-app` sandbox.
204200

205201
Check out the
206-
[react-codesandboxer docs](https://github.com/noviny/react-codesandboxer) for
202+
[codesandboxer docs](https://github.com/codesandbox/codesandboxer) for
207203
information on how to implement it.
208204

209205
```jsx harmony
@@ -223,3 +219,7 @@ export default () => (
223219
</CodeSandboxer>
224220
);
225221
```
222+
223+
## Import Using Remark-Codesandbox
224+
225+
[Remark-Codesandbox](https://github.com/kevin940726/remark-codesandbox) is a remark plugin for creating sandboxes directly from code blocks in documentation. Developed by CodeSandbox community member Kai Hao, it supports popular platforms including MDX, Gatsby, Storybook Docs, docz etc. Learn more about it in their [documentation](https://github.com/kevin940726/remark-codesandbox#remark-codesandbox).

0 commit comments

Comments
 (0)